INTRODUCTION TO WEB TECHNOLOGIES

What happens when you use www.aydin.edu.tr in your browser?

How do we see the page above?

www (Web): 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. Web is a way of accessing information over the medium of the Internet. Web is an
information-sharing model that is built on top of the Internet.

1
From Standalone Computer to Internet

Standalone Computer

Developed an Application. So what? Who is going to use it. Then share it.

A Simple Network with two Computers

2
Personal Area Network (PAN)

o A network arranged within an individual person, typically within a range of 10 meters.

o Used for connecting the computer devices of personal use.
o Thomas Zimmerman was the first research scientist to bring the idea of the Personal Area
Network.
o Personal computer devices that are used to develop the personal area network are the
laptop, mobile phones, media player and play stations.

Local Area Network (LAN)

o A group of computers connected to each other in a small area such as building, office.
o LAN is used for connecting two or more personal computers through a communication
medium such as twisted pair, coaxial cable, etc.
o It is less costly as it is built with inexpensive hardware such as hubs, network adapters, and
ethernet cables.
o The data is transferred at an extremely faster rate in Local Area Network.
o Local Area Network provides higher security.

3
Wide Area Network (WAN)

o A network that extends over a large geographical area such as states or countries.
o Quite bigger network than the LAN.
o Is not limited to a single location, it spans over a large geographical area through a telephone
line, fibre optic cable or satellite links.

o The internet is one of the biggest WAN in the world.

Internet

4
5
Internet is a short form of the technical term internetwork, the result of interconnecting computer
networks with special gateways or routers. The Internet is also often referred to as the Net. The
Internet is a massive network of networks, a networking infrastructure. It is a network of networks
that consists of;
▪ private,
▪ public,
▪ academic,
▪ business,
▪ government

networks of local to global scope, linked by a broad array of;

▪ electronic,
▪ wireless,
▪ optical
networking technologies.

Cables in Ocean

It connects millions of computers together globally, forming a network in which any computer can
communicate with any other computer as long as they are both connected to the Internet.
Information that travels over the Internet does so via a variety of rules known as protocols.

6
The Internet carries a vast range of information resources and services, such as the;
▪ interlinked hypertext documents and applications of the World Wide Web (WWW),
▪ electronic mail,
▪ telephony,
▪ file sharing.

The Internet is a globally distributed network comprising many voluntarily interconnected

autonomous networks. It operates without a central governing body. However, to maintain
interoperability, all technical and policy aspects of the underlying core infrastructure and the principal
name spaces are administered by the Internet Corporation for Assigned Names and Numbers
(ICANN).

The history of the Internet starts in the 1950s and 1960s with the development of computers. This
began with point-to-point communication between mainframe computers and terminals, expanded
to point-to-point connections between computers.

Since the mid-1990s the Internet has had a drastic impact on culture and commerce, including the
rise of near instant communication by electronic mail, instant messaging, Voice over Internet
Protocol (VoIP) "phone calls", two-way interactive video calls, and the World Wide Web with
its discussion forums, blogs, social networking, and online shopping sites.

7
How do the Computers communicate?
(Rules for Communicating between Computers → Protocol)
Protocol, in computer science, a set of rules or procedures for transmitting data between electronic
devices, such as computers.

In order for computers to exchange information, there must be a preexisting agreement as to how
the information will be structured and how each side will send and receive it. Without a protocol, a
transmitting computer, for example, could be sending its data in 8-bit packets while the receiving
computer might expect the data in 16-bit packets.

Protocols are established by international or industrywide organizations. Perhaps the most

important computer protocol is OSI (Open Systems Interconnection), a set of guidelines
for implementing networking communications between computers.
Among the most important sets of Internet protocols are:
▪ TCP/IP (Transmission Control Protocol/Internet Protocol),
▪ HTTP (HyperText Transmission Protocol)
▪ SMTP (Simple Mail Transfer Protocol)
▪ FTP
▪ …

World Wide Web (WWW)

WWW is a system of interlinked hypertext documents accessed via the Internet. The World Wide
Web, or simply Web, is a way of accessing information over the medium of the Internet. It is an
information-sharing model that is built on top of the Internet. The Web uses the HTTP protocol,
only one of the languages spoken over the Internet, to transmit data. Web services, which use
HTTP to allow applications to communicate in order to exchange business logic, use the Web to
share information. The Web also utilizes browsers, such as Chrome or Firefox, to access Web
documents called Web pages that are linked to each other via hyperlinks. Web documents also
contain graphics, sounds, text and video.

The Web is one of the services that runs on the Internet. It is a collection of textual documents and
other resources, linked by hyperlinks and URLs, transmitted by web browsers and web servers. The
Web is just one of the ways that information can be disseminated over the Internet, so the Web is
just a portion of the Internet. In short, the Web can be thought of as an application "running" on the
Internet.

8
What is Hypertext?
Hypertext is a text document which has links in it. Hypertext provides the links between different documents
and different document types. In a hypertext document, links from one place in the document to another are
included with the text. By selecting a link, you are able to jump immediately to another part of the document
or even to a different document. In the WWW, links can go not only from one document to another, but from
one computer to another

