Scribd
Upload
9 views

HTML

Uploaded by

10d38pradeeprajkb
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
9 views

HTML

Uploaded by

10d38pradeeprajkb
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 24

qwertyuiopasdfghjklzxcvbnmqwertyuiop

asdfghjklzxcvbnmqwertyuiopasdfghjklz
xcvbnmqwertyuiopasdfghjklzxcvbnmqw
ertyuiopasdfghjklzxcvbnmqwertyuiopas
dfghjklzxcvbnmqwertyuiopasdfghjklzxc
vbnmqwertyuiopasdfghjklzxcvbnmqwert
yuiopasdfghjklzxnmqwertyuiopasdfghjkl
zxcvbnmqwertyuiopasdfghjklzxcvbnmq
wertyuiopasdfghjklzxcvbnmqwertyuiopa
sdfghjklzxcvbnmqwertyuiopasdfghjklzx
cvbnmqwertyuiopasdfghjklzxcvbnmqwe
rtyuiopasdfghjklzxcvbnmqwertyuiopasdf
ghjklzxcvbnmqwertyuiopasdfghjklzxcvb
nmrtyuiopasdfghjklzxcvbnmqwertyuiopa
sdfghjklzxcvbnmqwertyuiopasdfghjklzx
cvbnmqwertyuiopasdfghjklzxcvbnmqwe
rtyuiopasdfghjklzxcvbnmqwertyuiopasdf
ghjklzxcvbnmqwertyuiopasdfghjklzxcvb
HTML (HYPER TEXT MARKUP
LANGUAGE)
 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 elements label pieces of content such as "this is a heading", "this is
a paragraph", "this is a link"

THE GENERAL STRUCTURE STEPS OF HTML PROGRAM:


<! DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>

EXPANTION OF PROGRAM:
`<!DOCTYPE>`: Defines the document type.
2. `<html>`: Defines the root element of an HTML document.
3. `<head>`: Contains metadata and other header elements.
4. `<title>`: Defines the title of the document.
5. `<body>`: Contains the visible content of the document.
6. `<h1>` to `<h6>`: Define headings of different levels.
7. `<p>`: Defines a paragraph.
SO THIS IS THE GENERAL STRUCTURE OF HTML.
PROGRAM:1
<!DOCTYPE html>
<html>
<head>
<title>
DHRUV
</title>
</head>
<body>
<center><h1> Heading Tags<br>
Hello Priyanka <br></h1>
<h2>Hello Tharshini<br></h2>
<h3>Hello Jeni<br></h3>
<h4>Hello Gugan<br></h4>
<h5>Hello Loki<br></h5>
<h6>Hello Sandhiya</h6></center>
</body>
</html>

HTML Formatting Elements


Formatting elements were designed to display special types of text:

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

<center>Text Formatting</center>
<b>Bold</b><br>
<i>Italics</i><br>
<u>underline</u><br>
Sub<sub>Script</sub><br>
Super<sup>Script</sup><br>
<strike>Strike Through</strike>

HTML Lists:
HTML lists allow web developers to group a set of related items in lists.

Example
An unordered HTML list:

 Item
 Item
 Item
 Item
An ordered HTML list:

1. First item
2. Second item
3. Third item
4. Fourth item

Unordered HTML List:


An unordered list starts with the <ul> tag. Each list item starts with the <li> tag
Ordered HTML List:
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

Program for ordered and unordered list:


<!DOCTYPE html>
<html>
<body>

<h2>An Unordered HTML List</h2>

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

<h2>An Ordered HTML List</h2>

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

</body>
</html>
Output:

An Unordered HTML List


 Coffee
 Tea
 Milk

An Ordered HTML List


1. Coffee
2. Tea
3. Milk

HTML Paragraphs
A paragraph always starts on a new line, and is usually a block of text.

HTML Paragraphs
The HTML <p> element defines a paragraph.

A paragraph always starts on a new line, and browsers automatically add some white
space (a margin) before and after a paragraph.

