Header Ads Widget

Mastering Web Authoring for IGCSE ICT 0417: Essential HTML & CSS Practical Skills Guide

Web Authoring Practical Notes for IGCSE ICT 0417 

Each section includes hands-on examples to solidify understanding of HTML and CSS fundamentals.

Table of Contents

  1. Introduction to Web Authoring
  2. HTML Basics
    • 2.1 Structure of an HTML Document
    • 2.2 Text Formatting Tags
    • 2.3 Lists
    • 2.4 Hyperlinks
    • 2.5 Images
  3. CSS Basics
    • 3.1 Inline, Internal, and External CSS
    • 3.2 Basic CSS Properties
    • 3.3 CSS Selectors
  4. Page Layout and Structure
    • 4.1 Divisions (<div>)
    • 4.2 Page Layout Techniques
  5. Practical Example: Creating a Basic Web Page
  6. Saving and Viewing Web Pages
  7. Validation and Debugging
  8. Summary and Tips

1. Introduction to Web Authoring

Web authoring involves creating and designing websites. The IGCSE ICT 0417 syllabus requires a basic understanding of HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) to create simple web pages. This guide provides practical examples with solutions and explanations to help you build a functional website.

2. HTML Basics

2.1 Structure of an HTML Document

The basic HTML structure defines the layout of a web page.

Example: Creating the Page Structure

html
<!DOCTYPE html>
<html>
  <head>
    <title>My First Web Page</title>
  </head>
  <body>
    <h1>Welcome to My Website</h1>
    <p>This is a simple HTML page.</p>
  </body>
</html>

Expected GUI Output:
When opened in a browser, you’ll see a header that says "Welcome to My Website" and a paragraph below it saying "This is a simple HTML page."

2.2 Text Formatting Tags

Bold and Italics

html
<p><b>Bold Text</b> and <i>Italic Text</i> appear differently.</p>

Expected GUI Output:
The words "Bold Text" will appear in bold, and "Italic Text" will appear in italics.

2.3 Lists

Example: Creating an Unordered and Ordered List

html
<ul>
  <li>HTML</li>
  <li>CSS</li>
</ul>
<ol>
  <li>Introduction to HTML</li>
  <li>CSS Basics</li>
</ol>

Expected GUI Output:
An unordered (bullet) list with "HTML" and "CSS" and an ordered (numbered) list with "Introduction to HTML" and "CSS Basics."

2.4 Hyperlinks

Example: Adding a Link

html
<a href="https://www.example.com" target="_blank">Visit Example</a>

Expected GUI Output:
A clickable link "Visit Example" opens in a new tab.

2.5 Images

Example: Adding an Image

html
<img src="image.jpg" alt="Description of Image" width="200" height="100">

Expected GUI Output:
An image with a width of 200 pixels and height of 100 pixels, displayed with an alt description for accessibility.

3. CSS Basics

3.1 Inline, Internal, and External CSS

Example of Inline CSS

html
<p style="color: red;">This is red text.</p>

Expected GUI Output:
The text "This is red text." will appear in red.

3.2 Basic CSS Properties

Example of Using Colors, Fonts, and Alignment in CSS

css
h1 {
  color: blue;
  text-align: center;
  font-family: Arial, sans-serif;
}

Expected GUI Output:
The <h1> heading will appear in blue, centered, and in Arial font.

3.3 CSS Selectors

  • Class Selector
html
<p class="highlight">Highlighted Text</p>

css
.highlight {
  background-color: yellow;
  color: black;
}

Expected GUI Output:
The paragraph "Highlighted Text" will appear with a yellow background.

4. Page Layout and Structure

4.1 Divisions (<div>)

Example of Divisions and Background Color

html
<div style="background-color: lightgrey; padding: 10px;">
  <h2>About Me</h2>
  <p>I am a student learning web design.</p>
</div>

Expected GUI Output:
A light grey box containing the header "About Me" and a short paragraph below it.

