UNIT 4 HTML

MADE BY : MS.
NANCY SUKHADIA
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>)
4.1 Introduction to HTML
4.1.1 HTML Introduction

 HTML is the standard markup language for creating Web pages.
 HTML stands for Hyper Text Markup Language
 HTML describes the structure of Web pages using markup
 HTML elements are the building blocks of HTML pages
 HTML elements are represented by tags
 HTML tags label pieces of content such as "heading", "paragraph", "table",...
 Browsers do not display the HTML tags, but use them to render the content of the page
 The primary focus of HTML is the content of the document, not its appearance. It is a language
for describing structured documents.
4.1.2 Structure of HTML Page
 HTML document contains the text (the content of the page) with embedded tags, which
provide instruction, appearance and function of the content.
 The HTML document is divided into two major portions: the head and the body.
 The head contains information about the document such as the title and "meta" information
describing the content.
 The body contains the actual contents of the document (the parts that is displayed in the
browser window).
 The following examples show the tags that make up the standard structure of an HTML
document:
1
MADE BY : MS. NANCY SUKHADIA
1. It is a document type declaration (also called DOCTYPE declaration) that identifies

this document as an HTML document.
2. The element is called the root element of an HTML page because it contains all the
elements in the document. Within the html element, the document is divided into
a head and a body.
3. The element: The head element contains descriptive information about the
document itself, such as its title, the style sheet(s) it uses, scripts, and other types
of “meta” information.
5. The <title> element also in the head element, which tells the browser what to
display in its title bar (the title bar is the very top part of the browser window—the
part with the minimize,maximize, and close buttons)
6. The element contains the visible page content also body element contains almost
everything that you see on the screen: headings, paragraphs, images, any navigation that’s
required, and footers that sit at the bottom of the web page
(Not Necessary to Write)

NOTE: 4- The meta elements within the head element provide information about the
document itself but no information that will be displayed on the page itself. A meta element
can be used to provide all sorts of information, but in this case, it specifies the character
encoding (the standardized collection of letters, numbers, and symbols) used in the
document
Example:
< ! DOCTYPE html>
<Html>
<Head>
<Title>The first example </Title>
</Head>
<Body>
Welcome to HTML
</Body>
</Html>
2
4.1.3 HTML Comments()

 Comment is a piece of code which is ignored by any web browser.
 It is a good practice to add comments into your HTML code, especially in complex
documents, to indicate sections of a document, and any other notes to anyone looking
at the code.
 Comments help you and others understand your code and increases code readability.
 HTML comments are placed in between tags.
 So any content placed with-in tags will be treated as comment and will be completely
ignored by the browser.
Example:
<!DOCTYPE html>
<html>
<head> 
<title>This is document title</title>
</head> 
<body>
<p>Document content goes here.....</p>
</body>
</html>
4.2 HTML Elements

<h1>...<h6> (Heading)
 The <h1> to <h6> tags are used to define HTML headings.
 <h1> defines the most important heading.
 <h6> defines the least important heading.
Example:
<h1>This is heading 1</h1>

<h2>This is heading 2</h2> This is heading 1
This is heading 2
This is heading 5
This is heading 6
<p>(Paragraph)
 The <p> tag defines a paragraph.
 Browsers automatically add a single blank line before and after each <p> element.
Example:
<h1>The p element</h1> The p element

<p>This is a paragraph.</p> This is a paragraph.
3
<br>(BreakLine)
 The <br> tag inserts a single line break.
 The <br> tag is useful for writing addresses or poems.
 The <br> tag is an empty tag which means that it has no end tag.
Example:
<h1>The br element</h1> The br element

To force
<p>To force <br> line breaks<br> in a text, line breaks
<br> use the br <br> element.</p> in a text,
use the br
element.
<a> (anchor)
 The <a> tag defines a hyperlink, which is used to link from one page to another.
 The most important attribute of the <a> element is the href attribute, which
indicates the link's destination.
 By default, links will appear as follows in all browsers:
 An unvisited link is underlined and blue
 A visited link is underlined and purple
 An active link is underlined and red
Notes:
 If the <a> tag has no href attribute, it is only a placeholder for a hyperlink.
 A linked page is normally displayed in the current browser window, unless you
