Introduction to Website and Webpages

 

Unit 2

Introduction to Website and Webpages

• Website:
• A website is a collection of related web pages hosted on a web server, accessible via the Internet using a domain name.
• Websites provide content, services, or resources, such as news, education, shopping, social networking, etc.
• Examples: www.wikipedia.org, www.amazon.com.

• Webpages:
• A webpage is a single, electronic document that forms part of a website.
• It usually contains text, images, audio, and video, all formatted using HTML, CSS, and JavaScript.
• Each webpage has a unique address (URL) under a website domain.

Web Browser

• Definition:
• A web browser is an application software used to access, retrieve, and view information from websites on the World Wide Web.
• Popular browsers include Google Chrome, Mozilla Firefox, Microsoft Edge, Safari.

• Functions:
• Fetches and displays web pages from web servers based on user requests.
• Renders multimedia elements including images, videos, and interactive features.
• Allows users to navigate between websites using URL/address bar and hyperlinks.
• Stores history, bookmarks, and cache for easy access and faster browsing.
• Provides security features like pop-up blockers, incognito mode, and extension support for ad-blocking.
• Supports tabbed browsing, UI customization, and synchronization across devices.

---

Web Server

• Definition:
• A web server is a computer system that hosts websites and serves web pages to users over the Internet.
• It responds to requests from web browsers by delivering the required webpages.

• Functions:
• Stores website files including HTML, CSS, images, scripts.
• Handles user requests sent via browsers using protocols like HTTP/HTTPS.
• Processes and serves dynamic and static content.
• Maintains logs, security measures, and access control.

 

URL (Uniform Resource Locator)

• Definition:
• A URL is the address used to access a particular webpage or resource on the Internet.
• It consists of the protocol (like http/https), domain name, and optional path/file.
• Example:
• https://www.example.com/about.html
• Protocol: https
• Domain: www.example.com
• Path: /about.html

 

• Functions:
• Specifies exact location of a webpage on a server.
• Enables direct access, linking, and navigation between resources.

Search Engine

• Definition:
• A search engine is an online tool that helps users find information on the Internet by searching for keywords or queries.
• Examples: Google, Bing, DuckDuckGo.

• Functions:
• Indexes billions of webpages for efficient searching.
• Retrieves and ranks relevant results as per user query.
• Provides features like images, news, videos, maps, and shopping results.
• Often integrated within browser search bars for easy access.

 

Concept	Definition	Key Function(s)	Example(s)
Website	Group of web pages under a domain	Share info, services, resources	www.wikipedia.org
Webpage	Single document on a website	Display content, multimedia	www.wikipedia.org/Main_Page
Web Browser	Software to access WWW	Fetch, render, navigate websites	Chrome, Firefox, Safari
Web Server	Runs/hosts websites	Store, deliver, manage web content	Apache, IIS
URL	Address of online resource	Locate and access specific webpage	https://www.example.com
Search Engine	System to search WWW	Find relevant info, rank websites	Google, Bing

 

 

Types of Websites (Static / Dynamic)

Websites are generally classified into two main types: Static Websites and Dynamic Websites. Each type differs in content delivery, development method, and interactivity.

Static Websites

• Definition:
  Static websites deliver pre-built web pages with fixed content to all users; the same information is displayed for every visitor regardless of user actions or preferences.
• Key Features:
• Built with simple languages like HTML, CSS, and some JavaScript.
• Content updated only by manually editing the source code for each page.
• No server-side processing, no database involved.
• Fast loading speeds due to simple structure.
• Less expensive and easier to design and host.
• Best suited for portfolios, brochure sites, or landing pages with little or infrequent updates.

• Advantages:
• Easier to restore and maintain.
• Lower hosting and development costs.
• Generally more secure, with fewer vulnerabilities.
• Disadvantages:
• Difficult to scale or update for large sites.
• No personalization or user interactivity.
• May appear outdated if content is not refreshed regularly.

Dynamic Websites

• Definition:
  Dynamic websites generate and display web pages in real-time, based on user interaction, preferences, database inputs, or other factors. Content can change per user or session.
• Key Features:
• Built using server-side scripting languages (such as PHP, ASP.NET, Node.js) that interact with databases.
• Page content can be personalized or updated automatically.
• Integrated with databases to store and retrieve information.
• Slower to load due to increased complexity and server processing.
• Best suited for blogs, news portals, social networks, e-commerce, or any site requiring frequent updates or user interactivity.
• Advantages:
• Easy to update and scale; changes reflect across multiple pages automatically.
• Supports personalized experiences, login systems, shopping carts, forums, etc.
• Rich interactivity and multimedia features.
• Disadvantages:
• More costly and complicated to develop and maintain.
• Vulnerable to security risks due to server-side scripts and database access.
• 
  Performance may vary depending on server load or traffic. 

