Components of a web page: Difference between revisions

From Computer Science Wiki
No edit summary
No edit summary
Line 3: Line 3:
[[file:Connection.png|right|frame|Web Science<ref>http://www.flaticon.com/</ref>]]
[[file:Connection.png|right|frame|Web Science<ref>http://www.flaticon.com/</ref>]]


A web page is a document that is suitable for the World Wide Web and web browsers. A web browser displays a web page on a monitor or mobile device. The web page is what displays, but the term also refers to a computer file, usually written in HTML or comparable markup language. Web browsers coordinate the various web resource elements for the written web page, such as style sheets, scripts, and images, to present the web page.
= Components of a Web Page =


Typical web pages provide hypertext that includes a navigation bar or a sidebar menu to other web pages via hyperlinks, often referred to as links.<ref>https://en.wikipedia.org/wiki/Web_page</ref>
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**.


== Components of a web page ==
== 1. Document Structure ==
* **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">`).


[https://developer.mozilla.org/en/docs/Web/HTML/Element This reference describes many of the newer web elements]
== 2. Head Section (`<head>`) ==
Contains metadata and resources needed for the web page but not directly visible to users.


=== Meta Tags (`<meta>`) ===
* 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>`) ===
* Defines the title of the document displayed in the browser tab or search engine results.
* Example: `<title>My Sample Page</title>`.
=== Link Tags (`<link>`) ===
* Used to link external resources like CSS stylesheets or icons.
* Example: `<link rel="stylesheet" href="styles.css">`.
=== Script Tags (`<script>`) ===
* Include or link external JavaScript files.
* Example: `<script src="script.js"></script>`.
=== Favicons ===
* 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>`) ==
The visible part of the web page, containing the main content and interactive elements.
=== Content Structure ===
* **Headers (`<h1>` to `<h6>`):**
  * Define headings, with `<h1>` being the most important and `<h6>` the least important.
* **Paragraphs (`<p>`):**
  * Used for blocks of text.
* **Lists:**
  * **Ordered List (`<ol>`):** Displays numbered items.
  * **Unordered List (`<ul>`):** Displays bulleted items.
  * **List Items (`<li>`):** 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 ==
* **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 ==
* 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? ==
== Do you understand this? ==

Revision as of 14:12, 25 November 2024


Web Science[1]

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]

    1. ↑ http://www.flaticon.com/
    2. ↑ IB Diploma Programme Computer science guide (first examinations 2014). Cardiff, Wales, United Kingdom: International Baccalaureate Organization. January 2012.

Credit sources of information used by referencing (or citing) following one recognized referencing system. References should be included in the text and also at the end of the piece of work in a reference list or bibliography.

Give the precise meaning of a word, phrase, concept or physical quantity.

Give a sequence of brief answers with no explanation.

Give a sequence of brief answers with no explanation.

Give a brief account.

Retrieved from "https://computersciencewiki.org/index.php?title=Components_of_a_web_page&oldid=12312"