IGCSEICTCIERevision Notes17. Website Authoring17.1 Website AuthoringHTML

HTML (CIE IGCSE ICT)

Revision Note

Becci Peters

Expertise

Computer Science

HTML

Creating the Content Layer

  • The content layer of a web page is made up of HTML elements such as headings (<h1>, <h2>, etc.), paragraphs (<p>), links (<a>), images (<img>), and more
  • HTML elements are the building blocks of web pages and are used to structure and organise the content

  • The head section contains information about the web page that's not displayed on the page itself

    • It's enclosed by <head> and </head> tags

    • The content inside the head tag is displayed in the browser tab

  • The body section contains the main content of the web page, such as text, images, videos, hyperlinks, tables etc.
    • It's enclosed by <body> and </body> tags
    • The content inside the body tag is displayed in the browser window

Head Section Elements

Page Title

  • The <title> element is used to set the page title that displays in the browser tab
  • It is placed inside the <head> section of the HTML document

External Stylesheets

  • External stylesheets are linked in the <head> section using the <link> element
  • The rel the attribute is set to "stylesheet", and the href the attribute contains the relative file path to the CSS file
  • Stylesheets are loaded in the order they are listed, so hierarchy is important

Metatags

  • Metatags are snippets of text in HTML that describe a page's content
  • They don't appear on the page itself but in the page's code
  • Search engines, browsers and other web services use metatags to glean information about a web page
  • Metatags provide additional information about the web page to the browser and search engines

  • E.g.
    • Charset
      • The <meta charset="UTF-8"> the tag specifies the character encoding for the HTML document
      • UTF-8 is the most common character encoding and includes almost all characters from all writing systems
    • Keywords
      • The keywords attribute in a <meta> tag is a comma-separated list of words that represent the content of the web page
      • It was originally intended to help search engines understand the content of a page, but it's less relevant today as search engines have become more sophisticated
    • Author
      • The author attribute in a <meta> the tag identifies the author of the web page
      • It can be helpful for copyright purposes and for readers who want to know the source of the content
    • Description
      • The description attribute in a <meta> tag provides a concise explanation of the content of the web page
      • This description often appears in search engine results and can influence click-through rates
    • Viewport
      • The <meta name="viewport" content="width=device-width, initial-scale=1"> a tag makes your web page display correctly on all devices (desktop, tablet, mobile)
      • It controls the viewport size and the initial zoom level

Default Target Windows

  • The target attribute of the <base> the element can set a default target window for all links on a page
  • For example, <base target="_blank"> will open all links in a new window or tab

e.g.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>My Web Page</title>
    <link rel="stylesheet" href="styles.css">
    <meta name="description" content="This is my web page">
    <meta name="author" content="Your Name">
    <base target="_blank">
</head>
<body>
    <h1>Welcome to My Web Page!</h1>
    <p>This is a sample paragraph.</p>
</body>
</html>

Worked example

You are a student creating a website for your IGCSE ICT revision work. You have produced some HTML, but have not yet added the logo or merged the cells. You are aiming to produce the following page.

screenshot-2023-05-24-at-14-51-25

Fig. 1

Part of the markup you have produced is:

<table>
<tr>
<td><h1>IGCSE ICT</h1></td>
</tr>
<tr>
<td><h3>Theory</h3></td>
<td><h3>Practical 1</h3></td>
<td><h3>Practical 2</h3></td>
</tr>
<tr>
<td><h3>2 hour<br>Theory exam</h3></td>
<td><h3>2.5 hour<br>Practical exam</h3></td>
<td><h3>2.5 hour<br>Practical exam</h3></td>
</tr>
</table>

a. Write the HTML that would display the image called “Logo.jpg” as shown in Fig. 1. If the browser cannot find the image, then the text “Tawara School Logo” will be displayed.

[5]

<td rowspan="3"><img src="Logo.jpg" alt="Tawara School
Logo"></td>

One mark for each point

<td rowspan = ”3”> [1]
<img  [1]
src = ”Logo.jpg”  [1]
alt = ”Tawara School logo”>  [1]
</td>  [1]

