Module 5: Inserting Images

HTML Images
• In HTML, images are defined using <img> tag.
• The <img> tag is empty, it contains attributes only,
and does not have a closing tag.
• The src attribute specifies the URL (web address)
of the image.
• It is important to take note of the file type of the
image. (.jpg, .png, .gif)
Activity 15
The alt attribute
• The alt attribute provides an alternate text for an
image, if the user for some reason cannot view it.
• The value of the alt attribute should describe the
image.
Activity 15
The CSS width and height property
• We can use the style attribute to specify the width
and height of an image.
• Resizing is ideal for large-sized images.
• Checking the actual size of the images is important
when resizing to determine the new image size
ratio.
Activity 16
The CSS border property
• The CSS border property allows users to specify the
style, width and color of an element’s border.
Activity 17
Activity 18
Activity 19
Activity 20
The CSS border radius property
• The border-radius property is used to add rounded
borders to an element.
Activity 21
Centering images
• 2 CSS properties will be used when centering
images: display and margin
• The display property specifies if/how an element is
displayed. Giving a value of block on the display
property will let the element take the whole line on
its own.
Centering images
• The margin property is used to create space
around elements. Giving a value of auto to the
margin property gives the element equal amounts
of spaces on the left and right side making it
appear in the center.
Activity 22
Laboratory
Exercise 10
Inserting Images
Instructions
• Create a new HTML file and save it as
laboratory10.html
• The title should be World Wide Web Consortium
• Create a <h1> heading that will display “World
Wide Web Consortium”
• The heading should be centered and the font
should be “century gothic”
Instructions
• Insert the image named logos-w3c, the size should
be 250px x 170px. The image should be centered.
• The paragraphs should be justified with a 1.5em
indentation, font should be “Verdana” with a size
of 1.5em.
• Insert another image named pics-timbernerslee,
the size should be 285px x 356px. The image
should be centered and must have a border radius
of 300px.
Instructions
• The image’s caption should be centered, font
should be “Georgia” and the size should be 14px.
Paragraph
The World Wide Web Consortium is the main
international standards organization for the World Wide
Web.
Founded and currently led by Tim Berners-Lee, the
consortium is made up of member organizations which
maintain full-time staff for the purpose of working together
in the development of standards for the World Wide Web.
The W3C also engages in education and outreach,
develops software and serves as an open forum for
discussion about the web.
Image Caption
Sir Timothy John Berners-Lee is an English engineer
and computer scientist, best known as the inventor
of the World Wide Web. He is currently a professor
of Computer Science at the University of Oxford.