Basic HTML structure
<!DOCTYPE html>
<html>
<head>
<title> Page Title </title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Formatting Tags in HTML
Paragraph tag :-
<p>This is a paragraph. </p>
Heading tag :-
<h1>This is a Heading</h1>
<h2>This is a Heading</h2>
.
.
<h6>This is a Heading</h6>
Bold tag :-
<b> This is Bold text </b>
Italic tag :-
<i> This is italic text </i>
Underlined tag :-
<u> This is underlined text </u>
Strikethrough tag :-
<p>This is <strike>strikethrough</strike> text. </p>
Subscript tag :-
<p>This is <sub>subscript</sub> text. </p>
Superscript tag :-
<p>This is <sup>superscript</sup> text. </p>
Font tag in HTML
<!DOCTYPE html>
<html>
<body>
<font face="Arial" size="4" color="red">This is some text.</font>
</body>
</html>
Font attributes
Font size :-
<font size="4">This text is in a larger size. </font>
Font face :-
<font face="Arial, Times new roman ">This text is in Arial or Times new roman. </font>
Font color :-
<font color="#FF0000">This text is in red color using hexadecimal value. </font>
Image tag
<!DOCTYPE html>
<html>
<head>
<title>Inserting Image </title>
</head>
<body>
<p>Here is an image </p>
<img src="image_source_url" alt="Description of the image" width="500" height="300">
</body>
</html>
Attributes of Img tag
Some commonly used attributes associated with the <img> tag include:
src: Specifies the URL or path to the image file.
<img src="image.jpg" alt="Image description">
alt: Provides alternative text that is displayed if the image cannot be loaded.
<img src="image.jpg" alt="Image description">
width: Sets the width of the image in pixels or as a percentage of the containing element.
<img src="image.jpg" alt="Image description" width="100">
height: Sets the height of the image in pixels or as a percentage of the containing element.
<img src="image.jpg" alt="Image description" height="100">
Background Image
<!DOCTYPE html>
<html>
<head>
<title>Background img </title>
</head>
<body background="path_to_image.jpg">
</body>
</body>
</html>
Inserting Audio file
<!DOCTYPE html>
<html>
<head>
<title>Audio Example</title>
</head>
<body>
<p>Audio Example</p>
<audio controls>
<source src="example_audio.mp3" type="audio/mpeg">
</audio>
</body>
</html>
Inserting Video File
<!DOCTYPE html>
<html>
<head>
<title>Video Example</title>
</head>
<body>
<p>Video Example</p>
<video width="640" height="360" controls>
<source src="example_video.mp4" type="video/mp4">
</video>
</body>
</html>
Marquee tag
<!DOCTYPE html>
<html>
<head>
<title>Marquee Example</title>
</head>
<body>
<h2>Marquee Example</h2>
<marquee behavior="scroll" direction="left">
Scrolling text goes here
</marquee>
</body>
</html>
Attributes of marquee tag
Some commonly used attributes associated with the <marquee> tag include:
behavior: Specifies the scrolling behavior. Common values include "scroll," "slide," and
"alternate."
Syntax :- <marquee behavior="scroll">Scrolling text here</marquee>
direction: Sets the direction of the scroll. Common values include "left," "right," "up," and
"down."
Syntax :- <marquee direction="left">Scrolling text here</marquee>
scrollamount: Sets the speed of the scroll. The value represents the number of pixels to be
scrolled in each iteration
syntax :- <marquee scrollamount="5">Scrolling text here</marquee>
scrolldelay: Specifies the time delay between each scroll movement, measured in
milliseconds.
Syntax :- <marquee scrolldelay="100">Scrolling text here</marquee>
Height :- Sets the height of marquee
<marquee height="50%">Scrolling text here</marquee>
width :- Sets the width of marquee
<marquee width="50%">Scrolling text here</marquee>
Hyper link tag in HTML
The hyperlink tag in HTML is represented by the <a> tag and is used to create hyperlinks to
other web pages, files, locations within the same page, email addresses, or any other URL
Syntax for creating hyper link
<a href="url">Link text or image</a>
Navigation:-
<!DOCTYPE html>
<html>
<body>
<h2>Navigation Menu</h2>
<div>
<a href> Home</a>
<a href> About</a>
<a href>Services</a>
<a href>Contact</a>
</div>
</body>
</html>
List Tag
Ordered List (<ol>):
Represents an ordered list of items. The list items will be marked with numbers by default.
Syntax:-
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
Html structure :-
<!DOCTYPE html>
<html>
<head>
<title>List Example</title>
</head>
<body>
<h2>Ordered List Example</h2>
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
</body>
</html>
Unordered List (<ul>):
Represents an unordered list of items. The list items will be marked with bullets by default.
Syntax:-
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Html structure :-
<!DOCTYPE html>
<html>
<head>
<title>List Example</title>
</head>
<body>
<h2>Unordered List Example</h2>
<ul>
<li>Red</li>
<li>Green</li>
<li>Blue</li>
</ul>
</body>
</html>
Description List (<dl>):
Represents a description list consisting of term-description pairs.
Syntax :-
<dl>
<dt>Term 1</dt>
<dd>Description 1</dd>
<dt>Term 2</dt>
<dd>Description 2</dd>
</dl>
Html structure :-
<!DOCTYPE html>
<html>
<head>
<title>List Example</title>
</head>
<body>
<h2>Description List Example</h2>
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
</body>
</html>
Table tag
Basic table in HTML :-
<!DOCTYPE html>
<html>
<body>
<h2>Sample Table</h2>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>30</td>
</tr>
<tr>
<td>Jane</td>
<td>Smith</td>
<td>25</td>
</tr>
<tr>
<td>Bob</td>
<td>Johnson</td>
<td>40</td>
</tr>
</table>
</body>
</html>
Attributes of Table tag
border: Specifies the width of the border around the table and its
cells. Syntax :-
<table border="1">
width: Specifies the width of the
table. Syntax :-
<table width="100%">
cellpadding: Specifies the space between the cell content and the cell border.
Syntax :-
<table cellpadding="5">
cellspacing: Specifies the space between
cells. Syntax :-
<table cellspacing="5">
align: Specifies the alignment of the table.
Syntax:-
<table align="center">
rowspan :- The rowspan attribute in HTML is used to specify the number of rows a
cell should span.
Syntax:-
<td rowspan="2">
colspan:- The colspan attribute in HTML is used to define the number of columns a
cell should span.
Syntax :-
<td colspan="2">
colgroup :- The colgroup element in HTML is used to define a group of columns in a table
syntax :-
<colgroup>
<col span="2">
</colgroup>
CSS
Syntax of CSS:-
Selector {Property : Value}
Example :-
p{
color: blue;
}
The main methods of applying CSS in Html documents are
1. Inline CSS: You can apply CSS directly to the HTML elements using the style
attribute.
Example:-
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
2. Internal CSS: You can use the <style> tag within the HTML document's
<head> section to define CSS rules for that specific document.
Example :-
<!DOCTYPE html>
<html>
<head>
<style>
p{
color: blue;
font-size: 16px;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>
3. External CSS: You can create a separate CSS file with a .css extension and link it to
the HTML document using the <link> tag in the <head> section.
Example:-
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>
Iframes in html
The <iframe> tag in HTML is used to display a web page within a web page.
Example :-
<!DOCTYPE html>
<html>
<body>
<h2>HTML Iframes</h2>
<p>Here is an iframe displaying the OpenAI website:</p>
<iframe src="https://openai.com" title="OpenAI Website" width="800"
height="600">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
