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?

HTMLPad 2014 - HTML 5 code editorYou 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.

Style 1

 

Rather than scrolling down the list to padding, type pa at the position of the cursor.

Style 2

 

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.

Image InsertionSet 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.

Browse to image

 

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.

Add image

 

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.

Preview

 

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)