4.2 Page Layout Techniques

Box Model and Margins

css
.container {
  margin: 10px;
  padding: 20px;
  border: 2px solid black;
}

When applied to a <div> with the class "container," this code will add spacing around and inside the div, and a solid black border will appear around it.

5. Practical Example: Creating a Basic Web Page

This example combines HTML and CSS to create a complete webpage.

HTML File: index.html

html
<!DOCTYPE html>
<html>
  <head>
    <title>My Web Page</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header>
      <h1>Welcome to My Portfolio</h1>
    </header>
    <main>
      <section class="intro">
        <p>Hello! I am a web designer.</p>
      </section>
      <section>
        <img src="profile.jpg" alt="Profile Image" width="150">
      </section>
      <footer>
        <p>Contact me at: <a href="mailto:info@example.com">info@example.com</a></p>
      </footer>
    </main>
  </body>
</html>

CSS File: styles.css

css
body {
  font-family: Arial, sans-serif;
  background-color: #f9f9f9;
}

header {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 20px;
}

.intro {
  text-align: center;
  color: #333;
}

footer {
  background-color: #eee;
  padding: 10px;
  text-align: center;
  color: #555;
}

Expected GUI Output:

  • A webpage with a dark header displaying "Welcome to My Portfolio."
  • A centered introduction section, a profile image, and a footer with contact information.

6. Saving and Viewing Web Pages

To view the web page:

  1. Save the HTML file as index.html and the CSS file as styles.css in the same folder.
  2. Open index.html in a web browser to see the formatted page.

7. Validation and Debugging

Use the W3C Validator to check HTML syntax errors:

  • Go to the W3C Validator, upload index.html, and check for errors.
  • For CSS, use the CSS Validator to ensure styles are correct.

8. Summary and Tips

  • Use Consistent Naming: Always name files and classes consistently.
  • Comment Your Code: Adding comments helps in debugging and organizing code.
  • Experiment and Practice: Try creating different layouts and styling options to strengthen your understanding.

Understanding the Three Web Development Layers:

  1. Content Layer (HTML):

    • This layer involves the structure and content of the webpage. It is created using HTML (HyperText Markup Language).
    • Example of HTML Structure:
      html
      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample Web Page</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Welcome to My Web Page</h1>
    <p>This is a sample paragraph.</p>
</body>
</html>

  2. Presentation Layer (CSS):

    • This layer controls the visual appearance of the content. It is handled using CSS (Cascading Style Sheets).
    • Example of CSS Code:
      css
      body {
    background-color: lightblue;
    font-family: Arial, sans-serif;
}
h1 {
    color: navy;
}
p {
    font-size: 16px;
    color: black;
}

  3. Behaviour Layer (JavaScript):

    • This layer allows for interactive features and dynamic content using scripting languages like JavaScript.

21.2 Create a Web Page

Creating the Content Layer of a Web Page:

HTML Structure

  1. Head Section:

    • Page Title: Displayed in the browser's title bar.
    • External Stylesheets: Linked to provide styling.
    • Meta Tags: Include charset, description, keywords, author, and viewport settings.

    Example of a Head Section:

    html
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Web Page</title>
    <link rel="stylesheet" href="styles.css">
    <meta name="description" content="A sample web page for IGCSE ICT">
    <meta name="keywords" content="HTML, CSS, IGCSE, ICT">
    <meta name="author" content="Your Name">
</head>

  2. Body Section:

    • Include headings, paragraphs, tables, and images.

    Example of Body Section:

    html
    <body>
    <h1>My Web Page</h1>
    <p>This is a paragraph describing the content of the webpage.</p>
    <table>
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
        <tr>
            <td>John Doe</td>
            <td>30</td>
        </tr>
        <tr>
            <td>Jane Smith</td>
            <td>25</td>
        </tr>
    </table>
    <img src="image.jpg" alt="Sample Image" width="300" height="200">
</body>

