Master Template
.html
A HTML document only needs 3 elements to work.
html
head
body
Written with their corresponding closing tags as…
<html>
<head> </head>
<body> </body>
</html>
</html></head></body> These are the closing tags. The closing tags tell the browser when a type of code stops. So, <head> starts then stops with </head> etc. You’ll notice our document starts with <html> but doesn’t stop until the end thus containing all the elements (head and body).
Improvement to make it a valid HTML document
If we add a Document Type Declaration (aka DTD) to the top of the code the browser doesn’t have to work out what it’s looking at before interpreting the page and delivering it to you. You’re telling it that it’s a HTML 5 document.
A file declaration. What type of file you’re serving to internet.
<!DOCTYPE html>
This is the correct DTD for a HTML 5 document. This tells your browser what type of file it’s looking at so that it can interpret it.
NB. The Document Type Declaration doesn’t have a closing tag and always sits at the very top of your code for obvious reasons.
<!DOCTYPE html>
<html>
<head> </head>
<body> </body>
</html>
Copy the above code. Paste it into a simpletext document. Write something between the <body> tags. Save it on your computer as a .html file. Then open your web browser and select open file and locate the .html file you just saved. Voilá your first web page!
Starter Template
The basic website build with annotations. The accompanying css colours areas so that you can see what each div is doing.
<!DOCTYPE HTML> <!-- This is the correct docutype declaration for a HTML 5 document. This tells your browser what type of file it's looking at so that it can interpret it -->
<!DOCTYPE html> <!-- This is the correct docutype description for a XHTML 5 document Extensible. A html 5 document is the same but is described by uppercase HTML -->
<!-- If you're using XHTML you must conform to STRICT coding. lowercase html and quotation marks surrounding each = element. ="strictcoding" -->
<!-- Use one or the other doctype descriptions. Using the second one will allow you to add extensible content. Code that extends the capabilites of regular HTML. PHP is one of these. -->
<html><!-- Denotes the beginning of your html code -->
<head><!-- Denotes the head of your document. Within the head lots of information is given that isn't visible on your web page itself. Useful links that help build your web page and useful descriptions for web browsers to read so that they can deliver your website in a search engine search relatively accurately. -->
<meta charset="UTF-8"><!-- Declares and identifies the encoding used for the character data on this file - UTF-8. -->
<title>Untitled Document</title><!-- This information appears in the very top line of a browser window. The page title if you will. -->
<!-- <base href="www.thissiteforallrelativelinks.co.uk"> IF YOU'RE GOING TO USE A BASE HREF TO DIRECT EVERYTHING IT'S BEST USED AT THE TOP OF A META LIST TO MAKE SURE SUBSEQUENT META'S ARE ALSO DIRECTED FROM THE BASE URL -->
<meta name="Author" content="Andrew Rice DIRECTFX http://www.directfx.co.uk - Propeller Design http://www.propellerdesign.co.uk Tel. 01473 721519" /><!-- HTML 5 NO LONGER REQUIRES THE TRAILING FORWARD SLASH - ALTHOUGH SOME CONSIDER IT GOOD PRACTICE TO USE IT ON SELF CLOSING TAGS I'M GOING TO GO WITH THE NEW HTML 5 STANDARD FROM NOW ON -->
<meta name="keywords" content="keyword, keyword"><!-- How many keywords do I add to my website? Well they used to carry some weight in website design SEO but nowadays not much importance is given to them. Put at least 12 descriptive helpful keywords. -->
<meta name="description" content="Description of the site in here"><!-- How many words do I use in the description of my website? Every search engine uses different methods of listing your site. There's no right or wrong here. I would aim for 125 words. But, keep in mind it's usually the first 25 that appear underneath your title in Search Engine results -->
<!-- <meta http-equiv="refresh" content="10;URL=gotothis.shtml"> W3C STANDARDS DO NOT RECOMMEND USE OF THE REFRESH META AS SOME BROWSERS DON'T KNOW HOW TO DEAL WITH IT WHEN A USER GO'S BACK OF THEIR OWN ACCORD NAMELY IN IE -->
<link rel="stylesheet" type="text/css" href="css/fonts.css"><!-- A CSS Script for using your own hosted fonts OR FOR USING 3rd party supplier of fonts such as Fonts.com -->
<!-- from within your home directory add a Fonts directory to contain all of your fonts if you're using your own served fonts -->
<link rel="stylesheet" type="text/css" href="css/layout.css"><!-- A CSS Script for the layout of the website A GOOD NAMEING CONVENTION IS TO NAME IT AS THE NAME OF THE SITE WHEN YOU START -->
<link rel="stylesheet" type="text/css" href="css/style.css"><!-- A CSS Script for the FONT styles used -->
<script type="text/javascript" src="js/jquery.js"></script><!-- Example of a Javascript inclusion to your site (jquery is a popular one there are many many others -->
<link rel="shortcut icon" href="mastertemplate.ico"><!-- Must be in the root directory NOT images folder to display correctly in IE COMMENT OUT UNTIL CUSTOMER REQUIRED -->
<!-- MOBILE METAS
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<meta name="viewport" content="user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, width=device-width" />
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />
END MOBILE METAS -->
</head><!-- Denotes the end of the head information -->
<body><!-- Denotes the start of your web page code -->
<h1>AWESOME</h1>
<p>This is from the style template</p>
</body><!-- Denotes the end of your web page code -->
</html><!-- Denotes the end of your html code -->
Intermediate Template
This builds on the one above by adding a header and a sticky footer to the website. Again, the files are annotated and the css colours each area to help show you how each div is positioned.
<!DOCTYPE html> <!-- This is the correct docutype description for a XHTML 5 document Extensible. A html 5 document is the same but can be described with Total case insensitivity
If you're using XHTML you must conform to STRICT coding. lowercase html and quotation marks surrounding each = element. ="strictcoding" -->
<html>
<head>
<meta charset="UTF-8">
<title>Master Template</title>
<!-- <base href="www.thissiteforallrelativelinks.co.uk"> IF YOU'RE GOING TO USE A BASE HREF TO DIRECT EVERYTHING IT'S BEST USED AT THE TOP OF A META LIST TO MAKE SURE SUBSEQUENT META'S ARE ALSO DIRECTED FROM THE BASE URL -->
<meta name="Author" content="Andrew Rice DIRECTFX http://www.directfx.co.uk - Propeller Design http://www.propellerdesign.co.uk Tel. 01473 721519" /><!-- HTML 5 NO LONGER REQUIRES THE TRAILING FORWARD SLASH - ALTHOUGH SOME CONSIDER IT GOOD PRACTICE TO USE IT ON SELF CLOSING TAGS I'M GOING TO GO WITH THE NEW HTML 5 STANDARD FROM NOW ON -->
<meta name="keywords" content="keyword, keyword">
<meta name="description" content="Description of the site in here">
<!-- <meta http-equiv="refresh" content="10;URL=gotothis.shtml"> W3C STANDARDS DO NOT RECOMMEND USE OF THE REFRESH META AS SOME BROWSERS DON'T KNOW HOW TO DEAL WITH IT WHEN A USER GO'S BACK. Problem for I.E. -->
<!-- <link href="wtf" id="wtf2" rel="wot" rev="idontknow" title="andagain"> EXAMPLE STYLESHEET RELATIVE LINKS BELOW -->
<link rel="stylesheet" type="text/css" href="css/fonts.css"><!-- A CSS Script for using your own hosted fonts OR FOR USING 3rd party supplier of fonts such as Fonts.com -->
<!-- from within your home directory add a Fonts directory to contain all of your fonts if you're using your own served fonts -->
<link rel="stylesheet" type="text/css" href="css/layout.css"><!-- A CSS Script for the layout of the website A GOOD NAMEING CONVENTION IS TO NAME IT AS THE NAME OF THE SITE WHEN YOU START -->
<link rel="stylesheet" type="text/css" href="css/style.css"><!-- A CSS Script for the FONT styles used -->
<script type="text/javascript" src="js/jquery.js"></script>
<link rel="shortcut icon" href="mastertemplate.ico"><!-- Must be in the root directory NOT images folder to display correctly in Internet Explorer -->
<!-- MOBILE METAS
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<meta name="viewport" content="user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, width=device-width" />
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />
END MOBILE METAS -->
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
</head>
<body>
<div id="header">
<div id="insideheader">
<div id="adbox"><img src="images/googleadsense728x90.jpg" width="728px" height="90px" alt="Google Ad" />
</div>
</div>
<div id="lefthanger">
<div id="adbox"><img src="images/googleadsense120x600.jpg" width="120px" height="600px" alt="Google Ad" />
</div>
</div>
<div id="righthanger">
<div id="adbox"><img src="images/googleadsense120x600.jpg" width="120px" height="600px" alt="Google Ad" />
</div>
</div>
<div class="clearfloats"></div>
</div>
<div id="wrap">
<div id="contentcontainer">
<div id="logo"><img src="images/mtlogo.jpg" width="184px" height="116px" alt="Master Template" /></div>
<div id="nav-container">
<nav>
<ul id="navigation">
<li id="youarehere"><a class="navigation" href="#">Home</a>
<li><a class="navigation" href="#">Who we are</a>
<li><a class="navigation" href="#">About</a>
<li><a class="navigation" href="#">Directory Set-up</a>
<li><a class="navigation" href="#">MASTER TEMPLATE</a>
<li><a class="navigation" href="#">HTML e-mail creation</a>
<li><a class="navigation" href="#">PHP MASTER TEMPLATES</a>
<li><a class="navigation" href="#">The versatile htaccess</a>
<li><a class="navigation" href="#">Mobile Apps</a>
<li><a class="navigation" href="#">Mobile Websites</a>
<li><a class="navigation" href="#">Contact Us</a>
</ul>
</nav>
</div>
<h1>Master Template</h1>
<h2>What's the best width to use for a website?</h2>
<p class="extralargeextrathin">1004px</p> <p>That's the answer. This provides for people with a screen width resolution of 1024px allowing for a 20px scroll bar. You can expect this size to increase, in time, as people renew equipment with higher specification monitors. But for now you'll cover most bases with this configuration.</p>
<p>Ideally you'll want to keep your vertical scroll bars on every website. This way if you navigate to different pages within the same site you won't expereince "screen jump" the unerving 20px horizontal jump as content re-positions itself on the screen.</p>
<p>These templates will include all the new HTML 5 Divs</p>
<ul>
<li><pre><code><article></code></pre></li>
<li><pre><code><aside></code></pre></li>
<li><pre><code><bdi></code></pre></li>
<li><pre><code><command></code></pre></li>
<li><pre><code><details></code></pre></li>
<li><pre><code><dialog></code></pre></li>
<li><pre><code><summary></code></pre></li>
<li><pre><code><figure></code></pre></li>
<li><pre><code><figcaption></code></pre></li>
<li><pre><code><footer></code></pre></li>
<li><pre><code><header></code></pre></li>
<li><pre><code><hgroup></code></pre></li>
<li><pre><code><mark></code></pre></li>
<li><pre><code><meter></code></pre></li>
<li><pre><code><nav></code></pre></li>
<li><pre><code><progress></code></pre></li>
<li><pre><code><ruby></code></pre></li>
<li><pre><code><rt></code></pre></li>
<li><pre><code><rp></code></pre></li>
<li><pre><code><section></code></pre></li>
<li><pre><code><time></code></pre></li>
<li><pre><code><wbr></code></pre></li>
<li><pre><code><audio></code></pre></li>
<li><pre><code><video></code></pre></li>
<li><pre><code><source></code></pre></li>
<li><pre><code><embed></code></pre></li>
<li><pre><code><track></code></pre></li>
<li><pre><code><canvas></code></pre></li>
<li><pre><code><datalist></code></pre></li>
<li><pre><code><keygen></code></pre></li>
<li><pre><code><output></code></pre></li>
</ul>
<h1>Master Template</h1>
<h2>What width do you choose for the content of your website?</h2>
<p class="extralargeextrathin">1004px</p> <p>That's the answer. This provides for people with a screen res of 1024px allowing for a 20px scroll bar. You can expect this size to increase in years to come as people renew equipment with higher specification monitors. But for now you'll cover most bases with this configuration.</p>
<p>Ideally keep your vertical scroll bar. This way if you navigate to different pages you won't expereince "screen jump" the unerving 20px horizontal jump as content re-centers itself on the screen.</p>
<p>This is the intermediate version.. trying to get the fonts working with Mamp</p>
<p>Mamp Galloshers... images fonts now working yet?</p>
<h1>Master Template</h1>
<h2>What width do you choose for the content of your website?</h2>
<p class="extralargeextrathin">1004px</p> <p>That's the answer. This provides for people with a screen res of 1024px allowing for a 20px scroll bar. You can expect this size to increase in years to come as people renew equipment with higher specification monitors. But for now you'll cover most bases with this configuration.</p>
<p>Ideally keep your vertical scroll bar. This way if you navigate to different pages you won't expereince "screen jump" the unerving 20px horizontal jump as content re-centers itself on the screen.</p>
<p>This is the intermediate version.. trying to get the fonts working with Mamp</p>
<p>Mamp Galloshers... images fonts now working yet?</p>
</div> <!--closes the contentcontainer-->
<div id="push"><!-- must be commented out content in here to make the this push div live --></div>
</div> <!-- closes the wrap -->
<div id="footer">
<div id="footercontainer">
<div id="adboxbot"><img src="images/googleadsense728x90.jpg" width="728px" height="90px" alt="Google Ad" /></div>
<!-- <div id="footerleft" class="propellercaption"><a class="propeller" href="http://www.propellerdesign.co.uk">Propeller Design</a>
</div>
<div id="footerright" class="registeredcompany"><a class="propeller" href="privacypolicy.php">Privacy Policy</a></div>
<div class="clearfloats"></div> -->
</div>
</div>
</body>
</html>
Expert Template
This this template is similar to the one above but with most of the notation removed. Also all of the coloured divs for educational purposes have been removed. Use this template to start your new website build.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Master Template</title>
<meta name="Author" content="Andrew Rice DIRECTFX http://www.directfx.co.uk - Propeller Design http://www.propellerdesign.co.uk Tel. 01473 721519" /><!-- HTML 5 NO LONGER REQUIRES THE TRAILING FORWARD SLASH - ALTHOUGH SOME CONSIDER IT GOOD PRACTICE TO USE IT ON SELF CLOSING TAGS I'M GOING TO GO WITH THE NEW HTML 5 STANDARD FROM NOW ON -->
<meta name="keywords" content="keyword, keyword">
<meta name="description" content="Description of the site in here">
<link rel="stylesheet" type="text/css" href="css/fonts.css">
<link rel="stylesheet" type="text/css" href="css/layout.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/jquery.js"></script>
<link rel="shortcut icon" href="mastertemplate.ico">
</head>
<body>
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
<div id="header">
<div id="insideheader">
<div id="logo"><img src="images/madeinmagazine.png" width="232px" height="144px" alt="Made in Magazine" />
</div>
<div id="navigationcontainer">
<div class="navbox">
<a class="navigation live" href="#">Features</a>
</div>
<div class="navbox"><a class="navigation" href="#">Travel</a>
</div>
<div class="navbox"><a class="navigation" href="#">Education</a>
</div>
<div class="navbox"><a class="navigation" href="#">Fashion</a>
</div>
<div class="navbox"><a class="navigation" href="#">Pregnancy & Baby</a>
</div>
<div class="navbox"><a class="navigation" href="#">Mummy time</a>
</div>
<div class="navbox"><a class="navigation" href="#">Health</a>
</div>
<div class="navbox"><a class="navigation" href="#">Property & Interiors</a>
</div>
<div class="navbox"><a class="navigation" href="#">Books & Apps</a>
</div>
<div class="navbox" style="border-right:none;"><a class="navigation" href="#">What’s On</a>
</div>
</div>
</div>
</div>
<div id="wrap">
<div id="contentcontainer">
<h1>Master Template</h1>
<h2>What’s the best width to use for a website?</h2>
<h3>Mea tota sensibus argumentum ad. An sea dicant oporteat expetendis.</h3>
<p> </p>
<p><b>Lorem ipsum dolor sit amet, ea case impetus vix. <a href="#">Harum adversarium</a> ius ea, ne vim justo oblique, est cu detraxit senserit pertinacia. Vel ea habeo paulo posidonium, in ullum aliquip rationibus sed, ne pro oblique propriae. Cum quidam accumsan eloquentiam an, equidem nusquam an eam. Solum convenire scribentur no ius, et per vide discere philosophia.</b></p>
<p>Sea idque erroribus constituam et, timeam vivendum mel id. Mea noster nemore corpora ex, possit aliquando mea in. In per docendi detracto phaedrum. Per purto dicat viderer et, vidit iuvaret cu has, euismod impedit vis te. Vide oblique periculis ne vel, et usu commodo appareat omittantur. Has eu atqui tibique oportere, sed ei harum labores. Duo amet voluptua concludaturque te.</p>
<p>Vim legere sanctus nonumes et. Ad sanctus repudiare interpretaris qui. <b>Ut mel mundi</b> invidunt instructior, quo an ferri mundi, eu his diceret maiorum percipit. Et ius efficiantur philosophia.</p>
<p>Te omnes soluta atomorum sed. Iudicabit philosophia eam no, ferri graece utamur an has. Ut evertitur disputationi eum. Qui iriure reformidans an.</p>
<p>Ridens impedit qualisque vix no, nihil exerci atomorum has ex, mea tota sensibus argumentum ad. An sea dicant oporteat expetendis, ut justo equidem has, ad ius appetere consequat. At recteque salutatus dignissim sea, vix te fugit scaevola. In has tempor viderer, no mel everti saperet convenire. Soleat voluptatum neglegentur qui ei.</p>
<p>Lorem ipsum dolor sit amet, ea case impetus vix. Harum adversarium ius ea, ne vim justo oblique, est cu detraxit senserit pertinacia. Vel ea habeo paulo posidonium, in ullum aliquip rationibus sed, ne pro oblique propriae. Cum quidam accumsan eloquentiam an, equidem nusquam an eam. Solum convenire scribentur no ius, et per vide discere philosophia.</p>
<h2>What’s the best width to use for a website?</h2>
<p>Sea idque erroribus constituam et, timeam vivendum mel id. <a href="#">Mea noster nemore corpora ex</a>, possit aliquando mea in. In per docendi detracto phaedrum. Per purto dicat viderer et, vidit iuvaret cu has, euismod impedit vis te. Vide oblique periculis ne vel, et usu commodo appareat omittantur. Has eu atqui tibique oportere, sed ei harum labores. Duo amet voluptua concludaturque te.</p>
<p>Vim legere sanctus nonumes et. Ad sanctus repudiare interpretaris qui. Ut mel mundi invidunt instructior, quo an ferri mundi, eu his diceret maiorum percipit. Et ius efficiantur philosophia.</p>
<p>Te omnes soluta atomorum sed. Iudicabit philosophia eam no, ferri graece utamur an has. Ut evertitur disputationi eum. Qui iriure reformidans an.</p>
<p>Ridens impedit qualisque vix no, nihil exerci atomorum has ex, mea tota sensibus argumentum ad. An sea dicant oporteat expetendis, ut justo equidem has, ad ius appetere consequat. At recteque salutatus dignissim sea, vix te fugit scaevola. In has tempor viderer, no mel everti saperet convenire. Soleat voluptatum neglegentur qui ei.</p>
</div> <!--closes the contentcontainer-->
<div id="push"><!-- must be commented out content in here to make the this push div live --></div>
</div> <!-- closes the wrap -->
<div id="footer">
<div id="footercontainer">
<div id="footerleft">
<div class="fleftbox" style="padding-left:0px;"><a href="aboutus.php">About us</a></div>
<div class="fleftbox"><a href="#">Advertise</a></div>
<div class="fleftbox"><a href="contactus.php">Contact us</a></div>
<div class="fleftbox"><a href="#">Disclaimer</a></div>
<div class="fleftbox"><a href="#">Privacy policy</a></div>
<div class="clearfloats"></div>
</div>
<div id="footerright">© Made In Media 2014 Website <a href="http://www.propellerdesign.co.uk">propellerdesign.co.uk</a>
</div>
<div class="clearfloats"></div>
</div>
</div>
</body>
</html>
Please share if you find the content useful - thank you
Contact
|
FORUM |
Have a comment or something to say? |
