diff options
Diffstat (limited to 'html4.html')
| -rw-r--r-- | html4.html | 99 |
1 files changed, 0 insertions, 99 deletions
diff --git a/html4.html b/html4.html deleted file mode 100644 index 39475b9..0000000 --- a/html4.html +++ /dev/null @@ -1,99 +0,0 @@ -<!DOCTYPE html> -<html lang=en> - <head> - <title>Doing HTML Right – LandChad.net</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='Land Chad RSS' href='/rss.xml'> - </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> - <footer><a href="https://landchad.net">LandChad.net</a></br>Because Everyone should be an Internet LandChad.</br><li><a href="index.html"><img src="pix/chad.gif" alt="chad"></a></li><li><a href="rss.xml"><img src="pix/rss.svg" alt="RSS"></a></li><li><a href="pix/btc.png"><img src="pix/btc.svg" alt="BTC"></a></li><li><a href="pix/xmr.png"><img src="pix/xmr.svg" alt="XMR"></a></li><li><a href="https://github.com/lukesmithxyz/landchad"><img src="pix/git.svg" alt="Github"></a></footer> -</body> -</html> |