HTML Basic Examples

What is HTML
HTML is a markup language for describing web documents (web pages).
 HTML stands for Hyper Text Markup Language

 A markup language is a set of markup tags
 HTML documents are described by HTML tags
 Each HTML tag describes different document content
HTML Example
A small HTML document:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>

<p>My first paragraph.</p>
</body>
</html>
HTML Tags
HTML tags are keywords (tag names) surrounded by angle brackets:
<tagname>content</tagname>
 HTML tags normally come in pairs like <p> and </p>

 The first tag in a pair is the start tag, the second tag is the end tag
 The end tag is written like the start tag, but with a slash before the tag name
1
Web Browsers
The purpose of a web browser (Chrome, IE, Firefox, Safari) is to read HTML documents
and display them.
The browser does not display the HTML tags, but uses them to determine how to
display the document:
HTML Page Structure

Below is a visualization of an HTML page structure:
2
HTML Versions
Since the early days of the web, there have been many versions of HTML:
Version Year
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2014
HTML BASIC EXAMPLES

HTML Documents
All HTML documents must start with a 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>
3
HTML Headings
HTML headings are defined with the <h1> to <h6> tags:
Example
<h1>This is a heading</h1>
HTML Paragraphs
HTML paragraphs are defined with the <p> tag:
Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML Links
HTML links are defined with the <a> tag:
Example
<a href="http://www.w3schools.com">This is a link</a>
The link's destination is specified in the href attribute.
Attributes are used to provide additional information about HTML elements.
4
HTML Images
HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), and size (width and height) are provided as
attributes:
Example
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
HTML ATTRIBUTES
The title Attribute
In this example, the <p> element has a title attribute. The value of the attribute is
"paragraph":
Example
<p title="paragraph">
iam a student of bca in bscccm college
</p>
The href Attribute

HTML links are defined with the <a> tag. The link address is specified in the href
attribute:
Example
<a href="http://www.google.co.in ">This is a link</a>
5
Size Attributes
HTML images are defined with the <img> tag.
The filename of the source (src), and the size of the image (width and height) are all
provided as attributes:
Example
<img src="w3schools.jpg" width="104" height="142">
The image size is specified in pixels: width="104" means 104 screen pixels wide.
The alt Attribute

The alt attribute specifies an alternative text to be used, when an HTML element cannot
be displayed.
Example
<body>
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
</body>
HTML HEADINGS
HTML Headings
Headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading.
6
Example
HTML Horizontal Rules

The <hr> tag creates a horizontal line in an HTML page.
The hr element can be used to separate content:
Example
<hr>
<hr>
The HTML <head> Element

The HTML <head> element has nothing to do with HTML headings.
The HTML <head> element is placed between the <html> tag and the <body> tag:
Example
<!DOCTYPE html>
<html>
<head>
<title>My First HTML</title>
<meta charset="UTF-8">
</head>
<body>
7
The HTML <title> Element
The HTML <title> element is meta data. It defines the HTML document's title.
The title will not be displayed in the document, but might be displayed in the browser
tab.
Example
<html>
<head>
<title>My First HTML</title>
<meta charset="UTF-8">
</head>
HTML PARAGRAPHS
HTML Paragraphs
The HTML <p> element defines a paragraph.
Example
<p>This is a paragraph</p>
<p>This is another paragraph</p>
HTML Line Breaks

The HTML <br> element defines a line break.
Use <br> if you want a line break (a new line) without starting a new paragraph:
8
Example
<body>
<p>This is<br>a para<br>graph with line breaks</p>
</body>
THE HTML STYLE ATTRIBUTE

HTML Background Color
The background-color property defines the background color for an HTML element:
This example sets the background for a page to lightgrey:
Example
<body style="background-color:lightgrey;">
</body>
HTML Text Color

The 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>
9
HTML Fonts
The 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>
HTML Text Size

The 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>
HTML Text Alignment

The text-align property defines the horizontal text alignment for an HTML element:
Example
<body>
<h1 style="text-align:center;">Centered Heading</h1>

