HTML Manual
Uploaded by
Ajay ParmarHTML Manual
Uploaded by
Ajay ParmarP. N.
Data System
Simplified Computer Training
Since 1992
Hyper Text Mark-up Language
HTML
© Copyright Notice
All rights reserved to Ajay Parmar, P. N. Data System
P. N. Data System 1
Lesson – 1 – Website Fundamentals
Website development involve three computers
1. Development Server
Computer on which you create all pages and contents.
2. Web Server
Computer where you store all webpages and other files.
3. Client
Computer used by user to view your website.
Frontend
Frontend means on client computer how web page appear. To create a frontend we use HTML,
CSS, JavaScript, jQuery, AJAX, Fireworks, Flash, Photoshop, Corel Draw, Illustrator etc. tools.
Backend
Backend means a programing for business logic on web server. To create a backend
programming we use [Link], JSP, PHP, C#.net, [Link], Java, SQL Server, Oracle etc. tools.
Readymade Websites
You can use Blogger, WordPress, Drupal or Joomla to create readymade quick websites.
P. N. Data System 2
Lesson – 2 – HTML Fundamentals
• HTML mean Hyper Text Mark-up Language
• Word which comes between < and > sign is called tag.
HTML document have to sections.
(1) Head section
Which is useful to write browser related tags and programs.
(2) Body section
Which is useful to display text, image, etc. on the web page.
HTML document have a two type of tags.
(1) Container tag
Container tag contains other tags or text and start with normal tag like <html> and ends
with / like </html>
(2) Empty tag
Empty tags have only one tag like <br>
(3) Attributes
Attributes are the extra information about tag and it comes between < >
P. N. Data System 3
Lesson – 3 – Basic Commands Part 1
To create a new web page
• Fist start notepad
• Type your html program
• Save as .html file.
To start (Run) a web page
• First open my documents folder
• Double click on .html file.
To reopen web page in notepad
• In my documents Right Click on file name
• Select open with notepad.
<html> </html>
This tag is used to show starting and ending point of HTML page or document. All other tags
must me enclosed inside these two tags.
<head> </head>
It is the starting and ending point of head section.
<body> </body>
It is the starting and ending point of body section.
P. N. Data System 4
<title> </title>
This tag comes under head section and use change browser’s title line.
<h1> </h1> to <h6> </h6>
These six tags are used to display various heading lines.
<p> </p>
This tag is used to create a paragraph text.
<hr>
This is an empty tag and used to draw a horizontal line.
<br>
Break a line.
P. N. Data System 5
Lesson – 4 – Basic Commands Part 2
<b> </b>
Bold text
<i> </i>
Italic text
<u> </u>
Underline text
<sub> </sub>
Sub script text.
Ex. H2O
<sup> </sup>
Super script.
Ex .H2O
<font> </font>
With this tag you can change font size, color etc.
• face = “Arial Black” for font type
• size = “3” for font size
• color = “Red” for font color
P. N. Data System 6
Lesson – 5 – Lists
<ol> </ol> Ordered List
This tag is used to create sequential list. Each option of list must be shown with <Li> tag.
• To change list numbering use type=”A”, “a”, “I”, “i”, or “1” attributes.
• To change list starting no use start =”5” attributes.
<ul> </ul> Unordered List
This tag is used to create bulleted list.
• To change symbols use type = “square”, “circle”, or “disc” attribute.
P. N. Data System 7
Lesson – 6 – Tables
<table> </table>
This tag is used to show starting and ending point of table, all other table related tags comes
under this tag.
<tr> </tr> Table row
This tag is used to show starting and ending point of table row <td>, <th> tags comes under this
tag.
<th> </th> Table column heading
Starting and ending point of column heading.
<td> </td> Table column data
Starting and ending point of column data.
Attributes which comes under only table tag.
• border = “3”
To change border width of table
• bordercolor = “red”
To change border color
• cellpadding = “10”
Space between border and data
• cellspacing = “10”
Space between two border lines
P. N. Data System 8
Attributes which comes under <table> and <tr>
• height =”70%”
This will change table or rows height.
Attributes which comes under table, th , td tags.
• width = “70%”
This will change to table or column.
Attributes which comes under any table tags.
• bgcolor = “Pink”
To change background color of table, row or cell
• align = “center”, “left”, or “right”
To change horizontal alignment of table, row or cell
• valign = “bottom”, “top”, or “middle”
To change vertical alignment of table, row or cell
P. N. Data System 9
Lesson – 7 – Images
To bring image on the web page
• Fist open image file in Photoshop change its size etc.
• Save as (dot) .jpg file in your folder.
• Then in html file type <img src =”[Link]”> tag. Here image1 is an image file name.
P. N. Data System 10
Lesson – 8 – Links
To create links use <a href = “[Link]”> any word </a> tag. Here [Link] is a target
file. When you click on any word with Mouse target file will be opened.
P. N. Data System 11
Lesson – 9 – Form
<form> </form>
This is a main tag for creating user input form. All other forms related tags enclose under these
two tags.
<input type = “text” size = “30”, maxlength = “10” >
To display single line text box, you can increase or decrease box size with size attribute. You can
control inputted character length by maxlength attribute.
<input type = “password”>
To create password text box in which characters displayed as dot.
< input type = “radio” name = “variable “> text
To create a multiple option round button, Variable for all option must be same; text will
appear as an option text.
Note:
Type “Checked” word inside tag to select that option when page is first loaded.
<input type = “checkbox” > text
To create square box which can be selected with [✓] make.
<input type = “submit” value = “Submit Data” >
To create push button and value text will be appear on the button. This button is used to
submit form data to the server.
P. N. Data System 12
<input type = “reset” value = “Clear Data” >
To create a reset button which erase all form data.
<input type = “button” value = “Ok” >
To create a simple button
< textarea rows = “5” cols = “30”> text </textarea>
To create multiline text box. You can control height and width of box with rows and cols
attribute.
<select> </select>
To create drop down list. You can type each option to the list with <option> tag, Type selected
word inside any one option which you want as first selected option.
P. N. Data System 13
Lesson – 10 – HTML5 Other Tags
<!doctype html>
To show HTML5 document. This tag is a first tag in html file.
<!-- comments -->
This tag used to show comments.
<meta name="keywords" content="HTML Gujarati Tutorial">
This tag shows page main points to the search engines.
<meta name="description" content="Tutorials in Gujarati">
This tag describe page to the search engines.
<meta name="author" content="Ajay Parmar">
This tag shows author to the search engines.
<meta charset="UTF-8">
This tag shows character set to the search engines and browsers.
P. N. Data System 14
<iframe src="website name" width="600" height="400" seamless>
<p>Your browser does not support iframes.</p>
</iframe>
This tag shows other website or webpage inside current page.
• Src is used to show which website or page is displayed.
• Width is used to fix a width of window inside current page.
• Height is used to fix a height of window inside current page.
• Seamless is used to remove border from window.
• <p> tag is used to display message on older browser.
P. N. Data System 15
Lesson – 11 – HTML5 Audio and Video Tags
<audio src=”audio filename” controls autoplay>
<p>Older browser message</p>
</audio>
• This tag is used to play audio file on the page.
• Use controls attribute to display controls on the page.
• Use autoplay attribute to start automatic play when page first load.
• If you like to play different audio in different browser then use
<Source src=”filename” > tag
<video src=”video filename” controls autoplay>
<p>Older browser message</p>
</video>
• This tag is used to play video file on the page.
• Use controls attribute to display controls on the page.
• Use autoplay attribute to start automatic play when page first load.
• If you like to play different video in different browser then use
<Source src=”filename” > tag
P. N. Data System 16