or

<td rowspan="3"><img alt="Tawara School Logo” [3]
src="Logo.jpg"></td> [2]

b. The third line of HTML currently shown in the code does not produce the title as shown in Fig. 1. Write the HTML that would produce the title as shown in Fig. 1.

[2]

<td colspan="3"><h1>IGCSE ICT </h1></td>

<td colspan  [1]
="3">  [1]

Creating Body Content

  • The <body> section of the HTML document is where the main content goes
  • This can include text, images, tables, links, and more

Tables in Webpages

  • In the early days of web development, tables were often used to create complex page layouts
  • They provide a way to arrange data into rows and columns
  • By utilising cell padding, cell spacing, and borders, developers could manipulate the appearance of the page
  • Today, tables are primarily used for displaying tabular data - information that is logically displayed in grid format
  • For example, financial data, timetables, comparison charts and statistical data are often presented in tables
  • Tables make it easy for users to scan, analyse and comprehend the data
  • Tables also enhance accessibility. Screen readers for visually impaired users can read tables effectively if they are correctly structured
  • Semantic HTML elements like <table>, <tr>, <th>, and <td> help in conveying the structure and purpose of the data to these assistive technologies

Inserting a Table

  • Tables in HTML are created using the <table> element
  • Table rows are defined with <tr>, headers with <th>, and data cells with <td>
  • Use rowspan and colspan attributes to make cells span multiple rows or columns

Table Attributes

  • Set table and cell sizes with the width and height attributes, using pixel or percentage values
  • Apply styles to tables with inline CSS or by linking an external stylesheet

Inserting Objects

  • Insert text with elements like <p> for paragraphs and <h1> to <h6> for headings
  • Insert images with the <img> element, using the src attribute to specify the image source
  • Use the alt attribute to provide alternate text for images
  • Adjust image or video size with the width and height attributes
  • Insert sound clips and videos with the <audio> and <video> elements, adding controls for playback controls, and autoplay to start automatically
<body>
    <h1>Welcome to My Web Page!</h1>
    <p>This is a sample paragraph.</p>
    <table style="width:100%">
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
        </tr>
    </table>
    <img src="image.jpg" alt="My Image" width="500" height="600">
    <audio controls>
        <source src="sound.mp3" type="audio/mpeg">
    </audio>
    <video controls autoplay>
        <source src="video.mp4" type="video/mp4">
    </video>
</body>

Styling

Using the <div> Tag

  • The <div> a tag is a container unit which encapsulates other page elements and divides the HTML document into sections
  • <div> elements are block level elements and are often used to group elements to format them with styles

Applying Styles and Classes

  • Styles can be applied directly to an element using the style attribute
  • Classes are defined in CSS and can be applied to HTML elements using the class attribute
  • Multiple elements can share the same class

Text Styling Tags

  • Use the <h1> to <h6> tags for headings, with <h1> being the largest and <h6> the smallest
  • Use the <p> tag for paragraphs
  • Use the <li> tag for list items within <ul> (unordered/bullet list) or <ol> (ordered/numbered list)

Applying Styles to Lists

  • The <ul> tag creates an unordered list, and <ol> creates an ordered list
  • Styles can be applied directly to these lists using the style attribute or by using a class
