jiaRoom

My Template

That's a lot of new things, what If I just want something easy to copy and paste for a foundation? I can get quite lazy sometimes and rewriting the same base everytime I decide to make a new page or just play around with styles is tiring.


<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>jiaRoom</title>
    <link rel="stylesheet" href="/assets/css/style.css">
</head>
<body>
    <div id="grid">
        <header id="header"></header>
        <footer id="footer"></footer>
        <aside id="left"></aside>
        <aside id="right"></aside>
        <main id="main"></main>
    </div>
    <script src="/assets/js/script.js"></script>
</body>
</html>

Let's walk through it tag by tag! <!DOCTYPE html> basically just tells the browser that you're writing in the HTML5 format. The <head> holds a lot of tags within it, full of important info for the machine. <meta charset="UTF-8"> is another tag for the computer to understand exactly what we are writing. Without it, it can mess up some ASCII characters and so on. Now, finally some human readable tags, <title> is used for the text on the browser's tab to tell the user what their open tab is for. The last element I included inside of the head is <link rel="stylesheet" href="path/to/your/style.css">. It's quite a long tag so let's break it down. A tag can have something called attributes which provides even more data. In this case we have rel for relation and href for a link. The relation is for it to be a stylesheet, and the link is simply the path to said stylesheet. That's it for the non-visible stuff, moving on to <body>. This is where all visible elements are held. Inside of it, we have <div id="grid"> which is another tag with an attribute. This attribute isn't a standard and you can name it to whatever you want to. What's important is that you remember it for when you move on to styling or scripting. I called it grid because I'll remember what I wanted to do with it once i get onto the style.css stylesheet. It will contain a <header>, <footer>, <left>, <right>and a <main>. These are all very similar to <div> where they have an id attribute only for me to have an easier time styling later. <script> is for those who want to tinker with the nerdy side of it all, JavaScript. I'm not well versed in this topic so won't go into depth for now. Tags will close with a closing tag </ > to sort of close the box once it's filled. There are so many tags to use but you can find a list on the most common homes here.