WebTechnology Study Materials

DMI College of Engineering
WEB TECHNOLOGY UNIT I
IT/IT2353/WT
Web Essentials: Clients, Servers, and Communication. The Internet-Basic Internet Protocols -The World Wide Web-HTTP request message-response message-Web Clients Web Servers-Case Study. Markup Languages: XHTML. An Introduction to HTML History-Versions-Basic XHTML Syntax and Semantics-Some Fundamental HTML Elements-Relative URLs-Lists-tables-Frames-Forms-XML Creating HTML Documents Case Study.
1.1 Web Essentials

Clients, Servers, and Communication
Client-Server Model It is a standard Model for developing Network Application. Concept of Client and Server Server: The computer which provides services is called Server. Server waits for request from client. Client: The computer that using the service is called as a Client.
Client Server
Client
Client Typical Scenario: Step 1: The server must start on some computer system. o Initializes itself, then goes to sleep waiting for a client request. Step 2: A client can start the process on the same system or some other system. o Sends a request to the server.
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 1
IT/IT2353/WT
o The Server process the request and provide the service to the client. o If the server finished the process it goes to the sleep,waiting for the next client request to arrive Step 3: The process repeats. Types of Server (Categorized based on the request) 1. Iterative 2.Concurrent Iterative Server It is used, when the server knows in advance ,how long it takes to handle each request and it handles each request itself. o Single copy of server runs at all times o A client may have to wait if the server is busy. Concurrent Server It is used when the amount of work required to handle a request is unknown,the server starts another process to hable each request. o A copy of the server is created,to a client request in a dedicated fashion.As many copies of server as there are client requests. How connection is established To establish a connection five components are needed Protocol Source IP address Source port number (Multiple program can run in both server and client computer So we have to specify the Port No) Destination IP address Destination port number Developing a Network Approach o To develop a Internet Application choose the standard and well-accepted protocol. o At the data link layer level, useEthernet o At the Network layer level,use IP o Transport Layer,use TCP o At the Application layer level,use a standard API like the Berkeley Socket Interface (BSI) It has the function to talk to the another process. .
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology
Page 2

Let us now examine the client-server inter-communication with three models. Model #1 of the client-server architecture - Static HTML pages
IT/IT2353/WT
The client (browser) requests for an HTML file stored on the remote machine through the server software. The server locates this file and passes it to the client. The client then displays this file on your machine. In this case, the HTML page is static. Static pages do not change until the developer modifies them. Model #2 of the client-server architecture - CGI Scripts
The scenario is slightly different for CGI applications. Here the server has to do more work since CGI programs consume the server machine's processing power. Let us suppose you come across a searchable form on a web page that runs a CGI program. Let us also suppose you type in the word 'computers' as the search query. Your browser sends your request to the server. The server checks the headers and locates the necessary CGI program and passes it the data from the request including your search query "computers". The CGI program processes this data and returns the results to the server. The server then sends this formatted in HTML to your browser which in turn displays the HTML page.
IT/IT2353/WT
Thus the CGI program generates a dynamic HTML page. The contents of the dynamic page depend on the query passed to the CGI program. Model #3 of the client-server architecture - Server side scripting technologies
The third case also involves dynamic response generated by the use of server side technologies. There are many server side technologies today. Active Server Pages (ASP): A Microsoft technology. ASP pages typically have the extension .asp. Personal Home Pages (PHP): An open source technology. PHP pages typically have .php, .phtml or .php3 file name extensions. Java Server Pages: .jsp pages contain Java code. Server Side Includes (SSI): Involves the embedding of small code snippets inside the HTML page. An SSI page typically has .shtml as its file extension. With these server technologies it has become easier to maintain Web pages especially helpful for a large web site. The developer needs to embed the server-side language code inside the HTML page. This code is passed to the appropriate interpreter which processes these instructions and generates the final HTML displayed by the browser. Note, the embedded server-script code is not visible to the client (even if you check the source of the page) as the server sends ONLY the HTML code. Let's look at PHP as an example. A request sent for a PHP page from a client is passed to the PHP interpreter by the server along with various program variables. The interpreter then processes the PHP code and generates a dynamic HTML output. This is sent to the server which in turn redirects it to the
Page 4
IT/IT2353/WT
client. The browser is not aware of the functioning of the server. It just receives the HTML code, which it appropriately formats and displays on your computer. 1.2 Internet
.What is Internet? It is a global network of networks connecting hundreds of millions of users to each other and to other world-wide users. A common protocol called TCP/IP (Transmission Control Protocol) is used so conmmunications between computers can takes place. The conceptual foundation for creation of the Internet was largely created by three individuals and a research conference, each of which changed the way we thought about technology by accurately predicting its future:
Vannevar Bush wrote the first visionary description of the potential uses for information technology with his description of the "memex" automated library system. Norbert Wiener invented the field of Cybernetics, inspiring future researchers to focus on the use of technology to extend human capabilities. The 1956 Dartmouth Artificial Intelligence conference crystallized the concept that technology was improving at an exponential rate, and provided the first serious consideration of the consequences.
Page 5
IT/IT2353/WT
Marshall McLuhan made the idea of a global village interconnected by an electronic nervous system part of our popular culture.
Evolution of Internet 1950s 1970 1971 ARPA (Advanced Research projects Agency) ARPANET It creates precursor to TCP Universities added to ARPANET TelNet and FTP are available 1972 1973 1974 First email was sent APRPANET connected to England and Norway TCP was recognized as standard for communication across a system of networks. 1982 In US ,Department of Defense (DOD) starts building defense data Networks based on ARPANET Technology. 1983 1986 ARPANET is splitted into ARPANET and MILNET. National Science Foundation (NSF) implements NSFNET The objective of NSFNET was to create a very strong backbone Network to connect regional Networks 1991 Archie and Gopher was released. Archie list the FTP search engine. Gopher is the advanced version of Archieve.Based on information FTP sites are categorized and subcategorized. 1992 1993 1995 Internet links more than 17,000 networks in 33 countries;3 million hosts World Wide Web is launched Interconnected network providers(BSNL) start offering service.
Page 6

Internetworking: the process of connecting separate networks
IT/IT2353/WT
. we can divide the history of the Internet (till the present) into three main parts. 1. 2. 3. FTP: The first stage Gopher: The second stage The World Wide Web: The third stage
File Transfer Protocol - FTP The FTP (File Transfer Protocol) was, and is still, widely used to transfer files from one computer to the other. A user typically logs in at an FTP server and downloads or uploads files. Though FTP allowed for sending and retrieving files from a remote computer, it did not facilitate browsing. Thus, a lot of time was spent (wasted!) in searching for the required information. Because of this, a service
IT/IT2353/WT
called Archie was developed to simplify keyword searching of files located at FTP servers. Nowadays, FTP is mainly used to transfer large data (huge files or many small files) from one machine to the other. Various FTP clients are now available and most of them are very simple to use. The File Transfer Protocol still remains a faster method than the HyperText Transfer Protocol (HTTP) for uploading and downloading files.
Gopher Gopher was a menu-style information browsing and retrieval system. Developed at the University of
Minnesota as a campus-wide information system, Gopher was named after the University mascot, though some opine that Gopher stands for 'go-for' information. The World Wide Web The World Wide Web: Came into existence with the introduction of browsers, the first one being Mosaic. The browser provided ease of use with graphical display and was able to show images with text. Hyperlinking between documents broke the linear architecture of Gopher and increased the complexity of the web. The browser was able to provide the user with a range of experiences - pictures, multimedia (sound, video) and interactivity. The web also allowed for the integration of pages with databases that resulted in dynamically generated content - content that is picked up from the database and integrated into HTML pages or HTML templates. This prompted many companies to put their wares online resulting in the explosive growth of the web. How Internet Works TCP/IP Routing Traffic Across the Internet Addressing Schemes Domains and Subdomains
Page 8

1. How the Internet Works - TCP/IP Every computer and network on the Internet uses to control timing and data format. The protocol used by the Internet is the TCP/IP.
IT/IT2353/WT
the same protocols (rules and procedures)
Transmission Control Protocol/Internet Protocol,or
No matter what type of computer system you connect to the Internet, if it uses TCP/IP, it can exchange data with any other type of computer.
2. Routing Traffic Across the Internet Most computers don't connect directly to the Internet. Instead, they connect to a smaller network that is connected to the Internet backbone. The Internet includes thousands of host computers (servers), which provide data and services as requested by client systems. When you use the Internet, your PC (a client) requests data from a host system. The request and data are broken into packets and travel across multiple networks before being reassembled at their destination.
Page 9
IT/IT2353/WT
3. Addressing Schemes In order to communicate across the Internet, a computer must have a unique address.
Every computer on the Internet has a unique numeric identifier, called an Internet Protocol (IP) address. Each IP address has four parts each part a number between 0 and 255. An IP address might look like this: 205.46.117.104.
4. Domains and Subdomains In addition to an IP address, most Internet hosts or servers have a Domain Name System (DNS) address, which uses words. A domain name identifies the type of institution that owns the computer. An Internet server owned by IBM might have the domain name ibm.com. Some enterprises have multiple servers, and identify them with subdomains, such as products.ibm.com
Page 10
IT/IT2353/WT
Internet Services E-Mail News Telnet File Transfer Protocol (FTP) Internet Relay Chat (IRC) The World Wide Web
1.E-Mail It is a service that helps to create, send, and receive messages and to attach files. To use e-mail, a user must have an e-mail address, which you create by adding your user name to the e-mail server's domain name, as in jsmith@aol.com
2. Usenet and Mailing list(Electronic bulletin board service) o If you want to receive periodically information about certain topics, there are two things you can do. The first possibility is to read the news groups of the Internet. This is a mechanism to broadcast news, called articles, from your local host to the world.
IT/IT2353/WT
There are news groups and mailing list about anything you can imagine, from computers to research, sports, politics, etc
3.Telnet A remote login to other computers on the Internet. Telnet is widely used by libraries, to allow visitors to look up information, find articles, and so on. 4. File transfer protocol (FTP) It is the Internet tool used to copy files from one computer to another. Using a special FTP program or a Web browser, you can log into an FTP host computer over the Internet and copy files onto your computer. FTP is handy for finding and copying software files, articles, and other types of data. Universities and software companies use FTP servers to provide visitors with access to data. 5. Internet Relay Chat (IRC) Internet Relay Chat (IRC) is a service that allows users to communicate in real time by typing text in a special window. Eg:Chat,messengers,VideoConfere3ncing,white boards etc
Page 12
IT/IT2353/WT
5. World Wide Web It is a type of service in the Internet. It allows multimedia documents to be shared between machines. -Multimedia contains text,audio,video animation. The World Wide Web is a part of the Internet, which supports hypertext documents, allowing users to view and navigate different types of data. A Web page is a document encoded with hypertext markup language (HTML) tags. o HTML allows designers to link content together via hyperlinks. o Every Web page has an address, a Uniform Resource Locator (URL).
1.3. Basic Internet Protocols
Protocols are set of rules that specify a common language that computers on a network use for for communications with other computers. It gives the specification on how computers talk with each other.
Page 13
IT/IT2353/WT
The basic Internet protocols are (i)Internet Protocol (IP) (ii)Transmission Control Protocol (TCP). (iii) User Datagram Protocol Internet Protocol (IP) IP is the fundamental protocol defining the Internet IP address: o 32-bit number (in IPv4)
IT/IT2353/WT
o Associated with at most one device at a time (although device may have more than one) o Written as four dot-separated bytes, e.g. 192.0.34.166 Functions of IP : transfer data from source device to destination device IP source software creates a packet o representing the data to be transferred. o Header: Source and destination IP addresses, length of data, etc. o Data itself If destination is on another LAN, packet is sent to a gateway that connects to more than one network
Gateway:It is a device that is connected to the source computers network as well as to atleast one other network. Limitations of IP: No guarantee of packet delivery (packets can be dropped) Communication is one-way (source to destination)
Transmission Control Protocol (TCP) TCP adds concept of a connection on top of IP Provides guarantee that packets delivered Provide two-way (full duplex) communication
Page 15
IT/IT2353/WT
TCP also adds concept of a port TCP header contains port number representing an application program on the destination computer Some port numbers have standard meanings Example: port 25 is normally used for email transmitted using the Simple Mail Transfer Protocol (SMTP) Other port numbers are available first-come-first served to any application
The following figure represents the communicateion between Mailserver and client through the port No 25.
Page 16
IT/IT2353/WT
User Datagram Protocol (UDP) It is an alternative protocol to TCP that also builds on IP. UDP also adds concept of a port It does not provide two-way connection or guaranteed delivery of data. Advantage of UDP vs. TCP: Lightweight, so faster for one-time messages
Difference between TCP and UDP
Page 17

