UNIT II : DESIGN AND DEVELOP WEB PAGES

2.1 Basic web technologies

Web Technology refers to the various tools and techniques that are utilized in the
process of communication between different types of devices over the Internet.
Web development is basically the tasks associated with developing websites for
hosting via intranet or internet. The web development process involves web design,
web content development and client-side/server-side scripting and network security
configuration.
Internet :
The Internet is a global system of interconnected computer networks that use the
standard Internet Protocol Suite (TCP/IP) to serve billions of users worldwide. It is
a network of networks that consists of millions of private, public academic, business,
and government networks.

The World Wide Web, abbreviated as WWW and commonly known as the Web, is
a system of interlinked hypertext documents accessed via the Internet. With a web
browser, one can view web pages that may contain text, images, videos, and other
multimedia and navigate between them via hyperlinks.
Website :
Website is a collection of various pages written in HTML markup language. There
are millions of websites available on the web. Each page available on the website is
called a web page and first page of any website is called home page for that site.

Web Technology can be classified into the following sections:

 World Wide Web (WWW): The World Wide Web is based on several different technologies: Web
browsers, Hypertext Markup Language (HTML), and Hypertext Transfer Protocol (HTTP).
 Web Browser: The web browser is an application software to explore www (World Wide Web). It
provides an interface between the server and the client and requests to the server for web documents and
services.
 Web Server: Web server is a program which processes the network requests of the users and serves them
with files that create web pages. This exchange takes place using Hypertext Transfer Protocol (HTTP).
 Web Pages: A webpage is a digital document that is linked to the World Wide Web and viewable by
anyone connected to the internet has a web browser.
 Web Development: Web development refers to the building, creating, and maintaining of websites. It
includes aspects such as web design, web publishing, web programming, and database management. It is
the creation of an application that works over the internet i.e. websites.

Uniform Resource Locator (URL)

URL stands for Uniform Resource Locator, and is used to specify addresses on the
World Wide Web. A URL is the fundamental network identification for any resource
connected to the web (e.g., hypertext pages, images, and sound files).
For example
http://www.tutorialspoint.com/internet_technology/index.htm
where,
 http is the protocol.
 tutorialspoint.com is the server name.
 index.htm is the file name.
Web Browser :
Web Browsers are software installed on client machine to access the Web.Browsers
request information and then they show us in the way we can understand. Think of
them as the interpreters of the web.
Here are the most popular ones .
Google Chrome — Currently, the most popular browser brought to you by Google.
Safari - Apple's web browser.
Firefox — Open-source browser supported by the Mozilla Foundation.
Internet Explorer - Microsoft's browser.

WEB Servers :
To publish pages on the Web, you need a web server. A web server is the program
that runs on a computer and is responsible for replying to web browser requests for
files. You need a web server to publish documents on the Web. When you use a
browser to request a page on a website, that browser makes a web connection to a
server using the HTTP protocol. The browser then formats the information it got
from the server. Server accepts the connection, sends the contents of the requested
files and then closes.
Every Web server that is connected to the Internet is given a unique address made
up of a series of four numbers between 0 and 256 separated by periods. For example
68.178.157.132. When you register a Web address, also known as a domain name,
such ås " Google.com".
Protocols :
In computing, a protocol is a set of rules which is used by computers to communicate
with each other across a network. A protocol is a convention or standard that controls
or enables the connection, communication, and data transfer between computing
endpoints.
Client Server Model :
The Client-server model is a distributed application structure that divides the task or
workload between the providers of a resource (servers), and service requesters
(clients).
In the client-server architecture, when the client computer sends a request for
webpage to the server through the internet, the server accepts the requested process
and delivers the webpage requested back to the client. Clients do not share any of
their resources.
Examples of Client-Server Model are : Email, World Wide Web, etc.

What is the SEO technique?

