Fundamentals of Web Development

UNIT-I
Syllabus:Introduction: Internet vs Web, Web Servers, Webpage Addresses (URL’s)
The Anatomy of webpage; Introduction to Web technologies, HTML5 and its
Essentials, New Features of HTML5.
Internet:
In simplest terms, the Internet is a global network comprised of smaller networks
that are interconnected using standardized communication protocols.
The Internet standards describe a framework known as the Internet protocol suite.
This model divides methods into a layered system of protocols.
These layers are as follows:
1. Application layer (highest) – concerned with the data(URL, type, etc.). This is
where HTTP, HTTPS, etc., comes in.
2. Transport layer – responsible for end-to-end communication over a network.
3. Network layer – provides data route.
The Internet provides a variety of information and communication facilities;
contains forums, databases, email, hypertext, etc. It consists of private, public,
academic, business, and government networks of local to global scope, linked by a
broad array of electronic, wireless, and optical networking technologies.
The World Wide Web:
The Web is the only way to access information through the Internet.
It’s a system of Internet servers that support specially formatted documents.
The documents are formatted in a mark-up language called HTML, or “Hyper Text
Mark-up Language”, which supports a number of features including links and
multimedia.
These documents are interlinked using hypertext links and are accessible via the
Internet.
To link hypertext to the Internet, we need:
1. The markup language, i.e., HTML.
2. The transfer protocol, e.g., HTTP.
3. Uniform Resource Locator (URL), the address of the resource.
We access the Web using Web browsers.
Difference between Web and Internet:
Internet Web
It is also known as the Network of The Web is a model for sharing
Networks. information using the Internet.
The Internet is a way of transporting The protocol used by the web is HTTP.
information between devices.
Accessible in a variety of ways. The Web is accessed by the Web
Browser.
Network protocols are used to transport Accesses documents and online sites
data. through browsers.
The Internet is the network of networks The Web is a way to access information
and the network allows to exchange of through the Internet.
data between two or more computers.

URI:
URI stands for ‘Uniform Resource Identifier’. A URI can be a name, locator, or both
for an online resource whereas a URL is just the locator.
URLs are a subset of URIs. A URL is a human-readable text that was designed to
replace the numbers (IP addresses) that computers use to communicate with
servers.
A URL consists of a protocol, domain name, and path (which includes the specific
subfolder structure where a page is located) like-
1. Protocol – HTTP or HTTPS.
2. WebSiteName – geeksforgeeks, google etc.
3. topLevelDomain- .com, .edu, .in etc.
4. path- specific folders and/or subfolders that are on a given website.
Web Server
The term web server can refer to hardware or software, or both of them working
together.
1. On the hardware side, a web server is a computer that stores web server
software and a website's component files (for example, HTML documents,
images, CSS stylesheets, and JavaScript files). A web server connects to the
Internet and supports physical data interchange with other devices connected
to the web.
2. On the software side, a web server includes several parts that control how
web user’s access hosted files. This is an HTTP server. An HTTP server is
software that understands URLs (web addresses) and HTTP (the protocol your
browser uses to view webpages). An HTTP server can be accessed through the
domain names of the websites it stores, and it delivers the content of these
hosted websites to the end user's device.
At the most basic level, whenever a browser needs a file that is hosted on a web
server, the browser requests the file via HTTP. When the request reaches the correct
(hardware) web server, the (software) HTTP server accepts the request, finds the
requested document, and sends it back to the browser, also through HTTP.
 Fig. Web Server
To publish a website, you need either a static or a dynamic web server.
A static web server, or stack, consists of a computer (hardware) with an HTTP server
(software). We call it "static" because the server sends its hosted files as-is to your
browser.
A dynamic web server consists of a static web server plus extra software, most
commonly an application server and a database. We call it "dynamic" because the
application server updates the hosted files before sending content to your browser
via the HTTP server.
For example, to produce the final webpages you see in the browser, the application
server might fill an HTML template with content from a database. Sites like MDN or
Wikipedia have thousands of webpages. Typically, these kinds of sites are composed
of only a few HTML templates and a giant database, rather than thousands of static
HTML documents. This setup makes it easier to maintain and deliver the content.

The Anatomy of Web Page

 Fig. Anatomy of Web Page
Page Title

The page tile is set using the <title></title> set of tags in the head section of the html
coding. This is the only web page element within the head section of the web page
the visitor will see.
URL (Domain Name)

The URL is the domain name of the website. If the visitor just typed
www.domainname.com they would be taken to the home page of the website.
File Name

