The document discusses the basics of the internet and web programming. It describes how the internet works using protocols like IP, DNS, HTTP and how websites are accessed. It then covers web programming concepts like HTML, CSS, servers, clients and scripting languages and provides examples of common HTML tags and CSS properties.
2. 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.
3. 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.
4. 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).
5. 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?
6. 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.
7.
8. 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)?
9.
10. 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.
11. 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.
12.
13. 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.
14. 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>
15. 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?
16. 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
17. 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>
18. 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.
19. 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.
20. 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;”>
21. 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}
22. 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; }
23. 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.