HTML

HTML (Hyper Text Markup Language) is used for developing web pages.
HTML Tags, Attributes, Text Formatting Tags, Meta Tag, Lists, Image, Links, Table, Frames,
Iframes, Forms etc.
Introduction
 HTML stands for Hyper Text Markup Language.
 It is used to create web pages.
 HTML consists of several markup tags.
 HTML tags are most commonly used in pairs like <html> and </html>.
 Each HTML tag describes different document content.
Advantages
 HTML is platform independent.
 It is freely available for use.
 It is case-insensitive.
 HTML is very easy to learn and use.
 It has features like tables and applets.
Disadvantages
 Dynamic web pages cannot be created using HTML.
 HTML does not have good security features.
 HTML does not pass information to web pages.
 Most of the browsers may not support all the tags of HTML
HTML Tags
 Tags are enclosed in angular brackets i.e. '<' and '>'.
 An HTML code begins with the tag <HTML> and finishes with </HTML>. All other tags are
used between two tags.
 First tag in a pair is the start tag, and the second tag is end tag.
 A complete tag is called as an element.
 A tag has three major parts: opening tag, content and closing tag.
Syntax: <tagname>content</tagname>
There are two types of tags:

1. Empty tag: A tag which does not have any end tag.
Example: <hr>, <br>
2. Paired tag: A tag which has starting tag as well as ending tag.
Example: <h1>content</h1>
Basic Structure of HTML
 Every HTML document starts with <html> tag and ends with </html> tag.
 This <html> tag tells the browser where the document starts and </html> tag tells where the
document ends.
 The HTML document is divided into two parts i.e. head and body.
Following figure shows the basic structure of HTML document.
Example: Structure of HTML page

<!DOCTYPE html>
<html>
<head>
<title>HTML page</title>
</head>
<body>
This is my first HTML page.
</body>
</html>
Output:
This is my first HTML page.
Common HTML tags
<html> : Every html file starts with <html> tag. This tag tells the browser that content of the file
is in html format.
Syntax: <html>.........</html>
<head> : The <head> tag is used to indicate header area of the document.
Syntax: <head>.........</head>
<title> : The <title> tag is used to display text on the title bar of the browser.
Syntax: <title>.........</title>
<body> : The <body> tag contains actual content of the web page.
Syntax: <body>.........</body>
Comment tag: This tag is used to place the comments on the web page. Comments are not
executed.
Syntax: <comment>.......</comment>
All the browsers do not support comment tag. So, instead of a comment tag the delimiter tag is
used.
Syntax: 
<h1> : This tag represents the heading.

Syntax: <h1>......</h1>
<p> : This tag represents a paragraph.

Syntax: <p>.........</p>
HTML basic tags

1. Heading Tag
 Heading tag is used to define heading in the HTML document.

 HTML has six levels of heading tag, which are <h1>, <h2>, <h3>, <h4>, <h5> and <h6>.
 Heading tags are used in any order within the HTML document.
Example: Heading Tag
<!DOCTYPE html>
<html>
<head>
<title>Example of Heading Tag</title>
</head>
<body>
<h1>CareerRide Info</h1>
</body>
</html>
Output:
2. Paragraph Tag
 Paragraph tag is used to create paragraph.

 In this, the end tag is omitted or is optional because whenever a new paragraph starts previous
paragraph is already ended.
Syntax: <p>Write content here</p>
Example: Paragraph Tag
<!DOCTYPE html>
<html>
<head>
<title>Example of Paragraph Tag</title>
</head>
<body>
<p>This is the first paragraph.........</p>
<p>This is the second paragraph........
<p>This is the third paragraph........</p>
</body>
</html>
Output:
This is the first paragraph.........
This is the second paragraph........
This is the third paragraph........
3. Break Tag
 Break tag is used to insert a line break.

 It is an empty tag.
