UNIT-1
INTRODUCTION TO HTML
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.
Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
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
DEPARTMENT OF CS AND BCA Page 1
, TagBasic
Here are some of the most basic HTML tags:
<html>: Defines the root of an HTML document
.<head>: Contains meta-information about the HTML document.
<title>: Sets the title of the HTML document.
<body>: Contains the visible content of the HTML document.
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>: Headings of different levels.
<p>: Defines a paragraph.<a>: Defines a hyperlink.
<img>: Embeds an image.
<ul>: Defines an unordered list.<ol>: Defines an ordered list.
<li>: Defines a list item.
<table>: Defines a table.
<tr>: Defines a table row.
<th>: Defines a table header cell.
<td>: Defines a table data cell.
<div>: Defines a division or section in an HTML document
.<span>: Defines a section in a document.
<br>: Inserts a single line break.
<hr>: Defines a thematic break or horizontal rule.
<strong>: Indicates strong importance, usually rendered as bold.
<em>: Indicates emphasis, usually rendered as italic.
These are just some of the basic HTML tags used to structure and format content on a
webpage
Pagestructure
HTML document is structured using a set of nested tags. Each tag is enclosed
within <…> angle brackets and acts as a container for content or other HTML tags. Let's
take a look at a basic HTML document structure:
A typical HTML page looks like this:
<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>
Almost every website uses this structure. The main content goes inside the body tag.
DEPARTMENT OF CS AND BCA Page 2
,HtmlComment
<!DOCTYPE html>
<html>
<head>
<title>Comments and Text Example</title>
</head>
<body>
<!-- This is a comment. Comments are not visible on the webpage and are used for notes or
explanations in the code. -->
<h1>Working with Text</h1>
<p>This is some text content.</p>
<!-- Adding emphasis to text -->
<p>This is <strong>strongly emphasized</strong> text.</p>
<p>This is <em>emphasized</em> text.</p>
<h1>Working with Paragraphs and Line Breaks</h1>
<!-- Paragraphs -->
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<!-- Line breaks within a paragraph -->
<p>This is a line of text.<br>This is another line of text.</p>
</body>
</html>
In this example:
Comments are added using <!-- --> and are not visible on the webpage.Text is displayed
using <p> tags for paragraphs.Emphasis is added using <strong> for strong emphasis
(typically bold) and <em> for emphasis (typically italic).Line breaks within a paragraph are
achieved using the <br> tag.
DEPARTMENT OF CS AND BCA Page 3
, Emphasized Test
To emphasize text in HTML, you can use the <strong> tag for strong emphasis (typically
displayed as bold) and the <em> tag for emphasis (typically displayed as italic).
Example
<html>
<p>This text is <strong>strongly emphasized</strong> and this text is
<em>emphasized</em>.</p>
This will display:
"This text is **strongly emphasized** and this text is *emphasized*.
`<strong>` and `<em>` tags help you to highlight and emphasize specific parts of your text
in HTML.
Heading and horizontal rule in html
In HTML, you can create headings using the <h1> to <h6> tags, where <h1> is the highest
level and <h6> is the lowest level. Here's an example:
<h1>This is a level 1 heading</h1>
<h2>This is a level 2 heading</h2>
<h3>This is a level 3 heading</h3>
<h4>This is a level 4 heading</h4>
<h5>This is a level 5 heading</h5>
<h6>This is a level 6 heading</h6>
Additionally, you can create horizontal rules using the <hr> tag. This tag inserts a thematic
break or horizontal line.
Here's an example:
<p>This is some text above the horizontal rule.</p>
<hr>
<p>This is some text below the horizontal rule.</p>
DEPARTMENT OF CS AND BCA Page 4
INTRODUCTION TO HTML
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.
Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
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
DEPARTMENT OF CS AND BCA Page 1
, TagBasic
Here are some of the most basic HTML tags:
<html>: Defines the root of an HTML document
.<head>: Contains meta-information about the HTML document.
<title>: Sets the title of the HTML document.
<body>: Contains the visible content of the HTML document.
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>: Headings of different levels.
<p>: Defines a paragraph.<a>: Defines a hyperlink.
<img>: Embeds an image.
<ul>: Defines an unordered list.<ol>: Defines an ordered list.
<li>: Defines a list item.
<table>: Defines a table.
<tr>: Defines a table row.
<th>: Defines a table header cell.
<td>: Defines a table data cell.
<div>: Defines a division or section in an HTML document
.<span>: Defines a section in a document.
<br>: Inserts a single line break.
<hr>: Defines a thematic break or horizontal rule.
<strong>: Indicates strong importance, usually rendered as bold.
<em>: Indicates emphasis, usually rendered as italic.
These are just some of the basic HTML tags used to structure and format content on a
webpage
Pagestructure
HTML document is structured using a set of nested tags. Each tag is enclosed
within <…> angle brackets and acts as a container for content or other HTML tags. Let's
take a look at a basic HTML document structure:
A typical HTML page looks like this:
<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>
Almost every website uses this structure. The main content goes inside the body tag.
DEPARTMENT OF CS AND BCA Page 2
,HtmlComment
<!DOCTYPE html>
<html>
<head>
<title>Comments and Text Example</title>
</head>
<body>
<!-- This is a comment. Comments are not visible on the webpage and are used for notes or
explanations in the code. -->
<h1>Working with Text</h1>
<p>This is some text content.</p>
<!-- Adding emphasis to text -->
<p>This is <strong>strongly emphasized</strong> text.</p>
<p>This is <em>emphasized</em> text.</p>
<h1>Working with Paragraphs and Line Breaks</h1>
<!-- Paragraphs -->
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<!-- Line breaks within a paragraph -->
<p>This is a line of text.<br>This is another line of text.</p>
</body>
</html>
In this example:
Comments are added using <!-- --> and are not visible on the webpage.Text is displayed
using <p> tags for paragraphs.Emphasis is added using <strong> for strong emphasis
(typically bold) and <em> for emphasis (typically italic).Line breaks within a paragraph are
achieved using the <br> tag.
DEPARTMENT OF CS AND BCA Page 3
, Emphasized Test
To emphasize text in HTML, you can use the <strong> tag for strong emphasis (typically
displayed as bold) and the <em> tag for emphasis (typically displayed as italic).
Example
<html>
<p>This text is <strong>strongly emphasized</strong> and this text is
<em>emphasized</em>.</p>
This will display:
"This text is **strongly emphasized** and this text is *emphasized*.
`<strong>` and `<em>` tags help you to highlight and emphasize specific parts of your text
in HTML.
Heading and horizontal rule in html
In HTML, you can create headings using the <h1> to <h6> tags, where <h1> is the highest
level and <h6> is the lowest level. Here's an example:
<h1>This is a level 1 heading</h1>
<h2>This is a level 2 heading</h2>
<h3>This is a level 3 heading</h3>
<h4>This is a level 4 heading</h4>
<h5>This is a level 5 heading</h5>
<h6>This is a level 6 heading</h6>
Additionally, you can create horizontal rules using the <hr> tag. This tag inserts a thematic
break or horizontal line.
Here's an example:
<p>This is some text above the horizontal rule.</p>
<hr>
<p>This is some text below the horizontal rule.</p>
DEPARTMENT OF CS AND BCA Page 4
