1

§ Evolution of HTML
§ HTML syntax & tags
§ Character Entities
§ Meta data
§ Images
§ Links
§ Lists
§ Tables
§ Forms – a first look
§ <audio> & <video> element
§ <time> element

2
§ Tables are defined with the <table> tag
§ Captions are given with <caption></caption>
§ Defined row-by-row not column-by-column
§ The table size is not given, it is calculated

§ <tr></tr> defines a row

§ <th></th> defines a row label
§ <td></td> defines a data element

3
 4

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
 5

2-Table1.html

<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
. . .
</table>
§ Merging cells

§ rowspan: The rowspan attribute specifies the number of rows a

cell should span

§ colspan: The colspan attribute defines the number of columns

a cell should span.

6
colspan and rowspan
2-Table2.html

<table border="1">
<tr >
<td colspan = 4>This cell spans all 4 col.</td>
</tr>

<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 2, cell 3</td>
<td>row 2, cell 4</td>
</tr>

Continued on next slide 7

colspan and rowspan …
2-Table2.html

…
<tr>
<td>row 3, cell 1</td>
<td rowspan = 2>row 3 cell 2 spans 2 rows</td>
<td colspan = 2>row 3 cell 3 spans 2 col.</td>
</tr>
<tr>
<td>row 4 cell 1</td>
<td>row 4 cell 3</td>
<td>row 4 cell 4</td>
</tr>
</table>

8
§ Work out the html code for this table

9
 Work out the html code for this table

Hint: First line is done with <caption> tag and will need the <th>
tag and <em> for italic 10
§ Evolution of HTML
§ HTML syntax & tags
§ Character Entities
§ Meta data
§ Images
§ Links
§ Lists
§ Tables
§ Forms – a first look
§ <audio> & <video> element
§ <time> element

11
§ Allow user interaction

§ Will start by looking at

how to create a form.

§ To make them do
something we need a
programming
language like
JavaScript
§ <form></form> is
used to transmit
information to the
server

12
form tag is a container for form elements
o Text boxes
o Password boxes
o Text areas
o Select lists
o Check boxes
o Radio buttons
o Buttons
o Labels

13
§ <form> </form> tags define the form as a part of the page

§ How to use:
<form action = ″″>
</form>

action attribute indicates what should happen when the form is

submitted

§ <label> to set a chunk of text as a label

§ <input></input> tags to collect data

14
15
§ text field/box with a label

<label>User Name</label>
<input type ="text" name="usrNm" /> or
<input type ="text" name ="usrNm" value="Enter your
name"/>

16
§ password field with a label

<p>
<label>Password</label>
<input type = "password" name="usrNm"/>(6 to 20
characters))
</p>

17
§ textarea with a label

<p>
<label>Address:</label>
<textarea name ="address” rows = "10” columns = "20">
</textarea>
</p>

18
§ Drop Down Menu

<label> What type of coffee would you like?

<select name = "coffee">
<option value = "reg"> Regular </option>
<option value = "lat"> Latte </option>
<option value = "chocMoc"> Chocolate Mocha</option>
<option value = "whtChocMoc"> White Chocolate Mocha
</option>
</select>
</label> 19
§ Check boxes with a label
<form action="">
...
<label>What type of coffee would you like?
<input type ="checkbox" name="coffee"
value = "reg" checked="checked" />
Regular
</label>
<br />
<label>
<input type ="checkbox" name="coffee" value = "latte" />
Latte
</label>
<br />
...
</form> 20
§ Radio buttons

<form action="">

<label><input type ="radio" name="coffee"

value = "reg" checked/>
Regular
</label>
<br />
<label><input type ="radio" name="coffee“
value = "lat" />
Latte
</label>
<br />
...
</form>
21
§ Action buttons

<form action="">
...
<input type = "submit" value = "Submit" />
<input type = "reset" value = "Reset" />
...
</form>

22
§ Example of Coffee2.html 23
§ <fieldset> is used to group several controls as well as labels.

§ <legend> provides a label/title for the <fieldset>

§ Example:

<form>
<fieldset>
<legend>Choose your favorite food</legend>
<label> <input type="radio" name="Pizza"/>Pizza</label><br/>
<label><input type="radio" name="sandwich"/>Sandwich</label><br/>
<label><input type="radio" name="Fish and Chips"/>Fish and Chips</label>
</fieldset>
</form>
24
§ Evolution of HTML
§ HTML syntax & tags
§ Character Entities
§ Meta data
§ Images
§ Links
§ Lists
§ Tables
§ Forms – a first look
§ <audio> & <video> element
§ <time> element

