Create a Website with HTML5 - Overview
You are going to create a 3 page website very similar to the website you are viewing.
The process will be accomplished by simply copying and pasting code into a simple text editor and then previewing your work with a browser.
I do recommend that you delete your work when you finish and run through the tutorial several times to cement the learning process.
Complete all 5 Lessons.
DO NOT SKIP STEPS!!
You will create what are called liquid web pages using HTML5 code.
If you don't understand what that means, grab the side of your browser and squeeze it inward until your browser window is just a very skinny column.
Watch as the heading image and the large picture on the web page shrink in size to fit the available window space.
If you don't know how to resize the browser, try grabbing the right edge of your browser window with your mouse by holding the cursor over it. A 2 headed horizontal arrow should appear.
If if the arrow doesn't appear, you need to set your browser in Resize Mode.
The resize buttons shown here are in the top right corner of your browser.
Click the middle one.
Now hold the cursor over the right edge of the browser window until the horizontal two headed arrow appears.
Press the left mouse button and while holding it down push the side of the window to the left.
You can do the same with the bottom edge to adjust the height of the browser or as you will see, your NotePad windows.
Liquid Web Pages
Web pages that adjust to browser width are called liquid or fluid designs.
They will also adapt to the resolution of the visiting appliance used to view the website. You could probably view this simple one column website on your cellphone with no problems.
Work through this tutorial several times. Learn as much as you can and you'll be ready to go on to our Advanced tutorial. (Multiple column - Multiple Page Websites)
Things to Watch For
Exercise #
Red blocks introduce Exercises. There can be more than 1 Exercise in a lesson. There can also be more than 1 step in an exercise. Don't Skip anything!
Copy & Paste
Green blocks contain instructions for copying and pasting code blocks. Read all the information in a green block. It tells you WHERE the code should be pasted.
Help:
Yellow blocks contain extra information to HELP along the way. Some contain links to other tutorials like copy and paste procedures, creating folders or previewing web pages. If you don't know how to do something look for the Yellow block.
Focus
Orange blocks usually come at the end of a lesson and tell you where to focus your attention.
Save
Be sure to SAVE your HTML page or style sheet each time you see the word Save in red.
Note: Some of the secondary tutorials like Creating Folders and Copy Paste use pop up windows. These require the installation of javascript on your browser. If your browser doesn't support javascript the tutorials will open in a new page. Use your back button or the link provided to return to a lesson. If the pop ups work, just close the window by clicking the X top right of pop up.
Recommended Browser
I highly recommend the Google Chrome browser for Windows users and the Brave browser with a Chromium core for Linux .
If you want to be ahead before you start the tutorial, download and install the Chrome browser now. You can Get It Here FREE!
Linux users Go Here for the Brave browser.
The only way you can guarantee your failure is if you don't try.
Take a quick look at the Lesson Overview and let's get started.
Lesson Overview
- Lesson #1:
- Getting Organized
- Finding Your Text Editor
- Setting Up to work
- Lesson #2:
- Exercise #1 - Create Basic HTML Page
- Exercise #2 - Create the Style Sheet
- Exercise #3 - Link the Web Page to the Style Sheet
- Exercise #4 - Add first division and Preview page.
- Lesson #3:
- Exercise #1 - Add Header Division, Heading tag and format with Style sheet
- Lesson #4:
- Exercise #1 - Add Nav Division with links and format
- Exercise #2 - Add Main Division and format
- Exercise #3 - Add content to main division and format
- Exercise #4 - Add image to main division and position with style sheet
- Lesson #5:
- Exercise #1 - Add Footer Division with information and format
- Exercise #2 - Create New Web Pages using mytemplate.html as template.