25
Introduction to Web -Rajat Shah -Soumya Ghosh
| Date post: | 26-Jun-2015 |
| Category: |
Documents |
| Upload: | rajat-shah |
| View: | 152 times |
| Download: | 0 times |
Introduction to Web
-Rajat Shah-Soumya Ghosh
What is Internet and how it works.◦ DNS (Domain Name System)◦ IP address◦ Protocols: HTTP◦ World Wide Web (WWW)
Web Programming◦ HTML◦ CSS◦ Basics of Server-side Scripting.
Topics to be covered:
Its is vast network of inter connected computers that uses a specific set of rules called Internet Protocols (abbreviated as IP) to communicate.
Provides the physical backbone for a number of interesting applications.
Internet
Is a part of the Internet "designed to allow easier navigation through the use of graphical user interfaces and hypertext links between different addresses“
Uses the HTTP protocol. Global set of documents, images and other
resources, logically interrelated by hyperlinks and referenced with Uniform Resource Locators(URLs).
Web Wide Web
IP: Internet Protocol◦ Responsible for labelling individual packets with the
source address and destination address of two computers exchanging information over a network.
◦ IP Address:◦ Eg.: IPv4: 172.16.254.1 (32 bits) ◦ IPv6: 2001:db8:0:1234:0::567:8:1 (128 bits)◦ IP can be static or dynamic.
• HTTP: Hyper Text Transfer Protocol• Is the language Web browsers and Server use to
communicate using IP.• Standard which describes how a browser makes a
request to the web server program.• HTTPS?
General Terminology
DNS (Domain Name System)◦ Responsible for converting the hostnames to the IP Address.◦ For example, the domain name www.example.com
translates to the addresses 192.0.43.10 (IPv4) and 2620:0:2d0:200::10 (IPv6)
◦ Name Server may query various website while resolving the address of the host name.
• UR(Uniform Resource Locator)
◦ Eg. http://www.vnit.ac.in/lecture/Introduction_to_web.html
ISP (Internet Service Provider): ◦ Are those private companies which provide internet
connection. We get connected to internet via our ISP.
General Terminology
Parts of a URL
Client:◦ Content or service requesters.◦ Web browsers such as Mozilla, Chrome are clients.◦ Functionalities?
Server: ◦ The provider of a resource or service.◦ High speed computers with large hard disk capacity.◦ A server machine is a host that is running one or more server programs
which share their resources with clients.◦ Functionalities?
Proxy servers:◦ Acts as an intermediary for requests from clients seeking resources from server.◦ Eg: The proxy server we user in our hostels : 172.31.16.10◦ How does it speed up browsing?
How it differs from Peer to Peer (P2P)?
Client - Server Model
A typical Client-Server Interaction
To view a web page from your browser, the following sequence happens:◦ You either type an address (URL) into your "Address Bar"
or click on a hyperlink.◦ Your browser sends a request to your ISP server asking
for the page.◦ Your ISP server using DNS looks in a huge database of
internet addresses (IP) and finds the exact host server which houses the website in question, then sends that host server a request for the page.
◦ The host server sends the requested page to your ISP server.
◦ Your ISP sends the page to your browser and you see it displayed on your screen.
Summing up
Commonly used languages:◦ HTML: Defines the structure of a web page.◦ CSS: Defines the styling and layout of contents of
a webpage.◦ Javascript: Client side scripting language. It adds
interactivity to a web page.◦ PHP (Hypertext Preprocessor): Server side
scripting language.◦ SQL (Structured Query Language): Language
used to query databases.
Web Development
HTML stands for HyperText Markup Language.
HTML is not a programming language, it is a markup language.
Is the core technology in which all Web pages are written.
HTML tags are interpreted by a web browser and composed into visible or audible webpages.
HTML
HTML tags are case-insensitive. The majority of HTML tags do require both an open and a close tag. All HTML documents start with <html> tag and end with </html>
An example of a simple HTML document:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<!—Contains title, meta tags, links to external scripts(CSS, Javascript) -->
<TITLE>My first HTML document</TITLE>
</HEAD>
<BODY>
<!—Contains the content of the web page-->
<P>Hello world!
</BODY>
</HTML>
HTML Tags
HTML headings are defined with the <h1> to <h6> tags. The lower the number, the larger the heading size.
HTML paragraphs are defined with the <p> tag. Most browsers automatically put a line break and space after a </p> tags.
HTML links are defined with the <a> called anchor tag.◦ Absolute reference:
<a href=“http://vnit.ac.in”>VNIT</a>◦ Relative reference:
<a href=“/contacts”>VNIT, Contacts</a>Target attribute?
General HTML Tags
HTML elements can have attributes Attributes provide additional information about
an element Attributes are always specified in the start tag Attributes come in name/value pairs
like: name="value" Example:
<a href="http://vnit.ac.in">This is a link</a>Here the attribute name is href and its value is
http://vnit.ac.in
HTML Attributes
Images can be added to a web page using img or through CSS.◦ Eg.:
<img src=“abc.jpg” alt=“A image” width=“300px” height=“200px”/>
◦ Use of alt, src , width and height attributes? With HTML5, we can directly add a audio or
video files into a web page◦ Eg.: <audio controls="controls">
<source src="audio file.mp3" type="audio/mpeg"> </audio>
Multimedia content
Tables are an excellent way to organize and display information on a page. ◦ defined using the <table> tag.◦ A table is divided into rows with the <tr> tag,
and each row is divided into data cells using the <td> tag. The letters td stand for “table data,” which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, and so on.
Tables
HTML forms are used to collect different kinds of user input. A form is an area that can contain form elements.
Form elements are elements that allow the user to enter information in a form (like text fields, text area fields, drop-down menus, radio buttons, check boxes, and so on).
Tags used:◦ Form, Input, textarea, select, etc.
Form elements
Language used to design a webpage.
Styles enable you to define a consistent 'look' for your documents by describing once how headings, paragraphs, quotes, etc. should be displayed.
Latest version is CSS3.
Can be inline, in page, external. Inline:
◦ Use style attribute. Multiple styles separated by semi-colon.◦ Always defined in opening tag.◦ <body style=“background-color:green;”>
CSS (Cascading Style Sheet)
In page :◦ Use style tag. Multiple styles separated by semi-
colon.<style type=“text/css”>
body{ background-color:green;
Color: red;
}</style>
External:◦ a separate CSS file referenced from the document
<link href="path/to/file.css" rel="stylesheet">◦ Style sheet syntax is made up of three parts:
selector {property: value}
CSS
Class:◦ When multiple elements in a web page have similar
properties, we define class of them. Class attribute is used. A single dot (.) is used to define property of a class. Eg.:
.class_name{ color:blue; }
Id:◦ Specifies a unique id for an element.
Id attribute is used. A single hash (#) is used to define property of a class. Eg.:
#id_name{ color:blue; }
Class and Id
Hand coding, use Nodepad++. Use a WYSIWYG editor like Adobe,
dreamweaver. Use online services like Blogspot, Google
site, Wordpress, etc. Use Content Management System (CMS)
like Wordpress, Joomla, etc.
Ways to develop a website
http://w3schools.com
Further Reading
