slide1 n.
Skip this Video
Loading SlideShow in 5 Seconds..
Chapter 4 Marking up with HTML PowerPoint Presentation
Download Presentation
Chapter 4 Marking up with HTML

Loading in 2 Seconds...

play fullscreen
1 / 33

Chapter 4 Marking up with HTML - PowerPoint PPT Presentation

  • Uploaded on

Chapter 4 Marking up with HTML. Marking up with HTML. With HTML words that will appear on the Web page are surrounded by formatting tags <title>Tiger Woods, Masters Champion</title> Tags are not case sensitive <p><b><i>Veni, Vidi, Vichi!</i></b></p> (nesting of tags)

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

Chapter 4 Marking up with HTML

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Chapter 4

Marking up with HTML

marking up with html
Marking up with HTML
  • With HTML words that will appear on the Web page are surrounded by formatting tags
    • <title>Tiger Woods, Masters Champion</title>
    • Tags are not case sensitive
    • <p><b><i>Veni, Vidi, Vichi!</i></b></p> (nesting of tags)
    • Few tags are not paired and do not have a / ending form (<hr> horizontal line, <br> break)
marking up with html1
Marking up with HTML
  • An HTML Web page has the following structure:



beginning material goes here (title)



main content of the page



marking up with html2
Marking up with HTML
  • You write HTML using a basic text editor such as NotePad (Windows), SimpleText (Mac), BBText (UNIX), or the like
structuring documents
Structuring Documents
  • Headings in HTML
    • HTML gives us eight levels of headings to choose from (<h1> and </h1>, <h2> and </h2>, and so on)
    • Higher levels have large fonts
  • An instruction is written as:

<h1>Pope</h1> <h2>Cardinal</h2> <h3>Archbishop</h3>

Would print




html format vs display format
HTML format vs. display format

HTML text was run together on one line

  • Displayed text was formatted on separate lines
  • HTML source tells the browser how to produce formatted image based on the meanings of the tags

<h1>Pope</h1> <h2>Cardinal</h2> <h3>Archbishop</h3>

Or <h1>Pope</h1>



white space
White space
  • Computer experts call space inserted for readability white space
  • We create white spaces with spaces, tabs, and new lines
  • HTML ignores white space
  • Exception: preformatted information contained within <pre> and </pre> tags
  • Important when formatting paragraphs (see page 102)
brackets in html
Brackets in HTML

Math relationship like:

0 < p > r

We use escape symbol – the ampersand (&)

&lt; displays as<

&gt; displays as>

&amp; displays as &

<i>0 &lt; p &gt; r</i>

accent marks in html
Accent marks in HTML
  • Letters with accent marks also use the escape symbol
  • We write ampersand followed by a letter, followed by the name of the accent mark

&eacute displays as é

&Egrave displays as É

&ouml displays as ö

You can find a complete list at

attributes in html
Attributes in HTML
  • How to align or justify text in HTML (page 104)
  • Horizontal rule attribute
  • <hr> has attribute – width, specifies how wide the line should be as a percentage of the browser window’s width
  • Another attribute – size, says how thick the line should be
  • <hr width=“50%” size=1>
  • Size one is the minimum thickness
  • Web page created with HTML, page 106
two sides of a link
Two sides of a link
  • This example has a web page that doesn’t use hypertext at all
  • There are two parts to hyperlink: text in current document that is highlighted, called the anchor text, and the address of the other Web page, called the hyperlink reference
  • Both parts of the hyperlink are specified in the anchor tag
marking links with anchor tags
Marking links with anchor tags

We want to create a link from our Web site to this following Web site

Hyperlink would be displayed with Bertrand’s last name highlighted as Bertrand Russell

The anchor tag would look like this:

Bertrand<a href=“”>Russell</a>

normal text hyperlink reference anchor

In hyperlink a is for anchor, hyperlink reference is using href=“filename”, anchor and end of hyperlink with tag

absolute pathnames
Absolute pathnames
  • Magritte’s biography as a hyperlink reference and anchor

<a href=“’>Magritte</a>

http:// /bios/sci/russell.html

Pathname tells us that these files are two levels down in the directory hierarchy of the site

Such complete URLs are called absolute pathnames

relative pathnames
Relative pathnames
  • Link can refer to other Web pages on the same site
  • These pages are stored on the same or nearby directories
  • Their anchor tags use relative pathnames

If our own bios for Russell and Magritte were for our paradoxes.html page

Our anchor tags for the Paradoxes page can use relative references:

<a href=“russellbio.html”>Russell</a>

And <a href=“magrittebio.html”>Magritte</a>

hierarchy of directories
Hierarchy of directories
  • Going “deeper” in a directory

<a href=“biographies/russellbio.html”>Russell</a>

  • Going “higher” in the hierarchy

my pages






<a href=“../biographies/russellbio.html”>Russell</a>

  • To go even higher we can write

<a href=“../../biographies/russellbio.html”>Russell</a>

including pictures with image tags
Including pictures with image tags
  • To display pictures we use a tag, but not an anchor tag (no need to refer to the picture, but to display picture on the page)
  • Image tag format

<img src=“filename”>

src is source and filename can be pipe.jpg

