HTML Tute

HTML
HTML stands for Hypertext Markup Language, and it is the most widely used language to write Web Pages.
 Hypertext refers to the way in which Web pages (HTML documents) are linked together. Thus, the
link available on a webpage is called Hypertext.
 As its name suggests, HTML is a Markup Language which means you use HTML to simply "mark-
up" a text document with tags that tell a Web browser how to structure it to display.
Basic HTML Document

<html>
<head>
<title>This is document title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Document content goes here.....</p>
</body>
</html>
HTML BASIC TAGS

<html> This tag encloses the complete HTML document
and mainly comprises of document header which is
represented by <head>...</head> and document
body which is represented by <body>...</body>
tags.
<head> This tag represents the document's header which

can keep other HTML tags like <title>, <link> etc.
<title> The <title> tag is used inside the <head> tag to

mention the document title.
<body> This tag represents the document's body which

keeps other HTML tags like <h1>, <div>, <p> etc.
<h1> This tag represents the heading.
<p> This tag represents a paragraph.
Heading Tags
Any document starts with a heading. You can use different sizes for your headings. HTML also has six levels of headings,
which use the elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>.
Paragraph Tag
The <p> tag offers a way to structure your text into different paragraphs. Each paragraph of text should go in between
an opening <p> and a closing </p> tag
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<p>Here is a first paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
</body>
</html>
Line Break Tag
Whenever you use the<br> or <br /> element, anything following it starts from the next line. This tag is an example of
an empty element, where you do not need opening and closing tags, as there is nothing to go in between them.
<html>
<head>
<title>Line Break Example</title>
</head>
<body>
<p>Hello<br />
You delivered your assignment on time.<br />
Thanks<br />
Mahesh</p>
</body>
</html>
Centering Content
You can use <center> tag to put any content in the center of the page or any table cell.
<html>
<head>
<title>Centring Content Example</title>
</head>
<body>
<p>This text is not in the center.</p>
<center>
<p>This text is in the center.</p>
</center>
</body>
</html>
Horizontal Lines
Horizontal lines are used to visually break-up sections of a document. The <hr> tag creates a line from the current
position in the document to the right margin and breaks the line accordingly.
<html>
<head>
<title>Horizontal Line Example</title>
</head>
<body>
<p>This is paragraph one and should be on top</p>
<hr />
<p>This is paragraph two and should be at bottom</p>
</body>
</html>
HTML – ATTRIBUTES - An attribute is used to define the characteristics of an HTML element and is placed inside
the element's opening tag. All attributes are made up of two parts: a name and a value:
<html>
<head>
<title>Align Attribute Example</title>
</head>
<body>
<p align="left">This is left aligned</p>
<p align="center">This is center aligned</p>
<p align="right">This is right aligned</p>
</body>
</html>
HTML – FORMATTING
<html>
<head>
<title>My web page1</title>
</head>
<body>
<p>Following texts show bold,italic and underlined texts</p>
<p>This is a <b>bold</b> text. </p>
<p>This is a <i>italic</i> text. </p>
<p>This is an <u>underlined</u> text.</p>
</body>
</html>
<html>
<head>
<title>My web page2</title>
</head>
<body>
<p>Following texts show superscript and subscript</p>
<p>This is a <sup> superscript </sup> text. </p>
<p>This is a <sub> subscript </sub> text. </p>
<p>This is a <strike>strikethrough</strike>text. </p>
</body>
</html>
Text Abbreviation
You can abbreviate a text by putting it inside opening <abbr> and closing </abbr> tags. If present, the title attribute
must contain this full description and nothing else.
<html>
<head>
<title>Text Abbreviation</title>
</head>
<body>
<p>My best friend's name is <abbr title="Abhishek">Abhy</abbr>.</p>
</body>
</html>
Text Direction
The <bdo>...</bdo> element stands for Bi-Directional Override and it is used to override the current text direction.
Example
<html>
<head>
<title>Text Direction Example</title>
</head>
<body>
<p>This text will go left to right.</p>
<p><bdo dir="rtl">This text will go right to left.</bdo></p> HTML
</body>
</html>
HTML – COMMENTS
Comments help you and others understand your code and increases code readability.
HTML comments are placed in between  tags. So, any content placed with-in  tags will be treated as
comment and will be completely ignored by the browser.
<html>
<head> 
<title>This is document title</title>
</head> 
<body>
<p>Document content goes here.....</p>
</body>
</html>
HTML – IMAGES
<img src="Image URL" ... attributes-list/>
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src="imagename.png" alt="This is an image" />
<img src= "D:\Web designing\village site\image1.jpg" alt="This is an image added to the webpage using its url" />
</body>
</html>
Set Image Width/Height

