Website Authoring (HTML - CSS) - Topical Book - Year 9

# Website Authoring (HTML - CSS) ## Content * **SECTION 1 – THEORY** * Content Layer – HTML * HTML Table * Meta Tag * Presentation Layer * Use Stylesheets * **SECTION 2 – PRACTICAL** * Worksheets * HTML – CSS QUIZ ## What is a Website? * A website is a collection of individual but related web pages often stored together and hosted by a web server. * Web pages can include different objects such as text, sound, video, and still images. * A web page is created using three layers: * The content layer * The presentation layer * The behavior layer ### The Content Layer * This layer is where the content of the web page, such as text and images, are placed. * It is also where the page structure, such as frames, tables, hyperlinks, etc., are placed. * This layer is sometimes called the structure layer. * The content/structure layer is developed in HTML. ## Content Layer - HTML ### What is HTML? * HTML is an abbreviation for HyperText Markup Language. * It is a text-based language used to develop the content layer of websites. * Files are written in HTML using a simple text editor (or a web-authoring package such as Adobe Dreamweaver or Microsoft Expression Web). * Files are written in text format and are usually saved with an .htm (or .html) file extension. * These files are recognized by web browsers such as Microsoft Edge, Internet Explorer, Google Chrome, or Mozilla Firefox as web pages. * HTML tags are shown using angle brackets around them like this: `` * The angle brackets tell the browser that this is a markup tag and not text to be placed on the web page. * The browser does not display the HTML tags but uses them to display the content of the page. * Most HTML commands have two tags: one to open the command and one to close it. Each tag has a pair of angle brackets around it. * The tag `` tells the browser that this is the end of this markup language and appears at the end of the markup. The forward slash shows that it is a closing tag. All other HTML tags and all web page content will appear between these tags. ### The Head and Body Sections of a Web Page * Each web page has two clearly defined sections: * Head * Body #### The Head Section * The head section starts with `` and closes with ``. Objects between these tags are not usually displayed by the web browser. * Only a few tags are universally accepted within the head section of a web page; these are: ``, `

My First Heading

My first paragraph.

``` * Start tag: `

` * Element content: My First Heading * End tag: `

` * `

` * My first paragraph. * `

` * `
` * none * none ## HTML Tags ### HTML Formatting Elements * Formatting elements were designed to display special types of text: * `` - Bold text * `` - Important text * `` - Italic text * `` - Emphasized text * `` - Marked text * `` - Smaller text * `` or `` - Deleted text * `` or `` - Underlined text * `` - Subscript text * `` - Superscript text * `` - Quotation * `
` - Single line break * HTML `` Tag ### HTML Align Tag * Example: ```html

Left Heading

center Heading

right Heading

``` ### Background Color * The `bgcolor` property defines the background color for an HTML element. * Example: ```html

This is a heading

This is a paragraph.

``` * Set background color for heading and paragraph: ```html

This is a heading

This is a paragraph.

``` ### HTML Images * HTML images are defined with the `` tag. * The source file (`src`), alternative text (`alt`), width, and height are provided as attributes: * `

The formatting issues you're experiencing are likely due to how Markdown is interpreted. The hashtags (\

  • Website Authoring (HTML - CSS)

Content

  • SECTION 1 – THEORY

  • Content Layer – HTML

  • HTML Table

  • Meta Tag

  • Presentation Layer

  • Use Stylesheets

  • SECTION 2 – PRACTICAL

  • Worksheets

  • HTML – CSS QUIZ

What is a Website?

  • A website is a collection of individual but related web pages often stored together and hosted by a web server.

  • Web pages can include different objects such as text, sound, video, and still images.

  • A web page is created using three layers:

  • The content layer

  • The presentation layer

  • The behavior layer

The Content Layer

  • This layer is where the content of the web page, such as text and images, are placed.

  • It is also where the page structure, such as frames, tables, hyperlinks, etc., are placed.

  • This layer is sometimes called the structure layer.

  • The content/structure layer is developed in HTML.

Content Layer - HTML