</body>
10
HTML TEXT FORMATTING ELEMENTS
HTML Bold and Strong Formatting
The HTML <b> element defines bold text, without any extra importance.
Example
<p>This text is normal.</p>
<p><b>This text is bold</b>.</p>
The HTML <strong> element defines strong text, with added semantic "strong"
importance.
Example
<p><strong>This text is strong</strong>.</p>
HTML Italic Formatting

The HTML <i> element defines italic text, without any extra importance.
Example

<p><i>This text is italic</i>.</p>
HTML Small Formatting

The HTML <small> element defines small text:
11
Example
<h2>HTML <small>Small</small> Formatting</h2>
HTML Subscript Formatting

The HTML <sub> element defines subscripted text.
Example
<p>This is <sub>subscripted</sub> text.</p>
HTML Superscript Formatting

The HTML <sup> element defines superscripted text.
Example
<p>This is <sup>superscripted</sup> text.</p>
HTML <address> for Contact Information

The HTML <address> element defines contact information (author/owner) of a
document or article.
The <address> element is usually displayed in italic. Most browsers will add a line break
before and after the element.
12
Example
<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
HTML Comment Tags

You can add comments to your HTML source by using the following syntax:

Comments are not displayed by the browser, but they can help document your HTML.
With comments you can place notifications and reminders in your HTML:
Example



HTML LINKS
HTML Links - Syntax
In HTML, links are defined with the <a> tag:
13
<a href="url">link text</a>
Example
<a href="http://www.w3schools.com/html/">Visit our HTML tutorial</a>
The href attribute specifies the destination address (http://www.w3schools.com/html/)
The link text is the visible part (Visit our HTML tutorial).
Clicking on the link text, will send you to the specified address.
Local Links
The example above used an absolute URL (A full web address).
A local link (link to the same web site) is specified with a relative URL (without
http://www....).
Example
<a href="html_images.asp">HTML Images</a>
HTML Links - Image as Link

It is common to use images as links:
Example
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0">
</a>
HTML IMAGES
14
Example
<!DOCTYPE html>
<html>
<body>
<h2>Spectacular Mountain</h2>
<img src="pic_mountain.jpg" alt="Mountain View" style="width:304px;height:228px;">
</body>
</html>
HTML Images Syntax

In HTML, images are defined with the <img> tag.
The <img> tag is empty, it contains attributes only, and does not have a closing tag.
The src attribute specifies the URL (web address) of the image:
<img src="url" alt="some_text">
The alt Attribute

The alt attribute specifies an alternate text for an image, if the image cannot be
displayed.
If a browser cannot find an image, it will display the alt text:
Example
<img src="wrongname.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
Image Size - Width and Height

You can use the style attribute to specify the width and height of an image.
The values are specified in pixels (use px after the value):
15
Example
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
Alternatively, you can use width and height attributes. Here, the values are specified in
pixels by default:
Example
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
Width and Height or Style?

Both the width, height, and style attributes are valid in the latest HTML5 standard.
We suggest you use the style attribute. It prevents styles sheets from changing the
original size of images:
Example
<!DOCTYPE html>
<html>
<head>
<style>
img {
width:100%;
}
</style>
</head>
<body>
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
</body>
</html>
16
Using an Image as a Link
To use an image as a link, simply nest the <img> tag inside the <a> tag:
Example
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>
HTML TABLES
Defining HTML Tables
Example
<table style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Example explained:
Tables are defined with the <table> tag.
17
Tables are divided into table rows with the <tr> tag.
Table rows are divided into table data with the <td> tag.
A table row can also be divided into table headings with the <th> tag.
An HTML Table with a Border Attribute

If you do not specify a border for the table, it will be displayed without borders.
A border can be added using the border attribute:
Example
<table border="1" style="width:100%">

<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
To add borders, use the CSS border property:
Example
table, th, td {
border: 1px solid black;
}
18
An HTML Table with Cell Padding
Cell padding specifies the space between the cell content and its borders.
If you do not specify a padding, the table cells will be displayed without padding.
To set the padding, use the CSS padding property:
Example
table, th, td {
border-collapse: collapse;
}
th, td {
padding: 15px;
}
HTML Table Headings

Table headings are defined with the <th> tag.
By default, all major browsers display table headings as bold and centered:
Example
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Points</th>
</tr>
<tr>
19
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
To left-align the table headings, use the CSS text-align property:
Example
th {
text-align: left;
}
An HTML Table With a Caption

To add a caption to a table, use the <caption> tag:
Example
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
20
</tr>
</table>
A Special Style for One Table

To define a special style for a special table, add an id attribute to the table:
Example
<table id="t01">
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
</tr>
</table>
Now you can define a special style for this table:
table#t01 {
width: 100%;
background-color: #f1f1c1;
HTML LISTS
21
Example of an unordered list and an ordered list in HTML:
Unordered List:
 Item
 Item
 Item
 Item
Ordered List:
1. First item
2. Second item
3. Third item
4. Fourth item
Unordered HTML Lists

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):
Example
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Unordered HTML Lists - The Style Attribute

A style attribute can be added to an unordered list, to define the style of the marker:
22
Disc:
<ul style="list-style-type:disc">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Circle:
<ul style="list-style-type:circle">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Square:
<ul style="list-style-type:square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
None:
<ul style="list-style-type:none">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
23
Ordered HTML Lists
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items will be marked with numbers:
Example
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Ordered HTML Lists - The Type Attribute

A type attribute can be added to an ordered list, to define the type of the marker:
Numbers:
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Uppercase Letters:
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
24
Lowercase Letters:
<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Uppercase Roman Numbers:
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Lowercase Roman Numbers:
<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Horizontal Lists
HTML lists can be styled in many different ways with CSS.
One popular way, is to style a list to be displayed horizontally:
Example
<!DOCTYPE html>
<html>
25
<head>
<style>
ul#menu li {
display:inline;
}
</style>
</head>
<body>
<h2>Horizontal List</h2>
<ul id="menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>PHP</li>
</ul>
</body>
</html>
HTML FORMS
The <form> Element
HTML forms are used to collect user input.
The <form> element defines an HTML form:
<form>
.
form elements
26
.
</form>
HTML forms contain form elements.
Form elements are different types of input elements, checkboxes, radio buttons, submit
buttons, and more.
The <input> Element

