HTML Notes for Self Study

1
HTML Notes for Self Study
2
What you should know about HTML

• General Structure of HTML
• headings, setting style
• Text, paragraphs, and lists
• Anchors, Names and Links
• Images
• Tables
• fames and miscellaneous
• style sheets

3
What is HTML

• HTML was developed by Tim Berners-Lee of CERN
  around 1990
• HTML is understood by WWW browserse.g.,
  Netscapes Navigator, and Microsofts Internet
  Explorerwhich interpret and display the output
  to the viewer
• Depends on browsers, same html page may look
  differently.

4
What is HTML

• Hypertext Markup Language (HTML) is a language in
  which one can describe
• The display and format of text
• The display of graphics
• Pointers to other html files
• Pointers to files containing graphics, digitized
  video and sound
• Forms that capture information from the viewer

5
An Example

• The nine planets of the solar system are
• mercury,
• venus,
• earth,
• mars,
• jupiter, saturn, uranus, neptune and pluto.
• The very nearest star is about 7,000 times
  farther away than pluto is to our sun.
• Save this file as example1.txt as example1.html

6
Browser Output - Example 1
example1.html
example1.txt
7
Example 2 Adding Some Markup

• ltPgtThe nine planets of the solar system are
  ltBgtmercury, venus, earth, mars, jupiter, saturn,
  uranus, neptune and pluto.lt/Bgtlt/Pgt
• ltPgtThe very nearest star is about ltIgt7,000lt/Igt
  times farther away than pluto is to our sun. lt/Pgt

8
General Structure

• HTML documents have a head and body
• head should contain a title
• body may have paragraphs
• A leading line indicates which version of HTML
  this document conforms to
• lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
• "http//www.w3.org/TR/REC-html40/strict.dtd"gt
• ltHTMLgt
• ltHEADgt
• ltTITLEgtThe Solar Systemlt/TITLEgt
• lt/HEADgt
• ltBODYgt
• ltPgtThe nine planets of the solar system are...
• lt/BODYgt
• lt/HTMLgt

9
Browsers Are Tolerant

• Browsers follow the rule of being tolerant of
  mistakes in the input
• They ignore markup they dont understand
• Netscape Navigator/Microsoft Internet Explorer
  are tolerant browsers
• They do not insist that the HTML document begin
  and end with ltHTMLgt
• ltHEADgt and/or ltBODYgt tags are not required
• But, there is no guarantee that this behavior
  will be the same for all browsers

10
Example - Browsers are Tolerant

• Suppose the entire document is one line, such as
• ltHEADgtText placed between ltODDTAGgt HEAD markers
  is not normally displayed.lt/HEADgt

11
HTML Elements and Tags

• Each element consists of a start tag, content,
  and an end tag
• E.g. ltBODYgt some text lt/BODYgt
• A slash after the lt indicates an end tag
• Some elements do not require end tags,
• e.g. ltPgt paragraph tag
• Some elements do not require content,
• e.g. ltHRgt
• horizontal rule tag places a straight line
  across the page

12
Attributes

• Elements may have parameters, called attributes
• Attributes are placed in the start tag before the
  final "gt"
• Attributes have the form namevalue
• E.g. ltH1gt is the first heading tag
• ltH1 id"Chapter1"gt
• Start of Chapter 1
• lt/H1gt
• Attribute values are often enclosed in quotes,
  either double or single
• Quotes are not required when the value contains
  only letters, digits, hyphens, and periods.
• Attribute names are case insensitive, but not
  necessarily attribute values

13
Comments in HTML

• Comments start with
• lt!--
• and end with
• --gt
• Comments cannot be nested
• Whitespace is permitted between the -- and the
  closing angle bracket, gt
• It is not permitted between the opening angle
  bracket, exclamation point, and the --
• E.g.
• ltBODYgt
• lt!-- This is a comment
• and hence not displayed --gt
• But this will be displayed
• lt/BODYgt

14
Example of ltBODYgt tag attributes

