HTMLPad 2014 Tutor
Create Firstpage.html
Prerequisites
You have completed:
1...The 7 Step Basic Tutorial
2...The first 3 lessons in this tutor
Optional
You may have completed:
1...Advanced Students #1
2...Building with a Template
If you haven't completed the first group of tutors, you won't be able to complete this exercise.
You'll have a far better understanding if you complete the optional tutorials.
Ready for an HTML Editor?
You may be by the time you finish this tutorial.
I use HTMLPad 2014 for creating my websites.
In my opinion, it's the best full featured HTML 5 editor on the market for Any Price.
Better code editing features than most of the 'over priced' editors.
You can't make a mistake without seeing it immediately.
It has built in FTP for uploading your pages to your server.
For advanced users, it syncs up easily with a local host server for testing forms and scripts right on your PC.
Try it free for 30 days. Fully Functional!!
Download your free trial of HTMLPad 2014
Get Started Right!!!!
Let's Build Web Pages
Before you start, create a new folder inside your htdocs folder and name it something like firstpage-htmlpad.
Creat an images folder inside the new folder.
Use Windows file manager to Copy or transfer the images from the basic tutorial into the new images folder.
Click Project - New Project on the editor.
Name the new project and browse to its location. Click Ok
Click project and click on the new project name, bottom of drop down.
Now, you're ready.
Click File - New - HTML
Give the page a title
Change the line:
<link rel="stylesheet" href=".css" type="text/css"/>
To:
<link rel="stylesheet" href="style.css" type="text/css"/>
Save the page as firstpage.html in the new folder.
Click File - New - CSS
Save the style sheet as style.css in the new folder.
Adding the Structure
This is the structure of the web page we built in the 7 step basic tutorial:
<header></header>
<div class="main">
<div class="content"></div>
<nav></nav>
</div>
<footer></footer>
Try and recreate it using the HTML Library by clicking your code snippets.
Note: If you added the class attribute to Header, Navigation and Footer, just delete class="" for now. Don't need it.
Save: firstpage.html
Now toggle to the stye sheet by clicking style.css on the top of the editor window.
These are the style settings we added in the basic tutorial for all the elements added to the page so far.
You can copy and paste them into style.css or recreate them using HTMLPad's CSS functions. See below.
* { padding: 0 0 0 0; margin: 0 0 0 0 } body { max-width: 1200px; margin: 0 auto; color: #000000; background: #6699CC; font-family: arial, tahoma, verdana, serif; font-style: normal; font-weight: normal; } header { width: 100%; background: #336799; float: left; } div.main { width: 100%; background: #ffffff; float: left } div.content { width: 68%; padding: 0 0 0 4%; float: left } nav { width: 20%; padding: 0 4%; float: left } footer { width: 100%; background: #336799; float: left }
Recreating the Style Sheet
You should be looking at a blank style sheet.
To build the first block, type * {
When you do the editor will auto complete the closing bracket and a list of CSS attributes will appear.
Rather than scrolling down the list to padding, type pa at the position of the cursor.
Double click padding on the list.
Enter your values 0 0, add the semi colon and hit enter.
Repeat the process for margin.
It might be good practice to recreate the entire style sheet.
If you'd like to move on, just copy and paste.
Add an Image
We ended up in the basic tutorial with an image in the header.
Set the cursor between the header tags and click the Image insertion tool. (underlined in red)
Browse to the location of images/header.gif. Click on it. Click Open.
We'll define its position in the style sheet so all we need to add is the alt information.
Be sure to remove the check mark from No Border.
Click Ok
Note: HTMLPad adds width and height settings to your HTML code. Delete them!!
Save firstpage.html
Toggle to the style sheet and add the CSS to position the header image.
header img { float: left; padding: 5% 0 5% 12%; border: none; max-width: 80% }
Save style.css
Preview the Web Page
Let's Preview what we've done so far.
click Tools - Preview
If you've got your browser set up properly, firstpage should replace the tutor page in your left window. Now you can togggle back and forth between the tutor and your firstpage results.
If this is what you see when you Preview, you're ready to continue.
Note: If the browser sits there and loads and loads and nothing appears, there could be 2 problems.
1...You're using the local host Apache server and forgot to turn it on. Or you didn't set Mappings.
2...You're not using the local host Apache server and Mappings is turned on. Turn it off.
Options - Preferences - Preview - Mappings
Coming Next - Adding Heading elements and Content
Got a Question?
Send me your questions about using HTMLPad 2014.
If you would like a direct response, please include your email address.
(We will not keep your email address)