B2 WebTech1 HTML-1

CSCU9B2: Web Tech Lecture 1
Dr Jingpeng Li
http://www.cs.stir.ac.uk/~jli/
Room 4B95
Spring 2019 © University CSCU9B2: Making the Most of the 1

of Stirling World Wide Web
What to Expect…
• 5 lectures covering the programming aspect

of the web: HTML5, CSS, JavaScript,
HTML5 canvas
• 8 practicals
– One hour per week and in your own time
– Checkpoints worth 20%: one per worksheet; can
be completed in your own time
• Solid foundation for web development and
programming
1
Three Aspects of Web Development
• Content (HTML)
• Presentation (CSS)
• Interactivity (JavaScript)

Resources
• Lab worksheets + lecture notes

• Book: “Creating a Website: the Missing
Manual” (MacDonald 2011), available at:
http://it-ebooks.info/book/2015/
• W3Schools Online Web Tutorials at:
http://www.w3schools.com/

2
Your First Web Page...

<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<p>
Hello world.
</p>
<p>
It is a <em>wonderful</em> day, today!
</p>
</body>
</html>

3
HTML5 + Character Encoding
<!DOCTYPE html>
<html> • Meta tags provide
<head> housekeeping information
<meta charset="utf-8"> • One is the character
<title>My First Web Page</title> encoding used
</head>
<body> • utf-8 is Unicode
<p> • guarantees correct
Hello world. rendering by the browser
</p>
<p>
It is a <em>wonderful</em> day,
today!
</p>
</body>
</html>
XHTML Version
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
</head>
<body>
<p>
Hello world.
</p>
<p>
</p>
</body>
</html>
4
HTML Validation: http://validator.w3.org/

Creating a Web Page

• Use a text editor
– e.g. Notepad, TextPad

5
Web Pages the WYSIWYG Way
• There are WYSIWYG editors for HTML
– What You See Is What You Get
– we do not type in actual HTML
– the HTML is created for us behind the scenes
– e.g.
• Adobe Dreamweaver
• Microsoft FrontPage
• All such editors have limitations
– Know your HTML first!
• Example ...
Anatomy of a Web Page

<html>
<head>
Header <title>My First Web Page</title>
</head>
<body>
Document
<p>
Hello world.
Body </p>
<p>
</p>
</body>
</html>

6
Formatting Text
• Document structure: e.g. a paragraph of text

<p>
Hello world.
</p>
• Style and layout: e.g. text style

– This is normally done with Cascading Style Sheets

HTML Tags
• HTML is a markup language

• You markup a document by adding tags
specifying elements and their attributes
<element>…content…</element>
• Tags specify the structure and formatting
• They are interpreted by a web browser to
produce the screen presentation

7
HTML Tags (2)
• Most tags are containers:
<em>wonderful</em>
• There are also standalone tags, e.g.
<img> - inline image
<br> - linebreak In XHTML:
<br />
<hr> - horizontal rule
• Most elements have attributes
– these extend or modify the tag’s actions
– e.g. <p class="important"> … </p>

Nesting HTML Tags
• Some tags can be nested to apply multiple

effects to a single element
– e.g. It’s a <b><i>really, really</i></b> nice day!
– Gives: It’s a really, really nice day!
• The <i>…</i> is contained within <b>…</b>
• Do not overlap tags, such as
– It’s a <b><i>really, really</b></i> nice day!

8
Things to Note
• Some things are ignored by browsers:
– Line breaks are ignored
• text is wrapped continuously until <p> or <br>
– Tabs and white space are ignored
– Multiple <p> tags are ignored (one will do)
– Unrecognised tags are ignored
• (this can have unfortunate effects!)

Deprecated Tags & Attributes

• Specifying fonts with the <font> tag
– e.g. <font face="Arial" size="+1">This text will be
displayed in Arial</font>
• Specifying alignment with the align attribute
– E.g. <p align="center">….</p>
• And many others…
• We will avoid the use of deprecated elements!

9
Comments in HTML
• You can add comments to your HTML files:



• Browsers will not display comments

HTML Structural Tags

• <html>…</html>
– defines the document as being HTML
• <head>…</head>
– information describing the document
• <body>…</body>
– contains the contents of the document to be
displayed by the browser
• Should only be ONE instance of each of
these in a web page
10
Header Tags
• <title>…</title>
– description of page’s contents
– usually displayed in browser’s header bar
– used in bookmarks and by search engines
• <base>
– specifies the base URL/target for all relative URLs in a
document
• <meta>
– provide information about document, e.g. author
– used by search engines

