HTML
HTML
HTML
WWW is a framework for accessing linked documents spread out over millions of machines all over the Internet. The WWW has a unique combination of flexibility, portability, and user-friendly features. In 1989, the WWW project was initiated by CERN (European Center for Nuclear Research) to create a system to handle distributed resources for scientific research.
The WWW consists of a vast, worldwide collection of documents. These documents are known as Web Pages/ Pages.
Pages are viewed with a program called a browser, e.g., Internet Explorer, Netscape Navigator etc. The browser fetches the page requested, interprets the text and formatting commands on it, and displays the page properly formatted on the screen.
Web Servers
After creation of several linked web pages they are organized and stored in a central computer. The organization of web pages into directories and files stored on the hard disk drive of a central computer is called Web Site creation. Computers, which store web pages in the form of directories and files and provide these files to read, are called Servers.
Web Servers
The Server Computer runs special software called Web Server software that allows:
Web Site Management. Accept a clients request for information. Respond to a clients request by providing the page with the required information.
Example: Internet Information Server (I.I.S), Apache Web Server, Netscape Server, and Microsoft Personal Web Server.
Web Browsers
To access information stored in the form of web pages, user must connect to a Web Server. Once connected, an interface that displays the content of the web page is required. Computers that offer the facility to read information stored in web pages are called Web Clients. Web Client runs special software called a Browser that allows them to: Connect to an appropriate Server. Query the Server for the information to be read. Provides an interface to read the information returned by the Server.
Web Browsers
Internet
Each browser usually consists of three parts: a controller, client programs and interpreters.
The controller receives input from the keyboard or the mouse and uses the client programs to access the document.
After the document has been accessed, the controller uses one of the interpreters to display the document on the screen.
Establish Connection Client issues a request and Server sends a Response. Server Terminates the Connection. Server closes the Connection
1. Connect 2. Request
Web Server
3. Reply 4. Close
Web Tiers
The traditional method of Internet browsing involved simple client server interactions. For conducting E-commerce transactions this simple request reply procedure is not sufficient. Therefore the web pages were made dynamic and session management was added to the overall process to create a transactional environment. These additions further create various ECommerce architectures which is known as Web tiers. Different tiers are: 1-Tier or Single Tier, 2-Tier, 3Tier, n-Tier
When an application running on a single computer and performs all the required task such as displaying screens and occupying data from the user (presentation logic), performing validations, bringing records from the database and updating them when needed (business logic),
Business Logic
2- Tier
Involves two computers in executing an application. In fact these were a client-server architectures where the tier at the client end would execute application running on a powerful server computer remotely. The server would also host all the files, databases, transaction management features and the overall logic. Clear separation between the presentation and business logic.
2- Tier
Most of the time the server is the database server and the client being a graphical user interface to operate on data. Since the client terminal lacked any processing power at all and was merely an input output device for interacting with the remote server, it was known as very thin client.
Request
Powerful server
Tier 2: Application logic transaction management files / database access
2- Tier
As the personal computers became more powerful in processing, people wanted to more work done by the client. In addition to GUI design the client side application started to perform local tasks such as simple validations, calculations etc.
This shiftment of some portion of application logic to the client from the server makes the client highly thick and the architecture is known as thicker client architecture.
2- Tier
The amount of thickness of client varies from application to application. So, together with developing the server application, the client applications also to be developed.
Request
Thick client
Powerful server
Response Tier 1: GUI Interactions with the user Tier 2: Major application logic some processing like transaction management Local validations etc. files / database access
3- Tier
In a 2-Tier application, some part of the application logic was hard coded as a part of the application running at the client side and the rest was a part of the database processing at the server side. If there were any changes in the application logic both tiers would get affected. The 3- tier architecture solves this problem.
In this approach the application logic is taken from both the client and server and clubbed into a new tier.
3-Tier
The new tier is sandwiched between the existing two tiers. The new tier is called application server, since it hosts all application logic, business rules and performs transaction management. The first tier is a thick client with GUI features and performs basic validations. The last tier is now a database server, which is solely responsible for database processing and is independent of the application logic
3-Tier
Request
Response
Application Server
Database Server
Tier 1: GUI interactions Tier 2: Application Logic, with the user and transaction management, Basic validations calls to the database server
N-Tier
It is a system, which supports a number of different configurations. In an n-tier architecture the application logic is logically divided by function, rather than physically.
A user interface that handles the users interaction with the application- these can a web browser running through a fire wall or a heavier desktop application.
N- Tier
Presentation logic that defines what the user interface displays and how a users requests are handled. Business logic that models the applications business rules, often through interaction with the applications data. Infrastructure services that provide additional functionality required by the application component, such as messaging, transactional support. The data layer where the data resides.
Web Pages may contain pointers to other Web pages. Pointing one web page from another web page requires some mechanisms for naming and locating pages. In particular, three questions had to be answered before a selected page could be displayed: What is the page called? Where is the page located? How can the page be accessed? Each page is assigned a URL (Uniform Resource Locator) that effectively serves as the pages worldwide name. The Uniform Resource Locator defines four things: method, host computer, port and path.
The method is the protocol used to retrieve the document, for example HTTP.
The host is the computer where the information is located, although the name of the computer can be alias. Web pages are usually stored in computers, and computers are given alias names that usually begin with the characters www. This is not mandatory, however, as the host can be any name given to the computer that hosts the web page.
The URL optionally can contain the port number of the server. If the port is included, it should be inserted between the host and the path, and it should be separated from the host by a colon. Path is the pathname of the file where the information is located. Note that the path can itself contain slashes to separate the directories from the subdirectories and files.
Consider an example: The Web site for the authors department contains several videos about the university and the city of Amsterdam. The URL for the video page is
http://www.cs.vu.nl/video/index-en.html
The URL consists of three parts: the protocol (http), the host name (www.cs.vu/nl) and the file name (video/index-en.html), with certain punctuation separating the pieces. The file name is a path relative to the default Web directory at cs.vu.nl.
What is HTML?
Hyper Text Markup Language (HTML) is a language used to encode World Wide Web documents. It is a document layout and hyperlink specification language that defines the syntax and placement of various media like text, images etc. to be displayed by the browser.
What is HTML?
HTML is a subset of a higher-level markup language called Standard Generalized Markup Language (SGML). The most basic element of an HTML is ASCII text, generated in a text editor like notepad, marking up means the additions of certain commands, in the form of tags, to your document, in order to tell the browser how you want the document displayed.
Every HTML tag consists of a tag name sometimes followed by a list of optional attributes. More complicated tags have attributes each of which may have specific values associated with it. Tag attributes are placed after a tag name each separated by a space.
An attributes value is the one that follows an equal sign after the attribute name. If an attributes value is a single word or number, it can be simply added after the equal sign. All other values should be enclosed in double or single quotation marks.
All placed between angled brackets < and >. E.g., <HEAD>,<I>,<BR>.
Most HTML tags consists of start and end tags. End tags are the same as start tags except with a preceding forward slash (/).
The first part of the tag <tag name> turns the tag on The ending part of the tag, </tag name>, contains the "/" slash character. This "/" slash tells a WWW browser to stop tagging the text. Many HTML tags are paired this way. Think of the tag as a container.
If you forget the backslash, a WWW browser will continue the tag for the rest of the text in your document, producing undesirable results.
Open a text editor Create your HTML document Head - not displayed with body Body Save the HTML (extension of .him or .html) Display your HTML document in WWW browser window (Open File rather than Open Location) Check your work and modify as necessary Place it on the Web
HTML Tags
Basic Tags: The general layout of an HTML document is given below: <html> <head> Head Section</head> <body> body section </body> </html> The entire document is enclosed by the <html>and </html> tags. This identifies that it is an HTML document.
HTML Tags
With in the document there are two broad sections: the head section enclosed by <head> and </head> tags and the body section enclosed by the <body> and </body> tags. The head section usually contains control information, which establishes the relationship of the current document with other HTML documents and the browser, and are not displayed by the browser in general. The body section contains information that is actually displayed by the browser. It contains several elements for adding text, image, sound, video, and hyperlinks to a web page.
HTML Tags
Comments: Comments inside a program code help the programmer to understand the purpose of specific portions of the code. Comments inside the HTML take this form: <!- -Comment Text-- > The text enclosed by the comment tags are ignored by the browser and not displayed. They may however improve the readability of an HTML document.
Title Tag
An HTML document may contain title, which appears in the blue title bar at the top of the browser window. Titles are inserted using the <TITLE> tag within the HEAD portion. Only one TITLE element is permitted in an HTML document. <head> <title>My home page</title> </head>
HTML Tags
Working with text: For breaking a body of text into paragraphs, the paragraph element represented by the P tag is used. The block of text in each paragraph is enclosed within the <p> and </p> tags. <body> <p>This is simple one sentence paragraph</p> <p> This is simple two sentence paragraph. This is simple two sentence paragraph </p> </body>
HTML Tags
HTML Tags
Inserting line breaks: A single line of text may be broken into multiple parts by using the break element, represented by the <br> tag. This tag is not having an end tag. Without a break element the browser will attempt to display all text in a single continuous line. Horizontal Lines: Two bodies of text can be separated from each other by a horizontal line across the page. The Horizontal Rule element, represented by the <hr> tag can be used to do so. This tag also does not have an end tag. <p> A short poem.<br> Many had a little lamb<hr> whose fleece was white as snow </p>
HTML Tags
HTML Tags
Changing text styles: The b element renders its content in a boldface version.
The tt element renders its content in a teletype font, usually used to indicate computer code or keyboard text. <b> bold</b> <i> Italic</i> <tt> Teletype</tt>
HTML Tags
Inserting Heading: HTML defines a series of heading levels from h1 through h6, whose associated numbers are intended to signify relative importance of the section below the heading. The h1 element represents the most important where h6 represents least importance. <h1> HTML tags</h1> <h3> HTML tags</h3>
HTML Tags
Pre-Formatting Text:
The pre element defines a block of preformatted text. Preformatted text is usually rendered by default in a monospace font and more importantly it preserves the white space entered into the source code for the content. <pre> NAME AGE
HTML Tags
Creating Divisions:
The div element can be used to divide the page into such that a set of rules can be applied to each section. <div align="center"> <p> The First Paragraph</p></div> <p> The Second Paragraph</p> <p> The Third Paragraph</p>
HTML Tags
Indenting text: The blockquote element is intended to indent a block of content. The indented block has wider left and right margins (about 40 pixels) plus some extra white space above and below the block.
<p> Thus the story begins-</p> < blockquote > four years ago <br> there lived a poor man </ blockquote >
HTML Tags
Lists
Unordered List: The ul element is a container for an unordered list of items. An unordered list means that the items are rendered with a leading symbol that implies no specific order of items other than by virtue of location within the list. Content for each list item is defined by the nested li element. <ul> <li> One</ li ><br> < li > Two</ li ><br> < li > Three</ li ><br> < li > Four</ li ></ul>
Lists
Ordered List: The ol element is a container for an ordered list of items. An ordered list means that the items are rendered with a leading sequence of numbers or letters. Content for each list item is defined by the nested LI element. <ol> <li> One</ li ><br> < li > Two</ li ><br> < li > Three</ li ><br> < li > Four</ li ></ol>
Lists
Lists
Combination List: The ul and ol elements are combined ina single list to build up different levels of hierarchies. <ol><li> <h3 align=left>Topic1</h3> <ul><li> Topic 1.1</li> <li> Topic 1.2</li> <li> Topic 1.3</li></ul></li><br> <li> <h3 align=left>Topic2</h3> <ul> <li> Topic 2.1</li> <li> Topic 2.2</li> <li> Topic 2.3</li></ul> </li> </ol>
Lists
Definition List: The dl element is part of the dl, dt, dd triplet of elements used to create a definition list in a document. The entire list is bracketed by the dl elements tag. Each definition term (dt) is denoted by a leading dt element tag, and the definition for the term is denoted by a leading dd element and indenting any dd element that follows it.
<dl> <dt> Triangle <dd> Three sided figure <dt> Rectangle <dd> Four sided figure </dl>
Lists
The font element is a container whose contents are rendered with the font characteristics defined by the elements attributes.
The face attribute is used to denote the name of the font color attribute denotes font color. Color can be specified by its name or by its RGB combination in hex.
Font sizes referenced by the size attribute are on a relative size scale. The default browser font size is 3. the range of acceptable are integers from 1 to 7. The exact point size varies with the operating system and browser design.
The img element displays a graphical image in a file format the browser is equipped to handle. The common image file formats are GIF and JPEG. The value of src attribute is the URL to a file containing image data that is displayed through the img element.
The align attribute determines how the image element is rendered in physical relation to the browser window.
The height and width attributes define the dimensions for the space on the page reserved for the image, regardless of the actual size of the image. The values of the attributes should be positive integer numbers of percentage values.
The BODY tag used with the BACKGROUND attribute specifies an image file that is used as a backdrop to the text and other content of the page. A background image loads in its image loads in its original size and titles to fill the available document space in the browser window. The value of the attribute is any valid URL to the image file.
The BGCOLOR attribute establishes a fill color (behind the text and other content) for the entire background. If you combine the BGCOLOR and BACKGROUNG element, any transparent areas of the background image let the background color show through.
<body bgcolor= gold>
Hyperlinks enable the user to jump from one document to another, or even between different parts of the same document. A hyperlink consists of two parts: the first is the anchor which is the visible element on which user clicks. The second part is the pointer, which specifies that target document that will open when the anchor is clicked.
For this scheme, a bookmark has first to be created for the concerned section. <a name = section2> Section 2</a> Next a hyperlink is to be created by specifying the section name <a href = manual.htm#section2> Go to Section 2</a>
You can create tables in which a cell spans several rows or a row spans several columns. This is done by specifying rowspan and colspan attributes within th.
The cellspacing attribute fixes the spacing between the cells and the cellpadding fixes the gap in pixels between the edges of a cell and its contents.
border
cellpadding
cellspacing
An HTML form is used to send user supplied data to a server program over the Internet.
The form can contain interface elements such as text fields, buttons, checkboxes, radio buttons, and selection lists that let users enter text and make choices. Each interface element in the form must be defined with an appropriate tag.
All elements in the form must be defined between the <FORM> and </FORM> tags. As well as user input elements, the form can contain other elements such as headings, paragraphs, tables, and so on. When the form is displayed in a web browser, the user can fill it out by making choices and entering text using the interface elements, and then submit the form by clicking a Submit button.
The action invoked when the user clicks a Submit button is defined by the ACTION attribute of the FORM tag. The value of the ACTION attribute is usually a URL that points to server program. The program runs on a server, processes arguments sent by the form, and returns data to the browser.
A frame structure allows us to display multiple HTML documents at the same time on the screen. For this the browser window needs to be partitioned into different compartments and each compartment should be associated with specific HTML files. The document required to divide the browser window into section or frames is called the frame definition document.
It differs from the normal HTML file in that here the BODY tag is replaced by the FRAMESET tag. Each frame is given a name and the particular file is to be shown in that frame is also specified.
<html><head> <title>frame definition</title> </head> <frameset cols = 20%,80%> <frame src= content.htm name= content_frame> <frame src= main.htm name= main_frame> </frameset> </html>
Usually the content portion holds several hyperlinks related to topic name. When the user clicks on a hyperlink, the content matter of the specific topic appears on the other frame.
< a href=main.html target = main_frame> Home</a><p> < a href=topic1.html target = main_frame> Topic1</a><p> < a href= topic2.html target = main_frame> Topic2</a><p> < a href= topic3.html target = main_frame> Topic3</a><p> </body>