CS637 Class 2

We are looking at slides from

HTML and CSS: Design and Build Websites by Jon
Duckett
Slides are posted on the class website, protected by a
password written on the (virtual) board
Take roll for second and last time.
Note: Exams are open-books, no cell phone or email
use, proctored by Zoom, with private recording.
If you must take a phone call during an exam, tell the
proctor what you’re doing.
HEADINGS

<h1>This is a Main Heading</h1>

<h2>This is a level 2 heading</h2>
<h3>This is a level 3 heading</h3>
<h4>This is a level 4 heading</h4>
<h5>This is a level 5 heading</h5>
<h6>This is a level 6 heading</h6>
PARAGRAPHS

<p>A paragraph consists of one or more

sentences that form a self-contained unit
of discourse. The start of a paragraph is
indicated by a new line.</p>

<p>Text is easier to understand when it is

split up into units of text. For example, a
book may have chapters. Chapters can have
subheadings. Under each heading will be one
or more paragraphs.</p>
WHITESPACE IS COLLAPSED

<p>The moon is

drifting away from the

earth.</p>
LINE BREAKS

<p>The Earth<br />gets one hundred tons

heavier every day<br />due to falling space
dust.</p>

Note: <br> is the usual way to write

the line break.
LINE BREAKS

<p>The Earth<br />gets one hundred tons

heavier every day<br />due to falling space
dust.</p>
STRONG & EMPHASIS

<p><strong>Beware</strong> pickpockets
operate in this area.</p>

<p>I <em>think</em> Ivy was the first.</p>

<p>I think <em>Ivy</em> was the first.</p>

<p>I think Ivy was the <em>first</em>.</p>

WRITING LINKS

<a href="http://www.imdb.com">IMDB</a>
WRITING LINKS

THE PAGE THE LINK

TAKES YOU TO

<a href="http://www.imdb.com">IMDB</a>
WRITING LINKS

THE PAGE THE LINK

TAKES YOU TO

<a href="http://www.imdb.com">IMDB</a>

THE TEXT THE USER

CLICKS ON
LINKING TO OTHER SITES

HTML

<a href="http://www.empireonline.com">
Empire</a>
RESULT
LINKING TO OTHER PAGES
ON THE SAME SITE
HTML

<a href=”index.html”>Home</a>

<a href=”about.html”>About</a>

<a href=”movies.html”>Movies</a>

<a href=”contact.html”>Contact</a>
RESULT
RELATIVE examplearts
URLS index.html
movies
cinema
index.html
listings.html
reviews.html
dvd
index.html
listings.html
reviews.html
music
index.html
listings.html
reviews.html
theater
index.html
listings.html
reviews.html
RELATIVE examplearts
URLS index.html
movies
cinema
SAME index.html
reviews.html listings.html
reviews.html
dvd
index.html
listings.html
reviews.html
music
index.html
listings.html
reviews.html
theater
index.html
listings.html
reviews.html
RELATIVE examplearts
URLS index.html
movies
cinema
index.html
listings.html
reviews.html
CHILD dvd
music/index.html index.html
listings.html
reviews.html
music
index.html
listings.html
reviews.html
theater
index.html
listings.html
reviews.html
RELATIVE examplearts
URLS index.html
movies
cinema
index.html
listings.html
reviews.html
dvd
index.html
listings.html
PARENT reviews.html
../index.html
music
index.html
listings.html
reviews.html
theater
index.html
listings.html
reviews.html
RELATIVE examplearts
URLS index.html
movies
cinema
index.html
listings.html
reviews.html
dvd
index.html
listings.html
reviews.html
music
index.html
GRANDCHILD
movies/dvd/index.html listings.html
reviews.html
theater
index.html
listings.html
reviews.html
RELATIVE examplearts
URLS index.html
movies
cinema
index.html
listings.html
reviews.html
dvd
index.html
listings.html
reviews.html
music
index.html
listings.html
reviews.html
GRANDPARENT theater
../../index.html index.html
listings.html
reviews.html
EMAIL LINKS

HTML

<a href="mailto:[email protected]">Email Jon

</a>
EMAIL LINKS

HTML

<a href="mailto:[email protected]">Email Jon

</a>
RESULT
LINKING TO A SPECIFIC PART OF
THE SAME PAGE

