Basics of HTML

UNIT – II
HTML Basics and Formatting Tags

Introduction
HTML Tags
<html>
<body>
<h1>The b element</h1>
This is normal text - and this is bold text.
</body>
</html>
The title attribute defines some extra information about an element.
The value of the title attribute will be displayed as a tooltip when you mouse
over the element:
HTML Editors
HTML Page Structure
HTML Basic Tags
Background
By default, your webpage background is white in

color. You may not like it, but no worries. HTML
provides you following two good ways to
decorate your webpage background.
• HTML Background with Colors
• HTML Background with Images
Background Image
HTML Paragraphs
The HTML element defines a paragraph.
A paragraph always starts on a new line, and browsers automatically add some white
space (a margin) before and after a paragraph.
HTML <hr> tag
HTML <hr> tag is used to specify a paragraph-level thematic break in HTML
document. It is used when you abruptly change your topic in your HTML document. It
draw a horizontal line between them. It is also called a Horizontal Rule in HTML.
Presentational Elements
• Bold
• Italic
• Underline
• Subscripted
• Superscripted
• Strike through
• Emphasized
• Strong
• Inserted
• Deleted
<html>
<head>
<title>Presentational element</title>
</head>
<body>
this text is bold
this text is italic
this text is underline
Written on the 31st February.
The EPR paradox2 was devised by Einstein, Podolsky, and Rosen.
<strike>this text is strikethrough</strike>
<s>this text is strikethrough</s>
this text is emphasis
this text is strong
My favorite color is <del>blue</del> <ins>red</ins>!
</body>
<html>
Phrase Elements
Text Direction
The <bdo>...</bdo> element stands for Bi-Directional Override and it is used to
override the current text direction.
<html>
<head>
<title>Text Direction Example</title>
</head>
<body>
This text will go left to right.
<bdo dir = "rtl">This text will go right to left.</bdo>

</body>
</html>
This text will go left to right.

This text will go right to left
Block quoted
When you want to quote a passage from another source, you
should put it in between <blockquote>...</blockquote> tags.
Text inside a <blockquote> element is usually indented from the
left and right edges of the surrounding text, and sometimes uses an
italicized font.
<html>
<head>
<title>Blockquote Example</title>
</head>
<body> The following description of XHTML is
taken from the W3C Web site:
<blockquote>XHTML 1.0 is the W3C's first Recommendation
for XHTML,following on from earlier work on HTML 4.01,
HTML 4.0, HTML 3.2 and HTML 2.0.</blockquote>
</body>
</html>
The following description of XHTML is taken from the W3C Web site:
XHTML 1.0 is the W3C's first Recommendation for XHTML,

following on from earlier work on HTML 4.01, HTML 4.0, HTML 3.2 and HTML 2.0.
Short Quotations
The <q>...</q> element is used when you want to add a double quote within a
sentence.
<html>
<head>
<title>Double Quote Example</title>
</head>
<body>
Amit is in Spain, <q>I think I am wrong</q>.
</body>
</html>
Amit is in Spain, ”I think I am wrong”.

Text Citations
If you are quoting a text, you can indicate the source placing it between an
opening <cite> tag and closing </cite> tag. As you would expect in a print publication,
the content of the <cite> element is rendered in italicized text by default.
<html>
<head>
<title>Citations Example</title>
</head>
<body>
This HTML tutorial is derived from <cite>W3 Standard for HTML</cite>.
</body>
</html>
This HTML tutorial is derived from W3 Standard for HTML.

