Unit1 Web Essentials

lOMoARcPSD|32743422
Unit1
Web essentials (Anna University)
Scan to open on Studocu
Studocu is not sponsored or endorsed by any college or university

Downloaded by Vaishnavi R (drkvaish88@gmail.com)
lOMoARcPSD|32743422
IT 3401 WEB ESSENTIALS UNIT 1
UNIT I WEBSITE BASICS

Internet Overview - Fundamental computer network concepts - Web Protocols - URL –
Domain Name- Web Browsers and Web Servers- Working principle of a Website –
Creating a Website - Client-side and server-side scripting
1. INTERNET OVERVIEW
• Website - A website is a set of related web pages typically served from a single
web server.
• Internet: The Internet is a collection of computers around the world connected to
each other via high speed series of networks.
• World Wide Web (WWW): The World Wide Web – or Web consists of lot of files
and documents that are stored on the computers and written in some form of Hyper Text
Markup Language (HTML).
• Servers: The computers that store the files are called servers because they can serve
requests from many users at the same time.
• Browsers: A Web browser is a program that displays Web pages and other
documents on the web. Examples: Internet explorer, Firefox, Google Chrome etc.
• The Internet is a vast, electronic network connecting many millions of computers
from every corner of the world. The Internet is a global network of networks.
• The Internet is a publicly-accessible network that consists of millions of smaller

domestic, academic, business, and government networks
• The internet is a participative medium. Anybody can publish information or create
new services. The internet is a cooperative endeavor - no organization is in charge of the
internet.
Figure 2 :Components of computer

lOMoARcPSD|32743422
The following components are essential for an internet connection:

Computer, Connection - Phone Line, Cable, DSL, Wireless, Modem, Network Software -
TCP/IP, Application Software - Web Browser, Email, etc and Internet Service Provider
(ISP).
1.1 Evolution of Internet
The concept of Internet was originated in 1969 and has undergone several technological
& infrastructural changes:
 The origin of Internet devised from the concept of Advanced Research Project
Agency Network (ARPANET). ARPANET was developed by United States
Department of Defense.
 Basic purpose of ARPANET was to provide communication among the various
bodies of government.
 In 1972, the ARPANET spread over the globe with 23 nodes located at different
countries and thus known as Internet.
 By the time, with invention of new technologies such as TCP/IP protocols, DNS,
WWW, browsers, scripting languages etc, Internet provided a medium to
publish and access information over the web.
Packet Switching
• One of the primary goals for ARPANET was to allow multiple users to send and
receive information simultaneously over the same communications paths (e.g.,
phone lines).
• The network operated with a technique called packet switching, in which digital
data was sent in small bundles called packets.
• The network was designed to operate without centralized control.
• If a portion of the network failed, the remaining working portions would still
route packets from senders to receivers over alternative paths for reliability.
TCP/IP
• The protocol (i.e., set of rules) for communicating over the ARPANET is known as
TCP—the Transmission Control Protocol.
• TCP ensured that messages were properly routed from sender to receiver and that they
arrived intact.
• As the Internet evolved, organizations worldwide were implementing their own
networks for both intra-organization and inter-organization communications
• One challenge was to get these different networks to communicate. ARPA
accomplished this with the development of IP—the Internet Protocol, truly creating
a network of networks, the current architecture of the Internet.
• The combined set of protocols is now commonly called TCP/IP.
• Each computer on the Internet has a unique IP address.
• The current IP standard is Internet Protocol version 4 (IPv4), has been in use since
1984 and the next-generation Internet Protocol, IPv6, is just starting to be deployed.

lOMoARcPSD|32743422
Explosive Growth
• Initially, Internet use was limited to universities and research institutions; then the
military began using it intensively.
• Eventually, the government decided to allow access to the Internet for
commercial purposes.
• Businesses realized that they could offer new and better services to their clients,
so they started spending vast amounts of money to develop and enhance the
Internet.
• This generated competition among suppliers to meet this demand.
• The result is that bandwidth (i.e., the information-carrying capacity).
World Wide Web, HTML, HTTP
• The World Wide Web allows computer users to execute web-based applications
and to locate and view multimedia-based documents on almost any subject over
the Internet. The technology for sharing information via hyperlinked text
documents are called as HyperTextMarkup Language (HTML).
• Hypertext Transfer Protocol (HTTP)—a communications protocol used to
send information over the web.
URL (Uniform Resource Locator) specifies the address (i.e., location) of the web page
displayed in the browser window.
HTTPS
• URLs of websites that handle private information, such as credit card numbers,
often begin with https://, the abbreviation for Hypertext Transfer Protocol
Secure (HTTPS).
• HTTPS is the standard for transferring encrypted data on the web.
2. FUNDAMENTAL COMPUTER NETWORK CONCEPTS
A computer network comprises two or more computers that are connected—either by
cables (wired) or WiFi (wireless)—with the purpose of transmitting, exchanging, or
sharing data and resources.
Computer network types
Most common and widely used computer network types:
LAN (local area network): A LAN connects computers over a relatively short distance,
allowing them to share data, files, and resources. For example, a LAN may connect all
the computers in an office building, school, or hospital.
WLAN (wireless local area network): A WLAN is just like a LAN but connections
between devices on the network are made wirelessly.
WAN (wide area network): WAN connects computers over a wide area, such as from
region to region or even continent to continent. The internet is the largest WAN,
connecting billions of computers worldwide.
MAN (metropolitan area network): MANs are typically larger than LANs but smaller
than WANs. Cities and government entities typically own and manage MANs.

