HTML
Contents
About
HTML is the standard markup language used to create web pages and something every good software engineer should know! It is, however, easy to forget things. Here I've provided a nice little HTML hello world template, and links to some related pages.
As of Dec 2015, the fifth revision HTML5 is the recommendation of the World Wide Web Consortium, and includes new elements like <video>, <audio> and <canvas>, plus tags like <section>, <article>, <header> and <nav>
Child Pages
Related/Child Pages:
- Google Sites - HTML Tag Cleaner - nice demo of CSS, JavaScript and HTML. Uses JavaScript string replace/regex to remove messy HTML tags inserted by Google Sites.
- HTML - Table - some pretty table formatting.
- Kelsicons - emojis you can add to your HTML and doc title.
HTML Templates
HTML5 Bare Bones Template (hello world)
<!doctype html>
<html lang="en">
<head>
<title>Hello World</title>
</head>
<body>
Hello world!
</body>
</html>
HTML5 Expanded Template (with meta, JavaScript and CSS includes)
This version includes a JavaScript script file (.js) and CSS style sheet file (.css). It also includes some meta tags up top for author name and description of the page.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello World</title>
<meta name="description" content="Description of your site to help crawlers a little">
<meta name="author" content="Andrew Noske">
<link rel="stylesheet" href="css/styles.css?v=1.0">
</head>
<body>
<script src="js/scripts.js"></script>
</body>
</html>
HTML5 Web App (framed 100% width and height)
This version includes some inline CSS suitable for a web app that you want to span 100% of the widt and height of the phone.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- The follow two lines are pretty pivotal -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Web App Layout Hello World</title>
<style>
@viewport {
width: device-width ;
zoom: 1.0 ;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
font-family: "Segoe UI", Arial, sans-serif;
}
#container {
position: relative;
min-height: 100%;
}
#header {
background: #eee;
padding: 10px;
border-bottom: 1px solid #ccc;
}
#body {
padding: 10px;
padding-bottom: 60px; /* Height of the footer */
}
#footer {
position: absolute;
bottom: 0;
height: 60px; /* Height of the footer */
background: #eee;
border-top: 1px solid #ccc;
width: 100%;
}
.stretch-text {
width: 100%;
}
.no-stretch-text {
font-style: italic;
}
</style>
</head>
<body>
<div id="container">
<!-- LAYOUT - HEADER -->
<div id="header">
<div class="stretch-text">Header</div>
</div>
<!-- LAYOUT - BODY -->
<div id="body">
Hello World. You can put all your content here fun person.
</div>
<!-- LAYOUT - FOOTER -->
<div id="footer">
<div class="no-stretch-text">Footer</div>
</div>
</div>
</body>
</html>
HTML4 Template (not recommended)
HTML4 is not recommended anymore, but I put here to notice the differences. HTML5 uses "<!doctype html>" .... whereas HTML4 uses:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Conforming HTML 4.01 Strict Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
Please avoid HTML4.
</body>
</html>
Related Pages
- CSS (Cascading Style Sheets).
- SVG (Scalable Vector Graphics).
- JavaScript
