MARKING UP WITH HTML

1
MARKING UP WITH HTML
chapter4

• A Hypertext Markup Language Primer

2
HTML Background

• Invented at CERN by Tim Berners-Lee
• A subset of SGML, a more complex markup language
• HTML is a simple document processing language for
  the WWW
• Defines page presentation, not content or meaning
• Browser displays text based on the embedded
  markup tags
• ltbgtHey browser! make me boldlt/bgt

3
HTML Advantages

• Very easy to learn and write HTML code
• Only have to markup a page once
• Any browser can interpret tags and display the
  page
• Caution! Page will not be identical in all
  browsers
• Nobody owns HTML, you can use it for free
• Internationalized and Accessible

4
HTML Advantages

• Extensible new features continue to be added
• New markup tags
• Cascading style sheets
• XHTML (eXtensible HTML)
• Last standalone version of HTML is v. 4.01
• Now folded into XHTML 1.0 specification
• See www.w3.org for latest info

5
HTML A first example

• To markup a web page, open a text editor like
  Notepad
• Create/edit your web page
• Save it as filetype .html or .htm
• Doubleclick on the file and it should open in
  your default browser

6
HTML- Hello World Example

• lthtmlgt
• ltheadgt
• lttitlegtHello World!lt/titlegt
• lt/headgt
• ltbodygt
• lth1gtHello World!lt/h1gt
• lt/bodygt
• lt/htmlgt
• Link ..\..\..\GRayWebPage\INFSCI0010\Chp04\Hello
  World.html

7
HTML- Hello World Example

• To see the marked up text in the browser
• Click on ViewSource
• Or Alt v, Alt c from the keyboard
• To edit your page and display the new version
• Modify your .html file in Notepad
• Save the changes (Ctrl s)
• Alt Tab to toggle Notepad to the background
• Ctrl r to reload the web page

8
HTML- Hello World Modified Version

• lthtmlgt
• ltheadgt
• lttitlegtHello World!lt/titlegt
• lt/headgt
• ltbody bgcolor"red"gt
• lth1gtHello World!lt/h1gt
• ltbr /gt
• lth2gtHere's a smaller headerlt/h2gt
• lt/bodygt
• lt/htmlgt

9
HTML- Some Common Tags

• HTML tags meaning, not their form give the form
  of Web pages, white space is ignored
• Tags mostly come in pairs use lower case

Start tag End tag Meaning lthtmlgt
lt/htmlgt Surround document lttitlegt
lt/titlegt Contents of title bar ltheadgt
lt/headgt Preliminary material ltbodygt
lt/bodygt Surrounds main content ltpgt
lt/pgt Surrounds paragraphs lth1gt
lt/h1gt Headings up to 8 ltbgt
lt/bgt Bold ltigt lt/igt
Italic lta href'filenamegt lt/agt
Anchor reference for link ltimg src'filename /gt
Image source reference ltbr /gt
Break
10
The Web page resulting from interpreting the file
paradoxes.html by a browser
11
HTML source for paradoxes.html
12
Pathnames for Anchor and Image Tags

• Two kinds of paths
• Absolute lta href'http//www.moma.org/index.htm'gt
  
• Relative lta href'magrittebio.html'gt
• Path names can refer to files at
• Same level, lta href'mirobio.html'gt
• Deeper levels, lta href'artists/20thC/mirobio.html
  'gt
• Higher levels, lta href'../../catalog.html'gt

Use relative paths for files on same site as the
page
13
Pathnames for Anchor and Image Tags

• When to use absolute vs. relative paths
• Use absolute path when youre linking to a
  resource on the web
• Use relative path when youre linking to another
  file in your website
• Warning!
• Using an absolute path for files on the same site
  will cause a broken link when the files are moved
  to another computer
• Check out this simple example

14
Bookmarks Images

• Check out this simple example that demonstrates
• How to insert a bookmark
• How to embed an image and wrap text around it
• A list of html tags with several examples can be
  found here
• These are the tags attributes that I expect you
  to be familiar with for this course

15
Completed version of paradoxes.html Web page
16
The HTML source for the completed Web page
17
A Web page with links as text
18
The HTML for the Thoreau page
19
A page with the links organized as a table
20
The HTML for the Steinbeck page
21
A comparison of the Thoreau and Steinbeck pages
showing that the table (Steinbeck page) keeps the
links in a single row rather than wrapping them