File name is the web page file name. It cannot contain any spaces! The file name can
be written as one long name (e.g. basichtmlarticles.htm), with hyphens (e.g. basic-
html-articles.htm, as shown in the image above) or with underscores (e.g.
basic_html_articles.htm).
When you create a web page you have to give it a name. The file name has what is
called an extension at the end of it.
The extension at the end of the file name tells the browser what kind of file it is. A
HTML document would have an extension of .htm or html. If your web page uses a
certain programming language it would have the appropriate extension. e.g. .php is
for the PHP programming language, .asp is for the ASP programming language.
Scroll Bars

Scroll bars are on the right side and bottom of the browser window. If there is a scroll
bar at the bottom (horizontal scroll bar) your web page content is too wide for the
browser window.
A web page layout should be designed so there is no horizontal scroll bar. You need
to test your web page at different resolutions and on different operating systems to
see if the way the page is laid out will result in horizontal scroll bars when viewed at
smaller resolutions or by different operating systems.
One way to avoid this problem is to use a flexible (fluid) design. A flexible design will
adjust to the browser window size. As long as all your elements add up to less than
the browser width there will not be a horizontal scroll bar.
Header

The header is at the very top of the web page. It usually contains a logo for the
website.
Navigation

A website can use a left navigation system, a right navigation system or a navigation
system that spans horizontally right under the header or above the header.
The navigation system of a website has to be consistent throughout the website so
the visitor will learn your navigation system. Changing the navigation system from
page to page is confusing to the visitor and they will get frustrated and leave!
Web Page Content
Web page content includes everything between the <body> and </body> tags. We
have already looked at some of the web page content, the header and navigation
system.
Footer
The footer is the bottom section of the web page.

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. A web
browser is used to access web pages. Web browsers can be defined as programs that
display text, data, pictures, animation, and video on the Internet. Hyperlinked
resources on the World Wide Web can be accessed using software interfaces provided
by Web browsers.
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.
Web Development can be classified into two ways:
 Frontend Development: The part of a website that the user interacts directly is
termed as front end. It is also referred to as the ‘client side’ of the application.
Backend Development: Backend is the server side of a website. It is the part of the
website that users cannot see and interact. It is the portion of software that does not
come in direct contact with the users. It is used to store and arrange data.

Frontend Languages: The front end portion is built by using some languages which are
discussed below:

 HTML: HTML stands for Hypertext Markup Language. It is used to design the
front-end portion of web pages using a markup language. HTML is the
combination of Hypertext and Markup language. Hypertext defines the link
between the web pages. The markup language is used to define the text
documentation within the tag which defines the structure of web pages.
 CSS: Cascading Style Sheets fondly referred to as CSS is a simply designed
language intended to simplify the process of making web pages presentable.
 CSS allows you to apply styles to web pages. More importantly, CSS enables you
to do this independent of the HTML that makes up each web page.
 JavaScript: JavaScript is a famous scripting language used to create magic on
the sites to make the site interactive for the user. It is used to enhancing the
functionality of a website to running cool games and web-based software.
 AJAX: Ajax is an acronym for Asynchronous Javascript and XML. It is used to
communicate with the server without refreshing the web page and thus
increasing the user experience and better performance.
Backend Languages: The back end portion is built by using some languages which are
discussed below:

 PHP: PHP is a server-side scripting language designed specifically for web

development. Since PHP code executed on the server-side, so it is called a
server-side scripting language.
 Node.js: Node.js is an open-source and cross-platform runtime environment for
executing JavaScript code outside a browser. You need to remember that
NodeJS is not a framework, and it’s not a programming language. Most people
are confused and understand it’s a framework or a programming language. We
often use Node.js for building back-end services like APIs like Web App or
Mobile App. It’s used in production by large companies such as Paypal, Uber,
Netflix, Wallmart, and so on.
 Python: Python is a programming language that lets you work quickly and
integrate systems more efficiently.
 Ruby: Ruby is a dynamic, reflective, object-oriented, general-purpose
programming language. Ruby is a pure Object-Oriented language developed by
Yukihiro Matsumoto. Everything in Ruby is an object except the blocks but there
are replacements too for it i.e procs and lambda. The objective of Ruby’s
development was to make it act as a sensible buffer between human
programmers and the underlying computing machinery.
 Java: Java is one of the most popular and widely used programming languages
and platforms. It is highly scalable. Java components are easily available.
 JavaScript: JavaScript can be used as both (front end and back end)
programming.
 Golang: Golang is a procedural and statically typed programming language
having the syntax similar to C programming language. Sometimes it is termed as
Go Programming Language.
 C# :C# is a general-purpose, modern and object-oriented programming
language pronounced as “C sharp”.
 DBMS: The software which is used to manage database is called Database
