1. 1 Using HTML and JavaScript to Develop Websites. Using Images

2. 2 What we talked about last time... l Creating Lists »Ordered Lists ( … &.. ) » Unordered Lists ( … &.. ) »Definition lists ( …,.., … ) »Lists within lists (remember to match up start and end of lists). l Creating HTML links »Creating absolute links – my home page »Creating relative links – my FAQ Page »Creating email links – Mail me please

3. 3 This class we will look at: l Using special characters ($, %, @, #) l Using Image Files

4. 4 Inputting Special Characters l Entering special characters like pound sign (#), copyright sign, cent sign, etc.? l Each special character has a numeric code to use to represent it. »For example, enter the character sequence of &#162 to get the ¢ sign. »To display right bracket) enter &lt or &gt. »Example to get you need to enter <META&gt l Here is an updated link with all the special characters supported. (http://www.w3school.com.cn/tags/html_ref_entities.html ) Here is an updated link Competency Alert: You need to know this !

5. 5 Special Character Example... Some Example With Special Characters This line is Blue and size 4 This line is Blue and size 5 This line is GREY and size 6 A sample of the &lt font&gt tag. This line is size 3 and is &#177 10% smaller This line is size 2 and is squared&#178

6. 6 Some Common Special Characters l Using special characters (e.g., #, $, @, )? @&#64 “&quot &&amp >&gt <&lt CharacterSpecial Character Note: A blank space is represented by

7. 7 Using Image Files l Images are stored in separate files. »They are essentially linked to your website. l There are many different ways to create or find digital images »Digital cameras - If you save the image in a standard format (E.g., gif, jpg), you can include on your web page »On-line searches – E.g., search google for free clip art »To save a image off the web: 1.Put your cursor on the image. 2.Right click then -> save image as... 3.Save the image on your PC. (Make sure it is a gif, jpg, png suffix file.)

8. 8 Types of Graphical Image Files There are 2 dominate types of file formats for graphic images on the WWW l GIF (Graphic Interchange Format) – » the first graphic file type format uses 8 bit or 256 possible colors. »are platform independent »particularly good for areas of flat colors like logos, cartoons, icons. »Does not good for photographic images since it reduces all images to 256 colors. l JPEG (Joint photographic Experts Group) »Uses a 24 bit RGB color information, (displays 8 bit colors on 8bit color systems) » ideal use for photographs. Not good at compressing images with solid colors such as logos, line art and cartoons. On a side note, Unisys held the patent on the compression method that gif files uses. In 1994, announced will charge for sites using GIF, causing people to move towards nonproprietary format. This patent has run out in the USA.

9. 9 What is Digital Image? l A format for encoding a way to represent a picture using RGB color format »Each pixel to display needs to have a RGB value »Less colors you display the smaller the image –(since can compress the image more) l Gif format specification allows you to discribe more than 1 image »There is a delay to show each image giving an animation effect. (but no sound)

10. 10 Placing Image on a Web Page The basic command to include images is: You can use a relative or absolute address to the image: l Question: It linking to an image file on an external site generally a good idea? l Question can you legally copy images without asking permission? Note: if you have trouble linking to an image, ensure that you are specifying the filename correctly. Check to see if the image file name is capitalized or lower case.

11. 11 Dealing With Bad Links... l Below shows an example of a bad image link. l Some things to check if this occurs: »Is file name specified/spelled correctly? »Is file path correct? (e.g., it is in a different directory) »Is the image suffix correct? (myfile.gif, myfile.jpg) »Any capitalization in the filename? »Is the file the correct format (e.g, a bmp file won’t work) Common Problem Area! People seem to forget this

12. 12 Using The ATL Attribute... l The ALT specifies text to display if a user has graphic images disabled. l Format : » Note: The ALT tag has a nice side effect: When you hold cursor over image, it displays the ALT text.

13. 13 Which to use gif or jpg? l Typically might look at image in both formats to see best for your site jpggifs High-quality images with lots of colorsUsed for logos, ads with uniform colors > 16 million colorsUp to 256 colors No transparencies or animationTransparencies and annimation

14. 14 Summary l Putting Background Color on pages »How to specify color »Using background “tile” images l Working with font styles and colors »Underline, bold, italics »Working with the font tag –size, color and style l Using special characters ($, %, @, #) l Using Image Files

15. 15 Some Key Tags We Covered l Special character (e.g., $, #, @,,) need special numerical characters »&#162 to get the ¢ sign. »<META&gt to get » to get 2 blank spaces. l Including image files »

16. 16 Another lab exercise... l Create an html document that looks as follows: You can view the background image at: http://condor.depaul.edu/~dlash/extra/webpage/images/