The document discusses various aspects of web development including inserting images, using lists, and creating links. It provides information on different image file formats like JPG, PNG, and GIF and how to insert images into web pages. It also covers using different types of lists and links to organize and present content on web pages.

1. Web Development:
{ Images, Lists and Links}
Presented by:
Mr. Jhaun Paul G. Enriquez
SHS Faculty

2. Web Images and File Types
Web Development: Using HTML5 & CSS3 2
• Images enhance the appearance of web
pages
• Use images to:
– Add background color
– Help organize the web page
– Help clarify a point being made in the text
– Serve as links to other web pages or web sites

3. Web Images and File Types
Web Development: Using HTML5 & CSS3 3
• Graphics Interchange Format (.gif)
– Uses the LZW compression technique
– Displaying GIF Images:
• Non-interlaced – displayed one line at a time
• Interlaced – display as blurred then sharpens
– Allows transparent background
– Image loses some
detail and quality

4. Web Images and File Types
Web Development: Using HTML5 & CSS3 4
• Portable Network Graphics (.png)
– Lossless compressed file format
– Supports multiple colors and resolutions
– Patent –free alternative to GIF format
– Allows for variation in transparency

5. Web Images and File Types
Web Development: Using HTML5 & CSS3 5
• Joint Photographic Experts Group (.jpg)
– Uses a lossy compression technique
– Suited for images with smooth variations of tone
and color
– Use for images with many colors (>256) such as
photographs

6. Inserting Image on Web Pages
Web Development: Using HTML5 & CSS3 6
• Using <img> Element
– used to insert image on a web page
Attribute Function
src specifies the URL (web address) of the image
alt provides an alternate text for an image
style to specify the width and height of an image
Note: Always specify the width and height of an image. If width and
height are not specified, the page will flicker while the image loads.
Source: http://www.w3schools.com/html/html_images.asp

7. Inserting Image on Web pages
Web Development: Using HTML5 & CSS3 7
• Images in Another Folder
– Include the folder name if image is store in a
sub-folder
• Images in Another Server
– Some web sites store their images on image servers

8. Inserting Image on Web pages
Web Development: Using HTML5 & CSS3 8
• Using the <figure> Element
– Defines self-contained content, like illustrations,
diagrams, photos, code listings, etc.
SAMPLE CODE
• Using the <figcaption> Element
– Defines a caption for a <figure> element
OUTPUT

9. Using Lists to Present Content
Web Development: Using HTML5 & CSS3 9
• Specify lists of information on web pages
• All lists must contain one or more list
elements
• Lists may contain the following:
– Unordered information
– Ordered information
– Definitions or Descriptions

10. Using Lists to Present Content
Web Development: Using HTML5 & CSS3 10
• Using an Unordered List
– Starts with the <ul> tag
– Each list item starts with the <li> tag
– Marked with disc or bullets (default)
– Lists may also be circle, square or none
SAMPLE CODE OUTPUT

11. Using Lists to Present Content
Web Development: Using HTML5 & CSS3 11
• Using an Ordered List
– starts with the <ol> tag
– Each list item starts with the <li> tag
– Marked with numbers (default)
– Lists may also be uppercase , lowercase , or roman
numerals (uppercase & lowercase)
SAMPLE CODE OUTPUT

12. Using Lists to Present Content
Web Development: Using HTML5 & CSS3 12
• Attributes for <ol> and <ul> Elements
1. type* - defines the type of the list item marker
2. start* - specify the starting point of numbering
with the <ol> tag
SAMPLE CODES
Notes: These tags are
deprecated but
supported by HTML5

13. Using Lists to Present Content
Web Development: Using HTML5 & CSS3 13
• Nested HTML Lists
– List can be nested (lists inside lists)
SAMPLE CODE OUTPUT

14. Using Lists to Present Content
Web Development: Using HTML5 & CSS3 14
• Using a Description List
– a list of terms with a description of each term
– Tags used:
• <dl> - defines the description list
• <dt> - defines the term (name)
• <dd> - describes each term
SAMPLE CODE OUTPUT

15. 1. What are the three recommended image formats
for web pages?
2. What <img> attribute specifies the URL (web
address) of the image?
3. What tag defines a caption for a <figure> element?
4. What HTML element defines a list item for an
unordered and ordered list?
5. Which description list tags will you use if you are
to define the name of the term to be described?
Quick Learning Check:

