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.

• ``