Hypertext Markup Language
HTML
Prof. N. Maheswari, VIT Chennai 1
HTML is the standard markup language for creating
web pages.
Prof. N. Maheswari, VIT Chennai 2
What is HTML?
HTML stands for Hyper Text Markup Language
HTML is the standard markup language for creating Web pages
HTML describes the structure of a Web page
HTML consists of a series of elements
HTML elements tell the browser how to display the content
HTML elements label pieces of content such as "this is a
heading", "this is a paragraph", "this is a link", etc.
Prof. N. Maheswari, VIT Chennai 3
The purpose of a web browser (Chrome, Edge, Firefox, Safari) is
to read HTML documents and display them correctly.
A browser does not display the HTML tags, but uses them to
determine how to display the document.
An HTML element is defined by a start tag, some content, and an
end tag:
<tagname>Content goes here...</tagname>
Prof. N. Maheswari, VIT Chennai 4
HTML page structure
<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Prof. N. Maheswari, VIT Chennai 5
Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a sample heading</h1>
<p>This is my paragraph.</p>
</body>
</html>
Prof. N. Maheswari, VIT Chennai 6
Example
The <!DOCTYPE html> declaration defines that this document is an HTML5
document
The <html> element is the root element of an HTML page
The <head> element contains meta information about the HTML page
The <title> element specifies a title for the HTML page (which is shown in the
browser's title bar or in the page's tab)
The <body> element defines the document's body, and is a container for all
the visible contents, such as headings, paragraphs, images, hyperlinks,
tables, lists, etc.
The <h1> element defines a large heading
The <p> element defines a paragraph
Prof. N. Maheswari, VIT Chennai 7
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least
important heading
HTML Paragraphs
HTML paragraphs are defined with the <p> tag
A paragraph always starts on a new line, and browsers
automatically add some white space (a margin) before and after a
paragraph.
Prof. N. Maheswari, VIT Chennai 8
HTML Links
HTML links are defined with the anchor <a> tag:
Example
<a href="https://www.vit.ac.in">This is a link</a>
Prof. N. Maheswari, VIT Chennai 9
Example
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a sample heading</h1>
<p>This is my paragraph.</p>
<a href="https://www.vit.ac.in">This is the link</a>
</body>
</html>
Prof. N. Maheswari, VIT Chennai 10
HTML Images
HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), width, and height are
provided as attributes.
src attribute specifies the path to the image to be displayed.
alt attribute specifies an alternate text for an image, if the image
not available
Example
<img src="/home/mahi/Desktop/download.jpeg" alt="computer”
width="104" height="142">
Prof. N. Maheswari, VIT Chennai 11
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a sample heading</h1>
<p>This is my paragraph.</p>
<img src="/home/mahi/Desktop/download.jpeg" alt="computer" width="250"
height="300">
</body>
</html>
Prof. N. Maheswari, VIT Chennai 12
HTML Headings
Each HTML heading has a default size.
Specify the size for any heading with the style attribute,
using the CSS font-size property:
Example
<h1 style="font-size:60px;">VIT</h1>
Prof. N. Maheswari, VIT Chennai 13
HTML Horizontal Rules
The <hr> tag defines a thematic break in an HTML page,
and is most often displayed as a horizontal rule.
The <hr> element is used to separate content (or define a
change) in an HTML page
Prof. N. Maheswari, VIT Chennai 14
Example
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a sample heading</h1>
<p>This is my paragraph.</p>
<hr>
<img src="/home/mahi/Desktop/download.jpeg" alt="computer" width="250"
height="300">
<hr>
</body>
</html>
Prof. N. Maheswari, VIT Chennai 15
HTML Line Breaks
The HTML <br> element defines a line break.
Use <br> if you want a line break (a new line) without
starting a new paragraph
Example
<p>This is<br>a paragraph<br>with line breaks.</p>
Prof. N. Maheswari, VIT Chennai 16
HTML <pre> Element
The HTML <pre> element defines preformatted text.
The text inside a <pre> element is displayed in a fixed-
width font (usually Courier), and it preserves both spaces
and line break
Prof. N. Maheswari, VIT Chennai 17
Example
<html>
<head>
<title>Page Titlenew</title>
</head>
<body>
<pre>
title is long
poem is ready
</pre>
</body>
</html>
Prof. N. Maheswari, VIT Chennai 18
HTML Style Attribute
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;">
It is css property and css value
Always attributes will be mentioned in the start tag
Prof. N. Maheswari, VIT Chennai 19
Use the style attribute for styling HTML elements
Use background-color for background color
Use color for text colors
Use font-family for text fonts
Use font-size for text sizes
Use text-align for text alignment
Prof. N. Maheswari, VIT Chennai 20
Background color for a page to red
<html>
<head>
<title>Page Titlenew</title>
</head>
<body style="background-color:red;">
<pre>
title is long
poem is ready
</pre>
</body>
</html>
Prof. N. Maheswari, VIT Chennai 21
Example
Set background color for two different elements:
<body>
<h1 style="background-color:blue;">This is a heading</h1>
<p style="background-color:red;">This is a paragraph.</p>
</body>
Prof. N. Maheswari, VIT Chennai 22
Text Color
The CSS color property defines the text color for an HTML
element:
Example
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
Prof. N. Maheswari, VIT Chennai 23
Fonts
The CSS font-family property defines the font to be used for an
HTML element:
Example
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
Prof. N. Maheswari, VIT Chennai 24
Text Size
The CSS font-size property defines the text size for an HTML
element:
Example
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
Prof. N. Maheswari, VIT Chennai 25
Text Alignment
The CSS text-align property defines the horizontal text alignment
for an HTML element:
Example
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
Prof. N. Maheswari, VIT Chennai 26
Example
<html>
<head>
<title>Page Titlenew</title>
</head>
<body>
<h1 style="color:orange;font-family:verdana;font-size:300%">This is a
heading</h1>
<p style="color:red;">This is a paragraph.</p>
<pre>
title is long
poem is ready
</pre>
</body>
</html> Prof. N. Maheswari, VIT Chennai 27
HTML Text Formatting
HTML bold text
The HTML <b> element defines bold text, without any extra
importance.
Example
<b>This text is bold</b>
Italics
<i>This text is italic</i>
Prof. N. Maheswari, VIT Chennai 28
HTML <small> Element
The HTML <small> element defines smaller text:
Example
<small>This is some smaller text.</small>
Prof. N. Maheswari, VIT Chennai 29
HTML <mark> Element
The HTML <mark> element defines text that should be marked or
highlighted:
Example
<p>Do not forget to buy <mark>milk</mark> today.</p>
Prof. N. Maheswari, VIT Chennai 30
HTML <mark> Element
The HTML <mark> element defines text that should be marked or
highlighted:
Example
<p>Do not forget to buy <mark>milk</mark> today.</p>
Prof. N. Maheswari, VIT Chennai 31
HTML <ins> Element
The HTML <ins> element defines a text that has been inserted
into a document. Browsers will usually underline inserted text:
Example
<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>
HTML <u> Element
The <u> tag represents some text that is unarticulated and styled
differently from normal text. The content inside is typically
displayed with an underline.
Example: p>This is some <u>mispeled</u> text.</p>
<
Prof. N. Maheswari, VIT Chennai 32
HTML <sub> Element
The HTML <sub> element defines subscript text.
Subscript text appears half a character below the normal
line, and is sometimes rendered in a smaller font.
Example
<p>This is <sub>subscripted</sub> text.</p>
Similarly sup is for superscript
Prof. N. Maheswari, VIT Chennai 33
Resource
w3schools.com
w3resource.com
Prof. N. Maheswari, VIT Chennai 34
