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
![Page 1: 1 More About HTML Images and Links. 22 Objectives You will be able to Include images in your HTML page. Create links to other pages on your HTML page](https://reader035.vdocument.in/reader035/viewer/2022062311/5a4d1b2a7f8b9ab059998ccf/html5/thumbnails/1.jpg)
1
More About HTML
Images and Links
![Page 2: 1 More About HTML Images and Links. 22 Objectives You will be able to Include images in your HTML page. Create links to other pages on your HTML page](https://reader035.vdocument.in/reader035/viewer/2022062311/5a4d1b2a7f8b9ab059998ccf/html5/thumbnails/2.jpg)
2 2
Objectives
You will be able to Include images in your HTML page. Create links to other pages on your
HTML page.
![Page 3: 1 More About HTML Images and Links. 22 Objectives You will be able to Include images in your HTML page. Create links to other pages on your HTML page](https://reader035.vdocument.in/reader035/viewer/2022062311/5a4d1b2a7f8b9ab059998ccf/html5/thumbnails/3.jpg)
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
![Page 4: 1 More About HTML Images and Links. 22 Objectives You will be able to Include images in your HTML page. Create links to other pages on your HTML page](https://reader035.vdocument.in/reader035/viewer/2022062311/5a4d1b2a7f8b9ab059998ccf/html5/thumbnails/4.jpg)
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.
![Page 5: 1 More About HTML Images and Links. 22 Objectives You will be able to Include images in your HTML page. Create links to other pages on your HTML page](https://reader035.vdocument.in/reader035/viewer/2022062311/5a4d1b2a7f8b9ab059998ccf/html5/thumbnails/5.jpg)
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
![Page 6: 1 More About HTML Images and Links. 22 Objectives You will be able to Include images in your HTML page. Create links to other pages on your HTML page](https://reader035.vdocument.in/reader035/viewer/2022062311/5a4d1b2a7f8b9ab059998ccf/html5/thumbnails/6.jpg)
6 6
Image Example
Save on desktop and double click to display file in browser.
![Page 7: 1 More About HTML Images and Links. 22 Objectives You will be able to Include images in your HTML page. Create links to other pages on your HTML page](https://reader035.vdocument.in/reader035/viewer/2022062311/5a4d1b2a7f8b9ab059998ccf/html5/thumbnails/7.jpg)
7
image_example in Chrome
![Page 8: 1 More About HTML Images and Links. 22 Objectives You will be able to Include images in your HTML page. Create links to other pages on your HTML page](https://reader035.vdocument.in/reader035/viewer/2022062311/5a4d1b2a7f8b9ab059998ccf/html5/thumbnails/8.jpg)
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
![Page 9: 1 More About HTML Images and Links. 22 Objectives You will be able to Include images in your HTML page. Create links to other pages on your HTML page](https://reader035.vdocument.in/reader035/viewer/2022062311/5a4d1b2a7f8b9ab059998ccf/html5/thumbnails/9.jpg)
9
Image Example on the Web
End of Section
![Page 10: 1 More About HTML Images and Links. 22 Objectives You will be able to Include images in your HTML page. Create links to other pages on your HTML page](https://reader035.vdocument.in/reader035/viewer/2022062311/5a4d1b2a7f8b9ab059998ccf/html5/thumbnails/10.jpg)
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.
![Page 11: 1 More About HTML Images and Links. 22 Objectives You will be able to Include images in your HTML page. Create links to other pages on your HTML page](https://reader035.vdocument.in/reader035/viewer/2022062311/5a4d1b2a7f8b9ab059998ccf/html5/thumbnails/11.jpg)
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”.
![Page 12: 1 More About HTML Images and Links. 22 Objectives You will be able to Include images in your HTML page. Create links to other pages on your HTML page](https://reader035.vdocument.in/reader035/viewer/2022062311/5a4d1b2a7f8b9ab059998ccf/html5/thumbnails/12.jpg)
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
![Page 13: 1 More About HTML Images and Links. 22 Objectives You will be able to Include images in your HTML page. Create links to other pages on your HTML page](https://reader035.vdocument.in/reader035/viewer/2022062311/5a4d1b2a7f8b9ab059998ccf/html5/thumbnails/13.jpg)
13 13
simple_link.html in Chrome
![Page 14: 1 More About HTML Images and Links. 22 Objectives You will be able to Include images in your HTML page. Create links to other pages on your HTML page](https://reader035.vdocument.in/reader035/viewer/2022062311/5a4d1b2a7f8b9ab059998ccf/html5/thumbnails/14.jpg)
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.
![Page 15: 1 More About HTML Images and Links. 22 Objectives You will be able to Include images in your HTML page. Create links to other pages on your HTML page](https://reader035.vdocument.in/reader035/viewer/2022062311/5a4d1b2a7f8b9ab059998ccf/html5/thumbnails/15.jpg)
15
Link to Page on the Same Site
![Page 16: 1 More About HTML Images and Links. 22 Objectives You will be able to Include images in your HTML page. Create links to other pages on your HTML page](https://reader035.vdocument.in/reader035/viewer/2022062311/5a4d1b2a7f8b9ab059998ccf/html5/thumbnails/16.jpg)
16
Link to Page on the Same Site
End of Presentation