UNIT - 2
1. HTML INTRODUCTION:
• HTML stands for Hypertext Markup Language, and it is the most widely used language to
write Web Pages.
• Hypertext refers to the way in which Web pages (HTML documents) are linked together.
Thus, the link available on a webpage is called Hypertext.
• As its name suggests, HTML is a Markup Language which means you use HTML to simply
"mark-up" a text document with tags that tell a Web browser how to structure it to display.
• HTML was developed with the intent of defining the structure of documents like headings,
paragraphs, lists, and so forth to facilitate the sharing of scientific information between
researchers.
• HTML is being widely used to format web pages with the help of different tags available in
HTML language.
EXAMPLE
<! DOCTYPE html>
<html>
<head>
<title> this is document </title>
</head>
<body>
<h1> this is heading </h1>
<p>Document content goes here……. </p>
</body>
</html>
2. GETTING STARTED & CREATING ANS SAVING HTML DOCUMENT:
Step 1: Creating the HTML file
Open up your computer's plain text editor and create a new file.
Step 2: Type some HTML code
Start with an empty window and type the following code:
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>A simple HTML document</title>
</head>
<body>
<p>Hello World!<p>
</body>
</html>
Step 3: Saving the file
Now save the file on your desktop as "[Link] ".
Note: It is important that the extension .html is specified — some text editors, such as Notepad,
will automatically save it as .txt otherwise.
Explanation of code
You might think what that code was all about. Well, let's find out.
• The first line <!DOCTYPE html> is the document type declaration. It instructs the web browser
that this document is an HTML5 document. It is case-insensitive.
• The <head> element is a container for the tags that provides information about the document, for
example, <title> tag defines the title of the document.
• The <body> element contains the document's actual content (paragraphs, links, images, tables, and
so on) that is rendered in the web browser and displayed to the user.
3. DOCUMENT LAYOUTS OF HTML PAGE
HTML layouts provide a way to arrange web pages in well-mannered, well-structured, and in
responsive form or we can say that HTML layout specifies a way in which the web pages can be
arranged. Web-page layout works with arrangement of visual elements of an HTML document.
Every website has a specific layout to display content in a specific manner.
Description of various Layout elements :
• HTML <header>
. The <header> element is used to create header section of web pages. The header contains the
introductory content, heading element, logo or icon for the webpage, and authorship information
• HTML <nav>
The <nav> elements is a container for the main block of navigation links. It can contain links for
the same page or for other pages.
• HTML <section>
HTML <section> elements represent a separate section of a web page which contains related
element grouped together. It can contain: text, images, tables, videos, etc.
• HTML <article>
HTML tag is used to contain a self-contained article such as big story, huge article, etc.
• HTML <aside>
HTML <aside> define aside content related to primary content. The <aside> content must be
related to the primary content. It can function as side bar for the main content of web page.
• HTML <footer>
HTML <footer> element defines the footer for that document or web page. It mostly contains
information about author, copyright, other links, etc.
• HTML <details>
HTML <details> element is used to add extra details about the web page and use can hide or show
the details as per requirement.
• HTML <summary>
HTML <summary> element is used with the <details> element in a web page. It is used as
summary, captions about the content of <details> element.
4. HTML ELEMENTS
An HTML element is defined by a starting tag. If the element contains other content, it ends
with a closing tag, where the element name is preceded by a forward slash as shown below
with few tags:
Start Tag Description End Tag
<p> This is paragraph Content </p>
<h1> This is heading Content </h1>
<div> This is division Content </div>
<br/>
So here <p>….</p> is an HTML element, There are some HTML elements which don't need to be
closed, such as <img/>, <hr/>, <br/> elements. These are known as void elements.
HTML documents consists of a tree of these elements and they specify how HTML
documents should be built, and what kind of content should be placed in what part of an HTML
document.
HTML Tag vs. Element
An HTML element is defined by a starting tag. If the element contains other content, it ends with a
closing tag. For example,<p> is starting tag of a paragraph and </p> is closing tag of the same
paragraph but <p> this is paragraph </p> is a paragraph element.
Nested HTML Elements:
It is very much allowed to keep one HTML element inside another HTML element
EXAMPLE
• <p> this is <i> italic </i> heading </p>
• <p> this is <u> underlined </u> paragraph </p>
Output:
• This is italic heading
• This is underlined paragraph
5. Formatting styles
• Bold Text
Anything that appears within <b>….</b>element, is displayed in bold
Example: <p> this is <b> html </b> paragraph </p>
Output: this is html paragraph
• Italic Text
Anything that appears within <i>….</i> element is displayed in italicized
Example: <p> this is <i> italic </i> heading </p>
Output: This is italic heading
• Underlined Text
Anything that appears within <u>….</u> element, is displayed with underline
Example: <p> this is <u> underlined </u> paragraph </p>
Output : This is underlined paragraph
• Strike text
Anything that appears within <strike>…..</strike> element is displayed with
strikethrough, which is a thin line
Example: <p> the following word uses a <strike> strikethrough </strike> typeface </p>
Output: the following word uses a strikethrough typeface
• Monospaced Font
The content of a <tt>….</tt> element is written in monospaced font. Most of the fonts are
known as variable-width fonts because different letters are of different widths, . In a
monospaced font, however, each letter has the same width
Example : <p>The following word uses a <tt> monospaced </tt> typeface </p>
Output: The following word uses a monospaced typeface
• Superscript Text
The content of a <sup>….</sup> element is written in superscript; the font size used is the
same size as the characters surrounding it but is displayed half a character's height above
the other characters.
Example : <p> The following word uses a<sup> superscript </sup> typeface.</p>
Output : The following word uses a superscript typeface.
• Subscript Text
The content of a <sub>….</sub> element is written in subscript; the font size used is the
same as the characters surrounding it, but is displayed half a character's height beneath the
other characters.
Example : <p>The following word uses a <sub> subscript </sub> typeface.</p>
Output : The following word uses a subscript typeface.
• Inserted Text
Anything that appears within <ins>….</ins> element is displayed as inserted text.
Example: <p> I want to drink <ins> wine </ins> </p>
Output : I want to drink wine.
• Deleted Text
Anything that appears within <del>….</del> element, is displayed as deleted text
Explain: <p>I want to drink <del> cola </del></p>
Output : I want to drink
• Larger Text
The content of the <big>….</big> element is displayed one font size larger than the rest of
the text surrounding
Example :<p >The following word uses a <big>big </big> typeface </p>
Output : The following word uses a big typeface
• Smaller Text
The content of the <small>….</small> element is displayed one font size larger than the
rest of the text surrounding
Example : <p> The following word uses a <small> big </small> typeface </p>
Output : The following word uses a big typeface
6. HYPERTEXT LINKS:
• A webpage can contain various links that take you directly to other pages and even specific
parts of a given page. These links are known as hyperlinks.
• Hyperlinks allow visitors to navigate between Web sites by clicking on words, phrases, and
images. Thus you can create hyperlinks using text or images available on a webpage.
Linking Documents
• A link is specified using HTML tag <a>. This tag is called anchor tag and 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. Following is the simple syntax to use
<a> tag.
<a href = "Document URL" ... attributes-list>Link Text</a>
EXAMPLE:
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href = "[Link] HTML</a>
</body>
</html>
ATTRIBUTES:
[Link] Option & Description
1 _blank
Opens the linked document in a new window or tab.
2 _self
Opens the linked document in the same frame.
3 _parent
Opens the linked document in the parent frame.
4 _top
Opens the linked document in the full body of the window.
5 targetframe
Opens the linked document in a named targetframe.