HTML Essentials

1
Computer Applications

• HTML Essentials

2
Introduction

• HTML - Hyper Text Markup Language
• Designed by Tim Burners Lee
• Originated from SGML Giving structure to
  documents

3
Simple Documents

• Tags - ltpgt, lttitlegt, lt/pgt
• Elements - lttitlegtMy First Web Pagelt/titlegt
• W3C World Wide Web Consortium
• Set Standards for HTML Documents
• Use text editors to write HTML not a word
  processor
• You need plain text for the browser to read

4
HTML Document Types

• Strict
• Plain without many features and format options
• Uses Style Sheets to format
• Transitional
• Used most often today
• Includes format options understood by most
  browsers
• Frameset
• Used for documents that define the frames

5
HTML Structure

• lthtmlgtlt/htmlgt
• Contains all code read in the document
• ltheadgtlt/headgt
• Contains all header information
• ltmetagtlt/metagt
• Information about the document
• Character Set ASCII (American Standard Code for
  Information Interchange)
• lttitlegt text lt/titlegt
• Page title

6
HTML Structure Continued

• ltbodygt document-body lt/bodygt
• Attributes
• ltBODY BACKGROUND"URL"gt document-body lt/BODYgt
• ltBODY BGCOLOR"rrggbb"gt document-body lt/BODYgt
  ltBODY TEXT"rrggbb"gt document-body lt/BODYgt
  ltBODY LINK"rrggbb"gt document-body lt/BODYgt
  ltBODY ALINK"rrggbb"gt document-body lt/BODYgt
  ltBODY VLINK"rrggbb"gt document-body lt/BODYgt
  

7
HTML Tags Attributes

• ltpgt text lt/pgt
• ltP ALIGNalignmentgt text
• Alignleft or right or center or justify
• Block-level tag
• ltbrgt
• The line break tag breaks the current line of
  text. (Single Space)
• nbsp
• Creates a non-breaking space

8
HTML Tags Attributes

• ltH1gt text lt/H1gt
• ltH1 ALIGNalignment gt text lt/H1gt
• ltH1 SRC"URL" gt text lt/H1gt
  The
  SRC attribute identifies a graphic image to be
  embedded before the header text
• Same ltH1gt through ltH6gt
• Block level tag

9
HTML Tags Attributes

• Phrase Elements Give meaning to your document
• ltEMgtitalic or boldlt/EMgt
• ltSTRONGgtboldlt/STRONGgt
• ltQgtquotes around textlt/Qgt

10
HTML Tags Atributes

• Font Elements Give a different look to your
  document
• ltbgt boldlt/bgt
• ltigtitalicslt/igt
• ltugtunderlinelt/ugt
• ltsgt strike lt/sgt or ltstrikegt text with line
  through it lt/strikegt
• ltbiggt text the is a little bigger lt/biggt
• ltsmallgt text that is a little smallerlt/smallgt

11
HTML Tags Attributes

• Font Elements Give a different look to your
  document
• ltbgt boldlt/bgt
• ltigtitalicslt/igt
• ltugtunderlinelt/ugt
• ltsgt strike lt/sgt or ltstrikegt text with line
  through it lt/strikegt
• ltbiggt text the is a little bigger lt/biggt
• ltsmallgt text that is a little smallerlt/smallgt

12
HTML Tags Attributes

• Quotations and Quote Marks
• ltblockquotegt indents the text from both sides
  lt/blockquotegt
• ltqgt places lt/qgt quotes around the text
• You can also just use the quote marks from
  the keyboard

13
HTML Tags Attributes

• Preformatted Text
• ltpregt will display the
• text as
• it is typed
• in the editor without
• correcting it in the browser lt/pregt

14
HTML Tags Atributes

• Creating Lists
• ltolgt will display numbers 1,2,3..
• ltligtone
• ltligttwo
• ltligtthree
• lt/olgt
• ltol typeIgt list with Uppercase roman numerals
• ltol typt Igtlist with lowercase roman numerals
• ltol typeAgt Uppercase alpha list
• ltol type agtlowercase alpha list

15
HTML Tags Attributes

• Creating Lists
• ltulgt will display symbols (bullets) for list
  items
• ltligtone
• ltulgtCan also nest the list items
• ltligtone-a
• lt/ulgt
• ltligttwo
• ltligtthree
• lt/ulgt
• ltul typesquaregt list with square bullets
• ltul typt circlegtlist with cirlce bullets

16
HTML Tags Atributes

• Font Formatting
• ltpgt ltfontgt text to be formattedlt/fontgtlt/pgt
• ltfont face garamond, georgia,timesgtthe browser
  would try to display the first available font
  facelt/fontgt
• ltfont size30gtwould display the font in size 30
  lt/fontgt
• ltfont color rrggbbgtdisplays the text in the
  addigned colrlt/fontgt

17
HTML Tags Attributes

• Hyperlinks
• Absolute links show the complete URL
• ltpgt lta href http//www.google.comgtGo to
  Googlelt/agt
• lt/pgt
• lta href http//www.google.com target
  _blankgtGo to Googlelt/agt
• Will Display the linked page in a new browser
  window

18
HTML Tags Attributes

• Hyperlinks
• Relative links show the directory path to the
  file
• ltpgt lta href \\H\mremington\powerPoint.pptgtGo
  to my power point show in the mremington
  folderlt/agt
• lt/pgt
• Title Attribute
• ltpgt lta href \\H\mremington\powerPoint.ppt
  titleComputer History SlideshowgtGo to my power
  point show in the mremington folderlt/agt
• lt/pgt

19
HTML Tags Attributes

• Hyperlinks
• Anchor Tag (Fragments)
• lta hrefbottomgtGo to the Bottom of the
  Pagelt/agt
• This tag would take you to any location on the
• page where the anchor or fragment named
• bottom is coded.
• lta namebottomgtlt/agt

20
HTML Tags Atributes

• Images
• In line Image
• ltpgt This paragraph has an image ltimg
  srchand.gif width20 height22gt in line with
  it. lt/pgt
• Alt attribute tag can be read for those who can
  not see.
• ltpgt This paragraph has an image ltimg
  srchand.gif altimage of a hand pointing up
  width20 height22gt in line with it. lt/pgt

21
HTML Tags Attributes

• Floating Images
• Image will float to the right
• ltimg srchand.gif width20 height22
  alignrightgt
• Image will float to the left
• ltimg srchand.gif width20 height22
  alignleftgt

22
HTML Tags Attributes

• Break Text Around Images
• ltimg srchand.gif width20 height22
  alignrightgt
• Text will break and clear everything to the right
• ltpgtHere is some text. ltbr clearrightgt I want
  this to show up below and after the image on the
  right of the pagelt/pgt
• ltbr clearleftgt would clear all objects on the
  left
• ltbr clearallgt would clear all objects right or
  left

23
HTML Tags Attributes

• Image Borders
• Making an image a link will give the image a
  border by default. You will need to add the
  border attribute to control the size of that
  border.
• lta hrefhttp//www.google.comgtltimg srchand.gif
  width20 height22 alignright hspace10 border0
  gtlt/agt

24
HTML Tags Attributes

• Images ready for scripting..
• To make an image ready for scripting like
  creating a roll-over. You need to add the name
  attribute.
• lta hrefhttp//www.google.comgtltimg srchand.gif
  width20 height22 alignright hspace10 border0
  namehandUp gtlt/agt