Understanding THML

What is HTML? Tags Attributes Colors text formatting Links Images Lists Tables Frames forms

HTML is a language that helps you to create websites HTML stands for Hyper Text Markup Language HTML is the predominant markup language for web pages The language uses TAGS to describe web pages Using HTML you can develop not very demanding web pages but this can be the beginning for achieving professional sites. There are many programs with which writing HTML is no longer necessary, these programs write it for you. But these programs do not offer complete control on designing your web pages and to build a web page requires at least some basic knowledge of HTML.

<HTML> <HEAD> <TITLE>My web page</TITLE> </HEAD> <BODY> Hello!<BR> This is my first web page!<BR> </BODY> </HTML>

single tags (no closing tag) Examples: <HR> <BR>

They available only in the starting tag and can be defined as properties of tags. If a tag has no attributes, then the browser will take into account the default value <BODY BGCOLOR="#A8A8A8" > - will give gray color to the background <FONT COLOR="#FF0000" > - will color the text in red <FONT SIZE="6" > - will scale the text with the largest size

Tag Name Attribute name Attribute value Details <A> Anchor Href URL Address to which we want to be connected Target _self _parent _top Display bgcolor color code color name Background color Leftmargin percentage from page width in pixels The distance between the left margin of window browser and the left edge of the page Topmargin percent from page height in pixels The distance between the top edge of window browser and top of page <CENTER> Display in the center of the page Frameborder 1 or 0 Frame has/not border Marginheight number of pixels Space above/under a frame Marginwidth number of pixels Space to the left/right of a frame

We can define the HTML colors by using hexadecimal notation (HEX) or the RGB notation that means a combination of Red, Green and Blue color <BODY BGCOLOR="#A8A8A8" > <FONT COLOR="#000000" >Your text here</FONT>

HTML uses tags for text formatting. Examples of tags are: <B> for bold text <I> for italic text In order to choose the characteristics of a text we use <FONT> tag. This tag has several attributes like color, face, size. Color attribute refers to color of the text that will be surrounded by tags <FONT> and </FONT> <FACE> attribute shows the font type and <SIZE> attribute shows the font size. Example: <FONT SIZE="4" FACE="ARIAL" COLOR="BLUE"> Your text here </FONT> <FONT SIZE="3" FACE="VERANDA" COLOR="RED"> Your text here </FONT>

A HTML link is a sequence of commands that perform links to a new document, an image or another HTML page. The link is made between <A> tag. The name of these tag comes from anchor and the tag will be use with HREF attribute. The line of code to insert a link in a web page will have the following form: <A HREF="url">Link text</A> <HTML> <HEAD> <TITLE>Links</TITLE> </HEAD> <BODY> <CENTER><B>Links</B> <BR> <A HREF="images.html">Text link</A></CENTER> </BODY> </HTML>

Specifies where to open the linked document. It can be opened in a new browser window or in the same window. The example bellow will open the linked document in a new tab. Example: <A HREF="url" target="_blank">Link text</A>

Internal - to specific places on the page. Example: href="#anchorname“ Local - to the other pages but on the same field. Example: href="../images/html.png“ Global - to other domains. Example: href="http://www.htmlbasic.com"

If we want to get some opinions from users, then the page should have a link to an e-mail address. The general form of a link to an e-mail address is: <A HREF="mailto: e-mail address">Send me an e-mail</A>

Each link of a web page has three colors: a color for unvisited links a color for visited links a color for active links (when the mouse is over them) For each color, of the links above, is one attribute of the tag <BODY> with which we can change the default color: <LINK> for unvisited links <VLINK> for visited links <ALINK> for active connections If we want that links in our page to be red when they aren't visited, black when they are visited and yellow when the mouse passes over them, we must use the following line code: <BODY LINK="#FF0000" VLINK="#000000" ALINK="#FFFF00">

Images are defined with the <IMG> tag, accompanied by SRC (source) indicating the address or path to the image you want to use. The general form of this tag will be: <IMG SRC="imagename.extension"> <HTML> <HEAD> <TITLE>Images</TITLE> </HEAD> <BODY> <CENTER><B>Images</B> <BR> <IMG SRC="html.png"></CENTER> </BODY> </HTML>

Specifies an alternate text for an image, if the image cannot be displayed. The value of the ALT attribute is given by the author. It also provides information for an image if the user cannot view it from different reasons. If you move the mouse cursor over the image, will appear the text written in the ALT attribute like in the following example: <IMG SRC="html.png" alt="logohtml">

To specify the dimension of an image we use the height and width attributes. The attribute values are specified in pixels by default but they also can be represented as a percentage. Example: <IMG SRC="html.png" alt="logohtml" width="320" height="240">

For align an image we are using ALIGN and VALIGN attributes. Functionality of these attributes are: Align (horizontal alignment): right left center Valign (vertical alignment): top bottom center

To create an unordered list we should use tags like <UL> and </UL> (names of these tags comes from "unordered list"). Each list item should be inserted by the tag <LI> (list item). For a better understanding let's see how HTML code for the list above looks like: <HTML> <HEAD> <TITLE>Lists</TITLE> </HEAD> <BODY> <UL>Unordered list <LI>List element 1 <LI>List element 2 <LI>List element 3 </UL> </HTML> HTML lists can be ordered or unordered: List element 1 List element 3 List element 2

To create an ordered list we should use tags like <OL> and </OL>. Instead of numbers you can replace them with Roman numbers or letters, both capital and lower-case. Use the TYPE attribute to change the numbering like in the following example: <OL TYPE="a"> <OL TYPE="A"> <OL TYPE="i"> <OL TYPE="I">

