UNIT II
Introduction of HTML
2.1 Structure of HTML
2.2 What is Tags & attributes of HTML
2.3 Create web page using Headings, Paragraph, BR & HR
2.4 Image Tag
2.5 Marquee Tag
2.1 Structure of HTML document and Basic Tags:
Structure of HTML:
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
</head>
<body>
This is a basic structure of HTML document.
</body>
</html>
<!DOCTYPE html>
It is a line containing HTML version information. A valid HTML document declares
what version of HTML is used in the document. The document type declaration names
the document type definition (DTD) in use for the document.
Basic Tags:
There are four basic tags: 1.<HTML>, 2.<HEAD>, 3.<TITLE>, 4.<BODY>
1. <HTML> :
<HTML> tag is a main tag contains all other tags which is a structure and
skeleton of HTML code.
The first tag in your html document is <html>. This tag tells your browser that
this is the start of a html document.
The last tag in your document is </html>. This tag tells your browser that this is
the end of the html document. This is the standard structure tag of an HTML.
Make sure that you use <HTML> element at once in whole html page it never
repeats and placed in between code more than one time.
It is compulsory kind of tag to make web page. Html contains all other basic tags
which is head, title, body.
2. <HEAD> :
The <head> element is just a container for all other header elements. It
should be the first thing to appear after the opening <html> tag. <head> element
should contain a <title> element indicating the title of the document.
Other tag under head: <script>, <style>, <link>.
3. <TITLE> :
<TITLE> tag is used to display webpage title name. Page titles are very useful
to know just what subject data is on your website. There can only be one title per
page.
Please note that this is one of the tags that will go within the HEAD tags. It
displays at the very top of a browser window.
4. <BODY> :
The <body> element appears after the <head> element and contains the part of
the Web page that you actually see in the main browser window, which is
sometimes referred to as body content.
All tags which apply some effects to text, image or anything that means
everything you seen and appearing on web page that are placed between under
<body> tag and </body> tag.
2.2 What is Tags & attributes of HTML
What is Tag?
Tag is an instruction given to web browser to show formatted data in webpage.
Following are types of tags.
1) Singular (Unpaired) tag: this type of tag consists of only starting tag to provide single
action. Some tag don’t require end tag because they don’t have enclosed content.
Ex: <BR>, <HR> tag.
2) Paired tag: this type of tag consist of start tag & respectively end tag to define the
scope.
Start tag is a symbol for surrounded by angle bracket’s <HTML> & end tag is
represented by forward slash within angle bracket such as </HTML>.
Ex: <h1> Home </h1> or <p>paragraph</p>
What is Attributes?
Attributes are the sub part of a tag, it used to change the default effect of the tag. Each
tag having their own list of attributes. An attribute of one tag cannot used to another
tag. Tags can also have attributes, which are extra bits of information. Attributes appear
inside the opening tag only and their value followed by = sign is always inside double
quotation marks “ ”.
Attributes of the body tag
1) bgcolor This attribute sets the background color of webpage.
Ex: <body bgcolor=”yellow”>
2) text This attribute sets the color for all text of the webpage.
Ex: <body text="red" >
2.3 Create web page using Headings, Paragraph, BR & HR
Heading tag -
The heading tags are the most important tag to apply formatting the text. This tag applies
different level of headings and sub headings to the text. A biggest heading is created by
using <H1> tag and the smallest heading is created by <h6> tag. There are total 6
different heading tags are there from <h1> to <h6>.
They are <h1>, <h2>, <h3>, <h4>, <h5> and <h6>
Program: Output:
<html>
<head>
<title>Headings</title>
This is a Biggest heading
</head>
<body>
This is a Big heading
<h1>This is a Biggest heading </h1>
<h2>This is a Big heading </h2> This is a Heading
<h3>This is a Heading </h3>
This is a Sub heading
<h4>This is a Sub Heading </h4>
<h5>This is a Small Heading </h5> This is a small heading
<h6>This is a Smallest Heading </h6> This is a smallest heading
</body>
</html>
Paragraph Tag: <P>
The paragraph tags are used to define a block of text as a paragraph.
When a block of text is surrounded by the paragraph tags, the browser
automatically adds new line before and after the paragraph text.
The <p> element offers a way to structure your text. Each paragraph of text
should go in between an opening <p> and closing </p> tag
<p>The contents of the paragraph.</p>
Paragraph tag is basic text formatting tag which specifically used to create
multiple line of text.
Attribute:
align – Align is used to apply aligning to the text as left, right, center, justify.
1. Left: By default all text of the paragraph set to align left to the page.
2. Right: The alignment of the All content of the paragraph will set to right side
of the page.
3. Center: The alignment of the All content of the paragraph will set to center
side of the page.
4. Justify: The alignment of the All content of the paragraph will set to both left
and right side of the page.
Example: <p align=”justify”>Paragraph Content</p>
<br> Tag:
HTML <br> tag is a powerful tool for controlling the layout of your text. Unlike word
processors, web browsers don’t automatically recognize new lines or paragraph
formatting. This is where the <br> tag comes into use.
The <br> tag is a singular tag or self-closing element, meaning it doesn’t require a closing
tag. It’s commonly used in addresses, poetry, or any situation where a line break is needed
for better readability.
Note: The <br> tag also supports the Global Attributes and Event Attributes in HTML.
Syntax:
<br>
Program: Output
<html>
<head> This is demonstation text
<title>BR tag</title> for break tag.
</head>
<body>
This is demonstation text <br> for break
tag.
</body>
</html>
Horizontal Rule -<hr>
The HTML <hr> tag represents the page break with horizontal line between
paragraph level elements (for example, a change of scene in a story, or a shift of topic
with a section).
In HTML, it represented a horizontal rule. It may still be displayed as a horizontal
rule in visual browsers, but is now defined in thematic break terms, rather than
presentational terms.
It is a singular tag so no need to apply close tag.
Tag <hr> must have start tag, but must not have an end tag.
No. Attribute Description
1. Color Sets the color of the rule through color name or hexadecimal value.
2. Size Sets the height, in pixels or percentage, of the rule.
3. Width Sets the length of the rule on the page through a pixel or percentage
value.
4. Align Sets the alignment of the rule on the page. If no value is specified, the
default value is center.
Note: Do not use align when width of rule line is 100%.
Example:
<p>This is the first paragraph of text.</p>
<hr color=”red” size=”10%” width=”50%” align=”left”>
<p>This is second paragraph of text.</p>
Output:
This is the first paragraph of text.
This is second paragraph of text.
2.4 Image Tag
The image tag is used as <img>, it
is used to place an image in the web
page.
Example:
<img src="image1.jpg">
It is very important to understand
that images are separate files which
are inserted into the page content.
When we display an image in to
page, actually we deal with two
files first the HTML file and second
the image file.
Attributes of <img> tag:
1) Src (Source):
Src is the compulsory attribute of the image tag, which means source and tells the
browser where the image file is. Src use path of the image stored on local hard disk or
url of the image if it is placed at internet.
Src attribute includes three things:
1. Full Path/Location of image file stored on local disk. Such as D:/images
2. Name of the image. Such as wallpaper1
3. Extension or file type of the image such as .jpg or .png or .gif
All these three things must attached by / with each other such as follows:
D:/images/wallpaper1.jpg
Note:
1) If image and html webpage file both are stored on different location then path is
must. Ex: <img src="D:/images/wallpaper1.jpg">
2) If image and html webpage file both are stored on same folder location then no need
to use path in src attribute only use name of image and extension.
Ex: <img src="wallpaper1.jpg">
2) Alt:
Alt attribute define as alternate description of the image. It is a short piece of text which
appears instead of the image if the image cannot be displayed (for whatever reason).
Image not displayed in following situation:
If at the time of code writing some mistake happened in image path, name or
extension.
Image deleted or moved from origination location.
Poor internet connection.
<img src="image.jpg" alt="Description text of the image.">
3) Width:
The width attributes define the horizontally size of the image in width.
You can mention width attribute value either in Pixel or Percentage value such as
In Pixel: <img src="image.jpg" width="200">
In Percentage: <img src="image.jpg" width="30%">
4) Height:
The height attributes define the vertically size of the image in height.
You can mention height attribute value only in Pixel number such as
In Pixel: <img src="image.jpg" height="200">
5) Align:
You can use the align attribute to position the
image in left or right side of the webpage.
Ex: <img src="image.jpg" align="right">
When align=”right” attribute is used then image
will align at right side of the webpage and all
remaining area of the left size will utilized by other
content which is below to the image. Like this.
6) Border:
The border attribute places a border around the
image.
Ex: <img src="image.jpg" border="10">
Border value start from 0 means no border and can
increment from 1 to as per need.
The default color of the border is black.
Common Image Formats used in the Web:
There are some basic formats you will find on the Web.
1. .jpeg or .jpg: JPEG stands for Joint Photographic Experts Group
2. .gif: This stands for Graphics Interchange Format. It is animation image.
3. .png stands for Portable Network Graphic. This format support to remove
background of the image.
2.5 <Marquee> Tag:
This tag originally introduced in Internet Explorer specifies a scrolling, sliding, or
bouncing text marquee. Marquee tag is used as a animation tag to scroll, rotate, move,
slide a text or image or anything that contain <marquee> start tag and </marquee>
end tag in web page. Data can slide with horizontal and vertical direction using some
attributes.
Application Area:
Primarily Marquee tag is used to create news/announcement for school, college,
business and government websites.
Logo or image slider control can be created by this tag.
Image gallery slider control also created by this tag.
Scrolling advertisement image on webpage.
Attributes of the marquee tag:
1) behavior:
1. Scroll: Set by default, Marquee content continuously scrolling from right to left side
of the webpage
2. Slide: marquee content will scroll once and stays on page.
3. Alternate: It bounce back when touches the page margin from both side of the page
and create zig zag movement.
Ex. <marquee behavior=”scroll”> Marquee Text/Image </marquee>
2) direction:
Sets the direction of the scrolling within the marquee. Possible values are
1.Left 2. Right 3. Up 4.Down
If no value is specified, the default value is left.
Ex. <marquee direction=”down”>Marquee Text/Image</marquee>
3) loop:
Sets the number of times the marquee will attempt to scroll on page. If loop=”3” set to
marquee then Marquee Text/Image will appear/rotate 3 times on page and then
disappears permanently.
Ex. <marquee loop=”3”> Marquee Text/Image </marquee>
4) scrollamount:
scrollamount is used to increase the speed of the marquee text. It sets the amount of
scrolling speed for marquee text. The default speed value is 6, Use more than 6 for faster
speed, if value gives less than 6 then it slows down the speed.
Ex. <marquee scrollamount=”50”>Faster Marquee Text/Image</marquee>
5) scrolldelay:
scrolldelay is used to slower the speed of marquee. It increase the delays of the
marquee, means if we increase delay it slows down. As much as increase the value it
slower the marquee.
Ex. <marquee scrolldelay="250">DELAYED TEXT</marquee>
Events:
Events are used to catch the user’s activity on the webpage. We can stop the movement
of the marquee when user move mouse cursor on marquee text/image by using
onmouseover and can restart the marquee movement again when user move aside cursor
from marquee using onmouseout event.
<marquee onmouseover=”stop()” onmouseout=”start()”>Marquee Text/Image</marquee>
