COMPUTER SCIENCE
SUBJECT NAME : WEB TECHNOLOGY
CHAPTER NO : 1
CHAPTER NAME : HTML TAGS
LECTURE NO : 2
<dfn> tag
⚫ The <dfn> tag stands for the "definition element", and it
specifies a term that is going to be defined within the content.
⚫ The content inside the <dfn> tag is displayed as Italic
<span> tag
⚫ The <span> tag is an inline container used to mark up a part
of a text, or a part of a paragraph or division.
⚫ The <span> tag is easily styled by CSS or manipulated with
JavaScript using the class or id attribute.
HTML Quotation and Citation Elements
⚫ <blockquote> element defines a section that is quoted
from another source.
⚫ <q> tag defines a short quotation.
⚫ <cite> tag defines the title of a creative work
⚫ <abbr> tag defines an abbreviation or an acronym
⚫ <address> tag defines the contact information or
signature for the author/owner of a document or an
article.
⚫ <bdo> tag is used to override the current text direction
<blockquote> and <q>
abbr, cite, address, bdo
<kbd> and <pre>
⚫ <kbd> tag is used to define keyboard input. The content inside is
displayed in the browser's default monospace font.
⚫ <pre> tag defines preformatted text, the text preserves both spaces
and line breaks. The text will be displayed exactly as written in the
HTML source code.
<code>, <samp>, <var> tags
⚫ <code>
⚫ The <code> tag is used to define a piece of computer program code.
The content inside is displayed in the browser's default monospace
font.
⚫ <samp>
⚫ The <samp> tag is used to define sample output from a computer
program.
⚫ <var>
⚫ The <var> tag is used to defines a variable in programming or in a
mathematical expression. The content inside is typically displayed in
italic.
<code>, <samp>, <var> tags
- Example
Display an Image
⚫ The HTML <img> tag is used to embed an image in a web page.
⚫ The <img> tag creates a holding space for the referenced image.
⚫ The <img> tag is empty, it contains attributes only, and does not
have a closing tag.
⚫ The <img> tag has attributes:
⚫ src - Specifies the path to the image
⚫ alt - Specifies an alternate text for the image if image is not able to
display due to any error.
⚫ width – Specifies the width of the image
⚫ height – Specifies the height of the image
Display an Image
<figure> and <figcaption> tag
Display image from Internet
⚫ To display the image from internet, copy the image address from any
internet source. [Internet connection is mandatory]
⚫ Then, give the image address in src attribute.
Display data in List format
⚫ HTML lists allow web developers to group a set of related
items in lists.
⚫ Types of List in HTML
⚫ Ordered List
⚫ Unordered List
⚫ Description List
Display data in List format
⚫ Ordered List
⚫ An ordered list starts with the <ol> tag. Each list item starts
with the <li> tag.
⚫ The list items will be marked with numbers by default:
Display data in List format
⚫ Ordered List – Change the start value and type marker
⚫ Attributes: start, type= 1,A,a,I,i
Display data in List format
⚫ Ordered List – Change the start value and type marker
⚫ Attributes: start, type= 1,A,a,I,i
Display data in List format
⚫ Unordered List
⚫ The <ul> tag defines an unordered (bulleted) list.
⚫ Use the <ul> tag together with the <li> tag to create unordered lists.
Display data in List format
⚫ Unordered List
⚫ The <ul> tag has attribute called type to change the bulletin mark.
⚫ type may be disc(default), circle, or square
Display data in List format
⚫ Description List
⚫ A description list is a list of items with a description or definition of each item. The
description list is created using <dl> element.
⚫ The <dl> element is used in conjunction with the <dt> element which specify a term, and
the <dd> element which specify the term's definition.
Nested Lists
⚫ A list inside another list is called as nested list.
<ol>
<li>BreakFast
<ul>
<li>Dosai</li>
<li>Idly</li>
</ul>
</li>
<li>Lunch
<ul>
<li>White Rice</li>
<li>Briyani</li>
</ul>
</li>
<li>Dinner
<ul>
<li>Chappathi</li>
<li>Parotta</li>
</ul>
</li>
</ol>
<ul>
<li>BreakFast Nested List – Unorder List
<ul>
<li>Dosai - Bulletin style changes automatically
<ul>
<li>Gee Roast</li>
<li>Plain Roast</li>
</ul>
</li>
<li>Idly
<ul>
<li>Mini Idly</li>
<li>Normal Idly</li> Here, the bullet style starts with
</ul> disc(for root ul), then change to
</li> circle for the first nested ul list,
</ul>
</li> then again changes to square
<li>Lunch for second nested ul list.
<ul>
<li>White Rice</li>
<li>Briyani</li>
</ul>
</li>
<li>Dinner
<ul>
<li>Chappathi</li>
<li>Parotta</li>
</ul>
</li>
</ul>
