HTML and Internet

Hyper text Markup Language (HTML)
A simple markup language used to create hypertext documents that are por
table from one platform to another.
HTML is used to design & develop web pages.
hypertext documents -> HTML documents -> web pages -> web documents:
software Requirements:
1. Any OS(Operating System).
windows, linux , unix , macintosh, sun solaris.
2. Any Development tools (HTML Editors).
(IDEs-Integreted Development Environments)
WYSIWYG(What You See Is What You Get)
(Macromedia)-> Adobe Dreamweaver.
use any Text editor
Notepad (windows) * it is not an HTML editor
vi editor (linux, unix)
3. Any web Browser (To view the web pages)
MSIE(IE) -> Microsoft Internet Explorer.
Netscape Navigator
Opera,
Fire Fox, Mozilla, Chrome,safari.
4. Internet Connection (Optional)
**************************************************************
Html contains tags:
What is tag?:
A text that which it was enclosed between '<' and '>'
i.e -> <text>
examples: <html>,<b>,<p>, <bdps>*
2 types tags.
1. Empty tags.
it has only openning, empty tags will not have any child tags.
Syntax:
<tag_name [attribute1 attribute2 ...]>
Example:
<hr>
->without attributes
<hr color='red' align='center'> ->with attributes
XHTML:
<hr />
list of empty tags in HTML :

<hr>, <img>, <input>, <br>, <link>
2. container tags.
a tag will have both openning, closing,
tags will have body & child tags.
<html>....</html>
<body>....</body>
syntax of the tag
<tag_name [attribute1 attribute2 ...]>
text/tag (body)
</tag_name>
example
1. <b>welcome to BDPS</b>
-> without attributes
2. <body bgcolor='red' text='blue'>
<i>vijayawada</i>
<hr>
</body>
-----------------------What is attribute?
It is an additional information to the tag. which is used overwrite the default
values.
Syntax of the Attribute:
attribute_name=attribute_ value
Example:
bgcolor='red'
align='center'
______________________________________
structure of the HTML Page.
<html>
<head>
------header part (optional)
</head>
<body>
------body part (required)
---</body>
</html>
header part:
optional, it does not produce any output.
this part is used to pass instruction to the browser or to the search engine.
<title> , <script>, <style> , <meta>, <link>.
body part:(required)
everything u have to write in the body.
_______________________________________________
rules
1. html tags are case insensitive
<html> , <HTML> , <HTml>
2. attribute names are also case insensitive
3. attribute values may be case sensitive
name="sno" value="bdps"
SNO
4. attribute values may be eighter in ' or "
bgcolor=red
bgcolor='red'
bgcolor="red"
alt=this is my photo
alt="this is my photo"
* invalid
5. avoid spaces after '<'

