HTML PROGRAM
<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>Welcome to My First HTML Page!</h1>
<p>This is my first attempt at writing HTML.</p>
</body>
</html>
HTML PROGRAM
<!--The <pre> tag preserves all formatting characters, including line
breaks, tabs, and white space. -->
<! DOCTYPE html>
<Html>
<Head>
<Title>Pre Tag</title>
</head>
<body>
<per>
The HTML tag is
Used to display preformatted text,
Such as code snippets,
Sample output,
Or other text that needs
To preserve its formatting:
</pre>
</body>
</html>
HTML PROGRAM
<!--HTML headings are defined with the <h1> to <h6> tags with H1
being the highest (or most important) level and H6 the least:-->
<! DOCTYPE html>
<Html>
<Head>
<Title>Headings Tag</title>
</head>
<Body>
<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>
</body>
</html>
HTML PROGRAM
<!DOCTYPE html>
<Html>
<Head>
<Title>Paragraph Tag</title>
</head>
<Body>
<Div>
<p>Hypertext Markup Language (HTML) is the standard
markup language for documents designed to be displayed in a web
browser.</p>
<p> It defines the content and structure of web content. </p>
<p>It is often assisted by technologies such as Cascading Style Sheets
(CSS) and scripting languages such as JavaScript, a programming
language.</p>
</div>
</body>
</html>
HTML PROGRAM
<html>
<head>
<title>Program Five</title>
</head>
<body>
<ol><!--Order List Tags-->
<ol type="1"><!--Will give numbers(1,2,3...)-->
<LH>(1)The Fruit name</LH>
<Li>Mango
<Li>Orange
<Li>Grapes
<Li>Papay
<Li>Banana
</OL>
<OL>
<ol type=a><!--Will give numbers(a,b,c...)-->
<Lh>(2)Vegetable Name</LH>
<Li>Potato
<Li>Tomat
<Li>Lady Finger
<Li>Carrot
</OL>
<OL>
<ol type=A><!--Will give numbers(A,B,C...)-->
<Lh>(3)Input Computer Devies</LH>
<Li>Keyborad
<Li>Mouse
<Li>Touch Pad
HTML PROGRAM
<Li>mic
<Li>
</OL>
</OL>
<OL>
<ol type=i><!--Will give numbers(i,ii,iii...)-->
<Lh>(4)Output Coumputer Devies</LH>
<Li>Moniter
<Li>Speakers
<Li>Printers
<Li>
</OL>
<OL>
<ol type=I><!--Will give numbers(I,II,III...)-->
<Lh>(5)Color Name</LH>
<Li>Red
<Li>Blue
<Li>
<Li>Greeb
</ol>
</oL>
</body>
</html>
HTML PROGRAM
<Html>
<Head>
<Title>Program Six</Title>
</Head>
<body>
<!--Basic tags for changing fonts are often allowed,
such as
1)<b>=(blod),
2)<i>=Italic,
3)<u>=Underline,
4)<em>=Italic,
5)<strike>=Strikethrough
6)<strong>=Blod
7)<sub>=Subscript,
8)<sup>=Superscript,
9)<Br>Break Row,
10)<hr>=Horizontal line
Use-->
<b>Core Computer Planet </b><br><hr>
<i>Core Computer Planet </i><br><hr>
<u>Core Computer Planet </u><br><hr>
<em>Core Computer Planet </em><br><hr>
<strike>Core Computer Planet </strike><br><hr>
<strong>Core Computer Planet</strong><br><hr>
H<sub>2</sub>O<br><hr>
(2)<Sup>2</sup><hr><hr>
</body>
</Html>
HTML PROGRAM
<!--The font tag in HTML is used to set the font size, color, and face of
the text in an HTML document. The font tag in HTML is used inside the
<body> tag. The syntax of font tag in html is very simple :
<font size=" " color=" " face=" "> Our Text </font>.-->
<!--Some Font Face are here
(1)clibri
(2)aigdt
(3)algerian amgdt
(4)brush script mt
(5)castekkar
(6)cooper black
(7)elephant
(8)Harlow Solid Italic
(9)Lucida Handwriting
(10)Palace Script MT-->
<Html>
<Head>
<Title>(7)Program Seven</Title>
</Head>
<body>
<p>
<font size="125" color="royalblue" face="Algerian">
Hello world
<br>
I am (Type our name)
</font>
</body>
</Html>
<!--HTML center Tag.
HTML PROGRAM
The <center> tag in HTML was used to
horizontally center content on a webpage.-->
<Html>
<Head>
<Title>Center</Title>
</Head>
<body>
<p>
<center>
<font size="200" color="Red" face="Calibri">
Hello world
<br>
I am (Type our name)
</p>
</center>
</font>
</body>
</Html>
<!--
The HTML <body> background attribute is used to specify a
background image or color for the entire web page's body.
-->
<Html>
<Head>
<Title>(9)Program Nine</Title>
</Head>
<body bgcolor="color name/color code"><!--use for background color--
>
HTML PROGRAM
<body background="image location"><!--use for background image-->
<p>
<center>
<font size="200" color="Red" face="Calibri">
Hello world
<br>
I am (Type our name)
<p>
</font>
</body>
</Html>
<!--Description tags in html document
<dl>= Description List
<dt>= Description term
<dd>= Description Details
-->
<html>
<head>
<title>Description tags</title>
</head>
<body>
<dl>
<div>
<dt><h1><u>Input Device</u></h1></dt>
<font size="5" color="blueviolet">
<dd>An input dvice is a piece of equipment used to provide
data
<dd><b>Example:-</b>keyboard,mouse,etc.
</font>
HTML PROGRAM
</div>
<div>
<dt><h1><u>Output Device</h1></u></dt>
<font size="5" color="blueviolet">
<dd>An output device is any poece of computer hardware
equipment which converts information into a human readable form.
<dd><b>Example:-</b>monitor,printe,etc
</font>
</div>
</dl>
</body>
</html>
<!-- Table Definition and Usage
The <table> tag defines an HTML table.
An HTML table consists of one <table> element and one or more
<tr>=table row,
<th>=table header,
<td>=table cell
elements.
The <tr> element defines a table row.
The <th> element defines a table header .
The <td> element defines a table cell.
-->
<!-- Attributes of :Table Tag
(1) Border=" "->Controls the border to be placed around the table.
(2) Width=" "->To set width of the table in pixels and percentage.
(3) Boedercolor=" "->This tag change the border color.
(4) Align=" "->This tag used to table Horizontal
alignment(left,right,center)
HTML PROGRAM
(5) Cellpadding=" "->Controle the distance between the data in a
cell and the boundaries of the cell.
(6) Cellspacing =" "->Controle the spacing between adjacet cells.
(7) Colspan=" "->This tag used to mage columns.
(8) Rowspan=" "->This tag used to mage rows.
-->
<!DOCTYPE html>
<html>
<head>
<Title>Table elements</title>
</head>
<center>
<body>
<h1><u>The table element</u></h1>
<table border=" " width=" " bordercolor=" " bgcolor="white" align=" "
cellpadding=" " cellspacing=" ">
<caption><h4><b>Monthly savings</b></h4></caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>100₹</td>
</tr>
<tr>
HTML PROGRAM
<td>February</td>
<td>80₹</td>
</tr>
<tr>
<td>March</td>
<td>250₹</td>
</tr>
</table>
</body>
</html>
<!-- Definition and Usage
The <img> tag is used to embed an image in an HTML 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 has two required attributes:
Src - Specifies the path to the image
Alt - Specifies an alternate text for the image,
if the image for some reason cannot be displayed
Note: Also, always specify the width and height of an image.
If width and height are not specified,
the page might flicker while the image loads.
Tip: To link an image to another document,
simply nest the <img> tag inside an <a> tag
(see example below).
HTML PROGRAM
Align=" "->This tag used for decide to image position in html page
(Top,Bottom,Left,Right,Middle).
-->
<!DOCTYPE html>
<html>
<head>
<title>The img element</title>
</head>
<center>
<body>
<h1>The img element</h1>
<hr width=800 size=5 color=blue align=" ">
<p>This is some text.This is some text.This is some text.
<img src="image location"
alt="DNA" width="250" height="300" border="" align=" ">
This is some text.This is some text.This is some text.
</p>
<!--
<p>
<a href="image location">
<img src="image location"
alt="Image not find" width="100" height="132">
</a>
</p>
-->
</body>
</html>
<!-- Definition and Usage
HTML PROGRAM
The <a> tag defines a hyperlink,
which is used to link from one page to another.
The most important attribute of the <a> element is the href attribute,
which indicates the link's destination.
By default, links will appear as follows in all browsers:
->An unvisited link is underlined and blue
->A visited link is underlined and purple
->An active link is underlined and red
-->
<!DOCTYPE html>
<html>
<head>
<Title>Hyperlink Tag</title>
</head>
<body>
<center>
<h1>The a element</h1>
<a href="image location">
Click Here
</a>
</body>
</html>
HTML PROGRAM
<!--
HTML frames allow authors to present documents in multiple views,
which may be independent windows or subwindows.
Multiple views offer designers a way to keep certain information
visible,
while other views are scrolled or replaced.
-->
<html>
<head>
<title>Frameset element</title>
</head>
<body>
<center>
<h1>The Frameset element</h1>
<iframe src="Image Location" width="500" height="300"
frameborder=""></iframe>
<center><hr>
<iframe src="Image Location" width="500" height="300"
frameborder=""></iframe>
</body>
</html>
<!--
HTML links can be used to create
so that readers can jump to specific parts of a web page.
----------------------------------------------------------------
Bookmarks can be useful if a web page is very long.
HTML PROGRAM
To create a bookmark - first create the bookmark, then add a link
to it.
When the link is clicked, the page will scroll down or up to the
location with the bookmark.
-->
<!DOCTYPE html>
<html>
<head>
<title>link porgram</title>
</head>
<body>
<p><a href="#C4">Jump to Chapter 4</a></p>
<p><a href="#C10">Jump to Chapter 10</a></p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>
<h2 id="C4">Chapter 4</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>
HTML PROGRAM
<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>
<h2 id="C10">Chapter 10</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 12</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 13</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 14</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 15</h2>
<p>This chapter explains ba bla bla</p>
</body>
HTML PROGRAM
</html>
<!--The <kbd> element defines keyboard input
The <samp> element defines sample output from a computer program
The <code> element defines a piece of computer code
The <var> element defines a variable in programming or in a
mathematical expression
The <pre> element defines preformatted text
-->
<!DOCTYPE html>
<html>
<body>
<h2>The samp Element</h2>
<p>The samp element is used to define sample output from a
computer program.</p>
<p>Message from my computer:</p>
<p>
<samp>File not found.<br>
Press F1 to continue</samp>
</p>
<h2>Computer Code</h2>
<p>Some programming code:</p>
<code>
HTML PROGRAM
x = 5;
y = 6;
z = x + y;
</code>
<h2>The var Element</h2>
<p>The area of a triangle is: 1/2 x <var>b</var> x <var>h</var>,
where <var>b</var> is the base, and <var>h</var> is the
vertical height.</p>
</body>
</html>
<!--
The <marquee> tag in Example:- is used to create scrolling text or
images within a web page.
However, it is important to note that the <marquee> tag is
deprecated and is not recommended for modern web development.
It is better to use CSS animations for scrolling effects. Still, if you
need to use it, here's how it works:
Basic Syntax:
Example: <marquee>Scrolling text goes here!</marquee>
**************Attributes:*************
The <marquee> tag supports the following attributes:
1. behavior: Specifies the type of scrolling. Options include:
- scroll (default): Text scrolls off the edge.
- slide: Text stops once it reaches the edge.
- alternate: Text bounces back and forth.
HTML PROGRAM
Example:-
<marquee behavior="alternate">Bouncing text</marquee>
2. direction: Sets the scrolling direction. Options are left, right, up,
or down.
Example:-
<marquee direction="right">Scrolling right</marquee>
3. scrollamount: Sets the speed of scrolling (higher numbers =
faster speed).
Example:-
<marquee scrollamount="10">Faster scrolling</marquee>
4. scrolldelay: Sets the delay (in milliseconds) between each scroll
step.
Example:-
<marquee scrolldelay="100">Slower scrolling</marquee>
5. loop: Specifies the number of times the text should scroll. Use -1
for infinite looping.
Example:-
<marquee loop="3">Scrolls three times</marquee>
6. width/height: Sets the size of the marquee area.
Example:-
<marquee width="300" height="50">Sized
marquee</marquee>
7. bgcolor: Sets the background color of the marquee.
Example:-
HTML PROGRAM
<marquee bgcolor="yellow">Scrolling with background
color</marquee>
-->
<!--
**********************************************************
*******************************************-->
<!DOCTYPE html>
<html>
<head>
<title>Marquee Example</title>
</head>
<body>
<marquee behavior="scroll" direction="left" scrollamount="5"
bgcolor="lightblue">
Welcome to my website!
</marquee>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>A mark element is displayed like this:</p>
<mark>Highlighted text!!</mark>
<p>Change the default CSS settings to see the effect.</p>
HTML PROGRAM
</body>
</html>
<Html>
<Head>
<Title>Favicon</Title>
<link rel="icon" type="image" href="C:\Users\Bala Ji\Desktop\Favicon
file\android-chrome-512x512.png">
</Head>
<body>
<div><marquee>
<p>
Wlcome to my website
<br>
helo my frined's
</p>
<marquee>
</div>
<div><font color=gold >
<b><h1>Aashu Chauhan</h1></b>
</div>
</body>
</Html>
This chapter describes the different types for the HTML <input>
element.
HTML Input Types
Here are the different input types you can use in HTML:
<input type="button">
HTML PROGRAM
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">
<html>
<body>
<h2>Text field</h2>
HTML PROGRAM
<p>The <strong>input type="text"</strong> defines a one-line text
input field:</p>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br>
<label for="pwd">Password:</label><br>
<input type="password" id="pwd" name="pwd"><br><br>
<input type="submit" value="Submit">
</form>
<p>Note that the form itself is not visible.</p>
<p>Also note that the default width of a text field is 20 characters.</p>
</body>
</html>