Management System (DBMS).
Html and its essentials:
HTML stands for HyperTextMarkup Language. It is used to design web pages using a
markup language. HTML is the combination of Hypertext and Markup language.
Hypertext defines the link between the web pages. A markup language is used to
define the text document within tag which defines the structure of web pages. This
language is used to annotate (make notes for the computer) text so that a machine
can understand it and manipulate text accordingly. Most markup languages (e.g.
HTML) are human-readable. The language uses tags to define what manipulation
has to be done on the text.
HTML is a markup language used by the browser to manipulate text, images, and
other content, in order to display it in the required format. HTML was created by
Tim Berners-Lee in 1991. The first-ever version of HTML was HTML 1.0, but the first
standard version was HTML 2.0, published in 1999.
Elements and Tags: HTML uses predefined tags and elements which tell the
browser how to properly display the content. Remember to include closing tags. If
omitted, the browser applies the effect of the opening tag until the end of the

page.
HTML page structure: The basic structure of an HTML page is laid out below. It
contains the essential building-block elements (i.e. doctype declaration, HTML,
head, title, and body elements) upon which all web pages are created.
<DOCTYPE! html>: This is the document type declaration (not technically a tag). It
declares a document as being an HTML document. The doctype declaration is not
case-sensitive.
<html>: This is called the HTML root element. All other elements are contained
within it.
<head>: The head tag contains the “behind the scenes” elements for a webpage.
Elements within the head aren’t visible on the front-end of a webpage. HTML
elements used inside the <head> element include:
 <style>
 <title>
 <base>
 <noscript>
 <script>
 <meta>
 <link>
<body>: The body tag is used to enclose all the visible content of a webpage. In
other words, the body content is what the browser will show on the front-end.
An HTML document can be created using any text editor. Save the text file
using .html or .htm. Once saved as an HTML document, the file can be opened as a
webpage in the browser.
<!DOCTYPE html>
<html>
<head>
<title>Demo Web Page</title>
</head>

<body>
<h1>fundamentals of web development</h1>

<p>A minors subject in computer science and engineering</p>

</body>
</html>
Features of HTML:
 It has introduced new multimedia features which supports audio and video
controls by using <audio> and <video> tags.
 There are new graphics elements including vector graphics and tags.
 Enrich semantic content by including <header><footer>, <article>, <section>
and <figure> are added.
 Drag and Drop- The user can grab an object and drag it further dropping it on a
new location.
 Geo-location services- It helps to locate the geographical location of a client.
 Web storage facility which provides web application methods to store data on
web browser.
 Uses SQL database to store data offline.
 Allows to draw various shapes like triangle, rectangle, circle, etc.
 Capable of handling incorrect syntax.
 Easy DOCTYPE declaration i.e. <!doctype html>
 Easy character encoding i.e. <meta charset=”UTF-8″>
Advantages:
 All browsers supported.
 More device friendly.
 Easy to use and implement.
 HTML 5 in integration with CSS, JavaScript, etc can help build beautiful websites.
Disadvantages:
 Long codes have to be written which is time consuming.
 Only modern browsers support it.
UNIT-II
Fundamentals of HTML, Working with Text, organizing text in HTML, Working with
Links and URLs, Creating Tables, Working with Images, Working with Forms,
Interactive Elements.
The <!DOCTYPE> Declaration
The <!DOCTYPE> declaration represents the document type, and helps browsers to
display web pages correctly.
It must only appear once, at the top of the page (before any HTML tags).
The <!DOCTYPE> declaration is not case sensitive.
The <!DOCTYPE> declaration for HTML5 is:
<!DOCTYPE html>
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading:
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
HTML Paragraphs
HTML paragraphs are defined with the <p> tag:
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML Links
HTML links are defined with the <a> tag:
<a href="https://www.w3schools.com">This is a link</a>
The link's destination is specified in the href attribute.
Attributes are used to provide additional information about HTML elements.
HTML Images
HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), width, and height are provided as
attributes:
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
HTML Elements
The HTML element is everything from the start tag to the end tag:
<tagname>Content goes here...</tagname>
Examples of some HTML elements:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
Start tag Element content

<h1> My First Heading

<p> My first paragraph.

<br> none
HTML Attributes
 All HTML elements can have attributes
 Attributes provide additional information about elements
 Attributes are always specified in the start tag
 Attributes usually come in name/value pairs like: name="value"

The href Attribute

The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the
link goes to:
Example
<a href="https://www.w3schools.com">Visit W3Schools</a>
HTML Links - The target Attribute
By default, the linked page will be displayed in the current browser window. To
change this, you must specify another target for the link.
The target attribute specifies where to open the linked document.
The target attribute can have one of the following values:
 _self - Default. Opens the document in the same window/tab as it was clicked
 _blank - Opens the document in a new window or tab
 _parent - Opens the document in the parent frame
 _top - Opens the document in the full body of the window