lOMoARcPSD|32743422
PAN (personal area network): A PAN serves one person. For example, if you have an
iPhone and a Mac, set up a PAN that shares and syncs content—text messages, emails,
photos, and more—across both devices.
SAN (storage area network): A SAN is a specialized network that provides access to
block-level storage—shared network or cloud storage.
VPN (virtual private network): A VPN establishes an encrypted channel that keeps a
user’s identity and access credentials, as well as any data transferred, inaccessible to
hackers.
The following are some common terms to know when discussing computer networking:
• IP address: An IP address is a unique number assigned to every device connected to
a network that uses the Internet Protocol for communication.
• Nodes: A node is a connection point inside a network that can receive, send, create, or
store data.
• Routers: A router is a physical or virtual device that sends information contained in
data packets between networks.
• Switches: A switch is a device that connects other devices and manages node-to-node
communication within a network, ensuring data packets reach their ultimate destination.
The three main types of switching are as follows:
Circuit switching, which establishes a dedicated communication path between nodes in a
network.
Packet switching involves breaking down data into independent components called
packets which, because of their small size, make fewer demands on the network.
Message switching sends a message from the source node, traveling from switch to
switch until it reaches its destination node.
• Ports: A port identifies a specific connection between network devices. Each port is
identified by a number
• Network cable types: The most common network cable types are Ethernet twisted
pair, coaxial, and fiber optic.
• Internet Service Provider (ISP): The Internet itself is decentralized-no one is
completely responsible or has total control; however, the connection to the Internet is partly
controlled by an Internet Service Provider (ISP). Example for ISP: Reliance, Airtel, Idea
(IIN) etc.
• An ISP is a company that provides individuals and organizations access to the
internet and other related services.

lOMoARcPSD|32743422
Network topology
Network topology refers to how the nodes and links in a network are arranged. There are
a number of topologies but the most common are bus, ring, star, and mesh:
• A bus network topology is when every network node is directly connected to a main
cable.
• In a ring topology, nodes are connected in a loop, so each device has exactly two
neighbors. Adjacent pairs are connected directly; non-adjacent pairs are connected
indirectly through multiple nodes.
• In a star network topology, all nodes are connected to a single, central hub and each
node is indirectly connected through that hub.
A mesh topology is defined by overlapping connections between nodes.
3. BASIC INTERNET PROTOCOLS
• The Internet Protocol specifies both the high-level behavior of software implementing
the protocol and the low-level details.

lOMoARcPSD|32743422
• Low level details include specific fields of information, the order in which these fields
will appear, the number of bits in each field, and how these bits should be interpreted.
TCP/IP
The Transmission Control Protocol (TCP) is a transport protocol that is used on top of IP to
ensure reliable transmission of packets.
• TCP and IP are actually two different protocols.
• The reason that they are often treated as one is that the bulk of the services
associate with the Internet—e-mail, Web browsing, file downloads, accessing
remote databases—are built on top of both the TCP and IP protocols.
• But in reality, only one of these protocols—IP, the Internet Protocol—is
fundamental to the definition of the Internet.
• A key element of IP is the IP address, which is simply a 32-bit number.
• IP addresses are normally written as a sequence of four decimal numbers
separated by periods (called “dots”), as in 192.0.34.166.
• The function of IP software is to transfer data from one computer (the source) to
another computer (the destination).
• When an application on the source computer wants to send information to a
destination, the application calls IP software on the source machine
• The sequence of computers that a packet travels through from source to
destination is known as its route.
• IP software also adds some error detection information (a checksum) to each
packet it creates, so that if a packet is corrupted during transmission, this can
usually be detected by the recipient.
TCP, the Transmission Control Protocol, is a higher-level protocol that extends IP to
provide additional functionality, including reliable communication based on the concept
of a connection.
It is designed to send packets across the internet and ensure the successful delivery of
data and messages over networks.
It is a communications standard that enables application programs and computing
devices to exchange messages over a network.
Since TCP is the protocol used most commonly on top of IP, the Internet protocol stack
is sometimes referred to as TCP/IP.

