HTML5 Free DIY Website

Goggwell · November 25, 2014

Hey guys!

As most of you know, HTML5 is the most commonly used coding language for building a website. Not only is it the most common, but it is the most versatile and easiest to use!

To show you how easy it is, I have created a website template for you guys to use. It's a very simple template, designed to show people your 'About Me'!

Here's a picture of what the website looks like:

It's a pretty simple website, don't you think?

Here's the code for it:



<!DOCTYPE html>

<head>


    <style>

        body {

            text-align: center;

            background: url("http://p1.pichost.me/i/51/1750928.jpg");

            background-size: cover;

            background-position: center center;

            background-repeat: no-repeat;

            background-attachment: fixed;

            color: white;

            font-family: Helvetica;

        }


        p {

            font-size: 24px;

        }


        input {

            border: 0;

            padding: 12px;

            font-size: 18px;

        }


        input[type="submit"] {

            background: #2c3e50;

            color: #ecf0f1;

        }


    </style>

</head>


<body>



<img src="https://codecademy-content.s3.amazonaws.com/courses/web-beginner-en-3pc6w/images/avatar.jpg" height="250" width="250">

<p>Hi! I am learning how to make my very own web page! I really like blueberry muffins and long walks on the beach.</p>

<input type="email" placeholder="Email">

<input type="submit">


</body>

Now, this code may seem a bit difficult to understand for all you newbies out there, so let me walk you through it.

I'll skim through the code really fast.

The background image comes from this part of the code:



<style>

        body {

            text-align: center;

            background: url("http://p1.pichost.me/i/51/1750928.jpg");

            background-size: cover;

            background-position: center center;

            background-repeat: no-repeat;

            background-attachment: fixed;

            color: white;

            font-family: Helvetica;

        }

See the part where it says 'background: url("http://p1.pichost.me/i/51/1750928.jpg");'?

That's the link to the picture you are seeing in the background.

You can change the picture to your liking. The coding below it simply adjusts the image to fit the background.

The same rule applies with the picture in the middle.

It comes from this part of the code:



<img src="https://codecademy-content.s3.amazonaws.com/courses/web-beginner-en-3pc6w/images/avatar.jpg" height="250" width="250">

This part is below <body> and above <p> in the code. Once again, you can change the link. The part where it says 'height' and 'width' are just functions that adjust the picture, so you want the original picture to be a square.

<p> means paragraph. Judging by the part that comes after it, you can guess that <p> is the part below the picture.

You can also change the picture to a title.

Just delete the picture code and add this:

<h1>

After <h1> just write down the title of your site and then add </h1>

There's also <h2> <h3> all the way up to <h6>

You'll be a master in no time!