Html siva

HTML BY

K.SIVA [email protected]

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

syntaxbold <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 photshopo flasho 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 tagSyn: <form>- - - - - -</form> Attributes Parameters============================name any namemethod get, postaction 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.

THE END

Html siva

Documents