<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>
The src Attribute
The <img> tag is used to embed an image in an HTML page. The src attribute
specifies the path to the image to be displayed:
Example
<img src="img_girl.jpg">
Absolute URLs vs. Relative URLs
Both examples above are using an absolute URL (a full web address) in
the href attribute.
A local link (a link to a page within the same website) is specified with a relative
URL (without the "https://www" part):
Example
<h2>Absolute URLs</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>

<h2>Relative URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS Tutorial</a></p>
The width and height Attributes
The <img> tag should also contain the width and height attributes, which specifies
the width and height of the image (in pixels):
Example
<img src="img_girl.jpg" width="500" height="600">
The alt Attribute
The required alt attribute for the <img> tag specifies an alternate text for an image, if
the image for some reason cannot be displayed. This can be due to slow connection,
or an error in the src attribute, or if the user uses a screen reader.
Example
<img src="img_girl.jpg" alt="Girl with a jacket">
The style Attribute
The style attribute is used to add styles to an element, such as color, font, size, and
more.
Example
<p style="color:red;">This is a red paragraph.</p>
The lang Attribute
You should always include the lang attribute inside the <html> tag, to declare the
language of the Web page. This is meant to assist search engines and browsers.
The following example specifies English as the language:
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
Country codes can also be added to the language code in the lang attribute. So, the
first two characters define the language of the HTML page, and the last two
characters define the country.
The following example specifies English as the language and United States as the
country:
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>
The title Attribute
The title attribute defines some extra information about an element.
The value of the title attribute will be displayed as a tooltip when you mouse over
the element:
Example
<p title="I'm a tooltip">This is a paragraph.</p>

Define an HTML Table

A table in HTML consists of table cells inside rows and columns

Example
A simple HTML table:

<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>AlfredsFutterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>

Table Cells
Each table cell is defined by a <td> and a </td> tag.

td stands for table data.

Everything between <td> and </td> are the content of the table cell.

Example
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
</table>

able Rows
Each table row starts with a <tr> and end with a </tr> tag.

tr stands for table row.

Example
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>

able Headers
Sometimes you want your cells to be headers, in those cases use the <th> tag
instead of the <td> tag:

Example
Let the first row be table headers:

<table>
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person 3</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>

Html forms:
An HTML form is used to collect user input. The user input is most often sent to
a server for processing.
The <form> Element
The HTML <form> element is used to create an HTML form for user input:

<form>
.
form elements
.
</form>

The <form> element is a container for different types of input elements, such
as: text fields, checkboxes, radio buttons, submit buttons, etc.

The <input> Element

The HTML <input> element is the most used form element.

An <input> element can be displayed in many ways, depending on

the type attribute.

Here are some examples:

Type Description

<input type="text"> Displays a single-line text input field

<input type="radio"> Displays a radio button (for selecting one of many choices)

<input Displays a checkbox (for selecting zero or more of many

type="checkbox"> choices)

<input Displays a submit button (for submitting the form)

type="submit">
<input Displays a clickable button
type="button">

Text Fields
The <input type="text"> defines a single-line input field for text input.

Example
A form with input fields for text:

<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>

The <label> Element

Notice the use of the <label> element in the example above.

The <label> tag defines a label for many form elements.

The <label> element is useful for screen-reader users, because the screen-
reader will read out loud the label when the user focus on the input element.

The <label> element also help users who have difficulty clicking on very small
regions (such as radio buttons or checkboxes) - because when the user clicks
the text within the <label> element, it toggles the radio button/checkbox.

The for attribute of the <label> tag should be equal to the id attribute of
the <input> element to bind them together.

Radio Buttons
The <input type="radio"> defines a radio button.

Radio buttons let a user select ONE of a limited number of choices.

Example
A form with radio buttons:

<p>Choose your favorite Web language:</p>

<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaSc
ript">
<label for="javascript">JavaScript</label>
</form>

Checkboxes
The <input type="checkbox"> defines a checkbox.

Checkboxes let a user select ZERO or MORE options of a limited number of

choices.

Example
A form with checkboxes:

<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>

The Submit Button

The <input type="submit"> defines a button for submitting the form data to a
form-handler.

The form-handler is typically a file on the server with a script for processing
input data.

The form-handler is specified in the form's action attribute.

Example
A form with a submit button:

<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>

The Name Attribute for <input>

Notice that each input field must have a name attribute to be submitted.

If the name attribute is omitted, the value of the input field will not be sent at
all.

Example
This example will not submit the value of the "First name" input field:

<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" value="John"><br><br>
<input type="submit" value="Submit">
</form>