COMPUTER SCIENCE
SUBJECT NAME : WEB TECHNOLOGY
CHAPTER NO : 1
CHAPTER NAME : HTML TAGS
LECTURE NO : 3
<marquee> tag
⚫ <marquee> tag is used for scrolling piece of text or
image displayed either horizontally across or vertically
down your web site page.
<marquee> tag
- Example
<body>
<marquee>
Flash News! University Exams are postponed
</marquee>
</body>
<marquee> tag attributes
⚫ bgcolor – to set the background color
⚫ behavior
⚫ scroll - scroll from right to left
⚫ slide - scroll from right and it will be sticky at left side
⚫ alternate – scrolling done alternatively
<body>
<marquee bgcolor=“yellow” behavior=“alternate” >
Flash News! University Exams are postponed
</marquee>
</body>
<marquee> tag attributes
⚫ direction – scroll direction such as up, down, left, right
⚫ loop – Specifies how many times to loop.
⚫ width - Defines the width of marquee.
⚫ height - Defines the height of marquee.
<body>
<marquee bgcolor=“yellow” width="500" height="200" direction="up">
Flash News! University Exams are postponed
</marquee>
</body>
HTML Links(Hyperlink)
⚫ Links are found in nearly all web pages.
⚫ Links allow users to click and navigate from page to page.
⚫ Also, called as Hyperlinks or Anchors
⚫ By default, links will appear as follow in most of the browsers:
• An unvisited link is underlined and blue.
• A visited link is underlined and purple.
• An active link is underlined and red.
Hyperlink vs Hypertext vs Hypermedia
⚫ Hyperlink is an element of a website by clicking on which we
can jump from one page to the other.
⚫ Hypertext and Hypermedia, are the techniques for linking
non-linear information.
⚫ Hypertext allows only text to be hyperlinked
⚫ Hypermedia could use various multimedia elements such as images,
audio and video, in order to link the text and media over the World Wide
Web.
⚫ However, hypertext is a part of the hypermedia as hypermedia includes text,
image, audio, video, etc
Creating HTML Links
- <a> tag (anchor tag)
⚫ Links are specified in HTML using the <a> tag.
<a href="url">Link text</a>
⚫ Anything between the opening <a> tag and the closing </a> tag becomes the
part of the link that the user sees and clicks in a browser.
External Links:
<a href="https://www.google.com/">Google Search</a>
Internal Links:
<a href="home.html">Home Page</a>
Image Links
<a href="kites.jpg">
<img src="kites-thumb.jpg" alt="kites">
</a>
Links
Navigating Hyperlink using accesskey attribute
⚫ The accesskey attribute specifies a shortcut key to
activate/focus an element.
⚫ The accesskey attribute value must be a single character (a
letter or a digit).
⚫ The way of accessing the shortcut key element is varying in different
browsers:
⚫ Chrome - press alt + accesskey
⚫ Firefox – press alt + shift + accesskey
⚫ Internet Explorer - press alt + accesskey
Navigating Hyperlink using accesskey attribute
<body>
Press <kbd>Alt+G or click link to view Google</kbd>
<a href='http://www.google.com' accesskey='g'>Google</a>
</body>
When you press Alt + g
Link to email and phone number
When user click Email, it opens a email client
application such as ourlook, gmail app.
When user click the ‘Call’ link it opens a dialer
application(works in smartphone)
Creating Bookmark Links
⚫ Using id attribute
Creating Bookmark Links
⚫ Link another page bookmark
abc.html
Iframe – Inline Frames
⚫ The <iframe> tag specifies an inline frame.
⚫ An inline frame is used to embed another document or page
within the current HTML document.
<iframe src=‘’ width=‘’ height=‘’> </iframe>
⚫ Attributes:
⚫ src – path of another page or document(txt,doc,pdf etc..)
⚫ width – width in pixels
⚫ height – height in pixels
Example for iframe
<body>
<iframe src="coffee.html" width="600" height="300"></iframe>
<iframe src="https://www.keralauniversity.ac.in/" width="600" height="300"></iframe>
<iframe src="https://www.manifoldkerala.com/" width="600" height="300"></iframe>
<iframe src="syllabus.pdf" width="600" height="300"></iframe>
</body>
HTML Links - The target Attribute
⚫ By default, the linked page will be displayed in the current browser window.
⚫ To change this, you must specify another target for the link.
⚫ The target attribute specifies where to open the linked document.
⚫ The target attribute can have one of the following values:
⚫ _self - Default. Opens the document in the same window/tab as it was
clicked
⚫ _blank - Opens the document in a new window or tab
⚫ _parent - Opens the document in the parent frame
⚫ _top - Opens the document in the full body of the window
HTML Links - The target Attribute
Understanding target
<a href=‘’ target=‘’>click</a>
Image map element
⚫ The <map> tag is used to define an image map. An image map is an
image with clickable areas.
⚫ The <map> element contains a number of <area> elements, that
defines the clickable areas in the image map.
Rectangle clickable area Circle clickable area
Image map element
- Procedure
1. Create an Image
The image is inserted using the <img> tag. The only difference from other images is that you
must add a usemap attribute:The usemap value starts with a hash tag # followed by the name
of the image map, and is used to create a relationship between the image and the image map.
<img src="workplace.jpg" usemap="#workmap">
2. Create Image Map
The <map> element is used to create an image map, and is linked to the image by using the
required name attribute:The name attribute must have the same value as the <img>'s usemap
attribute .
<map name="workmap">
3. Create Clickable Area
A clickable area is defined using an <area> element inside <map> element. It contains 3
attributes such as shape, coords, and href.
<area shape="rect" coords="34, 44, 270, 350" href="computer.htm">
shape=‘rect’
The coordinates 34,44 is located The coordinates 270,350 is located
34 pixels from the left margin and 270 pixels from the left margin and
44 pixels from the top: 350 pixels from the top
<area shape="rect" coords="34, 44, 270, 350" href="computer.html">
shape=‘circle’
To add a circle area, first Then specify the radius of the
locate the coordinates of the circle: 44 pixels
center of the circle: 337,300
<area shape="circle" coords="337, 300, 44" href="coffee.htm">
Image map – Full Program
<img src="workplace.jpg" usemap="#workmap">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" href="https://www.apple.com/in/macbook-pro-13/">
<area shape="rect" coords="290,172,333,250" href="https://www.apple.com/buy-iphone/iphone">
<area shape="circle" coords="337,300,44" href="coffee.html">
</map>
Image map with shape=poly
⚫ The shape="poly" contains several coordinate points, which creates a
shape formed with straight lines (a polygon).
shape=‘poly’
