Exploring the Web
Overview
How things works on Web. Web browser, web server, HTML Building Basic HTML
How things works on WEB?
Lets discuss something Client Web Browser (IE, Firefox) Server Web Server (Apache, Tomcat, IIS) Protocol HTTP Language HTML
Web Application
A web application is an application that is accessed with a web browser over the Internet or an intranet
What does Web Browser do?
A web browser lets a user to request a resource. Is a software that knows how to communicate with the server
What does your Web Client do?
Lets user request something on the server Shows the result of the request
Client sending the request
What does your Web Server do?
Takes a Client request. Gives something back to the Client. The web server gets the request, finds the resource, and returns something to the Client
Returning response back
10
Protocol
TCP/IP, sounds familiar? These are the agents who takes the burden of delivering. Guess what DHL do? Here well talk about HTTP. What does HTTP do? It takes client request to server It brings server response to client
11
Language
You understands French? Not our language, but french do understands. Browser understand HTML. Why should we bother? What does HTML do? Gives instructions to the browser
12
Lets put them together
Browser is client side proxy who sends request. Request is some kind of data which is taken by HTTP to the server. Web server receives the request. Server sends the response as an HTML.
13
Client sending the request
14
Returning the response back
15
Web Technologies
HTML XHTML CSS JavaScript
16
HTML
Servers often send the browser a set of instructions written in HTML (HyperText Markup Language) It tells the browser how to present the content to the user It is a language for describing web pages.
17
HTML
HTML is not a programming language, it is a markup language A markup language is a set of markup tags HTML uses markup tags to describe web pages
18
HTML Documents = Web Pages
HTML documents describe web pages HTML documents contain HTML tags and plain text HTML documents are also called web pages The purpose of web browser is to read HTML documents and display them as web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page 19
What you write (HTML)
<html> <head> <title>Hello, World</title> </head> <body> <h1>Welcome!</h1> <p> Join us in learning the world of <em>web pages</em>. </p> <h2>Attention</h2> <p> Please </p> </body> </html>
20
What the browser creates. . .
21
HTML Tags
HTML markup tags are usually called HTML tags Tags are used to mark the beginning and end of document content They instruct web browsers as to the type of content they contain, so that the browsers will know how to render the documents content
22
HTML Tags
Tags are enclosed within < and > brackets The opening bracket (<) identifies the beginning of the tag It is followed by the tag name Tag names end with a closing bracket (>)
23
Tag Pairs
Most HTML tags work in pairs, including a start and an end tag The first tag in a pair is the start tag , the second tag is the end tag Start and end tags are also called opening tags and closing tags The slash ( / ) indicates an ending tag
24
Tag Pairs
Syntax
<tag> content </tag>
content represents the content that is embedded within the two tags. start tag identifies the beginning of an element end tag identifies where the element ends
25
Single Tags
Elements that do not have an end tag are referred to as single or empty tags Single tags do not contain any contents all single tags are self-closed, which is accomplished by placing a / before the closing > Syntax
<tag />
26
Building Basic HTML
The basic unit of web development is the HTML page. This is simply a text document containing special tags to describe the data in the pages
27
Basic HTML Elements
html
serves as the documents root element and acts as a container in which all other elements are stored contains the head and body elements
28
Basic HTML Elements
head
contains other elements that are used to provide information about the document and its contents
body
contains all of the documents contents, which when rendered by the web browser is presented as web 29 page content
XHTML
Extensible Hypertext Markup Language is a markup language that is very similar to HTML, except that it is based on XML rather than SGML XML (Extensible Markup Language) represents a more restrictive subset of SGML, resulting in tighter syntax that yields more consistent results when markup is rendered by browsers
30
HTML and XHTML
HTML was created for the purpose of describing the structure of text-based web documents. HTML suffers from a number of irregularities. XHTML was created to addresses these irregularities XHTML has a predictable syntax To conform to XML, all XHTML elements must be written in lowercase and all elements must also be closed
31
Parts of (X)HTML Document
DOCTYPE declaration
Tells the browsers what version of HTML or (X)HTML is being used.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt
38
Parts of (X)HTML Document
Document head section
Provides information about the document, including its title, style information, and scripts.
Document body section
Outlines the content that is rendered in the browser and made visible to visitors.
39
XHTML Sample
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml <head> <title> Welcome </title> </head> <body> <h1>Hello World! </h1> </body> </html>
40
XHTML Sample
Document Type Declaration
It is for the XHTML 1.0 Strict Version
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 S "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
URL pointing to the definition of XHTML 1.0 Strict
41
XHTML Sample
Add attributes to <html> element xmlns
attribute specifies which language the <html> element belongs to
lang and xml:lang
attributes, which specify the language being used in the XML document.
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:
XML uses a URL as a unique dentifier for language
Need to specify that we 42 using English
Adding Elements To The Head Section
<title>
This tag displays a text string in the browsers title bar
<head> <title> Welcome </title> </head>
43
Adding Elements To The Head Section
<meta>
This tag is used to provide keyword data used by Internet search engines you can define suggested keywords and descriptions for search engines
<head> <meta name="keywords" content="Games, Jokes, Rid <meta name="description" content="Play free on-line </head>
44
Adding Elements To The Head Section
<style>
This tag is used to embed an internal style sheet into a document
<head> <style type = text/css> h1 {color:red} p {color:blue} </style> </head>
45
Adding Elements To The Head Section
<link>
This tag is used to set up a link to an external style sheet document
<head> <link rel="stylesheet" type="text/css" href="tes </head>
test.css h1 {color: red;}
46
Adding Elements To The Head Section
<script>
This tag is used to add scripts to your documents
<head> <script language="javascript" type="text/javas document.write(Hello World!); </script> </head>
47
Building Basic HTML
Tell the browser this is the start of HTML <html> Header area contains information about the docume <head> <title>Hello, World</title> Gives the page a title End of the header </head> <body> Start of the body, The bulk of an HTML document is contai <h1>Welcome!</h1> Tells the browser that Welcome is <p> Join us in learning the world of Start of a paragra <em>web pages</em>. Puts emphasis on the word </p> End of a paragraph <h2>Attention</h2> Tells the browser that this part is a su <p> Start of another paragraph Please </p> End of a paragraph </body> End of the body 48 </html>
What the browser creates. . .
49
Assignment
Basic HTML Tags HTML Table HTML Form Input Elements
Text fields Password fields Radio Button Checkbox Button Controls Submit Buttons
Selection Elements
50