Example Header
<!DOCTYPE html>
<html>
<head>
<base href= "http://www.cs.stir.ac.uk/courses/CSCU9B2">
<meta http-equiv="content-type" content=“text/html; charset=UTF-8">
<meta name="Author" content=“J.Li">
</head>
<body>
:
:
</body>
</html>

11
Inside the Body: Headings
• Heading levels
– <h1> to <h6>
– <hn>…</hn>
– e.g. <h1>Heading One</h1>

Paragraphs
• Paragraphs delimited by <p>…</p>
• Browser determines lines
– use <br> to force a break

12
Preformatted Paragraphs
• Use <pre>…</pre> to create a paragraph with
line breaks and spacing as you specified
– usually displayed in a monospace font, e.g. Courier

Text Styles
• Logical styles
– specific rendering left to browser
<strong>…</strong> emphasis (usually bold)
<em>…</em> emphasis (usually italic)
<mark>…</mark> highlight (HTML5 only)
<code>…</code> computer code (monospaced)
• Physical styles
– specific display instructions
<i>…</i> italic
<b>…</b> bold
<sub>…</sub> subscript
<sup>…</sup> superscript
13
Special Characters
• Characters not found in the normal
alphanumeric character set are specified
using character entities
• These may be defined by name: &name;
– e.g. È - grave accent on capital E (È)
– these are case-sensitive! (e.g. è for è)
• Or by a number: &#nnn;
– e.g. > - greater than sign (>)
• (In both cases, note the semicolon)
Including Images
• Images can be included in-line anywhere in
your document using <img>
– e.g. <img src="mypicture.gif" alt="Picture of me"
width="50" height="50">
– src (required) specifies the location of the image
• relative or full URL (see later)
– alt (required) specifies alternative textual
description
– width and height of image in pixels
• Image formats are GIF, JPEG and PNG

14
Other Media
• <object> is a way of including a variety of
media elements in a web page
– Audio, video, Java applets, PDF, Flash
– e.g. <object width="400" height="400"
data="helloworld.swf">Hello world!</object>
– data specifies the location of media
– Alternative text is content of tag
• Alternatively in HTML5 use:
– <audio> for sound clips
– <video> for video clips

15
Hypertext Links
• This is what the Web is all about!

• You can create to links to:
– other documents
• HTML or otherwise (e.g. PDF)
– parts of the same document
– images
• Links can be local or to any web-accessible
address

The Anchor Tag

• Links are created using the anchor tag: <a>
– e.g. <a href=“page2.html”>next page</a>
– results in the text “next page” being a link to the
local HTML file, “page2.html”
• relative URL: page2.html is in the same folder as linking
web page (or relative to a specified <base>)
– “next page” will be displayed by the browser in a
different colour and usually underlined

16
Links with Absolute URLs
• Remote pages are linked with absolute URLs
– the complete URL, e.g.
Here’s a link to Jingpeng’s
<a href=“http://www.cs.stir.ac.uk/~jli/Publications.html”>
research page</a>.
• A URL with no HTML file finds a default page
– defined by server
– either index.html or default.html (default.htm)
Here’s a link to Jingpeng’s
<a href=“http://www.cs.stir.ac.uk/~jli/”> home page</a>.
Links with Relative URLs

• Local pages are linked with relative URLs
– relative to location of current document
• or relative to location specified by <base> tag
e.g. Here’s a link to Jingpeng’s
<a href=“research.html”>research page</a>.
– “research.html” in same folder
e.g. Here’s a link to Jingpeng’s
<a href=“Research/research.html”>
research page</a>.
– “research.html” in subfolder “Research”
• Never use absolute file paths!!
e.g. <a href=“H:/Research/research.html”>

17
Linking Within a Document
• Parts of a document can be named (given an
identifier):
– e.g. <h1 id=“stocks”>Daily Stock Quotes</h1>
• Elsewhere in the same document we may
place a link:
– e.g. Check out the <a href=“#stocks”>stock
quotes</a>
• And in another document we may include
Go to today’s
<a href=“dailynews.html#stocks”>stock quotes</a>