Standarts For HTML

The World Wide Web Consortium (W3C) and The Web Hypertext Application Technology Working
Group (WHATWG) are the communities that played important role in developing standards for www.

9
On 28 May 2019, the W3C announced that WHATWG would be the sole publisher of the HTML and
DOM standards. The W3C and WHATWG had been publishing competing standards since 2012.
While the W3C standard was identical to the WHATWG in 2007 the standards have since
progressively diverged due to different design decisions. The WHATWG "Living Standard" had been
the de facto web standard for some time. html.spec.whatwg.org/multipage/

Web Page
A web page is a document or information resource that is suitable for the World Wide Web and can
be accessed through a web browser and displayed on a monitor or mobile device. This information
is usually in HTML format, and may provide navigation to other web pages via hypertext links. Web
pages frequently contains other resources such as style sheets, scripts and images into their final
presentation. Web pages may be retrieved from a local computer or from a remote web server. The
web server may restrict access only to a private network, e.g. a corporate intranet, or it may publish
pages on the World Wide Web. Web pages are requested and served from web servers using
Hypertext Transfer Protocol (HTTP). Web pages may consist of files of static text and other content
stored within the web server's file system (static web pages), or may be constructed by server-side
software when they are requested (dynamic web pages). Client-side scripting can make web pages
more responsive to user input once on the client browser.

10
Web Site
A website or simply site, is a collection of related web pages containing images, videos or other
digital assets. A website is hosted on at least one web server, accessible via a network such as the
Internet or a private local area network through an Internet address known as a Uniform Resource
Locator. All publicly accessible websites collectively constitute the World Wide Web. Web sites can
be static or dynamic.

Domain Names, DNS, and URLs

▪ IP addresses are not convenient for users to remember easily. So an IP address can be
represented by a natural language convention called a domain name.

o Domain name system (DNS) translates domain names into IP addresses. DNS is the
“phone book” for the Internet, it maps between host names and IP addresses.

▪ URL is an acronym for Uniform Resource Locator and is a reference (an address) to a resource
on the Internet. A URL has two main components:

▪ Protocol identifier: For the URL http://example.com , the protocol identifier is http.

▪ Resource name: For the URL http://example.com , the resource name is example.com.

HTTP
▪ HTTP is based on the request-response communication model:

▪ Client sends a request

▪ Server sends a response

▪ HTTP is a stateless protocol: where the protocol does not require the server to remember
anything about the client between requests.
▪ Normally implemented over a TCP connection (80 is standard port number for HTTP)
▪ The following is the typical browser-server interaction using HTTP:

1. User enters Web address in browser

2. Browser uses DNS to locate IP address

3. Browser opens TCP connection to server

4. Browser sends HTTP request over connection

5. Server sends HTTP response to browser over connection

6. Browser displays body of response in the client area of the browser window.
11
Web Browsers

Internet Explorer

Chrome

Title Bar Navigation Tool Bar

Menu Bar

Client Area

Status Bar

12
Status Bar: You will find the status bar at the very bottom of your browser window. It basically tells
you what you are doing at the moment. Mainly, it shows you load speed and the URL address of
whatever your mouse is hovering over.

Title Bar: You will find this bar at the absolute top of your browser and in will be the colour blue for
the major browsers. The purpose of the Title bar is to display the title of the web page that you are
currently viewing.

Menu Bar: The menu bar contains a set of dropdown menus

Navigational Tool: A bar contains standard push button controls that allow the user to return to a
previously viewed page, to reverse and refresh the page, to display the home page and to print the
page etc.

Toolbar Icons: You will find the Toolbar directly under the Title Bar. The Toolbar is where you will
find the back button, home button and the refresh button etc.

Client Area: It is a display window which is the space in which you view the website.

Scroll Bars: The Scroll bars, usually located to the right of the Display Window, allows you to "scroll"
(move down or up the web page) so you can view information that is below or above what is currently
in the Display Window.

Static Website
A static website is one that has web pages stored on the server in the format that is sent to a client
web browser. It is primarily coded in Hypertext Markup Language, HTML.

Simple forms or marketing examples of websites, such as classic website, a five-page website or a
brochure website are often static websites, because they present pre-defined, static information to
the user. This may include information about a company and its products and services via text,
photos, animations, audio/video and interactive menus and navigation.

This type of website usually displays the same information to all visitors. Similar to handing out a
printed brochure to customers or clients, a static website will generally provide consistent, standard
information for an extended period of time. Although the website owner may make updates
periodically, it is a manual process to edit the text, photos and other content and may require basic
website design skills and software.

In summary, visitors are not able to control what information they receive via a static website, and
must instead settle for whatever content the website owner has decided to offer at that time.

13
Dynamic Website
A dynamic website is one that changes or customizes itself frequently and automatically, based on
certain criteria.

Dynamic websites can have two types of dynamic activity: Code and Content. Dynamic code is
invisible or behind the scenes and dynamic content is visible or fully displayed.

▪ The first type is a web page with dynamic code. The code is constructed dynamically on the
fly using active programming language instead of plain, static HTML.
▪ The second type is a website with dynamic content displayed in plain view. Variable content
is displayed dynamically on the fly based on certain criteria, usually by retrieving content
stored in a database

