Introduction to web designing

 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.

 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.

 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).

 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?

 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.

 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)?

 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.

 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.

 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 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 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?

 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

 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>

 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.

 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.

 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;”>

 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}

 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; }

 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.

 http://w3schools.com

-Rajat Shah
rajat.shah200792@gmail.com

Introduction to web designing

More Related Content

What's hot (20)

Viewers also liked (15)

Similar to Introduction to web designing (20)

Introduction to web designing