Website Authoring Part 1

​Chapter 21 - Website Authoring

​Continue with Microsoft Expression 4 and type the html and CSS from your textbook.

​Your completed table should look like this.

Faster students can try to change the font styles, colour, and sizes by exploring the tools on top of MWE4.

​This the meta-information. It shows hidden information about the webpage.

• <html>: Defines the root of an HTML document.

• <head>: Contains meta-information about the document.

• <title>: Specifies the title of the document, shown in browser's title bar or tab.

• <link rel="stylesheet" href="styles.css">: Links a CSS file to the HTML document for styling.

• meta> tags:

  • charset="UTF-8": Declares the character encoding for the web page.

  • name="keywords" content="IGCSE, ICT, Computers": Provides search engines with keywords to help index the page.

  • name="description" content="A page about IGCSE ICT": Gives a brief summary of the web page's content.

  • name="author" content="John Smith": Indicates the author of the webpage.

  • name="viewport" content="width=device-width, initial-scale=1.0": Controls the page's dimensions and scaling on different devices, crucial for responsive design.

  • base target="_self": Sets the default target for all hyperlinks and forms on the page to open in the same context as they were clicked.

​Not required in the exams.

​<body>: The content container for the HTML document.

• <table style="width:100%;">: Defines a table with a width that spans 100% of its container's width.

• <tr>: Denotes a table row within the table.

• <th>: Represents a table header cell, which is typically bold and centered by default. Used for the column titles "Day", "Staff", and "Room".

• <td>: Defines a standard table cell, which contains data like "Monday", "Anisha", and "R327".

• </tr>, </th>, </td>: Closing tags for the respective elements.

• </table>: Ends the table element.

• </body>: Closes the body section of the HTML document.

Multiple Choice

Which tag is used to define a row in an HTML table?

• A) <td>

• B) <th>

• C) <tr>

• D) <tbody>

Multiple Choice

What does the <th> tag define in an HTML table?

• A) A standard data cell

• B) A header cell that typically contains column titles

• C) A table row

• D) A table footer

Multiple Choice

If a <table> tag in an HTML document has an inline style set as , what does it represent?

• A) The table will have a width that adjusts to 100 pixels.

• B) The table will fill 100% of the available horizontal space of its container element.

• C) The table will have a fixed width regardless of the container size.

• D) The table's width will automatically adjust to the width of the content inside.

​What is HTML?

• ​Definition: HTML stands for HyperText Markup Language.

• Purpose: The standard markup language for documents designed to be displayed in a web browser.

• Importance: It forms the building block of all websites and web applications.

The Doctype Declaration

• <!DOCTYPE html>: Defines the document type and version of HTML.

• Purpose: Ensures browser compatibility and proper rendering.

The HTML Element

• <html>: The root element of an HTML page.

• Contains: All the content of a webpage, including the head and body.

The Head Section

• <head>: Contains meta-information about the document.

• Includes:

  • <title>: The title of the webpage.

  • Links to scripts and stylesheets.

  • Meta information like character set and keywords.

The Body Section

• Content:

  • <body>: Contains the content of the HTML document.

  • Includes: Text, images, links, and other content visible to the use

​This is a simple HTML Structure.

​Bring your chairs and come to the front. (Demonstration time)

​Challenge 1 (previous demonstration):

​https://docs.google.com/document/d/1knONhVe7tVX1BAZTIiYlaK49Mr_pF-n7kR4zi1b4brA/copy

​Challenge 2 :

​https://docs.google.com/document/d/1SzpQp2gT-Yo5YCmAheh3_tYsNiK-VCiAG_ehCdbsyWg/copy

Past year challenge (March 2023):

​https://drive.google.com/drive/folders/1x2qdA11DN8LSj74U2qX-eWnOyqInXqKe?usp=sharing