 
    
<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>template Archives - Complete, Concrete, Concise</title>
	<atom:link href="https://complete-concrete-concise.com/tag/template/feed/" rel="self" type="application/rss+xml" />
	<link>https://complete-concrete-concise.com/tag/template/</link>
	<description>Practical Information Without The Bloat</description>
	<lastBuildDate>Tue, 20 Mar 2018 16:46:18 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9</generator>
	<item>
		<title>A Very Basic HTML5 Template</title>
		<link>https://complete-concrete-concise.com/tutorials/webdev/front-end-basics/a-very-basic-html5-template/</link>
		
		<dc:creator><![CDATA[richardsplanet]]></dc:creator>
		<pubDate>Tue, 20 Mar 2018 16:46:18 +0000</pubDate>
				<category><![CDATA[Front-End Basics]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[template]]></category>
		<category><![CDATA[tutorial]]></category>
		<category><![CDATA[webdev]]></category>
		<guid isPermaLink="false">https://complete-concrete-concise.com/?p=3461</guid>

					<description><![CDATA[<p>Save typing and use boilerplate code instead.</p>
<p>The post <a href="https://complete-concrete-concise.com/tutorials/webdev/front-end-basics/a-very-basic-html5-template/">A Very Basic HTML5 Template</a> appeared first on <a href="https://complete-concrete-concise.com">Complete, Concrete, Concise</a>.</p>
]]></description>
										<content:encoded><![CDATA[<div class="preamble">
In the previous tutorial, we created a very simple webpage that displayed only one (short) line of text.<br />
With a little cleanup, it can be used as a template for future projects.
</div>
<p>Most of what we saw in the previous tutorial was the bare bones structure you need for an <strong>HTML5</strong><a id="fnref1" class="footnote-ref" href="#fn1"><sup>1</sup></a> document.<br />
Stripping out the title and text we are left with:</p>
<div id="cb1" class="sourceCode">
<pre class="sourceCode html"><code class="sourceCode html"><a id="cb1-1" class="sourceLine" data-line-number="1"></a><span class="dt">&lt;!DOCTYPE </span>HTML<span class="dt">&gt;</span>
<a id="cb1-2" class="sourceLine" data-line-number="2"></a><span class="kw">&lt;html&gt;</span>
<a id="cb1-3" class="sourceLine" data-line-number="3"></a>  <span class="kw">&lt;head&gt;</span>
<a id="cb1-4" class="sourceLine" data-line-number="4"></a>    <span class="kw">&lt;title&gt;&lt;/title&gt;</span>
<a id="cb1-5" class="sourceLine" data-line-number="5"></a>    <span class="kw">&lt;meta</span><span class="ot"> charset=</span><span class="st">"utf-8"</span>  <span class="kw">/&gt;</span>
<a id="cb1-6" class="sourceLine" data-line-number="6"></a>  <span class="kw">&lt;/head&gt;</span>
<a id="cb1-7" class="sourceLine" data-line-number="7"></a>  <span class="kw">&lt;body&gt;</span>
<a id="cb1-8" class="sourceLine" data-line-number="8"></a>
<a id="cb1-9" class="sourceLine" data-line-number="9"></a>  <span class="kw">&lt;/body&gt;</span>
<a id="cb1-10" class="sourceLine" data-line-number="10"></a><span class="kw">&lt;/html&gt;</span></code></pre>
</div>
<p>Use this as the starting point for the next few projects. As we learn more, the framework will expand and become a little more complex. Nevertheless, it is good enough to start with for now.<br />
The technical term for this is <strong>boilerplate code</strong>. You should understand what it does, but there is no need to write it every single time you create a new webpage &#8211; just <strong>copy &amp; paste</strong>.<br />
Save it as a file. I suggest putting it in a directory called <strong>templates</strong> and calling it <strong>basic-html5.html</strong>. Then when you want to create a new <strong>HTML</strong> file either:</p>
<ol type="1">
<li>copy the contents of the file into your new file</li>
<li>open the file, then <strong>Save as</strong> the new file you want to work on (this one is a little riskier because you might forget and overwrite your template file by accident).</li>
</ol>
<p>It’s a good idea to make the template file <strong>read-only</strong> &#8211; if you know how. You can always search for instructions.<br />
Reusing code or using templates is common practice in programming.</p>
<div class="prev">
<a href="https://complete-concrete-concise.com/tutorials/webdev/front-end-basics/your-first-webpage-hello-world">Prev</a>
</div>
<div class="next">
<a href="https://complete-concrete-concise.com/tutorials/webdev/front-end-basics/ten-more-html-tags-to-play-with">Next</a>
</div>
<div class="clear"></div>
<section class="footnotes">
<hr />
<ol>
<li id="fn1">This tutorial series is about HTML5 and not other versions. I may point out differences between different versions, but that is not my main focus.<a class="footnote-back" href="#fnref1">↩</a></li>
</ol>
</section>
<p>The post <a href="https://complete-concrete-concise.com/tutorials/webdev/front-end-basics/a-very-basic-html5-template/">A Very Basic HTML5 Template</a> appeared first on <a href="https://complete-concrete-concise.com">Complete, Concrete, Concise</a>.</p>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
