Components of a web page
Web Science[1]
:__*_Define_headings,_with_%60%60_being_the_most_important_and_%60%60_the_least_important._*_Paragraphs_(%60%60):__*_Used_for_blocks_of_text._*_Lists:__*_**Ordered_List_(%60%60):**_Displays_numbered_items.__*_**Unordered_List_(%60%60):**_Displays_bulleted_items.__*_**List_Items_(%60%60):**_Items_within_a_list._*_**Links_(%60<a>%60):**__*_Hyperlinks_to_other_pages_or_resources.__*_Example:_%60<a_href=%22https://example.com%22>Visit_Example</a>%60._*_**Images_(%60<img>%60):**__*_Embeds_images.__*_Example:_%60<img_src=%22image.jpg%22_alt=%22Sample_Image%22>%60.___Interactive_Elements){kind=link}
Components of a Web Page[edit]
A web page is composed of various components that work together to display content in a structured and interactive way. These components can be broadly categorized into the **head**, **body**, and **optional external resources**.
1. Document Structure[edit]
- HTML Tag (`<html>`):
* The root element that encompasses the entire web page. * Specifies the language of the document using the `lang` attribute (e.g., `<html lang="en">`).
2. Head Section (`<head>`)[edit]
Contains metadata and resources needed for the web page but not directly visible to users.
Meta Tags (`<meta>`)[edit]
- Provide metadata about the document.
- Examples:
* Charset: Specifies the character encoding (e.g., `<meta charset="UTF-8">`). * Viewport: Controls the page's layout on different devices (e.g., `<meta name="viewport" content="width=device-width, initial-scale=1.0">`). * Description: Brief summary of the page (e.g., `<meta name="description" content="This is a sample webpage.">`).
Title Tag (`<title>`)[edit]
- Defines the title of the document displayed in the browser tab or search engine results.
- Example: `<title>My Sample Page</title>`.
Link Tags (`<link>`)[edit]
- Used to link external resources like CSS stylesheets or icons.
- Example: `<link rel="stylesheet" href="styles.css">`.
Script Tags (`<script>`)[edit]
- Include or link external JavaScript files.
- Example: `<script src="script.js"></script>`.
Favicons[edit]
- Specify the website's icon displayed in the browser tab.
- Example: `<link rel="icon" href="favicon.ico" type="image/x-icon">`.
3. Body Section (`<body>`)[edit]
The visible part of the web page, containing the main content and interactive elements.
Content Structure[edit]
- Headers (`
` to `
`):
* Define headings, with `
` being the most important and `
` the least important.
- Paragraphs (`
`):
* Used for blocks of text.
- Lists:
* **Ordered List (``):** Displays numbered items.
* **Unordered List (`
`):** Displays bulleted items.
* **List Items (`- `):** Items within a list.
- **Links (`<a>`):**
* Hyperlinks to other pages or resources.
* Example: `<a href="https://example.com">Visit Example</a>`.
- **Images (`<img>`):**
* Embeds images.
* Example: `<img src="image.jpg" alt="Sample Image">`.
Interactive Elements
- **Forms (`<form>`):**
* Collect user input with fields like text boxes and buttons.
* Example:
```
<form action="/submit" method="POST">
<input type="text" name="username" placeholder="Enter username">
<button type="submit">Submit</button>
</form>
```
- **Buttons (`<button>`):**
* Trigger actions or scripts.
4. External Resources[edit]
- **CSS (Cascading Style Sheets):**
* Control the visual styling of the page.
* Linked via `<link>` tags or embedded within `<style>` tags.
- **JavaScript:**
* Adds interactivity and dynamic behavior.
* Linked via `<script>` tags or written inline.
- **External Libraries or APIs:**
* Include frameworks like Bootstrap or external JavaScript APIs like Google Maps.
5. Closing Tags[edit]
- Ensure all open tags are closed properly to maintain valid HTML structure.
- Example:
* `<html>`, `<head>`, and `<body>` tags must all be closed.
```
Do you understand this?[edit]
From the IB: To include features such as meta- tags, title, etc.
Standards[edit]
These standards are used from the IB Computer Science Subject Guide[2]
- Outline the different components of a web page.
References[edit]
- ↑ http://www.flaticon.com/
- ↑ IB Diploma Programme Computer science guide (first examinations 2014). Cardiff, Wales, United Kingdom: International Baccalaureate Organization. January 2012.
`):
- **Links (`<a>`):**
- **Images (`<img>`):**
Interactive Elements
- **Forms (`<form>`):**
* Collect user input with fields like text boxes and buttons.
* Example:
```
<form action="/submit" method="POST">
<input type="text" name="username" placeholder="Enter username">
<button type="submit">Submit</button>
</form>
```
- **Buttons (`<button>`):**
* Trigger actions or scripts.
4. External Resources[edit]
- **CSS (Cascading Style Sheets):**
* Control the visual styling of the page. * Linked via `<link>` tags or embedded within `<style>` tags.
- **JavaScript:**
* Adds interactivity and dynamic behavior. * Linked via `<script>` tags or written inline.
- **External Libraries or APIs:**
* Include frameworks like Bootstrap or external JavaScript APIs like Google Maps.
5. Closing Tags[edit]
- Ensure all open tags are closed properly to maintain valid HTML structure.
- Example:
* `<html>`, `<head>`, and `<body>` tags must all be closed.
```
Do you understand this?[edit]
From the IB: To include features such as meta- tags, title, etc.
Standards[edit]
These standards are used from the IB Computer Science Subject Guide[2]
- Outline the different components of a web page.
References[edit]
- ↑ http://www.flaticon.com/
- ↑ IB Diploma Programme Computer science guide (first examinations 2014). Cardiff, Wales, United Kingdom: International Baccalaureate Organization. January 2012.