Domain Name Service DNS is the phone book for the Internet Map between host names and IP addresses DNS often uses UDP for communication
IT/IT2353/WT
Host names Labels separated by dots, e.g., www.example.org Final label is top-level domain Generic: .com, .org, etc. Country-code: .us, .il, etc.
Higher-Level Internet protocols
HTTP (HyperText transfer Protocol): used on the World Wide Web (WWW) for transfering web pages and files contained in web pages such as images.
FTP (File Transfer protocol): employed for transfering files from one machine to the other. SMTP (Simple Mail Transport Protocol): used for email. Telnet Protocol: Used to open telnet sessions
1.4 World wide Web (WWW) WWW is a type of service in the Internet. It is an international hypertext system that links together millions of documents. Distinctive feature of Web: support for hypertext (text containing links) o Communication via Hypertext Transport Protocol (HTTP) o Document representation using Hypertext Markup Language (HTML) The World Web is the collection of machines (Web servers) on the Internet that provide information, particularly HTML documents, via HTTP. Machines that access information on the Web are known as Web clients. A Web browser is software used by an end user to access the Web. History Of Web WWW was created in 1989 by the Tim Berners Lee,a physicist at the European laboratory for Particel Physics (CERN) in Geneva,Switzerland to enable the document communication between the physics researchers and to create a network between them, physics researchers created hypertext documents as their documentation standards.

Web Language
IT/IT2353/WT
HTML (Hyper Text Markup Language) has become the standard Markup language for information publishing. Components of the WWW The Hardware ,Software and Protocols are the elements of WWW. i) Client and Server Server A Server is a computer that is connected to the Internet that has software capable of storing,retrieving and distributing some of the web application files. Client A client (web browser) is a computer that requests files from the web. When a client is requesting for a file in the web,the network directs the request to the web server where that file has been available. The server by accepting the request sends the file to the client.
Protocols Protocols are required to communicate between the web servers and web clients. Protocol are HTTP,FTP,TCP,IP,UDP,ARP,RARP etc.
Page 19
IT/IT2353/WT
Correct use of sockets is only part of network communicating programs. Once you have a way for two programs to talk, you still need a protocol for communication. This protocol lets each party know when to talk, and it precisely defines who is responsible for which part of the service. Common Internet protocols are: Protocol FTP telnet Meaning File Transfer Protocol Action Copying files between remote machines Remote login
rsh and rcp Remote shell and Remote copy Remote login and remote file copying NNTP Network News Transfer Protocol HTTP SMTP POP3 Web page Web page is HTML documents.These web pages are linked together a system of connections which enable the user to jump from one web page to another by clicking on a link. Types of Web Pages Static Web Page A static web page is a normal web page that is written in HTML and therefore needs no pre-processing on the web server. Dynamic Web Page A dynamic web page is a web page that uses some scripting language, such as PHP or ASP, to allow the web server to adapt the content of the web page to a particular situation. The information content that is displayed on the web page in your browser, will normally not be stored in the file containing that web page on the web server, but in a separate database. Hypertext Transfer Protocol Transferring documents on the Web Reading and posting USENET news
Simple Mail Transfer Protocol Sending mail Post Office Protocol Reading mail
Page 20
IT/IT2353/WT
When the page is requested from the server, the web server will retrieve such a dynamic web page, process it to retrieve the relevant information from the database, and then puts that information in the HTML of the web page. Home Page It is the first page of the website.It is also known as an index page. Web Browser It is a computer program that accesses web pages and displays them on the computer screen. To access the world wide web the user requires a web browser. The most popular browsers are Microsoft Internet Explorer and Netscape Navigator. Difference between the Internet and the World Wide Web Internet is the backbone of communication systems where as WWW is a type of service that uses communication systems 1.5 HTTP (Hyper Text Transfer Protocol) It is a protocol using which web clients (browsers) interact with web servers. It is a stateless protocol because each command is executed independently, without any knowledge of the commands that came before it. It transfers hypertext( A text with links to other text documents) across the Internet. HTTP is based on the request-response communication model: o Client sends a request o Server sends a response HTTP is a stateless protocol: o The protocol does not require the server to remember anything about the client between requests. Basic Steps of HTTP Protocol Client opens socket connection to the HTTP Server.(Typically over port 80) Client sends HTTP requests to server. Server sends back response and closes connection.
Page 21
IT/IT2353/WT
Server
Client
request message
response message
General Format of Request and Response Message
1.General header It gives general information about the message and can be present in both a request and a response. 2.Request Header It can be present only in a request messages.It specifies the clients configuration and the clients preferred document format. 3.Response Header It can be present only in a response message.It specifies the servers configuration and special information about the request.
Page 22
IT/IT2353/WT
5. Entity Header It gives information about the body of the document.It is mostly present in POST and PUT methods
Request Message A request message consists of a request line, a header and sometimes a body as illustrated below
Request Line
Headers
a blank line
Body only present in some messages
Request line A request line defines the request type, resource (URL) and the HTTP version as shown below.
Space
Request type (method)
URL
HTTP version
For example:
GET http://confused.com:80/index.html HTTP/1.1
Page 23
IT/IT2353/WT
The URL is made up of three parts. protocol :// URL / path.

Other protocols used to retrieve a document include: FTP, TELNET, Gopher, News
The URL can optionally contain a port number The path is thespecified pathname retrieve document by URL of the file where the information is located
store specified document under given URL retrieve info. about document specified by URL retrieve information about available options give information (eg. annotation) to the server
Request Types or Methods (80 in this case) Method GET PUT HEAD OPTIONS
POST DELETE TRACE CONNECT
Description
remove document specified by URL loopback request message for use by caches
Header Field Header Field Structure field name : field value Syntax Field name is not case sensitive Field value may continue on multiple lines by starting continuation lines with white space Field values may contain MIME types, quality values, and wildcard characters (*s) MIME content type syntax: top-level type / subtype Toplevel MIME Content Types Top-level Content Document Content Type Application Data that does not fit within another content type and that is intended to be processed by application software Audio Audio data Image Image data Model Structured data,generally numeric,representing physical or behavioral models Multipart Multiple entities,each with its own he3ader and body Text Diaplayable as text Video Animated images Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 24

Common MIME Content Types MIME TYPE Text/html image/gif Image/jpeg Text/plain
IT/IT2353/WT
Description HTML document Image represented using Graphics InterChange Format(GIF) Image represented using Joint Picture Expert Group(JPEG) format Human-readable text with no embedded formatting information Arbitrary binary data Data sent from a web client to web server for processing.
Application/octet-stream Application/x-www-form-url encoded Response Message A response message consists of a status line, a header and sometimes a body as shown in the figure below Status Line Headers a blank line
Body only present in some messages
Status Line The status line defines the status of the response message. It consists of the HTTP version, a space, a status code, a space and a status phrase.has shown below
Space
HTTP version
Status code
Status phrase
For example:
HTTP/1.1 200 OK Page 25
IT/IT2353/WT
Status Code Digit Class Standard Use 1xx Informational Request received,processing 2xx Success Action received,understood,accepted 3xx Redirection Client needs to use a different resource to fulfill request 4xx Client Error Clients request is not valid 5xx Server Error Server failed Some common HTTP1.1 Status Code Status Code 200 301 307 401 Recommended Reason Phrase OK Moved Permanently Temporary Redirection Unauthorized Meaning Request processed normally URI for the requested resource has changed. URI for the requested resource has changed atleast temporarily The resource is password protected,and the user has not yet supplied a valid password. The document/file requested by the client was not found
404 Not Found Response Headers Fields Field Name Date Server Lastmodified ContentLength Content-Type Expires
Use Time at which response was generated Identification Information on the server Time at which the document was changed Size of document,in bytes File format (html,gif,pdf) Prevents browser from caching beyond date
It exchange additional information between the client and the server. Header can be one or more header lines. Each header line is made of a header name , a colon, a space and a header value.
Page 26

Header format
IT/IT2353/WT
Sample HTTP Exchange

