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

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:

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:

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.
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 element and set the attribute to clear:both to clear floats.

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