Syntax: <br> or <br/>
Example: Break Tag
<!DOCTYPE html>
<html>
<head>
<title>Example of Line-break Tag</title>
</head>
<body>
<p>This tag is used to insert a line break.</br>It is empty tag.</p>
</body>
</html>
Output:
This tag is used to insert a line break.
It is empty tag.
4. Center Tag
 Center tag is used to place the content in the center of a web page.
Syntax: <center>content</center>
Example: Center Tag
<!DOCTYPE html>
<html>
<head>
<title>Example of Center Tag</title>
</head>
<body>
<center>
<p>This is a paragraph.</p>
</center>
</body>
</html>
Output:
5. Horizontal line (<hr> tag)
 This is used to draw a horizontal line on a web page.

 The <hr> tag has no end tag.
Syntax: <hr>
Example: Horizontal line
<!DOCTYPE html>
<html>
<head>
<title>Example of Horizontal line Tag</title>
</head>
<body>
<p>This is a first paragraph.</p>
<hr />
<p>This is a second paragraph.</p>
</body>
</html>
Output:
Text Formating Tags
 The formatting tags indicate how text can appear in HTML.
 These tags can make text bold, italic, underlined, superscripted, subscripted and more.
HTML text formatting tags are:
Tag Description Example and Output
Bold It defines bold text. Example: <b>CareerRide Info</b>

Output: CareerRide Info
Italic It defines italic text. Example: <i>TutorialRide.com</i>

Output: TutorialRide.com
Underline It underlines the text. Example: <u>TutorialRide.com</u>

Strike-out It puts a line right through Example: <strike>ABC Coperation</strike>

the center of the text, Output: ABC Coperation
crossing it out. It shows
that the text is old and no
longer relevant.
Small It defines small text. Example: <h4>CareerRide

<small>Info</small></h4>
Output:
CareerRide Info
Font It changes the text color. Example: <font
Color color=“#000fff”>TutorialRide.com</font>
Emphasis It is used to emphasize text, Example: <em>CareerRide Info</em>

usually it appears in italics Output: CareerRide Info
but can vary according to
your browser.
Mark It defines marked or Example:<mark>TutorialRide.com</mark>

highlighted text. Output: TutorialRide.com
Subscript It defines subscripted text. Example: H<sub>2</sub>O

Output: H2O
Superscipt It defines superscripted Example: E = mc<sup>2</sup>

text. Output: E = mc2
Strong It defines strong text. Example: <strong>CareerRide Info</strong>

Usually it appears in bold Output: CareerRide Info
but can vary according to
your browser.
Tag Description
<abbr> Defines an abbreviation
<acronym> Defines an acronym
<address> Defines contact information for the author/owner of a document
<bdo> Defines the text direction
<blockquote> Defines a long quotation
<q> Defines a short quotation
<cite> Defines a citation
<dfn> Defines a definition term
HTML Meta Tag

 Metadata is nothing but information about other information.
 The <meta> tag is used to provide an additional information about the HTML document.
 The <meta> tag specifies page description, keywords, author of the document, last modified,
and other metadata.
 The <meta> tag is always written between the <head> and </head> tags.
 This tag is an empty element and so does not have a end tag.
 You can include one or more meta tags in your document.
 The metadata is used by browsers, search engines, or other web services.
The attributes of meta tag are:
Tag Description
name Defines a name of the metadata
Content Specifies the value associated with the http-equiv or name attribute
Scheme Specifies the scheme to be used to interpret the property's value
Http-equiv Specifies an HTTP header for the information/value of the content attribute
Example:
<meta name="author" content="Dennis Ritchie">
HTML Lists
 Lists are used to represent group of items.
 They must contain one or more list elements.
 HTML supports three types of lists – Ordered list, Unordered list and Definition list.
1. Ordered list
 Ordered list is the collection of related items which has special order or sequence. This list is
numbered.
 The ordered list is created by using <ol> tag.