Table of Contents
• Links to
parts of a
document
are very
useful for
tables of
contents
within a long
document

18
Links to Other Media
• Links to images:
e.g. Here is <a href=“alan.jpg”>me</a>.
• Links to email addresses:
e.g. <a href=“mailto:jli@cs.stir.ac.uk”>Mail me</a>
• Links to other types of document:
e.g. <a href=“mydoc.pdf”>my document</a>
– requires non-browser software to view it, either
stand-alone or browser plugin

Thumbnail Images
• Images are usually big and can take a long time
to download
• Often use a thumbnail-sized image as a link to
the full image, using <a>
– the target attribute tells the browser to open a new
window:
<a href=“bruce.jpg” target=“myimage”>
– it helps to indicate size of full image near thumbnail
– user has choice as to whether to download or not
• More details ...
19
<p>
<a href="bruce.jpg" target="myimage">
<img src="bruce65x75.jpg" alt=“me"></a>
Click the thumbnail
to see a larger image of me!
</p>

Lists in HTML
• Unordered (bulleted) lists

• Numbered lists
• Definition lists
• We have limited control over appearance,

such as bullet styles, using CSS

20
Unordered (Bulleted) Lists
• <ul>…</ul>
• List entries with <li>…</li>
• Bullet style can be set with style sheets
<p><b>Shopping List</b></p>
<ul>
<li>Avocados</li>
<li>Tomatoes</li>
<li>Scallions</li>
<li>Black beans</li>
</ul>

Ordered (Numbered) Lists

• <ol>…</ol>
– first number and numbering style can be set with
style sheets
• List entries with <li>…</li>
<p><b>The Morning</b></p>
<ol>
<li>Wake up</li>
<li>Get up</li>
…
</ol>

21
Definition Lists
• <dl>…</dl>
• Term with <dt>…</dt>
• Definition with <dd>…</dd>
<p><b>Some Definitions</b></p>
<dl>
<dt>Internet</dt>
<dd>Network of networks.</dd>
<dt>World Wide Web</dt>
<dd>Distributed system of hypertext
documents known as web pages.</dd>
<dt>HTML</dt>
<dd>Hypertext markup language.</dd>
</dl>
Nested Lists
• Lists can be nested
– Browser automatically changes bullet style for
unordered lists
– Ordered lists can also be nested but change
numbering style with style sheets
<ul>
<li>Breakfast
<ul>
<li>Cereal</li>
<li>Toast</li>
<li>Coffee</li>
</ul></li>
<li>Lunch</li>
<li>Dinner</li>
</ul>
22
Style in Lists with CSS
<head>
<meta charset="utf-8">
<style type="text/css">
ul.cir { list-style-type: circle; }
ul.squ { list-style-type: square; }
ol.upA { list-style-type: upper-alpha; }
ol.lor { list-style-type: lower-roman; }
</style>
<title>Examples of Lists</title>
</head>
<body>
<h3>Shopping List</h3>
<ul class="squ">
<li>Avocados</li>
<li>Tomatoes</li>
<li>Scallions</li>
<li>Black beans</li>
</ul>

Tables
• Rows and columns of tabular data

23
A Very Simple Table
• As basic as it gets…
<table>
<tr>
<td>Cell 1</td><td>Cell 2</td>
</tr>
<tr>
</tr>
</table>
– <tr>…</tr> defines each row

– <td>…</td> defines each entry (cell)

Headers and Borders

<table border=“1”>
<tr>
<th>Row 1:</th>
</tr>
<tr>
<th>Row 2:</th>
</tr>
</table>
Note: <th> … </th>

24
Spanning Columns
<caption>A Complicated Table</caption>
<tr>
<td rowspan=“3”>Cell 1</td>
<td colspan=“2”>Cell 2</td>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
Note: caption

