Scribd
Upload
45 views

HTML

HTML is a markup language used to structure and present content on the web. It uses tags to label elements like headings, paragraphs, and lists. Some basic HTML tags include <h1> for main headings, <p> for paragraphs, and <br> for line breaks. Additional tags are used to control text formatting through styles like bold, italics, underline and font size. Well-formed HTML documents require an <html>, <head>, and <body> structure.

Uploaded by

Harsh Mendapara
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
45 views

HTML

HTML is a markup language used to structure and present content on the web. It uses tags to label elements like headings, paragraphs, and lists. Some basic HTML tags include <h1> for main headings, <p> for paragraphs, and <br> for line breaks. Additional tags are used to control text formatting through styles like bold, italics, underline and font size. Well-formed HTML documents require an <html>, <head>, and <body> structure.

Uploaded by

Harsh Mendapara
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 86

Markup Language (HTML):

Introduction to HTML
Introduction to HTML

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
Introduction to HTML

HTML elements are represented by tags

HTML tags label pieces of content such as
"heading", "paragraph", "table", and so on

Browsers do not display the HTML tags, but use
them to render the content of the page
Introduction to HTML


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 is being widely used to format web
pages with the help of different tags available in
HTML language.
Basic HTML Document
<!DOCTYPE html>
<html>
<head>
<title>This is document title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Document content goes here.....</p>
</body>
</html>
Basic HTML Document
HTML Tags

HTML is a markup language and makes use of various
tags to format the content.

These tags are enclosed within angle braces.
<Tag Name>.

Except few tags, most of the tags have their
corresponding closing tags.

For example, <html> has its closing tag</html>
and <body> tag has its closing tag </body> tag etc.
HTML Tags
HTML Document Structure
Document declaration tag
<html>
<head>
Document header related tags
</head>
<body>
Document body related tags
</body>
</html>
HTML Document Structure
The <!DOCTYPE> Declaration

The <!DOCTYPE> declaration tag is used by the
web browser to understand the version of the
HTML used in the document.

Current version of HTML is 5 and it makes use
of the following declaration:
<!DOCTYPE html>
HTML – BASIC TAGS
Heading Tags


Any document starts with a heading.

You can use different sizes for your headings.

HTML also has six levels of headings, which use the elements
<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>.

While displaying any heading, browser adds one line before
and one line after that heading.
HTML – BASIC TAGS
Heading Tags
<!DOCTYPE html>
<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
HTML – BASIC TAGS
HTML – BASIC TAGS
Paragraph Tag

The <p> tag offers a way to structure your text into different
paragraphs.

Each paragraph of text should go in between an opening <p>
and a closing </p> tag.
HTML – BASIC TAGS
Paragraph Tag
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<p>Here is a first paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
</body>
</html>
HTML – BASIC TAGS
Paragraph Tag

This will produce the following result:


Here is a first paragraph of text.
Here is a second paragraph of text.
Here is a third paragraph of text.
HTML – BASIC TAGS
Line Break Tag

Whenever you use the <br /> element, anything following it
starts from the next line.

This tag is an example of an empty element, where you do
not need opening and closing tags, as there is nothing to go in
between them.

The <br /> tag has a space between the characters br and the
forward slash.
HTML – BASIC TAGS
Line Break Tag
Example
<!DOCTYPE html>
<html>
<head>
<title>Line Break Example</title>
</head>
<body>
<p>Hello<br />
You delivered your assignment on time.<br />
Thanks<br />
Mahnaz</p>
</body>
</html>
HTML – BASIC TAGS
Line Break Tag
This will produce the following result:
Hello You delivered your assignment on time. Thanks Mahnaz
HTML – BASIC TAGS
Centering Content
You can use <center> tag to put any content in the center of the
page or any table cell.
Example
<!DOCTYPE html>
<html>
<head>
<title>Centring Content Example</title>
</head>
<body>
<p>This text is not in the center.</p>
<center>
<p>This text is in the center.</p>
</center>
</body>
HTML – BASIC TAGS
Centering Content
This will produce the following result:
This text is not in the center.
This text is in the center.
Horizontal Lines

