Introduction to HTML

1
Introduction to HTML
2
Hypertext Markup Language(HTML)

• HTML is the standard mark-up language used to
  create and organize documents on the World Wide
  Web
• HTML lets users to format text, add graphics,
  sound, video, and save it all in a TextOnly or
  ASCII format that any computer can read.

3
HTML Files

• Must be saved as text files with extension html
  or htm. The extension tells the browser that file
  is to be interpreted according to HTML standards
• Have relatively small sizes

4
HTML Building Blocks

• HTML tags are command words written between
  symbols lt gt, that indicate how browser should
  display the text.
• Tags may have opening and closing version
• Text is placed in a container (or HTML element),
  which starts with opening tag and ends with
  closing.
• ltBgt Bold text lt/Bgt

5
HTML Rules

• Case insensitive
• Spacing
• Browsers ignore extra spaces
• Block-level tags include automatic line brakes
• Examples P, H1, UL, TABLE

6
Tag Attributes

• Attributes offer a variety of options
• Attributes are entered between command word and
  final symbol gt
• A single tag may have a few attributes
• Attributes are placed one after the other in any
  order
• ltIMG SRCImage.bmp HSPACE5gt

7
Attribute Values

• Attributes can accept the values of particular
  types
• Values of attributes should be enclosed in
  straight quotation marks
• may be omitted if the value contains only
  letters, digits, hyphen (-), and period (.)

8
Nesting Tags

• Hierarchy tags that affect entire paragraph may
  contain tags affecting individual words or
  letters
• Order the current closing tag should correspond
  to the last unclosed opening tag

9
Nesting Tags (example)

• Correct
• ltH1gt Information ltIgtSystemlt/Igtlt/H1gt
• Incorrect
• ltH1gt Information ltIgtSystemlt/H1gtlt/Igt

10
HTML Document

• ltHTMLgt
• ltHEADgt
• lt/HEADgt
• ltBODYgt
• lt/BODYgt
• lt/HTMLgt

11
The HEAD Section

• ltHEADgt - beginning of the head section
• ltTITLEgt - page description
• lt/TITLEgt - end of title
• lt!-- Script or comment may be placed here --gt
• lt/HEADgt - end of the head section

12
The BODY Section

• ltBODYgt
• Text displayed by browser
• lt/BODYgt

13
Commonly Used HTML Tags

• ltH1gt lt/H1gt Heading.
• ltH2gt lt/H2gt Heading.
• ltH3gt lt/H3gt Heading.
• ltBLOCKQUOTEgt lt/ BLOCKQUOTE gt
• Indents block of text one tab.

14
Commonly Used HTML Tags (continued)

• ltPgt lt/Pgt Paragraph.
• ltBgt lt/Bgt Bold
• ltIgt lt/Igt Italic
• ltUgt lt/Ugt Underline
• ltEMgt lt/EMgt Emphasize (logical exact
  effect depends on browser)
• ltBR /gt Line break
• ltHR /gt Horizontal Rule (line)

15
Changing the Font

• ltFONT FACEFONTNAME SIZEngt
• Text lt/FONTgt
• FONTNAME specifies the font
• SIZE defines the size
• N3 corresponds to default value

16
Ordered List

• ltOL TYPEx STARTngt Beginning of an Ordered
  List
• ltLIgt lt/LIgt A list element
• ltLIgt lt/LIgt Another list element
• lt/OLgt End of the Ordered List
• TYPE, START are optional
• XA, a, I, i, 1 ( X1 is default value)
• n initial value for list items

17
Unordered List

• ltUL TYPEshape gt Beginning an Unordered List
• ltLIgt lt/LIgt A list element
• ltLIgt lt/LIgt Another list element
• lt/ULgt End of the Unrdered List
• TYPE is optional, shape represents the kind of
  bullet, like circle, square

18
Uniform Resource Locator (URL)

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

Scheme
Server name
Pass
File name
19
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

20
Absolute URL (examples)

• http//www.site.com/dir/hpage.html
• ftp//ftp.site.com/common/prog.exe
• mailtomarina_at_yorku.ca
• file///Cdisk/ITEC1010/COL.html

