Date post: | 06-Dec-2014 |
Category: |
Documents |
Upload: | siva-rushi |
View: | 477 times |
Download: | 2 times |
1
Introduction to Web Design
2
Web server
• A web server is a computer program that delivers (serves) content, such as web pages, using the Hypertext Transfer Protocol (HTTP), over the World Wide Web .
• The primary function of a web server is to deliver web pages to clients. This means delivery of HTML documents and any additional content that may be included by a document, such as images, style sheets and JavaScript's.
3
• A client, commonly a web browser or web crawler, initiates communication by making a request for a specific resource using HTTP and the server responds with the content of that resource, or an error message if unable to do so .
• Many generic web servers also support server-side scripting, e.g., Apache HTTP Server and PHP.
4
Client Server Architecture
Client Server database
Vellore Institute of Technology University
5
Advantages of Client-Server Architect
• Centralization resource In the model the main role is done by the
server because it provide the resources to client and access, resource and security for database are controlled by the server.
• Scalability In this case any element can be upgraded
when needed.• Flexibility With this model we can easily integrate the
new technology in to the system.
Vellore Institute of Technology University
6
• Interoperability
All components of (clients, network, and servers) model work together.
• Accessibility
In this model server can be accessed remotely and across multiple platforms for client request.
Vellore Institute of Technology University
7
• Simple
It is Simple to understand and ease of application development.
• Low cost
Vellore Institute of Technology University
8
Disadvantages of Client-Server Architecture
• Dependability
In the model the application processing is depends on server side
• Lack of scalability
Some of the network operating system having lack of scalability.
Congestion
In client server model some time there may be chance to occur of congestion, when multiple requests are came at server side.
Vellore Institute of Technology University
9
Web Components
• Clients and Servers
• Internet Service Providers
• Web Site Hosting Services
• Domains Names, URL’s and Ips
• Registrars
Vellore Institute of Technology University
10
Clients & Servers
Clients (Browser)• Internet Explorer• Firefox• Mozilla• Netscape• Opera• Amaya• AOL• MSN
Servers• Apache• Microsoft• Netscape• zeus• AOLserver• AV• JavaWebServer• Oracle
Vellore Institute of Technology University
11
Web Components
• Clients and Servers
• Internet Service Providers
• Web Site Hosting Services
• Domains Names, URL’s and Ips
• Registrars
Vellore Institute of Technology University
12
Internet Service Providers Connect Clients to the Internet
• Phone Company• AOL• Earthlink• Verizone• NetZero
• Basic internet connection
• Dialup/DSL/Cable/Sat• Email
Vellore Institute of Technology University
13
Web Components
• Clients and Servers
• Internet Service Providers
• Web Site Hosting Services
• Domains Names, URL’s and Ips
• Registrars
Vellore Institute of Technology University
14
Web Hosting Services Connects Web Sites to the Internet
• Computer (server) farm• Web server software• Firewall hardware and software• IT services
– (Backup, troubleshooting, hardware repair)
• Disk space• Bandwidth / connection to internet• Routers and switchers• Email server / storage
Vellore Institute of Technology University
15
Web Components
• Clients and Servers
• Internet Service Providers
• Web Site Hosting Services
• Domains Names, URL’s and Ips
• Registrars
Vellore Institute of Technology University
16
Domain’s URL’s and IPs
• Domain name: The specific address of a computer on the Internet – microsoft.com
• Uniform Resource Locator (URL): – http://www.microsoft.com/faqs.html
• Internet protocol (IP) address– 192.168.1.1
Vellore Institute of Technology University
17
Web Components
• Clients and Servers
• Internet Service Providers
• Web Site Hosting Services
• Domains Names, URL’s and IPs
• Registrars
Vellore Institute of Technology University
18
Domain Registrar
• A company that provides domain name registration services for a fee.
• Maintain database which maps domain names to IP’s
• Propagate new domain name/IP address information across the internet
Vellore Institute of Technology University
19
Creating a Web Site
1. Choose a domain name
2. Register with a Registrar
3. Choose a hosting service
4. Tell Registrar the IP address
5. Create web content
6. Store (publish) onto hosting server (FTP)
7. Submit new site to search engines
Vellore Institute of Technology University
20
World Wide Web
• WWW comprises software (Web server and browser) and data (Web sites)
Client Side
JavaScriptVBScriptDHTML
Java Applets
Server Side
CGI(Common gateway Interface )
ASPJava Servlets
HTML, XML, ...
Vellore Institute of Technology University
21
How HTML is Displayed
Browser Command
HTML Display
Http protocol(HyperText Transfer Protocol)
Text & binary data
render
HTML URL:http://www.google.com
Vellore Institute of Technology University
22
How HTML is Displayed – from remote site
HTML Display
User Browser Command
URL:http://www.yahoo.com
RemoteRemoteWeb ServerWeb Server
Client SiteClient Site
DBDB
HTMLCGIASPPHP…
http request
http response
Vellore Institute of Technology University
23
The Basics
Elements and Tags are the basics of any
webpage.
Vellore Institute of Technology University
24
Elements
Elements are made up of two tags; a start
tag and an end tag. Between these tags is
the element content.
<title>Welcome to My World</title>
Vellore Institute of Technology University
25
Start Tags
A start tag is a left angle bracket followed by
the name of the element and then a right
angle bracket.
<title>
Vellore Institute of Technology University
26
End Tags
End tags are a left angle bracket and a slash
followed by the name of the element and
then a right angle bracket. The slash allows
the computer to distinguish the end tag from
the start tag.
</title>
Vellore Institute of Technology University
27
Empty Elements
Certain elements are empty and are
designated by a slash before the right angle
bracket in the start tag.
<br/>The <br> element is used to insert a line break into
the document. This tells the computer to stop the
text at that point and start a new line. As you may
have guessed the <br> element does not have any
content so it does not need an end tag.
Vellore Institute of Technology University
28
Content
Most elements will contain multiple
elements. This may sound confusing but it
is really very simple. An element that
contains another element looks like this:
<head>
<title>The document title</title>
</head>
Vellore Institute of Technology University
29
Nesting
Nesting means the way in which elements
contain elements. When we say that
elements are properly nested we mean that
each element is completely contained within
the elements that contain it, and it
completely contains the elements it
contains.
Vellore Institute of Technology University
30
Required Elements
There are four elements that all HTML
documents must contain.
They must have a <head> and they must
contain a <title>. They also must have
<html> and <body> elements.
Vellore Institute of Technology University
31
<html>
The <html> element contains the whole
document. It starts first and finishes
last. It tells the computer that this is an
<html> document and must always be
present.
Vellore Institute of Technology University
32
<head>
The <head> contains elements that are
about the document rather than elements
that are displayed in the page itself and
includes things like the document title.
Vellore Institute of Technology University
33
<title>
The document you must have a <title>
which describes what the document is.
Without a <title> the document is not valid.
Vellore Institute of Technology University
34
<body>
A last, but certainly not least, the document
must have a <body>. The <body> is the
Webpage itself. It comes after the <head>
and is the only other element that can go in
your <html> element. Anything that you want
to put in your page goes in here.
Vellore Institute of Technology University
35
HTML
• We’ll type it in Notepad
• Start/Programs/
Accessories/
Notepad/
• New File
Vellore Institute of Technology University
36
Put It All Together
<html>
<head>
<title>WelCome To VIT</title>
</head>
<body>
</body>
</html>
Vellore Institute of Technology University
37
Example
<html><head> <title> Wel come TO VIT </title></heaD><Body> Hi Friends <BR>Wel come to my webworld </Body>
</html>
Vellore Institute of Technology University
38
Let’s Save It!!
• File/Save As
• Type in a file name with the extension .html
• Example name: school.html
• Put it in your HTML folder with your graphic
Vellore Institute of Technology University
39
Let’s Browse It!
• Open a browser (Netscape or Internet Explorer)
• NETSCAPE--File/Open Page/Choose File
– Browse to your file (OK)
• INTERNET EXPLORER--File/Open
– Browse to your file (open,OK)
Vellore Institute of Technology University
40
Here’s What You’ll See Title Bar
Heading Body
Vellore Institute of Technology University
41
Paragraphs and Line Breaks
• You must use HTML tags to control where line and paragraph breaks actually appear.
• To skip a line between paragraphs, put a <p> tag at the beginning of each paragraph and a </p> tag at the end.
Vellore Institute of Technology University
42
• The <br> tag forces a line break within a paragraph. Unlike the other tags you've seen so far, <br> doesn't require a closing </br> tag.
• Use <hr /> to draw horizontal rules separating major sections of text, or wherever you'd like to see a line across the page.
Vellore Institute of Technology University
43
Unordered, Ordered, and Definition Lists
• Unordered
• ordered
• definition lists
Vellore Institute of Technology University
44
Unordered
• one in which the order of items is not important, such as a laundry or grocery list gets bounded by <ul> and </ul> tags.
• Each item in the list, usually a word or short phrase, is marked by the <li> (list-item) tag.
Vellore Institute of Technology University
45
Ordered List
• Ordered lists, bounded by the <ol> and </ol> tags, are identical in format to unordered ones, including the <li> tag (and </li> end tag with XHTML) for marking list items.
Vellore Institute of Technology University
46
Definition lists
• Definition list's enclosing <dl> and </dl> tags, each list item has two parts, each with a special tag: a short name or title, contained within a <dt> tag, followed by its corresponding value or definition, denoted by the <dd> tag .
Vellore Institute of Technology University
47
• <html> <head> <title> List </title> </head> <body> <ul> <li> hi <li>how r u
Vellore Institute of Technology University
48
<ul><li>fine </ul></ul><p><ol>I am missing you <li> VIT is No 1 university </ol></body> </html>
Vellore Institute of Technology University
49
Table
• Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). The letters td stands for "table data," which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.
Vellore Institute of Technology University
50
• <body> <table border="2" bgcolor="blue" cellpadding=40> <caption> table with border</caption> <th> c1</th><th> c2</th> <tr> <td> srinivas Koppu </td> <td> Web Desiging </td> </tr> </body>
Vellore Institute of Technology University
51
Output For Table tag
Vellore Institute of Technology University
52
Forms
• A form is an area that can contain form elements.
• Form elements are elements that allow the user to enter information (like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.) in a form.
• A form is defined with the <form> tag.
Vellore Institute of Technology University
53
Form Structure
• <form>
.
.input elements .</form>
Vellore Institute of Technology University
54
Input
• The most used form tag is the <input> tag. The type of input is specified with the type attribute. The most commonly used input types are explained below.
• Text Fields• Radio Buttons• Checkboxes • The Form's Action Attribute and the
Submit Button
Vellore Institute of Technology University
55
Text Fields
• Text fields are used when you want the user to type letters, numbers, etc. in a form.
<form> First Name: <input type="text" name="first name" /> <br /> Last Name: <input type="text" name="last name" /> </form>
Vellore Institute of Technology University
56
Out Put
Vellore Institute of Technology University
57
Radio Buttons
• Radio Buttons are used when you want the user to select one of a limited number of choices.
<form>
Gender:
<input type="radio" name="sex" value="male" /> Male
<input type="radio" name="sex" value="female" /> Female
</form>
Vellore Institute of Technology University
58
Out Put With Radio Buttons
Vellore Institute of Technology University
59
Checkboxes
• Checkboxes are used when you want the user to select one or more options of a limited number of choices.
• <form>I have a bike:<input type="checkbox" name="vehicle" value="Bike" /><br />I have a car:<input type="checkbox" name="vehicle" value="Car" /><br />I have an airplane:<input type="checkbox" name="vehicle" value="Airplane" /></form>
Vellore Institute of Technology University
60
Out Put With Check Boxs
Vellore Institute of Technology University
61
Selection Lists
• Both Scrolling lists and pull-down pick list are created with the <select> Tag.
• <option> Tag used to give the options to end user.
•
Vellore Institute of Technology University
62
Scrolling lists
• <form> <select name="extras" size="2" Multiple="multiple"> <option selected="selected"> </option> <option>Am/Fm Radio</option> <option>Turbocharge</option> <option>SBI Card</option> <option>Mastercard</option> <option>Visa card</option> </select> </form>
Vellore Institute of Technology University
63
Out Put Scrolling Lists
Vellore Institute of Technology University
64
Pull Down list
• <body> <form> <select name="card"> <option>Mastercard</option> <option>Visa card</option> </select> </form> </body>
• Pick Lists cannot allow multiple choices :they are logically equivalent in to a group of radio buttons.
Vellore Institute of Technology University
65
Output for Pull Down Lists
Vellore Institute of Technology University
66
Text Areas
• Allow multiple lines of text in a single input item, use the text area tag ie<textarea>……</textarea>
• <html> <head> <title> hi </title> </head> <body> <form> <textarea name="comments" rows="8" cols="20"> please enter u r comments </textarea> </form> </body> </html>
Vellore Institute of Technology University
67
Output for text area
•
Vellore Institute of Technology University
68
The Form's Action Attribute and the Submit Button
• When the user clicks on the "Submit" button, the content of the form is sent to the server.
• The form's action attribute defines the name of the file to send the content to. The file defined in the action attribute usually does something with the received input
Vellore Institute of Technology University
69
• <form name="input" action="html_form_submit.asp" method="get">Username:<input type="text" name="user" /><input type="submit" value="Submit" /></form>
• If you type some characters in the text field above, and click the "Submit" button, the browser will send your input to a page called "html_form_submit.asp". The page will show you the received input.
Vellore Institute of Technology University
70
Frames
• You can display more than one HTML document in the same browser window. Each HTML document is called a frame, and each frame is independent of the others.
• HTML file can have either a frameset or body but not both.
Vellore Institute of Technology University
71
Example
• <frameset cols=50%,25%,*>• <frame src="C:\Documents and Settings\admin\
Desktop\New Folder\tab.html">• <frame src="C:\Documents and Settings\admin\
Desktop\New Folder\prabu.html">• <frame src="C:\Documents and Settings\admin\
Desktop\New Folder\f.html">• </frameset>
Vellore Institute of Technology University
72
Here’s the code:• <html>• <head>• <title>Type what you want in the title bar
here• </title>• <h1 align=“center”>< font face=“ComicSans
MS”>– Type what you want your heading to say here.
• </center></font face> </h1>• </head>
Vellore Institute of Technology University
73
The body• <body>• <center>• <img src=“kids3.jpg”>• </center>• <font face=“Comic Sans MS”>• <center>• Type what you want to say in the body under
your image here.• </center>• </font face>• </body>• </html>
Vellore Institute of Technology University
74
Thank you