HTML I

1
HTML I
2

• 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
  ltHTMLgt and ends with a closing HTML tag lt/HTMLgt.
• 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 ltHEADgt
  and lt/HEADgt.
• The ltTITLEgt tag is embedded within the ltHEADgt tag.

3

• Opening and Closing Tags
• As a general rule in HTML, every opening tag
  should have a corresponding closing tag, as shown
  below
• ltHTMLgtlt/HTMLgt
• ltHEADgtlt/HEADgt
• This is very important especially when nesting
  tags, as you would see later.
• The Header Tag (ltH1gt to ltH6gt)
• Can be used to format documents into sections as
  the size of the text varies according to the
  level.
• ltH1gtIntroductionlt/H1gt
• Introductory text
• ltH2gtDetailslt/H2gt
• Details of Document
• Other common HTML tags
• ltPgtParagraphlt/Pgt
• ltBgtBoldlt/Bgt
• ltSTRONGgtSame effect as the bold taglt/STRONGgt
• ltIgtItalicslt/Igt
• ltEMgtEmphasis. Same effect as Italics taglt/EMgt

4

• 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.
• ltBODY BGCOLORbluegt The attribute BGCOLOR adds
  a background colour to the body of the document.
• ltH1 ALIGNcentergt would align the level 1
  header centrally on the page.
• Sample HTML document
• ltHTMLgt
• ltHEADgt
• ltTITLEgtMy First Webpagelt/TITLEgt
• lt/HEADgt
• ltBODYgt
• ltH1gtIntroductionlt/H1gt
• ltPgtThis is my first webpage.lt/Pgt
• ltPgtVery soon, Ill be developing dynamic web
  applications.lt/Pgt
• lt/BODYgt
• lt/HTMLgt
• Formatting Text
• Text can be formatted in either of two ways
• With the use of text formatting tags.

5

• Formatting Text with tags
• Tags used to format text include
• ltFONTgt For modifying the font. This tag has
  several attributes such as size, colour, face
  (type of font e.g. Times New Roman).
• Example
• ltFONT COLORblue,FACETimes New
  RomangtTextlt/FONTgt
• ltBgt or ltSTRONGgt For making text appear bold
• ltUgt or ltEMgt For underlining text
• Nesting tags
• Basically means embedding one tag in another.
• E.g. ltBgtltIgtTextlt/Igtlt/Bgt would display the Text
  boldly and in Italics.
• Linking
• Linking is achieved with the use of anchor tags
  ltAgt.
• ltA HREFurl of linkgtoverlying textlt/Agt e.g.
• The following HTML code will create a link to
  Goldsmiths College
• ltA HREFhttpwww.gold.ac.ukgtGoldsmiths
  Collegelt/Agt
• A link could be to another document or even
  another website entirely.

6

• Images
• Images are displayed with the image tag ltIMGgt
• Note that the image has to be saved in an
  appropriate server location, and in the
  appropriate format such as .jpeg, or .gif.
• ltIMG SRClocation of image file BORDER0
  WIDTH65 HEIGHT50 ALTAlternative
  textgtlt/IMGgt
• 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.