HTML Book Technosters

HTML – Hyper Text Markup Language 1
Table of Contents
HTML Formatting ............................................................................................................................................ 3
Bold ............................................................................................................................................................. 3
Italic Text..................................................................................................................................................... 3
Underlined Text .......................................................................................................................................... 3
Strike Text ................................................................................................................................................... 4
Monospaced Font ....................................................................................................................................... 4
Superscript Text .......................................................................................................................................... 4
Subscript Text ............................................................................................................................................. 5
Inserted Text ............................................................................................................................................... 5
Smaller Text ................................................................................................................................................ 5
Larger Text .................................................................................................................................................. 6
Deleted Text................................................................................................................................................ 6
Emphasized Text ......................................................................................................................................... 6
Marked Text/Highlight Text ........................................................................................................................ 7
Strong Text .................................................................................................................................................. 7
Text Abbreviation ....................................................................................................................................... 7
Text Direction ............................................................................................................................................. 8
Quoting Text ............................................................................................................................................... 8
Short Quotations ........................................................................................................................................ 8
Address Text ............................................................................................................................................... 9
HTML comments ........................................................................................................................................... 10
Normal comment ...................................................................................................................................... 10
Conditional Comments ............................................................................................................................. 10
Using Comment Tag .................................................................................................................................. 10
HTML Images ................................................................................................................................................ 11
HTML Link ..................................................................................................................................................... 12
Linking to other pages on the same site (Relative URL) ........................................................................... 12
Linking to other sites (absolute URL) ........................................................................................................ 12
URL (Uniform Resource Locator) .................................................................................................................. 13
E-mail Link ................................................................................................................................................. 13
SMS Link .................................................................................................................................................... 13
Target Link ................................................................................................................................................ 13
Phone Link ................................................................................................................................................ 13
Download Link .......................................................................................................................................... 13
Move to Top in Page ................................................................................................................................. 13
Linking to a specific part of the same page .............................................................................................. 13
Technosters Technologies OPC Pvt. Ltd.

8/195, Engineer’s Colony, Opp. Omaxe Mall, Bye Pass Road, Agra – 282005.
2 HTML – Hyper Text Markup Language
Base Path/URL........................................................................................................................................... 13
HTML Table ................................................................................................................................................... 15
Table Headings .......................................................................................................................................... 16
Cellpadding and Cellspacing Attributes .................................................................................................... 16
Colspan and Rowspan Attributes .............................................................................................................. 17
Table Header, Body, and Footer ............................................................................................................... 18
Nested Tables............................................................................................................................................ 18
HTML Form.................................................................................................................................................... 19
Form .......................................................................................................................................................... 19
<form> . form elements . .............................................................................................................. 19
</form> ................................................................................................................................................... 19
Input Restrictions .................................................................................................................................... 22
HTML Input Attributes .................................................................................................................................. 24
HTML5 Attributes.................................................................................................................................... 25

www.technosters.com info@technosters.com +91-9759597195
HTML Formatting
Bold
Anything that appears within <b>...</b> tag is displayed in bold.
<!DOCTYPE html>
<html>
<head>
<title>Bold Text Example</title>
</head>
<body>
<p>The following word uses a <b>bold</b></p>
</body>
</html>
Italic Text
Anything that appears within <i>...</i> tag is displayed in italic.
<!DOCTYPE html>
<html>
<head>
<title>Italic Text Example</title>
</head>
<body>
<p>The following word uses a <i>italicized</i> </p>
</body>
</html>
Underlined Text
Anything that appears within <u>...</u> tag is displayed with underline.
<!DOCTYPE html>
<html>
<head>
<title>Underlined Text Example</title>
</head>
<body>
<p>The following word uses a <u>underlined</u> </p>
</body>
</html>

Strike Text
Anything that appears within <strike>...</strike> tag is displayed with
strikethrough, which is a thin line through the text.
<!DOCTYPE html>
<html>
<head>
<title>Strike Text Example</title>
</head>
<body>
<p>The following word uses a <strike>strikethrough</strike> </p>
</body>
</html>
Monospaced Font
The content of a <tt>...</tt> tag is written in monospaced font. Most of the fonts
are known as variable-width fonts because different letters are of different widths
(for example, the letter 'm' is wider than the letter 'i'). In a monospaced font,
however, each letter has the same width.
<!DOCTYPE html>
<html>
<head>
<title>Monospaced Font Example</title>
</head>
<body>
<p>The following word uses a <tt>monospaced</tt></p>
</body>
</html>
Superscript Text
The content of a <sup>...</sup> tag is written in superscript. Displayed half a
character's height above the other characters.
<!DOCTYPE html>
<html>
<head> <title>Superscript Text Example</title> </head>
<body>
<p>The following word uses a superscript 21<sup>St</sup> </p>
</body>
</html>