16. • Using the sample given, create an web page that
shows a beef stew recipe.
• The <title> should be All About Recipes.
• The beef stew image should be inside a folder
named images.
• Use appropriate HTML5 Web Structure Tags for
your header, content and footer. The page
should contain 3 sections within an article.
• Use comment tags to indicate the content of the
web page.
• Save the file as recipe_surname.html
In-class Activity:

18. Creating Links on Web Pages
Web Development: Using HTML5 & CSS3 18
Text Link
Image
Link
Bookmark
Link

19. Creating Links on Web Pages
Web Development: Using HTML5 & CSS3 19

20. Creating Links on Web Pages
Web Development: Using HTML5 & CSS3 20
• Hyperlinks allow visitors to navigate within,
between and among websites
• Links are specified by the anchor tag (<a>)
• Syntax for the link:
<a href="url">linktext</a>
• Example for the link:
• <a href="http://www.santaisabel.edu.ph">Link</a>
• <a href="about.html">About</a>
• <a href="#"><image src="sunset.jpg"></a>

21. Creating Links on Web Pages
Web Development: Using HTML5 & CSS3 21
• Using Absolute and Relative Paths
– Path describes the location where the files can be
found
– Beginning location is called the root
• Absolute path – specify the exact address for the
file to which you are linking or displaying a graphic
– <a href="http://www.smec.org/info.html">Link</a>
• Relative path – specify location of a file relative to
its location of the file currently in use
– <a href="aboutus/history.html">Link</a>
– <a href="../download/forms.html">Link</a>

22. Creating Links on Web Pages
Web Development: Using HTML5 & CSS3 22
Understanding Absolute
and Relative Paths
– Which of the following are
relative to the index.html web
document?
– What would be the path if
aboutus.html would insert the
background.jpg image?
– What is the path if a link will be
created from the index.html to
the projector.html?
– How will the desktop.html insert
the companylogo.png into its
web page?
WebsiteProject
index.html
aboutus.html
images
companylogo.png
background.jpg
product
projector.html
desktop.html

23. Creating Links on Web Pages
Web Development: Using HTML5 & CSS3 23
Types of Hyperlinks
1. External link – resource from another web server
or web address
<a href="http://www.w3schools.com">W3Schools</a>
2. Local link – web document with the same website
<a href="forms/applynow.html">Apply Now!</a>
3. Bookmark link – allow readers to jump to specific
parts of a Web page
<a href="#tips">Visit useful tips section</a>
<h2 id="tips">Useful Tips</a>

24. Creating Links on Web Pages
Web Development: Using HTML5 & CSS3 24
• Attributes of an Anchor Tag:
• href – specifies the destination address of the
link
• id – defines the name of the current anchor tag
• target – define where to open the linked
document
 _self - Opens the linked document in the same
window/tab as it was clicked (this is default)
 _blank - Opens the linked document in a new
window or tab

25. Creating Links on Web Pages
Web Development: Using HTML5 & CSS3 25
• Email Address Link:
• allows you to link to email addresses
• simplest way to enable your web page visitors to
“talk back” to you
• Includes the recipient, subject and message body
<a href="mailto:author@domain.com">Email Us</a>
<a href="mailto:author@domain.com?subject =
Customer Inquiry & body = Dear Web Master,">
Email Us</a>

26. Creating Links on Web Pages
Web Development: Using HTML5 & CSS3 26
• Text Link Colors:
• An unvisited link is underlined and blue
• A visited link is underlined and purple
• An active link is underlined and red
• Image Link:
Note: border:0; is added to prevent IE9 (and earlier) from displaying
a border around the image (when the image is a link).

27. Creating Links on Web Pages
Web Development: Using HTML5 & CSS3 27
• Image Maps:
• Image with clickable areas
• Use the <map> tag to define an image map with
name attribute to create a relationship between
the image and the map
• Use <area> tags in a <map> tag to define the
clickable areas in the image-map

28. Creating Links on Web Pages
Web Development: Using HTML5 & CSS3 28
• Image Maps:
Source: http://www.w3schools.com/html/html_images.asp

29. In-class Activity:
Web Development: Using HTML5 & CSS3 29
• Create a web page that uses an image map of the
Philippines to show a brief information of three (3)
Philippine cities.
• The <title> tag should be Philippine Cities.
• The following should be present in the web page:
• An external link to the PAGASA Website that
opens in a new tab after clicking a PAGASA logo.
• A bookmark link to the different city information
• An email link to info@philcities.com
• Save the file as philmap_surname.html