Html siva

HTML
BY
K.SIVA KUMAR
sivakumar@sivasoft.in

INTERNET

Ø The World Wide Web is, as the name implies, a
world-wide network of computers that share
documents called Web pages through an expansive
"web" of network connections. The Web is part of
the Internet, therefore, page sharing can take place
between computers located anywhere in the world,
there is Internet connectivity.

WEB PAGE

Ø The pages that we view in the browsers are called as
web pages.
Examples of the browsers:
-Internet explorer
-Opera
-Mozilla firefox
-Google Chrome
-Safari

WEBSITE

Ø Collection of webpages.

TYPES OF WEB PAGES:

Web pages are classified into three types.
-Static web pages
-Dynamic web pages
-Server pages

STATIC WEB PAGE

Ø These web pages are the pages in which the user
cannot directly interact with the web pages.
Ø To create these web pages we use HTML.
Ø These pages runs on browser.

DYNAMIC WEB PAGE

Ø These webpages are the pages in which the user can
directly interact with the webpages.
Ø To create these web pages we use DHTML (Dynamic
Hyper Text Markup Language).
Ø These pages also runs on the browser.

SERVER PAGE

Ø To create these pages we use PHP, JSP, ASP (Active
Server Pages).
Ø These pages runs on server.

TYPES OF LANGUAGES

Ø Languages are classified into two types.
Programming languages
-These languages are object-oriented languages.
-We can create objects here.
- compiler
Examples: c, c++, Java, VB (Visual Basic) , etc.,
Scripting languages
-These languages are object-based languages.
-We cannot create objects here.
-Pre-defined objects will be available in scripting languages.
-no compiler
Examples: HTML, XHTML, Javascript, VBscript, etc.,

HTML

Ø HTML stands for Hyper Text Markup Language.
Ø It is developed by Tim Berner's Lee.
Ø It is used to create Static Web pages.
Ø It is a global language i.e., it can be understood by all browsers.
Ø It is a scripting language.
Ø It is not case-sensitive language.
Ø The latest version of HTML is HTML 5

Note:
Ø We write the HTML code in text editors (notepad, dreamweaver,
netbeans, edit plus, eclipse etc.,) and we save it with .html

TAGS

The text placed between left angular brace " < " and
right angular brace " > " is called as TAG.
Syntax:
<------>
Example:
<html>
Opening tags Closing tags
-----------------------------------
Syntax : <-----> </----->
example: <html> </html>
<form> </form>

Tags are classified into two types:

1.) Container tags:
The tags that have both opening and closing tags are called as container tags.
examples:
<html>-----------------</html>
<body>-----------------</body>
Note: The closing tag will starts with a forward slash (" / ")

2.) Empty tags:
The tags that have only opening tags but no closing tags are called as empty tags.
examples:
<br>
<hr>
<img>

STRUCTURE OF HTML

<html>
<head>
<title>---------</title>
</head>
<body>
-
-
</body>
</html>

HEADINGS IN HTML

In html, we are having six heading styles.
All the headings are container tags.
Each and every heading will have their own predefined styles.
Syntax:
<h1>--------------------------</h1>
<h2>--------------------------</h2>
<h3>--------------------------</h3>
<h4>--------------------------</h4>
<h5>--------------------------</h5>
<h6>--------------------------</h6>
Out of all heading styles, biggest heading style is h1 and smallest is h6.

Attributes Parameters
===========================
align left, right, center

ATTRIBUTES AND PARAMETERS

Attributes:

Attributes are special features of a tag.
Each and every tag will have its own attributes.
A tag can have one or more attributes.

Parameters:
Parameters are the values that we assign to an attribute.

Syntax:
<tag attribute="parameter">

example:
<body bgcolor="pink">

FORMATTING TAGS

syntax
bold <b>--------------</b>
<strong>---</strong>
italic <i>----------------</i>
<em>-----------</em>
striking effect <s>----------------</s>
underline <u>---------------</u>
superscript <sup>----------</sup>
subscript <sub>----------</sub>
blockquote <blockquote>---</blockquote>