lOMoARcPSD|32743422
Features of TCP
• Stream data transfer
• Reliability
• Efficient flow control
• Full duplex operation
• Multiplexing
TCP Services
• Stream delivery service
• Sending and receiving buffers
• Bytes and segments
• Full duplex service
• connection oriented service
• Reliable service
Working of TCP
• In TCP, the connection is established by using three-way handshaking.
• The client sends the segment with its sequence number.
• The server, sends its segment with its own sequence number as well as the
acknowledgement sequence.
• When the client receives the acknowledgment of its segment, then it sends the
acknowledgment to the server.
• In this way, the connection is established between the client and the server.

lOMoARcPSD|32743422
• Source port: contains the source port address, which is 16 bits.

• Destination port: contains the destination port address, which is 16 bits.
• Sequence number: This field contains the sequence number of data.
• Acknowledgment number: When the ACK flag is set, then this contains the next
sequence number of the data byte and works as an acknowledgment for the previous data
received.
• HLEN: It specifies the length of the header indicated by the 4-byte words in the
header.
• Reserved: It is a 4-bit field reserved for future use, and by default, all are set to zero.
Flags
There are six control bits or flags:
URG: It represents an urgent pointer. If it is set, then the data is processed urgently.
ACK: If the ACK is set to 0, then it means that the data packet does not contain an
acknowledgment.
PSH: If this field is set, then it requests the receiving device to push the data to the
receiving application without buffering it.
RST: If it is set, then it requests to restart a connection.
SYN: It is used to establish a connection between the hosts.
FIN: It is used to release a connection, and no further data exchange will happen.
• What is IP?

lOMoARcPSD|32743422
• The Internet Protocol (IP) is the method for sending data from one device to another
across the internet.
• The main function of the internet protocol is to provide addressing to the hosts,
encapsulating the data into a packet structure, and routing the data from source to the
destination across one or more IP networks
An internet protocol defines two things:
Format of IP packet
IP Addressing system
What is an IP packet?
• Before an IP packet is sent over the network, two major components are added in an
IP packet, i.e., header and a payload.
An IP header contains lots of information about the IP packet which includes:

• Source IP address: The source is the one who is sending the data.
• Destination IP address: The destination is a host that receives the data from the
sender.
• TTL (Time to Live): The number of hops occurs before the packet gets discarded.
• Transport protocol: The transport protocol used by the internet protocol, either it can
be TCP or UDP.
• Payload: Payload is the data that is to be transported.
• ToS field assigns the priority of the IP packet.
• Padding - to make sure that the IP packet header has a length that is a multiple of
32 bits.
• The four layers of the TCP/IP model are as follows:

lOMoARcPSD|32743422
• Datalink layer: The datalink layer defines how data should be sent, handles the
physical act of sending and receiving data, and is responsible for transmitting data between
applications or devices on a network.
• Internet layer: The internet layer is responsible for sending packets from a network
and controlling their movement across a network to ensure they reach their destination.
• Transport layer: The transport layer is responsible for providing a solid and reliable
data connection between the original application or device and its intended destination.
• Application layer: The application layer refers to programs that need TCP/IP to help
them communicate with each other. It combines the session, presentation, and application
layers of the OSI model.
What is UDP/IP?
• The User Datagram Protocol, or UDP, is another widely used transport protocol. It's
faster than TCP, but it is also less reliable.
• UDP (User Datagram Protocol) is an alternative protocol to TCP that also builds on
IP. The main feature is the port concept. It does not provide the two-way connection or
guaranteed delivery of TCP.
• Its advantage over TCP is speed for simple tasks.
• UDP does not make sure all packets are delivered and in order, and it doesn't establish
a connection before beginning or receiving transmissions.
• UDP is connectionless and unreliable protocol. It doesn’t require making a connection
with the host to exchange data. Since UDP is unreliable protocol, there is no mechanism for
ensuring that data sent is received. UDP transmits the data in form of a datagram.
• UDP provides protocol port used i.e. UDP message contains both source and
destination port number, that makes it possible for UDP software at the destination to
deliver the message to correct application program.
10

lOMoARcPSD|32743422
Higher-Level Protocols
• UDP is like calling a number and leaving a message rather than actually speaking
with the intended recipient. DNS is the Internet version of directory assistance,
associating names with numbers. TCP is roughly equivalent to placing a phone
call and having the other party answer.
• SMTP and FTP are two examples of widely used higher-level protocols that are
used to communicate over TCP connections.
• SMTP supports transfer of e-mail between different e-mail servers, while FTP is
used for transferring files between machines.
• Another higher-level TCP protocol, Telnet, is used to execute commands typed
into one computer on a remote computer.
• The primary TCP-based protocol used for communication between web servers
and browsers is called the Hypertext Transport Protocol (HTTP).
File Transfer Protocol
• FTP is used to copy files from one host to another.
• FTP creates two processes such as Control Process and Data Transfer Process at
both ends i.e. at client as well as at server.
• FTP establishes two different connections: one is for data transfer and other is for
control information.
• Control connection is made between control processes while Data Connection is
made between data transfer process.
• FTP uses port 21 for the control connection and Port 20 for the data connection.
HTTP
• HTTP stands for Hypertext Transfer Protocol. It is the standard protocol for
transferring web pages (and their content) across the Internet.
• When you browse a web page, the URL might be preceded by http://.
• This is telling the web browser to use HTTP to transfer the data.
11