Syntax:
<ol>text</ol>
Example: Ordered list
<!DOCTYPE html>
<html>
<head>
<title>Example of HTML Ordered List</title>
</head>
<body>
<ol>
<li>Maths</li>
<li>Physics</li>
<li>Computer Science</li>
<li>Language</li>
</ol>
</body>
</html>
Output:
1. 1. Maths
2. 2. Physics
3. 3. Computer Science
4. 4. Language
Attributes of <ol> tag
Attributes Description Example and Output
type Used to specify type of numbering like Example:

1/a/A/I/i. Default type is ‘1’. <ol type="a">
<li>Maths</li>
<li>Physics</li>
<li>Language</li>
</ol>
Output:
a. Maths
b. Physics
c. Language
start Using this attribute any value can be set as Example:

the starting position. <ol type="i" start="4">
<li>Maths</li>
<li>Physics</li>
<li>Language</li>
</ol>
Output:
iv. Maths
v. Physics
vi. Language
value Using this attribute the numbering sequence Example:

can be changed in the middle of an ordered <ol>
list. <li type="a"
It is to be specified with the <li> tag. value="3">Maths</li>
<li value="5">Physics</li>
</ol>
Output:
c. Maths
5. Physics
2. Unordered list:
 Unordered list is nothing but the collection of related items which has no special order or
sequence.
 The list item in the list is indicated by bullet.
Syntax:
<ul>text</ul>
Example: Unordered list
<!DOCTYPE html>
<html>
<head>
<title>Example of HTML Ordered List</title>
</head>
<body>
<ul>
<li>Maths</li>
<li>Physics</li>
<li>Computer Science</li>
<li>Language</li>
</ul>
</body>
</html>
Output:
 Maths
 Physics
 Computer Science
 Language
Attributes of <ul>
Attribute Description Example and Output
type Used to specify type of list item like bullet, circle and square. Example:
Default type is bullet. <ul type="square">
<li>Maths</li>
<li>Physics</li>
<li>Language</li>
</ul>
Output:
3. Definition list:
 Definition list has two parts, first is definition term and second is actual definition.
 The <dl> tag is used to create definition list.
 The <dl> tag encloses <dt> and <dd> tags which are used for definition term and actual
definition respectively.
Syntax:
<dl>
<dt>Definition Term</dt>
<dd>Definition</dd>
</dl>
Example: Definition list
<!DOCTYPE html>
<html>
<head>
<title>Example of HTML Definition List</title>
</head>
<body>
<dl>
<dt><b>jQuery</b></dt>
<dd>jQuery is a JavaScript Library.</dd>
<dt><b>AngularJS</b></dt>
<dd>AngularJS is a JavaScript framework.</dd>
</dl>
</body>
</html>
Output:
jQuery
jQuery is a JavaScript Library.
AngularJS
AngularJS is a JavaScript framework.
HTML Image
 The tag is used to insert image in web page.

 It is an empty tag, means it does not have end tag.
Syntax:
<img src="url" alt="some_text">
Example:
<img src="http://www.careerride.com/images/new/logo.png" width="200" height="100"
alt="CareerRide Info" align="left">
Attributes of <img> tag
Attributes Description
vspace Specifies the amount of space to the top and bottom of the image.
hspace Specifies the amount of space to the left and right of the image.
alt Specifies alternate text for an image when image is not found.
src Indicate the source file.
border Specifies the thickness of border.
width and height Specifies width and height of the image.
align Use to set horizontal alignment of the image. (left, right)
valign Used to set vertical alignment of the image. (top, bottom)
Example: Image <img> tag

<!DOCTYPE html>
<html>
<head>
<title>HTML Image Example</title>
</head>
<body>
<img src="http://www.careerride.com/images/new/logo.png" width="200" height="22"
alt="CareerRide Info" align="right">
</body>
</html>
HTML Links
 HTML links are nothing but the hyperlinks.
 Hyperlinks are used to navigate between web pages by clicking on words, phrases, and images.
 The HTML anchor tag is used to define a hyperlink.
Syntax:
<a href="URL"> Link text </a>
href: Specifies the destination address

