HTML Snippets

Here is some basic HTML snippets I use.

Begin of HTML document

<!DOCTYPE html>
<html>
  <head>
    <title>Rudá Moura</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="author" content="Rudá S. T. de Moura">
    <meta name="description" content="It's more fun to compute!">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="css/normalize.css">
  </head>
  <body>

End of HTML document

  </body>
</html>

Icon Site (Favicon)

How to include a favicon.

<link rel="icon" 
      type="image/png" 
      href="/path/to/media/favicon.png" />

Rules to follow when including a favicon:

All browsers support ICO format.
All browsers (but IE) support PNG, GIF, JPEG formats.
A few browsers support animated GIFs, APNG, SVG formats.

If you don’t declare link rel="icon" then the browser may fetch /favicon.ico automatically.

Reference: W3C: How to Add a Favicon to your Site.

CSS

How to include an external CSS file to the HTML document.

<link rel="stylesheet" type="text/css" href="css/normalize.css">

How to include CSS inside the HTML document.

<style>
  body { background: Snow; color: #111; }
</style>

Note:

Default value of attribute type is text/css so you don’t need to include in link or style elements.
Default value of attribute media is all (for all media types – screen or print).

How to set CSS style in a HTML element. Use the style attribute.

<p style="color: red; background: yellow;">Hello there!</p>

Javascript

How to test if Javascript is enabled or disabled in browser.

<noscript>
  <p>Javascript is disabled</p>
</noscript>

How to include Javascript external to the HTML document.

<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>

Include Javascript inside the HTML document.

<script>
  alert("Javascript is enabled");
</script>

Some attributes that can be used in <scripts> are:

type is the language of the script, default value is text/javascript.
charset alternative character encoding, for example, iso-8859-1 (latin1).

Full page with no margins

Reset page in order to use all space available.

body { margin: 0; border: 0; padding: 0; }

How to center the body of the HTML

body { margin: 0 auto; width: 70%; }

Page with two columns

How to use “two columns” in HTML with DIV and floats.

<div style="float: left;  width: 50%;">Lorem ipsum…</div>
<div style="float: right; width: 50%;">Lorem ipsum…</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Clearing the effect of two columns

Create another div element and set the style to clear:both to clear floats.

<div style="clear:both;"></div>