Subscript Text
The content of a <sub>...</sub> tag is written in subscript. Displayed half a
character's height below the other characters.
<!DOCTYPE html>
<html>
<head>
<title>Subscript Text Example</title>
</head>
<body>
<p>The following word uses a subscript H<sub>2</sub>So<sub>4</sub></p>
</body>
</html>
Inserted Text
Anything that appears within <ins>...</ins> tag is displayed as inserted text.
<!DOCTYPE html>
<html>
<head>
<title>Inserted Text Example</title>
</head>
<body>
<p>I want to drink <del>cola</del> <ins>wine</ins></p>
</body>
</html>
Smaller Text
The content of the <small>...</small> tag is displayed one font size smaller than
the rest of the text.
<!DOCTYPE html>
<html>
<head>
<title>Smaller Text Example</title>
</head>
<body>
<p>The following word uses a <small>small</small></p>
</body>
</html>

Larger Text
The content of the <big>...</big> tag is displayed one font size larger than the
rest of the text.
<!DOCTYPE html>
<html>
<head>
<title>Larger Text Example</title>
</head>
<body>
<p>The following word uses a <big>big</big></p>
</body>
</html>
Deleted Text
Anything that appears within <del>...</del> tag, is displayed as deleted text.
<!DOCTYPE html>
<html>
<head>
<title>Deleted Text Example</title>
</head>
<body>
<p>I want to drink <del>cola</del></p>
</body>
</html>
Emphasized Text
Anything that appears within <em>...</em> tag is displayed as emphasized text.
<!DOCTYPE html>
<html>
<head>
<title>Emphasized Text Example</title>
</head>
<body>
<p>The following word uses a <em>emphasized</em> </p>
</body>
</html>

Marked Text/Highlight Text

Anything that appears with-in <mark>...</mark> tag, is displayed as marked with
yellow ink.
<!DOCTYPE html>
<html>
<head>
<title>Marked Text Example</title>
</head>
<body>
<p>The following word has been <mark>marked</mark> with yellow</p>
</body>
</html>
Strong Text
Anything that appears within <strong>...</strong> tag is displayed as important
text.
<!DOCTYPE html>
<html>
<head>
<title>Strong Text Example</title>
</head>
<body>
<p>The following word uses a <strong>strong</strong> </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.
<!DOCTYPE html>
<html>
<head> <title>Text Abbreviation</title> </head>
<body>
<p>My best friend's name is <abbr title="Hyper Text Markup Language">HTML</abbr>.</p>
</body>
</html>

Text Direction
The <bdo>...</bdo> tag stands for Bi-Directional Override and it is used to
override the current text direction.
<!DOCTYPE html>
<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>
</body>
</html>
Quoting Text
When you want to quote a passage from another source, you should put it in
between <blockquote>...</blockquote> tags.
Text inside a <blockquote> tag is usually indented from the left and right edges.
<!DOCTYPE html>
<html>
<head> <title>Blockquote Example</title> </head>
<body>
<p>The following description of XHTML is taken from the W3C Web site:</p>
<blockquote>XHTML 1.0 is the W3C's first Recommendation for XHTML, following on from
earlier work on HTML 4.01, HTML 4.0, HTML 3.2 and HTML 2.0.</blockquote>
</body>
</html>
Short Quotations
The <q>...</q> tag is used when you want to add a double quote within a sentence.
<!DOCTYPE html>
<html>
<head> <title>Double Quote Example</title> </head>
<body>
<p>Smit is in Spain, <q>I think I am wrong</q>.</p>
</body>
</html>

Address Text
The <address>...</address> tag is used to contain any address.
<!DOCTYPE html>
<html>
<head>
<title>Address Example</title>
</head>
<body>
<address>8/195, Engineer’s Colony Opp. Omaxe Mall Bye Pass Road, Agra</address>
</body>
</html>