Link text: Link text is visible part.
Example: Hyperlink
<!DOCTYPE html>
<html>
<head>
<title>HTML links Example</title>
</head>
<body>
<p>Click following link</p>
<a href="http://www.tutorialride.com/">Visit TutorialRide.com</a>
</body>
</html>
Output:
Click following link
Visit TutorialRide.com
 Hyperlink appears blue in color and underlined.

 When the mouse cursor moves on the hyperlink, its arrow changes the shape to a little hand.
The target attribute
 The target attribute is used to specify the location where linked document is opened.
 Every target name starts with underscore (_).
HTML provides 4 basic target options.
Option Description
_top Opens the linked document in new window breaking all the frames.
_blank Opens the linked document in new blank window.
_parent Opens the linked document in the parent frame of the current document.
_self Opens the linked document in the current frame.
Example: target attribute

<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<p>Click any of the following links</p>
<a href="http://www.tutorialride.com/" target="_blank">Opens in New</a></br>
<a href="http://www.tutorialride.com/" target="_self">Opens in Self</a></br>
<a href="http://www.tutorialride.com/" target="_parent">Opens in Parent
frame</a></br>
<a href="http://www.tutorialride.com/" target="_top">Opens in new window</a>
</body>
</html>
Output:
HTML table
 Table is nothing but a two dimensional matrix with a combination of rows and columns.
 The <table> tag is used to define a table.
 Table rows are created by using <tr> tag.
 Table tows are divided into table data by using <td> tag.
 The <th> tag is used to create table column heading or row heading.
Table border
 The border attribute indicates border thickness of the table.

 The default value of border is 0.
Background color
The bgcolor attribute is used to set the background color of a table.
Table border color
The bordercolor attribute is used to set the border color of a table.
Example: Table with background color, border and border color

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Example</title>
</head>
<body>
<table border="1" bordercolor="blue" bgcolor="pink">
<tr>
<td align="center">Row 1, Column 1</td>
</tr>
<tr>
</tr>
</table>
</body>
</html>
Output:
Table Heading
 Table heading is the title given to the table row or column or both.
 The <th> tag is used to create table column heading or row heading.
Example: Table Heading
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Header Example</title>
</head>
<body>
<table border="1">
<tr>
<th>Subject</th>
<th>Total marks</th>
</tr>
<tr>
<td>Math</td>
<td>100</td>
</tr>
<tr>
<td>Science</td>
<td>100</td>
</tr>
</table>
</body>
</html>
Output:
Rowspan and Colspan Attribute
rowspan: This attribute is used to combine two or more rows into a single cell.
colspan: This attribute is used to combine two or more columns into a single cell.
Example: Table rowspan and colspan attributes

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Colspan & Rowspan Example</title>
</head>
<body>
<table border="1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
</tr>
<tr>
<td rowspan="2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
</tr>
<tr>
</tr>
<tr>
<td colspan="4">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>
Output:
Cellspacing and Cellpadding Attributes

Cell spacing: Cell spacing specifies the distance between the edges of the table cells.
Cell padding: Cell padding specifies the distance between the edges of the table cells and their
content.
Example: Table cellspacing and cellpadding attributes

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Cellspacing & Cellpadding Example</title>
</head>
<body>
<table border="1" cellpadding="10" cellspacing="4">
<tr>
<th>Subject</th>
<th>Total marks</th>
</tr>
<tr>
<td>Math</td>
<td>100</td>
</tr>
<tr>
<td>Science</td>
<td>100</td>
</tr>
</table>
</body>
</html>
Output:
Width and Height Attributes

 Width and height attributes are used to set table width and height.
 Values are given in pixels.
Table Caption
 The <caption> tag is used to give heading to the whole table.

 This tag is always placed after <table> and before first <tr> tag.