21
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

22
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

23
Internal link

• Is a reference to a particular part of the same
  page.
• Click upon the internal link will bring a visitor
  to the particular part of the same page.
• To create an internal link
• Create an anchor
• Add a hyperlink to the anchor

24
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.

25
Link to a specific anchor

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

26
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.

27
Images

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

28
Images (continued)

• HEIGHT height of an image in pixels
• ALIGN position on a page
• ltIMG SRCimages/pic1.bmp WIDTH30
• HEIGHT30 ALTDigimon
• ALIGNleft gt

29
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

30
Tables (continued)

• 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 (or )

31
Tables (continued)

• 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

32
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

33
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

34
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

35
Table (examplecontinued)

• 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

36
Cell Attributes

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

37
Cascading Style Sheets

• Allow to assign properties at once to all
  elements
• Advantages
• Save time
• Easy to make changes in formatting
• Easy to create a common style of all pages in the
  Web site

38
Anatomy of a Style

• A Style is made up of an HTML tag and definitions
• A Definition determines how an element is marked
  with the tag
• Definition structure
• PropertyValue(s)

39
Properties

• Each property has one or more values
• Examples font-size, font-weight, font-family,
  color etc..
• Values font-size12pt font-weightbold
  font-familyTekton
• Umbrella property
• Font bold 12pt Tekton

40
Common Properties

• Tags with common properties can be defined at
  once as
• H1,H3,H5colorgreenfont-styleitalic
• font-familyVerdana

41
Local application

• Style information is placed in the BODY part of
  HTML document
• Attribute STYLE is added to the tag
• STYLEproperty1value1
• property2value2 propertyNvalueN
• Example
• ltH2 STYLEbackgroundbluecolorredgt
• Information Technologylt/H2gt

42
Internal Style Sheet

• Style information is placed in the HEAD part of
  an HTML document
• ltSTYLEgt
• TagName1 definition1 definition2
• definitionX..
• TagNameY definition1 definition2
• definitionZ
• lt/STYLEgt

43
External Style Sheets

• ESS are applied to several documents
• To create an external style sheet
• Create new TextOnly file
• Add tags with definitions
• Save the file with extension .css.

44
External Style Sheets (continued)

• To apply ESS it is necessary to create a link
• The link is placed in the HEAD part of HTML
  document
• ltLINK RELStylesheet TYPEtext/css
• HREFURLgt,
• where URL is relative URL of style sheet file

45
Formatting Rules

• External style sheets can be applied to all HTML
  pages, even holding internal and local style
  sheets.
• HTML files may hold local and internal styles
• The latest style definition is applied.

46
Defining Styles for Classes

• HTML elements with the same tag may be divided
  into classes with different format
• To specify a class
• ParentTag.ClassNamedefinition(s)
• To apply a style the attribute CLASS is used in
  the BODY of HTML Document
• ltParentTag CLASSClassNamegt...text
• lt/ParentTaggt

47
Defining Styles for a Particular Tag

• To identify individual tags and appropriate
  styles
• ParentTagIDNamedefinition(s)
• To apply the style to a particular tag in the
  BODY of HTML Document
• ltParentTag IDIDNamegttext
• lt/ParentTaggt

48
Creating Custom HTML Tags

• DIV and SPAN can be combined with classes and IDs
• DIV may contain paragraphs, text, headers
• creates block-level tags
• SPAN may contain FONT, B, I,
• creates inline tags

49
Block-Level Tags

• In the Style Sheet
• DIV.ClassNamedefinition(s) or
• DIVIDName definition(s)
• In the BODY of HTML documents
• ltDIV CLASSClassNamegt or
• ltDIV IDIDNamegt
• Along with lt/DIVgt

50
Inline HTML Tags

• In the Style Sheet
• SPAN.ClassNamedefinition(s) or
• SPANIDName definition(s)
• In the BODY of HTML documents
• ltSPAN CLASSClassNamegt or
• ltSPAN IDIDNamegt
• Along with lt/SPANgt