Previous lesson

Chapter 1 - Website structure

Next lesson

A website is like a book, it has pages. The pages can contain text, images, graphs, tables. The text can be bold, italic, underlined, colored, etc. This text can also be structured in paragraphs of various sizes. We use various software to write books. One of the most used software used to write books is Microsoft Word. The software comes with an interface filled with buttons and menus which allow you to apply styles and formatting to your text.

A screenshot of the Microsoft Word interface

The first difference is that a book requires you to move across many pages before accessing the page you want to see. If you want to read the 111th page, you need to kind of flip all the first 110 previous pages. On the other hand, a website is designed to be more interactive, allowing you to jump between pages with ease. Users can click on links or buttons to navigate between pages, or use menus and search bars to find what they need.

Let's take a closer look at the structure of a website page or webpage or a HTML Document. At the most basic level, a webpage is made up of HTML code. HTML stands for HyperText Markup Language, and it's the language used to create web pages. HTML code is used to define the structure of the page, including headings, paragraphs, lists, images, links, and more.

The difference between a webpage and a HTML Document is that the HTML document represents the set of HTML tags used to structure the webpage, and in the other hand the webpage is the final page seen on the browser after rendering of the HTML elements.

Beyond HTML, a webpage can also include other technologies like CSS and JavaScript to add styling and interactivity to the page. CSS, or Cascading Style Sheets, is used to define the visual layout of a webpage, including the fonts, colors, and positioning of elements. JavaScript, on the other hand, allows for dynamic behavior on the page, such as form validation or image sliders.

In terms of structure, a webpage can be divided into sections or elements such as headers, footers, sidebars, and main content areas. These elements can be defined using HTML tags and given styles using CSS classes or IDs. Navigation menus can also be included to allow users to move between pages or sections within the website.

When comparing a webpage to a book page, there are several differences to consider. While both have a defined structure and can contain text and images, a book page is static and cannot be changed, while a webpage can be updated in real-time. Additionally, a webpage can include multimedia elements like videos or audio, which are not possible on a printed page.

Another key difference is the way users interact with the content. A book page requires physical interaction, like turning the page or highlighting text, while a webpage can be interacted with through a mouse or touch screen. Users can also interact with other users through comments or social media on a webpage, whereas a book page is a one-way communication between the author and reader.

Overall, while both books and webpages have a defined structure and content, webpages offer a more dynamic and interactive experience for users.

Here's an example of a simple HTML document:

<!DOCTYPE html>
<html>
<head>
	<title>My First Web Page</title>
</head>
<body>
	<h1>Welcome to my website!</h1>
	<p>This is my first web page. I hope you like it!</p>
	<img src="myimage.jpg" alt="A beautiful image">
	<a href="http://www.example.com">Click here to visit Example.com</a>
</body>
</html>

Click here to see the webpage produced by the HTML document