Web Pages
Loading a Web Page
Loading a Web Page
How is a web page loaded?
Web pages are held on web servers (1), known as 'hosting'
To access a web page on a web server, a web browser is used
In the browser, a user enters a web page URL (2)
The browser sends the domain name to a DNS (3)
The browser connects to the web server and requests to access the page
HTML (4) is transferred and rendered by the browser, displaying the web page
Web Servers
Web Servers (1)
What is a web server?
A web server is a remote computer that stores the files needed to display a web page on the Internet
Web servers are generally available 24/7 and security is managed by the owner of the hardware
Web servers provide access to multiple users at the same time
Uniform Resource Locator (URL)
Uniform Resource
Locator (URL) (2)
What is a URL?
A Uniform Resource Locator (URL) is a unique identifier for a web page, known as the website address
It is text based to make it easier to remember
A user enters a URL into a web browser to view a web page
An example of a URL is:
https://www.savemyexams.com/igcse/computer-science/cie/23/revision-notes/
A URL can typically be split into three parts:
Protocol
Domain name
Web page/file name
Using the example about the URL would be split as follows:
Protocol | https | Communication method to transfer data between client and server |
|---|---|---|
Domain name | www.savemyexams.com | Name of the server where the resource is located |
Web page/file name | /igcse/computer-science/cie/23/revision-notes/ | Location of the file or resources on the server |
Domain Name System (DNS)
Domain Name System (DNS) (3)
What is a DNS?
The Domain Name System (DNS) can be thought of as the Internet's equivalent to a phone book
It is essentially a directory of domain names and is used to translate human-readable domain names to the numeric IP addresses that computers use
When you type a URL into your browser, the DNS translates the domain name into its associated IP address so your computer can connect to the server hosting the website
Without DNS, we would have to remember the IP address of every site we want to visit
HTML
HTML (4)
What is HTML?
Hypertext Markup Language (HTML), is the foundational language used to structure and present content on the web
HTML consists of a series of elements, often referred to as "tags"
Most tags are opened and closed e.g.
<html>and</html>,<img>and<link>
Structure
HTML is used to define the basic structure of a webpage by organising content into sections such as headers, paragraphs, and footers
The
<html>tag is the root element of an HTML page and includes all other HTML elements used to create a page structure
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
</header>
<main>
<section>
<h2>About Me</h2>
<p>This is a paragraph about me.</p>
</section>
<section>
<h2>My Projects</h2>
<p>This is a paragraph about my projects.</p>
</section>
</main>
<footer>
<p>Contact: myemail@example.com</p>
</footer>
</body>
</html>In this example, HTML is used to create a structure with a header, two sections in the main body, and a footer
Other examples of HTML being used for structure include:
Creating lists to structure information
Positioning of text on the screen
Embedding media and interactive elements
Present
HTML is also used to present and display information in a visually meaningful way
The content layer of a web page is made up of HTML elements such as headings (
<h1>, <h2>, etc.), paragraphs (<p>), links (<a>), images (<img>), and moreThis layer is mainly handled by CSS (Cascading Style Sheets)
<!DOCTYPE html>
<html>
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph introducing the content of the website.</p>
<h2>Subheading 1</h2>
<p>Here is some detailed information under the first subheading.</p>
<h2>Subheading 2</h2>
<p>Another section with more information.</p>
<p><strong>Bold text</strong> and <em>italic text</em> can emphasise important points.</p>
</body>
</html>In this example, headings (
<h1>,<h2>) and text formatting tags (<strong>,<em>) are used to present the content clearly and with emphasisOther examples of HTML being used to present information include:
Presenting data in a table
Displaying images with captions