specify another target.
Example:
<a href="https://www.google.com">
google </a>
<img>
 The <img> tag is used to embed an image in an HTML page.
 Images are not technically inserted into a web page; images are linked to web pages.
The <img> tag creates a holding space for the referenced image.
 The <img> tag has two required attributes:
height- attribute specifies the height of an image, in pixels.
width-attribute specifies the width of an image, in pixels.
src - Specifies the path to the image
alt - Specifies an alternate text for the image, if the image for some reason cannot be
displaye
4
Example:
<html>
<body>
<img src="html.svg"
alt="html" width="45" height="45">
</img>
</body>
</html>
4.3 HTML Attributes
alt
 The required alt attribute specifies an alternate text for an image, if the image cannot be
displayed.
 The alt attribute provides alternative information for an image if a user for some reason
cannot view it (because of slow connection, an error in the src attribute, or if the user
uses a screen reader).
Syntax:
<img alt="text">
Example:
<html>
<body>
<img alt="html"> </img>
</body>
</html>
href
 The href attribute specifies the URL of the page the link goes to.
 If the href attribute is not present, the <a> tag will not be a hyperlink.
Syntax: <a href="URL">

Example:
<html>
<body>
<a
href="https://www.vnsgu.ac.in"> VNSGU
</a>
</body>
</html>
src, width, height (Mention in img tag)
style
 The <style> tag is used to define style information (CSS) for a document.
5
 Inside the <style> element you specify how HTML elements should render in a
browser.
Example:
<html>
<head> This is a heading
<style>
h1 {color:red;} This is a paragraph.
p {color:blue;}
</style>
</head>
<body>
<h1>A heading</h1>
<p>A paragraph.</p>
</body>
</html>
title
 The <title> tag defines the title of the document. The title must be text-only, and it is
shown in the browser's title bar or in the page's tab.
 The <title> tag is required in HTML documents!
The <title> element:
 defines a title in the browser toolbar
 provides a title for the page when it is added to favorites
 displays a title for the page in search-engine results
<html>
<body>
<title> My First Page </title>
</body>
</html>
id
 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 to manipulate the
element with the specific id.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
#geeks {
color: green;
}
</style>
</head>
6
<body>
<h2>Welcome to GeeksforGeeks</h2>
<h1 id="geeks">Hi Geeks!</h1>
</body>
</html>
4.4 HTML Heading (<Head>)
 The <head> element is a container for metadata (data about data) and is placed
between the <html> tag and the <body> tag.
 Metadata is data about the HTML document. Metadata is not displayed.
 Metadata typically define the document title, character set, styles, scripts, and other
meta information. (Example Mention in Page no.2)
4.5 Text Formatting
Text Tag Description

<b>/<strong> used to represent bold text
<i> used to give an italic style
<em> used to emphasize text
<mark> used to mark a piece of text
<small> small font-size of text
<del> defines the deleted text
<ins> used to represent the addition of text
<sub> the subscript in an equation
<sup> the superscript in an equation
Example:
<html>
<head>
<title> Text Formatting </title>
</head>
<body>
<b> Bold</b> <br>
<i> Italic </i> <br>
<strong> strong </strong> <br>
<em> Emphasis</em> <br>
<small> small </small> <br>
<ins> Insert </ins> <br>
H<sub> 2 </sub> O <br>
<mark> Mark </mark> <br>
a <sup> 2 </sup> <br>
<del> Delete </del> <br>
</body>
</html>

UNIT 4 HTML

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

UNIT 4 HTML

Uploaded by

Copyright:

Available Formats

MADE BY : MS.

UNIT-4: HTML & Structure Web Page

4.1 Introduction to HTML

4.1.1 HTML Introduction

4.1.2 Structure of HTML Page

1. It is a document type declaration (also called DOCTYPE declaration) that identifies

(Not Necessary to Write)

4.1.3 HTML Comments()

4.2 HTML Elements

<h1>This is heading 1</h1>

<h1>The p element</h1> The p element

<h1>The br element</h1> The br element

4.3 HTML Attributes

Syntax: <a href="URL">

src, width, height (Mention in img tag)

4.4 HTML Heading (<Head>)

4.5 Text Formatting

Text Tag Description

You might also like