Lecture 1 by David Gevorkyan. Outline Introduction to Internet Introduction to WWW Web Servers Web...

Lecture 1by David Gevorkyan

Outline• Introduction to Internet

• Introduction to WWW• Web Servers• Web Browsers• URL• HTTP

• HTML elements and attributes

History of Internet• Origin of the Internet is the ARPANET

(Advanced Research Projects Agency Network) that was initiated in 1969 to support researchers on DOD (Department of Defense) projects.

• In 1989, this changed with the introduction of World Wide Web (WWW), commonly referred to as the Web.

Internet• Simply stated, Internet is a

• network of networks

• Technically, however, Internet is a• collection of networks based on the IP (Internet

Protocol) stack (initially referred to as the DOD “Department of Defense” or ARPANET Protocol Suite)

WWW Background• 1989-1990 – Tim Berners-Lee invents the

World Wide Web at CERN• Means for transferring text and graphics

simultaneously• Client/Server data transfer protocol

• Communication via application level protocol• System ran on top of standard networking infrastructure

• Text mark up language• Not invented by Berners-Lee• Simple and easy to use• Requires a client application to render text/graphics

The client server paradigm • A widely used form of communication

• Server application waits passively for contact from clients

• A server provides a specific service

• Client application actively initiates contact with the server

• Information can flow in both directions

• Typical situation is many clients interacting with each server

WWW Components• Structural Components

• Clients / browsers• Servers• Caches• Internet - the global infrastructure which facilitates data

transfer

• Semantic Components• Hyper Text Transfer Protocol (HTTP)• Hyper Text Markup Language (HTML)

• eXtensible Markup Language (XML)

• Uniform Resource Locator (URL) and Uniform Resource Identifier (URI)

WWW Structure• Clients use browser application to send URIs via HTTP to

servers requesting a Web page• Web pages constructed using HTML (or other markup

language) and consist of text, graphics, sounds + embedded files

• Servers (or caches) respond with requested Web page• Or with error message

• Client’s browser renders Web page returned by server• Page is written using Hyper Text Markup Language (HTML)• Displaying text, graphics and sound in browser• Writing data as well

• The entire system runs over standard networking protocols (TCP/IP, DNS,…)

WWW Structure (cont.)

Web Browser(Firefox)

Web Browser(Internet Explorer)

Web site: http://www.aua.am• Web server (program)• HTML documents (index.html, history.html)

HTTP HTML HTML

Database(MySQL, Oracle)

SQL

data

HTTP

Web Browsers• Browsers are clients

• always initiate, servers react

• Allow user to browse resources available on server • either existing or dynamically built documents

• Mosaic - NCSA (Univ. of Illinois), in early 1993• First to use a GUI, led to explosion of Web use• Initially for X-Windows, under UNIX, but was ported to other

platforms by late 1993

• Current common browsers• Mozilla Firefox, Internet Explorer, Opera, Safari, Google

Chrome

Web Servers• Provide responses to browser requests

• All communications between browsers and servers use Hypertext Transfer Protocol (HTTP)

• Web servers run as background processes in the operating system• Monitor a communications port on the host,

accepting HTTP messages when they appear

• Common servers• Apache, JBoss, Internet Information Server (IS)

Job of the web server

Uniform Resource Locator• The basis for locating resources in WWW

• protocol://host:port/path (protocols: http, ftp, telnet)• Example: http://validator.w3.org/index.html

• http - tells the server that an HTTP request is being initiated• The "validator.w3.org" is the name of the machine running

the Web server. (This is actually the domain name used by the Internet to locate machines on the Internet, where org is domain w3 is first sub-domain then validator is second sub-domain)

• The “/index.html" is the name of a file on the machine validator.w3.org

The HTTP Protocol• Invented by Tim Berners-Lee in 1990

• RFC 1945 (1996) - HTTP/1.0

• RFC 2068 (1997) - HTTP/1.1

• RFC 2616 (1999) - HTTP/1.1 • (update to 2068)

Features of HTTP• Protocol for client/server communication

• The heart of the Web• Very simple request/response protocol

• Client sends request message, server replies with response message

• Stateless• Each request is an independent transaction - unrelated to any

previous requests• Advantage: simplifies server design - information about previous

transactions does not need to be stored• Disadvantage: more information must be included in each request

• Relies on URI naming mechanism

HTTP Operation• On the Internet HTTP usually uses TCP/IP

connections• TCP Port 80 is the default (though others can be

specified)• HTTP uses a Request / Response paradigm• Client establishes a connection to the server, and

sends it a request• Server responds to the request by generating a

response (which may or may not contain content)

HTTP Request• Delivered from a client to a server containing

instructions for the server• Contains

• the method to be applied to the data resource• the identifier of the resource• the protocol version in use

• Most commonly used methods:• GET - Fetch a document • HEAD - Fetch just the header of the document• POST - Execute the document, using the data in body• PUT - Store a new document on the server• DELETE - Remove a document from the server

Request message

METHOD /path-to-resource HTTP/version-numberHeader-Name-1: valueHeader-Name-2: value

[optional request body]

General request message structure

