Basic Web Concepts

Introduction

Server hosted by: Luka Utevski - lukapravivlogovi@gmail.com

logo

© 2024/2025 Qinshift Academy

About the person who hosted the Server

  • Web developer at @Qinshift Academy
  • Web developer (html css js)
    at
    logo
  • Hosted using Apache web server

Contact info

Session overview

  • This session is divided into two parts

Part 1

  • History of Internet and WWW (World Wide Web)
  • How the web works
  • Web Pages, Websites and Web Apps
  • Browsers and Browser types

Part 2

  • Web Development Process
  • Hosting
  • SEO
  • Maintenance
  • Backup

History

History of the Internet

  • Soviet Union – successfully launch of the first satellite in Earth’s orbit –Satellite name: “Sputnik 1”
  • Soviet Union vs. US – Competing in the Intelligence and Technology sphere, as the biggest rivals worldwide that time
  • The event of “Sputnik 1” made US to create the US Department of Defense ARPA (the Advanced Research Projects Agency)

DARPA

  • Researches develops advanced ideas and technology beyond the currently identified needs
  • Their most famous and most widely used project:
    • The Creation of Internet

Student Research #1

Action: Find out more about “Man-Computer Symbiosis”

ARPANET

  • ARPANET stands for Advanced Research Projects Agency Network
  • The name of the first computer network
  • Presented in year 1967
  • First four-computer network was up and running in 1969

Internet and Web

Internet

  • Global network of computing recources
  • Collection of nodes (computers, routers, networks, ets.) interconnected and intercommunicating between each other
  • Common deffinitions:
    • A network of networks based on the TCP/IP communications protocol
    • A community of people who use and develop those networks

Student Research #2

Action: Find out how TCP/IP was invented?

Internet services

WWW

WWW (2)

  • Replaced by CERN’s project lead by Tim Berners-Lee
  • CERN –European Council for Nuclear Research
  • Tim Berners-Lee has been working on Information Management System in which documents with texts can contain links

WWW or WEB

  • WWW satands for World Wide Web
  • Tim Berners-Lee, the "father" of World Wide Web defined it as follows:
    “The World Wide Web is the universe of network-accasible information, an embodiment of human knowledge”

WWW Technical Definition

  • All the users and resources on the Internet that are using the HTTP (Hyper-Text Transfer Protocol)

Watch this on YouTube

HTTP

Hyper-Text Transfer Protocol

HTTP

How HTTP works?

  • When clicking a link (hypertext link), you are transferring an URL to your browser. From this URL, your browser knows which server to contact and what file to ask for.
  • The communication between your computer and the server is done by using HTTP protocol

HTTP Communication Lifecycle

During an http transaction, the requester, known as the client, asks for a file to a server.

Normal schema:

  1. Client connects to host
  2. Sever accepts connection
  3. Client requests response
  4. Server sends a response (including file or not)

URL

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)
  • URL format:
    • protocol://host/appends

Web Servers

Web Servers

  • Every Web site sits on a computer known as a Web server
  • This server is always connected to the internet
  • 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.198.17.112 or 78.221.45.27 called IP Address

Web Servers (2)

  • When you register a Web address, also known as a domain name, such as mywebsite.com you have to specify the IP address of the Web server that will host the site

ISP

Internet Service Provider

ISP

This stands for Internet Service Provider. They are the companies who provide you service in terms of internet connection to connect to the internet.

DNS

Domain Name System

DNS

DNS stands for Domain Name System.

When someone types your website address, e.g. www.facebook.com, your browser will ask the Domain Name System to find your IP address that hosts your site.

Domains

Domains and Subdomains

Domain is the main part of your website name that comes after www. For website www.mywebsite.com –domain is mywebsite.com

Subdomain is the further division of your domain

Subdomains can be:

  • forum.mywebsite.com
  • chat.mywebsite.com
  • blog.mywebsite.com

Domain Extensions

There are many different domain extensions today

Most known ones:

  • .com - Stands for commercial or company, but most widely used today for any type of website
  • .net - Stands for network - usually used for network sites
  • .org - Stands for organization and is supposed to be used for non-profit bodies
  • .us or .mk - Country based domain extensions
  • .biz - Stands for business
  • .gov - Stands for government
  • .tv - Stands for Television

Web Pages, Websites and Web Apps

Web Pages

  • Single Document written using HyperText Markup Language (HTML)
  • Hypertext is a text that contains hyperlinks that lead to other documents
  • Hyperlink is a text, word, sentence, button, icon, when you click on it, you will be directed to another web page
  • We access a web page by entering its URL (Uniform Resource Locator) address using a web browser

Websites

  • A group of interlinked and well-structured web pages that exist on the same domain
  • There are two types of websites: static and dynamic