25
§ Prior to HTML5, a plug-in was required to play sound while a
document was being displayed such as Flash or Microsoft’s Media
Player

§ New in HTML5 is the <audio> tag

<audio attributes>
<source src = "filename1" >
...
<source src = "filenamen" >
Your browser does not support the audio element
</audio>

§ Browser chooses the first audio file it can play and skips the rest of the
content of audio element content
26
§ Different browsers have different audio capabilities

HTML Audio - Browser Support (updated Sept/2018)

Currently, there are 3 supported file formats for the <audio> element: MP3,
Wav, and Ogg:

Browser MP3 Wav Ogg

Internet
YES NO NO
Explorer
Chrome YES YES YES
Firefox YES YES YES
Safari YES YES NO
Opera YES YES YES
http://www.w3schools.com/html/html5_audio.asp
27
§ <audio> tag defines sound content
§ The controls attribute of <audio> set to controls", creates a start/stop
button, a clock, a progress slider, total time of the file, and a volume
slider
<audio controls = "controls" >
§ <source> tag defines multiple media resources for media elements,
such as <video> and <audio>

http://www.w3schools.com/html/html5_audio.asp 28
<!DOCTYPE html>
<!– audio.html - Test the audio element -->
<html lang = "en" >
<head>
<title> Test audio element </title>
<meta charset = "utf-8" />
</head>
<body>
This is a test of the audio element
<audio controls= "controls" >
<source src = "nineoneone.ogg" />
<source src = "nineoneone.wav" />
<source src = "nineoneone.mp3" />
Your browser does not support the audio element
</audio>
</body>
29
Audio.html
</html>
§ Just like <audio> prior to HTML5, there was no standard way to play
video clips while a document was being displayed

§ New in HTML5 is the <video> tag

<video attributes>
<source src = "filename1" >
...
<source src = "filenamen" >
Your browser does not support the video element
</video>

§ Browser chooses the first video file it can play and skips the content; if
none, it displays the content
30
§ Different browsers have different video capabilities

HTML Video - Browser Support (updated Sept/2018)

Currently, there are 3 supported video formats for the <video> element: MP4, WebM, and Ogg:

Browser MP4 WebM Ogg

Internet
YES NO NO
Explorer
Chrome YES YES YES
Firefox YES YES YES
Safari YES NO NO
YES
Opera YES YES
(from Opera 25)
31
§ Possible attributes of the <video> element

§ autoplay: play as soon as ready

§ height: of video player (pixels)
§ loop: play video non-stop
§ muted: video start off muted
§ poster: image to display while video is loading
§ src: url of video
§ width: of video player (pixels)

32
<!DOCTYPE html>
<!-- testvideo.html test the video element -->
<html lang = "en">
<head>
<meta charset = "UTF-8" />
<title> test video element </title>
</head>
<body>
This is a test of the video element.....
<video width = "600" height = "500"
controls= "contrpls" loop= "loop" muted= "muted"
poster = " logoc.png" >
<source src = "NorskTippingKebab.mp4" />
<source src = "NorskTippingKebab.ogv" />
<source src = "NorskTippingKebab.webm" />
Your browser does not support the video element
</video>
</body>
33
</html> Video.html
§ Evolution of HTML
§ HTML syntax & tags
§ Character Entities
§ Meta data
§ Images
§ Links
§ Lists
§ Tables
§ Forms – a first look
§ <audio> & <video> element
§ <time> element

34
§ The <time> tag defines a specific time (or datetime).
§ The datetime attribute represent a machine-readable format of
the <time> element
<!DOCTYPE html>
<html>
<body>
<h1>The time element</h1>
<p>Open from <time>10:00</time> to <time>21:00</time>
every weekday.</p>
<p>I have a class on <time datetime="2021-03-15 9:00">
St. Patrick's Day </time>.</p>
</body>
</html>
35 Time.html
§ Browsers are designed to be robust and deal with many
errors in web pages

§ Therefore, most pages on the web have errors

§ Lots and lots of errors

§ How pages render, with errors, is browser dependent

§ You can validate your pages online using

http://validator.w3.org/

36
§ W3Schools HTML Reference

§ Don't worry, you will not have to memorize all these HTML tags,

attributes, etc...

§ But it's a good resource to use to discover new tags or to refresh

your memory

37
§ Design a form

38
§ Design a form

39