• Using inline style settings to set the font size,
  background and color of text
• ltHTMLgt
• ltHEADgt
• ltTITLEgtSetting Body Attributeslt/TITLEgt
• lt/HEADgt
• ltBODY style"font-size 20pt
• background green color fuchsia"gt
• The nine planets of the solar system ...
• lt/BODYgt
• lt/HTMLgt

15
Browser Output - Body Tag Attributes
16
Headings

• There are six levels of headings ltH1,H2,...,H6gt
• Navigator and Internet Explorer render them left
  aligned and bold
• Includes paragraph breaks before and after and
  sufficient white space to render the heading
• ltHTMLgtltHEADgt
• ltTITLEgtThe Solar System Headingslt/TITLEgt
• lt/HEADgt
• ltBODYgt
• ltH1gtThe Solar System lt/H1gt
• ltH2gtThe Solar System lt/H2gt
• ltH3gtThe Solar System lt/H3gt
• ltH4gtThe Solar System lt/H4gt
• ltH5gtThe Solar System lt/H5gt
• ltH6gtThe Solar System lt/H6gt
• lt/BODYgtlt/HTMLgt

17
Browser Output
18
Text Styling

• Underline style
• ltUgtlt/Ugt
• Align elements with ALIGN attribute
• right, left or center
• Close nested tags in the reverse order from which
  they were opened
• Emphasis (italics) style
• ltEMgtlt/EMgt
• Strong (bold) style
• ltSTRONGgtlt/STRONGgt
• ltBgt and ltIgt tags deprecated
• Overstep boundary between content and presentation

19
Stylizing text on Web pages
20
Formatting Text With ltFONTgt

• SIZE
• To make text larger, set SIZE x
• To make text smaller, set SIZE -x
• x is the number of font point sizes
• FACE
• Font of the text you are formatting
• Be careful to use common fonts like Times, Arial,
  Courier and Helvetica
• Browser will display default if unable to display
  specified font
• Example
• ltFONT COLOR red SIZE 1 FACE
  Arialgtlt/FONTgt

21
(No Transcript)
22
Using the FONT element to format text
23
Horizontal Rule

• The tag ltHRgt causes a horizontal line to be
  drawn attributes include
• Size, thickness in pixels
• ltHR SIZE"15"gt
• Width, either pixels or percent
• ltHR NOSHADE WIDTH"50" SIZE"25"gt
• ltHR NOSHADE WIDTH"25" SIZE"25"gt
• ltHR NOSHADE WIDTH"25" ALIGN"right" SIZE"25"gt
• The default positioning of a line is centered,
  but that can be overridden with the ALIGN
  attribute its options are left, right, and
  center

24
Example - Horizontal Rule

• ltHTMLgtltHEADgtltTITLEgtExamples of Horizontal
  rulelt/TITLEgtlt/headgt
• ltBODYgtltH2gtExamples of Horizontal Ruleslt/H2gt
• ltHRgt
• Rules of different sizes, SIZE5, 10, and 25.
• ltHR SIZE5 NOSHADEgtltHR SIZE10 NOSHADEgtltHR
  SIZE25 NOSHADEgt
• Rules of different alignment, ALIGNleft, center
  and right.
• ltHR width50 alignleftgt ltHR width50
  aligncentergt ltHR width50 alignrightgt
• Rules of different width, width10, 25, and 50
• ltHR width10 aligncentergt ltHR width25
  aligncentergt ltHR width50 aligncentergt

25
Browser Output
26
Anchors

• An anchor is a way to designate a link to another
  document or to a specific place in the same
  document
• Begins with ltAgt and ends with lt/Agt
• The link location is given by the attribute HREF
  (Hypertext Reference) e.g.,
• See ltA HREF"http//nunki.usc.edu/file.html"gtClas
  s Home Pagelt/Agt for a description of the class
  project
• Hypertext links are displayed using underlining,
  color, or highlighting
• Depends on the browser defaults or the use of
  style settings