Table Sizing
• Table and cell widths can be specified
using style sheets
• Relative sizing
– Table relative to size of browser window
– Cell relative to table size
• Absolute sizing in pixels
<tr>
<td class=“narrow”>Left-hand</td>
<td>Right-hand</td>
</tr>
</table>
25
Sizing (contd)
<HTML>
<HEAD>
<TITLE>A Two Column Table Layout</TITLE>
<STYLE type="text/css">
<TABLE BORDER=1>
.whole {width: 100%}
<TR>
.narrow {width: 20%}
<TD CLASS="narrow">Left-hand column for
.narfix {width: 40px}
links</TD>
</STYLE>
<TD>Right-hand column for content</TD>
</HEAD>
</TR>
</TABLE>
<TABLE BORDER=1>
<TR>
<TABLE BORDER=1>
<TD>Left-hand column for links</TD>
<TR>
<TD CLASS="narfix">Left-hand column for
</TR>
links</TD>
</TABLE>
</TR>
<TABLE BORDER=1 class="whole">
</TABLE>
<TR>
<TD CLASS="narrow">Left-hand column for
</BODY>
links</TD>
</HTML>
</TR>Spring 2016 © University CSCU9B2: Making the Most of the 51
of Stirling
</TABLE> World Wide Web
Table Sizing (contd)

26
End of Lecture
Next Web Tech lecture: Cascading

Style Sheets

27

B2 WebTech1 HTML-1

Uploaded by

Document Information

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

B2 WebTech1 HTML-1

Uploaded by

Copyright:

Available Formats

CSCU9B2: Web Tech Lecture 1

Spring 2019 © University CSCU9B2: Making the Most of the 1

• 5 lectures covering the programming aspect

Spring 2019 © University CSCU9B2: Making the Most of the 3

• Lab worksheets + lecture notes

Spring 2019 © University CSCU9B2: Making the Most of the 4

Your First Web Page...

Spring 2019 © University CSCU9B2: Making the Most of the 6

Spring 2019 © University CSCU9B2: Making the Most of the 9

Creating a Web Page

Spring 2019 © University CSCU9B2: Making the Most of the 10

Anatomy of a Web Page

Spring 2019 © University CSCU9B2: Making the Most of the 12

• Document structure: e.g. a paragraph of text

• Style and layout: e.g. text style

– This is normally done with Cascading Style Sheets

• HTML is a markup language

Spring 2019 © University CSCU9B2: Making the Most of the 14

Spring 2019 © University CSCU9B2: Making the Most of the 15

Nesting HTML Tags

• Some tags can be nested to apply multiple

Spring 2019 © University CSCU9B2: Making the Most of the 16

Spring 2019 © University CSCU9B2: Making the Most of the 17

Deprecated Tags & Attributes

• We will avoid the use of deprecated elements!

Spring 2019 © University CSCU9B2: Making the Most of the 18

• You can add comments to your HTML files:

Spring 2019 © University CSCU9B2: Making the Most of the 19

HTML Structural Tags

Spring 2019 © University CSCU9B2: Making the Most of the 21

Spring 2019 © University CSCU9B2: Making the Most of the 22

Spring 2019 © University CSCU9B2: Making the Most of the 23

Spring 2019 © University CSCU9B2: Making the Most of the 24

Spring 2019 © University CSCU9B2: Making the Most of the 25

Spring 2019 © University CSCU9B2: Making the Most of the 28

Spring 2019 © University CSCU9B2: Making the Most of the 30

• This is what the Web is all about!

Spring 2019 © University CSCU9B2: Making the Most of the 31

The Anchor Tag

Spring 2019 © University CSCU9B2: Making the Most of the 32

Links with Relative URLs

Spring 2019 © University CSCU9B2: Making the Most of the 34

Spring 2019 © University CSCU9B2: Making the Most of the 35

Spring 2019 © University CSCU9B2: Making the Most of the 36

Spring 2019 © University CSCU9B2: Making the Most of the 37

Spring 2019 © University CSCU9B2: Making the Most of the 39

• Unordered (bulleted) lists

• We have limited control over appearance,

Spring 2019 © University CSCU9B2: Making the Most of the 40

Spring 2019 © University CSCU9B2: Making the Most of the 41

Ordered (Numbered) Lists

Spring 2019 © University CSCU9B2: Making the Most of the 42

Spring 2019 © University CSCU9B2: Making the Most of the 45

Spring 2019 © University CSCU9B2: Making the Most of the 46

– <tr>…</tr> defines each row

Spring 2019 © University CSCU9B2: Making the Most of the 47

Headers and Borders

Note: <th> … </th>

Spring 2019 © University CSCU9B2: Making the Most of the 49

Table Sizing (contd)

Spring 2019 © University CSCU9B2: Making the Most of the 52

Next Web Tech lecture: Cascading

Spring 2019 © University CSCU9B2: Making the Most of the 53