CS170 Chapter04 HTML

9/21/2020
Chapter 04
HTML
Web Pages
• Web pages:
• Metadata (<tags>)
• Hypertext Markup Language (HTML)
• Browser
HTML page Browser

Web server User machine
1
9/21/2020
Marking Up with HTML

• HTML versions:
• HTML4: popular in the late 1990s
• XHTML:
• Extensible Hypertext Markup Language
• Syntax: all tags in lowercase
• HTML5:
• Syntax: tags are not case sensitive
• Support for video, audio tags
• Responsive: Cross-platform: cellphones, tablets,
laptops, etc.
• Semantic HTML
Configure Your Computer for Writing HTML
• Free programs:
– A browser (Firefox or Chrome recommended)
– A text editor
• Notepad++ for Windows
• Brackets
• Atom
• Gedit
• The editors mentioned provide Syntax

Highlighting (Coloring)
2
9/21/2020
Formatting with Tags

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My first page</title>
</head>
<body>
<p>Hello, World!</p>
</body>
</html>
Tags for Bold and Italic

• Common tags:
– for bold text: <b> </b>
– for italic text: <i> </i>
– for paragraphs: <p> </p>
• More than one kind of formatting can be used at

a time:
• <p><b><i>Veni, Vidi, Vici!</i></b></p>
•
• Veni, Vidi, Vici!
3
9/21/2020
Singleton (empty) Tags

• A few tags are not paired
• Examples:
• <hr> (thematic change):
• produces a horizontal line
•
• <br> (break):
• continues the text on the next line
White Space and Line Width

<p> <b>Xeno’s Paradox: </b>
Achilles and a turtle were to run a race.
Achilles could
run twice as fast as the turtle. The turtle,
being a slower runner,
got a 10 meter head start, whereupon
Achilles started and ran the 10 meter
distance. At that
moment the turtle was 5 meters farther.
When Achilles had run
that distance the turtle had gone another
2.5 meters,
and so forth. Paradoxically, the turtle
always remained
ahead. </p>
HTML ignores white spaces !
12
4
9/21/2020
More tags
<pre> tag : preformatted information
− Text displayed exactly as saved

− <pre>Hello World</pre>
Comments in HTML

13
The Escape Symbol

• Showing a math relationship: 0 < p > r
• Solution: use an escape symbol (&)
é displays é
È displays È
15
5
9/21/2020
Image Tags
• <img src="puffer.jpg”" width="200" height="200" alt="origami puffer fish">
19
Styling Position for Images

• Images are inserted in the page at the
point in the text where the tag is
•
• specified in the HTML, and the text
lines up with the bottom of the image
• The images are not well positioned
With the style float:left this image
on the page flows to the left side
of the text
21
6
9/21/2020
Headings in HTML
• HTML heading tags:
– <h1> and </h1> level one
– <h2> and </h2> level two
–…
– <h6> and </h6> level six
• Headings display content on a new line
headings are bold

and get less
“strong” (smaller
and perhaps not so
bold) as the level
number increases.
22
Hyperlinks: anchor tag
Bertrand Russell
Format:
<a href=“some hyperlink”>some text</a>
23
7
9/21/2020
Making an Image Link

• Images can be used as anchors
• Example (text link):

<a href="42nd_street.html">Times Square</a>
• Example (image link):

<a href="42nd_street.html">
<img src="times_square.jpg" alt="pic of Times Square”>
</a>
24
Absolute Pathnames (URLs)

• Use an entire URL
–
• A URL is made from:
– a protocol specification: http://
– a domain or IP address: www.bioz.com
– a path to the file: /bios/sci/russell.html
25
8
9/21/2020
Relative Pathnames
• Files on the same website as the page being

displayed
• Example (text link):

<a href="President_Kennedy.html"> JFK </a>
• Relative to the file in which the anchor tag

appears
26
CSS (Cascading Style Sheets)
• Programming language
• Styles
elem_name {prop1:value1;…;propN:valueN}
⚫ Example for the <head> section:

⚫
<style>
body {background-color: black; color: white;}
</style>
27
9
9/21/2020
Inline Styling
• applies to a tag in only one place
(attached to a tag):
<b style=“c olor: red;”>text</b>
⚫ The above tag displays: text
29
Span
From this:
My favorite colors are red, green and blue and my