<h1 id="top">
Film-Making Terms</h1>

<a href="#arc-shot">
Arc shot</a><br />
<a href="#interlude">
Interlude</a><br />
<a href="#prologue">
Prologue</a><br />
…

<h2 id="prologue">
Prologue</h2>
LINKING TO A SPECIFIC PART OF
THE SAME PAGE

<h1 id="top">
Film-Making Terms</h2>

<a href="#arc-shot">
Arc shot</a><br />
<a href="#interlude">
Interlude</a><br />
<a href="#prologue">
Prologue</a><br />
…
<h2 id="prologue">
<h2
Prologue</h2>
id="prologue">
Prologue</h2>
<a href="#top">Top</a>
LINKING TO A SPECIFIC PART OF
THE SAME PAGE

<h1 id="top">
Film-Making Terms</h1>
Terms</h2>

<a href="#arc-shot">
Arc shot</a><br />
<a href="#interlude">
Interlude</a><br />
<a href="#prologue">
Prologue</a><br />

<h2 id="prologue">
Prologue</h2>

<a href="#top">Top</a>
LINKING TO A SPECIFIC PART OF
THE SAME PAGE

<h1 id="top">
Film-Making Terms</h1>
Terms</h2>

<a href="#arc-shot">
Arc shot</a><br />
<a href="#interlude">
Interlude</a><br />
<a href="#prologue">
Prologue</a><br />
…
<h2 id="prologue">
<h2
Prologue</h2>
id="prologue">
Prologue</h2>
<a href="#top">Top</a>
LINKING TO A SPECIFIC PART OF
THE SAME PAGE

<h1 id="top">
Film-Making Terms</h1>
Terms</h2>

<a href="#arc-shot">
Arc shot</a><br />
<a href="#interlude">
Interlude</a><br />
<a href="#prologue">
Prologue</a><br />
…
<h2 id="prologue">
<h2
Prologue</h2>
id="prologue">
Prologue</h2>
<a href="#top">Top</a>
CHOOSING IMAGES
FOR YOUR SITE

Images can set the tone for a

site in less time than it takes to
read a description.
CHOOSING IMAGES
FOR YOUR SITE

Images are subject to copyright

but there are stock photography
sites where you can buy them.
CHOOSING IMAGES
FOR YOUR SITE

If a page shows several photos

of products or members of a
team, keep them consistent.
STORING IMAGES ON
YOUR SITE
ADDING IMAGES

HTML

<img src="images/quokka.jpg"
alt="A family of quokka"
title="The quokka is an Australian
marsupial that is similar in
size to the domestic cat" />
RESULT
 RESULT

Book examples: this page online

 RESULT
After right-click (not on image), View Source
we can see the HTML for the page

This is using Chrome, but this can be done in any desktop browser.
Chrome on smartphone: need to use URL view-source:http://whatever.
Can carefully edit URL with pencil that shows up with tap on URL.
HEIGHT & WIDTH OF IMAGES

HTML

<img src="images/quokka.jpg"
alt="A family of quokka"
title="The quokka is an Australian
marsupial that is similar in
size to the domestic cat"
width="600"
height="450" />
RESULT
 Resizing RESULT

• Although browsers will resize images as

specified by width and height, it’s not a great
idea to use it.
• Can end up with distorted or fuzzy images.
• Better to make another right-size image
using a graphics editor and use that.
 How a page with an image gets displayed RESULT

• In this case, the user selects the page as usual

• The browser does a GET request to the server

• The server sends the HTML page with the <img>…

• The browser receives the HTML, parses the <img> URL, and
issues another GET request for the image data (no user
involvement here)

• The server sends the image data back

• The browser shows the completed page to the user

• This means two complete “request cycles” to the server

• We can make a chart showing this communication…

 RESULT
Communications Diagram: page with <img>
(time flows down in diagram)
User/browser Server
1. User:
requests .html
page via
browser
2. Server: sees GET /…page.html,
Returns HTML on same connection
3. Browser: parses
page, sees <img>,
requests image
data
4.Server: sees GET
/…/quokka.jpg
return its data in same connection.
5. User: sees
finished page
 RESULT
Chrome can show details on the two requests

Use right-click, inspect, choose