HTML comments
Comment is a piece of code which is ignored by any web browser. It is a good practice
to add comments into your HTML code, especially in complex documents, to indicate
sections of a document, and any other notes to anyone looking at the code. Comments
help you and others understand your code and increases code readability.
Normal comment
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.
<!DOCTYPE html>
<html>
<head> 
<title>This is document title</title>
</head> 
<body> <p>Document content goes here.....</p> </body>
</html>
Conditional Comments
Conditional comments only work in Internet Explorer (IE) on Windows but they are
ignored by other browsers. They are supported from Explorer 5 onwards, and you
can use them to give conditional instructions to different versions of IE.
<!DOCTYPE html><html>
<head>
<title>Conditional Comments</title>

</head>
<body> <p>Document content goes here.....</p> </body>
</html>
Using Comment Tag

There are few browsers that support <comment> tag to comment a part of HTML
code.
<!DOCTYPE html><html>
<head> <title>Using Comment Tag</title> </head>
<body> <p>This is <comment>not</comment> Internet Explorer.</p> </body>
</html>

HTML Images
You can insert any image in your web page by using <img> tag. Following is the
simple syntax to use this tag.
The <img> tag is an empty tag, which means that it can contain only list of attributes
and it has no closing tag.
<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src="images/test.png" alt="Test Image" />
</body>
</html>
You can use PNG, JPEG or GIF image file based on your comfort but make sure
you specify correct image file name in src attribute. Image name is always case
sensitive.
The alt attribute is a mandatory attribute which specifies an alternate text for an
image, if the image cannot be displayed.
You can set image width and height based on your requirement
using width and height attributes. You can specify width and height of the image in
terms of either pixels or percentage of its actual size.
By default, image will have a border around it, you can specify border thickness in
terms of pixels using border attribute. A thickness of 0 means, no border around the
picture.
By default, image will align at the left side of the page, but you can use align attribute
to set it in the right.
Note: align attribute in image possible values are left (By Default) or right Only.
How to Align image in center?
You can use image tag inside the center tag.
<center><img src="…"></center>

HTML Link
The HTML anchor tag <a> defines a hyperlink that links one page to another page.
The "href" attribute is the most important attribute of the HTML <a> tag.
The HTML anchor tag <a> defines a hyperlink that links one page to another page.
Users can click on anything between the opening <a> tag and the closing </a> tag.
You specify which page you want to link to using the href attribute.
Linking to other pages on the same site (Relative URL)

<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href="index.html">Home</a>
<a href="about.html">About</a>
</body>
</html>
When you are linking to other pages within the same site, you do not need to specify
the domain name in the URL. You can use a shorthand known as a relative URL.
Linking to other sites (absolute URL)

<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href="http://www.google.co.in/ ">Google</a>
<a href="http://www.yahoo.com/">Yahoo</a>
</body>
</html>
When you link to a different website, the value of the href attribute will be the full web
address for the site, which is known as an absolute URL (Uniform Resource Locator).

URL (Uniform Resource Locator)

URL stands for Uniform Resource Locator. Every web page has its own URL. This is
the web address that you would type into a browser if you want to visit that specific
page.
eg: href="http://www.technosters.com"
An absolute URL starts with the domain name for that site, and can be followed by the
path to a specific page. If no page is specified, the site will display the homepage.
eg: href=http://www.technosters.com/contact.php
E-mail Link
Open mail dialog in smart phones and computer with the help of mailto:
<a href="mailto:info@technosters.com">info@technosters.com</a>
SMS Link
Open SMS dialog in smart phones with the help of sms:
<a href="sms:9759597195 ">SMS 9759597195 </a>
Target Link
target attribute is used to specify the location where linked document is opened.
Following are possible options: (_blank, _self, _new)
<a href="http://www.technosters.com" target="_new">Technosters</a>
Phone Link
Open phone dialer in smart phones with the help of tel:
<a href="tel:9759597195">9759597195</a>
Download Link
By using download=" " attribute in anchor tag to download file.
<a href="image.jpg" download=""><img src="image.jpg"></a>
Move to Top in Page

By Using #top value of href="" attribute for move to top in same page.
<a href="#top" >Top</a>
Linking to a specific part of the same page

<a href="#html" >HTML</a>
<h2 id="html" >HTML</h2>
Base Path/URL
Specify a default URL and a default target for all links on a page:
<base href="root_url_of_app">


