CMPT241 Web ProgrammingHTML

2

Block and Inline Elements

•Block elements contain an entire large region of content▫examples: paragraphs, lists, table cells▫the browser places a margin of whitespace

between block elements for separation

3

Block and Inline Elements (cont.)

• Inline elements affect a small amount of content▫examples: bold text, images▫the browser allows many inline elements to

appear on the same line▫An inline element can contain other inline

elements, but cannot contain any block element.▫must be nested inside a block element

4

Horizontal rule <hr />

• a horizontal line to visually separate sections of a page (block)

• Should be immediately closed with />

<p> First paragraph </p><hr /><p> Second Paragraph </p> HTML

First Paragraph

Second Paragraph

output

5

More HTML tags•Some tags don't contain content; can be

opened and closed in one tag▫syntax: <element attribute="value” attribute="value" />

▫example: ▫<hr />

▫example: <img src=“Harry.jpg" alt="pic of Harry Potter" />

List of valid empty elementsarea basebr colhr imginput linkmeta param

7

More HTML tags•Some tags can contain additional

information called attributes▫syntax: ▫<element attribute="value"

attribute="value"> content </element>▫example: ▫<a href="page2.html">Next page</a>

8

Links <a> (anchor)

•The href attribute specifies the destination URL

•Links or anchors are inline elements, so they must be placed inside a block element such as a p or h1

<p>Search<a href="http://www.google.com/">Google</a>now!</p> HTMLSearch Google now!

output

9

More about anchors

•title: tooltip•Types of URLs that can appear in anchors:

▫Absolute: to another web site▫Relative: to another page on this web site

<p><a href=“deathlyHallows-book.html">Harry Potter and the Deathly Hallows Book</a></p>

<p><a href="http://en.wikipedia.org”title="Search">Wikipedia</a></p>

HTMLHarry Potter and the Deathly Hallows

Wikipedia output

10

Images <img>

• The src attribute specifies source of the image URL • HTML5 requires an alt (an alternative text

representation) attribute describing the image.• If the browser is unable to fetch the image, it will show

the alt text in its place.• Screen reader software can read the values of alt

attributes.

<img src="images/tobby.jpg" alt=“Tobby from Harry Potter" />

HTML

11

Images <img>

•The src attribute specifies source of the image URL ▫Absolute URL▫Relative URL

You can use .. (two dots) to represent the parent of the current directory.

Be careful with this: <img src=“/images/tobby.jpg" alt=“Tobby from Harry Potter" />

<img src="images/tobby.jpg" alt=“Tobby from Harry Potter" />

HTML

Common img Attributes•src•alt•title

▫tooltip•width

▫width of the image (pixels or percentage of window)

•height▫height of the image (pixels or percentage of

window)

13

More about images

• If placed inside an anchor, the image will become a link

<a href="http://harrypotter.net/"><img src="images/dumbledore.jpg" alt=“Dumbledore from Harry Potter"title="Alas! Ear wax!"/></a> HTML

14

Line Break <br/>

•br should be immediately closed with />•br should not be used to separate

paragraphs or used multiple times in a row to create spacing

<p>One Ring to rule them all, One Ring to find them, <br /> One Ring to bring them all and in the darkness bind them.</p>

HTML

One Ring to rule them all, One Ring to find them,One Ring to bring them all and in the darkness bind them

output

15

Comments <!-- … -- >

•Comments are useful for disabling sections of a page

<!-- My web page, by Bob StudentCMPT241, Fall 2048 --><p>CS courses are <!-- NOT --> a lot of fun!</p>

HTMLCS courses are a lot of fun!

output

16

Phrase elements <em>, <strong>

• em: emphasized text (usually in italic)• strong: strongly emphasized text (usually in bold)• The tags must be properly nested for a valid page• semantic meaning of the content

▫em and strong indicate that their content should be emphasized in some way by the browser.

<p>HTML is <em>really</em>,<strong>REALLY</strong> fun!</p> HTML

HTML is really REALLY fun!

output

17

Nesting tags

•Tags must be correctly nested: a closing tag must match the most recently opened tag

•The browser may render it correctly anyway, but it is invalid HTML

<p>HTML is <em>really,<strong>REALLY</em>, really</strong> fun!</p> HTML

Bad

18

Unordered list: <ul>, <li>

•ul represents a bulleted list of items (block)

• li represents a single item within the list (block)

<ul><li>No shoes</li><li>No shirt</li><li>No problem!</li>

</ul> HTML

• No shoes• No shirt• No problem!

output

19

More about unordered lists<ul>

<li>Harry Potter characters:<ul>

<li>Harry Potter</li><li>Hermione</li><li>Ron</li>

</ul></li><li>LOTR characters:

<ul><li>Frodo</li><li>Bilbo</li><li>Sam</li>

</ul></li>

</ul> HTML

20

More about unordered lists (cont.)• Harry Potter characters:

• Harry Potter• Hermione• Ron

• LOTR characters:• Frodo• Bilbo• Sam

output

21

Ordered list <ol>

•ol represents a numbered list of items•we can make lists with letters or Roman

numerals using CSS (later)

<p>Apple business model:</p><ol>

<li>Beat Microsoft</li><li>Beat Google</li><li>Conquer the world!</li>

</ol> HTML

Apple business model:1. Beat Microsoft2. Beat Google3. Conquer the world

output