<!DOCTYPE html>
<html>
<head>
<style>
p{
color: navy;
text-indent: 30px;
text-transform: uppercase;
}
</style>
</head>
<body>
<h1>Style paragraphs with CSS</h1>
<p> On the Insert tab, the galleries include items that are designed to coordinate with the
overall look of your document. You can use these galleries to insert tables, headers, footers,
lists, cover pages, and other document building blocks. When you create pictures, charts, or
diagrams, they also coordinate with your current document look.
</p>
</body>
</html>

<!DOCTYPE html>
<head>
<title>
Day 2
</title>
</head>
<body>
<mark>priya</mark>
<a href="https://web.whatsapp.com">Sharu</a>
<hr>
<table border="2">
<tr>
<th>Sno</th>
<th>Name</th>
<th>Age</th>
<th>Number</th>
</tr>
<tr>
<td>1</td>
<td>Sharu</td>
<td>70</td>
<td>2008</td>
</tr>
<tr>
<td>2</td>
<td>Susi</td>
<td>170</td>
<td>2004</td>
</tr>

<tr>
<td>3</td>
<td>Suji</td>
<td>80</td>
<td>2008</td>
</tr>

</table>
</body>
</html>

More on tables which creates a form method:

<!DOCTYPE html>
<html>
<head>
<title>
Day 5
</title>
</head>
<body>
<h1>More on Tables</h1>
<table>
<tr>
<td>
<form>
<label>
Student Name
</label>
</td>
<td>
<input type="text" placeholder="Enter Student Name" required>
</form>
</td>
<td>
<form>
<label>
Unique ID
</label>
</td>
<td>
<input type="text" placeholder="Enroll Number" required>
</form>
</td>
</tr>

<tr>
<td>
<tr>
<td>
<form>
<label>
Age
</label>
</td>
<td>
<input type="number" placeholder="Enter Student Age" required>
</form>
</td>
<td>
<form>
<label>
D.O.B
</label>
</td>
<td>
<input type="date" placeholder="Select DOB">
</form>

</td>
</tr>
<tr>
<td>
<form>
<label>
Gender
</label>
</td>
<td>
</form>

<label>
<input type="radio" name="G" value="Male">Male
<input type="radio" name="G" value="Female">Female
</label>
</td>
</tr>

<tr>
<td>
<form>
<label>
Mobile Number
</label>
</td>
<td>

<input type="text" placeholder="Enter Contact Number" required>


</form>
</td>
<td>
<form>
<label>
E-Mail
</label>
</td>
<td>

<input type="text" placeholder="Drop Ur Mail Id Here">


</form>
</td>
<td>

</td>
</tr>
<tr>
<td>
<form>
<input type="submit">
</form>
</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).Attribut
e

alt Specifies an alternate text for an image

height Specifies the height of an image

ismap Specifies an image as a server-side image map

longdesc Specifies a URL to a detailed description of an image

referrerpolicy Specifies which referrer information to use when fetching an image

src Specifies the path to the image

srcset Specifies a list of image files to use in different situations


usemap Specifies an image as a client-side image map

width Specifies the width of an image

<img>\

<!DOCTYPE html>

<html>

<head>

<style>

