Today`s lecture, Powerpoint file. - University of Calgary Webdisk

Transcript Today`s lecture, Powerpoint file. - University of Calgary Webdisk

Art 321
Web Pages
J. R. Parker
Digital Media Laboratory
A Web Page is a Document
A document contains text, images, and graphics.
In addition to these things, a web page can contain
sounds (audio), movies (video), and pointers to
other web pages ( called hyperlinks or links)
Web pages could be called hypertext.
A Web Page is a Document
Hypertext is actually an old idea. An early
implementation was the Canadian Teledon system.
It was connected to a computer using a phone
Line, and displayed simple graphics that could
Link to other ‘pages’ using a touch screen system.
I can’t find a picture anywhere 
A Web Page is a Document
So a web page is a document, and is described by
a computer file that contains text.
Most text files end in ‘.txt’, but to be seen as a
web page a file should end in ‘.htm’ or ‘.html’.
An HTML file has a clearly defined structure, and
specific keywords and commands result in specific
Items being displayed on the page.
A Web Page is a Document
To be displayed as a web page, the HTML file is
read and processed by a special program called a
browser.
The browser reads the HTML file (which has been
downloaded from another computer) and analyses
(parses) it, then draws (renders) it to the user’s
screen.
A Web Page is a Document
The HTML file has a file name that includes all
Of the details on how to find it on the Internet.
This name is called a URL (Universal Resource
Locator) and has the form:
http://www.ucalgary.ca/~jparker
http stands for HyperText Transfer Protocol
A Web Page is a Document
The URL http://www.ucalgary.ca/~jparker
is a directory in this case. In general, if that
is so, then the browser looks for a file named
index.html
or
welcome.html
… so the file really was
http://www.ucalgary.ca/~jparker/index.html
So what’s in an HTML file?
As I said, an HTML file contains text. There
are two part: the header and the body.
Basic commands in an HTML file are contained
within angle brackets < … >
The commands are called tags, and there is a start
and an end tag.
So what’s in an HTML file?
The file begins with <html> as a tag. It ends with
the </html> tag. This is a general scheme.
Basic commands in an HTML file are contained
within angle brackets < … >
The commands are called tags, and there is a start
and an end tag.
So what’s in an HTML file?
The header begins with <head> as a tag. It ends with
the </head> tag. This section comes right after
The <html> tag.
The header contains information about the page. Title,
Some special parameters, etc.
After the <header> … </header> comes
<body> … </body>
The body contains the actual content.
So what’s in an HTML file?
An example is:
<html>
<head>
<title>Art 299 - Introduction to New Media </title>
</head>
<body>
Parker's Principles: <br>
1. Computers can only manipulate numbers <br>
2. Computers operate using electricity <br>
3. Computers use binary numbers, not decimal <br>
4. All computer instructions are binary numbers. <br>
</body>
</html>
So what’s in an HTML file?
It looks like this:
What is the <br>?
It ends a line. Without it, HTML will create line breaks
wherever it wants. Example:
<html>
<head>
<title>Art 299 - Introduction to New Media </title>
</head>
<body>
Parker's Principles:
1. Computers can only manipulate numbers
2. 2. Computers operate using electricity
3. 3. Computers use binary numbers, not decimal
4. All computer instructions are binary numbers.
</body>
</html>
What is the <br>?
Where the breaks
are now depends
on the width of
the window.
So text commands specify format.
Embedded tags tell the browser how to display things.
These tags do not appear in the page when displayed, they
simply affect the what the page looks.

