Introduction to HTML HTML is the short form of HyperText Markup Language. In simple terms, HTML is just a standardized way of inserting special tags (markers) into a text document (file) to :  To indicate how the text should be displayed on the screen of a browser or/and  Create links to other web pages or web resources Lesson 1 1. 2. Create a folder with your name and class Open Notepad. Type the following: The browser will ignore new lines and extra spaces in the text 3. 4. Save file as Lesson1.htm in your folder. Save as type :- All Files Open the file using the Internet Explorer. You should receive the following output Title Body Page 1 of 10 5. Right Click and view source. Add the following line above I am changed Click Save and refresh the browser. 6. Defines the extent of the HTML markup text Contains descriptions of the HTML page. This meta information is not displayed as part of the web page. Describes the title of the page. This description is usually displayed by the browser as the title of the window in which the web page is displayed. This information is also used by some search engines to compile an index of web pages. Delimits the body of the web page. In the body is the text to be displayed as well as HTML markup tags to hint at the format of the text. Note: The tags can be written in upper-case or a mixture of upper- and lower-case or just lower-case. For example, , and all represent the same tag. Page 2 of 10 Lesson 2 1. Open Lesson1.htm. Make the following changes to the code The browser will not ignore
new lines and extra spaces in the text

The End 2. Save it and view in the browser A new paragraph is started with the

tag, and may be optionally terminated with the inverse paragraph tag

. However, it is usual not to specify the inverse paragraph tag

A line break is created by the
tag, which has no inverse tag. Formatted text Last sentence of a paragraph The first line of a new paragraph. A line of text. On a new line. HTML markup required Last sentence of a paragraph

The first line of a new paragraph. A line of text.
On a new line. The following are some of the simple formatting tags available in HTML. Formatted text The text is bolded. The text is italicized. The text is in a teletype font. HTML markup required The text is bolded. The text is italicized. The text is in a teletype font. Page 3 of 10 The text is 2 sizes larger and the text is in red. The size attribute may also be an absolute value in the range 1 .. 7. The text is 2 sizes larger and the text is in red. The size attribute may also be an absolute value in the range 1 .. 7. Use the e-mail address Use the e-mail address

M.A.Smith at M.A.Smith at brighton dot ac dot brighton dot ac dot uk