Static vs Dynamic Comparison Table

Feature	Static Website	Dynamic Website
Content	Fixed, same for all users	Changes per user/input
Technology	HTML, CSS, JavaScript	PHP, ASP.NET, Node.js + DB
Updates	Manual, per page	Automatic, site-wide
Speed	Faster	Slower
Interactivity	No	Yes
Security	More secure	Prone to risk
Cost	Lower	Higher
Use Cases	Portfolios, brochure sites, landing pages	E-commerce, blogs, social media

 

Static Websites

Examples:

• Personal Portfolio: A photographer’s portfolio website (e.g., displaying work samples that rarely change).
• Simple Corporate Site: Berkshire Hathaway’s official website, which mostly shows static company info.
• Art Magazine: ArtCritic – a multilingual blog with static articles, minimal backend processing.
• Documentation/Info Site: Basic wikis, reference sites, and technical documentation pages with set content.
• Landing Page: Product launch or sales banners that don’t need frequent updates.

Dynamic Websites

Definition:
Dynamic websites deliver content that varies depending on the user, time, or database queries. These sites often interact with users, update content automatically, and require server-side scripting.

Examples:

• Social Networking: Facebook – customizes feeds and updates based on logged-in user’s activity.
• E-Commerce: Amazon – listings, pricing, recommendations, and user carts are dynamically generated.
• Educational Platform: Open University of Catalonia’s online education platform, personalized for registered students.
• News Portal: BBC News – headlines change throughout the day and recommendations adjust per user interest.
• Blog Platform: WordPress-powered blogs where new posts, comments, and user profiles are managed dynamically.

 

Comparison Overview

Type	Examples	Features	Best For
Static	Portfolio (photographer), Berkshire Hathaway, ArtCritic	Fixed, simple, fast	Small sites, info display
Dynamic	Facebook, Amazon, BBC News, UOC education platform	Interactive, personalized, scalable	Social, shopping, education

 

 

Static sites are best for simplicity and speed; dynamic sites excel in flexibility and user engagement.

 

Structure of a website

A standard website structure consists of several essential components that help organize content and navigation. Below is an elaborate explanation of the main parts: header, footer, body, menu bar, and sub menu, with details on their content and functions.

1. Header

• Definition:
  The header is the top section of every webpage, typically visible on all pages of the site.
• Common Content:
• Logo or branding
• Site title or tagline
• Main navigation menu bar (primary links)
• Contact details, search bar, call-to-action buttons
• Function:
  Introduces the website’s identity and presents primary navigation, making it easy for users to explore the site.

2. Body

• Definition:
  The body is the central part of the website, containing the main content specific to each page.
• Common Content:
• Articles, images, videos
• Galleries or product listings
• Forms, interactive content
• Text sections, tables, charts
• Function:
  Displays the unique, core information or features that visitors want to access—changes from page to page.

3. Menu Bar (Navigation Bar)

• Definition:
  The menu bar is a set of horizontal or vertical navigational links, often found within the header or sidebar.
• Common Content:
• Main sections of the site (Home, About, Services, Contact)
• Account/log-in links, language switchers
• Function:
  Enables users to move quickly between different sections or pages of the website.

4. Sub Menu

• Definition:
  A sub menu consists of additional options or links that appear under a main menu item—usually as a drop-down when hovered or clicked.
• Common Content:
• Nested categories (e.g., under “Services”: Web Design, SEO, Consulting)
• Function:
  Helps organize many related links, providing users with direct access to deeper site sections from the main navigation.

5. Footer

• Definition:
  The footer is the strip at the very bottom of every webpage, visible across the site.
• Common Content:
• Copyright statements
• Privacy policy, terms of use
• Quick links, contact information
• Social media links, sitemap
• Function:
  Provides legal, informational, and supplementary links or details for users; marks the end of page content.

 

Website Structure Table

Component	Location	Common Content	Main Function
Header	Top of page	Logo, nav menu, search bar	Identity & primary navigation
Body	Center	Main content, media, forms	Core content, user engagement
Menu Bar	Header/sidebar	Main site links	Navigate between sections
Sub Menu	Under menu bar	Nested links/categories	Access deeper pages, organization
Footer	Bottom of page	Copyright, policies, links	Legal info, supplementary links

Each part ensures a website is user-friendly, easy to navigate, and professionally structured.