img {

display: inline-block;

</style>

</head>

<body>

<p>An img element is displayed like this:</p>

<p>Some text <img src="smiley.gif" alt="Smiley face" width="42" height="42"> some text.</p>

<p>Change the default CSS settings to see the effect.</p>

</body>

</html>

Definition and Usage


The <article> tag specifies independent, self-contained content.

An article should make sense on its own and it should be possible to distribute it independently
from the rest of the site.
Potential sources for the <article> element:

 Forum post
 Blog post
 News story

Note: The <article> element does not render as anything special in a browser. However, you can
use CSS to style the <article> element (see example below).

The program which has been used in html&css style:

<!DOCTYPE html>

<html>

<head>

<style>

.all-browsers {

margin: 0;

padding: 5px;

background-color: lightgray;

.all-browsers > h1, .browser {

margin: 10px;

padding: 5px;

.browser {

background: white;

}
.browser > h2, p {

margin: 4px;

font-size: 90%;

</style>

</head>

<body>

<h1>The article element - Styled with CSS</h1>

<article class="all-browsers">

<h1>Most Popular Browsers</h1>

<article class="browser">

<h2>Google Chrome</h2>

<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the
world's most popular web browser today!</p>

</article>

<article class="browser">

<h2>Mozilla Firefox</h2>

<p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the
second most popular web browser since January, 2018.</p>

</article>

<article class="browser">

<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge
replaced Internet Explorer.</p>

</article>

</article>

</body>

</html>

Table:

<!DOCTYPE html>

<html>

</html>

<title>

Day 4

</title>

<style>

table,td

border-color: rgb(0, 0, 0);

border-style: groove;

background-color: aquamarine;

border-radius: 5px;

th{

color: blueviolet;
background-color: azure;

caption{

font-family: 'Lucida Sans';

font-size: medium;

font-style: oblique;

color: crimson;

</style>

</head>

<body>

<h1 align=center>10 th Standard Board Results</h1>

<table border=1>

<caption>

<b><big>

R.Harini

</big></b>

</caption>

<tr>

<th>Subject Name</th>

<th>Marks Scored</th>

</tr>
<tr>

<td>Tamil </td>

<td align=center>81</td>

</tr>

<tr>

<td>English</td>

<td align=center>94</td>

</tr>

<tr>

<td>Maths</td>

<td align=center>88</td>

</tr>

<tr>

<td>Science</td>

<td align=center>88</td>

</tr>

<tr>

<td>Social</td>

<td align=center>84</td>

</tr>

<tr>

<td>Total</td>

<td align=center>434</td>

</tr>
<tr>

<td>Result</td>

<td align=center>Pass</td>

</tr>

</table>

</body>

</html>

HTML <mark> Tag


The <mark> tag defines text that should be marked or highlighted.

<!DOCTYPE html>

<html>

<body>

<h1>The mark element</h1>

<p>Do not forget to buy <mark>milk</mark> today.</p>

</body>

</html>

Output:

The mark element

Do not forget to buy milk today.

Definition and Usage for<hr> tag:


The <hr> tag defines a thematic break in an HTML page (e.g. a shift of topic).
The <hr> element is most often displayed as a horizontal rule that is used to separate content (or
define a change) in an HTML page.

<!DOCTYPE html>

<html>

<body>

<p>A normal horizontal line:</p>

<hr>

<p>With CSS:</p>

<hr style="height:2px;border-width:0;color:gray;background-color:gray">

</body>

</html>

output:

A normal horizontal line:

With CSS:

Definition and Usage for <div> tags:


The <div> tag defines a division or a section in an HTML document.

The <div> tag is used as a container for HTML elements - which is then styled with CSS or
manipulated with JavaScript.

The <div> tag is easily styled by using the class or id attribute.

Any sort of content can be put inside the <div> tag!

Note: By default, browsers always place a line break before and after the <div> element.

<!DOCTYPE html>

<html>
<head>

<style>

.myDiv {

border: 5px outset red;

background-color: lightblue;

text-align: center;

</style>

</head>

<body>

<h1>The div element</h1>

<div class="myDiv">

<h2>This is a heading in a div element</h2>

<p>This is some text in a div element.</p>

</div>

<p>This is some text outside the div element.</p>

</body>

</html>

Output:

The div element

This is a heading in a div element


This is some text in a div element.
This is some text outside the div element.

Definition and Usage


The <map> tag is used to define an image map. An image map is an image with clickable areas.

The required name attribute of the <map> element is associated with the <img>'s usemap attribute
and creates a relationship between the image and the map.

The <map> element contains a number of <area> elements, that defines the clickable areas in the
image map.

Program:

<!DOCTYPE html>

<html>

<body>

<h1>The map and area elements</h1>

<p>Click on the sun or on one of the planets to watch it closer:</p>

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">

<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">

<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">

<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">

</map>

</body>

</html>

Output:

The map and area elements

Click on the sun or on one of the planets to watch it closer:

You might also like