<html>
<head>
<title>Set Image Width and Height</title>
</head>
<body>
<p>Setting image width and height</p>
<img src="test.png" alt="Test Image" width="150" height="100"/>
</body>
</html>
Set Image Border

<html>
<head>
<title>Set Image Border</title>
</head>
<body>
<p>Setting image Border</p>
<img src="test.png" alt="Test Image" border="3"/>
</body>
</html>
Set Image Alignment
<html>
<head>
<title>Set Image Alignment</title>
</head>
<body>
<p>Setting image Alignment</p>
<img src="test.png" alt="Test Image" border="3" align="right"/>
</body>
</html>
HTML – TABLES
The HTML tables are created using the <table> tag in which the <tr> tag is used to create table rows and <td> tag is
used to create data cells.
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border="1">
<tr>
<td>Row 1, Column 1</td>
</tr>
<tr>
</tr>
</table>
</body>
</html>
Table Heading
Table heading can be defined using <th> tag.
<html>
<head>
<title>HTML Table Header</title>
</head>
<body>
<table border="1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>
Using captions for tables
<caption> Ethnic population </caption>
This caption can be aligned to “Top”, “Middle” or “Bottom”.

Ex : <caption align=”Bottom”> Ethnic population </caption>
Cell Padding
The space between the data in each cell and the border of the cell is defined by the Cell Padding.
<table cellpadding=”8”>
Cell Spacing
The space between the cells in the table is defined by the Cell spacing. (width of the border)
<table cellspacing=”8”>
<html>
<head>
<title>HTML Table Cellpadding</title>
</head>
<body>
<table border="1" cellpadding="5" cellspacing="5">
<caption> Payments </caption>
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>
Colspan and Rowspan Attributes

You will use colspan attribute if you want to merge two or more columns into a single column. Similar way you will use
rowspan if you want to merge two or more rows.
<html>
<head>
<title>HTML Table Colspan/Rowspan</title>
</head>
<body>
<table border="1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>
</table>
</body>
</html>
Tables Backgrounds
You can set table background using one of the following two ways:
 bgcolor attribute - You can set background color for whole table or just for one cell.
 background attribute - You can set background image for whole table or just for one cell.
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border="1" bordercolor="green" bgcolor="yellow">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</table>
</body>
</html>
<html>
<head>
<title>HTML Table Background</title>
HTML
55
</head>
<body>
<table border="1" bordercolor="green" background="D:/images/test.png">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</table>
</body>
</html>
Table Height and Width

<html>
<head>
<title>HTML Table Width/Height</title>
</head>
<body>
<table border="1" width="400" height="150">
HTML
56
<tr>
</tr>
<tr>
</tr>
</table>
</body>
</html>
HTML – LISTS
HTML offers web authors three ways for specifying lists of information. All lists must contain one or more list elements.
Lists may contain:
 <ul> - An unordered list. This will list items using plain bullets.
 <ol> - An ordered list. This will use different schemes of numbers to list your items.
HTML Unordered Lists
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul>
<li>English</li>
<li>Sinhala</li>
<li>Maths</li>
<li>Science</li>
</ul>
</body>
</html>
The type Attribute

