COAP 2000 XHTML PROGRAMMING: INTRODUCTION TO WEB PROGRAMMING Fall I, 2012 © Webster University Vienna Week 2 – Class 2 [email protected].

COAP 2000 XHTML PROGRAMMING: INTRODUCTION TO WEB PROGRAMMING

Fall I, 2012

© Webster University Vienna

http://coap2000.ddejan.com/

Week 2 – Class 2

[email protected]@webster.edu

Essential and required reading for you are pages 81 through 86.

At the beginning only 8-bit graphics cards were common Web-safe or browser-safe colours total 216 colours Now 24-bit and 32-bit graphics cards are the norm (24

bit=16,777,216 colours) Images usually kept at a maximum of 600 pixels wide to

accommodate lower resolution monitors Common for monitors to offer a resolution of 1024x768 Image dimensions can be determined via your browser by

right-clicking on an image in a web page and selecting Properties

You are usually interested in image dimensions rather than resolution because on screen more pixels means big physical size on your web pages!

©Webster University Vienna Austria

Chapter 5 – Images


Image Info in the Browser

Images in a Web page can be included in two ways HTML – using the img element CSS – using the background-image property

HTML images should be included when the image is part of the content on the page Example: A web page for a certain product,

and this page contains images of the product CSS images are used when we want to add

some decoration (styling) to the page


Images in Web Pages

HTML vs CSS Images

HTML Image CSS Image


http://images.google.com Specify width criteria Most images copyright protected. Use for

non commercial projects generally OK http://lorempixel.com/

http://www.flickr.com/search/advanced/


Where to find images

Free Stock Photography Sites (require registration) http://www.freedigitalphotos.net/ http://www.sxc.hu/photo/159064

These web sites usually have only small resolution images for free, but that’s sufficient for a website The advantage is that they have categorized

images, so you can browse the categories and get inspiration


Where to find images

Larger images means slower download speeds Some files like gif, jpeg and png have built in compression

that reduces file size to make downloading more efficient. BMP images do not have compression and should not be

used in Web Design (bigger sizes, plus not all browsers support them)

Most imagery on the internet is readily available and downloadable at any time!

Simply right-click on the image and then select Save Picture As … from the pop-up menu (note: this does not apply to CSS background images)

Most images are copyrighted so be careful in your choice! Gif images can be animated and are inserted in your web

page like normal images using the <img> tag The alt attribute is required for all XHTML <img> tags! The alt attribute shown as a tool tip in browsers



Saving Images from the browser


Images appear in the logical position you place them in when you create your XHTML code

Images are not stored directly in your web pages, but are simply referenced from them

Referenced using the <img src=“imagename.gif” /> tag If your image is not in the same folder as your web page,

you must include the folder name as well as the file name Images can be hyperlinks, if wrapped within <a> tags



Imagemaps

A single image can provide multiple hyperlinks – imagemaps

Imagemaps divide an image up into areas or select parts of an image that are then used as hyperlinks

Although they might seem useful, web designers usually avoid using them as there are other techniques to achieve the same functionality

The reason that they are not so popular is because it is tedious to keep the ImageMaps up to date if we make changes to the base image


Get the images from the course website, and extract them into your week 2 folder

Open your template.html file in Notepad and then immediately save it as pp90_94.html

create a level 1 header at the top of the page as shown in Figure 5.7

Insert the cursor after your header and type the code shown in blue in Figure 5.7

Don’t forget the space and slash at the end of the img tag! Add the text and formatting shown in the rest of Figure 5.7 Don’t forget, ALL your XHTML code is inserted between

the body tags! Re-save your file as pp90_94.html and then view it in your

browser Read ALL Tips but don’t advance to other chapters©Webster University Vienna Austria

Inserting images on a page (pg.90)

Insert the alt attribute as shown in Figure 5.9 and create an error in the image file name to test the alt attribute and value

Save your file as pp90_94.html and then view it in your browser

Do you see the alt text? Fix pp90_94.html so that the image is

visible again


Offering alternate text (pg.91)

Check the dimensions of your image in pp90_94.html

Add the width and height attributes to your img tag

Re-save your web page and load it in your browser. Note that this image isn’t very big so you may not perceive a difference in text loading speed when all of the files are on your local computer.

Load the html files with images that you create this week in your public DropBox folder, and try to see if you can notice a difference.©Webster University Vienna Austria

Specifying size for speedier viewing (pp.92-93)

Follow the instructions for scaling an image not the ones on page 94, so ignore steps 1, 2 and 3 and continue as below:

Open your pp90_94.html file in Notepad if you closed it Add a second complete image tag after the first by simply

copying your <img src=“outsidemarket.jpg” ……/> tag (including alt, width and height attributes and values) and pasting it beneath the original so that you now have two identical copies of this piece of code in your XHTML code

In the second, newly copied code, change the width and height values so that they are half that of the original dimensions.

Re-save your web page and load it in your browser. Look at properties of both the larger size image and its

smaller/resized version. Are the file sizes different? Why? Look at Tip 2 for the answer!


Scaling an image (pg.94)

Open your template.html file in Notepad and immediately save it as pg96.html

