Create a Website with HTML5
Lesson #1
Getting Organized
One of the biggest mistakes made by beginners when learning to build websites, is to just pile everything into one folder.
If you use this method of organization, you begin with a mess and you end with a mess.
Files and pictures are stored on your computer in folders.
The old heads once called them directories and sub directories.
The term folders is just a little less technical.
To keep your website organized and make your HTML files and pictures easier to find, you'll need to create 2 new folders on your computer .
You'll need to create a folder named htdocs and another folder inside htdocs named images.
When you save your html pages, you will save them in your htdocs folder.
Save any pictures or images that appear on your web pages in the images folder located inside the htdocs folder.
Help: Don't know how to create new folders? Take a short Time Out for a Simple Tutorial
Exercise #1
Windows users: will create htdocs in your personal files folder.
Create your name-personal/htdocs folder
Create your name-personal/htdocs/images/ folder
Linux users: You will create htdocs in yor parent folder:
/home/your parent/htdocs and the images folder as:
/home/your parent/htdocs/images
If you skip this step, you'll start with a mess and your end result will be a mess.
Finding Your Text Editor
The instructions for this tutorial are for Windows and Linux users.
If you are using an Apple platform computer, you will need to find the text editor that is provided with your system.
We will use a text editor to create mytemplate.html.
Linux users click the icon lower left corner - find Accessories and scroll down to Text Editor
Setting Up to Work
Once you get your folders ready and find the text editors for Windows and Linux, you'll need to resize the browser window that displays this tutorial to about half the computer screen.
Then, you'll open your text editor, next to the tutorial.
You will copy and paste your HTML code and CSS into the text editor window. I'm changing the tutorial here and using an embedded style sheet to simplify the process. That just means HTML and CSS will be saved to the same document.
Help: If you know how, open 2 tabs in your browser. You can view the tutorial in one tab and view mytemplate.html and the changes you make in the other. If you don't know how, you'll have to employ a second browser to view mytemplate.html
Focus: You will use 14 HTML tags to complete this entire website.
Here's the list:
(3 new tags in HTML5 are in white)
<!doctype html>
<html lang="en"></html>
<head></head>
<title></title>
<meta>
<style>
<body></body>
<header></header>
<nav></nav>
<main></main>
<img>
<h1></h1>
<p></p>
<footer></footer>
If you've got everything set up, Proceed to Lesson #2
go back