lOMoARcPSD|32743422
HTTPS
• HTTPS stands for Hypertext Transfer Protocol over Secure Socket Layer. HTTPS is
used primarily on web pages that ask you to provide personal or sensitive information (such
as a password or your credit card details).
4. URLs
An http-scheme URL consists of a number of pieces. In order to show the main
possibilities, let’s consider the following example URL:
http://www.example.org:56789/a/b/c.txt?t=win&s=chess#para5
• The portion of an http URL following the :// string and before the next slash (/) is
known as the authority of the URL. It consists of either a fully qualified domain
name or an IP address of an Internet web server, optionally followed by a colon
(:) and a port number. As indicated earlier, if the port number is omitted, then a
TCP connection to port 80 is implied.
• In this example, the authority is www.example.org:56789 and consists of the
fully qualified domain name www.example.org followed by the port number
56789.
• The portion from the slash following the authority through the question mark is
called the path of the URL.
• Following the path there may be a question mark followed by information up to a
number sign (#).
• The information between but not including the question mark and number sign is
the query portion of the URL, and in general a string of the form shown is known
as a query string.
• The query portion of the example URL is t=win&s=chess.
• Originally, the query portion of a URL was intended to pass search terms to a
web server.
• So in this example, it might be that the user is seeking a resource with a title
containing the string “win” that is related to the subject “chess.”
• The final optional part of an http-scheme URL—the portion following but not
including the number sign—is known as the fragment of the URL, and the string
contained in the fragment is known as a fragment identifier.
5. DOMAIN NAME SERVICE

• One Internet application is the Domain Name Service (DNS).
• While every device on the Internet has an IP address such as 192.0.34.166, it is
easier to refer to machines by names, such as www.example.org.
• When a computer on the Internet needs DNS services—for example, to convert a
host name such as www.example.org to a corresponding IP address—it uses the
12

lOMoARcPSD|32743422
UDP software running on its system to send a UDP message to one of these DNS
servers, requesting the IP address.
• The most important parts are highlighted on the URL below (details are provided
in the following sections):
https://nptel.ac.in/courses/106105183
http://www.google.com
The Domain Name System (DNS) converts a domain name into the IP address with which
the computer system wishes to interact. When a user enters the domain name into a
browser, the browser searches for and identifies the proper IP address and then sends the
website associated with that IP address. Domains are divided into second-level domains,
which can be further
divided into subdomains, etc.
E.g., in www.example.com, example is a second-level domain
A host name plus domain name information is called the fully
qualified domain name of the computer
Above, www is the host name, www.example.com is the FQDN
How DNS works?
When you type a URL in the browser, the following steps take place:
• The browser checks for a DNS record to find the corresponding IP address of the
website.
• Once the browser receives the correct IP address, it will build a connection with the
server that matches the IP address to transfer information.
• The browser sends an HTTP request to the server.
• The server handles the request and sends back a response.
• The browser displays the HTML content.
DNS Hierarchy
• The DNS hierarchy is a tree hierarchy.
• It starts with the top-level domains and then extends to subdomains.
• TLD examples include .com, .net, .org, .edu, .mil, .gov, .us, .ca, .info, .biz, and .tv.
Consider the following for our domain name: https://www.atlantic.net
• HTTPS:// – is the protocol
• www – is the subdomain
• Atlantic – is the domain name
• .net – is the top-level domain (TLD)
• Atlantic.Net – The root domain includes the domain name and top-level domain
(TLD)
• The .com domain is reserved for companies . Country domains such as au—Australia,
uk—the United Kingdom, us—the United States, or ca—Canada.
6. WEB BROWSERS AND WEB SERVERS
13

lOMoARcPSD|32743422
Web Client
• A web client is software that accesses a web server by sending an HTTP request
message and processing the resulting HTTP response.
• Web browsers running on desktop or laptop computers are the most common form of
web client software.
• In general, any web client that is designed to directly support user access to web
servers is known as a user agent.
Basic Browser Functions
• The window of a typical modern browser is split into several rectangular regions,
most of which are known as bars.
• The primary region is the client area, which displays a document.
• The title bar displays the title.
• The menu bar contains a set of dropdown menus.
• The browser’s Navigation toolbar contains standard push-button controls that allow
the user to return to a previously viewed web page (Back), Forward , Reload, Stop, and
print the client area of the window (Print).
• Status bar displays messages and icons related to the status of the browser.
• A primary task of any browser is to make HTTP requests on behalf of the browser
user.
• If a user types an http-scheme URL in Mozilla’s Location bar, the browser must
perform a number of tasks:
• 1. Reformat the URL entered as a valid HTTP request message.
• 2. If the server is specified using a host name (rather than an IP address), use DNS to
convert this name to the appropriate IP address.
• 3. Establish a TCP connection using the IP address of the specified web server.
• 4. Send the HTTP request over the TCP connection and wait for the server’s response.
• 5. Display the document contained in the response. If the document is not a plain-text
document but instead is written in a language such as HTML, this involves rendering the
document.
WEB SERVERS
Server Features
The primary feature of every web server is to accept HTTP requests from web clients
and return an appropriate resource in the HTTP response. Even this basic functionality
involves a number of steps :
1. The server calls on TCP software and waits for connection requests to one or more
ports.
14

lOMoARcPSD|32743422
2. When a connection request is received, the server establishes the TCP connection and
receives an HTTP request.
3. It creates an HTTP response that contains the file in the body of the response message.
4. The server normally logs information about the request and response.
7. WORKING PRINCIPLES OF A WEBSITE

Working of Web
The web physically consists of the following :
 The personal computer at which you sit to the web.
 A web browser that is the software installed on your computer, which helps you to
serf/browse the web.
 An internet connection which is provided by an ISP and which will connects you to
the internet to reach to any website.
 A web server that is the computer on which a website is hosted.
 Routers and Switches which are the combination of software and hardware who
takes your request and pass to appropriate web server.
 The Web is a kind of client-server system where your computer is a client and the
remote computers that store electronics files are the servers.
How the Web Works
 When you enter something like https://stxavierscatholiccollege.org/ the request goes to
the special computer (it may be single or multiple computers, but request will be go to
one of these computers) on the internet which is known as DNS – Domain Name
Servers. The routers and switches routes all the requests. The DNS keep tables of
machine names and their IP addresses. When you type https://
stxavierscatholiccollege.org/ it gets translated into a number. This number identifies the
computer that serves the Technical Publication website for you.
 To view any page on the web, you must start the process by requesting a page using
your web browser. The browser asks a DNS to translate the requested domain name into
an IP address. The request then sent by the browser to the server for the page you want,
using a standard call Hypertext Transfer Protocol (HTTP).
 It is essential for the server that it should constantly be the internet and always ready to
serve pages to visitors. When a server receives a request, it looks for the requested
document and returns that document to the web browser. Meanwhile the server logs the
client’s IP address, the requested document, and the date and time it requested. These
information varies server to server.
 When any request made for the web page actually it requires web browser to request
more than one file from the web server like HTML page, any images, style sheets, and
other resources used in the web page. Each of these files including the main page needs
a URL to identify each item, and this item is sent by the web server to the web
browser. Then the web browser collects all this information and displays them in the
form of web page.
Figure: Working of web
15

lOMoARcPSD|32743422
How does the web work?
 Web servers and web browsers communicate via HTTP

 HTTP ensures that all parts of the web page are delivered
 Web browser decides how these items are displayed
The backbone of the web is the network of webservers across the world. These are really just
computers that have a particular type of software running on them - software that knows how to
speak the HTTP protocol and knows which information stored on the computer should be made
accessible through the web.
It's possible to turn almost any computer into a webserver by downloading and installing server
software (the most popular is Apache, see http://www.apache.org/), though it's not recommended
unless you know what you're doing!
Figure : How HTTP works: retrieving a web page
The HyperText Transfer Protocol (HTTP) is actually quite simple. The web browser (or client)
makes a request of a webpage to the server, and the webserver passes the page back to the browser
(see Figure 2.1, “How HTTP works: retrieving a web page” . More cleverly, it also passes back any
images, sounds or other media items back to the browser too.
The web browser is also particularly clever in the way it displays what it retrieves. Web pages
are written in HTML, and the browser knows how to display these correctly, whether you have a
huge flat screen or a tiny screen on a handheld device or phone. The HTML language gives the
browser hints on how to display things, and the browser decides the final layout itself.
8. CREATING A WEBSITE
Steps for creating a website:
Create a blueprint for your website
o It should contain:
 More information about website.
 Plans for every pages
 From contact us to major aim pages
o All must be given in detail.
o Determine the goal of your website
o Pinpoint your target audience.
o Determine what you want your website visitors to do once they land on your site.
16

lOMoARcPSD|32743422
o Figure out the navigation through your site.

o Create a list of keywords.
Planning the Page Layouts
The following are common steps to planning your specific page layouts.
a. Consider Other Sites that are Like Yours
It may be helpful to research other sites that are like the one you will be creating, either
in content or desired style or both.
b. Determine your Color Scheme
Make a list of the major colors that will be included in your site. These include colors for
the page body, the heading and other fonts, and background colors of the sectioning
elements.
c. Plan your Home Page
Either on paper, a dry erase board, or in a graphic design program like Photoshop, plan
your website's typical page (usually the home page of your site). Be sure to mark off the
rectangular quandrants or zones that the page can be divided into and give those zones
names. Those zones will be the divs and their names will be their IDs. This layout is
commonly referred to as a wireframe.
Below is an example of an artistic wireframe:
17

lOMoARcPSD|32743422
In addition to the sectioning element names, effective Wireframes may include
 The width and/or height of sectioning elements, especially the container width,
amount of margin and padding of the sectioning elements, colors and/or the color numbers
for the color scheme
18

lOMoARcPSD|32743422
You should create one wireframe that represents all of the pages of your site. If your site
has alternate layout, then you may need to create more than one wireframe to represent all
the pages. In other words, if most of the pages of your site are in a two-column layout, then
one wireframe should be created for those page, but if there are a few pages on your site that
employ a four-column layout, then it may be necessary to create an additional wireframe
layout for those pages.
Structure
This means coding in the actual HTML of all the sectioning elements. You should:
1. Create and save an HTML file, typically for your home page first, which you'll likely
name index.html.
2. Type in the div tags and other HTML5 sectioning tags if you are using them. Just like
they are your children, give all your divs unique names (using the ID attribute in the
HTML). For example, if the upper left most div will be the container for your logo or
banner, then give it id="logo" as an HTML attribute.
3. You may want to give your divs some minimal styling at this point, such as giving
them height, width, and type of positioning (relative, absolute, or fixed). This would have to
be done in the CSS and is NOT recommended at this stage (See "Part 4 -- Style" below).
4. Double-check the accuracy of your coding to ensure that all your tags are nested
properly, closed, and include proper grammar.
The term cascading refers to which of these takes precedence when it comes to styling a
page, a line, or any other element on the page. Usually, the closer to the HTML element, the
more power it has. This means that inline style will trump embedded style which will trump
linked style. However, the rules that are followed regarding precedence are long and
complex, and inline style is not necessarily the best choice in most cases.
The goal for most Web designers is to avoid using inline and embedded style, and move
the style information to a separate .css file so that it can be linked to many Web pages. By
linking multiple Web pages to one .css file, style changes can be made more quickly to the
entire website.
Create the structure of your home (or first) page. This means insert the div tags on your
home page. Just like they are your children, give all your divs unique names (using the ID
attribute in the HTML). For example, if the upper left most div will be the container for
your logo, then give it id="logo" as an HTML attribute.
You may want to give your divs some minimal styling at this point, such as giving them
height, width, z-index, and a type of positioning (relative, absolute, or fixed). To do this
part, create ID selectors in the CSS that correspond to their ID attributes in the HTML.
With Dreamweaver, it's easiest and more efficient to add the divs by hand-coding them
in Code view.
Here's an example of a structure that goes with that simple wireframe drawing above:
19

lOMoARcPSD|32743422
Content
At this stage, you should add all the content to the structure you created in Part 2.
Content includes:
1. All the text for the page, including the title text, and any meta keywords or
descriptions used for SEO.
2. The navigation bar text which should be in an unordered list.
3. All the images including the logo and social media icons, and the image alt text.
4. Placeholders for images that don't currently exist, but that will be added to the page
later or for slideshows and other JavaScript animation you'll add later.
5. Video and audio files, if applicable.
6. Flash animation .swf files or placeholders for those if they are banner ads, if
applicable.
Add text or pictures into the divs as appropriate. Also, add a navigational bar (menu
buttons) using an unordered list. Give the navbar ul an ID attribute in the HTML. Call it
something like "navlist".
With Dreamweaver, adding text is easiest to do in Design view, and you can copy and
paste text from other Web pages and documents into Design view and Dreamweaver
automatically creates the underlying code. Images are usually easier to paste into the divs in
Code view since you can't see them in Design view if they are unstyled.
All content should be added prior to proceeding to Part 4 -- Style. If you do not add all
the content before your begin styling the page, it is likely you'll have to go back and forth
between Part 3 and Part 4, making the work take twice as long (at least) to create the page.
Style the Page with CSS
After adding content, you can create the CSS, and you should save the .css file and
establish a link to your HTML immediately.
The best order to doing your style is debatable, however, the following order makes
sense and is a good model to follow:
20

lOMoARcPSD|32743422
1. Import a reset.css stylesheet into your main stylesheet if you plan to use one.
2. Tag selectors (these are going to apply the bulk or general rule of your style)
following this order:
 (asterisk), if applicable
 body
 h1
 h2
 Other heading tags h3-h6, if applicable
 p
 ul, ol and li
 a and related pseudo-class (and remembering to keep it in order of a:link,
a:visited, a:hover, a:active)
 div or span tags that you plan to style in bulk
 em, strong
 any other tags that you plan to use frequently and which will require style
3. ID selectors or sectioning element tag selectors that make up your structure. Place
these in order as they appear from top to bottom, left to right in the HTML
4. Descendant selectors. These should be placed after the div ID selectors or sectioning
tag selectors they belong to.
5. Class selectors (best to use as exceptions, highlights and emphases on the selectors
you created earlier). Give these unique and memorable names that indicate their functional
use and NOT their style. A good name is ".copyright" if it will be applied to the paragraph
that contains the copyright text. A bad name is ".redfont" since you may decide that the
paragraph you are using .redfont for as emphasis will be changed to a different color later.
6. Create the CSS3 media query sections of your stylesheet as relevant for a
responsive/ mobile friendly design.
With Dreamweaver, it's faster and more efficient to use the CSS Styles panel to create
your selectors. Unless you have a really good memory for property names, it's best to find
them in the CSS Rule Definition dialogue box in Dreamweaver.
Once you have a well structured and well styled home page, you can make copies of it
for your other pages, then change the content on the new pages.
Scripting
This part is about putting JavaScript on the page for a rotating image slideshow,
connecting a form to a server-side script like PHP, etc. This tends to be complicated since it
may involve programming although frequently the code already exists out there so it may
just be a matter of code-lifting and placing it properly within the HTML.
It's likely you'll want to do this on a page-by-page basis later, however, if you know the
site is going to have the same script on every page (like for a local search engine, Google
analytics code, an HTML5 shiv, etc.) then do this on your template page at this stage.
Include client-side scripts (JavaScript), Spry (or other AJAX), and set your form actions to
whatever server-side script files they will be referring to. You may also want to create and
test the server-side scripting files at this point especially if they provide password protection
or a site search feature to your home page.
21

lOMoARcPSD|32743422
Once you have a well structured and well styled home page, you can make copies of it
for your other pages. Then all you'll have to do is make changes the content. Voila!
Testing & Revision
Be sure to do some or all of the following tests or research on your site to determine its
effectiveness and usability:
1. Test the navigation bar and other links throughout the site.
2. Usability tests with multiple people including those unfamiliar with the site who are
in the target audience.
3. Performance tests include speed and server accessing benchmarks.
4. Analytics and who the visitors are and where they are coming from.
5. Search engine ranking.
After testing, you will likely have to revise the website to improve its effectiveness.
9. CLIENT-SIDE AND SERVER-SIDE SCRIPTING

The scripts may be created in two ways: on the client side or the server side, where the
server-side scripts are processed on a server. In contrast, client-side scripting needs
browsers to execute scripts on the client system.
Client side scripting
 A client-side script is a small program that is embedded into a web page. It is
processed within the client browser instead of the web server.
 Client side scripting is a process in which the code along with HTML web page is
sent to the client by the server.
 The client side script downloads at the client end from the server along with the
HTML web page it is embedded in. The web browser interprets and executes the
code and then displays the results on the monitor.
Example: JavaScript, VBScript, HTML, CSS
Application of Client side Scripting
• To retrieve data from web browser or user’s screen.
• Used in the field of online games.
• To customize the web page without reloading the page.
• To create ad banners that interact with the user, rather than simply displaying
graphics.
• It is used for validation purpose. If the user enters incorrect credentials on the login
page, the web page displays an error message on the client machine without submitting it to
the web server.
Features of Client-side Scripting
There are various features of client-side scripting. Some main features of the client-side
scripting are as follows:
 It is intended to execute code on which a web browser runs, and the results of the
inputs are delivered to an accessible user.
 Client-side scripting is used to validate programs and functionality based on the
request.
 The client does not include any contact with the server in client-side scripting; the
only interaction is receiving the requested data.
22

lOMoARcPSD|32743422
Server side scripting

Server-side scripting is a programming technique for creating code that may run software on
the server side. In other words, server-side scripting is any scripting method that may
operate on a web server.
Server-side scripting creates a communication channel between a server and a client.
Previously, CGI (Common Gateway Interface) scripts were used to implement server-side
scripting, and CGI was created to execute scripts written in computer languages such as C+
+ or Perl on websites.
The server-side is made up of three parts: the database, the server, the APIs, and the
backend web software written in the server-side scripting language. When a browser
requests a page with server-side scripting, the web server evaluates the script before
delivering the page to the browser. In this case, script processing may entail collecting
information from a database, performing simple computations, or selecting the relevant
material to be shown on the client end. The output is provided to the web browser when the
script is processed. The web server hides the scripts from the end user until the content is
delivered, making the data and source code safer.
Example : Python, PHP and Ruby.
Features of Server-side Scripting
There are various features of server-side scripting. Some main features of the server-side
scripting are as follows:
 It is connected with data access, error handling, and data processing speed.
 It is processed and interacts with the server.
 Using a highly integrated programming language makes it more secure than client-
side scripting.
23

lOMoARcPSD|32743422
Features Server-side Scripting Client-side Scripting

The main purpose of this
The main function of this scripting
Primary scripting is to give the
is to manipulate and grant access to
Function requested output to the end-
the requested database.
user.
It is employed at the backend, It is utilized at the front end,
Uses where the source code is invisible which users may view through
or concealed on the client side. the browser.
It doesn't need any server
Processing It needs server interaction.
interaction.
It is less secure than server-side
It is more secure while working on scripting due to the code
Security
a web app. accessibility offered to the
client.
It executes on the remote
Running It executes on the web server.
computer system.
It depends on the user's browser
Dependability It doesn't depend on the client.
version.
It offers complete access to the file
It doesn't offer any access to the
File Access that is stored in the web database
files on the web servers.
server.
The user is given access to the
Code It enables the backend developer to
written code after confirming
Allowance hide the source code from the user.
their requirements.
It happens when the browser
It only responds after the user processes all of the codes and
Occurrence
begins the browsing request. then acts according to the
client's needs.
It may effectively customize
Affect It may reduce the server load. web pages and offer dynamic
websites.
The server-side scripting
Languages programming languages, such as Its programming languages are
Involved PHP, ColdFusion, Python, ASP.net, HTML, CSS, and JavaScript.
Java, C++, Ruby, C#, etc.
24

Unit1 Web Essentials

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Unit1 Web Essentials

Uploaded by

Copyright:

Available Formats

lOMoARcPSD|32743422

Web essentials (Anna University)

Scan to open on Studocu

Studocu is not sponsored or endorsed by any college or university

IT 3401 WEB ESSENTIALS UNIT 1

UNIT I WEBSITE BASICS

• The Internet is a publicly-accessible network that consists of millions of smaller

Figure 2 :Components of computer

Downloaded by Vaishnavi R (drkvaish88@gmail.com)

IT 3401 WEB ESSENTIALS UNIT 1

The following components are essential for an internet connection:

Downloaded by Vaishnavi R (drkvaish88@gmail.com)

IT 3401 WEB ESSENTIALS UNIT 1

Downloaded by Vaishnavi R (drkvaish88@gmail.com)

IT 3401 WEB ESSENTIALS UNIT 1

Downloaded by Vaishnavi R (drkvaish88@gmail.com)

IT 3401 WEB ESSENTIALS UNIT 1

Downloaded by Vaishnavi R (drkvaish88@gmail.com)

IT 3401 WEB ESSENTIALS UNIT 1

Downloaded by Vaishnavi R (drkvaish88@gmail.com)

IT 3401 WEB ESSENTIALS UNIT 1

Downloaded by Vaishnavi R (drkvaish88@gmail.com)

IT 3401 WEB ESSENTIALS UNIT 1

• Source port: contains the source port address, which is 16 bits.

Downloaded by Vaishnavi R (drkvaish88@gmail.com)

IT 3401 WEB ESSENTIALS UNIT 1

An IP header contains lots of information about the IP packet which includes:

Downloaded by Vaishnavi R (drkvaish88@gmail.com)

IT 3401 WEB ESSENTIALS UNIT 1

Downloaded by Vaishnavi R (drkvaish88@gmail.com)

IT 3401 WEB ESSENTIALS UNIT 1

Downloaded by Vaishnavi R (drkvaish88@gmail.com)

IT 3401 WEB ESSENTIALS UNIT 1

5. DOMAIN NAME SERVICE

Downloaded by Vaishnavi R (drkvaish88@gmail.com)

IT 3401 WEB ESSENTIALS UNIT 1

6. WEB BROWSERS AND WEB SERVERS

Downloaded by Vaishnavi R (drkvaish88@gmail.com)

IT 3401 WEB ESSENTIALS UNIT 1

Downloaded by Vaishnavi R (drkvaish88@gmail.com)

IT 3401 WEB ESSENTIALS UNIT 1

7. WORKING PRINCIPLES OF A WEBSITE

Figure: Working of web

Downloaded by Vaishnavi R (drkvaish88@gmail.com)

IT 3401 WEB ESSENTIALS UNIT 1

How does the web work?

 Web servers and web browsers communicate via HTTP

Figure : How HTTP works: retrieving a web page

Create a blueprint for your website

Downloaded by Vaishnavi R (drkvaish88@gmail.com)

IT 3401 WEB ESSENTIALS UNIT 1

o Figure out the navigation through your site.

Planning the Page Layouts

a. Consider Other Sites that are Like Yours

b. Determine your Color Scheme

c. Plan your Home Page

Below is an example of an artistic wireframe:

Downloaded by Vaishnavi R (drkvaish88@gmail.com)

IT 3401 WEB ESSENTIALS UNIT 1

In addition to the sectioning element names, effective Wireframes may include

Downloaded by Vaishnavi R (drkvaish88@gmail.com)

IT 3401 WEB ESSENTIALS UNIT 1

Downloaded by Vaishnavi R (drkvaish88@gmail.com)

IT 3401 WEB ESSENTIALS UNIT 1