HTML Stands For Hypertext Markup Language and Is The Publishing Language of The World Wide Web
HTML Stands For Hypertext Markup Language and Is The Publishing Language of The World Wide Web
HTML stands for HyperText Markup Language and is the publishing language of the World Wide Web.
Basic HTML document structure. Tags Elements Attributes 1.The HTML element. 2.The HEAD element. 3.The TITLE element. 4.The BODY element.
Tags
A tag is special text--"markup"--that is delimited by '<' and '>'. For example, the expression <BODY> is a tag with name BODY.
An end tag includes a '/' after the '<'. For example, </BODY> is an end tag.
Tag names are always case-INsensitive, so <BODY> and <BodY> are the same.
An element has three parts: a start tag, content and an end tag. For example, to show the text "Hello" in bold, you can use the element B as follows: <B>Hello</B> <B> is the start tag; </B> is the end tag; Hello is the content of the element.
Elements cannot overlap each other. If the start tag for an B element appears within a P, the B's end tag must also appear within the same P element: <P> <B> ........... </B> </P>
Attributes
An element's attributes define various properties for the element. For example, the BODY element takes an attribute BGCOLOR to provide the background color of the document and a TEXT attribute to provide the color of the document's text. <BODY BGCOLOR="black" TEXT="yellow"> An attribute is included in the start tag only: <TAG Attribute-name="Attribute-value" Attribute-name="Attribute-value" ..... > </TAG>
The attribute value is delimited by single or double quotes. The quotes are optional if the attribute value consists solely of letters in the range A-Z and a-z, digits (0-9), hyphens ("-"), and periods ("."). In short : no space in between attribute names
Element HTML
The HTML element contains the HTML document. The start tag <HTML> is placed at the beginning of an HTML document to tell the browser that the language is used is HTML. The end tag </HTML> is placed at the end of the document. Syntax <HTML>.....</HTML>
Element HEAD
The HEAD element contains header information about the document, such as its title, keywords, and description. HEAD precedes the BODY element.
Syntax <HEAD>......</HEAD>
Element TITLE
The TITLE element gives the document's title and is typically shown in the title bar of browser's window. A suggested limit for the number of characters in a TITLE is 60. eg : the title of the first page is : Your Title. TITLE is placed within HEAD. Syntax <TITLE>.....</TITLE>
Element BODY
The BODY element contains the document content, i.e. the information that is shown in the browser's window. BODY immediately follows the HEAD. BODY takes a number of attributes for specifying the background and colors of the document on visual browsers
Syntax
<BODY TEXT="color" BGCOLOR="color" BACKGROUND="URI" LINK="color" ALINK="color" VLINK="color" > ..... </BODY>
Attributes
TEXT="color Specifies the text color for the document. BGCOLOR="color Specifies the background color for the document. BACKGROUND="URL Specifies the URL of background image for the document. LINK="color Specifies the link color for the document. VLINK="color Specifies the visited link color for the document. ALINK="color Specifies the active link color for the document. If both BGCOLOR and BACKGROUND are specified, the background image is used
Element P (Paragraph)
The P element defines a paragraph, preceded and followed by a blank line. Syntax <P ALIGN="left"|"center"|"right"> ..... </P> The end tag for P is optional when the paragraph is followed by another paragraph. If </P> is omitted, the paragraph is not followed by a blank line. Specifies the horizontal alignment of the paragraph. The default is left.
Syntax <H1 ALIGN="left"|"center"|"right"> ..... </H1> <H2 ALIGN="left"|"center"|"right"> ..... </H2> <H3 ALIGN="left"|"center"|"right"> ..... </H3> <H4 ALIGN="left"|"center"|"right"> ..... </H4> <H5 ALIGN="left"|"center"|"right"> ..... </H5> <H6 ALIGN="left"|"center"|"right"> ..... </H6>
Element B (Boldface) The B element suggests that text be rendered as bold text. Element I (Italic). The I element suggests that text be rendered as italic text. Element U (Underlined). The U element suggests that text be rendered as underlined text Syntax <B>.....</B> <I>.....</I> <U>.....</U>
Element CENTER
The CENTER element defines a block whose contents are centered horizontally on visual browsers. Syntax
<CENTER>.....</CENTER>
Authors of web pages can suggest rudimentary font changes. If they don't, the text appears in size, color and face as defined by user's browser
Element BASEFONT
The BASEFONT element allows authors to suggest the size of base font used for calculating of relative font size values (specified by SIZE attribute of FONT element). Syntax <BASEFONT SIZE="pixels"> BASEFONT has no end tag. SIZE="pixels : Specifies the base font size on a browser-dependent scale of 1 to 7, with the default being 3.
Element FONT
FONT element changes face, color and size of the font Syntax <FONT COLOR="color" FACE="font_name" SIZE="size"> ..... </FONT>
COLOR="color Specifies the color of the font. FACE="font_name Specifies the font name or list of font names. SIZE="size Specifies the size of the font. The size is : number from 1 to 7 (absolute size, e.g. SIZE=6) -OR: + or - followed by number (relative size, e.g. SIZE="+3" or SIZE="-2").
Note: To specify list of font names use comma as separator. For example: FACE="Verdana,Impact,Arial". The browser checks to see if the first specified font is installed, and if not, it checks for the second and so on. The text is displayed with the first installed font specified in the list. If all listed fonts are not installed on the viewer's computer, the browser uses the default font.
ALIGN="left" "center" "right -- Specifies the horizontal alignment of the rule. The default is center. SIZE="pixels -- Specifies the line height . WIDTH="percentage -- Specifies the line width as percentage of window width. NOSHADE -- Specifies the solid line.
LISTS
What is a list? -- A list may look like this: 1. Math's a. Algebra b. Geometry 2. Biology 3. Chemistry 4. Geography 5. English A list may contain any number of sub-lists.
START="number -- Specifies the starting number of the list. TYPE="A" "a" "I" "i" "1 -- Specifies the numbering style of the list. A - uppercase alphabetic; a - lowercase alphabetic; I - uppercase Roman numerals; i - lowercase Roman numerals; 1 - decimal numbers. Used by default.
TYPE="disc" "circle" "square -- Specifies the style of bullets preceding list items.
disc - a filled-in circle; circle - a circle outline; square - a square;
TYPE="disc" "circle" "square" "A" "a" "I" "i" "1 -- Specifies the style of list item marker. disc - a filled-in circle; circle - a circle outline; square - a square; A - uppercase alphabetic; a - lowercase alphabetic; I - uppercase Roman numerals; i - lowercase Roman numerals; 1 - decimal numbers. VALUE="number -- Specifies the number of LI when used with an OL. -- VALUE allows changes in the sequence number of LI.
Element TABLE
The TABLE element defines a table for multi-dimensional data arranged in rows and columns. The TABLE element contains CAPTION,TR,TH and TD Syntax <TABLE ALIGN="left"|"center|"right" BGCOLOR="color" BORDER="pixels" CELLPADDING="pixels" CELLSPACING="pixels" HEIGHT="height" WIDTH="width"> ..... </TABLE>
ALIGN="left" "center" "right -- Specifies the horizontal alignment of the table. The default is left. BGCOLOR="color -- Specifies the background color of table cells. The background color of specific cells may differ if specified by attribute BGCOLOR of elements TR, TH and TD. BORDER="pixels -- Specifies the width of border around the table. If omitted the table has no border. CELLPADDING="pixels -- Specifies the spacing within cells i.e. between the cell border and cell contents. Default cellpadding is 1. CELLSPACING="pixels -- Specifies the spacing between cells of the table. Default cellspacing is 2.
WIDTH="width
-- Specifies the table width as:
Element CAPTION
The CAPTION element defines a table caption. CAPTION must be contained within TABLE. Syntax <CAPTION ALIGN="top"|"bottom"> ..... </CAPTION> ALIGN="top" "bottom -- Specifies the alignment of the caption relative to the table. The default is top.
ALIGN="left" "center" "right -- Specifies the horizontal alignment for each cell in the row. The default is left. VALIGN="top" "middle" "bottom -- Specifies the vertical position of the cell's contents. top - positions data at the top of the cell; middle - centers the cell data vertically (the default value); bottom - positions data at the bottom of the cell. BGCOLOR="color -- Specifies the background color for the row of the table. The background color of specific cells may differ if specified by attribute BGCOLOR of elements TH and TD.
ALIGN="left" "center" "right -- Specifies the horizontal alignment for the cell's content. The default is left. VALIGN="top" "middle" "bottom -- Specifies the vertical position of the cell's content. top - positions data at the top of the cell; middle - centers the cell data vertically (the default value); bottom - positions data at the bottom of the cell. BGCOLOR="color -- Specifies the background color for the cell.
COLSPAN="number -- Specifies the number of columns that are spanned by the cell.
ROWSPAN="number -- Specifies the number of rows that are spanned by the cell.
Images
The IMG element inserts an image
Syntax <IMG ALIGN="left"|"right"|"top"|"middle"|"bottom" ALT="text" BORDER="pixels" HEIGHT="height" WIDTH="width" HSPACE="pixels" VSPACE="pixels" SRC="URI">
IMG has no end tag
ALIGN="left" "right" "top" "middle" "bottom -- Specifies the position of the image with respect to the surrounding content.
left - the image is placed at the left margin and content flows around it;
right - the image is placed at the right margin and content flows around it; top - the image is placed within a row of text and breaks it. The row "goes through" the top end of the image; middle - the image is placed within a row of text and breaks it. The row "goes through" the middle of the image;
bottom - the image is placed within a row of text and breaks it. The row "goes through" the bottom end of the image;
ALT="text -- Specifies the alternate text for those not loading images.
BORDER="pixels -- Specifies the width of the image's border. HEIGHT="height -- Specifies the height of the image as: pixels - (e.g. HEIGHT="20"); -ORpercentage of window height - (e.g. HEIGHT="30%").
HSPACE="pixels
-- Specifies the horizontal gutters around the image.
VSPACE="pixels
SRC="URI
-- Specifies the URI of the image
Hyperlinks
What is a hyperlink?
Hyperlink (or hypertext link) is an element in a HTML document that links to another place in the same document or to an entirely different document.
A text or an image is hyperlink if the mouse pointer changes to a hand over it. Typically, you click on the hyperlink to follow the link.
Element A
The A element denotes an anchor a hypertext link or the destination of a link. The A element denotes a hypertext link if HREF attribute is used. The A element denotes a destination of a link if NAME attribute is used. Both attributes may be used in the same A element.
Syntax <A HREF="URI" NAME="name" TARGET="name"> ..... </A> HREF="URI -- Specifies the hypertext reference for the link. NAME="name -- Specifies the destination for the link.
TARGET="name -- Specifies the name of the frame, in which the link should be rendered. If no frame with such a name exists, the link is rendered in a new window. Special frame names begin with an underscore:
Frames
What is a frame? HTML frames allow authors to present documents in subwindows. Subwindows provide a way to keep certain information visible, while other views are scrolled or replaced.
Element FRAMESET
The FRAMESET element is a frame container for dividing a window into rectangular subspaces called frames. In a Frameset document, the outermost FRAMESET element takes the place of BODY and immediately follows the HEAD.
The FRAMESET element contains one or more FRAMESET or FRAME elements, along with an optional NOFRAMES element.
Syntax
<FRAMESET COLS="list" ROWS="list" BORDER="pixels" BORDERCOLOR="color" FRAMEBORDER="yes"|"no" FRAMESPACING="pixels"> ..... </FRAMESET>
COLS="list -- Defines a comma-separated list of widths for division of window on columns. Eg. to divide the window on two columns 20% and 80% width, write COLS=(20%,80%) or COLS=(20%,*). The asterisk * replaces the remaining percentage to 100%.
ROWS="list -- Specifies the comma-separated list of heights for division of window on rows. Eg. to divide the window on two rows 20% and 80% height, write ROWS=(20%,80%) or ROWS=(20%,*). The asterisk * replaces the remaining percentage to 100%.
BORDER="pixels -- Specifies the border width around frames. BORDERCOLOR="color -- Specifies the border color around frames. If omitted, the default color is gray. FRAMEBORDER="yes|"no -- Specifies whether or not the frames have a visible border.
If FRAMEBORDER="yes" the space between frames is filled with BORDERCOLOR If FRAMEBORDER="no" the space between frames is left blank (white color) FRAMESPACING="pixels -- Specifies the space between frames.
The attribute FRAMESPACING overrides the attribute BORDER, i.e. if FRAMESPACING="20" and BORDER="0", the space between frames is 20 pixels
Element FRAME
The FRAME element defines a frame a rectangular subspace within a Frameset document. Each FRAME must be contained within a FRAMESET that defines the dimensions of the frame
Syntax <FRAME NAME="name" MARGINHEIGHT="pixels" MARGINWIDTH="pixels" BORDERCOLOR="color" FRAMEBORDER="yes"|"no" NORESIZE SCROLLING="yes"|"no"|"auto" SRC="URI">
NAME="name -- Specifies the name of the frame for use with the TARGET attribute of A element. MARGINHEIGHT="pixels -- Specifies the number of pixels to use as the top/bottom margins, within the frame. MARGINWIDTH="pixels -- Specifies the number of pixels to use as the left/right margins, within the frame. BORDERCOLOR="color -- Specifies the border color around the frame. If omitted, the default color is gray. This attribute overrides the same attribute of FRAMESET element. NORESIZE -- Prevents the user from resizing the frame .
FRAMEBORDER="yes|"no -- Specifies whether or not the frame has a visible border. If FRAMEBORDER="yes" the space between the frame and all adjoining frames is filled with BORDERCOLOR If FRAMEBORDER="no" the space is left blank (white color) SCROLLING="yes|"no|"auto -- Specifies whether scrollbars are provided for the frame. yes - gives scrollbars at all times; no - suppresses scrollbars even when they are needed to see all the content; auto - generates scrollbars only when necessary (the default value). SRC="URI -- Specifies the URI for the document to render in the frame.
Frameset
<html> <frameset cols="25%,50%,25%"> <frame src="a.htm" /> <frame src="b.htm" /> <frame src="c.htm" /> </frameset> </html>
Element NOFRAMES
The NOFRAMES element contains content that should only be rendered when frames are not displayed. NOFRAMES is typically used in a Frameset document to provide alternate content for browsers that do not support frames or have frames disabled. NOFRAMES must contain a BODY element Syntax <NOFRAMES> ..... </NOFRAMES>
Forms
What is a form? The form can contain interface elements such as text fields, buttons, checkboxes, radio buttons, and selection lists that let users enter text and make choices, and then submit the form by clicking a "Submit" button.
Element FORM
The FORM element defines an interactive form Syntax
Element INPUT
The INPUT element defines a form control for the user to enter input. INPUT must be contained within FORM Syntax <INPUT NAME="name" SIZE="number" TYPE="text|checkbox|radio|submit|reset" VALUE="value" CHECKED>
NAME="name -- Specifies the name of the control Attribute is required, because data is sent as: name="value" The value is: entered text for text control; value of VALUE attribute for radio and checkbox controls. SIZE="number -- Specifies the size of text control. TYPE="text" "checkbox" "radio" "submit" "reset -- Specifies the type of the control. text - provides a single-line text input field; Used by default. checkbox - provides switch (square button) that can be turned on and off ; radio - provides switch (radio button) that can be turned on and off ; submit - defines a button for submitting the form; reset - defines a button for resetting the form to its initial values.
VALUE="value The value depends on the form control. The VALUE attribute: -- specifies the initial value for the text field; -- provides the text of the button for reset and submit controls; --gives the value of the control when it is checked for radio and checkbox controls.
CHECKED -- Specifies that the control is initially checked for radio and checkbox controls.
Element SELECT
The SELECT element defines a form control for the selection of options.
NAME="name -- Specifies the name of the control. Attribute is required, because data is sent as: name="value" The value is determined by VALUE attribute of the selected OPTION. SIZE="number -- Specifies the number of visible options. MULTIPLE -- Allows multiple selections.
Element OPTION
The OPTION element defines a menu choice within a SELECT menu Syntax <OPTION SELECTED VALUE="value"> ..... </OPTION>
Element TEXTAREA
The TEXTAREA element defines a form control for the user to enter multi-line text input. TEXTAREA must be contained within FORM
NAME="name -- Specifies the name of the control. Attribute is required, because data is sent as: name="value" The value is entered text.
COLS="number -- Specifies the number of visible columns. ROWS="number -- Specifies the number of visible rows.
URIs typically consist of three pieces: --The naming scheme of the mechanism used to access the resource (e.g. http: ftp: mailto:). --The name of the machine hosting the resource. --The name of the resource itself, given as a path Consider the following URI: http://www.sjm.com/workshop/html/index.htm
Fragment identifiers
Some URIs refer to a location within a resource. This kind of URI ends with # followed by an anchor identifier (called the fragment identifier). For instance, here is a URI pointing to an anchor named pos2 in the file index.htm:
http://www.pmg3.com/varna/school/index.htm#pos2
Absolute URL An Absolute URL is, thus, something that is independent or free from any relationship. When you use an absolute URL, you point directly to a file. Hence, an absolute URL specifies the exact location of a file/directory on the internet. It also follows that each absolute URL is unique, which means that if two URLs are identical, they point to the same file.
http://www.webdevelopersnotes.com/images/ email.gif specifies an image file email.gif located in the images directory, under www.webdevelopersnotes.com domain name. Similarly, the absolute URL of the document you are viewing is http://www.webdevelopersnotes.com/design/ relative_and_absolute_urls.php3 which is a page in the directory called design on this web site.
Relative URIs
A relative URI doesn't contain any naming scheme information. Its path generally refers to a resource on the same machine as the current document. Relative URIs may contain relative path components (e.g., ".." means one level up in the hierarchy defined by the path), and may contain fragment identifiers. <img src="../images/email.gif" width="..." height="..." />
For example, if the following directory structure resides on the machine www.pmg3.com: | |--pictures | mary.jpg | steve.gif | |--varna | | city.htm | | | |__sea | | boat.htm | | | |__school | index.htm | present.htm
The absolute URL is straight forward but in the relative URL you'll notice that I have refered to the image with ../images/email.gif. In order to understand the relative URL, let me tell you about the directory structure of this web site. This web site has several sections and the files and web pages for each section have been segregated into different directories. This helps to keep things organized and uncluttered on the web site. Under the document or server root directory (the main directory of the web site), I have a directory called images which stores all common images used on the pages of this web site. The image email.gif resides in this directory. Another directory called design which is at the same level as images i.e. it is also in the document root directory. This design directory contains the files and web pages for the "Web Page Design" section of this web site. Diagramatically, the scenario can be represented as:
and the document index.htm contains links pointing to files mary.jpg, city.htm, boat.htm, present.htm, instead of full URIs: http://www.pmg3.com/pictures/mary.jpg http://www.pmg3.com/varna/city.htm http://www.pmg3.com/varna/sea/boat.htm http://www.pmg3.com/varna/school/present.htm the following relative URIs, may be used: ../../pictures/mary.jpg ../city.htm ../sea/boat.htm present.htm
Relative URIs are resolved to full URIs using a base URI (the URI of the current document).
For easy transition of files to another machine the use of relative URIs is recommended
For example, the following URIs are all different: http://www.pmg3.com/varna/school/present.htm http://www.PMG3.com/varna/school/present.htm http://www.PMG3.com/Varna/School/Present.HTM
Note: Most readers may be familiar with the term "URL" and not the term "URI". URLs form a subset of the more general URI naming scheme.