Scribd
Upload
12 views

HTML Basic in Single Word File

HTML All Basic Tags

Uploaded by

mohit
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
12 views

HTML Basic in Single Word File

HTML All Basic Tags

Uploaded by

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

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.

A Simple HTML Document


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

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>

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

What is an HTML Element?


An HTML element is defined by a start tag, some content, and an end tag:

<tagname> Content goes here... </tagname>


The HTML element is everything from the start tag to the end tag:

<h1>My First Heading</h1>


<p>My first paragraph.</p>

Start tag Element content End tag

<h1> My First Heading </h1>

<p> My first paragraph. </p>

<br> none none

HTML Documents
All HTML documents must start with a document type declaration: <!
DOCTYPE html>.

The HTML document itself begins with <html> and ends with </html>.

The visible part of the HTML document is between <body> and </body>.

Example
<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>
The <!DOCTYPE> Declaration
The <!DOCTYPE> declaration represents the document type, and helps
browsers to display web pages correctly.

It must only appear once, at the top of the page (before any HTML tags).

The <!DOCTYPE> declaration is not case sensitive.

The <!DOCTYPE> declaration for HTML5 is:

<!DOCTYPE html>

HTML Headings
HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important
heading:

Example
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
Complete program
<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>

HTML Paragraphs
HTML paragraphs are defined with the <p> tag:
Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
Complete program
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>

HTML Links
HTML links are defined with the <a> tag:

Example
<a href=" www.mohitkadwal/">This is a Mohit Kadwal Information
Link</a>
Complete program
<!DOCTYPE html>

<html>

<body>

<h2>HTML Links</h2>

<p>HTML links are defined with the a tag:</p>


<a href=" www.mohitkadwal">This is a Mohit Kadwal Information Link</a>

</body>

</html>

The href Attribute :


The <a> tag defines a hyperlink. The href (hyperText Reference) attribute
specifies the URL of the page the link goes to:
Example
<a href=" https://piemr.edu.in/">Visit PIEMR Indore</a>
Complete program
<!DOCTYPE html>

<html>

<body>

<h2>The href Attribute</h2>

<p>HTML links are defined with the a tag. The link address is specified in the href attribute:</p>

<a href=" https://piemr.edu.in/">Visit PIEMR</a>

</body>

</html>

HTML Images
HTML images are defined with the <img> tag.

The source file (src), alternative text (alt), width, and height are provided
as attributes:

Example
<img src="img_source.jpg " width="104" height="142">
Complete program
<!DOCTYPE html>

<html>

<body>

<h2>HTML Images</h2>

<p>HTML images are defined with the img tag:</p>

<img src="ImgSource.jpg " alt="Mohit kadwal" width="104" height="142">

</body>

</html>

HTML Attributes
 All HTML elements can have attributes
 Attributes provide additional information about elements
 Attributes are always specified in the start tag
 Attributes usually come in name/value pairs like: name="value"

The src Attribute


The <img> tag is used to embed an image in an HTML page.
The src attribute specifies the path to the image to be displayed:

Example
<img src="img_girl.jpg">
Complete program
<!DOCTYPE html>

<html>

<body>

<h2>The src Attribute</h2>

<p>HTML images are defined with the img tag, and the filename of the image source is specified in
the src attribute:</p>

<img src="img_girl.jpg" width="500" height="600">

</body>

</html>

The width and height Attributes


The <img> tag should also contain the width and height attributes, which
specify the width and height of the image (in pixels):

Example
<img src="img_girl.jpg" width="500" height="600">
Complete program
<!DOCTYPE html>

<html>

<body>

<h2>Width and Height Attributes</h2>

<p>The width and height attributes of the img tag, defines the width and height of the image:</p>

<img src="img_girl.jpg" width="500" height="600">


</body>

</html>

The alt Attribute


The required alt attribute for the <img> tag specifies an alternate text for an
image, if the image for some reason cannot be displayed. This can be due to
a slow connection, or an error in the src attribute, or if the user uses a
screen reader.

Example
<img src="img_girl.jpg" alt="Girl with a jacket">
Complete program
<!DOCTYPE html>

