Skip to content

LLC: Webmaking with HTML and CSS

Jump to bottom
Jonathan edited this page Jun 19, 2023 · 19 revisions

Information

Current versions

Links

Extras

Learner resources

HTML reference

HTML fundamentals

  1. HTML is made of elements.
  2. Elements are created using tags.
  3. Tags use angle brackets, e.g. <h1> ... </h1> and usually (though not always) come in pairs, which are put at the start and end of the content they contain <p> Content goes here </p>.
    • An element's start and end tags share the name of the element however the end tag has a forward slash to distinguish it from the start tag, e.g. <strong> and </strong>.
  4. Most elements can (and often do) contain other elements, e.g. a main element containing a section element:
<main>
  <section>
    Some section content here
  </section>
</main>

HTML element reference (alphabetical)

Anchor

<a href="https://canadalearningcode.ca">Visit Canada Learning Code's website to find out about us</a>

Basic elements

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <!-- page content -->
  </body>
</html>
  • Elements that should be included on every web page.

Body

<body>
  <!-- web page content to be displayed goes in here -->
</body>

DOCTYPE

<!DOCTYPE html>
  • Needs to be the absolute first thing in an HTML document.
  • Identifies the rest of the document (web page) as following the HTML standard, which helps browsers to properly display the document.
  • See basic elements.

Emphasis

<em></em>

Head (basic element)

<head>
  <!-- head content, like scripts or style sheets, goes here -->
</head>
  • Not to be confused with headings or the header element, the head element contains extra information for a web page, such as links to scripts and external style sheets.
  • No element in head is displayed on a web page per se, though elements in head (like style) can affect how other web page elements are styled or displayed.
  • See basic elements.

Headings

<h1>Web page title<h1>

  <h2>Section 1 heading or title</h2>
    <h3>Section 1 subheading A</h3>
    <h3>Section 1 subheading B</h3>

  <h2>Section 2 heading or title</h2>
    <h3>Section 2 subheading A </h3>
  • 6 levels, h1 to h6.
  • h1 is the highest-level (most important) heading and there should only ever be one per page.

HTML (basic element)

<html>
  ... web page content goes here ...
</html>
  • html is the root element of the web page, containing all other HTML elements that are part of that web page.
  • See basic elements.

List item

See the entry for unordered list and list items

Main

<main>
  Main web page content goes in here!
</main>
  • main is a sectioning element used to contain/indicate the main or central content on a web page.
  • There should only be one main element per web page and its typically a direct child of the body element.

Mark

<mark></mark>

Paragraph

<p>Here is some web page text.</p>
  • Despite its name, used to contain any amount of regular page text.

Section

<section>
  This section is about topic A.
</section>
<section>
  This section is about topic B.
</section>
  • section is a sectioning element used to separate and group web page content into related sections.

Side comment

<small></small>

Small

*See entry for side comment.

Strong

<p>The strong element can be used to <strong>really emphasize</strong> important text.</p>
  • strong is a content element that is, by default, equivalent to applying bold styling to the text contained within it.

Unordered list and list items

<ul>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>
  • Combination of ul and li elements
  • <ul> ... </ul> container for the items in the list.
  • <li> ... </li> element for each list item.
  • Unordered list = bulleted list (a numbered list uses the ordered ol element)

CSS reference

Properties

Colours

Named colours

  • Some colours can be specified by name, e.g., background-color: red;

  • Note that the color name is not enclosed in quotes, i.e., it is red and not 'red'.

  • Select named colours, some of which are used in the starter project, include:

    • darkslategray
    • gold
    • goldenrod
    • hotpink
    • lightcyan
    • lightgray
    • lightgreen
    • mediumvioletred
    • skyblue
    • white
    • whitesmoke
    • yellowgreen

  • A full list of named colours can be found in the MDN Web Docs References - <named-color> (External link)

Hexadecimal

RGB

MDN Web Docs References - rgb()

  • Colours can be specified using an expression,rgb( R, G, B) where each of R, G, and B refer to the amount of red, green, and blue present in a colour.
  • R, G, and B can be written in one of three ways:
    1. as a number, between 0% and 255. e.g. rgb(31 120 50) (dark green)
    2. as a percentage, between 0 and 100%, e.g. rgb(30% 20% 50%) (purple)
    3. using the keyword none
  • All of the values must be of the same type (i.e., all numbers or all percentages) or none
Clone this wiki locally