HTML I
HTML• Hypertext mark-up language.
• Uses tags to identify elements of a page so that a browser such as Internet explorer can render the page on a computer screen.
• Hypertext means it allows creation of links to another document, or website.
Editing HTML
• HTML is edited using text editors such as Notepad or WordPad. In addition, there are special software programs such as HTML-Kit and Microsoft’s Visual InterDev
• HTML files are saved with a “.htm” or “.html” extension.
Structure of an HTML document
• An HTML document begins with an opening HTML tag <HTML> and ends with a closing HTML tag </HTML>.
• In between the HTML tags are tags that make up the document.
• It is divided into a HEADER section that displays the title and may also contain information about the page, and the BODY section that displays the page content.
• The Header section is denoted by the tags: <HEAD> and </HEAD>.
• The <TITLE> tag is embedded within the <HEAD> tag.
Opening and Closing Tags• As a general rule in HTML, every opening tag should have a corresponding closing
tag, as shown below:<HTML>……</HTML><HEAD>……</HEAD>This is very important especially when nesting tags, as you would see later.
The Header Tag (<H1> to <H6>)• Can be used to format documents into sections as the size of the text varies
according to the level.<H1>Introduction</H1> Introductory text<H2>Details</H2> Details of Document
Other common HTML tags<P>Paragraph</P><B>Bold</B><STRONG>Same effect as the bold tag</STRONG><I>Italics</I><EM>Emphasis. Same effect as Italics tag</EM><TABLE>Table</TABLE><FORM>Form</FORM>
Tag AttributesAttributes add more definition or functionality to the tag, and can be used to enhance
the look and feel of the document. Usually enclosed within the opening tag. E.g. <BODY BGCOLOR=“blue”> The attribute BGCOLOR adds a background colour to
the body of the document.<H1 ALIGN=“center”> would align the level 1 header centrally on the page.
Sample HTML document:<HTML><HEAD><TITLE>My First Webpage</TITLE></HEAD><BODY><H1>Introduction</H1><P>This is my first webpage.</P><P>Very soon, I’ll be developing dynamic web applications.</P></BODY></HTML>Formatting Text
Text can be formatted in either of two ways:
1. With the use of text formatting tags.
2. With the use of Style sheets (to be covered later).
Formatting Text with tagsTags used to format text include:<FONT>: For modifying the font. This tag has several attributes such as size, colour,
face (type of font e.g. Times New Roman).Example:<FONT COLOR=“blue”,FACE=“Times New Roman”>Text</FONT><B> or <STRONG>: For making text appear bold<U> or <EM>: For underlining text
Nesting tagsBasically means embedding one tag in another.E.g. <B><I>Text</I></B> would display the Text boldly and in Italics.
LinkingLinking is achieved with the use of anchor tags <A>.<A HREF=“url of link”>overlying text</A> e.g.The following HTML code will create a link to Goldsmiths College:<A HREF=“http:www.gold.ac.uk”>Goldsmiths College</A>
A link could be to another document or even another website entirely.
Images
Images are displayed with the image tag <IMG>• Note that the image has to be saved in an appropriate server location, and in the
appropriate format such as .jpeg, or .gif.
<IMG SRC=“location of image file” BORDER=“0” WIDTH=“65” HEIGHT=“50” ALT=“Alternative text”></IMG>
The WIDTH and HEIGHT attributes enable specification of the width and height respectively, while the ALT attribute displays an alternative text, if for example the browser has ‘images’ turned off.
