Art 321

1

• Art 321
• 
  Web Pages
• J. R. Parker
• Digital Media Laboratory

2
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.
3
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 cant find a picture anywhere ?
4
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.
5
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 users screen.
6
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.uc
algary.ca/jparker http stands for HyperText
Transfer Protocol
7
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/jpark
er/index.html
8
So whats 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 lt gt The commands are called
tags, and there is a start and an end tag.
9
So whats in an HTML file?
The file begins with lthtmlgt as a tag. It ends
with the lt/htmlgt tag. This is a general
scheme. Basic commands in an HTML file are
contained within angle brackets lt gt The
commands are called tags, and there is a start
and an end tag.
10
So whats in an HTML file?
The header begins with ltheadgt as a tag. It ends
with the lt/headgt tag. This section comes
right after The lthtmlgt tag. The header contains
information about the page. Title, Some special
parameters, etc. After the ltheadergt lt/headergt
comes ltbodygt lt/bodygt The body contains the
actual content.
11
So whats in an HTML file?
An example is lthtmlgt ltheadgt lttitlegtArt
299 - Introduction to New Media lt/titlegt
lt/headgt ltbodygt Parker's Principles ltbrgt 1.
Computers can only manipulate numbers ltbrgt 2.
Computers operate using electricity ltbrgt 3.
Computers use binary numbers, not decimal ltbrgt 4.
All computer instructions are binary numbers.
ltbrgt lt/bodygt lt/htmlgt
12
So whats in an HTML file?
It looks like this
13
What is the ltbrgt?

• It ends a line. Without it, HTML will create line
  breaks
• wherever it wants. Example
• lthtmlgt
• ltheadgt
• lttitlegtArt 299 - Introduction to New
  Media lt/titlegt
• lt/headgt
• ltbodygt
• Parker's Principles
• Computers can only manipulate numbers
• 2. Computers operate using electricity
• 3. Computers use binary numbers, not decimal
• 4. All computer instructions are binary numbers.
• lt/bodygt
• lt/htmlgt

