Scribd
Upload
37 views

CS170 Chapter04 HTML

The document discusses HTML markup language and tags. It covers the basic structure of an HTML document with tags for headings, paragraphs, bold and italic text, images, links, and lists. It also discusses how to style text and elements with CSS, including inline styling, internal and external style sheets, and the cascade order of styles. Tables are presented with tags for the table, rows, and cells. File and folder structures are also covered.

Uploaded by

Yusuf Çubuk
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
37 views

CS170 Chapter04 HTML

The document discusses HTML markup language and tags. It covers the basic structure of an HTML document with tags for headings, paragraphs, bold and italic text, images, links, and lists. It also discusses how to style text and elements with CSS, including inline styling, internal and external style sheets, and the cascade order of styles. Tables are presented with tags for the table, rows, and cells. File and folder structures are also covered.

Uploaded by

Yusuf Çubuk
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 16

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
<!-- This is a comment -->

13

The Escape Symbol


• Showing a math relationship: 0 < p > r
• Solution: use an escape symbol (&)

&eacute; displays é
&Egrave; 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

You might also like