< html>
6. avoid spaces with in tags
<h tml>
7. html allows nested tags.
<small>
<small>Bdps Software Ltd</small>
</small>
8. the last openned tag will be closed first.
<b><i><u>BDPS</u></i></b>
9. html pages can be saved with .html / .htm extensions.
List Tags
-----------------------List tags are 3 types:
1. <ul> Un-ordered List
2. <ol> Ordered List
3. <dl> Defination List
Note: <ul> and <ol> Must have the <li> tag (List Item)
Syntax:
<ul
type="disc | circle | square">
Syntax:
<ol
type="1 | a | A | i | I "
start=n>
<dl> must have the <dt> and <dd>
***********************************************************
<html>
<body>
<ol>
<li>vijayawada</li>
<li>Hyderabad</li>
<li>Chennai</li>
<li>Mumbai</li>
</ol>
<hr>
<ol type="A" start="5">
<li>vijayawada</li>
<li>Hyderabad</li>
<li>Chennai</li>
<li>Mumbai</li>
</ol>
<hr color=red>
<uL type="circle">
<li>vijayawada</li>
<li>Hyderabad</li>
<li>Chennai</li>
<li>Mumbai</li>
</uL>
<hr>
<ol>
<li>PGDCA</li>
<UL>
<li>Module 1: msoffice</li>
<li>Module 2: language</li>
<li>Module 3: Advanced </li>
</UL>
<li>Java Programming</li>
</ol>
<hr color="#0B0000">
<dl>
<dt>HTML</dt>
<dd>Hyper Text Markup Language</dd>
<dt>DHTML</dt>
<dd>Dynamic HTML</dd>
</dl>
</body>
</html>
===================================
FORM
Specifies that the contained controls take part in a form.
Form controls are created in the document as input elements.
A document may contain any number of form elements, but a client may submit the
setting of controls from only one form at a time.
If you need to logically or structurally group controls while maintaining a sing
le form, use the fieldset element to create the necessary subgroupings of contro
ls.
<FORM
ACTION=url
ENCTYPE=encoding
METHOD=GET | POST
NAME=name
TARGET=window_name | _blank | _parent | _self | _top>
---------------------------------------------------------------------------<INPUT>
Specifies a form input control.
<input
ALIGN=LEFT | CENTER | RIGHT
ALT=text
DISABLED
MAXLENGTH=n
NAME=name
READONLY
SIZE=n
SRC=url
TYPE=BUTTON | CHECKBOX | FILE | HIDDEN | IMAGE | PASSWORD | RADIO | RESET | SUBM
IT | TEXT
VALUE=value>
-----------------------------------------------------------------------------P
Description
Denotes a paragraph.
Syntax
<P
ALIGN=CENTER | LEFT | RIGHT
CLASS=classname
STYLE=css1-properties
event = script
>
---------------------------------------------------------------------------SELECT
Denotes a list box or dropdown list. The end tag encloses any OPTION ele
ments that may appear within the SELECT element.
-----------------------------------------------OPTION
Denotes one choice in a SELECT block.
Syntax
<OPTION
SELECTED
VALUE=value>
-------------------------------------------------------------------------<FIELDSET>...</FIELDSET>
A fieldset element is a structural container for form elements.