Network tab, reload page
One page can involve many HTTP RESULT

requests (from last class)

From https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview
WHERE TO PLACE IMAGES
IN YOUR CODE

<img src="images/bird.gif" alt="bird"

width="100" height="100" />
<p>There are around 10,000 living species
of birds that inhabit different ecosystems
from the Arctic to the Antarctic. Man
species undertake long distance annual
migrations, and many more perform shorter
irregular journeys.</p>
RESULT
WHERE TO PLACE IMAGES
IN YOUR CODE

<p><img src="images/bird.gif" alt="bird"

width="100" height="100" />There are
around 10,000 living species of birds that
inhabit different ecosystems from the
Arctic to the Antarctic. Man species
undertake long distance annual migrations,
and many more perform shorter irregular
journeys.</p>
RESULT
 <img> is “inline” RESULT

• Now we look at cases where the <img>

element lies inside the <p> element.
• <p> is a block element, starts a new line
• <img> Image is an inline element, keeps
going on the current line
• Other block elements: <h1>, <ul>, <li>, …
• Other inline elements: <em>, <a>, <strong>
WHERE TO PLACE IMAGES
IN YOUR CODE

<p>There are around 10,000 living species

of birds that inhabit different
<img src="images/bird.gif" alt="bird"
width="100" height="100" />
ecosystems from the Arctic to the
Antarctic. Man species undertake long
distance annual migrations, and many more
perform shorter irregular journeys.</p>
 RESULT

http://htmlandcssbook.com/code-
samples/chapter-05/where-to-place-images.html
 “OLD CODE” RESULT

• In the next slide and in Duckett, “OLD

CODE” means pre-HTML5
• In HTML5, we use CSS to arrange non-
default positioning
• Skip “OLD CODE” for this class, but note it
could be useful for working with older HTML.
• We should revisit these examples once
we’ve tackled CSS.
OLD CODE: ALIGNING IMAGES
HORIZONTALLY (we’re skipping)

<p><img src="images/bird.gif" alt="bird"

width="100" height="100" align="left" />
There are around 10,000 living species of
birds that inhabit different ecosystems
from the Arctic to the Antarctic. Man
species undertake long distance annual
migrations, and many more perform shorter
irregular journeys.</p>

Similarly skip align=“right” inside <img>

IMAGE FORMATS:
JPEG
IMAGE FORMATS:
GIF
 Example image
• See http://htmlandcssbook.com/code-
samples/chapter-05/adding-images.html

• HTML:
<body>
<img src="images/quokka.jpg" alt="Quokka (Setonix brachyurus)" />
</body>

• Note how it stays the same size while you resize the
page. It shows in 600x450 screen pixels.
• On my laptop, 600 px width = 50% of screen width
• Right-click on image in Chrome, Inspect, to see its
dimensions.
 Pixels
• Each digital image has a grid of pixels, written as width x height, for
example 600x450

• Each screen has “resolution” width x height pixels

o My old laptop: 1280x800, new one 1920x1080

o My desktop (20” “two-page” monitor): 1920x1080

o iPhone 5: 640x1136,…iPhone X: 1125x2436 … iPhone XS: 1125x2436

o Samsung S7, Note 9: 1440x2560, … S9 1440x2960

o Many old phones: 854x480

• We can expect about 1000 pixels across to work with

• In particular, the 600x450 image fits on any of these

• See pp. 377-378 for more examples.

IMAGE DIMENSIONS

• Create each image the same

width and height as you would
like it to appear on your
website, using total width =
1000 px.

• Check it on various devices.

• More on this later.
HTML5: FIGURE &
FIGURE CAPTION (HTML5)

<figure>
<img src="images/otters.gif"
alt="Photograph of two sea otters
floating in the water" />
<br />
<figcaption>Sea otters hold hands when
they sleep so that they don’t
drift away from each other.
</figcaption>
</figure>
HTML5: FIGURE &
FIGURE CAPTION

<figure>
<img src="images/otters.gif"
alt="Photograph of two sea otters
floating in the water" />
<br />
<figcaption>Sea otters hold hands when
they sleep so that they don’t
drift away from each other.
</figcaption>
</figure>
HTML5: FIGURE &
FIGURE CAPTION