Web Servers
A web server is a;

▪ computer software and

▪ underlying hardware

that accepts requests via

▪ HTTP (the network protocol created to distribute web content) or

▪ its secure variant HTTPS,

and responds to this request depending the type of the request.

A user agent, commonly a web browser or web crawler;

▪ initiates communication by making a request for a web page or other resource using HTTP,
▪ then, the server responds with the content of that resource or an error message.

A web server can also accept and store resources sent from the user agent if configured to do so.

14
Web Technology
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
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.

Web Application: 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.

15
▪ 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.

16
There are many other languages through which one can do front-end development depending upon
the framework for example Flutter user Dart, React uses JavaScript and Django uses Python, and
much more.

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

17
How Websites Work
Let's start with the most obvious way of using the internet: You visit a website like: aydin.edu.tr

The moment you enter this address in your browser and you hit ENTER, a lot of different things
happen:

1. The URL gets resolved

2. A Request is sent to the server of the website

3. Server send a response

4. The response of the server is parsed

5. The page is rendered and displayed

Actually, every single step could be split up in multiple other steps, but for a good overview of how
it all works, that's something we can ignore here. Let's have a look at all four steps.

18
Step 1 - URL Gets Resolved

The website code is obviously not stored on your machine and hence needs to be fetched from
another computer where it is stored. This "other computer" is called a "server". Because it serves
some purpose, in our case, it serves the website.

You enter "aydin.edu.tr" (that is called "a domain") but actually, the server which hosts the source
code of a website, is identified via IP (= Internet Protocol) addresses. The browser sends a "request"
(see step 2) to the server with the IP address you entered.

An IP address typically looks like this: 172.56.180.5 (though there also is a more "modern" form
called IPv6 - but let's ignore that for now). You can learn more about IP addresses in other courses.

How is the domain " aydin.edu.tr" translated to its IP address?

There's a special type of server out there in the internet - not just one but many servers of that type.
A so called "name server" or "DNS server" (where DNS = "Domain Name System").

The job of these DNS servers is to translate domains to IP addresses. You can imagine those
servers as huge dictionaries that store translation tables: Domain => IP address.

When you enter " aydin.edu.tr", the browser therefore first fetches the IP address from such a DNS
server.

Once the IP address is known, we advanced to step 2.

Step 2 - Request Is Sent

With the IP address resolved, the browser goes ahead and makes a request to the server with that
IP address.

The browser bundles up a bunch of information (What's the exact URL? Which kind of request
should be made? Should metadata be attached) and sends that data package to the IP address.

The data is sent via the "HyperText Transfer Protocol" (known as "HTTP") - a standardized protocol
which defines what a request (and response) has to look like, which data may be included (and in
which form) and how the request will be submitted.

19
20
Step 3 – Server Sends Response

The server then handles the request appropriately and returns a so called "response". Like a
request, a response can contain data, metadata etc. When requesting a page like aydin.edu.tr, the
response will contain the code that is required to render the page onto the screen.

That's defined by web developers. In the end, a response has to be sent. That response doesn't
have to contain "a website". It can contain any data - including files or images.

Some servers are programmed to generate websites dynamically based on the request (e.g. a
profile page that contains your personal data), other servers return pre-generated HTML pages (e.g.
a news page). Or both is done - for different parts of a webpage. There also is a third alternative:
Websites that are pre-generated but that change their appearance and data in the browser.

Step 4 - Response Is Parsed

The browser receives the response sent by the server. This alone, doesn't display anything on the
screen though.

Instead, the next step is that the browser parses the response. Just as the server did it with the
request. Again, the standardization enforced by HTTP helps of course.

The browser checks the data and metadata that's enclosed in the response. And based on that, it
decides what to do.

You might've had cases where a PDF opened in your browser. That happened because the
response informed the browser that the data is not a website but a PDF document instead. And the
browser tries to pick the best handling mechanism for any data type it detects.

21
Back to our website scenario.

In that case, the response would contain a specific piece of metadata, that tells the browser that
the response data is of type text/html.

This allows the browser to then parse the actual data that's attached to the response as HTML code.

HTML is the core "programming language" (technically, it's not a programming language - you can't
write any logic with it) of the web. HTML stands for "Hyper Text Markup Language" and it describes
the structure of a webpage.

The code looks like this:

<h1> and <p> are so called "HTML tags".

Every HTML tag has some semantic meaning which the browser understands, because HTML is
also standardized. Hence there is no guessing about what a <h1> tag means.

The browser knows how to parse HTML and now simply goes through the entire response data
(also called "the response body") to render the website.

22
Step 5 - Page Is Displayed

As mentioned, the browser goes through the HTML data returned by the server and builds a website
based on that.

Though it is important to know, that HTML does not include any instructions regarding what the site
should look like (i.e. how it should be styled). It really only defines the structure and tells the browser
which content is a heading, which content is an image, which content is a paragraph etc. This is
especially important for accessibility - screen readers get all the useful information out of the HTML
structure.

23