1 more about html images and links. 22 objectives you will be able to include images in your html...
Post on 18-Jan-2018
222 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
top related