art 311 web pages j. r. parker digital media laboratory

Art 311

Web Pages

J. R. ParkerDigital Media Laboratory

Key concept #5 Interactivity

Perhaps this should be better called dynamism.

A huge difference between new media and old is use of dynamic and nonlinear media – in a web page, a hot link can interactively move the reader (by request) to a new document, then back again. hypertext.

Web objects move, change color, make sounds, andallow the user/viewer to ‘play’ with them.

Key concept #5 Interactivity

Interactivity can be one of two things:

Items that can change with time, position, manipulation.

Items that can be created/designed/added by the user.

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.


Hypertext is actually an old idea. An early implementation was the Canadian Teledon system.

It was connected to a computer using a phoneLine, and displayed simple graphics that could Link to other ‘pages’ using a touch screen system.

I can’t find a picture anywhere


So a web page is a document, and is described bya computer file that contains text.

Most text files end in ‘.txt’, but to be seen as aweb page a file should end in ‘.htm’ or ‘.html’.

An HTML file has a clearly defined structure, and specific keywords and commands result in specificItems being displayed on the page.


To be displayed as a web page, the HTML file isread 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’sscreen.


The HTML file has a file name that includes allOf the details on how to find it on the Internet.

This name is called a URL (Universal ResourceLocator) and has the form:

http://www.ucalgary.ca/~jparker

http stands for HyperText Transfer Protocol


The URL http://www.ucalgary.ca/~jparkeris a directory in this case. In general, if thatis so, then the browser looks for a file named

index.htmlor

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.


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.


The header begins with <head> as a tag. It ends with the </head> tag. This section comes right afterThe <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 decimal4. All computer instructions are binary numbers. </body> </html>

What is the <br>?

Where the breaksare now dependson the width ofthe 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)

http://www.htmlcodetutorial.com/_33n45n45n.html

http://www.htmlcodetutorial.com/_BLINK.html

More complex commands

Complex commands/tags have other parameters in them.

<img> means ‘display an image’. Parameters are:

src=“…” Where to get the picture width=xx How wide is it? height=xx How high is it. border Draw a border around it? hspace Space between picture and the text vspace


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>

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>


Does not seem to workWhen using Firefox.

It is common to havebrowsers be somewhatincompatible in theway that they interpretthe HTML spec.


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.


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 canDisplay 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 happensthe 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 forLinks 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>

TablesBig 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>

TablesThe images can vary in size, but thatDoes 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 areSmaller.

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 numbersOf <td>..</td> unitsIn 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

<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 theColors and layout.

CSS is a language, as so has a syntax (HTML does too, butA very simple one).


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.


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 fileWill 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 inHTML

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.

You have been engaged by the Scenic Acres Artists Coop to build a web page to promote their current season. There will be a main page and it links to thee other pages, each promoting one of their three shows this year. Pages must include images, text, maybe sound or video.

Hand in a set of designs by xxxxxxPage is due xxxxxxxx.

art 311 web pages j. r. parker digital media laboratory

Documents