you can define multiple filedset elements within a single form element to supply
context to logical grouping of form elements.
You can also attach a label that gets embedded within the rule by defining a leg
end element immediately after the start tag of a fieldset element.
Supporting browsers draws a rule around the form elements within each fieldset c
ontainer. By default, the box extends the full width of the next outermost conta
iner geography usually the document body html element.
Syntax:
<fieldset
align= left | center | right>
______________________________________________________
TEXTAREA
Creates a multiline text entry control in which the user can type and ed
it text. The end tag is required. Any text between the start tag and end tag is
used as the initial value for the control.
Syntax
<TEXTAREA
ALIGN=ABSBOTTOM | ABSMIDDLE | BASELINE | BOTTOM | LEFT | MIDDLE | RIGHT | TEXTTO
P | TOP
COLS=n
DISABLED
NAME=name
READONLY
ROWS=n
>
-------------------------------------------------------------FRAMESET
Description
Sets the number and size of vertical and horizontal frames for a compoun
d document. Use the FRAME element within FRAMESET to define the content and prop
erties of the individual frames. You can also nest FRAMESET elements to create f
rames within a frame.
Syntax
<FRAMESET
BORDER=pixels
BORDERCOLOR=color
COLS=col-widths
FRAMEBORDER=NO | YES | 0 | 1
FRAMESPACING=spacing
ROWS=row-heights
>
----------------------------------------------------------------------------------FRAME
Description
Specifies an individual frame within a FRAMESET.
Syntax
<FRAME
BORDERCOLOR=color
CLASS=classname
HEIGHT=n
MARGINHEIGHT=pixels
MARGINWIDTH=pixels
NAME=window_name | _blank | _parent | _self | _top
NORESIZE=NORESIZE | RESIZE
SCROLLING=AUTO | NO | YES
SRC=url
TITLE=text
WIDTH=n
>
-------------------------------------------------------------------------------IFRAME
Description
Used to create in-line floating frames.
Syntax
<IFRAME
P | TOP
BORDER=pixels
BORDERCOLOR=color
FRAMESPACING=pixels
HEIGHT=n
HSPACE=pixels
MARGINHEIGHT=pixels
MARGINWIDTH=pixels
NAME=window_name | _blank | _parent | _self | _top
NORESIZE=NORESIZE | RESIZE
SCROLLING=AUTO | NO | YES
SRC=url
VSPACE=pixels
WIDTH=n>
*********************************
<a> tag (Anchor tag)
<a> is used to create hyper links/hyper text
When the user clicks on hyper link/hyper text it opens a new web page , that it
may be in the same computer or
another computer in the internet / intranet.
syntax:
<a
href=url
target="_self| _top | _blank| _name">
Hyper text may be in blue color,
may be underlined,
cursor will be the hand cursor.
3 states:
1. visited 2. unvisited 3.active
******************************************
<img>
this tag is used to insert images in to the web pages.
Common image types are GIF and JPEG, but modern browsers are frequently capable
of decoding bitmapped images in PNG and BMP formats.
img elements are inline elements, appearing anywhere in the document you specify
, including in the middle of a line of text.
If you want to make an entire image a clickable link, wrap the img element insid
e an <a> element. To eliminate the typical link border around the image, set th
e border attribute to 0.
To be backward compatible with earlier scriptable browsers, it is advisable to i
nclude height and with attribute assignments in all img element tags.
Syntax:
<img
src=url
border=n
alt=alternate text
width=n
height=n>
********************************************************************************
absolute path/url
absolute path:-> d:\examples\images\logo.gif,
absolute url:-> http://www.yahoo.com
relative path/url
relative path:
/images/logo.gif
Sample.html
<html>
<head>
<title>welcome to html</title>
</head>
<body>
welcome to HYPER text markup language
</body>
</html>
*****************************************************************
texttags.html
<html>
<body>
Text formatting tags:<br>
<b>welcome</b><br>
<i>welcome</i><br>
<u>welcome</u><br>
<b><u><i>welcome</i></u></b><br>
<strike>welcome</strike><br>
<s>welcome</s><br>
<big>welcome</big>
<small>welcome</small>
<small>
<small>welcome</small>
</small><br>
subscript: H<sub>2</sub>SO<sub>4</sub><br>
superscript: 2 <sup>nd</sup><br>
Java<sup>TM</sup> <br>
Ranbaxy<sup>®</sup> <br>
© &hearts; ½ ¼ ¾
€ Α
</body>
</html>
----------------------------------------------------------------------------------:body tag:
<body
bgcolor=color
text=color
background=url
link=color
vlink=color
alink=color>
***************************************
Heading Tags:
Displays text in different Headdings.
Total 6 heading tags are availabe.
<h1> .....<h6>
syntax:
<hn
align="left | center | right">
**************************************
Example on heading tags:
heading.html
<html>
<head>
<title>Example on heading tags</title>
</head>
<body bgcolor=black text=red>
<h1 align=center>welcome to bdps</h1>
<h2 align=right>welcome to bdps</h2>
<h3>welcome to bdps</h3>
<center>
<center>
</body>
</html>
*******************************************************
PRE
Description
Renders text in fixed-width type.
Syntax
<PRE>
**********************************************************
<pre> tag exmaple.
<html>
<body>
Date:11:29 PM 1/26/2007,
place:vijayawada.
to,
BM,
BDPS.
Sir,
djfdjjjjjjjjjjjjjjjjkfjdk fkdjkfjdk fkdjfkjdklfjkdjfkdjfj
dfjdjfdjfkjdjfkkkkkkkkkjoeureroejrjldjlkfjdkjfkdjflkjdf
djfdjfjdlkfjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj
jj
dfdjfkdjfkd
yours,
xxxx
</body>
</html>
************************************************************
<font>
Specifies a new font face, size, and color to be used for rendering the enclosed
text.
<font
size=n (1-7) default is 3
color=color
face=font-family-name>
----------------------------------<HR> Draws a horizontal rule.
<hr
size=n
width=n
color=color
align=left | right | center>
------------------------------------------------------------------------------font.html
example on <font> and <hr> tags.
<html>
<body>
Welcome to <font size=6>vijayawada</font><br>
<hr>
welcome to <font size=+2 color=blue>Vijayawada</font><br>
<hr color=red size=6>
<center>
welcome to <font size=+2 color=blue face="arial black">Vijayawada</font><br>
</center>
<hr color=red width=300 align=center>
</body>
</html>
**************************************************************
MARQUEE
Enables you to create a scrolling text marquee.
<marquee
bgcolor=color
behavior=alternate | slide | scroll
width=n
height=n
hspace=n
vspace=n
direction=left | right | up |down
scrollamount=pixels
scrolldelay=milliseconds
loop=n>
*************************************************
Example On Marquee tag:
marquee.html
<html>
<body>
<marquee behavior="alternate" loop="5" scrolldelay="50" scrollamount="20">welco
me to BDPS software ltd</marquee><br>
<marquee hspace="50" vspace="50" direction="up" bgcolor="#FF99FF" width="450" he
ight="200">
<h2>welcome to BDPS Software ltd</h2></marquee><br>
<marquee><img src="demo.jpg"></marquee>
</body>
</html>
----------------------------------TABLE
Used to specify that the contained content is organized into a table with rows a
nd columns. Use the TR, TD, and TH elements in the container to create the rows,
columns, and cells.
<TABLE
BACKGROUND=url
BGCOLOR=color
BORDER=n
BORDERCOLOR=color
BORDERCOLORDARK=color
BORDERCOLORLIGHT=color
CELLPADDING=n
CELLSPACING=n
HEIGHT=n
RULES=ALL | COLS | GROUPS | NONE | ROWS
WIDTH=n>
----------------------------------TR
Creates a row in a table. The row can contain one or more TD elements.
<TR
BGCOLOR=color
BORDERCOLOR=color
VALIGN=BASELINE | BOTTOM | CENTER | TOP>
----------------------------------TH
Creates a row or column heading in a table. The element is similar to the TD ele
ment but emphasizes the text in the cell to distinguish it from text in TD cells
. The end tag is optional
<TH
BACKGROUND=url
BGCOLOR=color
BORDERCOLOR=color
CLASS=classname
COLSPAN=n
ROWSPAN=n
VALIGN=BASELINE | BOTTOM | CENTER | TOP
>
----------------------------------TD
Specifies a cell in a table. This element is valid only within a row in a table.
You must use a TR element before using TD. All attributes are optional.
<TD
BACKGROUND=url
BGCOLOR=color
BORDERCOLOR=color
CLASS=classname
COLSPAN=n
ROWSPAN=n
VALIGN=BASELINE | BOTTOM | CENTER | TOP>