HTML Table
HTML table is used to display data in tabular form (row * column). There can be many
columns in a row.
<table>
The <table> tag is used to create a table. The contents of the table are written out
row by row.
<tr>
You indicate the start of each row using the opening <tr> tag. (The <tr> stands for
table row.)
It is followed by one or more <td> tag (one for each cell in that row).
At the end of the row you use a closing </tr> tag.
<td>
Each cell of a table is represented using a <td> tag. (The <td> stands for table
data.)
At the end of each cell you use a closing </td> tag.
<!DOCTYPE html>
<html>
<head> <title>HTML Tables</title> </head>
<body>
<table border="1">
<tr>
<td>Row 1, Column 1</td>
</tr>
<tr>
</tr>
</table>
</body>
</html>
Here border is an attribute of <table> tag and it is used to put a border across all
the cells.

Table Headings
The <th> element is used just like <td> the element but its purpose is to represent
the heading for either a column or a row.
<table border="1">
<tr>
<th>Name</th>
<th>Mobile</th>
</tr>
<tr>
<td>Rohit Singh</td>
<td>9759597195</td>
</tr>
</table>
Cellpadding and Cellspacing Attributes

There are two attributes called cellpadding and cellspacing which you will use to
adjust the white space in your table cells. cellspacing attribute represents the
distance between cell borders, while cellpadding attribute represents the distance
between cell borders and the content within a cell.
<table border="1" cellpadding="5" cellspacing="5">

<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Amit Gupta</td>
<td>9000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>17000</td>
</tr>
</table>

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.
<table border="1">
<tr>
<th rowspan="2">Sr.</th>
<th rowspan="2">Name</th>
<th rowspan="2">Roll No.</th>
<th colspan="5">Subjects</th>
<th rowspan="2">Total</th>
</tr>
<tr>
<th>English</th>
<th>Hindi</th>
<th>Math</th>
<th>Science</th>
<th>Art</th>
</tr>
<tr>
<td>1</td>
<td>Amit</td>
<td>100254</td>
<td>57</td>
<td>61</td>
<td>74</td>
<td>68</td>
<td>58</td>
<td>318</td>
</tr>
</table>

Table Header, Body, and Footer

Tables can be divided into three parts: a header, a body, and a foot.
The three elements for separating the head, body, and foot of a table are:
• <thead> - to create a separate table header.

• <tbody> - to indicate the main body of the table.
• <tfoot> - to create a separate table footer.
<table border="1" width="100%">
<thead>
<tr>
<th colspan="4">This is the head of the table</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">This is the foot of the table</td>
</tr>
</tfoot>
</table>
Nested Tables
You can use one table inside another table. Not only tables you can use almost all
the tags inside table data tag <td>.
Example:

HTML Form
Form
The HTML <form> element defines a form that is used to collect user input:
<form>
.
form elements
.
</form>
<input type="text"> defines a one-line text input field:
<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>
<input type="password"> defines a password field:
Note: The characters in a password field are masked (shown as asterisks or circles).
<form>
Username:<br>
<input type="text" name="username"><br>
Password:<br>
<input type="password" name="password">
</form>
<input type="submit"> defines a button for submitting form.
Note : If you omit the submit button's value attribute, the button will get a default
text:
<form>
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="reset"> defines a reset button that will reset all form values to
their default values:
<form>
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="reset">
</form>
<input type="radio"> defines a radio button.
Radio buttons let a user select ONLY 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>
<input type="checkbox"> defines a checkbox.
Checkboxes let a user select ZERO or MORE options of a limited number of choices.
<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>
The <input type="color"> is used for input fields that should contain a color.
<form>
Select your favorite color:
<input type="color" name="favcolor">
</form>
The <input type="date"> is used for input fields that should contain a date.
<form>
Birthday:
<input type="date" name="bday">
</form>

Note: You can also add restrictions to dates with min and max attr.
<form>
Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31"><br>
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02"><br>
</form>
The <input type="datetime-local"> specifies a date and time input field, with
no time zone.
<form>
Birthday (date and time):
<input type="datetime-local" name="bdaytime">
</form>
The <input type="email"> is used for input fields that should contain an
e-mail address.
<form>
E-mail:
<input type="email" name="email">
</form>
The <input type="month"> allows the user to select a month and year.
<form>
Birthday (month and year):
<input type="month" name="bdaymonth">
</form>
The <input type="number"> defines a numeric input field.
<form>
Quantity:
<input type="number" name="quantity">
</form>

