Skip to content

LLC: Webmaking with HTML and CSS

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

Important links

Quick navigation

Learner references

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>
  • Used to create clickable links on a page.

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>
  • All the elements contained within this element are displayed when a web page loads, as opposed to elements inside the head element which aren't displayed.

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

CSS syntax

selector { property: value; }

Selectors

Patterns that are used to refer to specific elements on a web page.

  • element type selector— the name of the element type, e.g. section (to select all sections).
section { /* ... */ }
p { /* ... */ }
  • class selector— a dot . followed by the name of a class, e.g. .big (to select all elements with the big class). Classes are added to elements using the class HTML attribute, e.g., <p class="big"> ... </p> (a paragraph element with the big class).
.big { /* ... */ }
.dark { /* ... */ }
  • descendant selector— an expression made of two or more selectors separated by a space . Matches elements of the second (or later) selector that are contained within the first (or earlier) selectors, e.g., h1 em (selects all em elements that are contained in an h1 element).
h1 em { /* ... */ }
main section { /* ... */ }

Assorted CSS properties and values

  • background-color— The background color of an element.
  • color— The color of text inside an element.
  • display— (Advanced) Determines the way that an element is placed/laid out relative to other elements. block elements are stacked on top of each other, whereas inline elements are placed side-by-side. For a much deeper explanation, see MDN Web Docs - display (external) and MDN Web Docs - Block and inline layout in normal flow (external).
  • font-size— The size of text when displayed in this element. The default font-size for most browsers is 16px. Supports many different units for its value, most often as percentages (e.g., 150%), pixels (e.g., 16px), or ems (e.g., 1.5em).
  • font-family— The typeface used when displaying text in this element.
  • line-height— The vertical space for a line of text. Can be relative to font-size (e.g., 1.1, 1.5em, 115%) or absolute (e.g., 18px).
  • margin— The space (gap) between elements. Typically in px or em.
  • max-width— The maximum horizontal width an element is allowed to expand to, i.e., it can be smaller than this value, but not larger.
  • padding— The space between the contents of an element and the border or edge of that element.
  • text-align— Text justification, typically left, right, or center.
  • text-transform— Changes the case or capitalization of the characters that are contained in this element, when they're being displayed (this is purely a cosmetic change, i.e. it doesn't affect the underlying HTML content).
  • width— Sets the horizontal width of an element. Note: if this is an absolute value (e.g., 700px), the element will not shrink when the window becomes too narrow (see max-width instead). Can be a percentage (e.g., 85%), in which case the element will change size to maintain that percentage.

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)

RGB

MDN Web Docs References - rgb()

  • Colours can be specified using an expression,rgb(R, G, B) or 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