GET /~jain/index.html HTTP/1.0 } Request Line
Accept: text/plain, text/html} Request Header
1.7 Web Client It is software that accesses a web server by sending an HTTP request message and processing the resulting HTTP response. Eg Web browsers running on desktop or laptop is example of Web Client.
IT/IT2353/WT
Types of Browsers 1.Graphical Browser 2.Text Browser. Graphical Browser It allows retrieval of text,images,audio and video.Navigation is accomplished by pointing and clicking with a mouse on highlighted words and graphics. First graphical browser running on general-purpose platforms: Mosaic (1993) Both Netscape and Internet Explorer are graphical browsers Text Browser It provide access to the web in text-only mode.Navigation is accomplished by highlighting emphasized words on the screen with the arrow up and down keys and pressing the Enter key to follow the link. Eg Lynx Standards of Mozilla bars
The primary region is the client area,which displays a document. Title bar o It displays a title assigned by the document author to the document currently displayed within the client area. o It displays the browser name. Menu Bar It contains a set of dropdown menus,much like most other applications that incorporate a graphical user interface(GUI). Navigation ToolBar It contains certain standard push-button controls o Back(It allows the user to return to a previously viewed web page)

o o o o o o Status Bar
IT/IT2353/WT
Forward(Reverse of Back) Reload(Updated version of the currently viewed page) Stop(Halt page downloading currently in progress) Print(print the client area of the window) Location bar (It is similar to text box ,where a user can enter a URL ) Search Button(The text in the textbox is sent to the search engine) It displays messages and icons related to the status of the browser.
Status Message Resolving host www.example.org Connecting to www.example.org Waiting for www.example.org Transferring data from www.example.org Done
Meaning Waiting for response Connecting TCP connection to server Sent HTTP request to server,waiting for HTTP response HTTP response has begun,but has not completed HTTP response has been received.
Primary Task of Web browser 1.Convert web addresses (URLs) to HTTP requests. 2.If the server is specified using host name(rather than IP address)use DNS to convert this name to the appropriate IP address. 3.Establish a TCP connection using the IP address of the specified web server. 4.Send the HTTP request over the TCP connection and wait for the servers response 5.Display the document contained in the response.
URL
Page 29
IT/IT2353/WT
1.8 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 feature of web server is to accept HTTP request from web clients and return an appropriate resource in the HTTP response. 1.8.1 Functionality of WebServer 1.The server calls on TCP software and waits for connection request to one or more ports. 2.When a connection request is received,the server dedicates a subtask to handle this connection. 3.The subtask establishes the TCP connection and receives an HTTP Request 4.The subtask examines the Host header field of the request to determine which virtual host should receive this request. 1.8.2 Common features 1. Virtual hosting to serve many Web sites using one IP address. 2. Large file support to be able to serve files whose size is greater than 2 GB on 32 bit OS. 3. Bandwidth throttling to limit the speed of responses in order to not saturate the network and to be able to serve more clients. 4. Server-side scripting to generate dynamic Web pages, but still keeping Web server and Web site implementations separate from each other The communication between the client machine and the Web server transpires as follows:
The browser broke the URL into three parts: 1. The protocol ("http") 2. The server name ("www.howstuffworks.com") 3. The file name ("web-server.htm")
The browser communicated with a name server to translate the server name "www.howstuffworks.com" into an IP Address, which it uses to connect to the server machine.
The browser then formed a connection to the server at that IP address on port 80. (We'll discuss ports later in this article.)
Following the HTTP protocol, the browser sent a GET request to the server, asking for the file "http://www.howstuffworks.com/web-server.htm." (Note that cookies may be sent from browser to server with the GET request .
The server then sent the HTML text for the Web page to the browser. The browser read the HTML tags and formatted the page onto your screen. This process is continues for every request sent by the browser and until the client browser leaves the site.
Page 30

1.8.3 Server History Httpd: primary Web server c. 1995
IT/IT2353/WT
Apache: A patchy version of httpd, now the most popular server (esp. on Linux platforms) IIS: Microsoft Internet Information Server Tomcat: Java-based Provides container (Catalina) for running Java servlets (HTML-generating programs) as back-end to Apache or IIS Can run stand-alone using Coyote HTTP front-end
1.8.4 Logging(records) Web server logs information about server activity. Access Log:The web server records normal activity is called an Access log.It is a file that records information about every HTTP request processed by the server. Message Log:It is produced by web server and it contains a debugging information generated by web application. Information in the log Entry 1.Host name of client machine making the request. 2.User name used to log in 3.Date and Time of response ,plus the time zone 4.Start line of HTTP request 5.HTTP status code of response 6.Number of bytes sent in body of response 1.8.5 Secure Servers Normally,the client sends the HTTP request and the server process the HTTP request and send the response to the client. It is possible that some machine along the route will extract information from the IP messages if forwards for evil purposes. In general ,any machine other than the sender or receiver that extracts information from network messages is known as an eavesdropper.
IT/IT2353/WT
To prevent eavesdropper ,HTTP messages typically travel over a public network, private information (such as credit card numbers) should be encrypted . https URL scheme tells browser to use encryption Common encryption standards: o Secure Socket Layer (SSL) o Transport Layer Security (TLS) Communication between Secure Server and client
Page 32

Secure Servers(Man-in-the-Middle Attack)
IT/IT2353/WT
Page 33

Secure Servers(Preventing Man-in-the-Middle)
IT/IT2353/WT
1.9 Case Study What web server will we use? Tomcat(Because it is freely available,runs on multiple platforms,is simple to configure)
What web browsers will we support? IE6, Mozilla(if the application runs in this server it can be run on any server)
What level of security will we implement? Non-secure (http scheme) Password required to add to blog
Page 34

1.10 Markup Language Markup Language
IT/IT2353/WT
The language specifies code for formatting, both the layout and style, within a text file. The code used to specify the formatting are called tags. Example : HTML What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is not a programming language, it is a markup language A markup language is a set of markup tags The markup tags describe how text should be displayed History of HTML 1992: HTML 1.0, Tim Berners-Lee original proposal 1993: HTML+, some physical layout 1994: HTML 2.0, standard with best features 1995: Non-standard Netscape features 1996: Competing Netscape and Explorer features 1996: HTML 3.2, the Browser Wars end 1997: HTML 4.0, stylesheets are introduced 1999: HTML 4.01, we have a winner! 2000: XHTML 1.0, an XML version of HTML 4.01 2001: XHTML 1.1, modularization 2002: XHTML 2.0, simplified and generalized MetaLanguage: A language used to describe the syntax of other languages is sometimes referred to as a metalanguage. Meta language used to describe the syntax of programming language such as Java is called Backus-Naur Form(BNF) notation. Meta language for HTML 4.01 is SGML(Standard Generalized Markup Language) o HTML 4.01 (Dec 1999) syntax defined using Standard Generalized Markup Language (SGML).
IT/IT2353/WT
o XHTML 1.0 (Jan 2000) syntax defined using Extensible Markup Language (XML)
What Is XHTML?

XHTML stands for EXtensible HyperText Markup Language XHTML is almost identical to HTML 4.01 XHTML is a stricter and cleaner version of HTML XHTML is HTML defined as an XML application XHTML is a W3C Recommendation
Why XHTML? Many pages on the internet contain "bad" HTML. The following HTML code will work just fine if you view it in a browser (even if it does NOT follow the HTML rules): <html> <head> <title>This is bad HTML</title> <body> <h1>Bad HTML <p>This is a paragraph </body> XML is a markup language where everything must be marked up correctly, which results in "well-formed" documents. XML is designed to describe data, and HTML is designed to display data. Today's market consists of different browser technologies, some browsers run on computers, and some browsers run on mobile phones or other small devices. The last-mentioned do not have the resources or power to interpret a "bad" markup language. Therefore - by combining the strengths of HTML and XML, W3C recommended a markup language that is useful now and in the future - XHTML.
Difference between HTML and XHTML is
HTML
XHTML
Page 36

HTML uses a fixed set of tags
IT/IT2353/WT
With XML you make up your own tags (and define what they mean in a separate document)
HTML is designed to display data to humans Browsers are very tolerant of errors in HTML All browsers can display HTML
XML is designed to describe data to computers.
XML documents must be well-formed (syntactically correct)
Most modern browsers can display XML
From HTML to XHTML XHTML elements must be properly nested Example:<b><i>bold and italic</b></i> is wrong <b><i>bold and italic</i></b> is right XHTML documents must be well-formed <html> <head> ... </head> <body> ... </body> </html> Tag names must be in lowercase.(HTML tags are not case sensitive) All XHTML elements must be closed If an HTML tag is not a container, close it like this: <br />, <hr />, <image src="smile.gif" /> Attribute names must also be in lower case Example: <table width="100%"> Attribute values must be quoted Example: <table width="100%"> Attribute minimization is forbidden Example: <frame noresize="noresize">, cannot be abbreviated to <frame noresize> The id attribute replaces the name attribute Wrong: <img src="picture.gif" name="picture1" /> Right: <img src="picture.gif" id="picture1" />

Best:
IT/IT2353/WT
<img src="picture.gif" name="picture1" id="picture1" />
Relationship between SGML(Standard Generalized Markup Language),XML,HTML and XHTML
1.11 Basic Syntax and Semantics 1.11.1 Document Type Declaration An XHTML document consists of three main parts: the DOCTYPE declaration the <head> section the <body> section The basic document structure is:
Page 38

<!DOCTYPE ...> <html> <head> <title>... </title> </head> <body> ... </body> </html>
IT/IT2353/WT
Note: The DOCTYPE declaration is always the first line in an XHTML document! Example This is a simple (minimal) XHTML document: Document <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" Type "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Definition <html> <head> <title>simple document</title> </head> <body> <p>a simple paragraph</p> </body> </html>
Document Instance
Document Type Definition It describes the syntax to use for the current document.
DTD field HTML PUBLIC W3C HTML 4.01 this is HTML, not XML
Notes
this is a public standard, not some DTD you cooked up yourself. who wrote the DTD which version of HTML it supports.
Page 39
IT/IT2353/WT
Strict does not let you use features that may be phased out later. Transitional does not recognizeby stylesheet. Frameset is for when you use <frameset>
transitional
EN http://www.w3.org/TR/xhtmltransitional.dtd
English url of the DTD computer-readable grammar
There are three different DTDs for XHTML Strict Use for really clean markup, with no display information (no font, color, or size information) Use with CSS (Cascading Style Sheets) if you want to define how the document should look. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Transitional Use with standard HTML and/or with CSS Allows deprecated HTML elements <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Frameset Use if your document uses HTML frames. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> Example 1: This example used the strict DTD, meaning that every single tag must be closed properly, all attributes assigned values, etc: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title> Strict DTD XHTML Example </title> </head> <body> <p> Please Choose a Day: <br /><br /> <select name="day"> <option selected="selected">Monday</option> <option>Tuesday</option> <option>Wednesday</option> </select> </p> </body> </html> Example 2:
IT/IT2353/WT
This example uses the transitional DTD, which provides support for older browsers that dont recognize style sheets. You can see it uses several attributes within the <body> tag, which arent allowed when using the strict DTD: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title> Transitional DTD XHTML Example </title> </head> <body bgcolor="#FFFFFF" link="#000000" text="red"> <p>This is a transitional XHTML example</p> </body> </html> Example 3: This example uses the frameset DTD, which allows us to split one XHTML page into multiple frames, with each frame containing an XHTML page within it: <?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "DTD/xhtml1-frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title> Frameset DTD XHTML Example </title> </head> <frameset cols="100,*"> <frame src="toc.html" /> <frame src="intro.html" name="content" /> </frameset> </html> 1.11.2 White Space in Character Data
IT/IT2353/WT
Four white space characters: carriage return, line feed, space, horizontal tab Normally, character data is normalized: All white space is converted to space characters Leading and trailing spaces are trimmed Multiple consecutive space characters are replaced by a single space character
Example <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title> HelloWorldWhiteSpace.html </title> </head> <body> <p> Hello World! This is my second HTML paragraph. </p> </body> </html>
Page 42
IT/IT2353/WT
If we want to display in two paragraphs use two p elements
1.11 .3 Unrecognized HTML Elements Browsers ignore tags with unrecognized element names, attribute specifications with unrecognized attribute names Allows evolution of HTML while older browsers are still in use
Page 43
IT/IT2353/WT
1.11.4 Special Characters The lessthan(< )marks the beginning of a tag.Suppose if we want to use lessthan symbol we use a type of markup known as reference. A reference within an HTML document always begin with an ampersand(&) and ends with a semicolon(;). There are two type of references Character reference specifies a character by its Unicode code point For <, use < or < or < Entity reference specifies a character by an HTML-defined name

For <, use <
IT/IT2353/WT
The other HTML entity reference that is frequently used is ,the nonbreaking space character. The purpose of the character is to insert a space between two strings and also informing the browser that it should perform word-wrapping between these strings. For example ,a browser displays the following string as <p> keep together keep together keep together keep together <p> Output
Page 45

Non-breaking space often used to create multiple spaces
IT/IT2353/WT
1.11.5 Attributes Attribute values must be quoted (matching single or double quotes) Attribute values can contain embedded quotes or references to quotes Multiple attribute specifications are space-separated Example
1.12 Some Fundamental HTML Elements HTML Markup Tags HTML markup tags are usually called HTML tags

HTML tags are keywords surrounded by angle brackets like <html> There are two classes of tags (i)Tags which appear in pair (ii)Tags which appear individually. (i)Tags which appear in pair HTML tags normally come in pairs like <b> and </b>
Page 46
IT/IT2353/WT
The first tag in a pair is the start tag, the second tag is the end tag
Note: The start and end tags are also called the opening and closing tags. (ii)Tags which appear individually. Eg. <img src=baby.jpg>
Page 47
IT/IT2353/WT
How HTML Works? HTML allows you to design HTML pages that you can view using a web browser. We can place HTML tags around text that is in a document so as to describe the formatting of this text. When a browser interprets this document,it formats the text according to the meaning of the HTML tags. What is an HTML File? An HTML file is a text file with HTML tags An HTML file name must end with .htm or .html An HTML file can be created using a simple text editor An HTML file is often called an HTML document or a Web Page When a browser displays a web page, it will not display the markup tags. The browser uses the markup tags to understand the layout of the page. Format of An HTML Document A HTML document consists of two major portions 1.Header 2.Body Header It contains the information about the document like, title ,date ,the name of the author and names of the script.The browser does not display the contents of this section. It is referred as document head. Body It contains the actual matter of the document.It includes the information that the browser must display.

<html> <head> <title> This is the title </title> </head> <body> <p>This is my first paragraph</p> <p>This is my <b>second</b> paragraph</p> </body> </html>
IT/IT2353/WT
Output
Example Explained When a browser displays a web page, it will not display the markup tags. The text between the <html> and </html> tags describes a web page. The text between the <body> and </body> tags is displayed in the web browser. The text between the <p> and </p> tags is displayed as paragraphs. The text between the <b> and </b> tags is displayed in a bold font.
A very basic HTML document
<html> <body> The content of the body element is displayed in your browser. </body> </html>
Page 49

Output: The content of the body element is displayed in your browser. Document structure tags TAG SYNTAX HTML <HTML></HTML> HEAD <HEAD>.</HEAD>
IT/IT2353/WT
TITLE
<TITLE>..</TITLE>
BODY
<BODY>..</BODY>
DESCRIPTION It declares the document to be a HTML document. It defines the header area of a page,which is not displayed within the page itself in the browser. The text between <TITLE>..</TITLE>is the title of the web page and is displayed in the title bar of the browser. The actual content of the web page will be displayed in the browser.
ATTRIBUTES None None
None
1.alink - Specifies the color of the active links in the document 2.background- Adding a background image to a page. 3.bgcolor-The background color of the document. 4.link-Specifies the color of all the links in the document 5.text-Specifies the color of the text in the document 6.vlink-Specifies the color of the visited links in the document
Page 50

FORMATTING TAG These tags can be used to change how the text is displayed on a browser screen. Two Types of Formatting Tags (i)TEXT LEVEL FORMATTING (ii) BLOCK LEVEL FORMATTING (i)Text Level Formatting It is used to format the text. TAG B BIG DESCRIPTION Defines bold text Defines big text. The font size is bigger than the default font size SMALL <SMALL>.</SMALL> The font size is lesser than the default font size To Italicize the text. I <I>..</I> Defines subscripted text SUB <SUB>..</SUB> Defines superscripted text SUP <SUP>.</SUP> It displays the text with a S(OR) <S>.</S> line(strike)n through it. STRIKE To emphasize the text. EM <EM>..</EM> Defines preformatted text PRE <PRE>..</PRE> It is used to change the FONT <FONT>.</FONT> font properties SYNTAX <B>.</B> <BIG>..</BIG>
IT/IT2353/WT
ATTRIBUTES None None
None None None None None None None 1.color 2.face 3.size
(ii) BLOCK LEVEL FORMATTING The tags that display block-level elements in text,such as headings,paragraphs and so on TAG SYNTAX DESCRIPTION ATTRIBUTES To insert the line break in None BR <BR> the document. Headings are defined with H1H6 <H1>.</H1> align
the <h1> to <h6> tags. <h1> defines the largest heading. <h6> defines the smallest heading
HR
<HR/>
To insert a horizontal rule.

In HTML the <hr>
1.align 2.noshade
Page 51

tag has no end tag.
IT/IT2353/WT
3.size 4.width 1.Align
<P>.</P>
To define the paragraph
1.12.1 Headings and Paragraphs Headings Syntax: <Hn>..</Hn> It is used to generate headings 1 < n < 6 Six different levels of Headings. <H1> is the largest.<H6> is the smallest. Paragraphs Paragraphs are defined with the <p> tag. Syntax: <p>..</p>
<p>This is a paragraph</p> <p>This is another paragraph</p> HTML automatically displays an empty line before and after a paragraph End Tag </p> is optional. Attribute Align Value o o o o
Left Right Center justify
Spacing in the Text Syntax: <br> <br> is used to indicate that the text following <br> should begin on the next line.

. It has no end tag like </br>. The amount of line spacing is less than that of a <p> break. 1.12.2 Horizontal Rule :<hr> <hr> element adds a horizontal line to the document. Length and thickness of the line can be specified.
IT/IT2353/WT
Atributes
attribute name ALIGN possible values LEFT, RIGHT, CENTER meaning notes
horizontal alignment of the rule default is CENTER requests the rule to be rendered as opposite to the traditional in a solid color two-color "groove" height of the rule, in pixels width of the rule
NOSHADE NOSHADE SIZE WIDTH integer width specification
Example 1 <html> <head> <title> Title of the Document</title> </head> <body text="white"bgcolor="blue"> This is the content of the document This is an <i> italic </i> font. and this is <b> bold </b>. </body> </html>
Page 53

Output:
IT/IT2353/WT
Example 2 <html> <head><title>Demonstration of Headings</title></head> <body text="white" bgcolor="blue"> <h1>This is a first level heading </h1> <h2>The second level</h2> <h3>The third level</h3> <h4>Fourth Level</h4> <h5>Fifth level</h5> <h6>Sixth level></h6> Plain text with no heading </body> </html>
Page 54

Output
IT/IT2353/WT
Page 55
IT/IT2353/WT
Example 3 <html> <head><title>Paragraph Aligning</title></head> <body text="white" bgcolor="blue"> <h3> <P ALIGN=CENTER> This paragraph will be aligned at the center. Even as the browser window size changes,the alignment remains the same.</p> <P ALIGN=LEFT> This demonstrates left alignment</p> <P ALIGN=RIGHT>Aligning by the right margin?</p> </h3> </body> </html>
OUTPUT
Page 56

Example 4 <html> <head><title>Layout Features </title></head> <body text="yellow" bgcolor="blue"> <h2> <pre> begin if(a>b) then max:=a; else max:=b; end; </pre> </h2> <hr size=8 width=50%> <hr> <hr size=20 width="75%" noshade> </body> </html> Output
IT/IT2353/WT
Page 57
IT/IT2353/WT
Example 5 <html> <head><title>Superscript and Subscript </title></head> <body text="white" bgcolor="blue"> <h1> y=x <sup> 3 </sup> + 2 x <sup> 2 </sup>+4 </h1> <br> <h2> W <sub> total</sub>=x <sup>2</sup>-5 </h2> </body> </html>
Page 58
IT/IT2353/WT
Images It includes a graphics in a HTML document. Attribute alt src align Value text URL top bottom middle left right pixels Description Specifies an alternate text for an image Specifies the URL of an image Use styles instead. Specifies how to align the image according to surrounding text.
border
Use styles instead. Defines a border around an image. Defines the height of an image
height
pixels %
Page 59

width pixels % Sets the width of an image
IT/IT2353/WT
Example <html> <head><title>Displaying Images </title></head> <body> <img src="laptop.jpg"> <img src="laptop.jpg" Height=80 width=100> </body> </html> OUTPUT
Page 60
IT/IT2353/WT
Example 2 <html> <head><title>Resizing Images </title></head> <body> <img src="laptop.jpg"width=20 height=20><p> <img src="laptop.jpg" Height=45 width=45><p> <img src="laptop.jpg" Height=70 width=70><p> Resizing the image by changing the values in the height and width attributes of the img tag. </body> </html>
OUTPUT
Page 61

Example 3 Image using Map Planetsexample.html
IT/IT2353/WT
<html>
<body> <p> Click on the sun or on one of the planets to watch it closer: </p> <img src="planets.jpg" width="145" height="126" alt="Planets" usemap="#planetmap" /> <map id="planetmap" name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.html" /> <area shape="circle" coords="124,58,8" alt="Venus" href="venus.html" /> </map> <p> <b>Note:</b> The "usemap" attribute in the img element refers to the "id" or "name" (browser dependant) attribute in the map element, therefore we have added both the "id" and "name" attributes to the map element. </p> </body> </html>
Page 62

OUTPUT
IT/IT2353/WT
Page 63

Sun .html
SUN.html
IT/IT2353/WT
<html> <head> <title> SUN </title> </head> <body> <img src="sun.jpg" align=CENTER /> <a href="planetsexample.html">BACK</a> </body> </html>
OUTPUT
Page 64

VENUS .HTML
IT/IT2353/WT
VENUS <html> <head> <title> <h1>VENUS</h1> </title> </head> <body> <img src="venus.jpg" align=CENTER /> <a href="planetsexample.html">BACK</a> </body> </html>
OUTPUT
Page 65

Links
IT/IT2353/WT
A hyperlink (or link) is a word, group of words, or image that you can click on to jump to a new document or a new section within the current document. When you move the cursor over a link in a Web page, the arrow will turn into a little hand.A hyperlink are highlighted with color and underline. Links are specified in HTML using the <a> tag. The <a> tag can be used in two ways: 1. To create a link to another document, by using the href attribute 2. To create a bookmark inside a document, by using the name attribute Syntax <a href="url">Link text</a> Clicking on a hyperlink causes browser to issue GET request to URL specified in href attribute and render response in client area. Content of anchor element is text of hyperlink
Example :1 <a href=laptop.jpg> Laptop Details</a> In the output LaptopDetails is the text displayed on the browser with hyperlink when the user clicks LaptopDetails ,the laptop.jpg will be displayed on the screen. Example 2 The HTML source code that will take you to the top of the page: <a href="#top">Take me to the top of this page.</a> Output Take me to the top of this page.
Page 66

Example 3 An image as a link
IT/IT2353/WT
<html> <body> <p>Create a link of an image: <a href="default.asp"> <img src="smiley.gif" alt="HTML tutorial" width="32" height="32" /> </a></p> <p>No border around the image, but still a link: <a href="default.asp"> <img border="0" src="smiley.gif" alt="HTML tutorial" width="32" height="32" /> </a></p> </body> </html> Output
Create a link of an image: No border around the image, but still a link:
Page 67

Example 4 (Book Mark) Link to the location of the same page <html> <body> <p> <a href="#C4">See also Chapter 4.</a> </p> <h2>Chapter 1</h2> <p>This chapter explains first chapter</p> <h2>Chapter 2</h2> <p>This chapter explains second chapter</p> <h2>Chapter 3</h2> <p>This chapter explains third chapter</p> <h2><a name="C4">Chapter 4</a></h2> <p>This chapter explains fourth chapter</p> <h2>Chapter 5</h2> <p>This chapter explains fifth chapter</p> <h2>Chapter 6</h2> <p>This chapter explains sixth chapter</p> <h2>Chapter 7</h2> <p>This chapter explains seventh chapter</p> <h2>Chapter 8</h2> <p>This chapter explains eigth chapter</p> <h2>Chapter 9</h2> <p>This chapter explains ninth chapter</p> <h2>Chapter 10</h2> <p>This chapter explains tenth chapter</p> </body> </html>
IT/IT2353/WT
Page 68

Output
IT/IT2353/WT
See also Chapter 4.
Chapter 1
This chapter explains first chapter
Chapter 2
This chapter explains second chapter
Chapter 3
This chapter explains third chapter
Chapter 4
This chapter explains fourth chapter
Chapter 5
This chapter explains fifth chapter
Chapter 6
This chapter explains sixth chapter
Chapter 7
This chapter explains seventh chapter
Chapter 8
This chapter explains eigth chapter
Chapter 9
This chapter explains ninth chapter
Chapter 10
This chapter explains tenth chapter

Example 5 (Creating a mail link) <html> <body> <p> This is an email link: <a href="mailto:someone@example.com">Send Mail</a> </p> </body> </html>
IT/IT2353/WT
Output This is an email link: Send Mail In this example a URL is provided .In this URL what ever after mailto is treated as email address.The mail window is automatically opened provided mail is installed in the system. Comments HTML Comments Comments can be inserted in the HTML code to make it more readable and understandable. Comments are ignored by the browser and not displayed. Comments are written like this: 
Note: There is an exclamation point after the opening bracket, but not before the closing bracket. Example <html> <body>
Page 70

 <p>This is a regular paragraph</p>
IT/IT2353/WT
</body> </html> OUTPUT: This is a regular paragraph Not allowed to use -- within comment
1.12 Relative URLs URL:Each web page has a unique address,called a Uniform Resource Locator.It identifies its location on the Internet. Browser utilize the URL to retrieve a file from the computer on which it resides. Format of URL
Protocol: WorldWide Web.Domain Name.Domain Type.path.FileName
Protocol: Http:It is used to access the webpage. FTP:TO transfer Files News(new server),mailto(mail server,used for accessing an email server) telnet(for accessing remote computers) Domain Name :Name of the domain where the information is located.
IT/IT2353/WT
Domain Type:It represents the type of organization or country to which host belongs Domain Type com edu gov Mil Net Description Commerical Colleges and universities Government agencies US military sites Internet Infrastructure and service providers Non profitable organisations
Org
Absolute and Relative URLs There are two types of paths in HTML, known as relative paths and absolute paths. An absolute path contains the full URL of the item being referenced. A relative path contains directions to the item relative to the HTML page. Let us understand relative URLs through a small exercise. For example: http://www.webdevelopersnotes.com/images/email.gif specifies an image file email.gif located in the images directory, under www.webdevelopersnotes.com domain name. Similarly, the absolute URL of the document you are viewing is http://www.webdevelopersnotes.com/design/ relative_and_absolute_urls.php3 which is a page in the directory called design on this web site. Using an Absolute URL in an <img> tag <img src= http://www.webddevlopersnotes.com/images/email.gif width= .... height=../>
Using a Relative URL in an <IMG> tag <img src= ../images/email.gif width= .... height=../>
Page 72
IT/IT2353/WT
The absolute URL is straight forward but in the relative URL ,we have refered to the image with ../images/email.gif. In order to understand the relative URL, let us see about the directory structure of this web site. This web site has several sections and the files and web pages for each section have been segregated into different directories. This helps us to keep things organized on the web site. Under the document or server root directory (the main directory of the web site), we have a directory called images which stores all common images used on the pages of this web site. The image email.gif resides in this directory. we have another directory called design which is at the same level as images i.e. it is also in the document root directory. This design directory contains the files and web pages for the "Web Page Design" section of this web site. Diagramatically, the scenario can be represented as:
Now to access email.gif file from relative_and_absolute_urls.php3 page using a relative URL we put ../images/email.gif in the SRC attribute. We, thus, instruct the browser to first go one level up (i.e. to the document root) and then move to the images directory and pick up the file email.gif. The two peroids (..) instruct the server to move up one directory (which is the root directory), then enter images directory (/images) and finally point at email.gif.
Page 73
IT/IT2353/WT
Advantages: Shorter than absolute URLs it's easy to transfer a web site from one domain name to another. If you had used absolute URLs in all links and SRC attributes, you'd have a difficult time updating each link on each page.
Should use relative URLs whenever possible
Case Study: Which type of link is better for getting search engine rankings: an absolute or a relative link? In terms of search engine visibility, it does not matter if you use absolute or relative links on your web site. The search engines automatically convert relative links into absolute links. However, using absolute links will not make a site rank higher merely because webmasters choose to use absolute links on their sites HTML LIST TAGS Lists are useful way of presenting content. There are five types of Lists (i) Ordered List (ii) UnOrdered List (iii) Definition lists (iv) Directory lists (v) Menu List Ordered List An ordered list is also a list of items. The list items are marked with numbers. An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
Page 74

Syntax <ol> <li>.</li> <li> ..</li> <li></li> </ol> Attribute compact start type Value Description
IT/IT2353/WT
compact_rendering Use styles instead start_on_number A a I i 1 Specifies the number to start on. Specifies the type of the list. Deprecated. Use styles instead
(i).compact The compact attribute specifies that the list should be more compact (rendered smaller by removing spaces). Syntax <ol compact="compact"> Example <html> <body>
<ol compact="compact"> <li>WebTechnology</li> <li>ERP</li>


<li>Software Testing</li> <li>Project</li> </ol> </body> </html> output
IT/IT2353/WT
(ii)start The attribute specifies what number the ordered list starts from
Syntax <ol start="number"> Example
<html> <body> <h4> Scripting Langauge </h4> <ol start="5"> <li>Java Script</li> <li>VB Script</li> </ol>
IT/IT2353/WT
<ol type="I" start="10"> <li>HTML</li> <li >XML</li> </ol>
</body> </html> output
Example <html> <body>
<h4>Numbered list:</h4> <ol> <li>Apples</li>


<li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol>
IT/IT2353/WT
<h4>Letters list:</h4> <ol type="A"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol>
<h4>Lowercase letters list:</h4> <ol type="a"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol>
<h4>Roman numbers list:</h4> <ol type="I"> <li>Apples</li> <li>Bananas</li>


<li>Lemons</li> <li>Oranges</li> </ol>
IT/IT2353/WT
<h4>Lowercase Roman numbers list:</h4> <ol type="i"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> </body> </html> OUTPUT
Page 79
IT/IT2353/WT
2.Unordered Lists An unordered list is a list of items. The list items are marked with bullets (typically small black circles). An unordered list starts with the <ul> tag. Each list item starts with the <li> tag

Syntax <ul> <li>.</li> <li> ..</li> <li></li> </ul>
IT/IT2353/WT
Example <html> <body> <h4>An Unordered List:</h4> <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> </body> </html> OUTPUT
Page 81
IT/IT2353/WT
Attribute
Value
Description
compact
compact_rendering
Use styles instead. Specifies that the list should be more compact

type
disc square circle
disc - Default. A filled circle circle - An unfilled circle square - A filled square
Ty pe
The type attribute specifies the style of the unordered list.
Syntax <ul type="type">
Example <html> <body> <ul type="square"> <u> Department </u> <li>CSE</li> <li>IT</li> <li>ECE</li> <li>EEE</li> </ul> <ul type="circle"> <li>Boys</li> <li >Girls</li>

</ul>
IT/IT2353/WT
<ul type="disc"> <u>Mode of Transport</u> <li>Own Vehicle</li> <li >Van</li> <li >Bus</li> </ul> OUTPUT
3.Definition Lists A definition list is not a list of items. This is a list of terms and explanation of the terms. A definition list starts with the <dl> tag. Each definition-list term starts with the <dt> tag. Each definition-list definition starts with the <dd> tag Tag Description
<dl> Defines a definition list


<dt> Defines a definition term <dd> Defines a definition description Example <html> <body> <h4>A Definition List:</h4> <dl> <dt>Coffee</dt> <dd>hot drink</dd> <dt>Juice</dt> <dd>cool drink</dd> </dl> </body> </html> OUTPUT
IT/IT2353/WT
4.Directory Lists The <dir> tag defines a directory list. Syntax:
Page 84

<dir> <li></li> <li></li> </dir>
IT/IT2353/WT
Example
<html> <body> <dir compact="compact"> <li>HTTP</li> <li>FTP</li> <li>TCP/IP</li> <li>SMTP</li> </dir> </body> </html> OUTPUT
(v) Menu List <menu> </menu> tag defines menu items.
Page 85

1.18 HTML Tables
IT/IT2353/WT
Tables are made up of cells,arranged into rows.Use tags <table>,<tr>,<td>
Page 86
IT/IT2353/WT
TAG TABLE
SYNTAX <TABLE>..</TABLE>
DESCRIPTION Defines a table
ATTRIBUTES 1.ALIGN 2.BORDER 3.BGCOLOR 4.CELLPADDING 5.CELLSPACING 6.COLS 7.FRAME 8.RULES
Page 87

A Table with m rows <TABLE> <TR> </TR> <!---Row1 -- > <TR> </TR> <!---Row2 -- > <TR> </TR> <!---Row3 -- > <TR> </TR> <!---Row m -- > </TABLE> Creating a Table cell There are two types of Table cells i) Header cells ii)Data cells Header Cells A table header cell is defined with the <TH> and </TH> tag pair.
IT/IT2353/WT
The content of a table header are automatically centered and appear in boldface. <html> <body> <h4>This table has 3 rows</h4> <table>
<tr>
<!---Header -- > <th> header1 </th> <th> header2 </th> <th> headerN </th> </tr>
<tr> row1 </tr>


