Unit 3rd HTML

UNIT : 3RD
INTRODUCTION TO HTML
INTRODUCTION TO HTML
HTML is an acronym which stands for Hyper Text
Mark-up Language which is used for creating
web pages and web applications. Let's see what is
meant by Hypertext Mark-up Language, and Web
page.
Hyper Text: Hypertext simply means "Text within
Text." A text has a link within it, is a hypertext.
Whenever you click on a link which brings you to a
new webpage, you have clicked on a hypertext.
Hypertext is a way to link two or more web pages
(HTML documents) with each other.
Mark-up language: A mark-up language is a

computer language that is used to apply layout and
formatting conventions to a text document. Mark-up
language makes text more interactive and dynamic.
Web Page: A web page is a document which is commonly
written in HTML and translated by a web browser. A web page
can be identified by entering an URL. A Web page can be of
the static or dynamic type. With the help of HTML only, we
can create static web pages.
HTML text Editors
An HTML file is a text file, so to create an HTML file we
can use any text editors.
Text editors are the programs which allow editing in a

written text, hence to create a web page we need to write
our code in some text editor.
There are various types of text editors available which you

can directly download, but for a beginner, the best text
editor is Notepad (Windows) or Text Edit (Mac).
HTML code with Notepad.
Notepad is a simple text editor and suitable for beginners to
learn HTML. It is available in all versions of Windows, from
where you easily access it.
Step 1: Open Notepad (Windows)
Step 2: Write code in HTML
Step 4: Open the HTML page in your web browser.
To run the HTML page, you need to open the file location, where
you have saved the file and then either double-click on file or click
on open with option
Let's see a simple example of HTML.
<!DOCTYPE>
<html>
<head>
<title>Web page title</title>
</head>
<body>
<h1>Write Your First Heading</h1>
<p>Write Your First Paragraph.</p>
</body>
</html>
Description of HTML Example
<!DOCTYPE>: It defines the document type or it instruct the

browser about the version of HTML.
<html > :This tag informs the browser that it is an HTML

document. Text between html tag describes the web document.
It is a container for all other elements of HTML except <!
DOCTYPE>
<head>: It should be the first element inside the <html>

element, which contains the metadata(information about the
document). It must be closed before the body tag opens.
<title>: As its name suggested, it is used to add title of that
HTML page which appears at the top of the browser window. It
must be placed inside the head tag and should close
immediately. (Optional)
<body> : Text between body tag describes the body content of the
page that is visible to the end user. This tag contains the main
content of the HTML document.
<h1> : Text between <h1> tag describes the first level heading of the
webpage.
<p> : Text between <p> tag describes the paragraph of the webpage.
HTML Elements
 An HTML element is defined by a start tag, some content, and an end
tag.
 HTML Elements
 The HTML element is everything from the start tag to the end tag:
 <tagname>Content goes here...</tagname>
 Examples of some HTML elements:
 <h1>My First Heading</h1>

 <p>My first paragraph.</p>
HTML Attributes
HTML attributes provide additional information about
HTML elements.
 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“.
The href Attribute
The <a> tag defines a hyperlink. The href attribute specifies the URL of
the page the link goes to:
Example
<a href="https://www.w3schools.com">Visit W3Schools</a>
The src Attribute

The <img> tag is used to embed an image in an HTML page.
The src attribute specifies the path to the image to be displayed:
Example
<img src="img_girl.jpg">
The width and height Attributes
The <img> tag should also contain the width and height attributes,
which specify the width and height of the image (in pixels):
Example
<img src="img_girl.jpg" width="500" height="600">
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.
Example
<img src="img_girl.jpg" alt="Girl with a jacket">
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>
HTML HEADING
A HTML heading or HTML h tag can be defined as a
title or a subtitle which you want to display on the
webpage.
There are six different HTML headings which are

defined with the <h1> to <h6> tags, from highest level
h1 (main heading) to the least level h6 (least
important heading).
Example:
<!DOCTYPE html>
<html>
<body>
<h1>Heading no. 1</h1>
</body>
</html>
HTML PARAGRAPH
HTML paragraph or HTML p tag is used to define a
paragraph in a webpage. An HTML <p> tag indicates
starting of new paragraph.
Example:
<!DOCTYPE html>
<html>
<body>
<p>This is first paragraph.</p>
<p>This is second paragraph.</p>
</body>
</html>
HTML STYLE
HTML style attribute is used to add styles to an
element, such as color, font, size, and more.
Setting the style of an HTML element, can be done

with the style attribute.
The HTML style attribute has the following syntax:
<tagname style="property:value;">
Background Color
The CSS background-color property defines the background color
for an HTML element.
<body style="background-color:powderblue;">
Text Color
The CSS color property defines the text color for an HTML element:
<h1 style="color: blue;">This is a heading</h1>

<p style="color: red;">This is a paragraph.</p>
Fonts
The CSS font-family property defines the font to be used for an HTML
element:
<h1 style="font-family : verdana;">This is a heading</h1>

<p style="font-family : courier;">This is a paragraph.</p>
HTML Text Formatting
Formatting elements were designed to display special types of text:
<b> - Bold text

<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Smaller text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript text
<mark> Element
The HTML <mark> element defines text that should be marked or highlighted
<p>Do not forget to buy <mark>milk</mark> today.</p>
<del> Element
The HTML <del> element defines text that has been deleted from a
document.
<p>My favourite color is <del>blue</del> red.</p>
<ins> Element
The HTML <ins> element defines a text that has been inserted into a
document. Browsers will usually underline inserted text:
<p>My favourite color is <del>blue</del> <ins>red</ins>.</p>
<sub> Element
The HTML <sub> element defines subscript text. Subscript text can
be used for chemical formulas, like H2O:
<p>This is <sub>subscripted</sub> text.</p>
<sup> Element
The HTML <sup> element defines superscript text. Superscript text

appears half a character above the normal line, and is sometimes
rendered in a smaller font. Superscript text can be used for
footnotes, like WWW [1]
<p>This is <sup>superscripted</sup> text.</p>

Unit 3rd HTML

Uploaded by

Document Information

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 3rd HTML

Uploaded by

Copyright:

Available Formats

UNIT : 3RD

Mark-up language: A mark-up language is a

Text editors are the programs which allow editing in a

There are various types of text editors available which you

<!DOCTYPE>: It defines the document type or it instruct the

<html > :This tag informs the browser that it is an HTML

<head>: It should be the first element inside the <html>

 Examples of some HTML elements:

 <h1>My First Heading</h1>

 All HTML elements can have attributes.

The src Attribute

The alt Attribute

There are six different HTML headings which are

Setting the style of an HTML element, can be done

The HTML style attribute has the following syntax:

<h1 style="color: blue;">This is a heading</h1>

<h1 style="font-family : verdana;">This is a heading</h1>

<b> - Bold text

<p>Do not forget to buy <mark>milk</mark> today.</p>

<p>My favourite color is <del>blue</del> red.</p>

<p>This is <sub>subscripted</sub> text.</p>

The HTML <sup> element defines superscript text. Superscript text

<p>This is <sup>superscripted</sup> text.</p>

You might also like