Horizontal lines are used to visually break-up sections of a
document.

The <hr> tag creates a line from the current position in the
document to the right margin and breaks the line
accordingly.
Horizontal Lines
Example
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Line Example</title>
</head>
<body>
<p>This is paragraph one and should be on top</p>
<hr />
<p>This is paragraph two and should be at bottom</p>
</body>
</html>
Horizontal Lines
HTML – FORMATTING
Bold Text
Anything that appears within <b>...</b> element, is displayed
in bold as shown below:

This will produce the following result:


The following word uses a bold typeface.
HTML – FORMATTING
Bold Text
Example
<!DOCTYPE html>
<html>
<head>
<title>Bold Text Example</title>
</head>
<body>
<p>The following word uses a <b>bold</b> typeface.</p>
</body>
</html>
HTML – FORMATTING
Italic Text
Anything that appears within <i>...</i> element is displayed in
italicized as shown below:

This will produce the following result:


The following word uses an italicized typeface.
HTML – FORMATTING
Italic Text
Example
<!DOCTYPE html>
<html>
<head>
<title>Italic Text Example</title>
</head>
<body>
<p>The following word uses a <i>italicized</i> typeface.</p>
</body>
</html>
HTML – FORMATTING
Underlined Text
Anything that appears within <u>...</u> element, is
displayed with underline as shown below:

This will produce the following result:

The following word uses an underlined typeface


HTML – FORMATTING
Underlined Text
Example
<!DOCTYPE html>
<html>
<head>
<title>Underlined Text Example</title>
</head>
<body>
<p>The following word uses a <u>underlined</u>
typeface.</p>
</body>
</html>
HTML – FORMATTING
Underlined Text
Example
<!DOCTYPE html>
<html>
<head>
<title>Underlined Text Example</title>
</head>
<body>
<p>The following word uses a <u>underlined</u>
typeface.</p>
</body>
</html>
HTML – FORMATTING
Strike Text
Anything that appears within <strike>...</strike> element
is displayed with strikethrough, which is a thin line
through the text as shown below:
HTML – FORMATTING
Strike Text
Example
<!DOCTYPE html>
<html>
<head>
<title>Strike Text Example</title>
</head>
<body>
<p>The following word uses a
<strike>strikethrough</strike> typeface.</p>
</body>
</html>
HTML – FORMATTING
Strike Text
HTML – FORMATTING
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 (for
example, the letter 'm' is wider than the letter 'i').

In a monospaced font, however, each letter has the same
width.
HTML – FORMATTING
Monospaced Font
Example
<!DOCTYPE html>
<html>
<head>
<title>Monospaced Font Example</title>
</head>
<body>
<p>The following word uses a <tt>monospaced</tt>
typeface.</p>
</body>
</html>
HTML – FORMATTING
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.
HTML – FORMATTING
Example
Superscript Text
<!DOCTYPE html>
<html>
<head>
<title>Superscript Text Example</title>
</head>
<body>
<p>The following word uses a <sup>superscript</sup>
typeface.</p>
</body>
</html>
HTML – FORMATTING

Superscript Text
HTML – FORMATTING

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.
HTML – FORMATTING

Subscript Text
Example
<!DOCTYPE html>
<html>
<head>
<title>Subscript Text Example</title>
</head>
<body>
<p>The following word uses a <sub>subscript</sub>
typeface.</p>
</body>
</html>
HTML – FORMATTING

Subscript Text
HTML – FORMATTING

Inserted Text
Anything that appears within <ins>...</ins> element is
displayed as inserted text.
HTML – FORMATTING

