Images, lists and links

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

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

• 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

• Portable Network Graphics (.png)
– Lossless compressed file format
– Supports multiple colors and resolutions
– Patent –free alternative to GIF format
– Allows for variation in transparency

• 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

Inserting Image on Web Pages
• 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

Inserting Image on Web pages
• 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

Inserting Image on Web pages
• 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

Using Lists to Present Content
• 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

• 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

• 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

• 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

• Nested HTML Lists
– List can be nested (lists inside lists)
SAMPLE CODE OUTPUT

• 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

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:

• 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:

Creating Links on Web Pages
Text Link
Image
Link
Bookmark
Link

• 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>

• 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>

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

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>

• 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

• 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>

• 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).

• 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

• Image Maps:
Source: http://www.w3schools.com/html/html_images.asp

In-class Activity:
• 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

Images, lists and links

More Related Content

What's hot

Similar to Images, lists and links

Recently uploaded

Images, lists and links