LAB 02:
UNDERSTANDING HTML ELEMENTS AND CSS STYLES
Theory
The <HEAD> Elements
The head section of a HTML document contains information about the document. This information would normally be found at the top of a letter or memo like the title.
The <TITLE> Element
This element denotes the title of the documents. It is the only required field. Every document must have a title.
The <BASE> Element
The <BASE> element is usually the Universal Resource Locator for the document. It tells the browsers where the document is located and uses the base as a starting point for resolving relative hyperlinks and paths.
Attributes
HREF: The HREF attributes is to specify the Hyperlink Reference.
The <ISINDEX> Element
The <ISINDEX> element declares that the document is a searchable index. The browser displays an input box somewhere on the screen to input a query.
Attributes
HREF: By default the <ISINDEX> passes the query back to the URL that displayed the page. The HREF attributes overrides this function and passes the query to the URL specified in the HREF attributes.
PROMPT: The default prompt for the query box is
You can search this index. Type the keyword(s) you want to search for:
The Prompt attributes allows you to specify a different default prompt
The <LINK> Element
The link element causes the browser to include another object into the current document. An HTML document can include zero or more <LINK> element in it.
Attributes
REL: The REL attribute shows the relationship of the <LINK> to the document. It describes what the LINK is including. These values are:
HOME---a home page or first page in a set of documents
INDEX—the index
GLOSSARY---the glossary
COPYRIGHT---the copyright statement
UP---the link to the parent document
NEXT—in a guided tour, the next document
PREVIOUS---in a guided tour, the previous document
HELP---the help file
BOOKMARK—provides direct link to specific place in a document
BANNER---to include a banner
STYLESHEET—to gives the browsers specific instructions on how to display the document
HREF: It specifies the URL to the item the link is referring to.
THE <META> Element
The <meta> element contains data about document.
Attributes
HTTP-EQUIV—this attribute is used for specifying the name of the data contained in the <META> element. Browser generates a response header for item that uses that attribute
NAME--- it also specifies the name but does not generate a response header
CONTENT—the content attribute is the actual data to be associated with the HTTP-EQUIV or the NAME
The <RANGE> and <SPOT> Element
The <RANGE> and <SPOT> element are used together to mark a range or section in the document. The RANGE tag is used in the head section and SPOT tag is placed throughout the body section.
Attributes
ID—this attribute is used in the SPOT tag to name the position in the body of the document. The name is then used in the RANGE tag as a reference marker
CLASS—CLASS attribute is used to identify the range
FROM—this attribute denotes the beginning of the range
The <STYLE> Element
The <STYLE> element is used to include the style information to the browser. Style sheets can be used to pass the information to the browser on how to display the document
Attributes
NOTATION—this attribute identifies the entity
The <SCRIPT> Element
The SCRIPT element is for browser-interpreted script code directly into your pages.
Attribute
LANGUAGE---The LANGUAGE attribute identifies the language of the code
The <BODY> Element
The BODY Elements encloses the body section of the document. Most elements are found within the <BODY> element.
Attributes
BACKGROUND—This attribute can be used to specify URL of an image to tile as the document background.
BGCOLOR—This attribute can be used to specify a color of the default background. It uses the values of color.
TEXT—This attribute can be used to set a default color for all text that is displayed. The default color is black.
LINK—This attribute is used to specify the color of the Hyperlink that have not already been selected. Default color is blue.
VLINK—This attribute is used to specify the color of the Hyperlink that have already been selected. Default color is maroon.
ALINK—This attribute is used to specify the color of the Hyperlink as they are selected. Default color is red.
The <H1> Through <H6> (HEADLINE)Elements
These elements are used for identifying headlines in the document.
Headlines can be used like chapter titles, headings and sub headings.
Attribute
ALIGN—This attribute is used to specify where on the page the headline is to be displayed. With ALIGN=LEFT (the default) the headline is started with left margin. With ALIGN=RIGHT the headline is displayed so the end of it is at the right margin. With ALIGN=CENTER the headline is centered in the page.
The <B> (BOLD) Element
The <B> element indicates that all characters between the starting tag <B> and ending tags </B> are to be bold.
The <P> (PARAGRAPH) Elements
The <P> Elements denotes the start of a new paragraph. The browser adds a blank at the point of tag <P> in order to separate two paragraphs.
Attribute
ALIGN—This attribute is used to specify where on the page the paragraph is to be displayed. With ALIGN=LEFT (the default) the paragraph is started with left margin. With ALIGN=RIGHT the paragraph is displayed so the end of it is at the right margin. With ALIGN=CENTER the paragraph is centered in the page.
The <A> (HYPERLINK)Element
The <A> is used to add a hyperlink to the document. The important attribute is HREF. The HREF attributes gives the location of the document to go to when the link is selected.
Attributes
HREF—The HREF attribute specifies that the anchor is the start of a hyperlink. The value of HREF is the destination of the hyperlink.
NAME---This attribute is used to specify the location of an internal reference in a document.
The <BR> (LINE BREAK) Element
This element is used for specifying line break in HTML document. The <BR> simply adds a carriage return at the location of the tag.
The <TAB> Element
This element is used to set a tab stop in HTML document.
Attributes
ID---It is used to name the location of the tab stop.
TO---It is used to tab over to the same position where the ID attribute was used.
The <DIV> (DIVISION) Element
This element is used to divide up the document into related sections.
Attribute
ALIGN—The ALIGN attribute describes where on the screen data is displayed.
The <HR> (HORIZONTAL RULE) Element
This attribute is used to draw lines across the page. Lines come in handy to visually divide the document in sections.
Attributes
ALIGN---this is used to specify alignment of the horizontal rule.
NOSHADE---This is used to denote that no shading is desired.
SIZE---This denotes the thickness of the horizontal rule to display.
WIDTH----This is specified as a length.
The <PRE> (PREFORMATTED TEXT) Element
This element is used to designate a section of text that is already formatted for display.
The <FN> (FOOTNOTE) Element
This element is used to designate a footnote
The <BLOCKQUOTE> Element
This element is used for extended quotations.
The <ADDRESS> Element
Lab Tasks:
1. Create a menu or table of content of web page (for a computer shop containing computer accessories). Each menu item should load a different web page with its complete detail and different images.
2. Create a web page using ordered and unordered list. Also use link to image to the same page.
LCD’S
MONITORS