uk to contact me. to contact me. Lesson 3 1. Specifying a colour by name The formatting tag with the attribute COLOR="red" is used to change selectively the colour of the text of the document to red. This temporary colour change terminates on the tag. Formatted text HTML markup required * Red* Green* Blue* * Red* Green* Blue* Possible values for a named colour are: black [###], maroon [###], green [###], olive [###], navy [###], purple [###], teal [###], gray [###], silver [###], red [###], lime [###], yellow [###], blue [###], fuchsia [###], aqua [###], white [###]. Page 4 of 10 2. Specifying a colour by RGB value A general colour is specified in terms of the three primary colours red, blue and green. Each primary colour is defined as a two digit Hexadecimal number that representing the strength of that primary colour. In this specification hexadecimal 00 means 0% of the colour and hexadecimal FF means 100% of the colour. For example, to specify red the hexadecimal number FF0000 is used. In this number:    The first two digits FF define 100% of red The second two digits 00 define 0% of green The third two digits 00 define 0% of blue Formatted text HTML markup required * Red* Green* Blue* * Yellow* White* Purple* * Red* Green* Blue* * Yellow* White* Purple* 3. Global colours of the text, links, etc. Additional attributes to the tag allow a user to specify global colouring of the web page. Attributes of this tag include:      BGCOLOR= Specifies the background colour of the document. TEXT= Specifies the colour of the text in the document. LINK= Specifies the colour of the hypertext links in the document. ALINK= Specifies the colour of the link when activated by your mouse. VLINK= Specifies the colour of the visited hypertext links in the document. Page 5 of 10 For example, to create a web page with a background colour of green normal text in red and links in blue is specified with the following attributes to the tag The document may also be given a background image. The selected image is tiled across the document and then the text of the document is written over the image(s). It is thus important to choose a background image that will not be too distracting for the reader. The background image is achieved by adding a background attribute to the BODY markup tag. For example: Lesson 4 1. Headings A heading in the text is created with the

tag. There are in fact six heading tags

the largest to

the smallest. Formatted text HTML markup required

An H1 heading

An H3 heading

An H6 heading

An H1 heading An H3 heading An H6 heading A heading tag generates line break(s) before and after the heading text. For example: Formatted text Just before the heading. An H4 heading Just after the heading. HTML markup required Just before the heading.

An H4 heading

Just after the heading. Page 6 of 10 2. Inserting of in-line images As well as text, images may be inserted into the document. An image may be held in several formats, though the main ones used are GIF and JPEG. Due to limited bandwidth, JPEG with its high compression of picture data and its ability to represent 24 bit colour images is the best to use. Even though the JPEG compression is lossy the degradation of picture quality is not very noticeable to the human eye. However, if the picture is very small or a graphical image then the GIF format may be the best. Inserted image HTML markup required jpeg jpeg A gif image with a transparent background Text can be made to flow around an image on the left hand side by using the attribute The image size can also be specified using A gif image with a transparent background. Text can be made to flow around an image on the left hand side by using the attribute ALIGN=RIGHT. The image size can also be specified using HEIGHT and WIDTH. This will speed up the construction of the page on the web browser. Page 7 of 10 HEIGHT and WIDTH. This will speed up the construction of the page on the web browser. ALIGN=RIGHT.
This can also be used to distort the picture. This can also be used to distort the picture. Note: There are many graphic editing programs which allow you to specify that one of the colours of a gif image is transparent when displayed by a browser. For example, LView Pro and Paint Shop Pro, allow the creation of a transparent colour in a gif image. However, in order to do this, the version used for the saved gif image must be 89a. An image may be used as the displayed item for a hypertext link. For example: . The attributes of the tag include: ALT="mas" If the image can not be displayed, then the text associated with the ALT attribute will be displayed instead of the image. This occurs, if for example the display of images has been turned off in the browser, or for some reason the browser can not display the image. ALIGN=TOP Causes any following text to be displayed aligned with the top of the picture. ALIGN=BOTTOM. Causes any following text to be displayed aligned with the bottom of the picture. ALIGN=MIDDLE. Causes any following text to be displayed aligned with the middle of the picture. ALIGN=LEFT Cause the image to be left aligned on the page. Text is flowed around the image on the right hand side. ALIGN=RIGHT Cause the image to be right aligned on the page. Text is flowed around the image on the left hand side. Page 8 of 10 HEIGHT=n Set the height of the image to be n pixels. WIDTH=n Set the width of the image to be n pixels. 3. Inserting of background image The document may be given a background image. The selected image is tiled across the document and then the text of the document is written over the image(s). It is thus important to choose a background image that will not be too distracting for the reader. The background image is achieved by adding a background attribute to the BODY markup tag. For example: Lesson 5 1. Creating a list of items There are several types of list, an un-ordered list can be created by the following markup: Formatted text   HTML markup required

• Item one of list
• Item two of list

Item one of list Item two of list An ordered list is similar to an un-ordered list, except that each entry is consecutively numbered. Formatted text 1. Item one of list 2. Item two of list HTML markup required

1. Item one of list
2. Item two of list

Page 9 of 10 A definition list allows a list with a backward hanging indent to be created. Formatted text HTML markup required

Definition tag.

Text of the definition list. Which may stretch over several lines.

Another definition tag.

Text of the definition list.

Definition tag. Text of the definition list. Which may stretch over several lines. Another definition tag. Text of the definition list. Note: It is a common practice for the definition tag with an image or even have it prefixed with an image. Page 10 of 10