<tr> row2</tr> </table> </body> </html>
IT/IT2353/WT
Data Cells It is defined as <TD> and </TD> tags. A simple HTML table, containing two columns and two rows. Example <html> <body> <table border = "1"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$400</td> </tr>
Page 89

</table> </body> </html> OUTPUT
IT/IT2353/WT
Attributes of Table Tag Attribute align Value left center right rgb(x,x,x) #xxxxxx colorname pixels Description Aligns the table..
bgcolor
Specifies the background color of the table.
border
Specifies the border width. Tip: Set border="0" to display tables with no borders!
cellpadding
pixels % pixels % void above below hsides lhs rhs
Specifies the space between the cell walls and contents
cellspacing
Specifies the space between cells
frame
Specifies which sides of the border surrounding a table will be visible Note: The "border" attribute can be used in conjunction with the "frame" attribute to specify the width of the
Page 90

vsides box border rules none groups rows cols all text border!
IT/IT2353/WT
Specifies the horizontal/vertical divider lines.
summary
Specifies a summary of the table for speechsynthesizing/non-visual browsers Specifies the width of the table
width
% pixels
1.align Syntax <table align="align"> Some table data </table>
Parameter align
Description Optional. Specifies the horizontal alignment of the table. Possible values: left - Left-align table right - Right-align table center - Center-align
Page 91

