HTML5 - Insert images and Apply page backgrounds

Information and Communication Technology – 8

Understand the importance of images and graphics in
a web page ;
Utilize images into your page; and
Apply background in your HTML documents.

 You can create a web page with only text content, but it would
not be interesting compared to one that has an images.
 Your viewer will be able to effectively relate if there are visual
illustrations supplementing your text content.
 You can further elaborate and present the purpose of you
website into a more dynamic and creative way.

 File Size – Too large file size can lead to a slow loading speed of
the page. Most visitors don’t want to wait for a slow site and will
certainly look for a different choice.
 Cropping – Viewing dimensions are important as visitors want
to actually see the image, so it cannot be too small or large to fit
to the screen.
 Irrelevance – Photos are important and great addition to the
web page. But it should be related or relevant to the purpose of
the website.

 Complementary – Can showcase what’s the article/website is about. When
used alongside the article, it can give a readers a thorough
perspective of the topic.
 File Size – If an image is merely for monitor viewing, then the file size should
be at least 250 kilobytes. Resolution wise, it should be no more
than 640x480 pixels to fit well on most displays.
 Format – There are three types of images formats for website use: JPEG, GIF
and PNG.
 JPEG ( Joint Photographic Experts Group) – which is the most common and
popular, has the most compressibility; however too much will reduce the quality.
 GIF ( Graphics Interchange Format) – have good compressibility and are ideal for
photos with little color.
 PNG ( Portable Network Graphics) – can produce high quality display and overlay;
however it’s downside is its poor compressibility.

HTML5 - Insert images and Apply page backgrounds

Two Types of GIF Images:
• Transparency – The image has transparent background and allows the web
page background to show through.
• Interlacing – The images are gradually displayed on the screen, and appear
blurry at first then come into focus when loading is done.

 Aesthetics – When choosing an image, consider its artistic value. Balance the
brightness and contrast in order to effectively emphasize the
subject.
 Layout – Carefully plan the position of an image by using a layout as random
placement can distract viewers. Limit photos designed to direct readers to one
per page; the rest should be positioned near the relevant contents so viewers
can easily understand the relationship between the images and content.

 There are two classes of images for web page:
 Inline Images – these images are loaded automatically when you load the page
itself.
 External Images – these images are loaded only at the request of the viewer. It will
not display when you load a page.
Syntax : <img src= “picture.jpg”>
 In HTML, images are defined with the <img> tag.
 The <img> tag is empty, it contains attributes only, and does not have a closing tag.
Tag Attribute Image Filename

Attributes Description
src (source) This specifies Address of the resource file
using URL.
alt ( Alternate text) The text to be use in case the browser cant
render the image.
width Specifies the width of the image.
height Specifies the height of the image.
The table shows the attributes that are specific to <img> tag/element.

 The attribute src (source) will specify the address or location of the image
that you want to insert in your HTML.
 When the image resides on the same folder as the HMTL document that
references it, you can just type the file name only with out any additional
information.
<img src=“picture.jpg”>
 If you want to refer to images that are stored in subfolder inside the folder
that contains your HTML documents, you should indicate the subfolder name
where the image is located.
My HTML Folder images
Example: <img src=“images/picture.jpg”

 You can add a descriptive text that will appear if the image might not display
for whatever reason.
 The alt attributes provides something meaningful text to replace or as a
substitute for an image and gives an idea of the image that is about to be
loaded.
Example: <img src=“picture.jpg” alt=“alternate text
for image”>

 Image size is expressed in pixels.
 You can change the width and height of the image by adding a
width=“new value” or height=“new value”
 But you can also specify both the width and the height.
<img src=“picture.jpg” style=“float:left” width=“250”>
<img src=“picture.jpg” style=“float:left” width=“250” height=“300”>

 Similar to text images can have margins and/or padding to separate them
from surrounding elements.
 There are two types of attributes that can control the space around the