<figure>
<img src="images/otters.gif"
alt="Photograph of two sea otters
floating in the water" />
<br />
<figcaption>Sea otters hold hands when
they sleep so that they don’t
drift away from each other.
</figcaption>
</figure>
 RESULT

online
WHAT'S A TABLE?
BASIC TABLE STRUCTURE

<table> HTML
<tr>
<td>15</td>
<td>15</td>
<td>30</td>
</tr>
<tr>
<td>45</td>
<td>60</td>
<td>90</td>
</tr>
</table>
RESULT
TABLE HEADINGS

<table> HTML
<tr>
<th></th>
<th scope="col">Saturday</th>
<th scope="col">Sunday</th>
</tr>
<tr>
<th scope="row">Tickets sold</th>
<td>120</td>
<td>135</td>
</tr>
</table>
RESULT
SPANNING COLUMNS

... HTML
<tr>
<th>Monday</th>
<td colspan="2">Geography</td>
<td>Math</td>
<td>Art</td>
</tr>
...
RESULT
SPANNING ROWS

... HTML
<tr>
<th>6pm - 7pm</th>
<td rowspan="2">Movie</td>
<td>Comedy</td>
<td>News</td>
</tr>
<tr>
<th>7pm - 8pm</th>
<td>Sport</td>
<td>Current Affairs</td>
</tr>
RESULT
WHY FORMS?
FORM CONTROLS
HOW FORMS WORK

1: User fills in form and presses button to submit info to server

HOW FORMS WORK

2: Name of each form control sent with value user entered

HOW FORMS WORK

3: Server processes information using programming language

HOW FORMS WORK

4: Server creates new page to send back to the browser based

on info received
NAME & VALUE PAIRS

username=Ivy
NAME & VALUE PAIRS

NAME

username=Ivy
NAME & VALUE PAIRS

NAME

username=Ivy
VALUE
Name-value pairs sent to server
• HTTP GET: in URL query string

GET /webapp/program?username=Ivy HTTP/1.0

… headers

• HTTP POST: in the body of the request:

POST /webapp/program
… headers
… encoded name-value pairs

Note: HTTP POST is the usual way to send in form data,

as we will see.
 Communications Diagram: simple form handling
(time flows down in diagram)
User/browser Server
1. User:
requests form
page via
browser
2. Server: sees GET /…form.html,
returns form.html on same connection
3. User: fills in form
Browser: puts user
input into params
in POST request
4.Server: sees POST /…/doit.php
Get user input from params, do
requested action, compose response,
5. User: sees return it in same connection.
response
FORM STRUCTURE

HTML

<form
action="http://example.com/join.php"
method="get">

This is where the form controls

will appear.

</form>
TEXT INPUT

HTML

<form
action="http://example.com/join.php">

<input type="text" name="username"

size="15" maxlength="30" />

</form>
RESULT
PASSWORD

HTML

<p>Username:
<input type="text" name="username"
size="15" maxlength="30" />
</p>

<p>Password:
<input type="password" name="password"
size="15" maxlength="30" />
</p>
RESULT
TEXTAREA

HTML

<p>What did you think of this gig?</p>

<textarea name="comments"
cols="20" rows="4">
Enter your comments...
<textarea/>
RESULT
RADIO BUTTON

<p>Your favorite genre:<br /> HTML

<input type="radio" name="genre"

value="rock" checked="checked" /> Rock

<input type="radio" name="genre"

value="pop" /> Pop

<input type="radio" name="genre"

value="jazz" /> Jazz

</p>
RESULT
CHECKBOX

HTML
<p>Your favorite music service:<br />
<input type="checkbox" name="service"
value="iTunes"
checked="checked" /> iTunes

<input type="checkbox" name="service"

value="Last.fm" /> Last.fm

<input type="checkbox" name="service"

value="Spotify" /> Spotify
</p>
RESULT
DROP DOWN LIST BOX

HTML

<select name="devices">

<option value="iPod"
selected="selected">iPod</option>

<option value="radio">Radio</option>

<option value="PC">Computer</option>

</select>
RESULT
MULTIPLE SELECT BOX, select with
additional attribute (red)
<select name="devices" size="4“ HTML
multiple="multiple">