favorite font is Times New Roman.
To this:
My favorite colors are red, green and blue and my

favorite font is Times New Roman.
• Use the <span> tag
30
10
9/21/2020
Span
My favorite colors are
<span style="color:red">red</span>,
<span style="color:green">green</span>, and
<span style="color:blue">blue</span> and my favorite font is
<span style="font-family:Times New Roman">Times New Roman</span>.
31
Style Files
• Consolidation of CSS entries in one file
• Example: myFaveStyle.css
• Add to <head> section:

• <link rel=“stylesheet” href=“myFaveStyle.css” >
⚫ We may use both:

• a separate CSS file
• style tags on HTML file
33
11
9/21/2020
The Cascade
• Style Information sources
• (from lowest to highest priority):
• default: browser
• external: separate CSS file
• head section: <style> tags
• inherited: properties set original tag
• tagged: style attribute inside another tag
• “The closest style wins”
34
Lists Tags: unordered list

• The easiest type of list
is the unordered list
• <ul> and </ul> tags

surround the items of
the list
• <li> and </li> tags

enclose the list items
35
12
9/21/2020
Lists Tags: ordered list

• Another type of list is
the ordered list
• <ol> and </ol> tags
• Bullets are replaced

with numbers
• Otherwise it behaves
like the unnumbered
list
36
Lists Tags: list within a list

• It makes a sublist within
the main list
• The sublists use a

different bullet symbol
37
13
9/21/2020
Handling Tables
• Table tags:
• <table>, </table>
• Border: must use the

border attribute
− <table border=”1”>
Rows:
− <tr>, </tr> tags
Cells:
− <td>, </td> tags
39
Handling Tables
• Captions
− <caption> Country Data </caption>
⚫ Column headings
− <th> Country </th>
40
14
9/21/2020
File Structure
ex1 ex2 ex3 ex4
g1 g2
41
Going “Deeper” in a Folder

• Current file, Referenced file in same folder:
<a href="russellbio.html">Russell</a>
• Referenced file “deeper” in the directory:
<a href="biographies/russellbio.html">Russell</a>
42
15
9/21/2020
Going “Higher” in a Hierarchy

• Navigating up to another folder “higher” in the
hierarchy:
•
• add ../ to the beginning of the href attribute
Example:
<a href=“../biographies/russellbio.html”> Russell </a>
each ../ moves up one level higher in the hierarchy
43
Box Model of CSS

o HTML5: every element is enclosed in a “box”
o Boxes: not visible, unless made visible
o Components: content, padding, border, and margin
Margin
Border
Padding
My content: Hello world
49
16

CS170 Chapter04 HTML

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CS170 Chapter04 HTML

Uploaded by

Copyright:

Available Formats

9/21/2020

HTML page Browser

Marking Up with HTML

Configure Your Computer for Writing HTML

• The editors mentioned provide Syntax

Formatting with Tags

Tags for Bold and Italic

• More than one kind of formatting can be used at

Singleton (empty) Tags

White Space and Line Width

HTML ignores white spaces !

− Text displayed exactly as saved

The Escape Symbol

• <img src="puffer.jpg”" width="200" height="200" alt="origami puffer fish">

Styling Position for Images

headings are bold

Hyperlinks: anchor tag

Making an Image Link

• Example (text link):

• Example (image link):

Absolute Pathnames (URLs)

– a domain or IP address: www.bioz.com

– a path to the file: /bios/sci/russell.html

• Files on the same website as the page being

• Example (text link):

• Relative to the file in which the anchor tag

CSS (Cascading Style Sheets)

⚫ Example for the <head> section:

<b style=“c olor: red;”>text</b>

⚫ The above tag displays: text

My favorite colors are red, green and blue and my

My favorite colors are red, green and blue and my

• Use the <span> tag

• Add to <head> section:

⚫ We may use both:

• “The closest style wins”

Lists Tags: unordered list

• <ul> and </ul> tags

• <li> and </li> tags

Lists Tags: ordered list

• <ol> and </ol> tags

• Bullets are replaced

Lists Tags: list within a list

• The sublists use a

• Border: must use the

ex1 ex2 ex3 ex4

Going “Deeper” in a Folder

• Referenced file “deeper” in the directory:

Going “Higher” in a Hierarchy

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

each ../ moves up one level higher in the hierarchy

Box Model of CSS

My content: Hello world

You might also like