Example <html> <body> <p>Table with default alignment:</p> <table border="1" > <tr> <td>Test1</td> <td>Test2</td> </tr> </table> <p>Table with right alignment:</p> <table align="right" border="1" width="50%"> <tr> <td>Test1</td> <td>Test2</td> </tr> </table> </body> </html> OUTPUT
IT/IT2353/WT
Page 92
IT/IT2353/WT
Note Width=50% specifies the width of the screen.(50% of the screen) 2.<bgcolor> The bgcolor attribute specifies the background color of the table element Syntax <table bgcolor="color"> Some table data </table>
Parameter color
Description Optional. Specifies the background color of the table. Possible values: Color name - like "red" Hex number - like "#ff0000
Page 93

Example <html> <body> <table bgcolor="green" border="1" width="50%"> <tr> <td>row1col1</td> <td>row1col2</td> </tr> <tr> <td>row2col1</td> <td>row2col2</td> </tr> </table> </body> </html> OUTPUT
IT/IT2353/WT
3.BORDER The border attribute specifies the width of the table border. Tip: Set border="0" to display tables with no borders.
Page 94

Syntax <table border="pixels"> Some table data </table> Parameter pixels Description Optional. Specifies the border width of the table in pixels
IT/IT2353/WT
Example 1 <html> <body> <table border="1" width="50%"> <tr> <td>row1col1</td> <td>row1col2</td> </tr> </table> </body> </html> OUTPUT
Page 95