----------------------------------List Tags in html
-----------------------List tags are 3 types:
Note: <ul> and <ol> Must have the <li> tag (List Item)
Syntax:
<ul
type="disc | circle | square">
Syntax:
<ol
type="1 | a | A | i | I "
start=n>
<dl> must have the <dt> and <dd>
***********************************************************
<html>
<body>
<ol>
<li>vijayawada</li>
<li>Hyderabad</li>
<li>Chennai</li>
<li>Mumbai</li>
</ol>
<hr>
<ol type="A" start="5">
<li>vijayawada</li>
<li>Hyderabad</li>
<li>Chennai</li>
<li>Mumbai</li>
</ol>
<hr color=red>
<uL type="circle">
<li>vijayawada</li>
<li>Hyderabad</li>
<li>Chennai</li>
<li>Mumbai</li>
</uL>
<hr>
<ol>
<li>PGDCA</li>
<UL>
<li>Module 1: msoffice</li>
<li>Module 2: language</li>
<li>Module 3: Advanced </li>
</UL>
<li>Java Programming</li>
</ol>
<hr color="#0B0000">
<dl>
<dt>HTML</dt>
<dd>Hyper Text Markup Language</dd>
<dt>DHTML</dt>
<dd>Dynamic HTML</dd>
</dl>
</body>
</html>
****************************************************************
<INPUT>
Specifies a form input control.
<input
ALIGN=LEFT | CENTER | RIGHT
ALT=text
DISABLED
MAXLENGTH=n
NAME=name
READONLY
SIZE=n
SRC=url
TYPE=BUTTON | CHECKBOX | FILE | HIDDEN | IMAGE | PASSWORD | RADIO | RESET | SUBM
IT | TEXT
VALUE=value>
*************************************************
Example on Input tag
input.html
<html>
<body>
<form>
User Name:<input type="text"><br>
My Name :<input type="text" value="bdps"><br>
Full Name:<input type="text" size="50" maxlength="5"><br>
Password:<input type="password"><br>
select Your qualification:<br>
<input type="checkbox" name="qua" value="mba">MBA<BR>
<input type="checkbox" name="qua" value="mca" checked>MCA<br>
<input type="checkbox" name="qua" value="mcom">MCOM<br>
select your Result:<br>
<input type="radio" name="res" value="pass" checked>Passed<br>
<input type="radio" name="res" value="fail">Failed<br>
Attach A File:<input type="file"><br>
<input type="button" value="click"><br>
<input type="submit"> <input type="submit" value="submit"><br>
<input type="reset"><input type="reset" value="clear">
</form>
</body>
</html>
*****************************************************************
SELECT
Denotes a list box or dropdown list. The end tag encloses any OPTION ele
ments that may appear within the SELECT element.
Syntax
<SELECT
P | TOP
DISABLED
MULTIPLE
NAME=name
SIZE=n>
-----------------------------------------------OPTION
Denotes one choice in a SELECT block.
Syntax
<OPTION
SELECTED
VALUE=value>
Example on select tag
<html>
<body>
<form>
<b>Creating DropDownlist box</b><br>
<select>
<option value="usa">United States of America</option>
<option value="uk">United Kingdom</option>
<option selected>Inida</option>
<option>Japan</option>
<option>France</option>
<option>Paris</option>
</select>
<hr>
<b>Creating list box</b><br>
<select size="5" multiple>
<option value="usa">United States of America</option>
<option value="uk">United Kingdom</option>
<option selected>Inida</option>
<option>Japan</option>
<option>France</option>
<option>Paris</option>
<option>sri Lanka</option>
<option>vijayawada</option>
<option>Demo</option>
<option>hyderabad</option>
</select><br>
Note: 1. Dropdown list box is used to view and select only on item.<br>
2. In the list box user can select & view more than one item.<br>
to select multiple items user has to use CTRL or SHIFT keys.<br>
CTRL key is used to select an alternative items.<br>
SHIFT key is used to select a range of items.<br>
</form>
</body>
</html>
****************************************************
TEXTAREA
Creates a multiline text entry control in which the user can type and ed
it text. The end tag is required. Any text between the start tag and end tag is
used as the initial value for the control.
Syntax
<TEXTAREA
P | TOP
COLS=n
DISABLED
NAME=name
READONLY
ROWS=n>
Example on textarea.
<html>
<body>
<textarea></textarea><br>
<textarea cols="50" rows="20"></textarea>
<textarea cols="20" rows="20">wekjdfjd jdjfdk djkfjdkjfkdjkfjkdjfjdkfj