Inserted Text
Example
<!DOCTYPE html>
<html>
<head>
<title>Inserted Text Example</title>
</head>
<body>
<p>I want to drink <del>cola</del>
<ins>wine</ins></p>
</body>
</html>
HTML – FORMATTING

Inserted Text
HTML – FORMATTING
Larger Text
The content of the <big>...</big> element is displayed one
font size larger than the rest of the text surrounding it as
shown below:

This will produce the following result:


The following word uses a big typeface.
HTML – FORMATTING
Larger Text
Example
<!DOCTYPE html>
<html>
<head>
<title>Larger Text Example</title>
</head>
<body>
<p>The following word uses a <big>big</big>
typeface.</p>
</body>
</html>
HTML – FORMATTING

Smaller Text
The content of the <small>...</small> element is displayed
one font size smaller than the rest of the text surrounding it
as shown below:
HTML – FORMATTING

Smaller Text
Example
<!DOCTYPE html>
<html>
<head>
<title>Smaller Text Example</title>
</head>
<body>
<p>The following word uses a <small>small</small>
typeface.</p>
</body>
</html>
HTML – FORMATTING

Smaller Text
HTML – FORMATTING

Smaller Text
HTML – FONTS

The font tag is having three attributes called size, color,
and face to customize your fonts.

To change any of the font attributes at any time within
your webpage, simply use the <font> tag.

The text that follows will remain changed until you close
with the </font> tag.

You can change one or all of the font attributes within
one <font> tag.
HTML – FONTS
Set Font Size

You can set content font size using size attribute.

The range of accepted values is from 1(smallest) to
7(largest). The default size of a font is 3.
HTML – FONTS
<!DOCTYPE html>
<html>
<head>
<title>Setting Font Size</title>
</head>
<body>
<font size = "1">Font size = "1"</font><br />
<font size = "2">Font size = "2"</font><br />
<font size = "3">Font size = "3"</font><br />
<font size = "4">Font size = "4"</font><br />
<font size = "5">Font size = "5"</font><br />
<font size = "6">Font size = "6"</font><br />
<font size = "7">Font size = "7"</font>
</body>
</html>
HTML – FONTS
HTML – FONTS


You can set font face using face attribute but be aware
that if the user viewing the page doesn't have the font
installed, they will not be able to see it.

Instead user will see the default font face applicable to
the user's computer.
HTML – FONTS
<!DOCTYPE html>
<html>
<head>
<title>Font Face</title>
</head>
<body>
<font face = "Times New Roman" size = "5">Times New
Roman</font><br />
<font face = "Verdana" size = "5">Verdana</font><br />
<font face = "Comic sans MS" size =" 5">Comic Sans
MS</font><br />
<font face = "WildWest" size = "5">WildWest</font><br />
<font face = "Bedrock" size = "5">Bedrock</font><br />
</body>
</html>
HTML – FONTS
HTML – FONTS

Setting Font Color



You can set any font color you like using color
attribute.

You can specify the color that you want by either the
color name or hexadecimal code for that color.
HTML – FONTS

Example
<!DOCTYPE html>
<html>
<head>
<title>Setting Font Color</title>
</head>
<body>
<font color = "#FF00FF">This text is in pink</font><br
/>
<font color = "red">This text is red</font>
</body>
</html>
HTML – FONTS
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

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.
HTML – COMMENTS

Example
<!DOCTYPE html>
<html>
<head> <!-- Document Header Starts -->
<title>This is document title</title>
</head> <!-- Document Header Ends -->
<body>
<p>Document content goes here.....</p>
</body>
</html>
HTML – COMMENTS
This will produce the following result without
displaying the content given as a part of comments.
HTML – COMMENTS
Valid vs Invalid Comments

Comments do not nest which means a comment cannot
be put inside another comment.

Second the double-dash sequence "--" may not appear
inside a comment except as part of the closing --> tag.