• Once a link is taken, it should change color

27
Example Using Anchors for Naming

• ltBODYgtltH1gtWelcome to my HTML Tutoriallt/H1gt
• ltA HREF"intro"gtIntroductionlt/AgtltBRgt
• ltA HREF"chap1"gtChapter 1lt/AgtltBRgt
• ltA HREF"chap2"gtChapter 2lt/AgtltBRgt
• . . . Lots of text here . . .
• ltA NAME"intro"gtlt/AgtltHRgt
• Introduction This document contains a short
  tutorial on how to write HTML. ...ltPgt
• ltA NAME"chap1"gtlt/Agt
• ltBgtChapter 1lt/BgtltBRgt
• In this chapter we learn what a markup language
• . . .ltPgt
• ltA NAME"chap2"gtlt/Agt
• ltBgtChapter 2lt/BgtltBRgt
• In this chapter we learn about anchors and
  their...

28
Browser Output for Naming
29
Examples of Anchors

• ltA hrefmyfile.htmlgt a file in the same directory
  and same domain as the current page
• lta hreffile//g\351\myfile.htmlgt a file on your
  local machine in directory G\351
• ltA hrefhttp//tlaloc.sfsu.edu/mydocs/book.docgt a
  file in directory mydocs on machine
  tlaloc.sfsu.edu, a WWW site
• ltA hrefnewscomp.compilersgt the newsgroup
  computers.compilers
• ltA hrefmailtosales_at_xyz.comgt opens an an e-mail
  window for sending a message
• ltA HREF"http//www.lycos.com/cgi-bin/pursuit?Hyp
  ertextMarkupLanguage"gt lt/Agt Connects to lycos
  and runs pursuit with three arguments
• ltA HREF"ftp//ds.internic.net/rfc/rfc1866.txt"gtD
  ownload RFC1866 lt/Agt An anchor that executes the
  ftp program to fetch a file

30
ltIMGgt Element

• The IMG element embeds an image in the current
  document, e.g. ltIMG SRC"file.gif"gt
• Some attributes of ltIMGgt include
• Aligntop, middle, or bottom to align text around
  an image
• border to place a border around an image
• If set to 1 or higher, places a black box around
  the image
• If set to 0, leaves no surrounding box
• height and width to control the dimensions of the
  image
• Alt to replace an image with text, if the image
  is unavailable or a text browser is used e.g.,
• ltIMG SRC"eiffel.gif" ALT"picture of the Eiffel
  Tower"gt

31
Image - Formats

• Four image formats are always supported by Web
  browsers
• x-bitmaps
• Commonly found on UNIX workstations
• Black and white
• x-pixelmaps
• Similar to x-bitmaps, but 8 bits are given to
  each pixel, permitting 256 colors in the image
• Graphic Interchange Format (GIF) images
• The most common
• Support black and white, grayscale, and color
• Joint Photographic Experts Group (JPEG) image
  format
• Designed for photographic images
• Includes image compression

32
Active Images Animated GIF

• Active images are images that can be clicked and,
  just like an anchor, they act as a hypertext link
• ltA HREF"http//sunset.usc.edu8080/index.html"gt
• ltIMG SRC"USCimage.gif"gt lt/Agt
• Active images have a border around them and the
  cursor changes shape when passed over
• Active images can be quite attractive, but
  remember, some people run line-only browsers,
  while others have low-bandwidth Internet
  connections and typically turn off the
  downloading of images
• Animated GIF provides a multiframe images in one
  image file

33
Image Maps

• Image maps are active images with multiple
  clickable regions
• each region can be associated with a specific
  action (e.g., retrieve a document, run a program,
  etc.)
• yahoo.com starts with an image map
  

• When the region is activated by the user, e.g.
  by a mouse click, the action is taken
• There are two types of image maps
• Client-side the pixel coordinates are
  interpreted by the browser.
• Server-side the pixel coordinates are
  interpreted by a server-side program.