GET /index.html HTTP/1.1 Host: www.aua.am Accept: text/*User-Agent: Mozilla/2.02Gold (WinNT; I)

Example

HTTP Response • Message generated by a server after receiving

and interpreting a request

• Responses contain:• Status line with the protocol version, a status code,

and a “reason phrase”• Response-Header (containing information about the

server)• Entity Header (meta-information)• Entity Body (data)

Response message

HTTP/version-number status-code message Response-Header-Name-1: valueResponse-Header-Name-2: valueEntity-Header-Name-1: valueEntity-Header-Name-2: value

[optional entity body]

General response message structure

HTTP/1.1 200 OKServer: Apache (Red-Hat/Linux)Content-Type: text/htmlContent-Length: 9934

<HTML> <HEAD> <TITLE>School of Computer Science</TITLE> …

Example

Some HTTP Status Codes• 200 : OK• 201 : Created• 202 : Accepted• 204 : No Content• 301 : Moved Permanently• 302 : Moved Temporarily• 400 : Bad Request• 401 : Unauthorized• 403 : Forbidden• 404 : Not Found• 500 : Internal Server Error• 503 : Service Unavailable

Introduction to HTML• HTML stands for Hyper Text Markup Language• The language that browsers understand and servers

speak• An HTML file is a text file containing small markup

tags• The markup tags tell the Web browser how to display

the page• An HTML file must have an htm or html file extension• An HTML file can be created using a simple text editor

HTML page example

Simple example<html>

<head>

<title>Example page!</title>

</head>

<body>

Hi.

</body>

</html>

HTML Tags• HTML tags are used to mark-up HTML elements • HTML tags are surrounded by the two characters < and > • The surrounding characters are called angle brackets • HTML tags normally come in pairs like <b> and </b> • The first tag in a pair is the start tag, the second tag is the end

tag • The text between the start and end tags is the element content • HTML tags are not case sensitive, <b> means the same as

<B>

The <html> tag<html>

<head>


</head>

<body>

Hi.

</body>

</html>

The <html> tag is the container for the entire web page

The <body> tag<html>

<head>


</head>

<body>

Hi.

</body>

</html>

The <body> tag contains all the visual aspects of the page:

additional tags and content

The <head> tag<html>

<head>


</head>

<body>

Hi.

</body>

</html>

The <head> tag contains metadata, information about the web

page: the title, the author, the language that the document is in

The <title> tag<html>

<head>


</head>

<body>

Hi.

</body>

</html>

The <title> tag is used to give the page a clear, descriptive,

identifying title which is also used as the Bookmark / Favorites

description in the browser

HTML element and attributes<tag1 attr1=value attr2=value />

<tag2 attr1=value attr2=value ></tag2>

Examples:<b>This text is bold</b>

<img src=“picture.gif” width=“50px” height=“25px” />

<br />

<hr />

<tagName attr1=value attr2=value > . . . </tagName>

Element name Attribute name Attribute value

starting tag closing tag

The basic types of attributesColor

#RRGGBB colorName rgb(r,g,b)

#FF0000 red rgb(255,0,0)

#0000FF blue rgb(0,0,255)

width, height, size

width=100px

width=100%

width=10cm

Header’s tagstitle

<title>Page title</title>

Meta - You can control how a page is indexed by search engines using meta

tags

Author

<meta name="Author" content=“FirstName LastName“ >

Description

<meta name=“description” content=“…….“ >

Keywords

<meta name="keywords" content=“DHTML, JavaScript, CSS, Web Development, programming”>

Redirect

<meta http-equiv="refresh” content="5; url=http://www.aua.am">

…

HTML Tags: Headings<h1 align="left">This is a heading H1 </h1>

<h2 align="center">This is a heading H2 </h2>

<h3 align="right">This is a heading H3 </h3>

<h4>This is a heading H4 </h4>



HTML Tags: ParagraphsParagraph - the paragraph tag gives the browser instructions to display the text in a paragraph with a

blank line separating it from other text or graphics

<p>This is a paragraph</p>

<p>This is another paragraph</p>

HTML Tags: Line BreaksLine Breaks <br /> - goes to the next line

<p>This <br /> is a para<br />graph with line breaks</p>

HTML Tags: Horizontal RuleFollowing this line is a horizontal rule.

<hr />

Preceding this line is a horizontal rule.

HTML Tags: Preformatted Tag<pre> and </pre> displays text as formatted

• Displays text spacing “as-is”• Use only when absolutely necessary or there is no other way

to display text in the correct format; ascii graphics is an example

HTML Tags: Style tags<b>This is Bold...</b> <br />

<i>This is Italic...</i> <br />

<tt>This is Typewriter...</tt> <br />

<i><b>This is Bold AND Italic</b></i> <br />

<b><i>And So is This</i></b> <br />

<code>Code</code> <br />

<small>This is Small</small> <br />

<big>This is Big</big> <br />

HTML Tags: Lists• Ordered lists - numbered

• Unordered lists - bulleted

• Other lists (not covered here)• directory• menu• definition

Ordered Lists• <ol> and </ol> tags used

• <li> and </li> - list item tags

• Example:<ol> <li>Item One</li><br> <li>Item Two</li><p></ol>

• List items listed with numbers in front

Ordered Lists - Example

<ol>

<li>Item One</li><br />

<li>Item Two</li>

<li>Item Three</li>

<li>Item Four</li>

<li>Item Five</li>

</ol>

Unordered Lists• <ul> and </ul> tags used

• <li> and </li> - list item tags

• Example:<ul> <li>Item One</li><br> <li>Item Two</li><p></ul>

• List items listed with bullets

Unordered Lists - Example<ul>

<li>

Original Trek

<ul>

<li>Spock</li>

<li>Sulu</li>

</ul>

</li>

<li>

Next Generation

<ul>

<li>Riker</li>

<li>Troi</li>

</ul>

</li>

</ul>

HTML Tags: Images• Image source tag - link to a graphic/image

• <img src=“URL”>

• <img src=“URL” align=top>alignment can be top, bottom, middle

• <img src=“URL” alt=“***”>

• <img src=“URL” height=### width=###>

Image Example

<img align=“left” src=http://coe.aua.am/images/top-small.jpg title="COE Logo">College of Engineering Logo</img>

HTML Tags: Image Map<map name="r1">

<area shape=“rect“ coords="367,90 432,134" href="route01A.html“ />

<area shape="rect“ coords="327,113 366,175" href="route01B.html“ />

<area shape="rect“ coords="273,96 305,146" href="route01C.html“ />

...

</map>

HTML Tags: Anchor / Link1. <a href="url">Text to be displayed</a>

<a href="http://www.yahoo.com" target="_blank"> Yahoo </a>

2. <a href="../folder2/example2.html" target="_blank"> Example 2 </a>

3. Function<a href = "javascript:functionName();">. . .</a>

4. Send mail<A href=“mailto:[email protected]?subject=Hi&Body=Email%20body”> Click me to send an email

</A>

Link Example<a href="http://www.aua.am/">AUA Website</a> contains information about the <b>American University of Armenia</b>

Image as Link Example<a href="http://en.wikipedia.org/wiki/Barack_Obama">

<img src="http://www.podcastingnews.com/content/wp-content/uploads/2008/06/barack-obama1.jpg" title="The man" />

</a>

Mailto ExampleWould you like to send some e-mail

to <a href="mailto:[email protected]">

David Gevorkyan</a>? Do so now!

HTML Tags: Escape Characters&lt less than <br />

&gt greater than <br />

&amp ampersand <br />

&copy copyright <br />

Input<input type=button value="click me" onclick="alert('Hello!')">

<input type=text value="Text" onchange="alert(this.value.length)" size=20

maxlength=55>

<input type=checkbox checked id=chk1 onclick="alert(this.id)">

<input type=hidden name=var1 value=“”>

<input type=file name=“file1”>

<input type=password name=“password” >

<input type=radio name=“radioName” value=“rad1”>

<input type=radio name=“radioName” value=“rad2” checked>

<input type=image name=“myimage” src=“pic.gif”>

<input type=reset name=“reset”>

<input type=submit name=“mysubmit”>

Table1.

<table border=“1”>

<tr>

<td>a</td>

<td>b</td>

<td>c</td>

</tr>

<tr>

<td>d</td>

<td>e</td>

<td>f</td>

</tr>

</table>

Table (cont.)2. rowspan

<table border”1”>

<tr>

<td>item 1</td>

<td rowspan=2>item 2</td>

<td>item 3</td>

</tr>

<tr>

<td>item 4</td>

<td>item 5</td>

</tr>

</table>

3. colspan

<table>

<tr><td>item 1</td><td colspan=2>item 2</td></tr>

<tr><td>item 3</td><td>item 4</td><td>item 5</td></tr>

</table>

Eventsonload (body, frame)

onunload (body, frame)

onclick

ondblclick

onmousedown

onmouseup

onmouseover

onmousemove

onmouseout

onfocus (input, textarea)

onblur (input, textarea)

onkeypress

onkeydown

onkeyup

onsubmit (form)

onreset (form)

onselect (input, textarea)

onchange (input, textarea, select)

<input type=“button" value=“Click Me“

onclick="alert(‘Button Clicked’)">

Web site design tips• Carry a theme through your pages

• consistent themes help provide context

• Don’t add a link every time a common phrase appears• Your pages will look like Christmas trees and will be

impossible to read

• Consider a “Return to Home Page” link on every page

• Try to keep logos < 500 or so pixels wide• Good examples: Yahoo, Oracle, Ebay

WT Homework 1

Design your personal web site using material

learned. Make sure to use images, styles, tables,

links.

Due: April 12

References

• HTML Tutorial: http://w3schools.com/html/default.asp• HTTP: http://www.w3.org/Protocols/• Web Server: http://en.wikipedia.org/wiki/Web_server• Web Browser: http://en.wikipedia.org/wiki/Web_browser

Lecture 1 by David Gevorkyan. Outline Introduction to Internet Introduction to WWW Web Servers Web...

Documents

Transcript of Lecture 1 by David Gevorkyan. Outline Introduction to Internet Introduction to WWW Web Servers Web...