HTML

1
Lecture

• HTML
• Assignment

2
HTML

• Html document structure
• Tags
• - Heading tags, paragraphs tags, word tags
• - Color Tags
• - Link Tags
• - Image Tags
• - Table Tags

3
Developing HTML documents

• Bottom-up approach write HTML code in a text
  editor, and then view the Web page in a browser.
  (Notepad)
• Top-down approach build the Web page elements
  using an HTML editor, and then view the HTML code
  later
• (Dreamweaver)

4
HTML Document Structure

• HTML- tags
• The usually come in pairs (an opening tag and a
  closing tag).
• Not case-sensitive.
• Tags may have attributes.

5
HTML Document Structure

• ltHTMLgt lt/HTMLgt
• Enclose the entire HTML document.
• ltHEADgt lt/HEADgt
• Provides information about the HTML document.
• ltTITLEgt lt/TITLEgt
• Is the document title.

6
HTML Document Structure

• ltBODYgt lt/BODYgt
• This element encloses all the contents of a
  document.

7
HTML Document Structure

• ltHTMLgt
• ltHEADgt
• ltTITLEgt Annas web page lt/TITLEgt
• lt/HEADgt
• ltBODYgt
• Hello World!
• lt/BODYgt
• lt/HTMLgt

Hello World!
8
Attributs

• Tags may have attributes that allow more control
  over their results.
• ltBODY COLOR redgt

9
Text and Text tags

• One of the main elements of a web page is text.
• Basic units of headings, sections and paragraphs.
• Html provides tags to format each of these units.
  There are heading tags, paragraph tags, and
  word/character tags.

10
Heading tags

• Six different sizes of headings.
• ltH1gtltH6gt
• ltH1gt This text is size H1 lt/H1gt

11
Paragraphs tags

• Paragraphs
• Create a line space ahead of the text that
  defines the paragraph
• ltPgt

12
Paragraphs tags

• ltBODYgt
• ltPgt
• Bla bla bla bla bla bla bla bla bla bla bla bla
  bla bla bla bla
• bla bla bla bla bla bla bla
• lt/Pgt
• ltPgt
• bla bla bla bla bla bla bla bla bla bla bla
• lt/Pgt
• lt/BODYgt

• Bla bla bla bla bla bla bla bla bla bla bla bla
  bla bla bla bla bla bla bla
• bla bla bla bla bla bla bla bla bla bla

13
Word tags

• ltBRgt Force a line break. (No attributes).
• ltBgt Bolds text. (No attributes).
• ltBgt This text uses the Bold taglt/Bgt
• ltFontgt Specifies text size and color. Two
  attributes (Size and color)
• ltFont size 2 Colorgreengt This text uses the
  Font tag lt/fontgt
• ltUgt Underlined text.
• ltUgtThis text uses the Underline tag lt/ugt
• ltHRgt Creates a horizontal line. Attributes
  (Align, color, noshade, size and width).
• ltHR SIZE 5 NOSHADEgt

14
Word tags

• ltHTMLgt
• ltHEADgt
• ltTITLEgt Annas web page lt/TITLEgt
• lt/HEADgt
• ltBODYgt
• ltBgt This text uses the Bold tag lt/Bgt ltBRgt
• ltFONT SIZE3 COLOR"green"gt This text uses the
  font tag lt/FONTgt ltBRgt
• ltUgt This text uses the Underline tag lt/Ugt ltBRgt
• ltHR SIZE 5 Noshadegt
• lt/BODYgt
• lt/HTMLgt

15
Nested tags

• HTML tags may be nested according to this rule
• First open, last closed
• or last open, first closed
• ltBgtltUgt Hello Worldlt/Ugtlt/Bgt
• Hello World

16
Link Tags

• The ltAgt tag creates hyperlinks. Must be closed
  with lt/Agt
• ltA invisible partgt visible part lt/Agt
• ltA HREF http//www.aftonbladet.segt Aftonbladet
  lt/Agt
• Aftonbladet
• The A tag has several attributes. The common
  attributes are HREF and TITLE

17
Link Tags
ltA HREF http//www.aftonbladet.se
title"Newspaper"gt Aftonbladet lt/Agt
18
Color Tags

• Colors can be specified in Web pages via the
  attributes of both the ltBODYgt and ltFONTgt tags.
• Some ltBODYgt tags attributes
• - TEXT- LINKS- BGCOLOR- BACKGROUND
• ltFONTgt tags attributes
• Color

19
Color Tags

• ltBODY BGCOLOR "silver"gt
• Hello world!
• lt/BODYgt
• ltBODYgt
• ltFONT COLORRed"gtHello world! lt/FONTgt

Hello World
20
Image Tags

• The Image tag- ltIMGgt
• Some attributes to the ltIMGgt Tag
• SRC Specifies the image file name
• ALT Alternative
• WIDTH and HEIGHT
• ltBODYgt
• ltIMG SRC myImage.gif ALT A gif
  image drawn in paintgt
• ltBODYgt

21
Table Tags

• Each table has a generic structure consisting of
  rows, columns, and cells.
• The table tags are ltTABLEgt, ltTRgt, ltTHgt, and ltTDgt

TR
TR
22
Table Tags

• ltBODYgt
• ltTABLE BORDERgt
• ltCAPTIONgt country
• ltTRgt ltTHgt City ltTHgt inhabitant
• ltTRgt ltTDgt Jönköping ltTDgt 100.000
• ltTRgt ltTDgt Örebro ltTDgt 120.000
• lt/TABLEgt
• lt/BODYgt

23
Developing HTML Documents

• Open a file in a text editor (Notepad).
• Enter text and tags.
• Save the file as text only and add the extension
  .htm or .html. Close the file.
• Open the file in a web browser and review it.