fdfjkdjfkd
fjdfj
dfjdjf
</textarea>
</body>
</html>
**********************************************************
<a> tag (Anchor tag)
<a> is used to create hyper links/hyper text
When the user clicks on hyper link/hyper text it opens a new web page , that it
may be in the same computer or another computer in the internet / intranet.
syntax:
<a
href=url
target="_self| _top | _blank| _name">
Hyper text may be in blue color,
may be underlined,
cursor will be the hand cursor.
******************************************
<img> this tag is used to insert images in to the web pages.
Syntax:
<img
src=url
border=n
alt=alternate text
width=n
height=n>
____________________________________________________
Example on <IMG> & <a> tag
<html>
<body bgcolor="#FF6600" link="green" vlink="blue" alink="yellow">
welcome<Br>
<a href="font.html">Click Here</a><br>
<a href="http://www.yahoo.com">Yahoo</a><br>
<a href="http://www.yahoo.com"><img src="F:/floppyd.gif"></a>
<img src="images/Blue hills.jpg" width="300" height="300">djkfjkd fjdkfjkdjfk
dfjdljfkdjfd<br>
</body>
</html>
*************************************************************************
InterNet
Inter-Network
Network:
A group of computers and other devices, such as printers and scanners, c
onnected by a communications link, enabling all the devices to interact with eac
h other. Networks can be small or large, permanently connected through wires or
cables, or temporarily connected through phone lines or wireless transmissions.
The largest network is the Internet, which is a worldwide group of networks.
Local area network (LAN)
A communications network connecting a group of computers, printers, and
other devices located within a relatively limited area (for example, a building)
. A LAN allows any connected device to interact with any other on the network.
MAN: Metropolitean Area Network
wide area
A
printers,
any other
network (WAN)
communications network connecting geographically separated computers,
and other devices. A WAN allows any connected device to interact with
on the network.
Web server:A computer that is maintained by a system administrator or Internet serv

