Sunteți pe pagina 1din 87

What is HTML?

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.

Every HTML document follows this basic structure:


<HTML> <HEAD> <TITLE>Your title </TITLE> </HEAD> <BODY> This is where you write your information. </BODY> </HTML>

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.

Some elements allow the start or end tag to be omitted.


Some elements have no end tag because they have no content. These elements, such as the BR element for line breaks, are represented only by a start tag and are said to be empty. Eg. <BR>Text - inserts a line break prior to Text

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

Attribute names are case-INsensitive, but attribute values may be case-sensitive.

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 BR (Line Break)


The BR element forces a break in the current line of text. BR is needed because a line break in the HTML file does not cause the browser to display a line break. Syntax <BR> BR has no end tag.

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.

Elements H1, H2, H3, H4, H5, H6 (Headings).


H1, H2, H3, H4, H5 and H6 elements are used to make headings, which are usually rendered in a large, bold font.
H1 specifies the largest font, H6 - the smallest. Default Aignment 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 PRE (Preformatted Text)


The PRE element contains preformatted text. Visual browsers should render preformatted text in a fixed-pitch font, should not collapse white space, and should not wrap long lines Syntax <PRE>.....</PRE>

Element CENTER
The CENTER element defines a block whose contents are centered horizontally on visual browsers. Syntax

<CENTER>.....</CENTER>

Fonts and browsers

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.

Element HR (Horizontal Rule)


The HR element defines a horizontal rule for visual browsers Syntax <HR ALIGN="left"|"center|"right" SIZE="pixels" WIDTH="percentage" NOSHADE> HR has no end tag

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.

Element OL (Ordered List)


The OL element defines an ordered list. The element contains one or more LI elements that define the actual items of the list. Syntax <OL START="number" TYPE="A"|"a"|"I"|"i"|"1"> ..... </OL>

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.

Element UL (Unordered List)


The UL element defines an unordered list. The element contains one or more LI elements that define the actual items of the list. Syntax <UL TYPE="disc"|"circle"|square"> ..... </UL>

TYPE="disc" "circle" "square -- Specifies the style of bullets preceding list items.
disc - a filled-in circle; circle - a circle outline; square - a square;

Element LI (List Item)


The LI element defines a list item. The element must be contained within OL or UL. Syntax <LI TYPE="disc"|"circle"|"square"|"A"|"a"|"I"|"i"|"1" VALUE="number" > ..... </LI>

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.

Tables and HTML


Tables are commonly used as a layout device for arranging text and images Element TABLE. Element CAPTION. Element TR (Table Row). Elements TH (Table Header) and TD (Table Data).

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.

HEIGHT="height -- Specifies the table height as: pixels - (e.g. HEIGHT="60");

-ORpercentage of window height - (e.g. HEIGHT="20%").

WIDTH="width
-- Specifies the table width as:

pixels - (e.g. WIDTH="60");


-ORpercentage of window width - (e.g. WIDTH="20%").

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.

Element TR (Table Row)


The TR element defines a table row. TR must be contained within TABLE. TR contains TH and TD. Syntax <TR ALIGN="left"|"center|"right" VALIGN="top"|"middle"|"bottom" BGCOLOR="color"> ..... </TR>

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.

Elements TH (Table Header) and TD (Table Data)


The TH element defines a header cell in a table. The TD element defines a data cell in a table. TH and TD are contained within TR. Browsers display text contained in TH element bold and centered. -- This is the only difference between TH and TD

Syntax <TH ALIGN="left"|"center"|"right" VALIGN="top"|"middle|"bottom" BGCOLOR="color" COLSPAN="number" ROWSPAN="number"> ..... </TH>

<TD ALIGN="left"|"center"|"right" VALIGN="top"|"middle"|"bottom" BGCOLOR="color" COLSPAN="number" ROWSPAN="number"> ..... </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%").

If omitted the image is shown in its original height.


WIDTH="width -- Specifies the width of the image as:

pixels - (e.g. WIDTH="20"); -ORpercentage of window width - (e.g. WIDTH="30%").


If omitted the image is shown in its original width.

HSPACE="pixels
-- Specifies the horizontal gutters around the image.

VSPACE="pixels

-- Specifies the vertical gutters around the image.

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:

_blank renders the link in a new, unnamed window;


_parent renders the link in the immediate FRAMESET parent; _self renders the link in the current frame; _top renders the link in the full, unframed window.

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.

The form can be submitted to a program on server or to an E-mail address.

Element FORM
The FORM element defines an interactive form Syntax

<FORM ACTION="action" METHOD="GET"|"POST"> ..... </FORM>

ACTION="action -- Specifies the action the browser have to take on submit.


Action may be : URI of a program on server that handles the form or mailto:E_mail_address. METHOD="GET" "POST --Specifies how the form input is sent to the server.

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.

SELECT must be contained within FORM


Syntax <SELECT NAME="name" SIZE="number" MULTIPLE> ..... </SELECT>

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>

SELECTED -- Defines the OPTION to be initially selected.


VALUE="value -- Specifies the value of the option, sent with the submitted form. In the absence of a VALUE attribute, the value is the content of the OPTION element.

Element TEXTAREA
The TEXTAREA element defines a form control for the user to enter multi-line text input. TEXTAREA must be contained within FORM

Syntax <TEXTAREA NAME="name" COLS="number" ROWS="number"> ..... </TEXTAREA>

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.

URI (Uniform Resource Identifier)


The World Wide Web (Web) is a network of information resources. Every resource available on the Web -- HTML document, image, video clip, program, etc. -has an address that may be encoded by a Universal Resource Identifier, or "URI

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

This URI may be read as follows:


There is a document index.htm available via the HTTP protocol, residing on the machine www.sjm.com, accessible via the path /workshop/html/.

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

IMPORTANT!!! Servers are UNIX based machines, so URIs are casesensitive.

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.

S-ar putea să vă placă și