Add the code and text from Figures 5.22 to your file (note the author has cut out [snip] the full text for this web page) so you need good eyes to read it and copy it from Figure 5.23

Re-save your web page and preview it in your browser. The layout should look similar to that in Figure 5.23

Try aligning the image to the left side of your web page. 1st Tip: Yes, you must remember this as its looks like a

good exam question.


Making images float (pg.96)

Open pg96.html in Notepad and immediately save it as pg97.html

Add the new img tag and attributes above <h2>Pioneer Valley: Northampton</h2> as shown in Figure 5.26

Add the code and text <p>This building…. that is started in Figure 5.26 below the <h2>Pioneer Valley: Northampton</h2> and then shown as the complete text in Figure 5.27. It is a lot of text to type, so instead go to http://www.lipsum.com/ and copy/paste some of the text there. Now re-save your web page and view it in your browser.

If it doesn’t look quite the same as Figure 5.27 simply add more text to the first paragraph block by copying and pasting the same text into your document as many times as it takes.

Read the Tips©Webster University Vienna

Austria

Float images on both sides (pg.97)

Open pg96.html in Notepad and immediately save it as pg98.html

Change the text and code so that it looks like Figure 5.28

Add the img tag for flower.gif Add the <br /> tag as shown and try out each of the

clear attributes (left, right, both) to see their effect, but at the end save your file with the <br clear=“right” /> attribute

Read the Tips and note that although clear is deprecated, the lack of support for the CSS properties for creating this affect means that you may have to use it.


Stopping elements from wrapping (pg.97)

If you closed pg98.html reopen it in Notepad and save it as pg99.html

Change the image code so that it looks like Figure 5.32 Add the vspace and hspace attribute and value of 10 to

the house.jpg image. Re-save your file and view it in your browser. It should

look similar in layout to Figure 5.33.


Adding space around an image (pg.99)

Open pg99.html in Notepad Add the <hr> tag and its attributes as shown in Figure

5.38 to the bottom of the XHTML code (but above the end body tag!)

Save your web page and preview it in your browser. Experiment with the different attributes available Your horizontal rule will always start on a new line


Adding horizontal rules (pg.101)

A hypertext link has three parts: destination, label and target The destination is also essentially three parts

1. First part of the declaration is the hyperlink / anchor tag <a

2. The hyperlink tag uses the href attribute to tell the browser what follows is a hypertext reference

3. Finally comes the URL of the link, e.g., http://www.cnn.com which may include the scheme (http/s) if not a local web page

The label is the text enclosed by the hyperlink tags The target is an attribute of the hyperlink that permits the web

page designer to decide where the page linked to will open. That is, you can set a target’s attribute value to new (target=“new”) and it will open the linked web page in a new browser window

The closing </a> tag after the label finishes the hyperlink Hyperlinks can be applied to images as well as text


Chapter 6 – Links

<a href=“http://www.webster.ac.at” target=“new”> Webster’s Homepage</a>

Opening anchor or link tag. href means the following address is a hypertext reference.

Label can be any text you wish but if it’s not meaningful no one will click on it!

The URL or destination address. It could be many things but most common is a website or web page or specific place in a web page. The http (HyperText Transfer Protocol) scheme tells the browser what type of communication rules it must use to find and open the destination site and web content.

This is where you want the page to open. It is an optional attribute, but in this case it opens a new browser window. Target names are case sensitive

Closing anchor or link tag.


Anatomy of a link

Uniform (Universal) Resource Locator: An URL is a fancy name for internet address Contains information about where a file is and what the

browser should do with it Scheme:

First part of the URL is the scheme, which for this course will always be the HyperText Transfer Protocol (HTTP)

HTTP protocol simply defines a standardized method of communication between servers and clients

Server name/address: This is the second part of the URL and defines the name and

location of the server that stores the web page Path:

This is the folder/directory name(s) on the server that leads to the web page


Recap: Chapter 1 – URLs (p.33)

Absolute URLs Absolute URLs must be given if the web page or

other content your hyperlink references is on a different server than your own

It must include the http:// scheme information so that the browser knows how to communicate with the remote site

You can use absolute URLs for files on your own server too, but this may become cumbersome and error prone

You can create “deep links” that take the user to a specific web page or place on a web page within the website and therefore bypassing the home page Deep links are a bone of contention as it may take users

past relevant info on the home page or even sponsorship links that the website relies on for funds!


Absolute and Relative URLs (pp.36-37)

Relative URLs Can be used when the web page or other content

your hyperlink references resides on your server Cannot be used to reference content on remote

sites To reference a file in your current folder, just use

the file name To reference a file in a sub-folder of your current

folder simply type the folder name followed by a forward slash and file name

To reference a file in a folder in a higher-level folder, use two dots and a forward slash followed by folder/file name©Webster University Vienna Austria

Absolute and Relative URLs (pp.36-37)

Open your template.html file in Notepad and immediately save it as pp104_105.html

type out ALL the text and XHTML tags as shown in Figure 6.2, but use pg99.html instead of pioneerval.html as the web page to open in your browser – you copied the images already!

