1. HTML Introduction
Lecture 8

2. What we have learned so far:
2.1 Basic HTML page development
2.2 Tags… (example?)
2.3 Lists… (example?)
2.4 Attributes… (example?)
2.5 Single Tag… (example?)
So far, we have learned text handling. How about Image?
Image handling in HTML
Lecture 8
Lecture 8

3. Image tag <IMG> tag: place images on Web Pages
src attribute: specifies name of image file
attribute_name: src
attribute_value: source file name
alt attribute, give your image a hidden name
attribute_value: a hidden name of your image
example:
<IMG src=“dave_logo.jpg” alt=“Dave’s logo”>
Lecture 8

4. <IMG src=“logo.jpg” width=“100” height=“200” alt=“Dave’s logo”>
Image tag (contd.)
Specify size of image file to be displayed
attribute_name: width, height
attribute_value: define the width or the height of image
example:
<IMG src=“logo.jpg” width=“100” height=“200” alt=“Dave’s logo”>
Lecture 8

5. Image tag (contd.) place an image in center of a browser
Use <CENTER>, … </CENTER> tag
example
<CENTER>
<IMG src=“logo.jpg” width=“100” height=“200” alt=“Dave’s logo”>
</CENTER>
Alternatively,
<h1 style=“text-align:center”> <IMG src=“logo.jpg” width=“100” height=“200” alt=“Dave’s logo”> </h1>
Lecture 8

6. Remember: Use image files in .gif, .jpg, .png format
Do NOT use .bmp, .tiff, .pict
Use images with small size
Lecture 8

7. NOTE
When inserting an image, make sure that the image file is located at the same disk directory as shown in your src attribute in <IMG> tag
Example
if <IMG src=“logo.jpg” …> is used in your html file, then the image file (logo.jpg) MUST be installed in the same disk and same file folder with your html file!
Lecture 8

8. Next Level: Developing a Web Site
Lecture 8

9. Web Site Structures A well-designed structure ensures users
navigate the site with ease
not get lost
not miss important information
Lecture 8

10. Web Site Structures Storyboard is a diagram of a Web site’s structure
shows all pages in a site
indicates how the pages are linked together
defines a structure that works best for the type of information of the site
Very important for the websites projects!
Lecture 8

11. Different types of Website Structures
Lecture 8

12. (1) Linear Structures
each page is linked with the page follows and the page precedes it in a chain
works best for Web pages with a clearly defined order
commonly, each page contains an additional link back to an opening page
Lecture 8

13. Linear Structures
Lecture 8

14. Advantages & Disadvantages?
Lecture 8

15. (2) Hierarchical Structures
pages are linked going from the home page down to more specific pages
users easily move from general to specific and back
a user can move quickly to a specific page without moving through each page in order
Lecture 8

16. Hierarchical Structures
Lecture 8

17. Advantages & Disadvantages?
Lecture 8

18. (3) Mixed Structures
hierarchical allows the user to move from general to specific
linear allows users to move through the site in a linear fashion
How about mixing the both???
Lecture 8

19. Mixed Structures
Lecture 8

20. (4) Protected Structures
Lecture 8

21. Linking pages…Hyperlinks
“A clickable HTML element that will direct the web browser to display a different Web page or a different location on the current Web page.”
Lecture 8

22. Hyperlinks Use tags <a>…</a>, and href attribute example
href = “a link destination”
example
<a href = “tutorial.html”> Tutorial </a>
link destination
link label, visible on a Web page, where you will click
Lecture 8

23. Specifying a Folder Path
Lecture 8

24. Specifying a Folder Path
To create a link to a file located in a different folder than the current document, you must specify the file’s location, or path
An absolute path specifies a file’s precise location within a computer’s entire folder structure
A relative path specifies a file’s location in relation to the location of the current document
If the file is in the same location as the current document, you do not have to specify the folder name
If the file is in a subfolder of the current document, you have to include the name of the subfolder
Lecture 8

25. Specifying a Folder Path
If you want to go one level up the folder tree, you start the relative path with a double period (..), a forward slash, and then provide the name of the file
To specify a different folder on the same level, known as a sibling folder, you move up the folder tree using the double period (..) and then down the tree using the name of the sibling folder
Lecture 8

26. Hyperlinks Three type of Hyperlinks Relative URL Absolute URL Name id
links to a Web page on the same Web server
only need relative directory for the linked file
Absolute URL
links to a Web page on a different Web server
a complete URL should be used
e.g.,
Name id
links to a different location on the same Web page
links to a different location on the different Web page
Lecture 8

27. Relative URL link destination
<a href = “page2.html”> My Page 2 </a>
link label, visible on a Web page, where you will click
link destination
<a href = “../page3.html”> My Page 3 </a>
link label, visible on a Web page, where you will click
Lecture 8

28. Absolute URL link destination
<a href=“ Instructor’s website </a>
link destination
link label, visible on a Web page, where you will click
Lecture 8

29. Hyperlink to a certain location
id attribute assigns a name (or an ID) to an element
with the ID, an element can be referred to easily
syntax
<tag id=“name”> content </tag>
e.g.,
<h1 id=“welcome”> Welcome to MAT 279 </h1>
Note:
id names must be unique
id names are NOT case sensitive
Lecture 8

30. Creating hyperlinks to locations in same document
use id attribute to identify the destination of the hyperlinks
syntax
<a href=“#id_name ”> content </a>
e.g., <a href=“#welcome”> Go to the top of the page. </a>
Lecture 8

31. Creating hyperlinks between documents
use id attribute to identify the destination of the hyperlinks
create a hyperlink specific location in another file with syntax
<a href=“filename.html#id">content</a>
filename is the file name of destination HTML file
id is the id name of an element in the destination file
e.g
<a href=“tutorial.html#para2”>Go to the second paragraph of the tutorial </a>
Lecture 8

32. Working with Hypertext Attribute (target)
You can force a document to appear in a secondary window or tab by adding the target attribute to the tag <a> tag
Lecture 8