Exercise 1: Create a Basic Web Page

  1. Task: Create a basic HTML web page with the following elements:
    • A title in the head section.
    • A header (<h1>) in the body section.
    • A paragraph with some text.
    • A table with two columns (Name and Age) and two rows of data.

GUI Solution:

  1. Open a text editor (e.g., Notepad).
  2. Type the following code:
    html
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Web Page</title>
</head>
<body>
    <h1>Welcome to My First Web Page</h1>
    <p>This is a paragraph about myself.</p>
    <table border="1">
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
        <tr>
            <td>Alice</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Bob</td>
            <td>24</td>
        </tr>
    </table>
</body>
</html>
  3. Save the file as index.html.
  4. Open index.html in a web browser.

21.3 Use Stylesheets

Creating the Presentation Layer of a Web Page:

  1. Using CSS:

    • Style the elements of the webpage using CSS in an external file or inline styles.

    Example of External CSS:

    css
    body {
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
}
h1 {
    color: blue;
}
table {
    width: 100%;
    border-collapse: collapse;
}
th, td {
    border: 1px solid #ddd;
    padding: 8px;
}

  2. Attaching CSS:

    • Use the <link> tag in the head section to attach the CSS file.

Exercise 2: Apply Styles to Your Web Page

  1. Task: Modify the web page created in Exercise 1 to include an external stylesheet that changes the background color and font styles.

GUI Solution:

  1. Create a new file named styles.css with the following CSS:
    css
    body {
    background-color: lightgray;
    font-family: 'Verdana', sans-serif;
}
h1 {
    color: green;
    text-align: center;
}
table {
    margin: auto;
    border: 2px solid black;
}
th {
    background-color: lightblue;
}
td {
    text-align: center;
}
  2. Save the file in the same directory as index.html.
  3. Modify the <head> section of index.html to include the link to the stylesheet:
    html
    <link rel="stylesheet" href="styles.css">
  4. Refresh the browser to see the changes.

Additional Concepts

  • Tables: Used to structure content. Remember to define headers, rows, and data cells.
  • Images: Always provide alternative text for accessibility.
  • Hyperlinks: Create links to other pages or resources, ensuring relative paths are used for local files.

Example of Hyperlink:

html
<a href="anotherpage.html">Go to Another Page</a>
  • Bookmarks: Use the id attribute to create internal links.

Example of a Bookmark:

html
<a href="#section1">Go to Section 1</a>
<h2 id="section1">Section 1</h2>

Final Exercise

Exercise 3: Create a Complete Web Page

  1. Task: Create a complete web page that includes:
    • A title.
    • A header.
    • A paragraph.
    • A table with at least three rows.
    • A list (ordered or unordered).
    • An image.
    • A hyperlink to another page (create a dummy contact.html).
    • Internal bookmark links.

GUI Solution:

  1. Follow the previous instructions to create the HTML structure. Here’s an example solution:

    html
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Complete Web Page</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Welcome to My Complete Web Page</h1>
    <p>This page demonstrates various HTML and CSS elements.</p>
    <table>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>City</th>
        </tr>
        <tr>
            <td>John</td>
            <td>30</td>
            <td>New York</td>
        </tr>
        <tr>
            <td>Anna</td>
            <td>28</td>
            <td>London</td>
        </tr>
        <tr>
            <td>Mike</td>
            <td>35</td>
            <td>Paris</td>
        </tr>
    </table>
    <h2>My Favorite Books</h2>
    <ul>
        <li>The Great Gatsby</li>
        <li>1984</li>
        <li>To Kill a Mockingbird</li>
    </ul>
    <img src="image.jpg" alt="Sample Image" width="300" height="200">
    <a href="contact.html">Contact Me</a>
    <a href="#section1">Go to Section 1</a>
    <h2 id="section1">Section 1</h2>
    <p>This is Section 1 of the webpage.</p>
</body>
</html>

  2. Save your files, and open the HTML in a browser to see the complete web page in action.

Post a Comment

0 Comments