<html>

<body>

<h2>The alt Attribute</h2>

<p>The alt attribute should reflect the image content, so users who cannot see the image get an
understanding of what the image contains:</p>

<img src="img_girl.jpg" alt="Girl with a jacket" width="500" height="600">

</body>

</html>

The style Attribute


The style attribute is used to add styles to an element, such as color, font,
size, and more.

Example
<p style="color:red;">This is a red paragraph.</p>
Complete program

<!DOCTYPE html>

<html>

<body>

<h2>The style Attribute</h2>


<p>The style attribute is used to add styles to an element, such as color:</p>

<p style="color:red;">This is a red paragraph.</p>

</body>

</html>

HTML Styles
The HTML style attribute is used to add styles to an element, such as
color, font, size, and more.

Example
I am Red
I am Blue

I am Big
Complete program
<!DOCTYPE html>
<html>
<body>
<p>I am normal</p>
<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>
<p style="font-size:50px;">I am big</p>
</body>
</html>

Background Color
The CSS background-color property defines the background color for an
HTML element.

Example
Set the background color for a page to powderblue:
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
Complete program
<!DOCTYPE html>
<html>
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

Text Color
The CSS color property defines the text color for an HTML element:

Example
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

Fonts
The CSS font-family property defines the font to be used for an HTML
element:

Example
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>

Text Size
The CSS font-size property defines the text size for an HTML element:

Example
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
Text Alignment
The CSS text-align property defines the horizontal text alignment for an
HTML element:

Example
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>

In sub ke program aap normal tags laga ke use kr skte he

The title Attribute


The title attribute defines some extra information about an element.

The value of the title attribute will be displayed as a tooltip when you mouse
over the element:

Example
<p title="I'm a tooltip">This is a paragraph.</p>
Complete program
<!DOCTYPE html>

<html>

<body>

<h2 title="I'm a header">The title Attribute</h2>

<p title="I'm a tooltip">Mouse over this paragraph, to display the title attribute as a tooltip.</p>

</body>

</html>

Define an HTML Table


A table in HTML consists of table cells inside rows and columns.

<!DOCTYPE html>

<html>

<style>