Input Restrictions
Here is a list of some common input restrictions (some are new in HTML5):
Attribute Description
disabled Specifies that an input field should be disabled
max HTML-5 Specifies the maximum value for an input field
maxlength Specifies the maximum number of character for an

input field
min HTML-5 Specifies the minimum value for an input field
pattern HTML-5 Specifies a regular expression to check the input

value against
readonly Specifies that an input field is read only (cannot be

changed)
required HTML-5 Specifies that an input field is required (must be

filled out)
size Specifies the width (in characters) of an input field
step HTML-5 Specifies the legal number intervals for an input

field
value Specifies the default value for an input field

<form>
Quantity:
<input type="number" name="points" min="0" max="100" step="10" value="30">
</form>
The <input type="range"> defines a control for entering a number whose

exact value is not important (like a slider control). Default range is 0 to 100.
However, you can set restrictions on what numbers are accepted with the min,
max, and step attributes:
<form>
<input type="range" name="points" min="0" max="10">
</form>
The <input type="time"> allows the user to select a time (no time zone).
<form>
Select a time:
<input type="time" name="usr_time">
</form>
The <input type="url"> is used for input fields that should contain a URL
<form>
Add your homepage:
<input type="url" name="homepage">
</form>
The <input type="week"> allows the user to select a week and year.
<form>
Select a week:
<input type="week" name="week_year">
</form>
The <input type="file"> allows the user to select file form your PC.
<form>
Select a File:
<input type="file" name="photo">
</form>

HTML Input Attributes

The value attribute specifies the initial value for an input field:
<form action="">
First name:<br>
<input type="text" name="firstname" value="John">
</form>
The readonly attribute specifies that the input field is read only (cannot be
changed):
<form action="">
First name:<br>
<input type="text" name="firstname" value="John" readonly>
</form>
The disabled attribute specifies that the input field is disabled.
Note: A disabled input field is unusable and un-clickable, and its value will not
be sent when submitting the form:
<form action="">
First name:<br>
<input type="text" name="firstname" value="John" disabled>
</form>
The size attribute specifies the size (in characters/Visible characters) for the
input field:
<form action="">
First name:<br>
<input type="text" name="firstname" value="John" size="40">
</form>
The maxlength attribute specifies the maximum allowed length for the input
field:
<form action="">
First name:<br>
<input type="text" name="firstname" maxlength="10">
</form>

Note: With a maxlength attribute, the input field will not accept more than the
allowed number of characters.
HTML5 Attributes
The autocomplete attribute specifies whether a form or input field should have
autocomplete on or off.
When autocomplete is on, the browser automatically completes the input values
based on values that the user has entered before.
Tip: It is possible to have autocomplete "on" for the form, and "off" for specific
input fields, or vice versa.
The autocomplete attribute works with <form> and the following <input> types:
text, url, email.
<form autocomplete="on">
First name:<input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
E-mail: <input type="email" name="email" autocomplete="off"><br>
<input type="submit">
</form>
The novalidate attribute is a <form> tag’s attribute.
When present, novalidate specifies that the form data should not be validated
when submitted.
<form novalidate="">
E-mail: <input type="email" name="user_email">
</form>
The autofocus attribute specifies that the input field should automatically get
focus when the page loads.
<form>
Name: <input type="text" name="name" autofocus="">
E-mail: <input type="email" name="user_email">
</form>

The form attribute specifies one or more forms an <input> element belongs to.
Note: An input field located outside the HTML form (but still a part of the form):
<form id="form1">
First name: <input type="text" name="fname"><br>
</form>
Last name: <input type="text" name="lname" form="form1">
The list attribute refers to a <datalist> element that contains pre-defined

options for an <input> element.
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
The min and max attributes specify the minimum and maximum values for an
<input> element.
The min and max attributes work with the following input types: number, range,
date, datetime-local, month, time and week.
Enter a date before 2015-01-01:

<input type="date" name="bday" max="1979-12-31">
Enter a date after 2015-01-01:

<input type="date" name="bday" min="2000-01-02">
Quantity (between 1 and 5):

<input type="number" name="quantity" min="1" max="5">
The multiple attribute specifies that the user is allowed to enter more than one
value in the <input> element.
The multiple attribute works with the following input types: email, and file.
Select images: <input type="file" name="img" multiple>