Example: Table width, hight and caption
<!DOCTYPE html>
<html>
<head>
<title>HTML Table width, hight and caption Example</title>
</head>
<body>
<table border="1" width="300" height="100">
<caption>Employee Details</caption>
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Varun Rathi</td>
<td>7000</td>
</tr>
<tr>
<td>Nitesh Singh</td>
<td>8000</td>
</tr>
</table>
</body>
</html>
Output:
HTML frames
 Frames are the sections created on the window.
 Each section can load a separate HTML document.
 The window is divided into frames in a similar way the tables are organized into rows and
columns.
 Frames provide the facility to display multiple HTML document inside one browser window at
a time.
 To create frames, we need <frameset> and <frame> tag.
1. <frameset> tag
 Collection of frames is called as frameset.

 If you are using frames on a page then use <frameset> tag instead of <body> tag.
 The rows attribute of <frameset> tag indicates horizontal frames and cols attribute indicates
vertical frames.
Syntax:<frameset>...........</frameset>
<frameset> Tag Attributes:
cols It specifies how many columns are to be contained in the frameset and
(Columns) the size of each column.
rows It works like the 'cols' attribute and takes the same values, but it is used
to specify the number of rows in the frameset.
border It specifies the width of the border of each frame in pixels. For
example; border = “5”. A value of zero means no border.
frame It specifies whether a three-dimensional border should be displayed

between frames. It takes value either 1 (Yes) or 0 (No). For example;
frameborder = “0” specifies no border.
framespacing It specifies the amount of space between frames in a frameset. It can

take any integer value. For example; framespacing = “10” means there
should be 10 pixels spacing between each frame.
2. <frame> tag
 <frame> tag is used to define a frame within a <frameset> tag.
 A frame should be used within a <frameset> tag.
Syntax:<frame src=”frm1.htm”>
<frame> Tag Attributes:
src It is used to give the file name that should be located in the frame. Its
value can be any URL, for example, src= “/html/abc.html”
name It allows to give a name to a frame. This attribute is used to indicate that a
document should be loaded into a frame.
frameborde It specifies whether or not the borders of that frame are shown. This
r attribute overrides the value given in the frameborder attribute on the
<frameset> tag if one is given. This can take values either 1 (Yes) or 0
(No).
Example: HTML Frame

<!DOCTYPE html>
<html>
<head>
<title>HTML Frames Example</title>
</head>
<frameset cols="50%,50%">
<frame src="http://www.careerride.com/test-login.aspx" >
<frame src="http://careerride.com/" >
</frameset>
</html>
Output:
HTML Iframes
 Iframe represents an HTML inline frame that contains another document.
 An iframe is used to display a web page within a web page.
Syntax:
<iframe src="URL"></iframe>
Example: HTML Iframe

<!DOCTYPE html>
<html>
<head>
<title>HTML Iframes Example</title>
</head>
<body>
<iframe src="http://careerride.com/" width="600" height="200"></iframe>
</body>
</html>
Output:
<!DOCTYPE html>
<html>
<body>
<iframe width="600" height="200" name="iframe_a"></iframe>
<p><a href="http://careerride.com/" target="iframe_a">CareerRide.com</a></p>
</body>
</html>
Output:
HTML Forms
 Form is a part of web page.
 It is used to collect user input through elements like text fields, check box and radio button,
select option, text area, submit buttons and etc.
 Form works like a container which consists of controls known as form elements.
 The HTML <form> tag is used to create an HTML form.
Syntax:
<form action="Script URL" method="GET/POST">
form elements land layout tags
</form>
Form Attributes
Attribute Description
action Specifies the encoding of the submitted data.
enctype Used to give a name to the control.
method Specify the method to be used to upload data.
name Used to identify and retrieve values from each form on the web page.
target Indicates the target of the address in the action attribute.
1. Creating text box
 The <input> tag is used to create form elements.

 It does not have end tag.
Attributes of <input> tag
Attribute Description
Type Specifies the type of input control.
Name Used to give a name to the control.
Id Used to identify the input field uniquely.
Size Used to specify the width of the text-input control in terms of characters
Value It is a default text or number that is displayed in the text field.
Maxlengt Used to specify the maximum number of characters a user can enter into a
h input field.
Example: Text Input Control