ice provider (ISP) and that responds to requests from a user's web browser.
web browser:
Software that interprets the markup of files in HTML, formats them into
Web pages, and displays them to the end user. Some browsers also permit end user
s to send and receive e-mail, read newsgroups, and play sound or video files emb
edded in Web documents.
ex: internet explorer(MSIE/IE), netscape, mozilla, Google Chrome ... safari, op
era, Hot Java browser.
World Wide Web (WWW):
A system for exploring the Internet by using hyperlinks. When you use a
Web browser, the Web appears as a collection of text, pictures, sounds, and digi
tal movies.
*****************************************
protocol
A set of rules and conventions for sending information over a network. T
hese rules govern the content, format, timing, sequencing, and error control of
messages exchanged among network devices.
Hyper text Transfer Protocol (HTTP)
The protocol used to transfer information on the World Wide Web. An HTTP
address (one kind of Uniform Resource Locator [URL]) takes the form: http://w
ww.microsoft.com.
File Transfer Protocol (FTP)
A member of the TCP/IP suite of pr
otocols, used to copy files between two computers on the Internet. Both computer
s must support their respective FTP roles: one must be an FTP client and the oth
er an FTP server.
ftp://ftp.microsoft.com
SMTP: Simple Mail Transfer Protocol, (Send e-mail)
POP/pop3:
NNTP: News Network Tranfer protocol,
Hyper text Markup Language (HTML)
A simple markup language used to create hypertext documents that are por
table from one platform to another.
HTML files are simple ASCII text files with codes embedded (indicated by markup
tags) to denote formatting and hypertext links.
hypertext documents -> HTML documents -> web pages -> web documents:
software Requirements:
1. Any OS(Operating System).
windows, linux , unix , macintosh, sun solaris.
2. Any Development tools ( HTML Editors).
(IDEs -Integreted Development Environments)
use any Text editor
Notepad (windows) * it is not an editor
vi editor (linux, unix)
WYSIWYG(What You See Is What You Get)
Microsoft Visual Interdev
Microsoft Front page.
Adobe GoLive
Macromedia Dreamweaver .
3. Any web Browser (To view the web pages)
MSIE(IE) -> Microsoft Internet Explorer.
Netscape Navigator
Opera,
Fire Fox, Mozilla.
4. Internet Connection (Optional)
****************************************

HTML and Internet

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

HTML and Internet

Hochgeladen von

Copyright:

Verfügbare Formate

Hyper text Markup Language (HTML)

list of empty tags in HTML :

5. avoid spaces after '<'

A fieldset element is a structural container for form elements.

VALIGN=BASELINE | BOTTOM | CENTER | TOP>

<textarea cols="20" rows="20">wekjdfjd jdjfdk djkfjdkjfkdjkfjkdjfjdkfj

Web server:A computer that is maintained by a system administrator or Internet serv

Das könnte Ihnen auch gefallen