UNIT4 HTML
Uploaded by
sm4163094UNIT4 HTML
Uploaded by
sm4163094UNIT-4: HTML & STRUCTURE WEB PAGE
UNIT-4: HTML & Structure Web Page
4.1 Introduction to HTML
4.1.1 HTML introduction
4.1.2 Structure of HTML page
4.1.3 HTML Comments
4.2 HTML Elements (<h1>…<h6>, <p>,<br>, <a>, <img>)
4.3 HTML Attributes (alt, href, src, width, height, style, title, id)
4.4 HTML Headings (<head>)
4.5 Text Formatting Tags(<b>, <strong>,<i>,<em>,<mark>,<small>,<del>,
<ins>,<sub>,<sup>)
HTML introduction
HTML stands for Hyper Text Markup Language.
Markup languages are designed for the processing, definition and presentation of
text on web.
The language specifies code for formatting, both the layout and style, within a text
file.
It´s a markup language that can be interpreted by different soft wares like a web
browser that reads and translates the HTML code and displays a webpage to the
user according to the commands given in the HTML code.
It is not a programming language.
The "World Wide Web Consortium” has developed the standards for HTML
An HTML document is structured with building blocks called tags and element,
which represent different parts of the document.
Structure of the HTML document
Header : this section consists of information which is only meant for the
declaration and which can be used within the document. This information is not
visible to the user. Only title for the document can be given here.
Body : the actual content of the website is written here.
Footer : used to give the author specific information, it is also irrelevant to the data
of website
<html>
<head>
</head>
<body>
JYOTI VERMA 1
UNIT-4: HTML & STRUCTURE WEB PAGE
</body>
</html>
HTML Comments
Comments are piece of code which is ignored by any web browser.
HTML Comment lines are indicated by the special beginning tag <!-- and ending
tag --> placed at the beginning and end of EVERY line to be treated as a comment.
This tag can be used for both single and multi line comment.
Example single line comment:
<!-- comment line -->
Example multi line comment:
<!-- line1 is commented
line2 is commented
line3 is commented
-->
Using Comment tag
There are few browsers who supports <comment> tag to comment a part of code.
Example : <p>This is <comment>not</comment> Internet Explorer.</p>
HTML Attributes (alt, href, src, width, height, style, title, id)
HTML Attributes
All HTML elements can have attributes
Attributes provide additional information about elements
Attributes are always specified in the start tag
Attributes usually come in name/value pairs like: name="value"
Id attribute
The id attribute specifies a unique id for an HTML element (the value must be
unique within the HTML document).
The id attribute is most used to point to a style in a style sheet, and by JavaScript
(via the HTML DOM) to manipulate the element with the specific id.
Syntax
<element id="id">
JYOTI VERMA 2
UNIT-4: HTML & STRUCTURE WEB PAGE
Example
<h2><a id="top">Someheading</a></h2>
HTML Elements (<h1>…<h6>, <p>,<br>, <a>, <img>)
Create Headings - The <hn> Elements
<H> is the element name that stands for "heading".
There are 6 levels of headings being 1 the biggest and 6 the smallest heading.
Syntax:
<hn> content </hn>
Where n van be any number between 1 to 6
If you think that the H1 level is too big, then use font sizes for headings
Example
<html>
<head>
<title>
Heading h1…..
</title>
</head>
<body>
<h1> Jyoti Verma </h1>
< /body>
</html>
<html>
<head>
<title>
All Headings ......
</title>
</head>
<body text="purple">
<h1>H1 - the biggest headline</h1>
<h1> Jyoti Verma </h1>
<h2>H2 - smaller than H1</h2>
JYOTI VERMA 3
UNIT-4: HTML & STRUCTURE WEB PAGE
<h2> Jyoti Verma </h2>
<h3>H3 - smaller than H2</h3>
<h3> Jyoti Verma </h3>
<h4>H4 - smaller than H3</h4>
<h4> Jyoti Verma </h4>
<h5>H5 - smaller than H4</h5>
<h5> Jyoti Verma </h5>
<h6>H6 - the smallest headline</h6>
<h6> Jyoti Verma </h6>
</body>
</html>
Paragraph <p>
You can divide the text in your web page into paragraphs.
The <p> tag is used for this purpose.
The syntax:
<p> content </p>
Each line specified with the <p> tag will begin on new line and a blank line will be
inserted by the browser in between paragraphs
Example:
<html>
<head>
<title>
Paragraph Example..........
</title>
</head>
<body>
<p>An eagle was sitting on a tree resting,
doing nothing. </p>
<p>A small rabbit saw the eagle and asked him, </p>
<p>"Can I also sit like you and do nothing?"</p>
</body>
</html>
JYOTI VERMA 4
UNIT-4: HTML & STRUCTURE WEB PAGE
The style Attribute
The style attribute is used to add styles to an element, such as color, font, size, and
more.
Example
<p style="color:red;">This is a red paragraph.</p>
The align atribute
You can use align attribute to align your paragraphs
Align attribute can take following values:
o left
o right
o center
o justify
example:
<html>
<head>
<title>
Paragraph Example with alignment..........
</title>
</head>
<body>
<p align="center">An eagle was sitting on a tree resting, doing nothing. </p>
<p align="left">A small rabbit saw the eagle and asked him, "Can I also sit like
you and do nothing?"</p>
<p align="justify">The eagle answered, "Sure , why not."
So the rabbit sat on the ground below the eagle and rested.
All of a sudden, a fox appeared, jumped on the rabbit and ate it. </p>
<p align="right">Moral of the story: To be sitting and doing nothing, you must be
sitting very, very high up.</p>
</body>
</html>
The title Attribute
The title attribute defines some extra information about an element.
The value of the title attribute will be displayed as a tooltip when you mouse over
the element:
Example
JYOTI VERMA 5
UNIT-4: HTML & STRUCTURE WEB PAGE
<p title="I'm a tooltip">This is a paragraph.</p>
<Br> tag
New line can be inserted without creating paragraph using <br> or <br/> tag
Example
<html>
<head>
<title>
New line example...........
</title>
</head>
<body>
An eagle was sitting on a tree resting, doing nothing. <br>A small rabbit saw
the eagle and asked him, "Can I also sit like you and do nothing?"
The eagle answered, "Sure , why not."<br>So the rabbit sat on the ground below the
eagle and rested.All of a sudden, a fox appeared, jumped on the rabbit and ate it.
<br>Moral of the story: To be sitting and doing nothing, you must be sitting very,
very high up.
</body>
</html>
<a> tag
Different pages of a website can be connected with one another through links
known as hyperlinks.
Links can take you directly to other pages and even specific parts of a given page
A link is specified using the <a> element called anchor tag.
Anything between the opening <a> tag and the closing </a> tag becomes part of
the link and a user can click that part to reach to the linked document.
It contains at least one attribute. For the function of linking to a different
document.
Most browsers display linked text as blue and underlined, and linked images with
a blue border.
JYOTI VERMA 6
UNIT-4: HTML & STRUCTURE WEB PAGE
Visited links generally display in purple. Users can change these colors in their
browser preferences, and, of course, you can change the appearance of links for
your sites using style sheets
The href Attribute
The href attribute specifies the URL of the page the link goes to.
href: specifies the URL of the target(destination) of a hyperlink.
Its value is any valid document URL, absolute or relative, including a fragment
identifier or a JavaScript code fragment.
Example
<a href="https://www.rofelbbabca.com">Visit ROFEL college</a>
Example
<html>
<head>
<title>
Working with links...........
</title>
</head>
<body >
<a href="p1.html"
target="_blank" >first page</a> |
<a href="p2.html"
target="_self" >Second page</a> |
<a href="p3.html"
target="_top" >third page</a>
</body>
</html>
<img> tag
You can insert any image in your web page by using <img> tag.
It is an empty element, which means it doesn’t have any content.
It is an inline element, so it behaves like any other inline element in the text flow
Syntax:
<img src="image URL“ alt=“text” />
JYOTI VERMA 7
UNIT-4: HTML & STRUCTURE WEB PAGE
The src Attribute
The src attribute specifies the path to the image to be displayed:
Example
<img src="rofelclg.jpg">
The src attribute tells the browser the location of the image file.
The alt Attribute
The required alt attribute for the <img> tag specifies an alternate text for an image,
if the image for some reason cannot be displayed. This can be due to a slow
connection, or an error in the src attribute, or if the user uses a screen reader.
Example
<img src="rofelclg.jpg" alt="ROFEL BCA College">
The alt attribute provides alternative text that displays if the image is not
available.
HTML Formatting Elements
Formatting elements were designed to display special types of text:
o <b> - Bold text
o <strong> - Important text
o <i> - Italic text
o <em> - Emphasized text
o <mark> - Marked text
o <small> - Smaller text
o <del> - Deleted text
o <ins> - Inserted text
o <sub> - Subscript text
o <sup> - Superscript text
Formatting Text as bold in an HTML
HTML has two different tags to set the text to a bold appearance. One is <b> and the
other one is <strong> while both produce similar output. The <b> tag is a physical tag,
only to display the text in bold, and it does not add any value of importance in the
browser.
Example
JYOTI VERMA 8
UNIT-4: HTML & STRUCTURE WEB PAGE
Code:
<html>
<body>
<p> <b>Here is some text in bold. </b></p>
</body>
</html>
The <strong> tag, on the other hand, is considered as a logical tag, and it is used to
inform the browser that the text in the tag has some logical importance.
Example
<html>
<body>
<p> <strong>This is an important content formatted using the strong tag </strong>,
and this is just
normally formatted text</p>
</body>
</html>
Setting Text as Italic
Just as setting text as Bold, you can use <i> tag and <em> tag to set text as italic
Using <i> is for, just like using <b>, physical display of text as italic and the tag <em>
while also showing the text as italic on display, lets the browser know that it has
semantic importance.
Example
<html>
<body>
<p> <i> This is the first para in italic text. </i></p>
<p> <em> This content is made italics with the em tag</em>, This is normal text </p>
</body>
</html>
Highlighting Text
If you want to highlight some text with a highlighter effect, the tag <mark> can be
used; with default CSS, the tag makes the background of text as yellow, helping you
grab a visitor’s attention on that text easily.
Example
<html>
JYOTI VERMA 9
UNIT-4: HTML & STRUCTURE WEB PAGE
<body>
<h3> This text uses <mark> Mark</mark> tag to highlight text on the page </h3>
</body>
</html>
Underlining Text in HTML
The HTML tag <u> can be used to add an underline in the text. Be careful not to use
underlining with blue text as it may confuse visitors that the text is a link.
Example
<html>
<body>
<p> <u> This is Text with underline tag. </u> </p>
</body>
</html>
Text with a strikethrough
In cases where you need to draw a horizontal line through the text, tag <strike> can
be used. The line drown is thin, so the text it is crossing can still be read easily.
Example
<html>
<body>
<p> <strike> Here is a sentence with strike through text </strike>. </p>
</body>
</html>
Writing in Monospace font in HTML
Using Monospace can be useful in situations where you want to quote something or
you want to display some code in the browser. The Monospace code, as the name
suggests, makes the width of every character the same. To get it on a browser, we
have to use the <tt> tag.
Example
<html>
<body>
<p> This is normal text. <tt>This is some sample text in monospace fonts, neat. </tt>
</p>
</body>
</html>
JYOTI VERMA 10
UNIT-4: HTML & STRUCTURE WEB PAGE
Subscripted Text in HTML
In math and chemistry, using subscript is an absolute requirement on many
occasions. In general writing, too, you may come across situations where a subscript
text is suitable to use. In HTML, any text under the <sub> tag will work as a subscript
in the browser.
Example
<html>
<body>
<p> This is normal text <sub>Notice something different with this text? </sub> </p>
</body>
</html>
Deleted Text
<del> tag is used as a logical way of telling the browser that text inside the text is
deleted. Keep in mind that to a user, the shown text is the same as the tag in
strikethrough tag, meaning it is shown in strikethrough formatting.
Example
<html>
<body>
<p> This is normal text <del> This is text between del tag. </del> </p>
</body>
</html>
Superscript Text formatting in HTML5
Text in <sup> tag is shown in superscript. This is useful in math, chemistry and other
places where math is involved. You can use the tag when citing with adding in-page
links with too.
Example
<html>
<body>
<p> This is Normal text<sup> This text is in superscript. </sup> </p>
</body>
</html>
Making Text size larger with HTML formatting
JYOTI VERMA 11
UNIT-4: HTML & STRUCTURE WEB PAGE
In cases where you need some text in a larger size on the screen, but you don’t want
to use a heading or increase the font size with a tag, use <big> content between this
tag will be displayed in noticeably larger text size.
Example
<html>
<body>
<p> This is Normal text <big> This text in in larger size. </big> </p>
</body>
</html>
Making Text smaller with HTML
Like the tag <big>, you can use <small> to make text smaller on the screen without
using CSS or headings.
Example
<html>
<body>
<p> This is Normal text <small> the size of this text is smaller </small> </p>
</body>
</html>
JYOTI VERMA 12
