HTML
HYPER TEXT MARKUP LANGUAGE
WHAT IS HTML
• 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.
ESSENTIAL TAGS
• The essential tags that are required to create a HTML document are:
• <HTML>.............</HTML>
• <HEAD>.............
• <TITLE>….. </TITLE>
• </HEAD>
• <BODY>.............</BODY>
STRUCTURE OF HTML
• <HTML>
• <HEAD>
• .............
• .............
• .............
• </HEAD>
• <BODY>
• .............
• .............
• .............
• </BODY>
• </HTML>
FOLLOW THE STEPS TO CREATE AND VIEW IN
BROWSER
• Step-1: Open VS code
• Step-2: Enter the following lines of code:
• <HTML>
• <HEAD>
• <TITLE>
• My first Page
• </TITLE>
• </HEAD>
• <BODY>
• WELCOME TO MY FIRST WEB PAGE
• </BODY>
• </HTML>
SAVING AND VIEWING HTML DOCUMENT
• After writing code save the file in a folder
• Install the extension “live server”
• Right click on the document select option as “open with live server”
• And your default browser will display the output
ATTRIBUTES USED WITH <BODY>
• BGCOLOR: Used to set colour for the document
• Example:
• <BODY BGCOLOR="yellow">
• Your document text goes here.
• </BODY>
• TEXT: used to set the color of the text of the document Example:
• <BODY TEXT="red">Introduction to HTML:: 77
• Document text changed to red color
• </BODY>
• Document text changed to red color
HTML HEADINGS
• HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading:
• Eg- <h1> hello</h1>
<h2> hello</h2>
…………………
<h6>hello</h6>
HTML PARAGRAPHS
• HTML paragraphs are defined with the <p> tag
• Example:
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
• 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:
HTML PARAGRAPHS
• 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>
• 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 breaks:
• Example
<pre>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</pre>
MARQUEE TAG
• The <marquee> tag in HTML is used to create scrolling text or image in a webpages. It
scrolls either from horizontally left to right or right to left, or vertically top to bottom or
bottom to top.
<marquee>
<--- contents --->
</marquee>
HTML TEXT FORMATTING
• HTML contains several elements for defining text with a special meaning.
• Example:
This text is bold
This text is italic
This is subscript and superscript
HTML FORMATTING ELEMENTS
• <b> - Bold text
• <strong> - Important text
• <i> - Italic text
• <em> - Emphasized text
• <mark> - Marked text
• <small> - Smaller text
• <del> - Deleted text
• <ins> - Inserted text
• <sub> - Subscript text
• <sup> - Superscript text
HTML LINKS AND CENTER TAG
• HTML links are defined with the <a> tag:
Example:
<a href="[Link] is a link</a>
• <Center> tag– brings all the elements to center
Example:
<center> some text </center>
HTML IMAGES
• The HTML <img> tag is used to embed an image in a web page.
• Images are not technically inserted into a web page; images are linked to web
pages. The <img> tag creates a holding space for the referenced image.
• The <img> tag is empty, it contains attributes only, and does not have a closing tag.
• The <img> tag has two required attributes:
src - Specifies the path to the image
alt - Specifies an alternate text for the image
<img src="url" alt="alternatetext">
HTML LISTS
• Unordered HTML List
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items will be marked with bullets (small black circles) by default:
Example:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
HTML LISTS
• Ordered HTML List
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items will be marked with numbers by default:
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
HTML IFRAME
• The <iframe> tag specifies an inline frame.
• An inline frame is used to embed another document within the current HTML document.
<iframe src="[Link] ></iframe>
HTML LISTS
• HTML Description Lists
HTML also supports description lists.
A description list is a list of terms, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term:
Example:
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
HTML TABLES
• HTML tables allow web developers to arrange data into rows and columns.
• A table in HTML consists of table cells inside rows and columns.
• Table tags
Each table cell is defined by a <td> and a </td> tag.
Each table row starts with a <tr> and ends with a </tr> tag.
Sometimes you want your cells to be table header cells. In those cases use the <th> tag
instead of the <td> tag
HTML TABLES
<table>
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person 3</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
