Easy HTML5 Tutorials Part: 2

Your first template
laptop with logos

In our last tutorial we learned the very minimal basics of creating a web page Easy HTML5 Tutorials Part: 1 which is great if you are opening it from your laptop only, however at some point you are going to want to upload your website to a web hosting server, it is at this point that your web pages will need to conform to server standards and expectations to function properly.

After this tutorial you will have a completed blank server ready web page that you can use as a starter template for future projects so you won’t have to do this each time.

So let’s just jump right into it and pick up where we left off…

This is where we left off as shown in fig 1.1.

*So far we have declared that this is an “HTML” document and that there is a “body” element within it

**Remember that the body is the part that everyone will see when viewing your website.

fig 1.1

<html>
<body>
</body>
</html>

Add the document type as shown in fig 1.2.

*Now we are going to add <!DOCTYPE html>to the very top of the page, it declares to the server that this document type is written in html5. (don’t forget the exclamation mark)

fig 1.2

<!DOCTYPE html>
<html>
  <body>
  </body>
</html>

Add the language attribute as shown in fig 1.3.

*Edit your opening <html> tag by adding lang=”en-CA” to it

**This converts this tag to being a document type that declares the intended language for the page, which in my case is English-Canada.

***You can find your language attribute here and your country attribute here.

fig 1.3

<!DOCTYPE html>
<html lang="en-CA"> <html> <body> </body> </html>

Add the <head> as shown in fig 1.4.

*Add an opening and closing <head> tag above the <body> tag but nested within the <html> tag.

**This tag contains nothing that can be seen by anyone viewing your site, it is just a container for server and browser information.

***You can find out more about <head> here.

fig 1.4

<!DOCTYPE html>
<html lang="en-CA">
<html>
<head>
</head> <body> </body> </html>

Add your charset <meta> as shown in fig 1.5.

*Add <meta charset=”UTF-8″> inside of your <head> tag.

**The charset attribute specifies the character encoding for the HTML document.

***You can find out more about it here.

fig 1.5

<!DOCTYPE html>
<html lang="en-CA">
<html>
  <head>
<meta charset="UTF-8"> </head> <body> </body> </html>

Add your viewport <meta> as shown in fig 1.6.

*Add <meta name=”viewport” content=”width=device-width, initial-scale=1″> just below <meta charset=”UTF-8″> but still nested in your <head> tag.

**The “viewport” attribute is what gives you responsive design

***You can find out more about it here.

fig 1.6

<!DOCTYPE html>
<html lang="en-CA">
<html>
  <head>
    <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> </body> </html>

Add your <title> tag as shown in fig 1.7.

*Add an opening and closing <title> tag just below your viewport <meta> but still nested within your <head> tag.

**In between your <title> opening and closing tags put whatever title you want to best describe the content of your page.

***It will be displayed in your browser toolbar, search engine results and when it is saved as a favorite.

****You can find out more about it here.

fig 1.7

<!DOCTYPE html>
<html lang="en-CA">
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<title>your website page<title> </head> <body> </body> </html>

Add your description <meta> tag as shown in fig 1.8.

*Add <meta name=”description” content=””> just below <title> but still nested within your <head> tag.

**In between the ” “ of the content= part put a description about your page

***It will be displayed in search engine results.

****optionally you could also put <meta name=”keywords” content=””> under your description <meta> but it is an outdated practice as most search engines don’t use it anymore, but some people still use it anyways just in case your visitor is using an outdated search engine.

Learn more here.

fig 1.8

<!DOCTYPE html>
<html lang="en-CA">
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>your website page<title>
<meta name="description" content=""
<meta name="keywords" content="" </head> <body> </body> </html>

Add your CSS <link> tag as shown in fig 1.9.

*Add <link rel=”stylesheet” href=”styles.css”> just below your description <meta> but still nested within your <head> tag.

**This links your “html” page to your external “CSS” file which will hold all your styles for your web page

If your css file is located anywhere else besides the same folder you will need to change the “href” to reflect this (ex: “folder/styles.css”)

***we will learn more about CSS later.

fig 1.9

<!DOCTYPE html>
<html lang="en-CA">
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>your website page<title>
    <meta name="description" content=""
    <meta name="keywords" content=""
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
  </body>
</html>

Add your <header> tag as shown in fig 2.0.

*Add an opening and closing <header> tag inside your <body> tag.

**The <header> tag (not to be confused with <head>) will include things such as your company brand and navigation links, it will be visible at the top of your page by it’s viewers.

***Learn more about <header> here.

fig 2.0

<!DOCTYPE html>
<html lang="en-CA">
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>your website page<title>
    <meta name="description" content=""
    <meta name="keywords" content=""
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
<header>
</header> </body> </html>

Add your <main> tag as shown in fig 2.1.

*Add an opening and closing <main> tag inside your <body> tag but just below your <header> tag.

**The <main> tag will include all main viewable content in your page.

***Learn more about <main> here.

fig 2.1

<!DOCTYPE html>
<html lang="en-CA">
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>your website page<title>
    <meta name="description" content=""
    <meta name="keywords" content=""
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header>
    </header>
<main>
</main> </body> </html>

Add your <footer> tag as shown in fig 2.2.

*Add an opening and closing <footer> tag inside your <body> tag but just below your <main> tag.

**The <footer> tag will include things such as sitemaps, contact information, social media buttons, copyright, etc etc…. It will be visible at the bottom of your page by it’s viewers

***Learn more about <footer> here.

fig 2.2

<!DOCTYPE html>
<html lang="en-CA">
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>your website page<title>
    <meta name="description" content=""
    <meta name="keywords" content=""
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header>
    </header>
    <main>
    </main>
<footer>
</footer> </body> </html>

And finally add jQuery <script> tag as shown in fig 2.3.

*Add <script src=”https://code.jquery.com/jquery-3.3.1.slim.min.js”> just below the <footer> but still within the <body>.

**The jQuery <script> tag is a javascript library designed to enhance your website behind the scenes

***Learn more about jQuery here.

fig 2.3

<!DOCTYPE html>
<html lang="en-CA">
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>your website page<title>
    <meta name="description" content=""
    <meta name="keywords" content=""
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header>
    </header>
    <main>
    </main>
    <footer>
    </footer>
<script src=”https://code.jquery.com/jquery-3.3.1.slim.min.js”> </body> </html>

Congratulations

You should now have a complete server ready blank HTML page ready for you to start designing on. We suggest that you save it for future use, if you are unsure of your copy I have included a download link for my copy for you to use (it has styles.css included)

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email
Share on print

Leave a Reply