<!DOCTYPE html>
<html>
<head>
<title>Text Input Control Example</title>
</head>
<body>
<form >
Name: <input type="text" name="name" />
<br>
Mobile No: <input type="text" name="mob_no" />
</form>
</body>
</html>
Output:
2. Creating password
A password field is nothing but the text box in which the characters typed by the user are
displayed as bullet or asterisks.
Example: Password Box

<!DOCTYPE html>
<html>
<head>
<title>Password Field Example</title>
</head>
<body>
<form >
<br>
Password: <input type="password" name="password" />
</form>
</body>
</html>
Output:
3. Creating Submit Button

Submit button is used to send the form's data to the specified URL.
Example: Submit Button

<!DOCTYPE html>
<html>
<head>
<title>Submit Button Example</title>
</head>
<body>
<form >
<br>
Mobile No: <input type="text" name="mob_no" />
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Output:
4. Creating Radio Button

Radio button is used to select a single option from the list of options.
Example: Radio Button

<!DOCTYPE html>
<html>
<head>
<title>Radio Button Example</title>
</head>
<body>
<form >
<input type="radio" name="gender" value="male"> Male
</br>
<input type="radio" name="gender" value="female"> Female
</form>
</body>
</html>
Output:
5. Creating Check Box

Check box is used to select more than one option from the list of options.
Example: Check Box

<!DOCTYPE html>
<html>
<head>
<title>Check Box Example</title>
</head>
<body>
<form >
<input type="checkbox" name="cricket" value="on"> Cricket
</br>
<input type="checkbox" name="hockey" value="on"> Hockey
</form>
</body>
</html>
Output:
6. Creating Multiple-Line Text Input
 The <textarea> tag is used to create multi-line text box.

 This is used to enter large amount of data.
Example: Multiple-Line Text Input
<!DOCTYPE html>
<html>
<head>
<title>Multiple-Line Text Input Example</title>
</head>
<body>
<form>
<textarea rows="4" cols="30" name="address">
Text Area.....
</textarea>
</form>
</body>
</html>
Output:
Web designing principles
1. PURPOSE
Good web design always caters to the needs of the user. Are your web visitors looking for
information, entertainment, some type of interaction, or to transact with your business? Each
page of your website needs to have a clear purpose, and to fulfill a specific need for your website
users in the most effective way possible.
2. COMMUNICATION
People on the web tend to want information quickly, so it is important to communicate clearly,
and make your information easy to read and digest. Some effective tactics to include in your web
design include: organising information using headlines and sub headlines, using bullet points
instead of long windy sentences, and cutting the waffle.
3. TYPEFACES
In general, Sans Serif fonts such as Arial and Verdana are easier to read online (Sans Serif fonts
are contemporary looking fonts without decorative finishes). The ideal font size for reading
easily online is 16px and stick to a maximum of 3 typefaces in a maximum of 3 point sizes to
keep your design streamlined.
4. COLOURS
A well thought out colour palette can go a long way to enhance the user experience.
Complementary colours create balance and harmony. Using contrasting colours for the text and
background will make reading easier on the eye. Vibrant colours create emotion and should be
used sparingly (e.g. for buttons and call to actions). Last but not least, white space/ negative
space is very effective at giving your website a modern and uncluttered look.
5. IMAGES
A picture can speak a thousand words, and choosing the right images for your website can help
with brand positioning and connecting with your target audience. If you don’t have high quality
professional photos on hand, consider purchasing stock photos to lift the look of your website.
Also consider using infographics, videos and graphics as these can be much more effective at
communicating than even the most well written piece of text.
6. NAVIGATION
Navigation is about how easy it is for people to take action and move around your website. Some
tactics for effective navigation include a logical page hierarchy, using bread crumbs, designing
clickable buttons, and following the ‘three click rule’ which means users will be able to find the
information they are looking for within three clicks.
7. GRID BASED LAYOUTS
Placing content randomly on your web page can end up with a haphazard appearance that is
messy. Grid based layouts arrange content into sections, columns and boxes that line up and feel
balanced, which leads to a better looking website design.
8. “F” PATTERN DESIGN
Eye tracking studies have identified that people scan computer screens in an “F” pattern. Most of
what people see is in the top and left of the screen and the right side of the screen is rarely seen.
Rather than trying to force the viewer’s visual flow, effectively designed websites will work with
a reader’s natural behaviour and display information in order of importance (left to right, and top
to bottom).
9. LOAD TIME
Everybody hates a website that takes ages to load. Tips to make page load times more effective
include optimising image sizes (size and scale), combining code into a central CSS or JavaScript
file (this reduces HTTP requests) and minify HTML, CSS, JavaScript (compressed to speed up
their load time).
10: MOBILE FRIENDLY
It is now commonplace to access websites from multiple devices with multiple screen sizes, so it
is important to consider if your website is mobile friendly. If your website is not mobile friendly,
you can either rebuild it in a responsive layout (this means your website will adjust to different
screen widths) or you can build a dedicated mobile site (a separate website optimised specifically
for mobile users).

