HTML+CSS Crash Course

HTML Basics

Headings < h1 > ... < ⁄ h1 > , < h2 > ... < ⁄ h2 > < h3 > ... < ⁄ h3 > < h4 > ... < ⁄ h4 > < h5 > ... < ⁄ h5 > < h6 > ... < ⁄ h6 >

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

The Paragraph Tag < p >

Use the < p > tags for paragraphs.

This is a paragraph

We can get dummy text from Lorem Ipsum

Lorem Ipsum Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in porttitor ipsum, in vehicula ipsum. Fusce nec hendrerit turpis. In volutpat orci et ante euismod, a ultricies tortor ultrices. Nam dictum lobortis nibh nec ultrices. Morbi ultrices sollicitudin massa ac consectetur. Vivamus varius, lectus sit amet iaculis rhoncus, mi lorem molestie lectus, nec dignissim nibh lorem at libero. Cras sollicitudin lacus nulla, et iaculis velit porttitor ut. Vestibulum laoreet libero ut lectus volutpat vehicula. Sed non consequat velit. Cras et pellentesque turpis. Fusce vel felis non justo dignissim ultricies eget at sem. Vivamus auctor interdum suscipit. Nam tristique est sit amet libero suscipit accumsan. Aenean rutrum augue a feugiat cursus.

Praesent sit amet fermentum mi, quis molestie quam. Donec a dui at tortor dictum suscipit et in lectus. Duis id posuere dolor. Proin sit amet purus pellentesque est pellentesque blandit in eget ipsum. Vestibulum ultricies ligula non odio mattis, id pulvinar sem rutrum. Fusce volutpat iaculis massa vel tristique. Aenean varius malesuada erat accumsan euismod. Nullam non ex id velit mollis efficitur eu et tortor. Morbi volutpat luctus ultricies. Proin ut faucibus lectus.

Suspendisse pellentesque, turpis et interdum luctus, metus risus vestibulum ex, quis semper orci neque eu nulla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque porta, dolor sit amet dignissim porta, ligula ex imperdiet turpis, et ullamcorper augue est eu turpis. Duis tempor tincidunt imperdiet. Suspendisse dictum nisi augue, id sollicitudin ligula interdum vel. Suspendisse potenti. Pellentesque semper, est in aliquet cursus, lorem libero cursus nisi, vitae viverra odio tortor vel quam. Nulla dignissim eu mi a auctor.

The < br > tag

Use the < br > tag to break to the next line.

Fusce sodales tellus vitae nisl lobortis convallis.
Curabitur malesuada ante sed condimentum fringilla.
Aliquam erat volutpat. Etiam nec lobortis justo, nec rutrum lacus.
In neque nibh, congue a faucibus a, tempor et libero.
In hac habitasse platea dictumst.
Aliquam imperdiet suscipit massa, non cursus augue auctor at.
Nunc et arcu sit amet velit efficitur consequat.
Donec fermentum varius magna, non volutpat lectus eleifend at.
Donec tincidunt vestibulum ultrices.
Pellentesque sodales purus sit amet mauris elementum rutrum.
Ut molestie purus a enim dignissim egestas.
Nunc commodo vulputate posuere.
Integer ornare quis urna volutpat facilisis.

Escape Characters

See list of special escape characters here

Special Character Reference

Test

`~!@#$%^&*()_+-=[]{}\|;:'"<>?/,.

  • left single quote = &lsquo; = ‘
  • right single quote = &rsquo; = ’
  • left double quote = &ldquo; = “
  • right double quote = &rdquo; = ”
  • left angle bracket = &lsaquo; = ‹
  • less-than sign = &lt; = <
  • right angle bracket = &rsaquo; = ›
  • greater than = &gt; = >
  • Trademark sign = &trade; = ™
  • Exclamation mark = &#33; = !
  • Number sign = &#35; = #
  • Dollar sign = &#36; = $
  • Percent sign = &#37; = %
  • Ampersand = &amp; = &
  • Apostrophe = &#39; = '
  • Left parenthesis = &#40; = (
  • Right parenthesis = &#41; = )
  • Asterisk = &#42; = *
  • Plus sign = &#43; = +
  • Comma = &#44; = ,
  • Hyphen = &#45; = -
  • Period = &#46; = .
  • Slash = &#47; = /
  • Colon = &#58; = :
  • Semicolon = &#59; = ;

Back to top

HTML Text emphasis

The Bold Tag < b >

This is used to point out certain words, though some may prefer the next < strong > tag.

The Strong Tag < strong >

This tag is also used to point out certain words in a text.

The Italics Tag < i >

This tag is now used primarily for icons. If you use Bootstrap or other Font icon sets, you should be familiar with this.

Instead of using the < i > for italics, use the < em > covered in the next section.

The Emphasis Tag < em >

This is used to emphasize important parts of a text.

These tags can be nested inside of eachother as well.

Back to top

HTML Lists

The Unordered List Tag < ul >

This is only the parent item for a list. Notice directly below this, nothing shoes up, even though you can right click and Inspect Element to see the ul tags are there.

    The List Item Tag < li >

    The li tag is nested inside the ol tag, as seen below.

    • Apple
    • Blackberry
    • Raspberry Pi

    The ul tag and li tags are used commonly for website navigations. See the top of this site for an example.

    The Ordered List Tag < ol >

    The ol tag is used for numbered lists.

    1. First
    2. Second
    3. Third

    Back to top

    HTML Images

    Images can be linked or "sourced" both externally or locally

    External Image

    Giant tornado

    Internal Image

    Truck hauling rockets

    Clickable Image

    Nesting < img > tags inside < a > tags makes our images clickable and linked to other pages.

    Giant tornado

    Width and Height Attributes

    We can use px, em, or % to specify values.

    Truck hauling rockets Truck hauling rockets

    Back to top