1 more about html images and links. 22 objectives you will be able to include images in your html...
DESCRIPTION
33 Images in HTML Use the tag to display an image file in an HTML page..gif.jpg.png The image is a separate file stored within the web site’s virtual directory. Typically in /images directoryTRANSCRIPT
1
More About HTML
Images and Links
2 2
Objectives
You will be able to Include images in your HTML page. Create links to other pages on your
HTML page.
3 3
Images in HTML
Use the <img> tag to display an image file in an HTML page. .gif .jpg .png
The image is a separate file stored within the web site’s virtual directory. Typically in /images directory
4 4
The <img> Tag
<img src="filename" alt="text" />
filename is path to image file Normally a relative address e.g. "images/xxx.jpg“
alt is text to be displayed if the image file cannot be found or cannot be displayed. Also used by page readers.
5 5
Image Example
Create a folder called images on your desktop.
Download file USF_Bull.gif from the class web site into images folder:http://www.cse.usf.edu/~turnerr/Web_Application_Design/Downloads/004_HTML_Tables_and_Images/ File USF_Bull.gif
In Visual Studio, create a new html file and save on desktop as image_example.html
6 6
Image Example
Save on desktop and double click to display file in browser.
7
image_example in Chrome
8 8
Deploy image_example to Server
Copy both the images folder and file image_example from the desktop to your web directory.
View image example on the web
9
Image Example on the Web
End of Section
10 10
Creating Links Links allow a user to jump to other
places by simply clicking on them. This is the hyper in hypertext!
A link can go to another point in the same document or to a completely different page Anywhere in the Internet.
Clicking on the link is like typing the URL into the browser’s address box.
11 11
A link to a page on a different site must include the full URL.
<a href="http://www.usf.edu/engineering/cse/">Back to CSE Home Page</a>
Called an absolute URL.
Links to Other Pages
Where to go
This is what the user sees as “the link”.
12
<head> <title>A Simple Page with a Link</title></head><body><b>Click on the link below to go to the ComputerScience and Engineering Home page.</b><br /> <br /><a href="http://www.usf.edu/engineering/cse/"> Back to CSE Home Page</a>
</body></html>
12
File simple_link.html
13 13
simple_link.html in Chrome
14 14
Links to Other Pages
A link to another page on the same site can use a relative URL No “http://” Specification in the link will be
appended to the current directory.
This is usually the preferred way to write a link.
Pages can be moved to a different site, or different directory, without updating the links.
15
Link to Page on the Same Site
16
Link to Page on the Same Site
End of Presentation