The <input> element is the most important form element.
The <input> element has many variations, depending on the type attribute.
Text Input
<input type="text"> defines a one-line input field for text input:
Example
<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>
Radio Button Input

<input type="radio"> defines a radio button.
Radio buttons let a user select ONE of a limited number of choices:
Example
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
27
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>
The Submit Button

<input type="submit"> defines a button for submitting a form to a form-handler.
The form-handler is typically a server page with a script for processing input data.
The form-handler is specified in the form's action attribute:
Example
<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>
HTML FORM ELEMENTS

The <input> Element
The most important form element is the <input> element.
The <input> element can vary in many ways, depending on the type attribute.
The <select> Element (Drop-Down List)

The <select> element defines a drop-down list:
28
Example
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
The <option> elements defines the options to select.
The list will normally show the first item as selected.
You can add a selected attribute to define a predefined option.
Example
<option value="fiat" selected>Fiat</option>
The <textarea> Element

The <textarea> element defines a multi-line input field (a text area):
Example
<textarea name="message" rows="10" cols="30">

The cat was playing in the garden.
</textarea>
The <button> Element

The <button> element defines a clickable button:
Example
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
29
HTML INPUT TYPES
Input Types
This chapter describes the input types of the <input> element.
Input Type: text

<input type="text"> defines a one-line input field for text input:
Example
<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>
Input Type: password

<input type="password"> defines a password field:
Example
<form>
User name:<br>
<input type="text" name="username"><br>
User password:<br>
<input type="password" name="psw">
</form>
30
Input Type: submit
<input type="submit"> defines a button for submitting form input to a form-handler.
The form-handler is typically a server page with a script for processing input data.
The form-handler is specified in the form's action attribute:
Example
<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>
Input Type: radio

<input type="radio"> defines a radio button.
Radio buttons let a user select ONLY ONE of a limited number of choices:
Example
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>
31
Input Type: checkbox
<input type="checkbox"> defines a checkbox.
Checkboxes let a user select ZERO or MORE options of a limited number of choices.
Example
<form>
<input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle2" value="Car"> I have a car
</form>
Input Type: button