<select multiple>
<option>Agra</option>
<option>Mathura</option>
<option>Firozabad</option>
</select>
The pattern attribute specifies a regular expression that the <input> element's
value is checked against.
The pattern attribute works with the following input types: text and password.
Note: Use the title attribute to describe the pattern to help the user.
Country code: <input type="text" name="country_code" pattern="[A-Za-

z]{3}" title="Three letter country code">
The placeholder attribute specifies a hint that describes the expected value of
an input field (a sample value or a brief description of the format).
The hint is displayed in the input field before the user enters a value.
The placeholder attribute works with the following input types: text, search, url,
tel, email, and password etc.
<input type="text" name="fname" placeholder="First name">
The required attribute specifies that an input field must be filled out before
submitting the form.
The required attribute works with the following input types: text, search, url, tel,
email, password, date pickers, number, checkbox, radio, and file etc.
Username: <input type="text" name="usrname" required>
The step attribute specifies the legal number intervals for an <input> element.
Example: if step="3", legal numbers could be -3, 0, 3, 6, etc.
Tip: The step attribute can be used together with the max and min attributes to
create a range of legal values.
The step attribute works with the following input types: number, range, date,
datetime-local, month, time and week.
<input type="number" name="points" step="3">

HTML Book Technosters

Uploaded by

Document Information

Original Description:

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 Book Technosters

Uploaded by

Copyright:

Available Formats

HTML – Hyper Text Markup Language 1

Technosters Technologies OPC Pvt. Ltd.

Technosters Technologies OPC Pvt. Ltd.

Technosters Technologies OPC Pvt. Ltd.

Technosters Technologies OPC Pvt. Ltd.

Technosters Technologies OPC Pvt. Ltd.

Technosters Technologies OPC Pvt. Ltd.

Marked Text/Highlight Text

Technosters Technologies OPC Pvt. Ltd.

Technosters Technologies OPC Pvt. Ltd.

Technosters Technologies OPC Pvt. Ltd.

Using Comment Tag

Technosters Technologies OPC Pvt. Ltd.

How to Align image in center?

You can use image tag inside the center tag.

Technosters Technologies OPC Pvt. Ltd.

Linking to other pages on the same site (Relative URL)

Linking to other sites (absolute URL)

Technosters Technologies OPC Pvt. Ltd.

URL (Uniform Resource Locator)

<a href="sms:9759597195 ">SMS 9759597195 </a>

<a href="http://www.technosters.com" target="_new">Technosters</a>

<a href="image.jpg" download=""><img src="image.jpg"></a>

Move to Top in Page

<a href="#top" >Top</a>

Linking to a specific part of the same page

Technosters Technologies OPC Pvt. Ltd.

Technosters Technologies OPC Pvt. Ltd.

At the end of the row you use a closing </tr> tag.

At the end of each cell you use a closing </td> tag.

Technosters Technologies OPC Pvt. Ltd.

Cellpadding and Cellspacing Attributes

<table border="1" cellpadding="5" cellspacing="5">

Technosters Technologies OPC Pvt. Ltd.

Colspan and Rowspan Attributes

Technosters Technologies OPC Pvt. Ltd.

Table Header, Body, and Footer

• <thead> - to create a separate table header.

Technosters Technologies OPC Pvt. Ltd.

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

<input type="password"> defines a password field:

<input type="submit"> defines a button for submitting form.

Technosters Technologies OPC Pvt. Ltd.

<input type="radio"> defines a radio button.

<input type="checkbox"> defines a checkbox.

Technosters Technologies OPC Pvt. Ltd.

The <input type="number"> defines a numeric input field.

Technosters Technologies OPC Pvt. Ltd.

disabled Specifies that an input field should be disabled

max HTML-5 Specifies the maximum value for an input field

maxlength Specifies the maximum number of character for an

min HTML-5 Specifies the minimum value for an input field

pattern HTML-5 Specifies a regular expression to check the input

readonly Specifies that an input field is read only (cannot be

required HTML-5 Specifies that an input field is required (must be

size Specifies the width (in characters) of an input field

step HTML-5 Specifies the legal number intervals for an input

value Specifies the default value for an input field

Technosters Technologies OPC Pvt. Ltd.

The <input type="range"> defines a control for entering a number whose

Technosters Technologies OPC Pvt. Ltd.

HTML Input Attributes

The disabled attribute specifies that the input field is disabled.