Comment
Useful display tags:
<hr> Horizontal rule; a line drawn across the page.
<b> … </b> Bold start .. End
<i> … </b> Italic start … End
<blink> … </blink>
<h1> … </h1> Header, level 1
<h2> … </h2> Header, level 2 (up to level 6)
<p> … >/p> Paragraph
<pre> … </pre> Preformatted text (in other words, don’t format it)
More complex commands
Complex commands/tags have other parameters in them.
<img> means ‘display an image’. Parameters are:
src=“…”
width=xx
height=xx
border
hspace
vspace
Where to get the picture
How wide is it?
How high is it.
Draw a border around it?
Space between picture and the text
More complex commands
This page displays an image.
<html>
<head>
<title>Art 299 - Introduction to New Media </title>
</head>
<body>
<h1> Jim's test page </h1>
What is below is a test image.
<hr>
<img src="metalcomplex.gif">
<hr>
</body>
</html>
More complex commands
Dynamic source - video
<html>
<head>
<title>Art 299 - Introduction to New Media </title>
</head>
<body>
Parker's Principles: <br>
4. All computer instructions are binary numbers. <br>
<br>
<img dynsrc="StarGate.mpg" controls loop=infinite start=fileopen
alt="hi there">
</body>
</html>
More complex commands
Does not seem to work
When using Firefox.
It is common to have
browsers be somewhat
incompatible in the
way that they interpret
the HTML spec.
More complex commands
Background colours are
specified by adding the
‘bgcolor’ spec to the ‘body’
tag.
EG:
<body bgcolor=orange>
Recall that there is only one
‘body’ tag, near the top
of the file.
More complex commands
Background images are
specified by adding the
‘background’ spec to the ‘body’
tag.
EG:
<body background=“bk1.jpg”>
The background file is tiled.
Playing sounds
Automatic background audio is considered irritating by most people,
so be warned.
It can be used for effect (EG attract attention) , and to intentionally
Irritate (if that’s what you want).
<BGSOUND SRC=“hi.wav“ loop=1>
Visit the example page on the class web site.
Anchors
Anchors are objects on the page that react when clicked, and can
Display images, sounds, links, etc.
The usual it to link to another page:
<a href=“http://www.google.com”> text …. </a>
The enclosed text can be ‘clicked’ on, and when that happens
the google web page is displayed. This is called a link or a hot link.
Images and sounds can be the destination of the link, through the
href parameter.
An image can be the link if the <img…> tag is within <a> … </a>
Anchors
<html>
<head> <title>Art 299 - Introduction to New Media </title>
</head>
<body background="bk1.jpg">
<h1> Jim's test page </h1>
This is normal text. <br>
<hr>
<a href="http://www.google.com"> This is an anchor / link </a>
and this text is not. <br>
<hr>
<a href="terminator.mp3"> Terminator audio </a> <br>
<hr>
<a href="http://www.google.com">
<img src="letterG.jpg"> This is also a hot link. </a> <br>
</body>
</html>
Anchors
Notice that the text parts
that are anchors have a
different colour from other
text.
In fact there are colours for
Links and links that have
already been clicked on.
The ‘G’ image is a link too.
Anchors
When the audio link is
clicked another window
opens to give the user a
choice between playing the
sound and saving it as a file.
Tables
This is a hard part. Tables are a way to organize data into two
dimensional structures – Rows and columns.
Right now, our page is one column, maybe with pictures.
Table is enclosed by <table> …. </table>
Each row is <tr> … </tr>
(table row)
Each item in a row is <td> … </td>
(table data)
So a simple table is:
<table>
<tr> <td> Upper left </td> <td> Upper right </td> </tr>
<tr> <td> Lower left </td> <td> Lower right </td> <tr>
</table>
Tables
<html>
<head>
<title>Art 299 - Introduction to New Media
</title>
</head>
<body background="bk1.jpg">
<h1> Basic table </h1>
This is normal text. <br>
<hr>
<table>
<tr> <td> Upper left </td> <td> Upper right </td>
</tr>
<tr> <td> Lower left </td> <td> Lower right </td>
<tr>
</table>
<hr>
<hr>
</body>
</html>
Tables
Big deal, so what?
Well, now we can place images side by
side.
Or images next to text.
<table>
<tr>
<td> <img src=“ul.jpg”> </td>
<td> <img src=“ur.jpg”> </td>
</tr>
<tr>
<td> <img src=“ll.jpg”> </td>
<td> <img src=“lr.jpg”> </td>
<tr>
</table>
Tables
The images can vary in size, but that
Does not always look good.
Also, the number of items in a row can vary –
From 1 t o as many as you can fit – so that
It does not look like a’grid’ anymore.
<table>
<tr>
<td> <img src=“ul.jpg” width =100 height=100> </td>
<td> <img src=“ur.jpg” width =100 height=100 ></td>
</tr>
<tr>
<td> <img src=“ll.jpg” width =100 height=100 > </td>
<td> <img src=“lr.jpg” width =100 height=100 > </td>
<tr>
</table>
Tables
Note that the images are
Smaller.
Also, the number of items in
a row can vary –
From 1 t o as many as you
can fit – so that
It does not look like a’grid’
anymore.
Just put different numbers
Of <td>..</td> units
In each row.
Tables
<table>
<tr>
<td> <img src=“ul.jpg” width =100 height=100> </td>
</tr>
<tr>
<td> <img src=“ul.jpg” width =100 height=100 > </td>
<td> <img src=“ul.jpg” width =100 height=100 > </td>
<tr>
<tr>
<td> <img src=“ul.jpg” width =100 height=100 ></td>
<td> <img src=“ul5.jpg” width =100 height=100 ></td>
<td> <img src=“ul.jpg” width =100 height=100 ></td>
</tr>
</table>
Tables
Does not line up like a
nice triangle.
Tables
Sizes can be specified as a percentage of the page width.
Of course, browsers can resize web pages on the display. It
is good if the page expands nicely, expanding images and
formatting things to fit the new space.
So: width can be given as %
<td width=50%>
This item will take half available space
Tables
Sizes can be specified as a percentage of the page width.
Of course, browsers can resize web pages on the display. It
is good if the page expands nicely, expanding images and
formatting things to fit the new space.
So: width can be given as %
<td width=50%>
This item will take half available space
Tables
<table>
<tr>
<td width=20%> </td> <td width=20%> </td>
<td width=20%> <img src="ul.jpg" width=100%> </td>
<td width=20%> </td> <td width=20%> </td>
</tr>
<tr>
<td width=20%> </td>
<td width=20%> <img src="ul.jpg" width=100%> </td> <td width=20%> </td>
<td width=20%> <img src="ul.jpg" width=100%> </td> <td width=20%> </td>
</tr>
<tr>
<td width=20%> <img src="ul.jpg" width=100%> </td> <td width=20%> </td>
<td width=20%> <img src="ul.jpg" width=100%> </td>
<td width=20%> </td> <td width=20%> <img src="ul.jpg" width=100%> </td>
</tr>
</table>
Tables
Cascading Style Sheets (CSS)
CSS is a next generation of HTML, and allows that pages
can be created dynamically.
It allows the separation of document content,
written in HTML or a similar markup language)
from document presentation, including elements such as the
Colors and layout.
CSS is a language, as so has a syntax (HTML does too, but
A very simple one).
Cascading Style Sheets (CSS)
A style sheet is a list of rules.
A rule is one or more selectors and a declaration block
A declaration block is a list of declarations in braces { }
A declaration is a property, a ‘:’, a value, and a ‘;’.
selector {property:value}
is a rule.
The above is a crude description of the grammar for the
CSS language. Every language has a grammar.
Cascading Style Sheets (CSS)
A specific rule is
body {background-color:black}
CSS files are specified from an HTML file, and are used to
Specify formats for perhaps many pages. Thus, a change to a
CSS file can affect many pages.
So, here’s an example
<html>
<head>
<link rel="stylesheet" href=“css1.css">
</head>
<body>
<h1>This header is 36 pt</h1>
<h2>This header is blue</h2>
<p>This paragraph has a left margin of 50 pixels</p>
</body> </html>
Cascading Style Sheets (CSS)
The tag
<link rel="stylesheet" href=“css1.css">
Says that there is a file named ‘css1.css’ from which the current HTML file
Will get formats.
Any HTML file that references this CSS file in this way will get the same formats!
The CSS file is:
body {background-color: yellow}
h1 {font-size: 36pt}
h2 {color: blue}
p {margin-left: 50px}
There is no way to guess the names and properties. You learn them or
look them up in a manual. However, these ones are the same as those in
HTML
Cascading Style Sheets (CSS)
This can be done in HTML also:
body {background-color: yellow}
<body bgcolor=yellow>..</body>
h1 {font-size: 36pt}
<h1> <font size=36> .. </font></h1>
h2 {color: blue} <h2>
<font color=blue> … </font></h2>
p {margin-left: 50px}
I’m not sure.
ASSIGNMENT
Guess what? – you are going to make a web page.
In the next lab you will build a page having at least two
hyperlinks, two images, and a table.
Think about the subject and how you will do it. Collect
images, think on designs.
You will bring your page up on the web through the U of C
or other server, and you will have in a page design on
paper, a sketch of what the page will look like.

Today`s lecture, Powerpoint file. - University of Calgary Webdisk

Transcript Today`s lecture, Powerpoint file. - University of Calgary Webdisk

Directory