<img src=“pipe.jpg”>

  • Images are stores in several formats
  • JPEG (Joint Photographic Experts Group) is best for high resolution photographs and artwork
including pictures with image tags1
Including pictures with image tags
  • GIF (Graphics Interchange Format) is best for cartoons and drawings
  • How position an image in the document
    • HTML lays out text in a browser window from left to right from top to bottom
    • Small image placed in line just like a letter at the point where the image tag occurs
    • Larger image dropped in the text but the line spacing will be increased
including pictures with image tags2
Including pictures with image tags
  • Align attribute in the image to line up image with top, bottom, middle by using align=“top”, or align=“middle”, or align=“bottom”
  • We can justify image “right” or “left”
  • To display image by itself, enclose image tag within paragraph tags
  • Example of right justification of an image with paragraph flowing around it

<img src=“pipe.jpg” align=“right”>

including pictures with image tags3
Including pictures with image tags
  • You can specify how large the picture should be by specifying height and width in pixels

<img src=“pipe.jpg” align=“right” height=“130” width=“192”>

  • Browser can shrink or stretch picture to fit available space
  • We can use images to fill in a background by tiling

<body background=“filename”>

handling color
Handling color
  • To have one solid color for a background and text

<body bgcolor=“silver”>

  • To give text a color

<body text=“aqua” link=“olive”>

<b><font color=“red”>This statement is false.</font></b>

color by number
Color by number
  • RGB, intensity of each color is specified from 0 to 255
  • (0,0,0) produces color black
  • (255,255,255) color is white
  • (255,0,0) intense red
  • (0,255,0) intense green
  • (0,0,255) intense blue
color by number1
Color by number
  • You select custom colors by giving the three RGB intensity values
  • You can not specify them as a whole numbers
  • You choose them as pairs of hex digits between 00 and FF
  • Hexadeximal (hex) digit is one of the symbols (0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F) from the base-16 or hexadecimal numbering system
color by number2
Color by number
  • 00 corresponds to 0 and FF is the same as 255
  • In HTML #FF0000 intense red,

#00FF00 intense green, and

#0000FF intense blue

# means that a hexadecimal number is following

Table 4.4 on page 114 gives a translation of regular numbers into hexadecimal digit equivalents

(255,142,42) carrot orange translated #FF8E2A

color by number3
Color by number
  • Numeric colors need two level of translation – first translation of the color into RGB intensities, and then translation of those values into hex digit pairs
  • Appendix A, Table A.1 shows a standard set of HTML colors and their hex specification
  • Result of creating links and adding color is on the Figure 4.2, page 114, HTML text page 115
handling lists
Handling lists
  • Types of lists:
    • Unnumbered lists


<li>Luxo Jr.</li>

<li>Toy Story</li>

<li>Monsters Inc.</li>


  • Would give us

·Luxo Jr.

· Toy Story

· Monsters Inc.

types of lists
Types of lists
  • Ordered lists


<li> Hydrogen, H, 1.008,1 </li>

<li> Helium, He, 4.0003, 2 </li>

<li> Lithium, Li, 6.941, 2 1 </li>


Would look like

    • Hydrogen, H, 1.008, 1
    • Helium, He, 4.003, 2
    • Lithium, Li, 6.941, 2 1
types of lists1
Types of lists
  • A list within a list





<li>Granny apple</li>





Would produce: · Pear

· Apple

- Granny Smith

- Fuji

· Cherry

types of lists2
Types of lists
  • Definitional list


<dt> Man </dt>

<dd> <i>Homo sapiens</i>, the greatest achievement of evolution.</dd>


<dd> <i>Homo sapiens</i>, the greatest achievement of evolution, and clever enough not to mention it to man.



  • Would be formatted by browsers as


Homo sapiens, the greatest achievement of evolution.


Homo sapiens, the greatest achievement of evolution, and clever enough not to mention it to man.

types of lists3
Types of lists
  • Compact attribute in molecular biology

<dl compact>


<dd>Adeline </dd>






  • Would be displayed as

A Adeline

C Cytosine

G Guanine

handling tables in html
Handling tables in HTML
  • Table
  • Tr-table rorw, td-table data
  • Would be defined by

<table border>












handling tables
Handling tables
  • You can give tables captions and column headings
    • Caption tags <caption> and </caption>
    • Table headings <th> and </th>
  • Table on page 119
  • Figures 4.3 and 4.4 (page 120) show two different HTML sources, one is listing the links in sequence and the other placing links into a table. When there is enough window space the two solutions look the same.
handling tables in html1
Handling tables in HTML
  • When there is a small amount of window space for the full sequence of links, the browser will wrap the links (page 122)
  • All other Web languages are the variations on the same theme: tags surround all objects and all specify properties of the page
  • Web authors use Web authoring tools, like Macromedia Dreamweaver, or standard text editors like Microsoft Word or Composer feature of Netscape
  • Web pages are stored in an encoded form before browser turns them into the image we see on the screen
  • HTML is the most widely used form of encoding using tags for formatting
  • Use of absolute and relative pathnames (URLs are called absolute pathnames, relative pathnames show how to find the referenced file relative to the file in which anchor tag appears)
  • Two formats for images: JPG and GIF
  • Colors and tables in HTML
  • Web pages are built with Web authoring tools, programs that then automatically create the HTML when page design is complete