Computer Science (9210) | Key concepts

Hello Future Web Designer!

Welcome to the exciting world of Web Page Design! This chapter covers the essential "Key Concepts"—the fundamental building blocks and rules you need to understand before you can start coding.

Don't worry if this seems tricky at first! We will break down complex ideas into simple, clear steps. Think of this chapter as learning the basic tools a master builder uses—once you know your tools, building anything becomes possible!

Quick Review: What is a Web Page?

A web page is essentially a document written in a special code that web browsers (like Chrome or Safari) can read and display visually.

1. The Foundation: HTML and Markup Language

What is HTML?

HTML stands for HyperText Markup Language. It is the language used to create the structure and content of almost every web page you see.

• HyperText: This means the text is linked together (using hyperlinks), allowing you to jump from one page to another.
• Markup: This is key! HTML is a markup language, not a programming language. It doesn't tell the computer to perform calculations; it tells the browser how the content should be structured and labelled.

Analogy Alert!

Think of a human body:

• HTML is the Skeleton (Structure): It defines where the head (headings), the body (paragraphs), and the limbs (lists/images) are located.
• CSS (which we will cover later) is the skin, hair, and clothes (Appearance).

What Does 'Markup' Do?

Markup uses special codes, called tags, to enclose and define different pieces of content. For example, marking text as a heading, a paragraph, or a list item.

2. Key Vocabulary: Tags, Elements, and Attributes

To speak the web design language fluently, you must understand the difference between three core terms:

Tags

A tag is the marker used to define the start and end of an element. Tags are always enclosed in angle brackets (< and >).

• Opening Tag: <p> (Starts a paragraph)
• Closing Tag: </p> (Ends a paragraph, notice the forward slash /)

Elements

An element is the complete unit, consisting of the opening tag, the content, and the closing tag.

Example: <p>This is the content.</p>

The whole thing above is one paragraph element.

Did you know? Some elements, like the image tag (<img>) or the line break tag (<br>), don't wrap content and therefore do not require a closing tag. These are called self-closing or void elements.

Attributes

Attributes provide extra information about an element. They are always placed inside the opening tag, never the closing tag. They are written in the format: name="value".

Example: If you want an image (<img>) to show up, you need an attribute to tell the browser where to find the image file.

<img src="photo.jpg" alt="A picture of a cat">

• The name is src (source) and the value is "photo.jpg".
• The name is alt (alternative text) and the value is "A picture of a cat". (This helps visually impaired users and search engines.)

3. The Golden Rule: Separation of Concerns (Structure and Presentation)

In modern web design, we strictly separate the look of the page from its meaning and structure. This is known as the separation of concerns.

HTML: The Structure

HTML's job is only to define what the content is.

• "This is the main heading (H1)."
• "This is a link (A tag)."
• "This is an image (IMG tag)."

CSS: The Presentation

CSS (Cascading Style Sheets) controls how the structure looks.

• "Make the H1 blue and centered."
• "Make the links bold and remove the underline."
• "Place the image on the right side of the page."

Why is this separation important?

1. Consistency: If you want all headings across a 100-page website to be green, you only change one line of CSS, not 100 separate HTML files.
2. Efficiency: Smaller HTML files load faster because they don't contain all the messy style information.
3. Accessibility: Screen readers and search engines can easily understand the pure structure without being confused by presentation code.

4. File Paths: Absolute vs. Relative Linking

When you link to another page, an image, or a stylesheet, you must tell the browser exactly where to find that file. This location address is called the file path. There are two main types:

Absolute File Paths

An absolute path gives the full, complete address to a file, starting from the protocol (e.g., http:// or https://).

• It's used when linking to resources outside of your current website.
• Example: <a href="https://www.officialwebsite.com/index.html">
• Analogy: Using a full GPS coordinate. It works no matter where you start from.

Relative File Paths

A relative path gives the address of a file relative to the file you are currently viewing.

• It's used when linking to resources within your current website (internal linking).
• It is much shorter and more efficient because the browser assumes the first part of the address.

How Relative Paths Work (Step-by-Step):

1. Linking to a file in the same folder:
   Example: To link from page1.html to page2.html (in the same folder):
   <a href="page2.html">Go to Page Two</a>
2. Linking to a file in a sub-folder (down a level):
   Example: To link to an image in a folder called images:
   <img src="images/logo.png">
3. Linking to a file in a parent folder (up a level):
   Use ../ to move one level up in the folder structure.
   Example: <a href="../index.html">Go to Home</a>

5. The Browser's Job: Displaying the Page

What happens after you type a URL (web address) and press Enter? The browser performs a crucial process known as rendering.

Step-by-Step: Rendering a Web Page

1. Request: Your browser sends a request to the web server asking for the HTML file (and any linked resources like CSS files or images).
2. Receiving Data: The server sends the raw HTML, CSS, and other files back to your computer.
3. Parsing the HTML: The browser reads the HTML code line by line (this is called parsing). It builds an internal map of the structure, known as the Document Object Model (DOM).
4. Applying Styles (CSS): The browser reads the CSS files and attaches the styles (colours, fonts, sizes) to the corresponding structural elements defined in the HTML.
5. Rendering/Drawing: The browser then calculates exactly where every element should be placed on the screen based on the combined HTML structure and CSS styles. This final drawing process is the rendering.

Encouragement: Understanding this process helps you debug your code! If your page looks wrong, you know that either the HTML structure is incorrect (Step 3) or the CSS rules weren't applied properly (Step 4).

Chapter Summary: Key Concepts Review