image:
 Padding – this attribute controls the space around the content on the inside of the
element.
 Margin- this attribute controls the space surrounding the element.
* You can use either the two attributes for an image. When the image has a border, it
is better to use the margin attribute.
<img src=“picture.jpg” style=“float:left;margin-right:15px” width=“250”>

 To stop the text from wrapping around on an aligned image, use the clear
attribute, to break the line so that the next line of text begins after the end if
the image.
 You should apply this to the text tag and not inside the <img> tag.
Example: <p style=“clear:right”>
The clear attribute can have one of three values:
Left – this is for left-aligned images. It will break to an empty left margin.
Right – this is for the right aligned images. It will break to an empty right
margin.
All – breaks to a line clear to both margins.

 You can apply different kinds of basic colors in your page. HTML recognizes
16 of these:

 You can specify a background color for your entire page by adding an
attribute to its opening <body> tag.
 Example :
<body style=“background-color:aqua”>
or
<body bgcolor=“gray”>
For foreground color:
<body style=“background-color:teal;color:white”>
The two attributes are combined in a single style=statement,
and are separated using a semicolon as shown in the above
example.

 Similar to the background color, a background image is displayed behind text.
 By default the image is tiled to fill the page and scrolls with the page.
Example: <body style=“background-image:url(background.jpg)”>
or
<body style="background-color:white;background-image:url(background.png)">
By default, the background image is repeated both horizontally and vertically to fill the window. You can force it
not to repeat by adding the background-repeat to the body tag.
Example: background-repeat:repeat-x (repeat horizontally)
background-repeat:repeat-y (repeat vertically)
background-repeat:o-repeat
Syntax: <body style="background-color:white;color:white;background-image:url(image.url);background-
repeat:repeat-x">

 Using the different tags we have discussed in creating a
webpage, create a simple HTML document that will provide you
the same output on the picture given. (Triad)
 Use Notepad++ to create your HTML Document, name your file
“The HTML History_Grade_Section.html”
 Save the HTML document on your section’s folder.
 Use the necessary tags we have discussed, like Structural tags
as mandatory tags used to make the HTML document,
formatting tags for fonts, heading tags, paragraph tags, break
line tags and list tags.

Category 5 4 3 2 1
Code Structure Code are excellently
clear, concise, and
well organized with
excellent
sentence/paragrap
h construction.
Code are clear,
concise, and
organized with
excellent
sentence/paragrap
h construction.
Code are mostly
clear, concise, and
organized with good
sentence/paragrap
h construction.
Code is unclear
and/or
disorganized.The
structure is
confusing.
Code is unclear
and disorganized
and will certainly
won’t work.
Requirements and
Mastery
Met all of the
requirements,
followed all the
necessary formats
and exceptionally
shows mastery on
the use of tags.
1-2 requirements
are missing,
followed the
necessary formats
and somehow
shows knowledge
on the use of tags.
3-5 requirements
are missing,
followed the
formats and shows
minimal knowledge
on the use of tags.
6-7 requirements
are missing, tries to
follow the format
and shows very
minimal knowledge
on the use of tags.
All requirements
was missing and
not followed. No
understanding on
the tags at all.
Use of Class Time
-Used time well
during class period.
-Focused on getting
the website done.
-Never distract
others.
-Used time well
during class period.
-Usually focused on
getting the website
done and never
distract others.
-Used some of the
time well during
class period.
-There was some
focus on getting the
website done but
occasionally
distract others.
-Used some of the
time well during
class period.
-There was some
focus on getting the
website done and
most of the time
distract others.
-Did not use class
time to focus on
the hands-on OR
often distracted
others.

HTML5 - Insert images and Apply page backgrounds

Recommended

More Related Content

What's hot (20)

Similar to HTML5 - Insert images and Apply page backgrounds (20)

More from Grayzon Gonzales, LPT (13)

Recently uploaded (15)

HTML5 - Insert images and Apply page backgrounds