How to build a simple HTML5 website

Everybody has to start somewhere with this hypertext stuff.

So this post should really be listed as a beginner topic but that section is reserved for people who don’t care about coding at all. So sorry for the mix up but this will be super easy (mundane) for those that already know the basic but let’s begin for those who are still new.

There are plenty of professional resources that will guide you to make your own first HTML5 website from scratch so please consider that first and also wikipedia. I’m going to give you quick and dirty.

So we begin by creating a file in notepad or whatever program you choose that will create a file. Save the extension as .html, instead of .txt or whatever. As a general rule, we will name it “index.html” since that’s what the browser default to.   That’s it. you’re done.

Yup, you just made a website file without any content or structure or css.

 

<!DOCTYPE html>
<html>
<head>

   <meta charset="utf-8">
   <title> My First Website </title>
   <link rel="stylesheet" href="css/style.css" type="text/css" />
  
</head>
<body>
  
    <header> Welcome Everyone !</header>
    
    <nav>
         <ul>
             <li><a href="index.html"> Home </a></li>
             <li><a href="about.html"> About </a></li>
             <li><a href="contact.html"> Contact </a></li>
         </ul>   
    </nav>

    <section>

        <h1>My First Heading</h1>

        <p>My first paragraph. and let</p>
   
    </section>

<footer> John Doe's Website </footer>
<script src="js/global.js">
</body>
</html>

Holy crap ! So there’s a lot of shit going on?!

Well it’s really not that complicated.  It’s actually pretty easy to remember.  You have a head, body, and foot.  In HTML5, the first thing we have is the Doctype.  You stick at the the top. Technically, you can build a site without it but that would be a slap on the wrist according to W3 so let’s do it right.   The next thing we do is add the html tag which seems redundant but that’s ok, we need it.   We got a head, title, body, and footer. Now everyone needs a head. In short, it’s like the human head and has all the info and data to configure the website.  We can put our title of the site, what it’s about, what kind of style/colors and extra information we want to initialize the website.

So I should really show you that the scripts are placed in the head but after reading more about speed, the scripts are something you might want to load after the contents of the site. This is debatable but I choose it cause it makes sense.

So line by line, the meta charset is something that is a bit of information and probably not that important right now but it’s recommended to let the know how the browser will interpret your website. too much information for me right now.

Ok so give it a title. You want to close all the tags when you are done. This is important or your website won’t work. Now the CSS is the paint brush (and more) for websites.  It’s lovely, they have lots of books on it but for now, we don’t have any style…just black and white.  We’ll talk about style later but the way I set this site up was so the stylesheet is located in  different folder. Trust me, it’s a good practice.

There’s small navigation, a header message, and the body of the content. The main story. whatever you need to get your message across to the people (and robots).  Finally, the footer and close the tags the with body and html.  How do browsers render this code!?

Well that’s another topic, here you go.  This site will look really boring and the navigation will be useless but there’s so much more in this world of web building.

So after all the crap, your first website will look like this.

first-no-style-website-html5-tutorial

And here is the index file. Please right click and save to your desktop.  If you want to open it, make sure you change the extension from .txt to .html before you begin.  I know what you’re thinking. Wow, That looks like crap. well it has no style and it’s super vanilla.  Once you dive deeper into the world of html5, it will become second nature.

The next thing we need to do is add some style and color cause we don’t dont live in black and white so let’s work on the css. I can probably go on and on about how to build a proper HTML5 website but here’s a few books that I strongly recommend:

HTML5 Unleashed
HTML5 & CSS3 For The Real World
Web Development and Design Foundations with HTML5 (7th Edition)
If you want to get into CSS3:
CSS3: The Missing Manual
Learning CSS3 Animations and Transitions: A Hands-on Guide to Animating in CSS3 with Transforms, Transitions, Keyframes, and JavaScript

 

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.