Example 2 <html> <body> <table border="5" width="50%"> <tr> <td>row1col1</td> <td>row1col2</td> </tr> </table> </body> </html> OUTPUT
IT/IT2353/WT
4. cellpadding The cellpadding attribute specifies the space between the table cell content and the table cell edges. Syntax <table cellpadding="pixels"> Some table data </table> Parameter pixels Description Optional. Specifies the cell padding in pixels
Page 96

Example <html> <body> Table without cellpadding: <table border="1" width="50%"> <tr> <td>row1col1</td> <td>row1col2</td> </tr> </table> Table with cellpadding: <table border="1" width="50%" cellpadding="50"> <tr> <td>row1col1</td> <td>row1col2</td> </tr> </table> </body> </html> OUTPUT
IT/IT2353/WT
Page 97
IT/IT2353/WT
5.cellspacing The cellspacing attribute specifies the space between the table cell edges and the table edge. Syntax <table cellspacing="pixels"> Some table data </table> Parameter Description pixels Optional. Specifies the cell padding in pixels
Example <html> <body> Table without cellspacing: <table border="1" width="50%"> <tr> <td>row1col1</td> <td>row1col2</td> </tr> </table>

Table with cellspacing: <table border="1" width="50%" cellspacing="15"> <tr> <td>row1col1</td> <td>row1col1<td> </tr> </table> </body> </html> OUTPUT
IT/IT2353/WT
6.frame The frame attribute specifies which sides of the table border should be visible. Syntax <table frame="frame"> Some table data </table> Parameter Description
Page 99

frame
IT/IT2353/WT
Optional. Specifies the how the table border should be displayed. Possible values: void - (default) no sides above - top side only below - bottom side only hsides - top and bottom sides only vsides - left and right sides only lhs - left-hand side only rhs - right-hand side only box - all four sides border - all four sides
Example <html> <body>
<p>Different browsers display the frame attribute differently:</p>
<p>Table with no frame set:</p> <table width="50%"> <tr> <td>row1col1</td> <td>row1col2</td> </tr> <tr>
Page 100

<td>row2col1</td> <td>row2col2</td> </tr> </table>
IT/IT2353/WT
<p>Table with frame set to above:</p> <table width="50%" frame="above"> <tr> <td>row1col1</td> <td>row1col2</td> </tr> <tr> <td>row2col1</td> <td>row2col2</td> </tr> </table>
<p>Table with frame set to below:</p> <table width="50%" frame="below"> <tr> <td>row1col1</td> <td>row1col2</td> </tr> <tr> <td>row2col1</td>

<td>row2col2</td> </tr> </table>
IT/IT2353/WT
<p>Table with frame set to hsides:</p> <table width="50%" frame="hsides"> <tr> <td>row1col1</td> <td>row1col2</td> </tr> <tr> <td>row2col1</td> <td>row2col2</td> </tr> </table> <p>Table with frame set to vsides:</p> <table width="50%" frame="vsides"> <tr> <td>row1col1</td> <td>row1col2</td> </tr> <tr> <td>row2col1</td> <td>row2col2</td> </tr>

</table> <p>Table with frame set to lhs:</p> <table width="50%" frame="lhs"> <tr> <td>row1col1</td> <td>row1col2</td> </tr> <tr> <td>row2col1</td> <td>row2col2</td> </tr> </table>
IT/IT2353/WT
<p>Table with frame set to rhs:</p> <table width="50%" frame="rhs"> <tr> <td>row1col1</td> <td>row1col2</td> </tr> <tr> <td>row2col1</td> <td>row2col2</td> </tr> </table>
Page 103

<p>Table with frame set to box:</p> <table width="50%" frame="box"> <tr> <td>row1col1</td> <td>row1col2</td> </tr> <tr> <td>row2col1</td> <td>row2col2</td> </tr> </table>
IT/IT2353/WT
<p>Table with frame set to border:</p> <table width="50%" frame="border"> <tr> <td>row1col1</td> <td>row1col2</td> </tr> <tr> <td>row2col1</td> <td>row2col2</td> </tr> </table>
</body>

</html>
IT/IT2353/WT
OUTPUT:
Page 105
IT/IT2353/WT
7.rules The rules attribute specifies horizontal/vertical divider lines in the table. For practical reasons, it may be better to not specify any rules
Page 106

Syntax <table rules="rules"> Some table data </table> Parameter rules Description Optional. Specifies the divider lines. Possible values: none - default. No rules
IT/IT2353/WT
groups - rules between row groups and column groups only rows - rules between rows only cols - rules between columns only all - rules between all rows and columns 8.summary The summary attribute should be a description of the table. This attribute is used when the user for some reason cannot see the table. This is mostly for users with non-visual browsers. Syntax <table summary="text"> Some table data </table> Parameter text Description Optional. A description of the table.
Page 107

Example html> <body>
IT/IT2353/WT
<table border="1" width="50%" summary="Table is used as an example for W3Schools.com"> <tr> <td>row1col1</td> <td>row1col2</td> </tr> <tr> <td>row2col1</td> <td>row2col2</td> </tr> </table> </body> </html>
OUTPUT
9.width The width attribute specifies the width of the table. Syntax
Page 108

<table width="length"> Some table data </table> Parameter pixels Description Optional. Specifies width of the table.
IT/IT2353/WT
If this attribute is not set, the table takes the space needed to display the table data. Possible values: pixels - length in pixels (like "100") percent - length in percent of surrounding element (like "20%") Example <html> <body> Table without width specified: <table border="1"> <tr> <td>row1col1</td> <td>row1col2</td> </tr> </table> Table with width specified at 50%: <table border="1" width="50%"> <tr> <td>row1col1</td> <td>row1col2</td>