HTML

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

Uploaded by

Copyright:

Available Formats

HTML (Hyper Text Markup Language) is used for developing web pages.

There are two types of tags:

Basic Structure of HTML

Example: Structure of HTML page

Common HTML tags

<h1> : This tag represents the heading.

<p> : This tag represents a paragraph.

HTML basic tags

 Heading tag is used to define heading in the HTML document.

 Paragraph tag is used to create paragraph.

 Break tag is used to insert a line break.

5. Horizontal line (<hr> tag)

 This is used to draw a horizontal line on a web page.

Tag Description Example and Output

Bold It defines bold text. Example: <b>CareerRide Info</b>

Italic It defines italic text. Example: <i>TutorialRide.com</i>

Underline It underlines the text. Example: <u>TutorialRide.com</u>

Strike-out It puts a line right through Example: <strike>ABC Coperation</strike>

Small It defines small text. Example: <h4>CareerRide

Emphasis It is used to emphasize text, Example: <em>CareerRide Info</em>

Mark It defines marked or Example:<mark>TutorialRide.com</mark>

Subscript It defines subscripted text. Example: H<sub>2</sub>O

Superscipt It defines superscripted Example: E = mc<sup>2</sup>

Strong It defines strong text. Example: <strong>CareerRide Info</strong>

HTML Meta Tag

Attributes Description Example and Output

type Used to specify type of numbering like Example:

start Using this attribute any value can be set as Example:

value Using this attribute the numbering sequence Example:

Attribute Description Example and Output

 The tag is used to insert image in web page.

Attributes of <img> tag

src Indicate the source file.

border Specifies the thickness of border.

width and height Specifies width and height of the image.

align Use to set horizontal alignment of the image. (left, right)

valign Used to set vertical alignment of the image. (top, bottom)

Example: Image <img> tag

href: Specifies the destination address

 Hyperlink appears blue in color and underlined.

The target attribute

_blank Opens the linked document in new blank window.

_self Opens the linked document in the current frame.

Example: target attribute

 The border attribute indicates border thickness of the table.

The bgcolor attribute is used to set the background color of a table.

Table border color

The bordercolor attribute is used to set the border color of a table.

Example: Table with background color, border and border color

Example: Table rowspan and colspan attributes

Cellspacing and Cellpadding Attributes

Example: Table cellspacing and cellpadding attributes

Width and Height Attributes

 The <caption> tag is used to give heading to the whole table.

 Collection of frames is called as frameset.

<frameset> Tag Attributes:

frame It specifies whether a three-dimensional border should be displayed

framespacing It specifies the amount of space between frames in a frameset. It can

<frame> Tag Attributes:

Example: HTML Frame

Example: HTML Iframe

action Specifies the encoding of the submitted data.

enctype Used to give a name to the control.