Scribd
Upload
21 views13 pages

Comp6 Module 5 1st Quarter

The document discusses HTML image and marquee tags. It explains how to insert images into webpages using the <img> tag and provides examples of image attributes like height, width, border, vspace and hspace. It also covers the <marquee> tag for creating scrolling text, and describes attributes like direction, behavior and scrollamount. Examples are given for different directions and behaviors of the marquee tag.

Uploaded by

19-59414
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
21 views13 pages

Comp6 Module 5 1st Quarter

The document discusses HTML image and marquee tags. It explains how to insert images into webpages using the <img> tag and provides examples of image attributes like height, width, border, vspace and hspace. It also covers the <marquee> tag for creating scrolling text, and describes attributes like direction, behavior and scrollamount. Examples are given for different directions and behaviors of the marquee tag.

Uploaded by

19-59414
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 13

Lesson 5–HTML Image and Marquee

Lesson 5 -
HTML Image and Marquee

Expected Outcomes
At the end of the lesson, the learners should be able to:
1. Apply graphics to enhance the Web page output

Questions
to Ponder
In the beginning, the Web was just text, and it was really quite boring.
Fortunately, it wasn't too long before the ability to embed images (and other
more interesting types of content) inside web pages was added. There are
other types of multimedia to consider, but it is logical to start with the
humble <img> element, used to embed a simple image in a webpage. In this
lesson, we will first discuss the two main image types used on webpages: jpg
and gif. We will also learn the various ways on how to insert and customize
images, including the different alignments we can choose from.
“How do we put an image in HTML?”

Grade 6- Computer 33
Lesson 5–HTML Image and Marquee

The Concepts
that you want to insert. You can also create one
display
to your HTML. Some images on the Internet are in
the
public domain and can be used freely, but make
sure
that you use them legally.
There are different types of images filenames like
.gif, .jpg and so on. The most common images file
extensions used on the Internet are the .gif and
.jpg.
https://www.pinclipart.com/pindetail/ iTowibo_laptop-computer-woman-girl
If you have images in other file formats, you most
In order to display likely
clipart-girl-with-laptop/

images, pictures, or want to convert them to .gif or .jpg. This can be


graphics in done with most image editing programs.
a browser, use the Commonly used programs are Paint and
HTML tags, which is Photoshop.
the same as to
display text. You Keep in mind that the filename or address of the
must know the image is case sensitive. The
source of the image
“image.jpg” and “IMAGE.JPG” are considered two different images to
web browser. Be sure to use the correct case in your image or the
image may not show up.

Image:
<img>
The img element defines an image. In HTML the <img> tag has no end tag.
The html image is one of the highlights in designing a web, so it is very important
that you understand how to use them properly. Below is the syntax used in HTML.
What is URL?
URL stands for Uniform Resource Locator. URL stands for Uniform Resource
Locator. A URL is nothing more than the address of a given unique resource on the
Web. In theory, each valid URL points to a unique resource. Such resources can be
an HTML page, a CSS document, an image, etc. In practice, there are some
exceptions, the most common being a URL pointing to a resource that no longer
exists or that has moved. As the resource represented by the URL and the URL itself
are handled by the Web server, it is up to the owner of the web server to carefully
manage that resource and its associated URL.
To avoid error in typing the URL, you can copy it from the location of the
image. Here are ways on how you can do it:
1. Minimize the notepad program.
2. Open the folder or location of the image.
3. Right click the address bar then Copy.
4. Maximize the notepad program then right click to where you want to paste
the URL.

Adding Image from a Source


Grade 6- Computer 34
Lesson 5–HTML Image and Marquee

Code Meaning
<img src=”image.gif”> IMG stands for image
SRC stands for source

Example code and output:


<HTML>
<HEAD>
<TITLE>Insert Logo</TITLE>
</HEAD>
<BODY><img
src="C:\Users\lenovo\Pictures\classroom.jpg"> </BODY>
</HTML>
Image
Attributes
1. Height – modifies the height of the image
2. Width – modifies the height of the image
Example code and output:
<HTML>
Grade 6- Computer 35
Lesson 5–HTML Image and Marquee
<HEAD>
<TITLE>Insert Image Height </TITLE>
</HEAD>
<BODY>
<img
src="C:\Users\lenovo\Pictures\classroom.jpg"height=500>
</BODY>
</HTML>