Definition
The <dfn> tag stands for the "definition element", and it specifies a
term that is going to be defined within the content.
The nearest parent of the <dfn> tag must also contain the
definition/explanation for the term.
Computer Output Tags
• Computer code
• Keyboard
• Variable
• Preformatted
Computer Code
The HTML <code> element is used to define a piece of computer
code.
The content inside is displayed in the browser's default monospace
font.
Computer Code
Notice that the <code> element does not preserve extra whitespace and line-breaks.
To fix this, you can put the <code> element inside a <pre> element:
Keyboard Element
<kbd> element in HTML
The <kbd> tag is used to define the keyboard input. Use this when you want the user to
type on their keyboard, for example, shortcut keys Ctrl+C for copy, Esc for exit, etc.
<html>
<body>
<h2>Shortcut Keys</h2>
Use the following shortcut keys −
Cut :<kbd>CTRL</kbd>+<KBD>X</kbd>
Copy : <kbd>CTRL</kbd>+<KBD>C</kbd>
Paste :<kbd>CTRL</kbd>+<KBD>V</kbd>
Undo : <kbd>CTRL</kbd>+<KBD>Z</kbd>
</body>
</html>
Variable
<var> element in HTML
The <var> element in HTML is used to display mathematical expression for calculations.
<html>
<body>
<h2>Mathematical Equation</h2>
Sample equation :<var>2x</var> - <var>2z</var> = <var>3y</var> + 9
</body>
</html>
Preformatted
<pre> element in HTML
The <pre> tag in HTML is used to set preformatted text. The text in it preserved spaces
and line breaks i.e. the text appears the same in the web page as it is added under the
HTML code.
<html>
<body>
<h2>Demo Heading</h2>
<pre>
This is a demo text
and will appear
in the same format as
it
is visible
here. The pre tag displays
the text in a fixed-width
font. It preserves
both spaces and
line breaks as you can see
here.
</pre>
</body>
Linking to E - mail Addresses
• You ’ ve probably seen a link that shows an e -
mail address, which when clicked on opens a new
e - mail in your e - mail program, ready for you to
send an e - mail to that address.
• To create a link to an e - mail address, you need
to use the following syntax with the < a >
element:
< a href=”mailto:name@example.com” > send email < /a >
<!DOCTYPE html>
<html>
<body>
To create a link that opens in the user's email program (to let them send a
new email), use mailto: inside the href attribute:
 <a href="mailto:karthikr@shctpt.edu">Send email</a>
</body>
</html>
Output
To create a link that opens in the user's email program (to let them send a new email),
use mailto: inside the href attribute:
Send email
HTML Links - The target Attribute
By default, the linked page will be displayed in the current

browser window. To change this, you must specify another
target for the link.
• The target attribute specifies where to open the linked
document.
The target attribute can have one of the following values:
1. _self - Default. Opens the document in the same
window/tab as it was clicked
2. _blank - Opens the document in a new window or tab
3. _parent - Opens the document in the parent frame
4. _top - Opens the document in the full body of the
window
<!DOCTYPE html>
<html>
<body>
<h2>The target Attribute</h2>
<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>
If target="_blank", the link will open in a new browser window or tab.
</body>
</html>
The target Attribute
Visit W3Schools!
If target="_blank", the link will open in a new browser window or tab.

Use an Image as a Link
To use an image as a link, just put the <img> tag Inside the <a> tag:
<!DOCTYPE html>
<html>
<body>
<h2>Image as a Link</h2>
The image below is a link. Try to click on it.
<a href="https://shctpt.edu">
<img src="smiley.gif" alt=“SHC web site" style="width:42px;height:42px;">
</a>
</body>
</html>
Thank You

Basics of HTML

Uploaded by

Document Information

Original Description:

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

Basics of HTML

Uploaded by

Copyright:

Available Formats

UNIT – II

HTML Basics and Formatting Tags

<p>This is normal text - <b>and this is bold text</b>.</p>

By default, your webpage background is white in

This text will go left to right.

XHTML 1.0 is the W3C's first Recommendation for XHTML,

Amit is in Spain, ”I think I am wrong”.

This HTML tutorial is derived from W3 Standard for HTML.

By default, the linked page will be displayed in the current

<h2>The target Attribute</h2>

<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

The target Attribute

If target="_blank", the link will open in a new browser window or tab.

<p>The image below is a link. Try to click on it.</p>

You might also like