•A list item can contain a sub-list of the same or different list type.

23

Common error: Not closing a list

•If you leave a list open, subsequent contents will be indented

<ul><li>No shoes</li><li>No shirt</li><li>No problem!</li>

<p>Paragraph after list...</p> HTML

• No shoes• No shirt• No problem!

Paragraph after list... output

24

Common Error: Improper nested list placement<ul>

<li>Harry Potter characters:</li><ul>

<li>Harry Potter</li><li>Hermione</li><li>Ron</li>

</ul></li><li>LOTR characters:

<ul><li>Frodo</li><li>Bilbo</li><li>Sam</li>

</ul></ul> HTML

• closing the outer li too early (or not at all) will render correctly in most browsers, but it is incorrect HTML

25

Definition list <dl>, <dt>, <dd>

• dl represents a list of definitions of terms• dt represents each term, and dd its definition• All three are block elements.

<dl><dt>newbie</dt> <dd>one who does not have mad skills</dd><dt>jaded</dt> <dd>tired, bored, or lacking enthusiasm </dd><dt>frag</dt> <dd>a kill in a shooting game</dd></dl> HTML

newbieone who does not have mad skills

jaded Tired, bored, or lacking enthusiasm

fraga kill in a shooting game

output

26

Tables <table>, <tr>, <td>

1,1 1,2 2,1 2,2

<table> <tr><td>1,1</td><td>1,2</td></tr> <tr><td>2,1</td><td>2,2</td></tr>

</table> HTML

output

table defines the overall table, tr each row, and td each cell's data

Useful for displaying large row/column data sets By default, td is left-aligned

27

Table headers, captions: <th>, <caption><table>

<caption>My important data</caption> <tr><th>Column 1</th><th>Column 2</th></tr>

<tr><td>1,1</td><td>1,2</td></tr> <tr><td>2,1</td><td>2,2</td></tr>

</table> HTML

output

Column 1 Column 21,1 1,22,1 2,2

My important data

th cells in a row/column are considered headers a caption at the start of the table labels its

meaning

28

Note•table, tr and td are necessary to create

a table, but th and caption are optional.•Tables are sometimes used by novices for

web page layout, but this is not proper semantic HTML and should be avoided

29

colspan and rowspan

•Syntax:▫<td rowspan = “rows” colspan = “columns”>▫<th rowspan = “rows” colspan = “columns”>

30

Block quotations <blockquote>

• a lengthy quotation • normally indented (no quotation marks)• Content must be nested inside a block element

<p>As Lincoln said in his famous Gettysburg Address:</p><blockquote>

<p>Fourscore and seven years ago, our fathers brought forth on this continent a new nation, conceived in liberty, and dedicated to the proposition that all men are created equal.</p></blockquote> HTML

As Lincoln said in his famous Gettysburg Address:Fourscore and seven years ago, our fathers brought forth on this

continent a new nation, conceived in liberty, and dedicated to the proposition that all men are created equal.

output

31

Inline quotations <q>

• a short quotation used in a paragraph, sentence or phrase

• Browser displays the quotes automatically.• Why not just write the following?• <p>Quoth the Raven, "Nevermore."</p>

▫Using <q> allows us to apply CSS styles to quotations

<p>Quoth the Raven, <q>Nevermore.</q></p> HTML

Quoth the Raven, “Nevermore.”

output

32

HTML Character EntitiesHow would I write a web page about writing web pages?

<p> <a href="http://google.com/search?q=manhattan+college&ie=utf-8&aq=t">Search Google for Manhattan College</a></p> output

33

HTML Character Entitiescharacter(s) entity< > &lt; &gt;" & &quot; &amp; (white space) &nbsp;™ © &trade; &copy;

é è ñ &eacute; &egrave; &ntilde;

π δ Δ &pi; &delta; &Delta;

34

HTML Character Entities&lt;p&gt;&lt;a href=&quot;http://google.com/search?q=manhattan+college&amp;ie=utf-8&amp;aq=t&quot;&gt;Search Google for Manhattan College&lt;/a&gt;&lt;/p&gt; HTML<p> <a href="http://google.com/search?q=manhattan+college&ie=utf-8&aq=t">Search Google for Manhattan College</a></p> output

Link to homework 1.html?<a href = “homework 1.html”>Homework 1</a>

<a href = “homework%201.html”>Homework 1</a>

36

Computer code <code>

• code: a short section of computer code• displayed in monospace font (letters have the

same width)• inline element

<p>The <code>ul</code> and <code>ol</code>tags make lists.</p> HTML

The ul and ol tags make lists.

output

37

Preformatted text <pre>

• Displayed with exactly the whitespace / line breaks given in the text

• Shown in a fixed-width font by default• block element

<pre>Roses are redViolets are blue

</pre> HTML

Roses are redViolets are blue output

38

Use <pre> and <code> together

•When showing a large section of computer code, enclose it in a pre to preserve whitespace and a code to describe the semantics of the content

<pre><code>public static void main(String[] args) { System.out.println("Hello, world!");}

</code></pre> HTML

public static void main(String[] args) { System.out.println("Hello, world!");

}

output

Homework 1•Create an html page (for example,

homework1.html) both describing and using what we have learned so far.

•Create a link to homework 1 on your home page.

•Make sure all links and pages are accessible through the public url turing.manhattan.edu…..

•Due before Monday midnight