3. Border – modifies the thickness of the border


Example code and output:
<HTML>
<HEAD>
<TITLE>Insert Image Border</TITLE>
</HEAD>
<BODY>
<img src="C:\Users\lenovo\Pictures\classroom.jpg"height=500
border=20> </BODY>
</HTML>

Grade 6- Computer 36
Lesson 5–HTML Image and Marquee
4. Vspace – adds vertical space in pixels
5. Hspace – adds horizontal space in pixels
Example code and output:
<HTML>
<HEAD>
<TITLE>Insert Image Border</TITLE>
</HEAD>
<BODY>
<img src="C:\Users\lenovo\Pictures\classroom.jpg"height=200 border=20
vspace=20 hspace=50>
</BODY>
</HTML>

Grade 6- Computer 37
Lesson 5–HTML Image and Marquee
The Marquee Tag <MARQUEE>
One of the best features of HTML is the marquee tag. It allows you to scroll
some text of your choice across the screen, and it doesn’t need JavaScript to make
it work. Marquee can format the color of the text background and size. The
<marquee> tag in HTML is used to create scrolling text or image in a webpage. It
scrolls either from horizontally left to right or right to left, or vertically top to bottom
or bottom to top. The marquee element comes in pairs. It means that the tag has
opening and closing elements.
Syntax: <MARQUEE>text</MARQUEE>
Output: text represent text or graphics to be moved.
To format the color of text, background, and size
Example Codes and Output:
<html>
<head>
<title>Marquee</title>
</head>
<body>
<MARQUEE LOOP="infinite" BGCOLOR="yellow" WIDTH="300">

Grade 6- Computer 38
Lesson 5–HTML Image and Marquee

I love myself...You Love yourself.


</MARQUEE>
</body>
</html>
Steps on how to marquee the text directions
Direction – refers where the containing text or graphic is moving toward
Left – moves text to the left from right
Right – moves text to right from left
Up- moves text upward
Down – moves text downward

Example Codes and Output:


<html>
<head>
<title>Marquee</title>
</head>
<body>
<marquee direction="left">

Grade 6- Computer 39
Lesson 5–HTML Image and Marquee

I love myself...You Love yourself..</MARQUEE>


<marquee direction="down">
I love myself...You Love yourself..</MARQUEE>
<marquee direction="left">
I love myself...You Love yourself..
<marquee direction="up">
I love myself...You Love yourself..</MARQUEE>
<marquee direction="right">
I love myself...You Love yourself..</MARQUEE>
</body>
</html>

Behavior – refers to the manner how text controls movement on screen


Scroll – move text across the screen to its designated direction
Slide – move text to designated direction until the edge of the screen and
bounce back from its original location
Alternate – move text through its designated direction and back alternately
You may try this sample code below to your computer or laptop to see how
the marquee tool works.

Grade 6- Computer 40
Lesson 5–HTML Image and Marquee

<html>
<head>
<title>Marquee</title>
</head>
<body>
<marquee behavior="scroll" direction="up" scrollamount="1">Slow
Scrolling</marquee>
<marquee behavior="slide" direction="right" scrollamount="12">Little Fast
Scrolling</marquee>
<marquee behavior="alternate" direction="left" scrollamount="20">Fast
Scrolling</marquee>
</body>
</html>

Additional Learning Resources


References:
Rahappan, Clarissa, G., et. al. (2007). Journey to Computer Learning 6. Jo-ES
Publishing.
https://developer.mozilla.org/en
US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML
https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_UR
L https://devmoods.blogspot.com/2021/06/web-development-course-3.html

Module Creator/Curator: Mrs. LIZA L. GARCIA


Template & Layout Designer: Mrs. Jeniffer M. Makalintal
Grade 6- Computer 41

You might also like