Beruflich Dokumente
Kultur Dokumente
Clint Programming
Server Programming
Web designing
Designing Part
Programming Part
Dhtml
Vb Script
Java Script
Networks
Def:- Communication between two systems they are client and server. It is called network.
C
In the year 1960 it was introduced by CERNl (Central European Research Nuclear Labs)
Types of Networks
Nt Server
Sharing data from server To multi client
Nt Work Station
sharing data from server to server to multi clients
S C C C S
S S S
C
Ex:- LAN Local Area Network FAN Family Area Network
Ex:MAN Metropolitan Area Network WAN Wide Area Network GAN Gobal Area Network
Internet:- It is a part of the network it is global network of networks it can give high information In the year 1960 by CERNAL after one month gap of networks.
Requirements
PC Personal Computer DOT Telephone line (Department of ele communication) Modem it convert signals Analog to digital vice versa
Shell Account
Here you can see only Text matters
TCP Account
(Transfer Control Protocol) Here you can see and access text and graphics
Definitions Web server: - It holds all web information only Web data: - it can access all at once through the net. The data is called web data Website:- A site which holds the data form of web related to particular surround. Webpage:- A page is site.
http:// www.yahoo.com URl (uniform resource location) http:- hypertext transfer protocol It provides security to the site. www world wide web yahoo in normal language it is called website name .com Domain name
Domain name
.com .edu .Gov .Mil .Org
description
Commercial organization Education Org. Government Org. Military group Organization
Home page
MTP
MTP
MTP
SP
SP
SP
HTML
Hypertext markup language
It is one of the language It is used to publish the data in web document It is totally based on set of tags that user cannot modify Each tag has its own property Tags are predefined commands
</html>
Here html pages savings with two extensions They are .html or .htm Notepad ----------------------- .txt Word ------------------------ .doc Movie ----------------------- . mpg or .dat Photo image ------------------ .jpg or .bmp Animation ------------------------ .avi,gif
Editors of html Notepad WordPad Command editor (dos) Microsoft visual inter dev Front page .net editor
Working with <title> It is used to display the data on the title bar of the web document. <html> <head>
<title> This is my web page </title> </head> <body> Hellor </body> </html>
This is my web page </title> </head> <body bgcolor=teal background=F:\images\ramesh\3.jpg text =white left margin=50 top margin=100> Hello </body> </html> Working with formatting heading tags:By using these tags we can insert the headings in web documents. They are six levels of heading tags we are using <h1>, <h2>, <h3>, <h4>, <h5>, and <h6> Properties of heading tag:Align:- To set the alignment for the heading default alignment is left Syn:- align=right/center Title:- it display the tooltip when the mouse pointer is on the heading Syn:- title=some text Style:- to add additional styles like font-size, letter-spacing, background, Syn:- property: value, property: value;
-------</head> <body> <h1 align=right>This is h1 </h1> <h2 align=center title=hello> This is h2 </h2> <h3> This is h3 </h3> <h4> This is h4 </h4> <h5> This is h5 </h5> <h6> This is h6 </h6> </body> </html> Write a program to apply all style properties in heading tag <html> <body> <h1 style=font-size:120; color:red; letter-spacing:120; background:wheat; border:thick solid blue; padding:80; font-family:comic sans ms; font-style:italic; textdecoration:underline; background:url(path)> Bdps </h1> <h2 style=border: thick double red> Bdps
<b> bold</b> <br> <i>italic</i> <br> <u>underline</u> <br> <s>strike out</s> <br> <bdo dir=rt>BDPS COMPUTER EDUCATION </bdo> <br> <big> big</big> <br> <small> small</small> <br> <pre> Bdps computer education Vijayawada </pre> (a+b) <sup>2 </sup>=a<sup>2</sup>+b<sup>2</sup>+2ab<br> Log <sub>10</sub> <br> <center> center </center><br> Ramu is good and <del> bad </del> <br> <p style=color:blue;font-family:script;background:pink> Ramesh </p> <p style=background:url(path.jpg)> Venkat </p> m.c.a <tt> master of computer applications </tt>
<html> < body> <font face=comic sans ms size:120;border:thick double red> size=7 color=red title=hellow style=font-
</body> </html>
<div style=position: absolute; top:20; Right:25> Computer </div> <div style=position: absolute; bottom:20;left:20> Eduation </div> <div style=position: absolute; bottom: 20;right:20> Vijayawada </div> </body> </html>
Bgcolor:- by using this property we can change the background color Syn:- bgcolor=color name Direction:- we can change the direction of moving data Syn:- direction=right/left/up/down Note: - default direction is right to left Behavior:- we can change the type of moving data Syn:- behavior=alternate/slide Note:- default behavior is motion Scroll amount:- by using this property we can skip the spaces when the data is moving Syn:- scroll amount=value is pixels Scroll delay:- which move the data to a particular period Syn:- scroll delay=value is milliseconds Loop: - here move the data repeatedly Syn:- loop=value Title:- it display the tool tip when the mouse pointer is on the marquee Syn=title=message Height: - to maintain the height of marquee data Syn:- height=value Width:- to maintain the width of the marquee data Syn:- width=value Style:- to add additional styles
<Html> <body bgcolor=black> <marquee bgcolor=cyan direction=right behavior=alternate scroll amount=20 loop=2 title=Hai width=500 style=letter-spacing:40> BDPS </marquee> <marquee bgcolor=pink direction=up width=150 height=400 scroll delay=200> Computer education </marquee> </body> </html>
BDPS COMPUTER
Working with <IMG> By using this tag we can inert the image in web document like .jpg,.bmp, .gif,.avi, .dat Properties of <img> Border:- to insert the border for the image Syn:- border=value Src:- to insert the path of the image file Syn:= src=path of the image file. Extension Alt:- by using this we can insert a text in image Syn:- alt=some text
Height and width:- to maintain height and width of the image Syn:- height=value Dynsrc:- we can insert the animation file like .avi, .dat Syn: dynsrc=path of file.extension Title:- to display the too tip when the mouse pointer is on the image Syn:- title=some text Align:- to set the alignment of the image
<html> <body> <img src=2.jpg height=200 width=200 border=10 alt=This is image Title=hello Align=right Style=border: thick double red> </body> </html>
<html> <body> <img dynsrc=path of the file.exe loop=2 borders=10 style=border: thick solid red> </body> </html>
Example on marquee <html> <body> <div style=position: absolute; top: 200; left: 400> <marquee behavior=slide> Bdps </marquee> </div> <div style=position:absolute;top:220;right=300> <marquee direction=right behavior=slide>
BDPS
COMPUTER EDUCATION
Example for <img> <html> <body> <div style=position: absolute; left: 300>
<marquee direction=down behavior=slide> <img src=2.jpg height=100 width=100> </marquee> </div> <div style=position: absolute; left: 400; top: 115> <marquee behavior=slide> <img src=2.jpg height=100 width=100> </marquee> </div> <div style=position: absolute;top:215;right:377> <marquee direction=slide direction=right> <img src=3.jpg height=100 width=100> </marquee> </div> <div style=position:absolute;top:215;left:400> <marquee behavior=slide direction=up> <img src=5.jpg height=100 width=100> </marquee> </div> </body> </html>
Working with <Embed> By using this tag we can insert the movie in web document with control buttons like play,pause,forward,rewind,and mute; Properties of <Embed> Src:- to insert the path of image that which the file we want to open Syn:- src=path of the file.extension Height:- to maintain the height of the image Syn:- height=value Width=to maintain the width of the image Syn:width=value <html> <body> <embed src=tt.mpeg height=400 width=900> </body> </html>
Working <table> By using this tag we can insert the table in the web document The sub tags of <table> are <tr> , <th>, <td>, and <caption>
<tr> - by using this tag we can insert a table row in the web document <th> - by using this tag we can insert a table column with center alignment and bold font BDPS <td> - we can insert a table column with left alignment and normal font
BDPS <Caption> - it provides the title for the table Properties of <table>
Bgcolor: - we can change the background color of the table Syn:- bgcolor=color name Border:- to insert the border for the frame Syn:- border=value Border color dark:- it provides 3d effect for the border Syn: - border color dark=color name Title: - to display the tool tip when the mouse pointer on the table Syn: - title=message Background:- to insert the image of the background Syn:- background=path of the image. Extension Cell spacing: - it provides the gap between the cells
Syn:- cellspacing=value
Cell padding :- it provides the gap between the data And its outline Syn:- cell padding =value Height and width:- to maintain the height and width of the table Syn:- height=value Properties of <th> and <td> Rowspan:- we can merge the number of rows from the table Rowspan=number of rows to merge
Columspan :- we can merge the columns from the table Columnspan:- number of columns to merge
<html> <body> <table border=5 bgcolor=pink Border color dark=teal border color=red title=student mark list
Background=2.jpg Cellspacing=20 Cellpadding=20 Height=300 Width=600> <tr> <th>sno <th>sname <th>marks </tr> <tr> 3 <td>1 <td>ram <td>90 </tr> <tr> <td>2 <td>kiran <td>99 </tr> <tr> <td>3 Uday 88 Sno Sname 1 2 Ram Kiran Marks 90 99
A B C
E F
<th>F </tr> </table> </body> </html> Example of columspan <html> <body> <table border=5> <tr> <th>A <th colspan=3> Hello </tr> <tr> <th>B <th>C <th>D <th>E </tr> <th>E <th>G <th>H A B F Hellow C G D H E I
<html> <body>
<html> <body> <table border=5> <tr> <th colspan=3>Welcome </tr> <tr> <th>A <th>B <th>C </tr> <tr> <th colspan=3>Thanks </tr> Thanks A Welcome B C
<html> <body> <table border=5> <tr> <th colspan=3> </tr> <th rowspan=3>A <th>HTML <th rowspan=3> B </tr> <tr> <th>DHTML </tr> <tr> <th>Flash </tr> </table> </body> Thanks A BDPS BDPS HTML DHTML FLASH B
</html>
<html> <body> <table> <tr> A <th>A <th>B A <th>C Banana <th>D Cat </tr> <tr> <th>A <th colspan=3>Apple </tr> <tr> <th colspan=3>banana <th>B </tr> <tr> <th colspan=2> Cat <th colspan=2> Dog Dog B Apple B C D
<html> <body> <div style=position:absolute;top:65;left:230> <table border=5 bordercolordar=indigo Border color=green cellspacing=20 cell padding=20> <tr> <th> <img src=2.jpg height=100 width=100> <th> <img src=1.jpg height=100 width=100> </tr> <tr> <th> <marquee direction=right behavior=alternate> Sunset <th><marquee behavior=alternate> Blue hills </marquee> </tr> <table>
Image
image
Title
title
</body> </html>
Scrolling:- to remove the scroll bar Syn:- scrolling=no Name:- we can provide the address for the Frame
<html> <head> <frameset cols=-50%,* border=10 bordercolor=red> <frame src=1.jpg noresize, srolling=no> <frame src=> </frameset> </head> </html>
<html> <head> <frameset rows=20%,*,20%> <frame src=> <frameset cols=40%,*,40%> <frame src=> <frame src=> <frame src=> </frameset>
<html> <head> <frameset rows=20%,*> <frame src=> <frameset cols=33%,*,33%> <frame src=> <frameset rows=33%,*,33%> <frame src=> <frame src=> <frame src=> </frameset> <frame src=> </frameset> </frameset> </head> </html>
<html> <head> <frameset rows=25%,25%,25%,*> <frameset cols=25%,*,25%,25%> <frame src=> <frame src=> <frame src=> </frameset> <frameset cols=*,25%. <frame src=> <frame src=> </frameset> <frameset cols=*,25%> <frame src=> <frame src=> </frameset> <frameset cols=50%,*>
<html> <head> <frameset rows=33%,33%,*> <frameset cols=25%,*> <frame sr=> <frame src=> </frameset> <frameset cols=25%,25%,25%,25%> <frame src=> <frame src=> <frame src=> <frame src=> </frameset> <frameset cols=25%,25%,25%,25%>
<frame src=> <frame src=> <frame src=> <frame src=> </frameset> </frameset> </head> </html>
<html> <head> <frameset cols=33%,33%,*> <frameset rows=33%,33%,*> <frame src=> <frame src=> <frame src=> </frameset> <frame src=> <frameset rows=33%,33%,*> <frame src=> <frame src=>
<html> <head> <frameset rows=33%,33%,*> <frame src=> <frameset cols=33%,33%,*> <frame src=> <frame src=> <frame src=> </frameset> <frame src=> </frameset> </head> </html>
<html> <head>
<frameset rows=25%,50%,25%> <frameset cols=25%,25%,25%,*> <frame src=> <frame src=> </frameset> <frameset cols=25%,50%,25%> <frameset rows=50%,50%> <frame src=> <frame src=> </frameset> <frame src=> <frameset rows=50%,50%> <frame src=> <frame src=> </frameset> <frameset cols=25%,25%,25%,*> <frame src=> <frame src=> <frame src=> <frame src=> </frameset> </frameset>
</head> </html>
By using this tag, we can provide the link for multiple documents or images
Properties of <a>
Href:- by using this property we can provide the link that which the file we want to open Syn:- href=path of the file. Extension Title:- to display the tooltip when the mouse pointer is on anchor data. Syn:- title:- message Target:- by using this property we can open the file in a particular frame. Syn:- target=address Note:- it works only <frame> concept
Example Word.html <body bgcolor=black text=white> <h1>Word </h1> Some text </body> </html> Excel.html < body bgcolor=red> <h1>excel</h1> Some text </body> </html> Powerpoint.html <body bgcolor=teal> <h1>power point</h1> Some text
</body> </html>
<html> <body> <a href=word.html> <h2>word</h2> </a> <a href=excel.html> <h2>excel</h2> </a> <a href=powerpoint.html> <h2>powerpoint</h2> </a> </body> </html>
</a> <a href=excel.html target=a> <h2>excel</h2> </a> <a href=powerpoint target=a> <h2>power point</h2> </a> </body> </html> Frame.html <html> <head> <frameset cols=25%,*,border=0> <frame src=main.html noresize> <frame src= name=a> </frameset> </head> </html> Img.html <html> <body> <marquee direction=right behavior=slide>
<a href=2.jpg target=t> <img src=2.jpg height=100 width=100> </a> < a href=1.jpg target=t> <img src=1.jpg height=100 width=100> </a> <a href=3.jpg target=t> <img src=3.jpg height=100 width=100> </a> <a href=4.jpg target=t> <img src=4.jpg height=100 width=100> </a> </marquee> </body> </html>
Img1.html <html> <body> <marquee direction=up behavior=alternate height=550> <a href=2.jpg target=1> <img src=2.jpg height=100 width=100 > </a> <br> <a href=3.jpg target=2> <img src=3.jpg height=100 width=100> </a> <br> <a href=4.jpg target=3> <img src=4.jpg height=100 width=100> </a> <br> <a href=5.jpg target=4>
<img src=5.jpg height=100 width=100> </a> </marquee> </body> </html> Fra1.html <html> <head> <frameset cols=20%,* border=5> <frame src=image.html> <frameset rows=50%,*> <frame src= name=1> <frame src= name=2> </frameset> <frameset rows=50%,*> <frame src= name=3> <frame src= name=4> </frameset> </frameset> </head> </html> Working with <ol> <ul> and <li>
<Ol> order list By using the tag we can add the items with main priority. Using <li> <ul> unordered list By using this tag we can add the sub items in main priority using <li>
Property Type A,a I,II Circle Square Disc Default type is 1,2,3. <html> <body> <ol type=disc> <li>pgdca <li>pgdia <li>dca <li>doa </ol> </body>
</html> Working with form controls Textbox:- it is useful to insert the data at run time Password:- it provides security for the data Radio button:- it is useful to select only one selection from group of selections Check box:- to select multi items at a time Combox box:- to select single item from list of items List box:- select multi items from list of item Text area:- to insert multiple lines at a time File :- we can get the path of the selected file Label:- we can insert a text as a caption of the form Button:- to execute some action Reset:- it clears all controls