Search engine optimization (SEO) is the art and science of getting pages to rank
higher in search engines such as Google. Because search is one of the main ways in
which people discover content online, ranking higher in search engines can lead
to an increase in traffic to a website.
A search engine is a software system that is designed to carry out web searches. They
search the World Wide Web in a systematic way for particular information specified
in a textual web search query. Some important search engines are Google, yahoo,
bing.
Search engine optimization (SEO) is the process of improving the quality and
quantity of website traffic to a website or a web page from search engines. SEO
targets unpaid traffic (known as "natural" or "organic" results) rather than direct
traffic or paid traffic. Unpaid traffic may originate from different kinds of searches,
including image search, video search, academic search, news search, and industry
specific vertical search engines. SEO is performed because a website will receive
more visitors from a search engine when websites rank higher on the search engine
results page (SERP).
Understanding how search engines work is only the first step of the process in
improving a site's search rankings. Actually improving a site's rank involves
leveraging various SEO techniques to optimize the site for search
Keyword research - Keyword research is often the starting point for SEO and
involves looking at what keywords a site is already ranking for, what keywords
competitors rank for, and what other keywords potential customers are searching
for Identifying the terms that searchers use in Google search and other search
engines provide direction on what existing content can be optimized and what new
content can be created.
Content marketing:- Once potential keywords are identified, content marketing
comes into play. This can be updating existing content or creating brand new pieces
of content.
Link building - Because links from external websites (called "backlinks" in SEO
parlance) are one of the core ranking factors in Google and other major search
engines, obtaining high-quality backlinks is one of the main levers that SEO has.
This can involve promoting good content, reaching out to other websites and
building relationships with webmasters, submitting websites to relevant web
directories, and getting press to attract links from other websites.
On-page optimization - In addition to off-page factors such as links, improving
the actual structure of the page can have tremendous benefits for SEO, and is a factor
that is entirely in the control of the webmaster. Common on-page optimization
techniques include optimizing the URL of the page to incorporate keywords,
updating the title tag of the page to use relevant search terns, and using the all
attribute to describe images.
Site architecture optimization - External links are not the only thing that matters
for SEO, internal links (the links within one's own website) play a large role in SEO
as well. Thus a engine optimizer can improve a site's SEO by making sure key pages
are being linked to and that relevant anchor text is being used in those links to help
improve a page's relevance for specific terms.
Semantic markup - Another SEO strategy thal SEO experts utilize is optimizing a
website's semantic markup. Semantic markup (such as Schema.org) is used to
describe the meaning behind the content on a page, such as helping to identify who
the author of a piece of content.
Domain Names :
Every computer on the Internet has an address which is unique in nature. It is a string
of numbers and is referred to as Ip address. To communicate with each other,
computers identify another computer via its IP address.' It is represented in either
dotted decimal notation or in binary decimal notation. Ip address like "
172.16.122.204 is difficult for humans to remember this IP address. Thus to find the
location on the Internet easily, DNS was invented. DNS stands for Domain Name
System.
Domain Name is a symbolic string associated with an IP address. Some examples
of domain name are "www.google.com" 'fiwtv.yahoo.com".
There are several domain names available; some of them are generic such as com,
edu, gov, net etc., while some country level domain names such as au, in, za, us
etc.
Domain Name System (DNS) :
DNS resolves names to numbers, to be more specific it resolves domain names to IP
addresses. So if you type in a web address in your web browser, DNS will resolve
the name to a number because the only things computers know are numbers.
 Figure 2.2
Working :
If you wanted to go to a certain website you would open up your web browser and
type in domain name of that website. let us use google.com. Now technically you
really do not have to type in google.com to retrieve Google web page, you can just
type in IP address instead if you already know what google's IP address is, but since
we are not accustomed to memorizing and dealing with numbers, especially when
there are millions of websites on internet, we can just type in domain name instead
and let DNS verify it to an IP address for us.
2.2 Creating Web Pages with HTML5 - Static Web Pages :
Static web pages are often HTML documents stored as files in the file system and
made available by the web server over HTTP.
Advantages of a Static Website :
Provide improved security over dynamic websites.
Improved performance for end users compared to dynamic websites.
Fewer or no dependencies on systems such as databases or other
application servers.
Disadvantage of a Static Website :
Dynamic functionality must be performed on the client side.
Introduction HTML :
HTML stands for Hyper Text Markup Language, and it is the most widely used
language to write Web Pages.
Hypertext refers to the way in which Web pages (HTML documents) are linked
together. Thus, the link available on a webpage is called Hypertext.
HTML Docmnent Structure .
A typical HTML document will have the following structure. It contains mainly two
parts head part and body part. Head part contains the title of the document and body
part contains the actual contents of the document.

< html >

< head >
Document header related tags
< /head >

< body
Document body related tags
< /body >
< /html >
HTML Tags :
HTML is a markup language and makes use of various tags to format the content.
These tags are enclosed within angle braces < Tag Name > . Except few tags,
most of the tags have their corresponding closing tags. For examples < html > its
closing tag </html> and < body > tag has its closing tag </body > tag etc.
HTML document uses the following tags :
Sr.No. Tags & their description
1 <!DOCTYPE.ee>
This tag defines the document type and HTML version.
2 < html >
This tag encloses the complete HTML document and mainly comprises
of document header which is represented by
< head > ... < /head> and document body which is represented by
< body > < /body> tags.
3
< head > This tag represents the document's header which can keep
other HTML tags like < title>, < link > etc.

4 < title >

The < title > tag is used inside the < head > tag to mention the document
title.
5 < body >
This tag represents the document's body which keeps other HTML tags
like <hl>, <div>, <p> etc.
6 < H1 >
This tag represents the heading.
7 <P>
This tag represents a paragraph.
HTML Headings :
HTML headings are titles or subtitles that you want to display on a webpage.
HTML headings are defined with the <hl > to <h6> tags. defines the most
important heading. <h6> defines the least important heading.
Example
<hl > Heading1</hl >
<h2> Heading2</h2 >
<h3> Heading3</h3 >
<h4> Heading4</h4 >
<h5> Heading5 </h5 >
< h6> Heading6</h6 >
Example
<hl style=' font-size : 60px;" > Heading 1</h1 >
HTML Links :
A webpage can contain various links that take you directly to other pages
and even specific parts of a given page. These links are known as
hyperlinks.
Hyperlinks allow visitors to navigate between Web sites by clicking on
words, phrases, and images. Thus you can create hyperlinks using text or
images available on a webpage.
The HTML <a> tag defines a hyperlink. It has the following syntax
<a >link text</a>
IMAGES
Images can improve the design and the appearance of a web page. The
HTML <img> tag is used to embed an image in a web page. Images are not
technically ilaserted into a web page; images are linked to web pages. The <img>
tag creates a holding space for the referenced image.
The < img> tag has two required attributes .
src - Specifies the path to the image
alt - Specifies an alternate text for the image