table, th, td {
border:1px solid black;

</style>

<body>

<h2>A basic HTML table</h2>

<table style="width:100%">

<tr>

<th>Company</th>

<th>Contact</th>

<th>Country</th>

</tr>

<tr>

<td>Alfreds Futterkiste</td>

<td>Maria Anders</td>

<td>Germany</td>

</tr>

<tr>

<td>Centro comercial Moctezuma</td>

<td>Francisco Chang</td>

<td>Mexico</td>

</tr>

</table>

<p>To understand the example better, we have added borders to the


table.</p>

</body>

</html>
Table Cells
Each table cell is defined by a <td> and a </td> tag.

td stands for table data.

Everything between <td> and </td> are the content of the table cell.

Table Rows
Each table row starts with a <tr> and ends with a </tr> tag.

tr stands for table row.

Table Headers
Sometimes you want your cells to be table header cells. In those cases use
the <th> tag instead of the <td> tag:

th stands for table header.

HTML ColSpan and RowSpan


<table>
<tr>
<th>S.N</th>
<th>Item</th>
<th>Quantity</th>
</tr>
<tr>
<td>1</td>
<td>Apple</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>Mango</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>Orange</td>
<td>1</td>
</tr>
<tr>
<td colspan="2">Total</td>
<td>5</td>
</tr>
</table>

RowSpan:-
<table>
<tr>
<th>Name</th>
<th>Subject</th>
<th>Marks</th>
</tr>
<tr>
<td rowspan="3">Mark Smith</td>
<td>English</td>
<td>67</td>
</tr>
<tr>
<td>Maths</td>
<td>82</td>
</tr>
<tr>
<td>Science</td>
<td>91</td>
</tr>
</table>

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

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

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:

<!DOCTYPE html>
<html>
<body>
<h2>An unordered HTML list</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>

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:

<!DOCTYPE html>
<html>
<body>
<h2>An ordered HTML list</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>

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:

<!DOCTYPE html>
<html>
<body>
<h2>A Description List</h2>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</body>
</html>

HTML Div Element


The <div> element is used as a container for other HTML elements.
The <div> Element
The <div> element is by default a block element, meaning that it takes all
available width, and comes with line breaks before and after.
Example
A <div> element takes up all available width:
Lorem Ipsum<div>I am a div</div> dolor sit amet.
Result
Lorem Ipsum
I am a div
dolor sit amet.

Complete Program
<!DOCTYPE html>
<html>
<style>
div {
background-color: #FFF4A3;
}
</style>
<body>
<h1>HTML DIV Example</h1>
Lorem Ipsum <div>I am a div</div> dolor sit amet.
<p>The yellow background is added to demonstrate the footprint of the
DIV element.</p>
</body>
</html>

The <div> element has no required attributes, but style, class and id are
common.

<div> as a container
The <div> element is often used to group sections of a web page together.

Example
A <div> element with HTML elements:
<div>
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>London has over 13 million inhabitants.</p>
</div>
Complete Program
<!DOCTYPE html>
<html>
<style>
div {
background-color: #FFF4A3;
}
</style>
<body>
<h1>HTML DIV Example</h1>
<div>
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>London has over 13 million inhabitants.</p>
</div>
<p>The yellow background is added to demonstrate the footprint of the
DIV element.</p>
</body>
</html>

Marquee:
The <marquee> HTML element is used to insert a scrolling area of text.
You can control what happens when the text reaches the edges of its
content area using its attributes.

Attributes
behavior Deprecated
Sets how the text is scrolled within the marquee. Possible values
are scroll, slide and alternate. If no value is specified, the default value is scroll.

bgcolor Deprecated

Sets the background color through color name or hexadecimal value.

direction Deprecated

Sets the direction of the scrolling within the marquee. Possible values
are left, right, up and down. If no value is specified, the default value is left.

height Deprecated

Sets the height in pixels or percentage value.

hspace Deprecated

Sets the horizontal margin

loop Deprecated

Sets the number of times the marquee will scroll. If no value is specified, the default
value is −1, which means the marquee will scroll continuously.

scrollamount Deprecated

Sets the amount of scrolling at each interval in pixels. The default value is 6.

scrolldelay Deprecated

Sets the interval between each scroll movement in milliseconds. The default value is
85. Note that any value smaller than 60 is ignored and the value 60 is used instead
unless truespeed is specified.

truespeed Deprecated

By default, scrolldelay values lower than 60 are ignored. If truespeed is present,


those values are not ignored.

vspace Deprecated

Sets the vertical margin in pixels or percentage value.

width Deprecated

Sets the width in pixels or percentage value.

Event handlers
onbounce Deprecated

Fires when the marquee has reached the end of its scroll position. It can only fire
when the behavior attribute is set to alternate.

onfinish Deprecated

Fires when the marquee has finished the amount of scrolling that is set by the loop
attribute. It can only fire when the loop attribute is set to some number that is greater
than 0.

onstart Deprecated

Fires when the marquee starts scrolling.

Methods
start() Deprecated

Starts scrolling of the marquee.

stop() Deprecated

Stops scrolling of the marquee.

Examples
<marquee>This text will scroll from right to left</marquee>

<marquee direction="up">This text will scroll from bottom to top</marquee>

<marquee
direction="down"
width="250"
height="200"
behavior="alternate"
style="border:solid">
<marquee behavior="alternate">This text will bounce</marquee>
</marquee>

Pre and BlockQuote:


pre is for pre text such us programming and block quote is
for simply highlight the text (&lt; and &gt; for < less than
and > greater than sign
<html>
<head>

<title>Example of pre tag & Blockquote tag</title>

</head>
<body>
<pre>
#include &lt; stdio.h &gt;
#include &lt; conio.h &gt;
void main()
{
clrscr();
printf("Welcome to HTML");
getch();
}
</pre>
<br>
<p align=justify> hello mohit how are you</p>
<blockquote> <b>This text is inside blockquote tag. It is used for
indention. It is used to display important text with indention.
</blockquote>
</body>
</html>

You might also like