14
What is the ltbrgt?
Where the breaks are now depends on the width
of the window.
15
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. lt!-- --gt
Comment Useful display tags lthrgt Horizontal
rule a line drawn across the page. ltbgt lt/bgt
Bold start .. End ltigt lt/bgt Italic start
End ltblinkgt lt/blinkgt lth1gt lt/h1gt Header,
level 1 lth2gt lt/h2gt Header, level 2 (up to
level 6) ltpgt gt/pgt Paragraph ltpregt lt/pregt
Preformatted text (in other words, dont format
it)
16
More complex commands
Complex commands/tags have other parameters in
them. ltimggt means display an image. Parameters
are src Where to get the picture
widthxx How wide is it? heightxx How high
is it. border Draw a border around it?
hspace Space between picture and the
text vspace
17
More complex commands
This page displays an image. lthtmlgt ltheadgt
lttitlegtArt 299 - Introduction to New Media
lt/titlegt lt/headgt ltbodygt lth1gt Jim's test
page lt/h1gt What is below is a test
image. lthrgt ltimg src"metalcomplex.gif"gt lthrgt
lt/bodygt lt/htmlgt
18
More complex commands
19
Dynamic source - video
lthtmlgt ltheadgt lttitlegtArt 299 -
Introduction to New Media lt/titlegt lt/headgt
ltbodygt Parker's Principles ltbrgt 4. All
computer instructions are binary numbers.
ltbrgt ltbrgt ltimg dynsrc"StarGate.mpg" controls
loopinfinite startfileopen alt"hi there"gt
lt/bodygt lt/htmlgt
20
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.
21
More complex commands
Background colours are specified by adding the
bgcolor spec to the body tag. EG ltbody
bgcolororangegt Recall that there is only one
body tag, near the top of the file.
22
More complex commands
Background images are specified by adding the
background spec to the body tag. EG ltbody
backgroundbk1.jpggt The background file is
tiled.
23
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 thats what you
want). ltBGSOUND SRChi.wav loop1gt Visit the
example page on the class web site.
24
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 lta
hrefhttp//www.google.comgt text . lt/agt 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
ltimggt tag is within ltagt lt/agt
25
Anchors
lthtmlgt ltheadgt lttitlegtArt 299 - Introduction to
New Media lt/titlegt lt/headgt ltbody
background"bk1.jpg"gt lth1gt Jim's test page
lt/h1gt This is normal text. ltbrgt lthrgt lta
href"http//www.google.com"gt This is an anchor /
link lt/agt and this text is not. ltbrgt lthrgt lta
href"terminator.mp3"gt Terminator audio lt/agt
ltbrgt lthrgt lta href"http//www.google.com"gt
ltimg src"letterG.jpg"gt This is also a hot
link. lt/agt ltbrgt lt/bodygt lt/htmlgt
26
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.
27
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.
28
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 lttablegt . lt/tablegt Each row is lttrgt lt/trgt
(table row) Each item in
a row is lttdgt lt/tdgt (table data) So
a simple table is lttablegt lttrgt lttdgt Upper left
lt/tdgt lttdgt Upper right lt/tdgt lt/trgt lttrgt lttdgt
Lower left lt/tdgt lttdgt Lower right lt/tdgt
lttrgt lt/tablegt
29
Tables
lthtmlgt ltheadgt lttitlegtArt 299 -
Introduction to New Media lt/titlegt lt/headgt
ltbody background"bk1.jpg"gt lth1gt Basic table
lt/h1gt This is normal text. ltbrgt lthrgt lttablegt
lttrgt lttdgt Upper left lt/tdgt lttdgt Upper right lt/tdgt
lt/trgt lttrgt lttdgt Lower left lt/tdgt lttdgt Lower
right lt/tdgt lttrgt lt/tablegt lthrgt lthrgt lt/bodygt
lt/htmlgt
30
Tables
Big deal, so what? Well, now we can place images
side by side. Or images next to
text. lttablegt lttrgt lttdgt ltimg srcul.jpggt
lt/tdgt lttdgt ltimg srcur.jpggt lt/tdgt
lt/trgt lttrgt lttdgt ltimg srcll.jpggt lt/tdgt
lttdgt ltimg srclr.jpggt lt/tdgt lttrgt lt/tablegt
31
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 agrid
anymore. lttablegt lttrgt lttdgt ltimg srcul.jpg
width 100 height100gt lt/tdgt lttdgt ltimg
srcur.jpg width 100 height100 gtlt/tdgt
lt/trgt lttrgt lttdgt ltimg srcll.jpg width 100
height100 gt lt/tdgt lttdgt ltimg srclr.jpg
width 100 height100 gt lt/tdgt lttrgt lt/tablegt
32
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 agrid anymore. Just put different
numbers Of lttdgt..lt/tdgt units In each row.
33
Tables
lttablegt lttrgt lttdgt ltimg srcul.jpg width
100 height100gt lt/tdgt lt/trgt lttrgt lttdgt ltimg
srcul.jpg width 100 height100 gt lt/tdgt
lttdgt ltimg srcul.jpg width 100 height100 gt
lt/tdgt lttrgt lttrgt lttdgt ltimg srcul.jpg width
100 height100 gtlt/tdgt lttdgt ltimg srcul5.jpg
width 100 height100 gtlt/tdgt lttdgt ltimg
srcul.jpg width 100 height100 gtlt/tdgt
lt/trgt lt/tablegt
34
Tables
Does not line up like a nice triangle.
35
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 lttd width50gt This item
will take half available space
36
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 lttd width50gt This item
will take half available space
37
Tables
lttablegt lttrgt lttd width20gt lt/tdgt lttd
width20gt lt/tdgt lttd width20gt ltimg
src"ul.jpg" width100gt lt/tdgt lttd width20gt
lt/tdgt lttd width20gt lt/tdgt lt/trgt lttrgt lttd
width20gt lt/tdgt lttd width20gt ltimg
src"ul.jpg" width100gt lt/tdgt lttd width20gt
lt/tdgt lttd width20gt ltimg src"ul.jpg"
width100gt lt/tdgt lttd width20gt
lt/tdgt lt/trgt lttrgt lttd width20gt ltimg
src"ul.jpg" width100gt lt/tdgt lttd width20gt
lt/tdgt lttd width20gt ltimg src"ul.jpg"
width100gt lt/tdgt lttd width20gt lt/tdgt lttd
width20gt ltimg src"ul.jpg" width100gt lt/tdgt
lt/trgt lt/tablegt
38
Tables
39
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).
40
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 propertyvalue
is a rule. The above is a crude description of
the grammar for the CSS language. Every
language has a grammar.
41
Cascading Style Sheets (CSS)
A specific rule is body
background-colorblack 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, heres an example lthtmlgt ltheadgt
ltlink rel"stylesheet" hrefcss1.css"gt
lt/headgt ltbodygt lth1gtThis header is 36 ptlt/h1gt
lth2gtThis header is bluelt/h2gt ltpgtThis paragraph
has a left margin of 50 pixelslt/pgt lt/bodygt
lt/htmlgt
42
Cascading Style Sheets (CSS)
The tag ltlink rel"stylesheet"
hrefcss1.css"gt 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
43
Cascading Style Sheets (CSS)
This can be done in HTML also body
background-color yellow ltbody
bgcoloryellowgt..lt/bodygt h1 font-size 36pt
lth1gt ltfont
size36gt .. lt/fontgtlt/h1gt h2 color blue lth2gt
ltfont colorbluegt
lt/fontgtlt/h2gt p margin-left 50px
Im not sure.
44
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.