Components of a web page
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:
* The root element that encompasses the entire web page. * Specifies the language of the document using the `lang` attribute (e.g., `lang="en"`).
2. Head Section[edit]
Contains metadata and resources needed for the web page but not directly visible to users.
Meta Tags[edit]
- Provide metadata about the document.
- Examples:
* Charset: Specifies the character encoding (e.g., `UTF-8`). * Viewport: Controls the page's layout on different devices (e.g., `width=device-width, initial-scale=1.0`). * Description: Brief summary of the page (e.g., "This is a sample webpage.").
Title Tag[edit]
- Defines the title of the document displayed in the browser tab or search engine results.
- Example: "My Sample Page".
Link Tags[edit]
- Used to link external resources like CSS stylesheets or icons.
- Example: Stylesheet linking or favicon specification.
Script Tags[edit]
- Include or link external JavaScript files.
- Example: External or inline JavaScript.
Favicons[edit]
- Specify the website's icon displayed in the browser tab.
- Example: Reference to a favicon file.
3. Body Section[edit]
The visible part of the web page, containing the main content and interactive elements.
Content Structure[edit]
- Headers:
* Define headings, with different levels of importance.
- Paragraphs:
* Used for blocks of text.
- Lists:
* Ordered List: Displays numbered items. * Unordered List: Displays bulleted items. * List Items: Items within a list.
- Links:
* Hyperlinks to other pages or resources.
- Images:
* Embeds images into the content.
Interactive Elements[edit]
- Forms:
* Collect user input with fields like text boxes and buttons. * Example: Simple forms with text input and submit button.
- Buttons:
* Trigger actions or scripts.
4. External Resources[edit]
- CSS (Cascading Style Sheets):
* Control the visual styling of the page.
- JavaScript:
* Adds interactivity and dynamic behavior.
- External Libraries or APIs:
* Include frameworks like Bootstrap or external JavaScript APIs.
5. Closing Tags[edit]
- Ensure all open tags are closed properly to maintain valid HTML structure.
```
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.