Introduction to HTML

1
Introduction to HTML

• Part II

2
Uniform Resource Locator (URL)

• http//www.atkinson.yorku.ca/marina/itec.htm
• URL can be
• Absolute contain all parts of URL
• Relative present path and file name relatively
  current file.

Scheme
Server name
Pass
File name
3
Scheme

• http Hypertext Transfer Protocol to access
  Web-pages
• ftp File Transfer Protocol to download the file
  from the net
• mailto to send electronic mail
• File to access file on a local hard disk (File
  scheme uses ///).
• and others

4
Relative URL (examples)

• A file from the same folder as current file
• file.htm
• A file from a subfolder of current folder
• images/picture.gif
• A file from another folder at the same
  hierarchical level
• ../info/data.htm

5
External Link

• is a reference to another page
• ltA HREFURL gt Label text lt/Agt
• Label text will be underlined or highlighted,
  click upon it will bring visitors to the page
  with given URL

6
Creating Anchors

• Place the cursor in the desirable part of a page,
  where the link should bring visitors
• Create an anchor
• ltA NAMEanchor namegtLabel text lt/Agt
• Label text is a text or image that should be
  referenced.

7
Link to a specific anchor

• Within a document
• ltA HREFanchor namegt Label text lt/Agt
• To a separate document
• ltAHREFURLanchor namegtLabel text lt/Agt

8
Link to E-mail address

• ltA HREFmailtoname_at_website.extgt
• Say HELLO!!!lt/Agt
• Click on hypertext Say HELLO!!! will invoke an
  application such as MS Outlook to send E-mail to
  the address
• name_at_website.ext.

9
Images

• ltIMG SRCimage.extgt
• SCR source of image or file address
• Another attributes
• BORDERn, n-thickness of the border in pixels
• ALT alternative text
• WIDTH width of an image in pixels

10
Images (continue)

• HEIGHT height of an image in pixels
• ALLIGN position on a page (top, middle,
  bottom, left, right.
• ltIMG SRCimages/pic1.bmp WIDTH30
• HEIGHT30 ALTDigimon
• ALIGNleft gt

11
Tables

• A table is a matrix formed by the intersection of
  a number of horizontal rows and vertical columns.
• Column 1 Column 2 Column 3
• Row 1
• Row 2
• Row 3

12
Tables (continue)

• The intersection of a column and row is called a
  cell. Cells in the same row or column are usually
  logically related in some way.
• Column 1 Column 2 Column 3
• Row 1
• Row 2
• Row 3

13
Tables (continue)

• Container
• ltTABLEgt lt/TABLEgt
• Attributes
• BORDER n the border thickness in pixels
• WIDTHx width of the table or a cell within the
  table in pixels

14
Tables (continue)

• A table is formed row by row To define a row
• ltTRgtlt/TRgt is used
• Within a row table cells with data is determined
  by
• ltTDgtlt/TDgt
• or with headers by
• ltTHgtlt/THgt

15
Simple Table (example)

• ltHTMLgt
• ltHEADgt
• ltTITLEgt Example of table lt/TITLEgt
• lt/HEADgt
• ltBODYgt
• ltTABLEgt
• ltTRgt ltTHgtMonthlt/THgt ltTHgtQuantitylt/THgt lt/TRgt
• ltTRgt ltTDgtJanuarylt/TDgt ltTDgt130lt/TDgtlt/TRgt
• ltTRgt ltTDgtFebruarylt/TDgt ltTDgt125lt/TDgt lt/TRgt
• ltTRgt ltTDgtMarchlt/TDgt ltTDgt135lt/TDgt lt/TRgt
• lt/TABLEgt
• lt/BODYgt
• lt/HTMLgt

16
Tables (more complicated)

• To span a cell across a few columns attribute
• COLSPANn, where n- number of columns is used
• To span a cell across a few rows attribute
• ROWSPANn, where n- number of rows is used

17
Table (example)

• ltTABLE BORDER2gt
• ltTRgt
• ltTHgt Quarterlt/THgtltTHgtMonthlt/THgtltTHgtQuantitylt/THgt
  
• lt/TRgt
• ltTRgt ltTD ROWSPAN3gt I lt/TDgt ltTDgtJanuarylt/TDgt
  ltTDgt130lt/TDgt lt/TRgt
• ltTRgt ltTDgtFebruarylt/TDgt ltTDgt125lt/TDgt lt/TRgt
• ltTRgt
• ltTDgtMarchlt/TDgtltTDgt135lt/TDgt
• lt/TRgt

18
Table (example)(continue)

• ltTRgt ltTD ROWSPAN3gt II lt/TDgt ltTDgtAprillt/TDgt
  ltTDgt130lt/TDgt
• lt/TRgt
• ltTRgt ltTDgtMaylt/TDgtltTDgt125lt/TDgt lt/TRgt
• ltTRgt ltTDgtJunelt/TDgtltTDgt135lt/TDgt lt/TRgt
• ltTRgt ltTD COLSPAN2gt Total lt/TDgt ltTDgt780lt/TDgt
• lt/TRgt
• lt/TABLEgt

19
Sell Atributes

• FONT establishes the font of a cell
• ALIGN determines horizontal alignment of cell
  content, accept values
• left, center, or right
• VALIGN - determines vertical alignment of cell
  content, accept values
• top, middle, bottom, or base line

20
Purposes to use tables

• To present tabular data
• To create multicolumn text
• To create captions for images
• To create side bars
• Cells may contain various HTML containers
• Images, Hyperlinks, Text, Objects, even Tables

21
Thank you for your attention!