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 the main drive of your computer which is usually the C drive.
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.
Exercise #1
Create your c:/htdocs/ folder
Create your c:/htdocs/images/ folder
If you skip this step, you'll start with a mess and your end result will be a mess.
HELP: If you don't know how to create new folders on your computer, here's a simple tutorial on the process.
Internet Explorer users click here: simple tutorial
Check Your Work
Type file:///c:/htdocs/ into the top of your browser as shown and hit Enter.
If you successfully created the htdocs folder on your C: drive and the images folder inside, this is what you'll see.
You can also use this routine for finding your web pages in the htdocs folder for browser Previews.
Finding Your Text Editor
The instructions for this tutorial are for Windows users.
If you are using an Apple platform computer, you will need to find the text editor that is provided with your system.
Windows users will use Notepad to create HTML pages and their style sheet.
HELP: If you don't know how to find Notepad on your Windows system, Click the Start button (bottom left), replace the words Start Search with Notepad and hit Enter.
Want to create an icon on your Desktop for it?
You'll find Notepad in All Programs - Accessories.
Setting Up to Work
Once you get your folders ready and find Notepad, you'll need to resize the browser window that displays this tutorial to about half the computer screen.
Then, you'll open NotePad twice, resize both text editor windows and stack them next to the tutorial page as shown.
You will copy and paste your HTML code into the top text editor window and your style sheet settings into the bottom window.
Focus: You will use 12 HTML tags to complete this entire website.
Here's the list:
<!doctype html>
<html></html>
<head></head>
<title></title>
<meta>
<link>
<body></body>
<div></div>
<img>
<h1></h1>
<p></p>
<address></address>
Copy the list to NotePad, print it out and each time you add one of the tags to your code, cross it off the list.
If you've got everything set up, Proceed to Lesson #2