</tr> </table> Table with width specified at 200 pixels: <table border="1" width="200"> <tr> <td>row1col1</td> <td>row1col2</td> </tr> </table> </body> </html> OUTPUT
IT/IT2353/WT
Example html> <body> <p>Different browsers display the rules attribute differently:</p> <p>Table with no rules set:</p> <table width="50%"> <tr>

<td>row1col1</td> <td>row1col2</td> </tr> <tr> <td>row2col1</td> <td>row2col2</td> </tr> </table> <p>Table with rules between rows:</p> <table width="50%" rules="rows"> <tr> <td>row1col1</td> <td>row1col2</td> </tr> <tr> <td>row2col1</td> <td>row2col2</td> </tr> </table> <p>Table with rules between columns:</p> <table width="50%" rules="cols"> <tr> <td>row1col1</td> <td>row1col2</td></tr> <tr>
IT/IT2353/WT
Page 111

<td>row2col1</td> <td>row2col2</td> </tr> </table> <p>Table with rules between all rows and columns:</p> <table width="50%" rules="all"> <tr> <td>row1col1</td> <td>row1col2</td> </tr> <tr> <td>row2col1</td> <td>row2col2</td> </tr> </table> </body> </html> OUTPUT
IT/IT2353/WT
Page 112
IT/IT2353/WT
ColSpan and rowSpan colspan - The number of columns the cell spans rowspan - The number of rows the cell spans <html> <head><title>Rowspan and Colspan</title> </head> <body> <table border="5"><caption>COSC 400 Student Grades</caption> <td> </td><td> </td><th colspan="2">Grades</th> </tr> <tr> <td> </td><th>Student</th><th>Exam 1</th><th>Exam2</th>

</tr> <tr>
IT/IT2353/WT
<th rowspan="2">Undergraduates</th><td>Kim</td><td>100</td><td>89</td> </tr> <tr> <td>Sandy</td><td>78</td><td>92</td> </tr> <tr> <th>Graduates</th><td>Taylor</td><td>83</td><td>73</td> </tr> </table> </body> </html> OUTPUT
1.19 Frames

A method for dividing the browser window into smaller subwindows.
IT/IT2353/WT
Each sub-window displaying a different HTML document. With 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. The disadvantages of using frames are: The web developer must keep track of more HTML documents It is difficult to print the entire page
Frameset Element
It defines collection of frames.The frameset element holds two or more frame elements. Each frame element holds a separate document. The frameset element states only HOW MANY columns or rows there will be in the frameset. Syntax <FRAMESET>...</FRAMESET> Attribute cols Value No of pixels, %, * pixels % * Description Specifies the number and size of columns in a frameset
rows
Specifies the number and size of rows in a frameset
Note % - specifies percentage of total area *-relative values based on available space. Example <html> <frameset rows="25%,*,25%"> <frame src="frame_a.htm" />

<frame src="frame_b.htm" /> <frame src="frame_c.htm" /> </frameset> </html>
IT/IT2353/WT
In this example there are 3 rows the first specifies the 25% of the total area for top frame and 25% of the total area for bottom frame. <frame> Define a single frame within a frameset. Attributes Attributes Frameborder Src Scrolling Description 1|0 1 specifies there is a border or 0 means no border URL Yes|no|auto Yes-scroll bar will be available No-scroll bar will not be displayed Auto-It specifies if the scroll bar is required it is displayed otherwise it is not. Number (left and right margin) Number (Top and bottom Margin) Text
Marginwidth MarginHeight Name
<noframe> .</noframe> It specifies the contents to be displayed by browser that cannot display frames. It is ignored by the browser that support frames. Example <html> <head><title> A document with frames</title></head> <frameset cols="*,*"> <frame src="left.html"> <frame src="right.html"> </frameset> <noframes> Browser does not support frames> </noframes>

</html>
IT/IT2353/WT
Page 117

Example 2 <html> <head><title>second example</title></head> <frameset cols="100,2*,*"> <frame src="left.html"> <frame src="right.html"> </frameset> <noframes> Browser does not support frames> </noframes> </html> OUTPUT
IT/IT2353/WT
Page 118
IT/IT2353/WT
In the above example there are three frames,the first frame contain 100 pixels and the second frame and third frame are relative,depends upon the available space the second frame is twice the first one. Nested Frames
Linking a framed Document When a hyperlink is clicked,by default the new page is loaded into the same frame. We can load the linked page into a new frame also. Assign a name to the target frame Specify this frame in a hyperlink as follows:
<ahref=newpage.htm target=abc></a>
Page 119
IT/IT2353/WT
The document newpage.html will load into the frame names abc.
1.20 Forms
<frame src=somepage.html name=abc> Example
A HTML form is used to input data on a web page.
HTML Tags Allowable in a form Tag <FORM> <INPUT> <OPTION> <SELECT> Type Container Stand-alone Stand-alone Container Purpose Denotes the start of a form Specifies a user input field Defines a form menu option Contains options in a form menu
Page 120

<TEXTAREA> Container
IT/IT2353/WT
Establishes a window for multiline text input.
The <form> tag is used to create an HTML form: Syntax <form> Input elements </form> <form> includes attributes which specify where and how to deliver filled-up information to the web server. Two main attributes METHOD ACTON METHOD It indicates how the information in the form will be sent to the web server when the form is submitted. Two possible values POST: It causes a forms contents to be parsed one element at a time. GET:It concatenates all field names and values in a single large string. ACTION : It specifies the address of a program and the cgiscript where the content should go The specified program is executed on the server,when the form is submitted. o Output sent back to the browser. Usage of METHOD and POST
Page 121

FORM ELEMENTS
IT/IT2353/WT
<FORM METHOD=POST ACTION =http://www.mydomain.com/test.cgi?> .. .. </FORM>
Page 122

1.INPUT Attributes of INPUT tag is
IT/IT2353/WT
(i) TYPE (ii)NAME (iii)SIZE(iv)MAXLENGTH(iv) VALUE(v) SRC (vi) ALIGN TYPE It defines the kind of element that is to be displayed in the form (i)TEXT (ii)RADIO (iii) CHECKBOX(iv)PASSWORD(v)HIDDEN(vi)IMAGE(vii)SUBMIT(viii)RESET ELEMENT TEXT RADIO DESCRIPTION It defines a textbox,which provides a single line area for entering text. It is used,when a choice must be made among several alternatives. (clicking on one of the buttons turns off all others in the same group). CHECKBOX It is similar to the radio buttons,but each box here can be selected independently of the others. It is similar to textbox,but characters are not shown as they are typed It is used for output only.It cannot be modified. It is used for active maps.when the user clicks on the image,the (x,y) coordinates are stored in variables,and are returned for further processing. It creates a box labeled Submit.If it is clicked,the form data are passed on to the designated CGI script. It creates a box labeled Reset,if clicked,clears a forms contents.
PASSWORD HIDDEN IMAGE
SUBMIT
RESET
(ii)NAME It specifies a name for the input field. (iii)SIZE It defines the number of characters that can be displayed in a TEXT box without scrolling.
Page 123

(iv)MAXLENGTH It defines the maximum number of characters a TEXTBOX can contain. (v) VALUE It is used to submit a default value for a TEXT or HIDDEN field. It can be used to specify the label of a button (v)SRC It provides a pointer to an image It is used for clickable maps. (vi)ALIGN It is used for aligning image types ALIGN=TOP|MIDDLE|BOTTOM Example for Textbox and Submit <html> <body> <form name="input" action="html_form_action.asp" method="get"> First name: <input type="text" name="FirstName" value="Mickey" /><br /> Last name: <input type="text" name="LastName" value="Mouse" /><br /> <input type="submit" value="Submit" /> </form>
IT/IT2353/WT
<p>If you click the "Submit" button, the form-data will be sent to a page called "html_form_action.asp".</p> </body> </html>
Page 124

OUTPUT First name: Last name:
Submit
IT/IT2353/WT
Mickey Mouse
If you click the "Submit" button, the form-data will be sent to a page called "html_form_action.asp".
Example for Displaying password html> <body>
<form> Password: <input type="password" name="pwd" size="20" /> </form>
<p> Notice that the browser displays asterisks or bullets instead of characters in a password field. </p> </body> </html> OUTPUT
Page 125
IT/IT2353/WT
Radio Buttons <input type="radio" /> defines a radio button. Radio buttons let a user select ONLY ONE one of a limited number of choices: <form> <input type="radio" name="sex" value="male" /> Male<br /> <input type="radio" name="sex" value="female" /> Female </form> The above HTML code looks in a browser: Male Female
Checkboxes
<input type="checkbox" /> defines a checkbox. Checkboxes let a user select ONE or MORE options of a limited number of choices. <form> <input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br /> <input type="checkbox" name="vehicle" value="Car" /> I have a car </form> The above HTML code looks in a browser: I have a bike I have a car 3.SELECT It is used along with the tag <OPTION>. The <option> tags inside the select element define the available options in the list. The list appears as a scrollable menu or a pop-up menu. It is used to create drop down list.
Page 126

Syntax <SELECT NAME=name> OPTION elements </SELECT Attributes are 1.NAME :name of the field
IT/IT2353/WT
2.SIZE:specifies the number of option elements that will be displayed at a time on the menu.(If actual number exceeds SIZE,a scrollbar will appear).Default is 1 3.MULTIPLE :It can be used to specify that more than one item from the list can be selected. This must be used in the format multiple="multiple" Note :By default there is single selection. Example <html> <head> <title> My Page </title> </head> <body> <form name="myform"> Languages known:<br> <select name="lang" SIZE=3 multiple="multiple"> <option value="english">English</option> <option value="tamil">Tamil</option> <option value="French">French</option> <option value="hindi">Hindi</option> </select> </form></body> </html>
IT/IT2353/WT
OUTPUT
4.TEXTAREA It can be used to accommodate multiple text lines in a box. ATTRIBUTES are (i)NAME : name of the field. (ii)ROWS: number of lines of text that can fit into the box. (iii)COLS: width of the text area on the screen. Example <html> <body> <p> This example cannot be edited because our editor uses a textarea for input,and your browser does not allow a textarea inside a textarea. </p> <textarea rows="10" cols="30"> WWW is the service of the Internet. </textarea></body></html>
Page 128

OUTPUT
IT/IT2353/WT
Page 129