What is HTML?

  • HTML is an abbreviation for HyperText Markup Language.

  • It is a text-based language used to develop the content layer of websites.

  • Files are written in HTML using a simple text editor (or a web-authoring package such as Adobe Dreamweaver or Microsoft Expression Web).

  • Files are written in text format and are usually saved with an .htm (or .html) file extension.

  • These files are recognized by web browsers such as Microsoft Edge, Internet Explorer, Google Chrome, or Mozilla Firefox as web pages.

  • HTML tags are shown using angle brackets around them like this:

  • The angle brackets tell the browser that this is a markup tag and not text to be placed on the web page.

  • The browser does not display the HTML tags but uses them to display the content of the page.

  • Most HTML commands have two tags: one to open the command and one to close it. Each tag has a pair of angle brackets around it.

  • The tag tells the browser that this is the end of this markup language and appears at the end of the markup. The forward slash shows that it is a closing tag. All other HTML tags and all web page content will appear between these tags.

The Head and Body Sections of a Web Page

  • Each web page has two clearly defined sections:

  • Head

  • Body

The Head Section

  • The head section starts with and closes with . Objects between these tags are not usually displayed by the web browser.

  • Only a few tags are universally accepted within the head section of a web page; these are: , , and .

The Body Section

  • The body section starts with and closes with . This is where all the content to be displayed on the web page is placed.

Basic HTML Tags

  • Here are a few basic HTML tags:

  • *

  • *

How to View HTML Source Code

  • Right-click in an HTML page and select "View Page Source" (in Chrome) or "View Source" (in Edge), or similar in other browsers. This will open a window containing the HTML source code of the page.

HTML Example

  • ```html

    My First Heading
    My first paragraph. 

* Start tag: 
* Element content: My First Heading
* End tag: 
* 
* My first paragraph.
* 
* Single line break
* none
* none
## HTML Tags
### HTML Formatting Elements
* Formatting elements were designed to display special types of text:
* `` - Bold text
* `` - Important text
* `` - Italic text
* `` - Emphasized text
* Marked text
* Smaller text
*  or  - Deleted text
*  or  - Underlined text
*  - Subscript text
*  - Superscript text
* Quotation
* Single line break
* HTML  Tag
### HTML Align Tag
* Example:

html

Left Heading

center Heading

right Heading

### Background Color
* The `bgcolor` property defines the background color for an HTML element.
* Example:

html

This is a heading

This is a paragraph.

* Set background color for heading and paragraph:

html

This is a heading

This is a paragraph.

```

HTML Images

  • HTML images are defined with the `` tag.

  • The source file (src), alternative text (alt), width, and height are provided as attributes:

  • *

Mock Revision
Keywords (pg. 17)

  • Keywords are specific words that have predefined meanings in a programming language or context. In HTML, keywords are often attributes of tags (e.g., src, alt, width, height in ``).

HTML Basics (pg. 3, 4, 5, 6, 7, 8)

  • HTML (HyperText Markup Language): The standard markup language for creating web pages.

  • Tags: HTML uses tags enclosed in angle brackets to define elements (e.g., ``).

  • Elements: Consist of a start tag, content, and an end tag (e.g., My First Heading).

  • Attributes: Provide additional information about HTML elements (e.g., ``).

  • Structure: An HTML document typically includes , ,
    , and sections.

Meta Tag (pg. 15-16)

  • The `` tag provides metadata about the HTML document. Metadata is data (information) about data.

  • Meta tags are placed inside the `` element and are used to specify character set, page description, keywords, author, and other metadata.

  • Example:

    • `` (Sets the character set to UTF-8)

    • `` (Provides a description of the page)

    • `` (Specifies keywords for search engines)

CSS (Cascading Style Sheets) and its Types (pg. 18-25)

  • CSS: A style sheet language used for describing the look and formatting of a document written in HTML.

  • Inline CSS:

    • Applied directly to HTML elements using the style attribute.

    • Example: This is a heading

  • Internal CSS:

    • Defined within the section of an HTML page using the tag.

    • Example:

    body {
  background-color: lightblue;
}
h1 {
  color: white;
  text-align: center;
}
p {
  font-family: verdana;
}

  • External CSS:

    • Defined in separate .css files.

    • Linked to HTML documents using the `` tag.

    • Example:

HTML Tags (pg. 33, 34)

  • ``: Defines a paragraph.

  • to: Defines headings of different levels.

  • ``: Defines a line break.

  • `: Defines an image, withsrc,alt,width, andheight` attributes.

  • ``