Easy HTML5 Tutorials Part: 1

Your first page
laptop with logos

Way back in 1995 when I first learned about designing websites it was different back then, I had no web design software like Dreamweaver, there was no Drag’n’Drop or DIY web builders available anywhere and if you wanted a web site your choices were to either pay a web designer to create one for you or you had to learn to code in HTML yourself.

A lot has changed since then, now there is all kinds of website builders applications available whether you downloaded them from the internet or they were included as part of your hosting package making it so easy that even your 10 year old child could create a web page. however most web builder options are limited and cannot give you 100% customization. Knowledge of HTML coding removes these barriers.

However some things are still true today as they were back then and one of them is that you can still create a web page from Notepad or Textedit, the free little note application that comes with windows or mac.

Today I am going to show you how to create a very simple web page using this method, my reason is that it is how I learned and I believe that it is a great start for anyone beginning in coding. I don’t want to overwhelm you so we will keep it simple.

Before We Begin

A few things that are very important to remember is that web design layout is like boxes within boxes within boxes, etc…

The other important thing to remember is that each box whatever it’s name is must have an opening tag and a closing tag, tags are displayed as a word within brackets. As you can see the only difference is the closing tag has a slash in it.

Opening tag example: <xxxxxx>

Closing tag example: </xxxxxx>

And all boxes must be nested within each other or you will just be stacking boxes on top of boxes, unless that’s what you want depending on the layout you choose.

html box layout

Hierarchy Example

<Main Container>
<Header>
</Header>
<Parent div>
<Child 1 div>
</Child 1 div>
<Child 2>
</Child 2>
<Child 3>
</Child 3>
<Child 4>
</Child 4>
<Child 5>
</Child 5>
<Child 6>
</Child 6>
</Parent div>
<Footer>
</Footer>
</Main Container>

As you can see the “Main Container” is the first box with the “Header”, “Parent div” and the “Footer” boxes stacked yet embedded within the “Main Container”.

And the “Child 1-6 div” boxes are also stacked and embedded within the “Parent div”.

So let's get started

OPEN NOTEPAD (PC)

Windows 8 or later:

Open the Start Screen (the window symbol at the bottom left on your screen). Type Notepad.

Windows 7 or earlier:

Open Start > Programs > Accessories > Notepad

OPEN TEXTEDIT (MAC)

Open Finder > Applications > TextEdit

Also change some preferences to get the application to save files correctly. In Preferences > Format > choose “Plain Text”

Then under “Open and Save”, check the box that says “Display HTML files as HTML code instead of formatted text”.

Then open a new document to place the code.

We start by typing <html> and </html> as shown in fig 1.1.

*What this does is declare what kind of document this is to the server, in this case we are telling it this is an “html” file.

fig 1.1

<html>
</html>

Then type <body> and </body> embedded in the <html> as shown in fig 1.2.

*What this does is declare that the “body” element is nested within the “html” document.

**The “body” element is the box that holds everything your web page will display

fig 1.2

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

Then type “My Web Page” embedded in the <body> as shown in fig 1.3.

*Any text you put between an opening gap and a closing gap will be displayed on your page

**By default anything you put in a box will be displayed at the top of the page.

fig 1.3

<html>
<body>
My Web Page
</body>
</html>

SAVE NOTEPAD (PC)

Click “File Save As” and name it “index.html” and change the “Encoding” option to “UTF-8“.

It is very important that you do not forget the “.html” and change the encoding, this is what makes it a web page

SAVE TEXTEDIT (MAC)

Click “File” then “Save” and name it “index.html” and change the “Plain Text Encoding” option to “Unicode UTF-8” then click “Save” and if it asks you about your extension, choose the “.html” option

It is very important that you do not forget the “.html” and change the encoding, this is what makes it a web page

Congratulations!

With only 4 lines of code you have now just created your first web page with the minimum requirements needed to make it functional, you can now double click the saved file and it will open in your browser. (if you did it right)

OK, so it’s kinda lame but if this is your first time then this is a milestone for you because you now know how to create a web page, now you just have to learn to decorate it. (which we will get to later)

As we mentioned before, in this step we created a web page with the minimum requirements. In the next step we will cover the additional parts required to make it a standard (non-minimized version) with the proper required protocols included. it will still look the same but will be server ready.

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

Leave a Reply

Your email address will not be published. Required fields are marked *