<html>
<head>
    <style>
        .blue-text {
            color: blue;
        }
        .large-font {
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div class="blue-text large-font">
        <h1>Blue Heading</h1>
        <p>Blue paragraph.</p>
        <ul style="list-style-type:circle;">
            <li>Blue list item 1</li>
            <li>Blue list item 2</li>
        </ul>
    </div>
</body>
</html>

Bookmarks & Hyperlinks

Creating a Bookmark

  • A bookmark in HTML is a way to provide links to specific sections of a web page
  • It allows users to navigate easily to different sections of content without having to scroll through the entire page
  • Bookmarks are created using the id attribute in HTML
  • They allow users to jump to specific sections within a page
  • Example: <div id="section1">This is Section 1</div>
  • Any tag can be turned into a bookmark by adding an id attribute to it
  • The id should be unique and not used more than once on a page
  • To link to the bookmark, use the <a> tag with a href value set to # followed by the id of the bookmark
  • By combining the <a> tag and the href attribute with a specific id, you can create a link that takes the user to that bookmarked section of the page

Creating Hyperlinks

  • A hyperlink, often just called a 'link', is a reference to data that a reader can directly follow by clicking or tapping
  • It is one of the core elements of the World Wide Web, as it enables navigation from one web page or section to another
  • Hyperlinks are created using the <a> (anchor) tag in HTML
  • They can link to different sections of the same page, other locally stored web pages, or external websites
    • Text Hyperlinks: Usually, a portion of text that is highlighted in some way, like being underlined or a different colour
    • Image Hyperlinks: An image that you can click on to take you to another page or another part of the same page
    • Button Hyperlinks: A clickable button that redirects the user to another page or section
  • Hyperlinks utilise the 'href' attribute within the <a> tag in HTML
  • The 'href' attribute contains the URL of the page to which the link leads
  • The text between the opening <a> and closing </a> tags are the part that will appear as a link on the page

Hyperlink Types

  • Same-page bookmark: Use the # followed by the id of the element, you want to jump to. Example: <a href="#section1">Go to Section 1</a>
  • Locally stored web page: Use the relative path to the file. Example: <a href="contact.html">Contact Us</a>
  • External website: Use the full URL. Example: <a href="https://www.google.com">Google</a>
  • Email link: Use mailto: followed by the email address. Example: <a href="mailto:[email protected]">Email Us</a>
  • Specified location: Use the target attribute to specify where to open the link. _blank for a new tab or window, _self for the same tab or window, or a named window. Example: <a href="https://www.google.com" target="_blank">Google</a>

<html>
<body>
    <div id="section1">
        <h1>This is Section 1</h1>
        <a href="#section2">Go to Section 2</a><br>
        <a href="contact.html">Contact Us</a><br>
        <a href="https://www.google.com" target="_blank">Google</a><br>
        <a href="mailto:[email protected]">Email Us</a>
    </div>
    <div id="section2">
        <h1>This is Section 2</h1>
        <a href="#section1">Go back to Section 1</a>
    </div>
</body>
</html>

Relative and Absolute File Paths

Relative File Paths

  • A relative file path specifies the location of a file or directory about the current location, or the location of the file that references it
  • For instance, if an HTML file and an image are in the same directory, you can reference the image in the HTML file using just its name (e.g., image.jpg)

Absolute File Paths

  • An absolute file path specifies the exact location of a file or directory, regardless of the current location
  • It includes the entire path from the root directory to the file or directory in question
  • For instance, an absolute file path on a Windows system might look like C:\Users\Username\Documents\image.jpg

Reasons Not to Use Absolute File Paths for Local Objects

  • Using absolute file paths for local web pages or objects can lead to broken links when the website is moved to a different directory or server
  • The web page or object might not exist at the specified location on the server or the user's computer
  • If a website is moved or backed up, absolute links will still point to the original location, not the new or backup location

You've read 0 of your 0 free revision notes

Get unlimited access

to absolutely everything:

  • Downloadable PDFs
  • Unlimited Revision Notes
  • Topic Questions
  • Past Papers
  • Model Answers
  • Videos (Maths and Science)

Join the 100,000+ Students that ❤️ Save My Exams

the (exam) results speak for themselves:

    Next topic

    Did this page help you?

    Becci Peters

    Author: Becci Peters

    Becci has been a passionate Computing teacher for over 9 years, teaching Computing across the UK helping to engage, interest and develop confidence in the subject at all levels. Working as a Head of Department and then as an educational consultant, Becci has advised schools in England, where her role was to support and coach teachers to improve Computing teaching for all. Becci is also a senior examiner for multiple exam boards covering GCSE & A-level. She has worked as a lecturer at a university, lecturing trainee teachers for Computing.