You do not specify a target in this exercise therefore pg99.html will open in the same browser window.

Re-save the file as pp104_105.html and view it in your browser. Now you will create another link in your pp104_105.html web page,

but this time it will be a link to an external website on the internet. Open pp104_105.html in Notepad and add the text and XHTML code

that appears in Figure 6.5 (not the body tags though!). You should add it after the closing paragraph tag in pp104_105.html

Re-save your web page and open it in your browser to try the links.

Q: Which of the links you created was an absolute URL and which one was a relative URL? Explain…


Creating a link to another web page (pp.104-105)


I’ve created the text that is shown in Figure 6.8 (fig6_8.txt) for you to save time, simply copy and paste it into your web page then add the named anchors that are shown in blue

Resave the file as pp106_107.html and view it in your browser You should notice that the named anchors aren’t underlined even

though you enclose the text in hyperlink tags You can add the anchor tags without a label and it still works Look at the first tip on page 107. What you should do now is

create a hyperlink from one the documents you created previously to the ‘intro’ named anchor in pp106_107.html and test your link

Resave your web page You will have noticed that if there isn’t much text after your last

anchor, the web page doesn’t quite jump directly to the anchor. I’ve fixed this by adding <br /> tags to create some vertical space so delete the comment tags from the bottom of the text I provided. Alternatively resize your browser window so that it is much smaller and will then jump to the relevant anchor.©Webster University Vienna Austria

Creating anchors and linking to them (pp.106-107)


Add some text of your choice with a hyperlink to a site of your choice

The book says target=“_blank” opens a new window, well so does target=“betty”

Simply read and understand how base target works on page 109, but don’t do the exercise unless you really want to

In the hyperlink specify a target and assign it a value Resave your file and test it in your browser Following the example in the 4th paragraph of Figure 6.15 on page

110 add your name to the bottom of the web page and use an mailto: email link so that a user can click on your name to send you an email

Resave the file again and test it in your browser©Webster University Vienna Austria

Targeting links and other kinds of links (pp.108-111)

Read pages 112-113 so that you are aware of these options, but don’t do the exercises unless you really want to

Note that depending on which browser your users have they will experience this functionality differently! (Read all tips)


Shortcuts and tab order for links (pp.112-113)

Following the examples in Figure 6.22 add two hyperlinks to two images at the bottom of your pp104_105.html file just before the closing body tag

Use the pointleft.gif and pointright.gif image files you’ve been provided with instead of the file names the author uses

Where the author has used prevpage.html and nextpage.html you should replace these names with the names of web pages you have created in previous exercises

Resave your file and test your image links in your browser


Using images to label links (p.114)

Open your template.html file in Notepad and immediately save it as pg115.html

Just using the jpg file as your link is really cool as you don’t have to create a whole XHMTL page just to display the photograph

Add the code and text in Figure 6.24 from the first <h1> tag to the end of the second image hyperlink, i.e., the fruitstand hyperlink

You already have the images copied so re-save and test your web page to test the thumbnail hyperlinks

The first tip is important to understand!


Linking thumbnails to images (pg.115)

Creating a client side image map (pp.116-118) Image maps work by defining an area of an image that is to

be used as a hyperlink The areas used as hyperlinks are defined by coordinate

values that are pixel location values based on an x,y axis Coordinate values start at x=0 and y=0 in any image’s top

left hand corner Implementing an image map is done in two parts

1. Define the areas of the image and their respective hyperlinks between <map> </map> tag pairs and give your map a unique name

2. Create your img tag and declare it as an image map by using the usemap attribute

You can use target in your hyperlinks if you wish You can create circular and polygon hyperlink areas


Optional

Creating a client side image map (pp.116-118) Open your template.html file and immediately save it as

pp116_118.html Add ALL the text and code shown in Figure 6.29 Again use websites or files you have created in this class for

your hyperlinked web pages Resave and test your web page in your browser Add another area of your image as a hyperlink, but this time

the area is circular. The values you should use are: x=44, y=50 and r=32

The circular area you create should be right over the circular logo on the left side of the image.

Add a hyperlink of your choice to this and then resave and test


Optional

I would like that you finish all the exercises that are discussed in the book (except those marked as optional) You should have the following files after completing

this week’s work:

If you have problems with some of them, please ask for help during the next lecture

pp70_71.html

pg72.html

pg73.html

pg74.html

pp76_78.html

pp90_94.html pg96.html

pg97.html

pg98.html

pg99.html

pp104_105.html

pp106_107.html

pp108_111.html

pg115.html

pp116_118.html


HOMEWORK (optional)

Download the Homework2 zip file from the course web site

In the zip archive you have a Word document with instructions, plus I’ve prepared the setup for your files

Follow the instructions from the Word file, and when you finish, upload the Homework folder into your DropBox account

Prepare for next weeks class by reading Chapter 7!


HOMEWORK

COAP 2000 XHTML PROGRAMMING: INTRODUCTION TO WEB PROGRAMMING Fall I, 2012 © Webster University Vienna Week 2 – Class 2 [email protected].

Documents

images slide

colours images

gif images

larger images

normal images

images copyright

bmp images

image file