<option value="guitar"
selected="selected">Guitar</option>
<option value="drums">Drums</option>
<option value="keys"
selected="selected">Keyboard</option>
<option value="bass">Bass</option>

</select>
RESULT
FILE INPUT BOX: we won’t need this.

HTML

<form action="http://eg.com/upload.php"
method="post">

<p>Upload your song in MP3 format:</p>

<input type="file" name="user-song" />

<input type="submit" value="upload" />

</form>
RESULT
SUBMIT BUTTON

HTML

<form action="http://eg.com/email.php">
<p>Subscribe to our email list:</p>

<input type="text" name="email" />

<input type="submit"
value="Subscribe" />

</form>
RESULT
IMAGE BUTTON (does submit)

HTML

<form action="http://eg.com/email.php">
<p>Subscribe to our email list:</p>

<input type="text" name="email" />

<input type="image"
src="images/subscribe.jpg"
width="100" height="20" />

</form>
RESULT
BUTTONS: Don’t use <button> inside
a form!
<form action="http://eg.com/add.php">
HTML

<button>
<img src="images/add.gif" alt="add"
width="10" height="20" />
</button>

</form>
This submits the form, like <input type=“submit”> or <input type=“image”>.
Tip from www.w3schools.com: If you use the <button> element in an
HTML form, different browsers may submit different values. Use <input> to
create buttons in an HTML form.
• Let’s follow this rule.
HIDDEN FORM CONTROLS
And fix pg. 162: replace <button> with <input>

<form action="http://eg.com/add.php"> HTML

<button> <img src="images/add.gif"

alt="add" width="10" height="20"
/></button>

<input type="image" src="images/add.gif"

alt="add" width="10" height="20" />

<input type="hidden" name="bookmark"

value="lyrics" />
</form>
 RESULT

(Plus hidden effect:

bookmark=lyrics goes
back to server)
 RESULT
Communications Diagram: form handling
Case of form having hidden control “bookmark”
User/browser Server
1. User:
requests form
page via
browser
2. Server: sees GET /…form.html,
returns form.html on same connection
3. User: clicks
button
Browser: puts
bookmark=lyrics in
GET request
4.Server: sees
GET /add.php?bookmark=lyrics
Gets bookmark value, does requested
5. User: sees action, composes response, returns it
response in same connection.
LABELLING FORM CONTROLS: two
ways…
HTML
<form action="http://eg.com/email.php">
<label>Age:
<input type="text" name="Age" /></label>
Gender:
<input id="female" type="radio"
name="gender" value="f" />
<label for="female">Female</label>
<input id="male" type="radio"
name="gender" value="m" />
<label for="male">Male</label>
</form>
RESULT
GROUPING FORM ELEMENTS

HTML
<fieldset>
<legend>Contact details</legend>
<label>Email:<br />
<input type="text" name="email"></label>
<br />
<label>Mobile:<br />
<input type="text" name="mobile"></label>
<br />
<label>Telephone:<br />
<input type="text" name="tel"></label>
</fieldset>
RESULT
HTML5: FORM VALIDATION
Add required attribute
HTML

<label for="username">Username:</label>
<input type="text" name="username"
required="required" />

<label for="password">Password:</label>
<input type="password" name="password"
required="required" />

<input type="submit" value="Submit" />

 RESULT

online
HTML5: DATE INPUT

HTML

<label for="date">Departure date:</label>

<input type="date" name="depart"

id="date" />

<input type="submit" value="Submit" />

RESULT
HTML5: EMAIL & URL INPUT

HTML

<input type="email" name="email" />

<input type="url" name="website" />

RESULT
HTML5: SEARCH INPUT

HTML

<input type="search" name="search"

placeholder="Enter keyword" />

<input type="submit" value="Search" />

 RESULT

online
SUMMARY

Whenever you want to collect

information from visitors you
will need a form, which lives
inside a <form> element.
Note: this is not strictly true, since it is possible to use
<input> outside a form along with scripts that specify
resulting behavior on user actions. It is true for simple
PHP websites (they have no scripts).
SUMMARY

Information from a form is

sent in name/value pairs.
SUMMARY

Each form control is given a

name, and the text the user
types in or the values of the
options they select are sent
to the server.
SUMMARY

HTML5 introduces new

form elements which make
it easier for visitors to
fill in forms.