You can use type attribute for <ul> tag to specify the type of bullet you like. By default, it is a disc. Following are the
possible options:
<ul type="square">
<ul type="disc">
<ul type="circle">
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type="square">
<li>English</li>
<li>Sinhala</li>
<li>Maths</li>
<li>Science</li>
</ul>
</body>
</html>
HTML Ordered Lists

<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>
The type Attribute

<ol type="1"> - Default-Case Numerals.
<ol type="I"> - Upper-Case Numerals.
<ol type="i"> - Lower-Case Numerals.
<ol type="a"> - Lower-Case Letters.
<ol type="A"> - Upper-Case Letters.
You can use start attribute for <ol> tag to specify the starting point of numbering you need. Following are the possible
options:
<ol type="1" start="4"> - Numerals starts with 4.
<ol type="I" start="4"> - Numerals starts with IV.
<ol type="i" start="4"> - Numerals starts with iv.
<ol type="a" start="4"> - Letters starts with d.
<ol type="A" start="4"> - Letters starts with D.
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type="I">
<li>English</li>
<li>Sinhala</li>
<li>Maths</li>
<li>Science</li>
</ol>
</body>
</html>
HTML – TEXT LINKS

A webpage can contain various links that take you directly to other pages and even specific parts of a given page. These
links are known as hyperlinks.
<a href="Document URL" ... attributes-list>Link Text</a>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<p>Contact me on <a href="http://www.facebook.com" target="_self">Facebook</a> </p>
</body>
</html>
HTML – IMAGE LINKS
<html>
<head>
<title>Image Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href="http://www.tutorialspoint.com" >
<img src=" logo.png" alt="Additional information" border="0"/>
</a>
</body>
</html>
HTML – BACKGROUNDS
HTML provides you following two good ways to decorate your webpage background.
 Html Background with Colors
 Html Background with Images
<html>
<head>
<title>Background colour</title>
</head>
<body bgcolor=”blue”>
<p>How to use a background colour</p>
</body>
</html>
<html>
<head>
<title>Background image</title>
</head>
<body background=”blue”>
<p>How to use an image for the background</p>
</body>
</html>
HTML Fonts
Set Font Size
You can set content font size using size attribute. The range of accepted values is from 1(smallest) to 7(largest). The
default size of a font is 3.
<html>
<head>
<title>Setting Font Size</title>
</head>
<body>
<font size="1">Font size="1"</font><br />
<font size="7">Font size="7"</font>
</body>
</html>
Setting Font Face
You can set font face using face attribute but be aware that if the user viewing the page doesn't have the font installed,
they will not be able to see it. Instead user will see the default font face applicable to the user's computer.
<html>
<head>
<title>Font Face</title>
</head>
<body>
<font face="Times New Roman" size="5">Times New Roman font</font><br />
<font face="Arial" size="5">Verdana font </font><br />
<font face="Comic sans MS" size="5">Comic Sans MS font </font><br />
</body>
</html>
Setting Font Color

You can set any font color you like using color attribute. You can specify the color that you want by either the color
name or hexadecimal code for that color.
<html>
<head>
<title>Setting Font Color</title>
</head>
<body>
<font color="#FF00FF">This text is in pink</font><br />
<font color="red">This text is red</font>
</body>
</html>
<html>
<head>
<title>Setting Font Color</title>
</head>
<body>
<font size="6" face="impact" color="#FF00FF">This text is in pink</font><br />
<font color="red">This text is red</font>
</body>
</html>
HTML <embed> Tag

The HTML <embed> tag represents a container for external application or interactive content.
<html>
<head>
<title>HTML Embed Tag</title>
</head>
<body>
<embed src="c:/users/admin/desktop/video1.mp4" width="250" height="100" />
</body>
</html>
HTML <marquee> Tag
The HTML <marquee> tag is used for scrolling piece of text or image displayed either horizontally across or vertically
down your web site page depending on the settings.
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee>This is basic example of marquee</marquee>
<marquee direction="up">The direction of text will be from bottom to top.</marquee>
</body>
</html>
HTML <optgroup> Tag