You must also make sure that there are no spaces in the
start-of comment string.
HTML – COMMENTS
Valid vs Invalid Comments
Example
<html>
<head>
<title>Valid Comment Example</title>
</head>
<body>
<!-- This is valid comment -->
<p>Document content goes here.....</p>
</body>
</html>
HTML – COMMENTS
Valid vs Invalid Comments

This will produce the following result −


Document content goes here.....
HTML – COMMENTS
Valid vs Invalid Comments


Following line is not a valid comment and will be
displayed by the browser.

This is because there is a space between the left angle
bracket and the exclamation mark.
HTML – COMMENTS
Valid vs Invalid Comments
<!DOCTYPE html>
<html>
<head>
<title>Invalid Comment Example</title>
</head>
<body>
< !-- This is not a valid comment -->
<p>Document content goes here.....</p>
</body>
</html>
HTML – COMMENTS
Valid vs Invalid Comments
HTML – COMMENTS

Multiline Comments

HTML supports multi-line comments as well.

You can comment multiple lines by the special
beginning tag <!-- and ending tag -->placed before
the first line and end of the last line as shown in the
given example below.
HTML – COMMENTS
Multiline Comments
<!DOCTYPE html>
<html>
<head>
<title>Multiline Comments</title>
</head>
<body>
<!--
This is a multiline comment and it can
span through as many as lines you like.
-->
<p>Document content goes here.....</p>
</body>
</html>
HTML – COMMENTS

This will produce the following result −


Document content goes here.....
HTML – IMAGES


Images are very important to beautify as well as to
depict many complex concepts in simple way on your
web page.
HTML – IMAGES


Images are very important to beautify as well as to
depict many complex concepts in simple way on your
web page.
HTML – IMAGES
Insert Image


You can insert any image in your web page by using <img>
tag.

Following is the simple

syntax to use this tag.

<img src = "Image URL" ... attributes-list/>


HTML – IMAGES

Insert Image
Example
To try following example, let's keep our HTML file test.htm
and image file test.png in the same directory.
<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src = "/html/images/test.png" alt = "Test Image" />
</body>
</html>
HTML – IMAGES
Set Image Width/Height

You can set image width and height based on your
requirement using width and height attributes.

You can specify width and height of the image in
terms of either pixels or percentage of its actual size.
HTML – IMAGES
Set Image Width/Height
Example
<!DOCTYPE html>
<html>
<head>
<title>Set Image Width and Height</title>
</head>
<body>
<p>Setting image width and height</p>
<img src = "/html/images/test.png" alt = "Test Image" width = "150"
height = "100"/>
</body>
</html>
HTML – IMAGES
Set Image Border

By default, image will have a border around it, you can
specify border thickness in terms of pixels using border
attribute.

A thickness of 0 means, no border around the picture.
HTML – IMAGES
Set Image Border

By default, image will have a border around it, you can
specify border thickness in terms of pixels using border
attribute.

A thickness of 0 means, no border around the picture.
HTML – IMAGES
Set Image Border
Example
<!DOCTYPE html>
<html>
<head>
<title>Set Image Border</title>
</head>
<body>
<p>Setting image Border</p>
<img src = "/html/images/test.png" alt = "Test
Image" border = "3"/>
</body>
</html>
HTML – IMAGES
Set Image Border
Example
<!DOCTYPE html>
<html>
<head>
<title>Set Image Border</title>
</head>
<body>
<p>Setting image Border</p>
<img src = "/html/images/test.png" alt = "Test
Image" border = "3"/>
</body>
</html>
HTML – IMAGES

Set Image Alignment



By default, image will align at the left side of the page, but you can
use align attribute to set it in the center or right.
HTML – IMAGES
Set Image Alignment
Example
<!DOCTYPE html>
<html>
<head>
<title>Set Image Alignment</title>
</head>
<body>
<p>Setting image Alignment</p>
<img src = "/html/images/test.png" alt = "Test Image" border = "3"
align = "right"/>
</body>
</html>

You might also like