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 Microsofts 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 and ends with a closing HTML tag. 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: and. The tag is embedded within the tag.

Opening and Closing Tags As a general rule in HTML, every opening tag should have a corresponding closing tag, as shown below: …… This is very important especially when nesting tags, as you would see later. The Header Tag ( to ) Can be used to format documents into sections as the size of the text varies according to the level. Introduction Introductory text Details Details of Document Other common HTML tags Paragraph Bold Same effect as the bold tag Italics Emphasis. Same effect as Italics tag Table Form

Tag Attributes Attributes 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. The attribute BGCOLOR adds a background colour to the body of the document. would align the level 1 header centrally on the page. Sample HTML document: My First Webpage Introduction This is my first webpage. Very soon, Ill be developing dynamic web applications. 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 tags Tags used to format text include: : For modifying the font. This tag has several attributes such as size, colour, face (type of font e.g. Times New Roman). Example: Text or : For making text appear bold or : For underlining text Nesting tags Basically means embedding one tag in another. E.g. Text would display the Text boldly and in Italics. Linking Linking is achieved with the use of anchor tags. overlying text e.g. The following HTML code will create a link to Goldsmiths College: Goldsmiths College A link could be to another document or even another website entirely.

Images Images are displayed with the image tag Note that the image has to be saved in an appropriate server location, and in the appropriate format such as.jpeg, or.gif. 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.