The HTML <optgroup> tag is used for grouping related options within your select list.
<html>
<head>
<title>HTML optgroup Tag</title>
</head>
<body>
<select>
<optgroup label="Most popular">
<option value ="chrome">Google Chrome</option>
<option value ="firefox">Mozilla Firefox</option>
<option value ="safari">Safari</option>
</optgroup>
<optgroup label="Not popular list">
<option value =" dooble ">Dooble Browser</option>
<option value ="epic">Epic Browser</option>
</optgroup>
</select>
</body>
</html>
HTML – FORMS
HTML Forms are required, when you want to collect some data from the site visitor. For example, during user
registration you would like to collect information such as name, email address, credit card, etc.
Type Description
<input type="text"> Defines a one-line text input field
Defines a radio button (for selecting one of many

<input type="radio">
choices)
<input type="submit"> Defines a submit button (for submitting the form)
Text Input
<input type="text"> defines a one-line input field for text input:
<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>
* the default width of a text field is 20 characters.
Radio Button Input

<input type="radio"> defines a radio button.
Radio buttons let a user select ONE of a limited number of choices:
<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>
The Submit Button

<input type="submit"> defines a button for submitting the form data 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:
<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Adams"><br>
Last name:<br>
<input type="text" name="lastname" value="Hunt"><br><br>
<input type="submit" value="Submit">
</form>
The Reset Button

<input type="reset"> defines a button for clearing the text fields.
<input type="reset" value="Reset">
Password Input
<html>
<head>
<title>Password Input Control</title>
</head>
<body>
<form >
User ID : <input type="text" name="user_id" />
<br>
Password: <input type="password" name="password" />
</form>
</body>
</html>
Styling HTML with 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.
CSS can be added to HTML elements in 3 ways:
 Inline - by using the style attribute in HTML elements
 Internal - by using a <style> element in the <head> section
 External - by using an external CSS file
Inline CSS
An inline CSS is used to apply a unique style to a single HTML element.
<h1 style="color:blue;">This is a Blue Heading</h1>
Internal CSS
An internal CSS is used to define a style for a single HTML page.
<html>
<head>
<style>
body {background-color: yellow;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>
External CSS
An external style sheet is used to define the style for many HTML pages.
With an external style sheet, you can change the look of an entire web site, by changing one file!
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>
FONTS REFERENCE
body {font-family:"Arial";}
or
<body style="font-family:Arial;">
<html>
<head>
<title>Font Setting Using CSS</title>
</head>
<body>
<p>Change any of the style and try it.</p>
<div style="font-family:monotype corsiva;">This is demo for font family</div>
<br />
<div style="font-size:120%;">This is demo for font size</div>
<br />
<div style="font-size:14pt;">This is demo for font size</div>
</body>
</html>

HTML Tute

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Tute

Uploaded by

Copyright:

Available Formats

HTML

Basic HTML Document

HTML BASIC TAGS

<head> This tag represents the document's header which

<title> The <title> tag is used inside the <head> tag to

<body> This tag represents the document's body which

<h1> This tag represents the heading.

<p> This tag represents a paragraph.

Set Image Width/Height

Set Image Border

This caption can be aligned to “Top”, “Middle” or “Bottom”.

Colspan and Rowspan Attributes

Table Height and Width

HTML Unordered Lists

The type Attribute

HTML Ordered Lists

The type Attribute

HTML – TEXT LINKS

<a href="Document URL" ... attributes-list>Link Text</a>

Setting Font Color

HTML <embed> Tag

HTML <optgroup> Tag

<input type="text"> Defines a one-line text input field

Defines a radio button (for selecting one of many

<input type="submit"> Defines a submit button (for submitting the form)

Radio Button Input

Radio buttons let a user select ONE of a limited number of choices:

The Submit Button

The Reset Button

You might also like