html cheatsheet

Table sample
Eve Jackson 94
Jill Smith 50
Eve Jackson 94
Eve Jackson 94

HTML Cheat Sheet

Bolded text

  1. <b>Text goes here</b>
  2. <strong>Text goes here</strong>

Italicized text

  1. <i>Text goes here</i>
  2. <em>Text goes here</em>

Underlined text

  1. <u>Text goes here</u>

Changing font color

  1. <font color=”red”>Text goes here</font>
  2. <font color=”#0099ff”>Text goes here</font>

Changing font size

  1. <font size=”12px”>Text goes here</font>
  2. <font size=”large”>Text goes here</font>

Adding links

  1. <a href=”” target=”_blank”>Link goes here</a>
  1. target=_blank indicates that the link will open in a new browser window; you may remove it if you’d like the link to open in the same window

Adding images

  1. <img src=”” border=”1px #000 solid” align=”right” />
  1. border=”1px #000 solid” will put a black border around your image generated by each visitor’s web browser. The first value (1px) refers to the thickness; the second value (#000) refers to the color, which can be replaced with any web-based color name or RGB hex code; the third value (solid) refers to the pattern of the line, which can be replaced with dotted or dashed
  2. align=”right” will manipulate the image to align with the text in a specified way; you may replace right with left, center, or justify

Adding a horizontal divider between sections on your webpage

  1. <hr />

Adding a line break

  1. <br />

Making a nested, bulleted list

  1. <ul>
  2. <li>Section A</li>
  1. <ul>
  2. <li>Section A Part 1</li>
  3. <li>Section A Part 2</li>
  1. <ul>
  2. <li>Section A Part 2.1</li>
  3. <li>Section A Part 2.2</li>
  4. <li>Section A Part 2.3</li>
  5. </ul>
  1. <li>Section A Part 3</li>
  2. <li>Section A Part 4</li>
  3. </ul>
  1. <li>Section B</li>
  2. <li>Section C</li>
  1. <ul>
  2. <li>Section C Part 1</li>
  3. <li>Section C Part 2</li>
  4. </ul>
  1. <li>Section D</li>
  2. </ul>

Making a numbered list

  1. Replace <ul> with <ol> and </ul> with </ol> in the code above
  2. You can also combine numbers and bullets within the same nested list, depending on whether you choose to use <ul> </ul> or <ol> </ol> for each list level

Making paragraphs

  1. <p>A whole paragraph of text goes here!</p>
  2. You may modify the formatting of each paragraph by inserting CSS into your HTML code. For example:
  1. <p style=”font-size:14px;color:green;font-weight:bold;align=center;”>This whole paragraph of text will be centered, green and in 14px.</p>
  1. You can add as many or as few of the following CSS modules as you’d like to the <p style=””> </p> tag demonstrated above
  1. font-size:##px; modifies the size of the text; px can be replaced with pt, em, % or any length unit (cm, in, etc). In lieu of numbers, you can also write font-size:large; and replace large with xx-small, x-small, small, medium (default for most browsers), large, x-large, xx-large, larger, smaller.
  2. font-family:Arial; modifies the font type of the text; can be replaced with the name of any font, but if the user’s computer does not have the font downloaded, then it will revert to the browser’s default. If the font name has spaces in it, e.g., Times New Roman, it should be placed within quotation marks.
  3. color:######; or color:red; changes the color of the text. For a list of acceptable web color names, click here.
  4. font-weight:bold; determines whether the text is bolded or normal; bold can be replaced with normal.
  5. font-style: italic; determines whether the text is italicized or not; italic can be replaced with normal.
  6. text-decoration:underline; adds an underline to the text; underline can also be replaced with overline for a line over the text, line-through for a line through the text, and none.
  7. text-transform:uppercase; transforms the casing of the text; uppercase (all caps) can be replaced with capitalize (first letter of each word is capitalized), lowercase (all lowercase letters), or none.
  8. text-indent:5em; will indent the first line of the paragraph by the specified amount; any unit acceptable for font-size can be used for text-indent. 

Sample Webpage with HTML

<p style="color:#003399;font-size:18px;font-weight:bold;text-align:center;">Welcome to My Webpage!</p>

<p style=”color:#000;font-size:14px;font-weight:normal;text-align:left;”>You have stumbled upon the lovely webpage of Wanda WikiHow. This is my little nook on the Internet, featuring my artwork, writing, graphic designs, and future project ideas. Please feel free to take a look around using the navigation menu to the left, and to leave a comment with your thoughts! If you’d like to send me an email, head to the <a href=”/contactme.html” target=”_blank”>contact</a> page. I’d be more than happy to return your correspondence!</p>

<hr />

<p style=”color:#454545;font-size:16px;font-weight:normal;font-style:italic;text-align:left;”>Latest Updates</p>

<p style=”color:#000;font-size:14px;font-weight:normal;text-align:left;”>

<strong>March 25, 2012:</strong> I uploaded three <a href=”/artwork/watercolor.html” target=”_blank”>watercolor</a> pieces to my portfolio.</p>

<p style=”color:#000;font-size:14px;font-weight:normal;text-align:left;”>

<strong>March 14, 2012:</strong> I had a random moment of inspiration in the middle of the night, which I took advantage of to produce my newest poem, <em>In the Night Sky</em>. Click <a href=”/writing/poems.html” target=”_blank”>here</a> to enjoy!</p>

<p style=”color:#000;font-size:14px;font-weight:normal;text-align:left;”>

<strong>February 14, 2012:</strong> In honor of Valentine’s Day, I have uploaded two <a href=”/writing/poems.html” target=”_blank”>poems</a> and three <a href=”/artwork/sketches.html” target=”_blank”>sketches</a> with a subtle but nuanced romantic bent. I challenged myself to think of love outside of the traditional cliche conceptions so those without significant others can still appreciate this lovely holiday. We all have so much more love in our lives than the stereotypical portrayal of romantic affinity; we should open our eyes to all of the different ways in which we are blessed and appreciate it!</p>


Ron Smith,
May 5, 2017, 8:35 AM
Ron Smith,
Apr 27, 2017, 8:46 AM
Ron Smith,
Apr 26, 2017, 5:56 PM
nav bar links
Ron Smith,
Apr 27, 2017, 3:22 PM
Ron Smith,
Apr 28, 2017, 10:33 AM
Ron Smith,
Apr 26, 2017, 5:57 PM