Paragraph tag:
============
It is a container tag.
Syntax:
<p>-------------</p>

===========================
align left, right, center, justify

Pre tag:
=======
Pre stands for pre-formatted text.
If we specify the text in pre tag, the browser will consider the line breaks (return / enter keys) and
spaces specified in the text editor (notepad).
Pre is a container tag.
Syntax:
<pre>---------------</pre>

br tag:-
=======
br stands for break.
It is used to break a line and shift the following text to a new line.
It is an empty tag.
syntax:
<br>
 
=======
It stands for Non-Breaking Space.
It is used to add more than one space between the words.
Note:
Generally, the browser will not accept the spaces and line breaks specified
in the text editor.
To overcome that, we use the above two tags.

HR tag: (Horizontal Rule)
=====================
hr tag is used to draw a line across the web page.
hr tag is an empty tag.
Syntax: <hr>
===========================
color any color name/hexa decimal number
size pix
width % or pix
noshade noshade
Note:
The default width of the horizontal rule is 100%
The default alignment of the hr is center.
noshade attribute will be applied only when we are not specifying the
color of the horizontal rule.

Font tag:
=======
Font tag is used to format the text such as changing the text size, color and style.
Using this tag, we can apply styles to a character, word, sentence, etc.
Font tag is a container tag.
syntax: <font>-----</font>
===========================
color any color name or hexadecimal number
size 1 to 7
face arial, tahoma, etc.,

Note:
=====
The default size of the text in the web page is 3.
The default face of the text in the web page is Times New Roman.
The default color of the text is black.

Marquee tag:
===========
Marquee tag is used to give animation to the text, images, etc.,
Syntax: <marquee>-------------------</marquee>
============================
behavior scroll, alternate, slide
bgcolor any color name/hexa decimal number
scrollamount number
direction left, right, up, down
height % or pix
width % or pix
Note:
=====
The default behavior of marquee tag is scroll.
The behavior "bounce" will not work in internet explorer.
Its behavior will differ from browser to browser.

Image tag:
This tag is used to insert images in the web page.
Image tag is an empty tag.
Syntax: <img>
src image path
border pix
height pix or %
width pix or %
align left, right, top, middle, bottom
vspace pix
hspace pix
alt any text
Note:
In the image tag, the left and right alignments will be applied to the image.
The top, middle and bottom alignments will be applied to the text along with
the image.

Links:
======
To create links, we use anchor tag.
Anchor tag is a container tag.
Syntax:
<a>--------------</a>

Attributes parameters
===========================
href url (uniform resource locator)
target _blank,_self

TABLES:
Tables are used to represent our data in a tabular format.
In HTML, to represent tables we use table tag.
Table is a container tag
syntax:
<table>-----------</table>
TABLE ROWS:
The horizontal lines present in the tables are called as table rows.
To represent table rows, we use tr tag.
syntax:
<tr>---------------</tr>
CELLS:
The intersection of rows and columns are called as cells.
To represent table headings we use th tag.
th tag is a container tag.
syntax:
<th>------------</th>
To represent table data we use td tag.
td tag is a container tag.
syntax:
<td>--------------</td>

ATTRIBUTES PARAMETERS
height pixels or %
width pixels or %
border pixels
bordercolor any color
bgcolor any color
background image path
valign top, middle, bottom
rules rows, cols, all, none
cellspacing pixels
cellpadding pixels
rowspan number
colspan number
NOTE:
Cellspacing:
This attribute is used to change the spacing between the cells.
Cellpadding:
This attribute is used to change the space between the content to the inner edges of the
cell.

LIST IN HTML

In html, we are having three types of lists.
-Ordered list
-Unordered list
-Definition list

