96 lines
4.2 KiB
HTML
96 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang=en>
|
|
<head>
|
|
<title>Doing HTML Right – diyhosting.bhh.sh</title>
|
|
<!--# include file=".nav.html" -->
|
|
</head>
|
|
<body>
|
|
<header><h1>Doing HTML Right</h1></header>
|
|
<nav></nav>
|
|
<main>
|
|
|
|
<p>
|
|
We've noted that HTML is very forgiving
|
|
</p>
|
|
|
|
<h2>A look at a decent template</h2>
|
|
|
|
<p>
|
|
I have a template file that I use for this website that includes all the basics.
|
|
When I make a new page, I just copy the template and add the content.
|
|
Here is what the template looks like:
|
|
</p>
|
|
<code><pre><!DOCTYPE html>
|
|
<html lang=en>
|
|
<head>
|
|
<title><strong>Your page title</strong></title>
|
|
<meta charset="utf-8"/>
|
|
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
|
|
<link rel='stylesheet' type='text/css' href='style.css'>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel='alternate' type='application/rss+xml' title='<strong>Site Title</strong> RSS' href='/rss.xml'>
|
|
</head>
|
|
<body>
|
|
<header><h1><strong>Your page title</strong></h1></header>
|
|
|
|
<nav></nav>
|
|
|
|
<main>
|
|
|
|
<strong>Put all your page content here in the <main> tag.</strong>
|
|
|
|
</main>
|
|
|
|
<footer></footer>
|
|
</body>
|
|
</html></code></pre>
|
|
|
|
<h3>Explanation of All These Important Things</h3>
|
|
|
|
<ul>
|
|
<li><code><head></code> contains page metadata, including:
|
|
<ul>
|
|
<li><code><title></code>, the page title that appears in a browser tab.</li>
|
|
<li>The <code>charset</code>, which tells the browser what encoding to use (this ensures unicode characters will display)</li>
|
|
<li>The <code>favicon</code> is the little site icon that open appears in the browser tab. Just create an <code>.ico</code> file and put it in <code>favicon.ico</code> and each page will read it.</li>
|
|
<li>The <code>stylesheet</code> is the CSS stylesheet, which is extremely important for making your site look good and we will get to <a href="css.html">in the CSS lessons</a>.</li>
|
|
<li>The <code>RSS</code> feed which is a file you can create to give users updates about your site. <a href="rss.html">We'll talk about making an RSS later too.</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><code><body></code>, which usually designates what content will visibly display.</li>
|
|
<li><code><header></code>, which is a semantic tag that where we use to put the main page title in.</li>
|
|
<li><code><nav></code>, a place to store a navigation bar later. I use a script to automatically update the bar on all pages and it looks for this tag.</li>
|
|
<li><code><main></code>, designates where the main text of the document is.</li>
|
|
<li><code><footer></code>, the content appearing at the bottom of the document, I also manage this like nav, with a script.</li>
|
|
<li><code><<++>></code>, <++></li>
|
|
<li><code><<++>></code>, <++></li>
|
|
</ul>
|
|
|
|
<h2>The Importance</h2>
|
|
|
|
<p>
|
|
If you're new to this world, you might be wondering why you should use body and main and nav and header and all this seemingly confusing stuff!
|
|
(Especially when even bad HTML displays!)
|
|
</p>
|
|
|
|
<p>
|
|
Not only do many devices, especially mobile ones, specifically use these tags for their features, but
|
|
when using CSS, we can also style each of these elements the way you want them to appear without changing the HTML on all your pages.
|
|
</p>
|
|
|
|
<p>
|
|
With CSS, we can say that we might want the whole body to have a image background, but main should be floating over it semi-transparent.
|
|
We can tell nav to float off on the left or right and we can change footer and nav settings just by tweaking the CSS.
|
|
</p>
|
|
|
|
<p>
|
|
Speaking of which, we've been talking up CSS for a while, so now it's time to learn it!
|
|
</p>
|
|
|
|
<span class=next><a href="css.html">Next: Styling with CSS</a></span>
|
|
|
|
</main>
|
|
<!--# include file=".footer.html" -->
|
|
</body>
|
|
</html>
|