Creating the HTML5 Index

When making a brand new website without a Content Management System (CMS) there are two essential things you need for its infrastructure. You firstly need a HTML5 Index page to build the core of your layout/website on.

Secondly you need Stylesheets (Cascading Style Sheets, CSS). They provide a cleaner style of web design where the website draws from this library of code that dictates every facet of the style of your website. For search engine optimisation Google prefers it because of it’s quicker loading times. It add’s consistency across all your pages as well especially if they draw from the same style sheet. You can obviously setup several but I’ll be using just the one.

Finally using the Bootstrap framework to take what I already explained about the Style sheets further with JQuery plugins, responsive mobile design etc.

Begining

To begin we need to define the document as a ‘HTML’ document by using the !doctype

<!DOCTYPE html>

Now I need to add the language,head and body tags with the title. Simple stuff so far.

<!DOCTYPE html>
<html lang=”en”>
<head>

<title>Martin Jacoby</title>

</head>
<body>
</body>

Now I need to add the bootstrap framework to the <head> of the page so that’s a responsive website.

<meta charset=”UTF-8″>
<meta name=”HandheldFriendly” content=”true” />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no” />

To finish it all off and include my future Style-sheet I’ve added the below. I’ve named this ficticious style sheet ‘style_master.css’. It doesn’t exist yet but I’ll create one after that does.

<link rel=”stylesheet” type=”text/css” href=”style_master.css”>

Altogether it should look like this!

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”HandheldFriendly” content=”true” />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no” />
<title>Martin Jacoby</title>

<link rel=”stylesheet” type=”text/css” href=”style_master.css”>
</head>
<body>

 

</div>

Conclusion

So now I’ve created my first page of the website. This will give us the basic starting to move forward. HTML5 websites first webpage are traditionally called index.html which is what I’ll name this file.

Now to create the Style-sheet and begin adding some of the JQuery plugins like Owl Carousel 2.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s