<input type="button"> defines a button:
Example
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
WHAT IS CSS
 CSS stands for Cascading Style Sheets
 CSS describes how HTML elements are to be displayed on screen, paper, or in
other media
 CSS saves a lot of work. It can control the layout of multiple web pages all at
once
 External stylesheets are stored in CSS files
32
Why Use CSS?
CSS is used to define styles for your web pages, including the design, layout and
variations in display for different devices and screen sizes.
CSS Solved a Big Problem

HTML was NEVER intended to contain tags for formatting a web page!
HTML was created to describe the content of a web page, like:
When tags like <font>, and color attributes were added to the HTML 3.2 specification, it
started a nightmare for web developers. Development of large websites, where fonts
and color information were added to every single page, became a long and expensive
process.
To solve this problem, the World Wide Web Consortium (W3C) created CSS.
CSS removed the style formatting from the HTML page!
CSS Saves a Lot of Work!

The style definitions are normally saved in external .css files.
With an external stylesheet file, you can change the look of an entire website by
changing just
33
CSS SYNTAX AND SELECTORS
CSS Syntax
A CSS rule-set consists of a selector and a declaration block:
The selector points to the HTML element you want to style.
The declaration block contains one or more declarations separated by semicolons.
Each declaration includes a CSS property name and a value, separated by a colon.
A CSS declaration always ends with a semicolon, and declaration blocks are surrounded
by curly braces.
In the following example all <p> elements will be center-aligned, with a red text color:
Example
p{
color: red;
text-align: center;
}
CSS Selectors
34
CSS selectors are used to "find" (or select) HTML elements based on their element
name, id, class, attribute, and more.
The element Selector

The element selector selects elements based on the element name.
You can select all <p> elements on a page like this (in this case, all <p> elements will be
center-aligned, with a red text color):
Example
p{
text-align: center;
color: red;
}
The id Selector
The id selector uses the id attribute of an HTML element to select a specific element.
The id of an element should be unique within a page, so the id selector is used to select
one unique element!
To select an element with a specific id, write a hash (#) character, followed by the id of
the element.
The style rule below will be applied to the HTML element with id="para1":
Example
#para1 {
text-align: center;
color: red;
}
35
The class Selector
The class selector selects elements with a specific class attribute.
To select elements with a specific class, write a period (.) character, followed by the
name of the class.
In the example below, all HTML elements with class="center" will be red and center-
aligned:
Example
.center {
text-align: center;
color: red;
}
Grouping Selectors
If you have elements with the same style definitions, like this:
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p{
text-align: center;
color: red;
}
36
It will be better to group the selectors, to minimize the code.
To group selectors, separate each selector with a comma.
CSS Comments
Comments are used to explain the code, and may help when you edit the source code at
a later date.
Comments are ignored by browsers.
A CSS comment starts with /* and ends with */. Comments can also span multiple lines:
Example
p{
color: red;
/* This is a single-line comment */
text-align: center;
}
/* This is
a multi-line
comment */
CLASSES WITH DIV

Example
<!DOCTYPE html>
<html>
37
<head>
<style>
div.cities {
background-color:black;
color:white;
margin:20px;
padding:20px;
}
</style>
</head>
<body>
<div class="cities">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United
Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</body>
</html>
HTML Layout Using <div> Elements

This example uses four <div> elements to create a multiple column layout:
38
Example
<body>
<div id="header">
<h1>City Gallery</h1>
</div>
<div id="nav">
London<br>
Paris<br>
Tokyo
</div>
<div id="section">
<h1>London</h1>
<p>London is the capital city of England. It is the most populous city in the United
Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two
millennia,
its history going back to its founding by the Romans, who named it Londinium.</p>
</div>
<div id="footer">
Copyright © bsccm.com
</div>
</body>
39
HTML STYLES - CSS
Inline Styling (Inline CSS)
Inline styling is used to apply a unique style to a single HTML element:
Inline styling uses the style attribute.
This example changes the text color of the <h1> element to blue:
Example
<h1 style="color:blue;">This is a Blue Heading</h1>
Internal Styling (Internal CSS)