Example <HTML> <HEAD> <TITLE>Using HTML Forms</TITLE> </HEAD> <CENTER><H3>Student Registration Form</h3> </CENTER> Please fill up the form below and press DONE when done. <FORM METHOD="POST" ACTION="/cgi/feedback">
IT/IT2353/WT
<P> Name:<INPUT Name="student name" TYPE="TEXT" SIZE="30" MAXLENGTH="50"> <P> Roll Number:<INPUT NAME ="rollno" TYPE="TEXT" SIZE="7"> <P> Course Numbers: <INPUT NAME="course1" TYPE="TEXT" size="6"> <INPUT NAME="course2" TYPE="TEXT" size="6"> <INPUT NAME="course3" TYPE="TEXT" size="6"><P> Category:SC <INPUT NAME="category" TYPE=RADIO> BC <INPUT NAME="category" TYPE=RADIO> GE <INPUT NAME="category" TYPE=RADIO> <P> Mother tongue:<SELECT NAME="mtongue" SIZE="3"> <option>Hindi </option> <option>Tamil </option> <option>English </option> <option>Malayalam</option> <option>telugu </option> </SELECT>
Page 130

<P> < Languages Known: English <INPUT NAME="lang" TYPE=CHECKBOX> Hindi<INPUT NAME="lang" TYPE=CHECKBOX> <p>Scholarship holder(select for yes); <INPUT NAME="scholar" TYPE=CHECKBOX> <p>General feedback: <TEXTAREA NAME="feed" ROWS=3 COLS=20> </TEXTAREA> <P><P> Thanks for the information <P><INPUT TYPE="SUBMIT" VALUE="DONE"> <INPUT TYPE="RESET" VALUE="CLEAR FORM"> </FORM> </BODY> </HTML>
IT/IT2353/WT
Page 131

OUTPUT
IT/IT2353/WT
1.21 XML Creating HTML Documents XML (Extensible Markup Language).It is a set of rules for defining semantic tags that break a document into parts and identify the different parts of the document. 1.21.1 What is XML?

XML stands for EXtensible Markup Language.It is platform independent and standardized XML is a markup language much like HTML XML was designed to carry data, not to display data (to manipulate data) XML tags are not predefined. You must define your own tags
Page 132

IT/IT2353/WT
XML is designed to be self-descriptive (meta data is embedded) It is simple standard for data interchange. XML is a W3C Recommendation
The Difference Between XML and HTML XML XML has no predefined elements It stores and carries information (Data Exchange) In XML is plain text In XML,white spaces are preserved <XML> <SONG> <TITLE>Indian Classical</TITLE> <COMPOSER>Hariharan</COMPOSER>
HTML HTML has predefined elements It is used for displaying information
In HTML document not only plain text HTML leading and trailing spaces are Truncated <HTML> <body> <dt>Indian Classical </dt> <dd> by HariHaran , Ravi shankar </dd>
<COMPOSER>Ravishankar</COMPOSER> <ul> <PRODUCER>Rajesh</PRODUCER> <PUBLISHER>T-Series</PUBLISHER> <LENGTH>6:20</LENGTH> <YEAR>2002</YEAR> <ARTIST>Village People</ARTIST> </SONG> </XML> <li>Producer: Rajesh <li>Publisher: T-Series Records <li>Length: 6:20 <li>Written: 2002 <li>Artist: Village People </ul> <body> </html>
Page 133

Advantages of XML 1.Domain Specific markup language. 2.Data Integration from different sources 3.Self describing data 4.Local computation and manipulation 5.Multiple view of data. 1.Domain Specific markup language
IT/IT2353/WT
XML allows various domains to develop their own specific markup language. This helps the individuals available in that domain to create information. Eg: Domain specific markup language like chemical markup language, Mathematical markup language can be created with tags related to that domain. 2.Data Integration from different sources XML enables structured data from different sources to be easily combined. Software agents can be used to integrate data on a middle-tier server from back end databases and other applications. 3.Self-Describing Data The tag itself describes the content about the XML file. <person id=P100 SEX=F <Name> <firstname>Manish</firstname> <lastname>Aarvinth</lastname> </Name> <Birth> <date>08 Sep 1999</date> </Birth> </person>
4.Local Computation and Manipulation After being delivered to the client,data in XML format can be parsed,edited locally and manipulated with computations performed by client applications. 5.Multiple Views of Data Once data has been delivered to the client,it can be viewed in different ways.

Structure of a XML document An XML document consists of : Prolog Elements Attributes Entity references Comments
IT/IT2353/WT
Element type: name and content of elements Attribute list: attributes of an element Entity: define meaning of, e.g., > 1.21. 2 XML Element Type Declaration Element Type Declarations are used to specify the set of all valid elements in the language defined by the DTD.
Content Specification The information following the element type name is known as the Content Specification.
Page 135

From the Above table the Specification Types are 1.Empty Syntax :EMPTY Example
IT/IT2353/WT
In the above example br is the element name and EMPTY is the Content Specification 2.Sequence Syntax: (element1,element2,.) Example
In the above example html is Element name,(head,body) is the Content Specification. In this the Content Specification is head and body ,the body should be followed by head 3.Choice Syntax (element1|element2|) Example
One of the specified elements must appear. 4.Character data Syntax (#PCDATA) Example
Page 136

Content Specification Iteration character
IT/IT2353/WT
Example Element type declaration for table
Child elements of table are -Optional Caption followed by -Any number of col elements or any number of colgroup elements then -Optional header followed by optional footer then -one or more tbody elements or one or more tr elements. Attribute List Declaration Attributes are declared for specific element type. Attribute declaration identify which elements may have attributes,what attributes they may have,what values the attributes may hold and its default value. An attribute list declaration begins with the keyword ATTLIST followed by an element typename and specifies the names for all attributes of the named element,the type of data and default value information. Syntax: <!ATTLIST elementname attributename type default usage>
Page 137
IT/IT2353/WT
Example
Attribute Type
Page 138

Default Value
IT/IT2353/WT
1.21.3 Entity Declaration Entities as variables used to define shortcuts to common text. Entity references are references to entities. Entities can be declared internal. Entities can be declared external Types of Entity (i)General Entity (ii)Parameter Entity (i)General Entity referenced from HTML document defined by DTD and by using & (ii)Parameter Entity reference from DTD and not from HTML documents by using % General Entity Internal Entity Declaration Syntax <!ENTITY name "entity_value">
Example <!ENTITY WT Web Technology > Using &WT; anywhere in the document inserts the Web Technology in that place. Internal entity allow to define shortcuts for frequently typed text
IT/IT2353/WT
There are 5 predefined entity references in XML: PreDefined Entittes &lt &gt &amp &apos &quot Description < less than >greater than & ampersand apostrophe quotation mark How to declare this entities in DTD <!ENTITY lt "<"> <!ENTITY gt ">"> <!ENTITY amp "&"> <!ENTITY apos "'"> <!ENTITY quot """>
External Entity It allow a XML document to refer to an external file. External Entity contain either a text or binary data. If they contain text,the content of an external file is inserted at that point of reference and parsed as part of the referring document.
<! ENTITY EE1 /Cardetails.Xml> <! ENTITY EE2 /logo.gif>
&EE1; will insert the content of cardetails.xml at the location it has called by processing it. Parameter Entity It can occur only in the document type declarations.A Parameter Entity is identified by placing % infront of its name in the declaration. The percent sign is also used in references to parameter entities, instead of the ampersand. Parameter entity references are immediately expanded in the document type declaration and their replacement text is part of the declaration, whereas normal entity references are not expanded. Parameter entities are not recognized in the body of a document
Page 140
IT/IT2353/WT
Example
1.21.4 DTD Files DTD allows a document to send meta information to the parser about its contents.
DTD document contains element type, attribute list, and entity declarations It may also contain declaration of external entities: identifiers for secondary DTD documents
Page 141

DOCTYPE It is the system identifier for the DTD.
IT/IT2353/WT
The string following the PUBLIC keyword is called as formal public identifier for DTD. The following string is the URL where the DTD file is located.
Xhtml1-strict.dtd
Example Books.xml <?xml version=1.0?> <Books> <Book> <Title> WebTechnology </Title> <Author> Jefferey </Author> <price> Rs.450</price> <ISBN_No>12345</ISBN_No> <Publishers>Pearson</Publisher> </Book> <Book> <Title> Cryptography and Network Security </Title> <Author> William Stallings </Author> <price> Rs.400</price> <ISBN_No>13245</ISBN_No> <Publishers>Pearson</Publisher> </Book> </Books> Use Books.xml in HTML

<html> <head> <Title> XML data</title> </head> <Body> <xml id="BooksCatalogue" src="books.xml"></xml> <Table border="1" datasrc="#BooksCatalogue"> <Thead> <tr> <th>Book title</th> <th>Author</th> <th>Price</th> <th>ISBN</th> <th>Publishers</th> </tr> </Thead> <Tfoot> <tr> <th colspan="5"> "Book Details"</th> </tr> </Tfoot> <tr> <td><Div datafld="Title"></Div></td> <td><Div datafld="Author"></Div></td> <td><Div datafld="price"></Div></td> <td><Div datafld="ISBN_No"></Div></td> <td><Div datafld="Publishers"></Div></td> </tr> </Table> </body> </Html>
IT/IT2353/WT
Page 143

WebTechnology Study Materials

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

WebTechnology Study Materials

Загружено:

Авторское право:

Доступные форматы

DMI College of Engineering

WEB TECHNOLOGY UNIT I

1.1 Web Essentials

DMI College of Engineering

Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology

DMI College of Engineering

DMI College of Engineering

Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology

DMI College of Engineering

Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology

DMI College of Engineering

Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology

DMI College of Engineering

DMI College of Engineering

Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology

DMI College of Engineering

the same protocols (rules and procedures)

Transmission Control Protocol/Internet Protocol,or

Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology

DMI College of Engineering

Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology

DMI College of Engineering

DMI College of Engineering

Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology

DMI College of Engineering

Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology

DMI College of Engineering

DMI College of Engineering

Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology

DMI College of Engineering

Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology

DMI College of Engineering

Difference between TCP and UDP

Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology

DMI College of Engineering

Higher-Level Internet protocols

DMI College of Engineering

Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology

DMI College of Engineering

Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology

DMI College of Engineering

Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology

DMI College of Engineering

General Format of Request and Response Message

Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology

DMI College of Engineering

Body only present in some messages

Request type (method)

GET http://confused.com:80/index.html HTTP/1.1

Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology

DMI College of Engineering

The URL is made up of three parts. protocol :// URL / path.

DMI College of Engineering

Body only present in some messages

HTTP/1.1 200 OK Page 25

Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology

DMI College of Engineering

Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology

DMI College of Engineering

Sample HTTP Exchange

Accept: text/plain, text/html} Request Header

DMI College of Engineering

DMI College of Engineering