coap 2000 xhtml programming: introduction to web programming fall i, 2012 © webster university...
Post on 26-Mar-2015
212 Views
Preview:
TRANSCRIPT
COAP 2000 XHTML PROGRAMMING: INTRODUCTION TO WEB PROGRAMMING
Fall I, 2012
© Webster University Vienna
http://coap2000.ddejan.com/
Week 2 – Class 2
dejan.dimitrovski@gmail.comdimitdej@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
©Webster University Vienna Austria
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
©Webster University Vienna Austria
Images in Web Pages
HTML vs CSS Images
HTML Image CSS Image
©Webster University Vienna Austria
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/
©Webster University Vienna Austria
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
©Webster University Vienna Austria
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
©Webster University Vienna Austria
Chapter 5 – Images
Saving Images from the browser
©Webster University Vienna Austria
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
©Webster University Vienna Austria
Chapter 5 – Images
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
©Webster University Vienna Austria
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
©Webster University Vienna Austria
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!
©Webster University Vienna Austria
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.
©Webster University Vienna Austria
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.
©Webster University Vienna Austria
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.
©Webster University Vienna Austria
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
©Webster University Vienna Austria
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
©Webster University Vienna Austria
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.
©Webster University Vienna Austria
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
©Webster University Vienna Austria
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!
©Webster University Vienna Austria
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…
©Webster University Vienna Austria
Creating a link to another web page (pp.104-105)
Open your template.html file in Notepad and immediately save it as pp106_107.html
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)
Open your template.html file in Notepad and immediately save it as pp108_111.html
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)
©Webster University Vienna Austria
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
©Webster University Vienna Austria
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!
©Webster University Vienna Austria
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
©Webster University Vienna Austria
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
©Webster University Vienna Austria
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
©Webster University Vienna Austria
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!
©Webster University Vienna Austria
HOMEWORK
top related