Static Websites

  • Static Websites: websites that contains only Static web pages
  • Static Web Page: A document that every time it is requested displays on the browser exactly as it is stored in the server
  • It doesn't change at all, unless the creator (owner) changes it manually

Dynamic Websites

  • Dynamic Websites: websites that contains Dynamic web pages
  • Dynamic Web Page: Web pages that are generated using scripting languages and programs interacting with a database on the server side
  • Programs that add, restrict, edit or remove data without the creator's intervention

Web Apps

  • Web Apps: A software application/program that exists on the server and runs using a web browser, through a web page
  • Created using a combination of programming languages and web application frameworks
  • *it may use the RAM, allows for user interaction and it's designed for many uses
  • *the Web Pages are generated using scripts and programs

Dynamic websites vs. Web Apps

Dynamic Websites

  • Allows the user to interact and add content
  • The creator's content is the dominant
  • They are less complicated and need less skills than web apps do

Dynamic websites vs. Web Apps

Web Apps

  • Web Apps are based on user engagement
  • Almost all their content is from the end user
  • Web Apps are similar to desktop apps
  • They are more complicated and need more skills than websites do

Web Browsers

Web Browsers

Web browsers are nothing but software applications installed on your computer that helps you browse Websites

  • Note: You can build your own Web Browser if you know how to code

Popular Web Browsers:

Web Browsers (2)

Less Popular Web Browsers:

  • Konqueror
  • SeaMonkey
  • MaxhtonBrowser
  • KidZui
  • RockMelt
  • Iron Browser
  • Sleipnir

W3C

World Wide Web Consortium

W3C

This stands for World Wide Web Consortium which is an international consortium of companies involved with the Internet and the Web.

The W3C was founded in 1994 by Tim Berners-Lee, the original architect of the World Wide Web

The organization's purpose is to develop open standards so that the Web evolves in a single direction rather than being splintered among competing factions

The W3C is the chief standards body for HTTP and HTML

http://www.w3.org/

Watch this TED Talk

Advantages of Web Applications

  • 24/7 Availability
  • Accessibility across devices
  • Integration with other systems
  • Advertising opportunities
  • Global reach
  • Easier maintenance – thus cost saving
  • Showcase your work worldwide
  • Easy and quick access

Disadvantages of Web Applications

  • Internet reliance
  • Security
  • Performance limitations
  • Browser Support

Skills required to work in web industry

  • HTML Knowledge
  • CSS Knowledge
  • Scripting (JavaScript/PHP//Ajax technology...)
  • Remote Access tools (RDP, FileZilla–FTP)
  • File Uploading & Downloading (FTP, Data Transfer)

For advanced web applications:

  • ASP.NET, C#, Python, Java, SQL, Software Engineering skills...

How do you start?

How do you start?

We learned a lot about basic concepts of the Web

  • Now you are ready to go deeper into building web pages, websites and later web apps

Web development proccess

There are numerous steps in the web site design and development process

  1. Information Gathering
  2. Planning
  3. Design
  4. Development
  5. Testing and Delivery
  6. SEO
  7. Maintenance

Information Gathering

Information Gathering

  • Purpose
  • Target Audience
  • Content & business requirements

Planning

Planning

    Using the information gathered from phase one, it is time to put together a plan for your website

    This is the point where a site map is developed.

    The site map is a list of all main topic areas of the site, as well as sub-topics, if applicable. This serves as a guide as to what content will be on the site.

Hosting

    Engineers should consider few things when hosting a website:

    • Hosting platform:
      1. Windows Servers (for IIS, Apache, ASP.NET, ASP, PHP, Perl, Phyton, Java, etc.)
      2. Linux Servers (for Apache, PHP, Perl, Phyton, Java)

Hosting (2)

    Things to consider when hosting a website:

    • Hosting types:
      1. Free hosting
      2. Shared hosting
      3. VPS
      4. Dedicated hosting
      5. Cloud hosting

Student Research #4

Action: Find out the difference between the hosting types. What hosting type is mostly used today and why?

SEO

Search Engine Optimization

SEO

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

SEO (2)

  • As an Internet marketing strategy, SEO considers how search engines work, the computer-programmed algorithms that dictate search engine behavior, what people search for, the actual search terms or keywords typed into search engines, and which search engines are preferred by their targeted audience.

Student Research #5

Action: Find out the most used SEO techniques today.

Web maintenance

Web maintenance

    Maintenance of website is important to prevent losing data

    Maintenance means:

    • Regular website backups
    • Regular website health monitoring checks
    • Correct and on time updates of the information in the website

Website backups

    Backup of a website can be done by copying website data to another location

    It is general practice to have the data on three different places, so that you will be 99,99% sure your data is safe

    Backups can be done on a periods of time depending of the website frequency of information updates

    Backups should be preserved in a different server locations, different servers, tapes or other external media devices or machines

Now we are ready to get into code

Thank you!

Questions?