START is another attribute of the ordered lists and this specifies the number or letter with which the list would start. <OL TYPE="1" START="3"> <LI>List element 1 <LI>List element 2 <LI>List element 3 </OL> <OL TYPE="a" START="5"> <LI>List element 1 <LI>List element 2 <LI>List element 3 </OL>

HTML tables can be defined by using <TABLE> tag. A table in HTML contains rows, defined by the <TR> tag, and cells, defined by the <TD> tag. <TR> tag comes from "table row" while <TD> comes from "table data". A <TD> tag can contain text, images, links, lists, forms and other tables. Let's see an example for a simple table: <TABLE BORDER="1"> <TR> <TD>Cell 1</TD> <TD>Cell 2</TD> </TR> </TABLE> The BORDER attribute will specify how thick the border will be. If we don't specify a border attribute, the table will be displayed without borders. The color border can be set by using BORDERCOLOR attribute.

Can be defined by: Table HEIGHT - is a table attribute that defines the height of the table. The value of this attribute can be expressed in pixels or percentage of the page; <TABLE HEIGHT="50"> Table WIDTH - is a table attribute that defines the width of the table. The value of this attribute can be expressed in pixels or percentage of the page; <TABLE WIDTH="100">

CELLPADDING - offers opportunities of adjusting the white space of the table, that means the distance between cell borders and the content within; CELLSPACING - defines the width of the border;

ROWSPAN - it is used to span multiple rows; <TABLE BORDER="1"> <TR><TD ROWSPAN="2">Cell 1</TD> <TD>Cell 2</TD></TR> <TR><TD>Cell 3</TD></TR> </TABLE> COLSPAN - it is used to span multiple columns; <TABLE BORDER="1"> <TR><TD>Cell 1</TD> <TD>Cell 2</TD></TR> <TR><TD COLSPAN="2">Cell 3</TD></TR> </TABLE>

HTML frames help us to display multiple html documents in a web page. This frames are independent one of the other. A frameset is a file that specifies how the screen is divided into frames or specifies the WebPages to display in each frame of the main web page. Here we have an example that divides the page into two horizontal frames, one having 30% of the page and other 70%. <FRAMESET ROWS="30%,*"> </FRAMESET> FRAMESET ROWS - defines the height that each frame will have; FRAMESET COLS - defines the width that each frame will have; FRAME SRC - defines the location of the web page that will be loaded into the frame;

FRAMEBORDER - shows the frame border. A zero value hides the border; BORDER - gives the border width; FRAMESPACING - modifies the border width (attribute used on Internet Explorer); Example Frames: <HTML> <HEAD> <TITLE> HTML frames </TITLE> </HEAD> <FRAMESET ROWS="30%,*" FRAMEBORDER="2" BORDER="2"> <FRAME SRC="title.php"> <FRAMESET COLS="20%,*" FRAMEBORDER="2" BORDER="2"> <FRAME SRC="menu.php"> <FRAME SRC="pagecontent.php"> </FRAMESET> </HTML>

HTML forms are used to obtain useful information about users such as name, address, e-mail or phone. By these forms users are transferring information to the server. This information is entered by elements like text fields, checkboxes, submit buttons, radio buttons, lists, textarea. To create a form we will use <FORM> tag like in the following example: <FORM> form elements </FORM> One of the most important form element is TYPE attribute of the <INPUT> tag. The attributes of this tag are: TYPE - determine the type of text field. Example: text, textarea or password field; NAME - assign a name field to refer to it later; SIZE - set the field size; MAXLENGHT - maximum number of characters that can be introduced.

1-Text fields Defined by: TYPE="text". Example: <FORM> Full name: <INPUT TYPE="text" NAME="fullname"> Address: <INPUT TYPE="text" NAME="address"> </FORM> 2-Password field Defined by: TYPE="password". Example: <FORM> Password: <INPUT TYPE="password" NAME="password"> </FORM> 3-Radio buttons Defined by: TYPE="radio". Example: <FORM> <INPUT TYPE="radio" NAME="choice" VALUE="yes"> Yes <INPUT TYPE="radio" NAME="choice" VALUE="no">No </FORM> 4-Check boxes Defined by: TYPE="checkbox". Example: <FORM> <INPUT TYPE="checkbox" NAME="colors" VALUE="black"> Black <INPUT TYPE="checkbox" NAME="colors" VALUE="white">White </FORM

5-Submit button Defined by: TYPE="submit". Example: <FORM NAME="input" ACTION="mailto:youremail@email.com" METHOD="get"> NAME: <INPUT TYPE="text" NAME="username"> <INPUT TYPE="submit" VALUE="submit"> </FORM> 6-Text area T ext area is used as a text edit field where the user can enter comments that will be sent later to the server. The attributes that has to be specified of text area are <ROWS> and <COLUMNS>. Let's see an example: <FORM ACTION="mailto:youremail@email.com" METHOD="get"> <TEXTAREA ROWS="5" COLS="10" NAME="textarea"> Your text here </TEXTAREA> </FORM> 7-Drop down lists To create a drop down list we will use SELECT tag followed by OPTION tags. The OPTION tags represents the available choices for the user. Let's see how to do it: <FORM ACTION="mailto:youremail@email.com" METHOD="get"> Which continent you belong? <SELECT NAME="continent"> <OPTION> Select continent </OPTION> <OPTION> Asia </OPTION> <OPTION> Africa </OPTION> <OPTION> North America </OPTION> <OPTION> South America </OPTION> <OPTION> Antartica </OPTION> <OPTION> Europe </OPTION> <OPTION> Australia </OPTION> </SELECT> </FOR

Understanding THML

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Understanding THML (20)

Recently uploaded (20)

Understanding THML