Basic HTML 5 Template
Barebones HTML Template to use for your web pages
Basic Concepts
- This is a very general HTML 5 compliant template to use for your web pages
- It has a few things added for future responsive design
- The validator links need to be updated once for each new page
Filename Rules
- should be lowercase, or maybe camel cased, they ARE case sensitive
- Must end in
.html
(or maybe.php
etc if they are dynamic pages) NOT.htm - Spaces in File Names are EVIL!!! use under_scores or camelCase if needed
- Keep them simple, straightforward and consistent
- A page on ferrets would probably be ferrets.html but not ferretspage.html (redundant, we know it is a page)
HTML 5 Guidelines
- All tags/attributes must be lower case
-
All tags with closing tags must be properly nested (closed in opposite order of being opened)
<p><b><i>This is the OK</i> way to</b> nest tags</p>
-
Do not use the majority of the old attributes (
bgcolor= "grey"
) anymore, use styles - Tags such as
<font></font>
<center></center>
- The 7 or so tags that do not have closing tags (
<br> <hr> <img> <input> <meta> <link>
) should NOT have a closing tag so do NOT do</br>
HTML 5 Template
<!DOCTYPE html> <html lang="en"> <head> <title>Basic HTML 5</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="dcterms.rightsHolder" content="Name of Copyright Holder"> <meta name="dcterms.dateCopyrighted" content="2012"> </head> <body> Actual web page goes here. There is no "neck" and don't stick your head in your body, it hurts. ;) <div id="validator"> <a href="http://validator.w3.org/nu/?doc=https://nbtl.mesacc.edu/username/directories/filename.html"> HTML 5 Validation</a> <a href="https://jigsaw.w3.org/css-validator/validator?uri=https://nbtl.mesacc.edu/username/directories/filename.html"> CSS 3 Validator </a> <a href="http://wave.webaim.org/report#/https://nbtl.mesacc.edu/username/directories/filename.html"> Wave Accessibility Test</a> </div> </body> </html>
Validator Setup for HTML 5
- All our pages will have the HTML 5 Validator Link, the CSS3 Validator Link, and the WAVE accessibility link set up properly
- Web Page Validators
- You only need to edit the part after the
doc=
,uri=
orreport#/
portion, just replacing the fake URL with the proper URL for each page. - Load your ACTUAL web page, off the server by going to a web browser and typing
nbtl.mesacc.edu/username
(if it is your home page)nbtl.mesacc.edu/username/filename.html
- The browser will put the https:// in front of it for you
- Obviously replace the username/filename with the actual names
- Copy the URL from the browser (again, it will include the https:// even if it is not showing)
- Paste it over the
https://nbtl.mesacc.edu/username/directories/filename.html
which is after thedoc=
, theuri=
or thereport#/
depending on the validator - Save it, re upload it and test the new validator links to make sure they work
Example
- IF the actual webpage URL is
https://nbtl.mesacc.edu/coperni/resume.html
-
The HTML 5 Validator would look like this
<div id="validator"> <a href="http://validator.w3.org/nu/?doc=https://nbtl.mesacc.edu/coperni/resume.html"> HTML 5 Validation</a> </div>