Plain HTML5 Cheat / Reference Sheet

Programming: HTML5 Cheat / Reference Sheet

Bolded text

<b>Text goes here</b>

Italic text

<i>Text goes here</i>

Underlined text

<u>Text goes here</u>

Changing font color

<font color=”blue”>Text goes here</font>

Changing font size

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

Adding links

<a href=”sadiqulanalysis.blogspot.co.uk” target=”_blank”>Link goes here</a> 

(target=_blank indicates that the link will open in a new browser window or tab; you may remove it if you’d like the link to open in the same window)

Adding images

<img src=”sadiqulanalysis.blogspot.co.uk/image.jpg” border=”1px black solid” align=”right” />

border=”1px #000 solid” puts black border around the image. The "1px" value refers to the border thickness, the second value "black" refers to the border colour, the third value (solid) refers to the pattern of the line, which can be replaced with "dotted" or "dashed"
align=”right” will position the image to alignment you may replace right with left, center or justify

Adding a horizontal divider between sections on web page

 <hr> </hr>

Adding a line break

 <br > <br/>

Making nested bulletined list

<ul>
<li>Section A</li>

<ul>
<li>Section A Part 1</li>
<li>Section A Part 2</li>

<ul>
<li>Section A Part 2.1</li>
<li>Section A Part 2.2</li>
<li>Section A Part 2.3</li>
</ul>

<li>Section A Part 3</li>
<li>Section A Part 4</li>
</ul>

<li>Section B</li>
<li>Section C</li>

<ul>
<li>Section C Part 1</li>
<li>Section C Part 2</li>
</ul>

<li>Section D</li>
</ul>

Making a numbered list

Replace <ul> with <ol> and </ul> with </ol> in the code above
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

<p>A paragraph of text goes in here</p>

<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>

Creating nested table

<table border="1" style="width:100%">
  <tr>
    <td>Column 1 Row 1 </td>
    <td>Column 1 Row 2 </td>
    <td>Column 1 Row 3 </td>
  </tr>
  <tr>
    <td>Column 2 Row 1 </td>
    <td>Column 2 Row 2 </td>
    <td>Column 2 Row 3 </td>
  </tr>
</table>