Ordered list:
-It is also called as numbered list.
-It is used to give numbering to the list items.
-It is a container tag.
-Syntax:
<ol>------</ol>
-To specify the list items we use li tag.
-It is also a container tag.
-Syntax:
<li>------</li>
Attibutes Parameters
type i, I, a, A, 1
start any number
Example:
<ol type="i" start=3>
<li>photoshop</li>
<li>flash</li>
<li>dreamweaver</li>
</ol>
Out put:
iii. photshop
iv. flash
v. dreamweaver

Unordered list:
-It is also called as bulleted list.
-It is used to give bullets to the list items.
-Syntax:
<ul>------</ul>
-To specify the list items we use li tag.
-It is also a container tag.
-Syntax:
<li>------</li>
===========================
type disc, circle, square
Example:
<ul type="circle">
<li>photoshop</li>
<li>flash</li>
<li>dreamweaver</li>
</ul>
Out put:
o photshop
o flash
o dreamweaver

Definition list:
-It is also called as discriptive list.
-It is used to give definitions to definition terms.
-Syntax:
<dl>------</dl>
-To specify definition term, we use dt tag.
-Syntax:
<dt>------</dt>
-To specify definition data, we use dd tag.
-Syntax:
<dd>------</dd>

Example:
<dl>
<dt>HTML:</dt>
<dd>Hyper text markup language</dd>
<dt>XHTML:</dt>
<dd> extensible hyper text markup language</dd>
</dl>

Out put:
HTML:
Hyper text markup language
XHTML:
extensible hyper text markup language

FORMS

Forms are used to create user interactive web pages.
Forms comes under DHTML (Dynamic hyper text
markup language)
To create forms we use form tag
Syn: <form>- - - - - -</form>

============================
name any name
method get, post
action url (uniform resource locator)

Action:
======
-This attribute is used to specify the URL of the serverpage to which we want to send our form data.
-Example:
<form name="frm" action="user.aspx">

Method:
=======
-This attribute is used to specify the WAY we want to send our data to the server page.

i.) get:-
-In this method, we dont have security for our data and only limited data can be sent to the server page.

-Example:
<form name="frm" action="user.php" method="get">

ii.) post:-
-This is the default method of the form.
-In this method, we will have security for our data and we can send bulk of data to the server page.
-Example:-
<form name="frm" action="user.php" method="post">

Fieldname Keyword Syntax
================================================
text box text <input type="text">
password box password <input type="password">
checkbox checkbox <input type="checkbox">
radio button radio <input type="radio">
submit button submit <input type="submit">
reset button reset <input type="reset">
text area textarea <textarea></textarea>
select select <select><option></option></select>

====================================
name any name
value any value
size pixels
maxlength number
rows number
cols number
checked checked
multiple multiple

Including Audio And Video Files In Browser:
-To include the audio (sound files) in html, we use bgsound tag.
Example:-<bgsound src="Back Street Boys.MP3">
-By default, the sound will play only once.
-To make it repeated, we use loop attribute.
Attribute parameter
loop any number, -1(infinity)
Example:-<bgsound src="11.mp3" loop=-1>
-To include video files in browser, we use dynamic source (dynsrc) attribute of image tag.
Example:-<img dynsrc="blackstreet.wmv">
Attributes parameters
height % or pix
width % or pix
start mouseover
-In the above two examples of audio and vedio, we don't get the controls.
-Inorder to get controls, we use embed tag.
Example for audio file:-<embed src="blackstreet.mp3">
Example for video file:-<embed src="blackstreet.avi">

Frames:
-Frames are used to divide our browser window into multiple windows.
-Using frames we can place and view multiple files in a single window.
-Each and every frame will have its own scrollbars.
-To divide our window into multiple frames, we use frameset tag.
-Frameset tag is a container tag.
Syntax:<frameset>..........</frameset>
rows pix, %
cols pix, %
border pix
bordercolor any color name
-To place the files in the frames, we use frame tag.
-It is an empty tag.
Syntax:<frame>
src file path
name any name
marginheight pix
marginwidth pix
scrolling yes, no,default
noresize -
Note: ***We dont have body part in the frames.

Html siva

More Related Content

What's hot

Viewers also liked

Similar to Html siva

More from ch samaram

Html siva