Skip to content

LLC: Webmaking with HTML and CSS

Jump to bottom
Jonathan edited this page Jun 16, 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>.
    • The start and end tags share the same element name 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)

Headings

<h1>Webpage 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.

List item

See the entry for unordered list and list items

Paragraph

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

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