View
215
Download
1
Category
Preview:
Citation preview
1
Using HTML and JavaScript to Develop Websites.
Using Images
2
What we talked about last time ...
Creating Lists» Ordered Lists (<ol> … </ol> &<li> .. </li>)» Unordered Lists (<ul> … </ul> &<li> .. </li>)» Definition lists (<dl> … </dl>, <dt> .. </dt>, <dd> … </dd>)» Lists within lists (remember to match up start and end of lists).
Creating HTML links» Creating absolute links
– <A href=“http://www.depaul.edu/~dlash/myfile.html”> my home page </A>
» Creating relative links – <A href=“myfaq.html”> my FAQ Page </A>
» Creating email links – <A href=“mailto:dlash@condor.depaul.edu"> Mail me please </A>
3
This class we will look at:
Using special characters ($, %, @, #)Using Image Files
4
Inputting Special Characters
Entering special characters like pound sign (#), copyright sign, cent sign, etc.?
Each special character has a numeric code to use to represent it.
»For example, enter the character sequence of ¢ to get the ¢ sign. »To display < (left bracket) or > right bracket) enter < or >. »Example to get <META> you need to enter <META>
Here is an updated link with all the special characters supported. (http://www.w3school.com.cn/tags/html_ref_entities.html)
Competency Alert:You need to
know this!
5
Special Character Example . . .
<HTML><HEAD> <TITLE> Some Example With Special Characters </TITLE></HEAD><BODY><UL><LI></li><FONT SIZE = 4 Color=Blue> This line is Blue and size 4 </FONT> <LI><FONT SIZE = 5 Color=Red> This line is Blue and size 5 </FONT> </li><LI>
<FONT SIZE = 6 Color=GREY> This line is GREY and size 6 </FONT></LI></UL><FONT SIZE=4>A sample of the < font> tag.<HR>This line is size 3 and is ± 10% smaller <HR>This line is size 2 and is squared²</BODY></html>
6
Some Common Special Characters
Using special characters (e.g., #, $, @, <, > )?
@@“"&&>><<
CharacterSpecial Character
Note: A blank space is represented by &NBSP;
7
Using Image Files Images are stored in separate files.
» They are essentially linked to your website.
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
Types of Graphical Image Files
There are 2 dominate types of file formats for graphic images on the WWW 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.
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
What is Digital Image?
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)
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
Placing Image on a Web Page
The basic command to include images is: <img src="elivs.gif“ />
You can use a relative or absolute address to the image: <img src=“http://www.indelible-learning.com/website/images/bugs.gif” />
Question: It linking to an image file on an external site generally a good idea?
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
Dealing With Bad Links . . .
Below shows an example of a bad image link.
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
Using The ATL Attribute . . .
The ALT specifies text to display if a user has graphic images disabled.
Format :» <img SRC="../calvin1.gif" ALT="This Is Calvin" />
Note: The ALT tag has a nice side effect: When you hold cursor over image, it displays the ALT text.
13
Which to use gif or jpg?
Typically might look at image in both formats to see best for your site
jpg gifsHigh-quality images with lots of colors Used for logos, ads with uniform colors
> 16 million colors Up to 256 colors
No transparencies or animation Transparencies and annimation
14
Summary
Putting Background Color on pages »How to specify color »Using background “tile” images
Working with font styles and colors»Underline, bold, italics»Working with the font tag
–size, color and style
Using special characters ($, %, @, #)Using Image Files
15
Some Key Tags We Covered
Special character (e.g., $, #, @, <, >,) need special numerical characters»¢ to get the ¢ sign.
»<META> to get <META>
»&NBSP; &NBSP; to get 2 blank spaces. Including image files
»<img src=“file location” alt=“alternative text”>
16
Another lab exercise . . .
Create an html document that looks as follows:
You can view the background image at: http://condor.depaul.edu/~dlash/extra/webpage/images/
Recommended