Study Material and Notes of Chapter 5 HTML II Computer Science Class 9th
HTML Lists
• Lists provide the information in a structured and easy to read format.
• There are three types of lists that you can use in HTML:
→ UL - creates an unordered or bulleted list
→ OL - creates an ordered or numbered list
→ DL - creates a definition or glossary list
• Unordered list <ul> ….</ul>
→ It classifies the data items that have equal importance i.e. none of the data items are ranked.
→ They are identified by a symbol which may be a □ square, a ○ circle or a ● disc.
→ The attribute TYPE helps in using the symbols to create a list. For example:
<ul type=”square”>
<ul type=”disc”>
→ This is a container tag.
→ It has both the opening and the closing tag but the closing tag is optional.
→ The listing is created under it using the <li> tag which is a container tag.
• Ordered list <ol> ... </ol>
→ It classifies the data items that do not have equal importance. it. all the data items are ranked.
→ The ranking can be done using the numbers, the roman letter or alphabets. The default symbol is number.
→ The attribute TYPE changes the symbol used with the list. For example:
<ol type = “a”>
→ The attribute START begins the list with value specified. For example:
<ol start=”4” >
→ This is a container tag.
→ It has both the opening and the closing tag but the closing tag is optional.
→ The listing is created under it using the <li> tag which is a container tag.
• Definition term lists <dl> …. </dl>
→ These are the list elements that have a variety of tags.
→ The list prepared by <dl> tag is similar to a dictionary.
→ The other tags used with this are <dt> to define the definition term and <dd: for the definition of the list item. Example:
<dl>
<dt>clairvoyance</dt>
<dd>French word for ability to see events in the future.</dd>
</dl>
→ The opening <dl> tag starts the definition list.
→ The container <dt> tag opens the definition terms
→ The container tag <dd> presents the definition description below definition term slightly right tabbed.
Image
→ The image in a web page is a drawing painted through paintbrush or a photograph taken through a digital camera or a clipart.
→ There are 2 types of types of images.
i) inline image: shown when the webpage is opened in the browser.
ii) external image: shown only when demanded by the user by clicking on a link.
• Inserting an inline image to the webpage
→ We can insert an image using the <IMG> tag.
→ This tag does not have an end tag.
→ Syntax:
<img src = “ address or the path to the image file” width= “ ” height= “ ” alt= “ ” longdesc= “htmlfilename”>
• Attributes of <img> tag: 'src, width, height, alt, longdesc, align.
→ The address or the path to the image is taken as value by SRC attribute.
The different addresses that can be accepted by SRC attribute are:
♠ If you have saved “Flower.jpg” in “Documents” folder, then the address would be: “C:\My
documents\My Pictures\Flower.jpg”
♠ If you have saved “Flower.jpg” in the same folder as the HTML document, then the address
would be: “Flower.jpg”
♠ If “Flower.jpg” is not in your computer but is saved in folder ‘images’ of the Web server
of yahoo, then the address would be: “http://www.yahoo.com/images/flower.jpg”
→ The width and the height attribute defines the boundaries of image.
→ The value can be an absolute number (recognized as pixels) or in percentage (in proportion to the size of web window).
→ When the image does not get download (due to slow internet connection, heavy traffic or unsupportive browser), the “alt” attribute give a description of the image.
→ If the description is too long, you can even attach an html file, in another attribute called
“longdesc”. This attribute is complementary to “alt” attribute.
→ The “align” attribute to place the image on left or right side of the webpage.
→ If the align attribute is set to left, the image floats to the left margin. If it is set to right,
the image floats to the right margin.
→ For Example:
<img src=”flower.jpg” alt=”White Roses” width=”32” height=”21” align=”left”>
• Inserting external image
→ Why external image required:
♠ When the image formats like BMP or PICT are not supported by the browsers.
♠ When an image is to be viewed in text-only browser.
♠ When you want to see the larger size of the inline image.
→ The external image can be inserted on the webpage using an anchor tag.
Inserting audio or video
→ The audio and video can be inserted using a plug-in.
→ A plug-in is a small computer program that extends the standard functionality of the browser.
→ We can insert such plug-in using the <embed> tag which acts as container to non- HTML resource.
• The <embed> element to insert audio
→ The <embed> tag defines a container for external (non-HTML) content.
→ The non-HTML contents are sound effects, the video clips and moving pictures. contents.
→ Example to embed a MP3 file in the webpage:
<embed height=”50” width=”100” src=”titanic.mp3”>
• <audio> tag attribute
→ The “autoplay” attribute of <audio> tag specifies that the audio will start playing as soon as it
is ready.
→ Example:
<audio controls autoplay>
<embed height=”50” width=”100” src=”titanic.mp3”>
</audio>
• Inserting video
→ A video file is recognized by the extension .mp4 or .avi.
→ We can insert the video movie using <embed> tag.
→ To place the player in the center of webpage use <center> tag. Example:
<body>
<center>
<embed height=”250” width=”320” src=”movie.mp4”>
<br> <hr>
</center>
</body>
• Inserting video using “control” attribute
→ The “control” attribute specifies that video controls should be displayed (such as a play/
pause button etc). Example:
<body>
<center>
<video controls>
<embed height=”250” width=”320” src=”movie.mp4”>
</video>
</center>
</body>
• Inserting video using “preload” attribute
→ "preload" attribute was formerly known as “autobuffer” and it was an boolean attribute as
“controls”.
♠ none - do not buffer video file automatically.
♠ metadata - only buffer the metadata of video
♠ auto - buffer video file before it gets played.
→ Example:
<body>
<center>
<video controls preload=”none”>
<embed height=”250” width=”320” src=”movie.mp4”>
</video>
</center>
</body>
Linking
→ Linking means connecting two or more webpages via text or picture.
→ This linking is done using an anchor element in HTML.
• Anchor element: <a> ….. </a>
→ An anchor element is used to create a hyperlink in a webpage.
→ An anchor element consists of three parts.
→ The start tag <a> containing the attribute like href (mandatory), target (optional), name (optional)
→ The text or the image to be hyperlinked
→ The end tag </a>.
→ Basic syntax of <anchor tag
<a href = “Address of the supporting web page”
target = “_blank or _top”
name = “text”>
text acting as hyperlink
</a>
• The attributes of anchor tag are href, name and target.
→ HREF: The meaning of href is hypertext reference. The href attribute takes the value as the address of the supporting document. Both the relative and the absolute links can act as values to the href attribute. This attribute is mandatory in anchor tag.
♠ Example:
<a href =”http://www.w3.org/”>website of W3C</a>
→ TARGET: The target attribute helps in opening a web page. The value “_blank” opens the webpage in a new browser window. The value “_top” opens the linked webpage in the currently active browser window.
♠ Example:
<a href=”http://www.google.com” target=”_blank”>Search Engine</a>
→NAME: This attribute gives a name to the anchor tag. This attribute takes the value as “text string”. This helps in linking to a specific section within the webpage that has been named.
♠ Example:
<A name=”salessection”>Sales Order Set Up</A>
→ To link to a named anchor, add a hash mark (#) to the end of the URL of the webpage followed by the name of the section, it will open.
♠ Example: To link to a section named “salessection” within the page called namedexample.html,
the following code is used:
<A href=”namedexample.html#salessection”>Sales</A>
♠ Example: To link to the salessection in our existing webpage, the following code is to be used:
<A href=”#salessection”>Sales</A>
Absolute Link and Relative Link
→ Absolute Link: Abosulte link contains a full URL which includes both the protocol name i.e. “http” and the hostname i.e. www.w3.org. It is used to link to a page on another Web site.
→ Relative Link: This link can only link to a page from the same site. The href would be just “page1.html” to linking to a page in the same folder.
♠ Example:
<a href=”page1.html”>
Email Link
→ To create e-mail link start the value with “mailto:” rather than http://, with your e-mail address rather than a web address.
♠ Example: To create an email link to yourself:
<A href=”mailto:myself@gmail.com”>E-mail to myself!</A>
Image as Link
→ Basic syntax to create an image link:
<ul type=”square”>
<ul type=”disc”>
→ This is a container tag.
→ It has both the opening and the closing tag but the closing tag is optional.
→ The listing is created under it using the <li> tag which is a container tag.
• Ordered list <ol> ... </ol>
→ It classifies the data items that do not have equal importance. it. all the data items are ranked.
→ The ranking can be done using the numbers, the roman letter or alphabets. The default symbol is number.
→ The attribute TYPE changes the symbol used with the list. For example:
<ol type = “a”>
→ The attribute START begins the list with value specified. For example:
<ol start=”4” >
→ This is a container tag.
→ It has both the opening and the closing tag but the closing tag is optional.
→ The listing is created under it using the <li> tag which is a container tag.
• Definition term lists <dl> …. </dl>
→ These are the list elements that have a variety of tags.
→ The list prepared by <dl> tag is similar to a dictionary.
→ The other tags used with this are <dt> to define the definition term and <dd: for the definition of the list item. Example:
<dl>
<dt>clairvoyance</dt>
<dd>French word for ability to see events in the future.</dd>
</dl>
→ The opening <dl> tag starts the definition list.
→ The container <dt> tag opens the definition terms
→ The container tag <dd> presents the definition description below definition term slightly right tabbed.
Image
→ The image in a web page is a drawing painted through paintbrush or a photograph taken through a digital camera or a clipart.
→ There are 2 types of types of images.
i) inline image: shown when the webpage is opened in the browser.
ii) external image: shown only when demanded by the user by clicking on a link.
• Inserting an inline image to the webpage
→ We can insert an image using the <IMG> tag.
→ This tag does not have an end tag.
→ Syntax:
<img src = “ address or the path to the image file” width= “ ” height= “ ” alt= “ ” longdesc= “htmlfilename”>
• Attributes of <img> tag: 'src, width, height, alt, longdesc, align.
→ The address or the path to the image is taken as value by SRC attribute.
The different addresses that can be accepted by SRC attribute are:
♠ If you have saved “Flower.jpg” in “Documents” folder, then the address would be: “C:\My
documents\My Pictures\Flower.jpg”
♠ If you have saved “Flower.jpg” in the same folder as the HTML document, then the address
would be: “Flower.jpg”
♠ If “Flower.jpg” is not in your computer but is saved in folder ‘images’ of the Web server
of yahoo, then the address would be: “http://www.yahoo.com/images/flower.jpg”
→ The width and the height attribute defines the boundaries of image.
→ The value can be an absolute number (recognized as pixels) or in percentage (in proportion to the size of web window).
→ When the image does not get download (due to slow internet connection, heavy traffic or unsupportive browser), the “alt” attribute give a description of the image.
→ If the description is too long, you can even attach an html file, in another attribute called
“longdesc”. This attribute is complementary to “alt” attribute.
→ The “align” attribute to place the image on left or right side of the webpage.
→ If the align attribute is set to left, the image floats to the left margin. If it is set to right,
the image floats to the right margin.
→ For Example:
<img src=”flower.jpg” alt=”White Roses” width=”32” height=”21” align=”left”>
• Inserting external image
→ Why external image required:
♠ When the image formats like BMP or PICT are not supported by the browsers.
♠ When an image is to be viewed in text-only browser.
♠ When you want to see the larger size of the inline image.
→ The external image can be inserted on the webpage using an anchor tag.
Inserting audio or video
→ The audio and video can be inserted using a plug-in.
→ A plug-in is a small computer program that extends the standard functionality of the browser.
→ We can insert such plug-in using the <embed> tag which acts as container to non- HTML resource.
• The <embed> element to insert audio
→ The <embed> tag defines a container for external (non-HTML) content.
→ The non-HTML contents are sound effects, the video clips and moving pictures. contents.
→ Example to embed a MP3 file in the webpage:
<embed height=”50” width=”100” src=”titanic.mp3”>
• <audio> tag attribute
→ The “autoplay” attribute of <audio> tag specifies that the audio will start playing as soon as it
is ready.
→ Example:
<audio controls autoplay>
<embed height=”50” width=”100” src=”titanic.mp3”>
</audio>
• Inserting video
→ A video file is recognized by the extension .mp4 or .avi.
→ We can insert the video movie using <embed> tag.
→ To place the player in the center of webpage use <center> tag. Example:
<body>
<center>
<embed height=”250” width=”320” src=”movie.mp4”>
<br> <hr>
</center>
</body>
• Inserting video using “control” attribute
→ The “control” attribute specifies that video controls should be displayed (such as a play/
pause button etc). Example:
<body>
<center>
<video controls>
<embed height=”250” width=”320” src=”movie.mp4”>
</video>
</center>
</body>
• Inserting video using “preload” attribute
→ "preload" attribute was formerly known as “autobuffer” and it was an boolean attribute as
“controls”.
♠ none - do not buffer video file automatically.
♠ metadata - only buffer the metadata of video
♠ auto - buffer video file before it gets played.
→ Example:
<body>
<center>
<video controls preload=”none”>
<embed height=”250” width=”320” src=”movie.mp4”>
</video>
</center>
</body>
Linking
→ Linking means connecting two or more webpages via text or picture.
→ This linking is done using an anchor element in HTML.
• Anchor element: <a> ….. </a>
→ An anchor element is used to create a hyperlink in a webpage.
→ An anchor element consists of three parts.
→ The start tag <a> containing the attribute like href (mandatory), target (optional), name (optional)
→ The text or the image to be hyperlinked
→ The end tag </a>.
→ Basic syntax of <anchor tag
<a href = “Address of the supporting web page”
target = “_blank or _top”
name = “text”>
text acting as hyperlink
</a>
• The attributes of anchor tag are href, name and target.
→ HREF: The meaning of href is hypertext reference. The href attribute takes the value as the address of the supporting document. Both the relative and the absolute links can act as values to the href attribute. This attribute is mandatory in anchor tag.
♠ Example:
<a href =”http://www.w3.org/”>website of W3C</a>
→ TARGET: The target attribute helps in opening a web page. The value “_blank” opens the webpage in a new browser window. The value “_top” opens the linked webpage in the currently active browser window.
♠ Example:
<a href=”http://www.google.com” target=”_blank”>Search Engine</a>
→NAME: This attribute gives a name to the anchor tag. This attribute takes the value as “text string”. This helps in linking to a specific section within the webpage that has been named.
♠ Example:
<A name=”salessection”>Sales Order Set Up</A>
→ To link to a named anchor, add a hash mark (#) to the end of the URL of the webpage followed by the name of the section, it will open.
♠ Example: To link to a section named “salessection” within the page called namedexample.html,
the following code is used:
<A href=”namedexample.html#salessection”>Sales</A>
♠ Example: To link to the salessection in our existing webpage, the following code is to be used:
<A href=”#salessection”>Sales</A>
Absolute Link and Relative Link
→ Absolute Link: Abosulte link contains a full URL which includes both the protocol name i.e. “http” and the hostname i.e. www.w3.org. It is used to link to a page on another Web site.
→ Relative Link: This link can only link to a page from the same site. The href would be just “page1.html” to linking to a page in the same folder.
♠ Example:
<a href=”page1.html”>
Email Link
→ To create e-mail link start the value with “mailto:” rather than http://, with your e-mail address rather than a web address.
♠ Example: To create an email link to yourself:
<A href=”mailto:myself@gmail.com”>E-mail to myself!</A>
Image as Link
→ Basic syntax to create an image link:
<a href=”address of the file to be opened when you click on the image”>
<img src=“address of the image file” alt=”text to be displayed when image is not loaded”>
</a>
♠ The attribute src in <img> tag takes the value of the address to the image.
♠ The href attribute takes the value of the address of the HTML document that will be loaded when we click on the image.
Colors of the Link
→ We can set the color of text that acts as a link using <body> tag. Basic syntax is:
<body link =”#hexadecimal code of the color or the nameofcolor”
vlink=”#hexadecimal code of the color or the nameofcolor “
alink=”#hexadecimal code of the color or the nameofcolor “>
♠ The link attribute in the <body> tag is a standard link. It is a text link that has not been clicked by the user, yet
♠ The vlink attribute in the <body> tag is a visited link. It is a text link that has been clicked by user at least once.
♠ The alink attribute in the <body> tag is an active link. It is a text link that may change its color when the user brings the mouse over it.
→ Example: To set the color of the link to red, alink to green and vlink to pink
<BODY link=”red” alink=”green” vlink=”pink”>
→ Example: To use a hexadecimal number for the above colors
<body link=”#FF0000” alink =”#04B45F” vlink =”#FF00FF” >