Scribd
Upload
5 views7 pages

Class 2

The document provides an overview of basic HTML structure and elements, including the use of headings, paragraphs, and text formatting options like bold, italic, and underline. It also explains how to insert images and set their attributes such as width, height, and border. Additionally, it covers grouping content with <div> and <span> tags, quoting text with <blockquote> and <q>, and using various text display elements.

Uploaded by

deepthin1011
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
5 views7 pages

Class 2

The document provides an overview of basic HTML structure and elements, including the use of headings, paragraphs, and text formatting options like bold, italic, and underline. It also explains how to insert images and set their attributes such as width, height, and border. Additionally, it covers grouping content with <div> and <span> tags, quoting text with <blockquote> and <q>, and using various text display elements.

Uploaded by

deepthin1011
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

A Simple HTML Document

<!DOCTYPE html>
<html lang="en">

<meta charset="utf-8">
<title>Page Title</title>

<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>

</html>

Example Explained

HTML elements are the building blocks of HTML pages.

 The <!DOCTYPE html> declaration defines this document to be HTML5


 The <html> element is the root element of an HTML page
 The lang attribute defines the language of the document
 The <meta> element contains meta information about the document
 The charset attribute defines the character set used in the document
 The <title> element specifies a title for the document
 The <body> element contains the visible page content
 The <h1> element defines a large heading
 The <p> element defines a paragraph

 If you use a word processor, you must be familiar with the ability to make text bold, italicized, or underlined; these
are just three of the ten options available to indicate how text can appear in HTML and XHTML.

 Bold Text
 Anything that appears within <b>...</b> element, is displayed in bold as shown below −

 Example
 Live Demo

 <!DOCTYPE html>
 <html>

 <head>
 <title>Bold Text Example</title>
 </head>

 <body>
 <p>The following word uses a <b>bold</b> typeface.</p>
 </body>

 </html>

 This will produce the following result −

 Italic Text
 Anything that appears within <i>...</i> element is displayed in italicized as shown below −
 Example
 Live Demo

 <!DOCTYPE html>
 <html>

 <head>
 <title>Italic Text Example</title>
 </head>

 <body>
 <p>The following word uses an <i>italicized</i> typeface.</p>
 </body>

 </html>

 This will produce the following result −

 Underlined Text
 Anything that appears within <u>...</u> element, is displayed with underline as shown below −

 Example
 Live Demo

 <!DOCTYPE html>
 <html>

 <head>
 <title>Underlined Text Example</title>
 </head>

 <body>
 <p>The following word uses an <u>underlined</u> typeface.</p>
 </body>

 </html>

 This will produce the following result −

 Strike Text
 Anything that appears within <strike>...</strike> element is displayed with strikethrough, which is a thin line
through the text as shown below −

 Example
 Live Demo

 <!DOCTYPE html>
 <html>

 <head>
 <title>Strike Text Example</title>
 </head>

 <body>
 <p>The following word uses a <strike>strikethrough</strike> typeface.</p>
 </body>

 </html>

 This will produce the following result −

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.

Example
Live Demo

<!DOCTYPE html>
<html>

<head>
<title>Subscript Text Example</title>
</head>

<body>
<p>The following word uses a <sub>subscript</sub> typeface.</p>
</body>

</html>

This will produce the following result −

Inserted Text

Anything that appears within <ins>...</ins> element is displayed as inserted text.

Example
Live Demo

<!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>

This will produce the following result −

Deleted Text

Anything that appears within <del>...</del> element, is displayed as deleted text.

Example
Live Demo

<!DOCTYPE html>
<html>
<head>
<title>Deleted Text Example</title>
</head>

<body>
<p>I want to drink <del>cola</del> <ins>wine</ins></p>
</body>

</html>

This will produce the following result −

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 −

Example
Live Demo

<!DOCTYPE html>
<html>

<head>
<title>Larger Text Example</title>
</head>

<body>
<p>The following word uses a <big>big</big> typeface.</p>
</body>

</html>

This will produce the following result −

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 −

Example
Live Demo

<!DOCTYPE html>
<html>

<head>
<title>Smaller Text Example</title>
</head>

<body>
<p>The following word uses a <small>small</small> typeface.</p>
</body>

</html>

This will produce the following result −

Grouping Content

The <div> and <span> elements allow you to group together several elements to create sections or subsections of a page.
For example, you might want to put all of the footnotes on a page within a <div> element to indicate that all of the elements
within that <div> element relate to the footnotes. You might then attach a style to this <div> element so that they appear
using a special set of style rules.

Quoting Text

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.

Example
Live Demo

<!DOCTYPE html>
<html>

<head>
<title>Blockquote Example</title>
</head>

<body>
<p>The following description of XHTML is taken from the W3C Web site:</p>

<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>

Short Quotations

The <q>...</q> element is used when you want to add a double quote within a sentence.

Example
Live Demo

<!DOCTYPE html>
<html>

<head>
<title>Double Quote Example</title>
</head>

<body>
<p>Amit is in Spain, <q>I think I am wrong</q>.</p>
</body>

</html>

This will produce the following result −

Live Demo
<!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>

Set Image Location

Usually we keep all the images in a separate directory. So let's keep HTML file test.htm in our home directory and create a
subdirectory images inside the home directory where we will keep our image test.png.

Example
Assuming our image location is "image/test.png", try the following example −

Live Demo

<!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>

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.

Example
Live Demo

<!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>

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.
Example
Live Demo

<!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>

This will produce the following result −

You might also like