Internal styling is used to define a style for one HTML page.
Internal styling is defined in the <head> section of an HTML page, within a <style>
element:
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgrey;}
h1 {color:blue;}
p {color:green;}
</style>
</head>
<body>
40
</body>
</html>
External Styling (External CSS)

An external style sheet is used to define the style for many pages.
With an external style sheet, you can change the look of an entire web site by changing
one file!
To use an external style sheet, add a link to it in the <head> section of the HTML page:
Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
</body>
</html>
An external style sheet can be written in any text editor. The file should not contain any
html tags. The style sheet file must be saved with a .css extension.
Here is how the "styles.css" looks:
body {
background-color: lightgrey;
}
h1 {
41
color: blue;
}
p{
color:green;
}
CSS Fonts
The CSS color property defines the text color to be used for the HTML element.
The CSS font-family property defines the font to be used for the HTML element.
The CSS font-size property defines the text size to be used for the HTML element.
Example
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
42
</head>
<body>
</body>
</html>
The CSS Box Model

Every HTML element has a box around it, even if you cannot see it.
The CSS border property defines a visible border around an HTML element:
Example
p{
}
The CSS padding property defines a padding (space) inside the border:
Example
p{
padding: 10px;
}
The CSS margin property defines a margin (space) outside the border:
43
Example
p{
padding: 10px;
margin: 30px;
}
The id Attribute
All the examples above use CSS to style HTML elements in a general way.
To define a special style for one special element, first add an id attribute to the element:
<p id="p01">I am different</p>
then define a style for the element with the specific id:
Example
#p01 {
color: blue;
}
The class Attribute

To define a style for a special type (class) of elements, add a class attribute to the
element:
<p class="error">I am different</p>
Example
p.error {
color: red;
}
44

HTML Basic Examples

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

HTML Basic Examples

Încărcat de

Drepturi de autor:

Formate disponibile

What is HTML

HTML is a markup language for describing web documents (web pages).

 HTML stands for Hyper Text Markup Language

<h1>My First Heading</h1>

 HTML tags normally come in pairs like <p> and </p>

HTML Page Structure

HTML BASIC EXAMPLES

<h1>My First Heading</h1>

<p>My first paragraph.</p>

<a href="http://www.w3schools.com">This is a link</a>

The link's destination is specified in the href attribute.

Attributes are used to provide additional information about HTML elements.

<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">

The href Attribute

<a href="http://www.google.co.in ">This is a link</a>

<img src="w3schools.jpg" width="104" height="142">

The alt Attribute

HTML Horizontal Rules

The hr element can be used to separate content:

The HTML <head> Element

HTML Line Breaks

THE HTML STYLE ATTRIBUTE

This example sets the background for a page to lightgrey:

HTML Text Color

<h1 style="color:blue;">This is a heading</h1>

<h1 style="font-family:verdana;">This is a heading</h1>

HTML Text Size

<h1 style="font-size:300%;">This is a heading</h1>

HTML Text Alignment

<h1 style="text-align:center;">Centered Heading</h1>

<p>This text is normal.</p>

<p><b>This text is bold</b>.</p>

<p>This text is normal.</p>

<p><strong>This text is strong</strong>.</p>

HTML Italic Formatting

<p>This text is normal.</p>

HTML Small Formatting

<h2>HTML <small>Small</small> Formatting</h2>

HTML Subscript Formatting

<p>This is <sub>subscripted</sub> text.</p>

HTML Superscript Formatting

<p>This is <sup>superscripted</sup> text.</p>

HTML <address> for Contact Information

HTML Comment Tags

<a href="http://www.w3schools.com/html/">Visit our HTML tutorial</a>

The href attribute specifies the destination address (http://www.w3schools.com/html/)

<a href="html_images.asp">HTML Images</a>

HTML Links - Image as Link

HTML Images Syntax

<img src="url" alt="some_text">

The alt Attribute

If a browser cannot find an image, it will display the alt text:

<img src="wrongname.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

Image Size - Width and Height

The values are specified in pixels (use px after the value):

<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">

Width and Height or Style?

<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

Tables are defined with the <table> tag.

An HTML Table with a Border Attribute

A border can be added using the border attribute: