HTML:-
- HTML stands for 'Hypertext Markup Language'
- It is used to design web pages.
- We page contains some information which can execute on the browser.
- Collection of web pages is called as 'web site'.
features
of html:
·
It is used to design 'static web pages'
only.
Ø The
static web pages contains some information, which can't be changed at run time.
·
It is developed by 'Tim Berner's Lee at
W3C (World Wide Web Consortium) organization.
Ø W3C
is a non-commercial organization, which releases the web technologies such as
HTML, CSS, Java script & XML.
·
HTML is a markup language.
Ø A
markup language contains some tags.
·
HTML is not 'case sensitive language'.
Ø So
that we can write the code in any case (lower case / upper case)
·
HTML is a 'interpreter-based language'.
Ø Interpreter
checks & executes the code line-by-line.
Ø Compiler
checks the entire code once & executes line-by-line.
Ø The
browser acts as 'interpreter' of HTML program. That menus html program will be
executed by the browser.
·
HTML is very light-weight, easy &
fast 'designing language'.
Browser:
·
Browser is a s/w, used to open & run
the web pages.
·
Popular browsers:
a) Google chrome
b) Mozilla Firefox
c) Microsoft Internet Explorer (MS
IE)
d) Opera
e) Safari
Tags
in HTML:
·
A tag is keyword in HTML.
·
Must be enclosed in angular braces. <
and >
Ø Ex: <b>
·
HTML supports around 40 to 50 tags.
Types
of tags in HTML:
a) Paired
tags
b)
Un-paired tags
Paired
tags:
·
Contains starting tag &ending tag
seperately.
·
Ex:
<b>this text will be bolded</b>
Unpaired
tags:
·
Also called as 'Empty tags'
·
Ex:
<hr>
A
basic html program syntax:
<html>
<body>
actual content here
</body>
</html>
<html>
: this tag defines starting & ending point
of html program.
<body> : this tag defines actual content of the page.
Steps
for working html program:
Step
1: define html source in notepad
<html>
<body>
Hello,
World!
</body>
</html>
Step
2: 'File' menu - "Save"
Name
= page1.html
save in = Desktop
Step
3: run:
go to desktop and double click on 'page1.html'.
Editors
of HTML Source code:
·
In real time, using 'Notepad' for html
is out-dated.
·
So the developer can prefer any one of
the following:
Ø light-weight
editors:
·
Notepad++ (my choice)
·
Edit plus
Ø higher-end
editors:
·
Adobe dream weaver
·
Microsoft Expression web
Download link for notepad++:
·
notepad-plus-plus.org/download
Headings
& Paragraphs:
<h1>this is heading</h1>
<p>this is paragraph</p>
Ex:-
<html>
<body>
<h1>This
is heading</h1>
<p>This
is paragraph</p>
</body>
</html>
Note:
·
Html supports 6 level of headings (h1 to
h6), accordingly, the font size will be increased.
·
By default, all the browsers ignore the
spaces & line breaks that you have given in the html program.
·
Ex:-
<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
·
Ex:-
<html>
<body>
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
<p>
This paragraph
contains
a lot of spaces
in the source code,
but the
browser
ignores it.
</p>
<p>
The number of lines in a paragraph depends on
the size of your browser window. If you resize the browser window, the number
of lines in this paragraph will change.
</p>
</body>
</html>
Horizontal
lines:
·
These are used to create a horizontal
line in the web page.
·
Syn:
<hr> hr stands for
'horizontal rule'.
·
It is un-paired tag.
Ex:-
<html>
<body>
<p>The
hr tag defines a horizontal rule:</p>
<hr>
<p>hello<p>
</body>
</html>
Text
formatting tags:
·
These are used to display content
(information) in bold, italic etc.
Ø <b>,
<strong>, <i>, <em>, <code>, <sub>, <sup>
·
Ex:-
<html>
<body>
<p><b>This text is
bold</b></p>
<p><strong>This text is
strong</strong></p>
<p><i>This text is
italic</i></p>
<p><em>This text is
emphasized</em></p>
<p><code>This is computer
output</code></p>
<p>This is<sub>
subscript</sub> and <sup>superscript</sup></p>
<p>X<sup>2</sup></p>
<p>H<sub>2</sub>O</p>
</body>
</html>
Note:
·
No difference between <b> and
<strong>
·
No difference between <i> and
<em>
<pre>
:-
·
It is used to display the line breaks &
spaces that are given in the source code, as it is in the browser.
·
pre = pre formatted.
·
Ex:-
<html>
<body>
<pre>
This is
preformatted text.
It preserves both spaces
and line breaks.
</pre>
<p>Program code</p>
<pre>
for i = 1 to 10
print i
next i
</pre>
</body>
</html>
<abbr>
:-
·
It is used to display the full form of
an abbrevation.
·
Syn: <abbr title="full form
here">some text here</abbr>
·
Ex:-
<html>
<body>
<p>The <abbr title="World
Health Organization">WHO</abbr> was founded in 1948.</p>
<p>Can I get this <abbr
title="as soon as possible">ASAP</abbr>?</p>
</body>
</html>
<bdo>
:-
·
It is used to display the text 'rtl'
(right to left).
·
Bi-directional order
·
Ex:-
<html>
<body>
<bdo dir="rtl">
Here is some sample text
</bdo>
</body>
</html>
<img>
:-
·
It is used to display images inn the web
pages.
·
Syntax:
<img src="image file path">
·
<img> is the un-paired tag.
·
Ex:-
<img src="images/img1.jpg" alt="Leafs"
width="304px" height="228px">
·
attributes of <img> tag:
Ø src:
(source) used to specify path of the image.
Ø alt:
used to specify some text, that can be displayed in place of the image, in case
if the image can't be loaded due to any reason.
Ø width:
(pixels) used to specify horizontal size of the image.
Ø height:
(pixels) used to specify vertical size of the image.
·
Ex:-
<html>
<body>
<h2>Leafs</h2>
<img src="images/img1.jpg"
alt="Leafs" width="304px" height="228px">
</body>
</html>
Note:
·
It will take original width &
height, if you dont mention width & height.
·
You must create a sub folder called
'images' in the current working folder, to place image files.
<a>
:-
·
It is used to create 'hyperlinks'
·
a = anchor
·
hyperlink: a link to another web page present within the
same web site (or) another web site.
·
Note: all browsers will show hyperlinks in:
a)
blue color
b)
underline
c)
hand
·
Syn:
<a href="target url">some text</a>
·
Attributes of <a>
Ø href: (hyperlink reference) it is used to specify target url to open.
Ø It
can be any one of following:
§ A
page present within the same web site
§ Another
web site
§ Another
image
§ pdf
/ txt / doc / ppt etc.
§ bookmark
in the same web page.
Ø target="_blank"
it used to open the target page in
seperate tab.
·
Ex:-
link
<html>
<body>
<p><a
href="http://www.microsoft.com/">Visit
Microsoft</a></p>
<p><a
href="http://www.facebook.com/"
target="_blank">Facebook</a></p>
</body>
</html>
·
Ex:-
image link
<html>
<body>
<p>Image as a link:
<a
href="http://www.mozilla.org/en-US/firefox/new/">
<img border="0"
src="images/firefox.png" alt="Mozilla Firefox Web Site"
width="32" height="32" title="Mozilla Firefox Web
Site">
</a></p>
</body>
</html>
·
Ex:-
internal link
<html>
<body>
<p>
<a href="#C4">See also
Chapter 4.</a>
</p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla
bla</p>
<h2>Chapter 2</h2>
<p>This chapter explains ba bla
bla</p>
<h2>Chapter 3</h2>
<p>This chapter explains ba bla
bla</p>
<h2><a id="C4">Chapter
4</a></h2>
<p>This chapter explains ba bla
bla</p>
<h2>Chapter 5</h2>
<p>This chapter explains ba bla
bla</p>
<h2>Chapter 6</h2>
<p>This chapter explains ba bla
bla</p>
<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 8</h2>
<p>This chapter explains ba bla
bla</p>
<h2>Chapter 9</h2>
<p>This chapter explains ba bla
bla</p>
<h2>Chapter 10</h2>
<p>This chapter explains ba bla
bla</p>
<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 12</h2>
<p>This chapter explains ba bla
bla</p>
<h2>Chapter 13</h2>
<p>This chapter explains ba bla
bla</p>
<h2>Chapter 14</h2>
<p>This chapter explains ba bla
bla</p>
<h2>Chapter 15</h2>
<p>This chapter explains ba bla bla</p>
</body>
</html>
<head>
:-
·
It is used to specify header information
about the page.
·
It can contain the following tags:
a)
<title>
b)
<meta>
c)
<script>
d)
<style>
e)
<link>
<title>
:-
·
It is used to specify title of the web
page.
·
Ex:-
<html>
<head>
<title>Title
of the document</title>
</head>
<body>
The
content of the document......
</body>
</html>
<meta>
:-
·
It is used to specify keywords,
description about the current page, which can be understandable by the search
engines like google.
·
Ex:-
<html>
<head>
<title>Title
of the document</title>
<meta
name="keywords" content="hyderabad, mobile, prices, samsung,
apple, best prices">
<meta
name="description" content="shows mobile prices in
hyderabad">
<meta
name="author" content="Rakesh">
<meta
http-equiv="refresh" content="10"> <!-- optional -->
</head>
<body>
The
content of the document......
</body>
</html>
<table>
:-
·
It is used to show a table type of
information in the web pages.
·
A table is a collection of rows &
columns.
·
The <table> tag defines starting
and ending point of the table.
Ø The
<tr> tag defines a 'table row'.
Ø The
<td> tag defines a cell / a column.
td = table data
·
Ex:-
1
<html>
<body>
<table border="1">
<tr>
<td>
one
</td>
<td>
two
</td>
</tr>
<tr>
<td>
three
</td>
<td>
four
</td>
</tr>
<tr>
<td>
five
</td>
<td>
six
</td>
</tr>
</table>
</body>
</html>
·
Ex:-
2
<html>
<head>
<title>Products
Detials</title>
</head>
<body>
<h1>Products</h1>
<table
border="1">
<tr>
<th>Product
ID</th>
<th>Name</th>
<th>Cost</th>
</tr>
<tr>
<td>101</td>
<td>LED
Television</td>
<td>34000</td>
</tr>
<tr>
<td>102</td>
<td>Play
Station</td>
<td>12000</td>
</tr>
<tr>
<td>103</td>
<td>Sony
Tab</td>
<td>45000</td>
</tr>
</table>
</body>
</html>
"colspan"
attribute:-
·
It is used to combine two or more cells
as 'SINGLE CELL'.
·
It can be used in <td> and
<th> tags.
·
Syn:
colspan="no. of columns to merge"
·
Ex:
colspan="3"
·
Ex:-
<!-- colspan example -->
<html>
<body>
<table border="1">
<tr>
<th>Name</th>
<th
colspan="2">Phone</th>
</tr>
<tr>
<td>John</td>
<td>9876776675</td>
<td>8987876867</td>
</tr>
</table>
</body>
</html>
"rowspan"
attribute:-
·
It is also used to combine two or more
cells as 'SINGLE CELL'.
·
It can be used in <td> and
<th> tags.
·
Syn:
rowspan="no. of rows to merge"
·
Ex:
rowspan="3"
·
Ex:-
<!-- rowspan example -->
<html>
<body>
<table border="1">
<tr>
<th>Name</th>
<td>John</td>
</tr>
<tr>
<th
rowspan="2">Phone</th>
<td>9876776675</td>
</tr>
<tr>
<td>8987876867</td>
</tr>
</table>
</body>
</html>
Lists
in HTML:-
·
These are used to display a list of
items in the web page.
·
Ex:
list of books, list of movies.
·
HTML supports two types of lists:
Ø Ordered
list <ol>
Ø Un-ordered
list <ul>
Ordered
list:
·
It shows a sl. no automatically, for
each list item.
·
Syn:
<ol>
<li> ......... </li>
<li> ......... </li>
<li> ......... </li>
</ol>
Un-ordered
list:
·
It shows a bullet automatically, for
each list item.
·
Syn:
<ul>
<li> ......... </li>
<li> ......... </li>
<li> ......... </li>
</ul>
Ex:-
<html>
<body>
<h3>Books:</h3>
<ol>
<li>C#.net for
Professionals</li>
<li>Asp.net
complete reference</li>
<li>VB.net
black book</li>
</ol>
<h3>Books:</h3>
<ol
type="A">
<li>C#.net for
Professionals</li>
<li>Asp.net
complete reference</li>
<li>VB.net
black book</li>
</ol>
<h3>Books:</h3>
<ol
type="i">
<li>C#.net for
Professionals</li>
<li>Asp.net
complete reference</li>
<li>VB.net
black book</li>
</ol>
<h3>Books:</h3>
<ul>
<li>C#.net for
Professionals</li>
<li>Asp.net complete
reference</li>
<li>VB.net black book</li>
</ul>
</body>
</html>
Definition
lists:
·
These are used to show categorized items
with proper indentation.
·
Ex:-
<html>
<body>
<h4>Definition
list:</h4>
<dl>
<dt>Coffee</dt>
<dd>black
Coffee</dd>
<dd>Hot Coffee</dd>
<dd>Cold
Coffee</dd>
<dt>Milk</dt>
<dd>white cold
drink</dd>
<dd>Milk with Ice
Cream</dd>
</dl>
</body>
</html>
<br>
:-
·
It is used move the cursor to the next
line.
·
It is just like \n
·
It is un-paired tag
·
br = break
·
Ex:-
<html>
<body>
one<br>two
</body>
</html>
<div>
:-
·
It is used to divde the page as no. of
units
·
div = division
·
<div> is also called as container
tag.
Ø means
it can contain in other tags inside it.
·
Syntax:
<div>
some tags here
</div>
·
Ex:-
<html>
<body>
<div>
<h1>this is header</h1>
</div>
<div>
<h1>this is content</h1>
</div>
<div>
<h4>this is footer</h4>
</div>
</body>
</html>
html
forms:-
·
These are used to create forms in web
pages.
·
Form:
a form is a collection of controls.
Ø Ex: text boxes, check boxes, radio buttons etc.
·
The tags used to creare forms:
Ø <form>
Ø <input>
Ø <textarea>
Ø <select>
Ø <option>
Ø <button>
Ø <fieldset>
Ø <legend>
<form>
:-
·
It is used to specify starting / ending
point of a form in web page.
·
syn:
<form>
your controls here
</form>
·
Ex:-
<html>
<body>
<form>
First name: <input
type="text"><br>
Last name: <input
type="text">
</form>
</body>
</html>
<input>
:-
·
It is used create text boxes, password
text boxes, check boxes, radion buttons etc.
·
Syn:
<input
type="text">
<input
type="password">
<input
type="checkbox">
<input
type="radio">
<input
type="file">
<input
type="button">
<input
type="hidden">
<input
type="submit">
<input
type="image">
<input
type="reset">
·
Ex:-
Login
<html>
<form>
<label
for="TextBox1">Username:</label>
<input type="text"
id="TextBox1">
<label
for="TextBox2">Password:</label>
<input type="password"
id="TextBox2">
<input type="submit">
</form>
</html>
·
Ex:-
Radio
<!-- radio button
example -->
<html>
<body>
Gender:
<input type="radio"
name="rb1">Male
<input type="radio"
name="rb1">Female
<h2>Radio buttons are used to allow the
user, to select any ONE option, among few.
Note: All the radio buttons must have a same
name.</h2>
</body>
</html >
·
Ex:-
check box
<!-- check box
example -->
<html>
<body>
Hobbies:
<input type="checkbox"
name="chk1">Cricket
<input type="checkbox"
name="chk2">Computer Games
<input type="checkbox"
name="chk3">Facebook
<input type="checkbox"
name="chk4">Tennis
<h2>Check boxes are used to allow the
user, to select any ONE OR MORE options, among few. Note:
Each check box should unique name.</h2>
</body>
</html>
·
Ex:-
file
<!-- file example
-->
<html>
<body>
Attachment(s):
<input
type="file" multiple="multiple">
<input type="submit">
</body>
</html>
·
Ex:-
button
<!-- button example
-->
<html>
<body>
<input type="button"
value="Click me">
<button>
<img
src="images/save.png" width="20px">
<span>Save</span>
</button>
</body>
</html>
·
Ex:-
submit, reset
<!-- submit example
-->
<html>
<body>
<form>
First Name:
<input type="text"><br>
Last
Name:
<input type="text"><br>
<input type="submit">
<input type="reset">
<input type="image"
src="images/greensubmit.png">
</form>
Notes:
<ol>
<li><b>Submit:</b> It is used to send the information
to server.</li>
<li><b>Reset:</b> It is used to clear all text boxes
of a form.</li>
</ol>
</body>
</html>
<select>
:-
·
It is used to create dropdown list /
list box.
·
It contains a set of <option>
tags.
·
dropdown
list: the user can select only one option among many.
·
list
box: the user can select ONE OR MORE options
also.
·
Syntax for dropdown list:
<select>
<option>......</option>
<option>......</option>
<option>......</option>
</select>
·
Syntax for list box:
<select
multiple="multiple">
<option>......</option>
<option>......</option>
<option>......</option>
</select>
·
Ex:-
<!-- dropdown list
& list box example -->
<html>
<body>
<form>
Payment type:
<select>
<option>Debit card</option>
<option>Credit card</option>
<option>Paypal</option>
<option>Cash on delivery</option>
</select>
<br><br>
Coourse(s):
<select multiple="multiple">
<option>.NET</option>
<option>Java</option>
<option>SQL Server</option>
<option>HTML 5 and CSS 3</option>
<option>jQuery</option>
</select>
<h4>Use Ctrl+Click to choose multiple items</h4>
</form>
</html>
<textarea>
:-
·
It is used to create a multi-line text
box.
·
Syn:
<textarea>
</textarea>
·
Ex:
descriptions, notes, comments etc.
·
Ex:-
<!--
textarea example -->
<html>
<body>
<form>
Your comments:
<textarea rows="5">
</textarea>
<input type="submit">
</form>
</body>
</html>
<optgroup>
:-
·
It is used to show categorized items in
a dropdown list / list box.
·
optgroup
= option group
·
Ex:-
<html>
<body>
<form>
<select>
<optgroup
label="Swedish Cars">
<option
value="volvo">Volvo</option>
<option
value="saab">Saab</option>
</optgroup>
<optgroup
label="German Cars">
<option
value="mercedes">Mercedes</option>
<option
value="audi">Audi</option>
</optgroup>
</select>
</form>
</body>
</html>
<iframe>
:-
·
It is used display another web page /
web site in the current working web page.
·
iframe = inline frame
·
Ex:-
<!-- iframe example -->
<html>
<body>
<h1>Google</h1>
<iframe
src="http://www.google.co.in" width="200px"
height="200px">
</iframe>
<hr>
<h1>Facebook</h1>
<iframe
src="http://www.facebook.com" width="200px"
height="200px">
</iframe>
</body>
</html>
HTML
Entities:
·
These are used to display some special
chars in the web page.
HTML
versions:
XHTML
1.0 :-
·
It is a strict and neat version of html,
to maintain standards in html.
·
xhtml is "html + some rules"
to maintain quality in the code.
Rules
of XHTML:
·
<!doctype> declaration is must.
·
The xml namespace is <html> tag is
mandatory.
·
<html>, <head>,
<title>, <body> is must.
·
All the paired tags must be closed.
·
All the un-paired tags must be closed by
itself.
Ø Ex: <hr/>
·
All the tags must be nested properly.
Ø Ex:
<b><i>hello</i></b>
·
All tags and attributes must be in lower
case only.
·
Attriute values must be in double
quotes.
Ø Ex: <table border="1">
·
Attribute minification is not allowed.
Ø Ex:
<select multiple="multiple">
·
Ex:-
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title of document</title>
</head>
<body>
<b><i>This text is bold and
italic</i></b>
<p>This is another paragraph</p>
A break: <br />
A horizontal rule: <hr />
An image: <img
src="images/smile.png" alt="Happy face" />
<br />
<input checked="checked"
type="checkbox" />
<input readonly="readonly" />
<input disabled="disabled" />
</body>
</html>
