Handy HTML Code

Handy little tips for html code to help webmasters build websites.


HTML - Simple Document

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

HTML - Viewport - [control the page's dimensions and scaling, Placed between the [head] - [/head] section

<meta name="viewport" content="width=device-width, initial-scale=1.0">

HTML Meta Tags - [Placed between the [head] - [/head] section

<meta name="description" content="Your page description here.">
<meta name="keywords" content="keyword, keyword 2, keyword3">

HTML - Paragraph - [Placed between the [body] - [/body] section

<p>Your paragraph.</p>

HTML - Paragraph - [Bold] - [Placed between the [body] - [/body] section

<p><strong>This is a paragraph.</strong></p>

HTML - Paragraph - Using font-family - [Placed between the [body] - [/body] section

<p style="font-family:courier;">Your paragraph.</p>

HTML - Font - Change text size - [Placed between the [body] - [/body] section

<font size="6">Your text</font>

HTML - Font - Change text color [Can replace 'Red' with '#000000] - [Placed between the [body] - [/body] section

<font color="red">Your text!</font>

HTML Header Text - H1 [Large] / H5 [Small] - [Placed between the [body] - [/body] section

<h1>H1 Heading</h1>
<h2>H2 Heading</h2>
<h3>H3 Heading</h3>
<h4>H4 Heading</h4>
<h5>H5 Heading</h5>

HTML - HR [horizontal rule] - [Placed between the [body] - [/body] section

<hr>

HTML - HR [horizontal rule] - Dotted - [Placed between the [body] - [/body] section

<hr style="border-top: dotted 1px;" />

HTML - Hyperlink - [Placed between the [body] - [/body] section

<a href="url">link text</a>

HTML - Hyperlink with title - [Placed between the [body] - [/body] section

<a href="url" title="Your Link Title">link text</a>

HTML Hyperlink - New page - [Placed between the [body] - [/body] section

<a href="url" target="_blank">link text</a>

HTML hyperlink - Image as a link - [Placed between the [body] - [/body] section

<a href="your-page.html"> <img src="your-image.gif" alt="Your Image" style="width:50px;height:50px;border:0;"> </a>

HTML Hyperlink - Button as a link - [Placed between the [body] - [/body] section

<button onclick="document.location = 'your-page.html'">HTML Page</button>

HTML - Unordered list - [Placed between the [body] - [/body] section

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

HTML - Ordered list - [Placed between the [body] - [/body] section

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

HTML - Table - [Placed between the [body] - [/body] section

<table style="width:50%">
<tr>
<th>Title 1</th>
<th>Title 2</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>

HTML - YouTube - iFrame Method - [Replacing 'your-code' with your code] - [Placed between the [body] - [/body] section

<iframe width="420" height="315" src="https://www.youtube.com/embed/your-code"> </iframe>

HTML - YouTube - iFrame Method - Autoplay [Replacing 'your-code' with your code] - [Placed between the [body] - [/body] section

<iframe width="420" height="315" src="https://www.youtube.com/embed/your-code?autoplay=1"> </iframe>

Login

Username:
 
Password:

Forgotten password?