Here is some basic HTML snippets I use.
<!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.0"> <link rel="stylesheet" type="text/css" href="css/normalize.css"> </head> <body>
</body> </html>
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.
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:
type
is text/css
so you don’t need to include in link
or style
elements.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>
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).Reset page in order to use all space available.
body { margin: 0; border: 0; padding: 0; }
body { margin: 0 auto; width: 70%; }
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>
Create another div
element and set the style to clear:both
to clear floats.
<div style="clear:both;"></div>