Scribd Logo
Upload

Welcome to Scribd!

  • Web Technology: Clint Programming Server Programming

    Uploaded by

    Kanthi Swaroop
    44 views50 pages
    t

    Original Title

    Web Technology

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    t

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    44 views50 pages

    Web Technology: Clint Programming Server Programming

    Uploaded by

    Kanthi Swaroop
    t

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 50

    WEB TECHNOLOGY

    Clint Programming

    Server Programming

    Web designing

    A.S.P. (Active Server Page)

    Designing Part

    Programming Part

    Photoshop Flash Gif Animator Dream Weaver Audio-video presentation

    Networks Internet Html

    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

    Types of Internet Accounts

    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.

    Home page:- starting page of the website

    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

    Block diagram of Website


    To create a website the minimum requirement of pages are three. They are Home page Main page Subsidiary page

    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

    Ex:- <html> opening tag ----------------------------</html> closing tag

    Structure of html page


    <html> <head> _______ _______ </head> <body> -----------------</body> 80% code 20% code

    </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>

    Working with <body>


    By using this tag we can inert the data in the web document

    Properties of body tag


    Bgcolor: - by using this property, we can change the background color Syn: bgcolor=color name Background: - we can set the image or background color Syn: - background=path of image file. Extension Text: - we can change the font color Syn: - text=color name Left margin / right margin / top margin / bottom margin We can set margin for the data <html> <head> <title>

    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;

    Ex:- <html> <head>

    -------</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

    </h2> </body> </html>

    Working with formatting tags


    <B> - by using this tag we can provide bold <I> - It converts as italic <U> - It provides underline <S> - It provide strikes out the data <BDO> - it display the data in the reverse format <Big> - it increase two pixel more to the normal text <Small> - it decrease two pixel less to the normal text <br> - It breaks the line <Pre> - It display the data in predefined format <Sup> - It display the data in superscript <Center> - It display the data in the center of the line <Del> - It is symbol to strike out <P> - It display the data in the paragraph format <TT> - To display the data as type writer text <Block quote> - To display the data as quotation text

    <html> <body bgcolor=wheat>

    <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>

    <blockquote> Kiran </blockquote>

    Working with <Font>


    By using this tag we can insert the data in the required format Properties of <font> Face:- by using this property we can change the style of the font name Syn: - face=font-name Size:=- to increase the font size; Note:-maximum font size is 7 Syn:- size=value Color:- to change the font color Syn:- color=color name Style:- to add additional style Syn:- style=property:value;property:value;

    <html> < body> <font face=comic sans ms size:120;border:thick double red> size=7 color=red title=hellow style=font-

    Bdps </font> </html> </body>

    Working with <hr> : NO closing


    By using this tag we can insert the horizontal line in the web document Properties of <hr> tag Color:- we can change the line color Syn:- color=color name Size:- to increase the thickness of the line Syn:- size=value Width:- to increase the width of the line Syn:- width=value (Default value is pixels> Align:- to set the alignment of the line Syn:- align=right/left Note:- default alignment is center

    <html> <body> <h1> BDPS COMPUTE CENTER </h1>

    <hr color=red size=5 width=50% align=left> </html> </body>

    Working with <Div>


    By using this tag, we can insert the data in exact location Syn:- <div style=position:absolute;top:value;left:value> <html> <body> <div style=position: absolute; top: 200; left: 350> BDPS </div> <div style=position: absolute; top: 220; left: 314> Computer education </div>
    Bdps computer

    </body> </html>

    <body> <div style=position: absolute; top: 20; Left:20> BDPS </div>


    Education vijayawada

    <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>

    Working with <marquee>


    By using this tag we can provide the animation for the data or image Properties of <marquee> tag

    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 </marquee> </div> </body> </html>

    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

    <td>uday <td>88 </tr> </table> </body> </html>

    Example of row span


    <html> <body> <table border=5> <tr> <th>A <th rowspan=3>K <th>D </tr> <tr> <th>B <th>E </tr> <tr> <th>C

    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

    <th>I </tr> </table> </body>

    <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

    </table> </body> </html>

    <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

    </tr> </table> </body> </html>

    <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>

    Working with <frameset>


    By using this tag we can divide document as multiple Note:- The <frameset> should be declared within the <head> Syn:<frameset> <Frame 1> <Frame 2> </frameset> Properties of <frameset> Border:- to insert the border for the frame Note: to remove the border set border=0 Border color:- to change the border color Syn:- border color=color name Cols:- we an divide the document with column wise Syn:- cols=value%, value%.... Rows:- we can divide the document with row wise Syn:- rows=value %, value %, Noresize:- by using this property we cannot increase or decrease the frame size at runtime syn:- noresize

    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>

    <frame src=> </frameset> </head> </html>

    <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%,*>

    <frame src=> <frame src=> </frameset> </frameset> </head> </html>

    <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=>

    <frame src=> </frameset> </frameset> </head> </html>

    <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>

    Working with <a>

    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

    <html> <body> <a href =2.jpg title=click me>

    Hellow </a> </body> </html>

    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>

    Main.html <html> <body bgcolor=cyan> <a href=word.html target=a> <h2>word</h2>

    </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>

    Fra.html <html? <head <frameset rows=20%,* border=0>

    <frame src=img.html> <frame sr=name=t> </frameset> </head> </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

    You might also like