How to Create Liquid Web Pages

The Basics of Liquid HTML Web Pages

This 7 Step tutorial will guide you through the process of creating the 3 page liquid website shown below.

You will learn to enhance its appearance using CSS (cascading style sheets).

How to Use this Tutorial
Read ALL INFORMATION and then execute the Exercise at the bottom of each page.
Complete the Quizzes (First 5 lessons)
Don't Skip Anything!!
Complete all 7 exercises.

Create a FREE Website

NO CODING!!

Create beautiful, professional websites
WITHOUT Learning to Code!!

19 Million+ Amazing FLASH websites
created by people just like you,
with no knowledge of HTML coding.

DO NOT USE WYSIWYG editors like Komposer, Seamonkey etc!!!

Note: If you are building your first website, I recommend that you run through this tutorial more than once using NotePad, until you are comfortable with saving HTML documents and previewing them in a browser.

Getting Ready

This first group of tutorials is for the ultra novice.

If you don't need them you can bypass them or come back to them if you get stuck.

Note: Mac users should use the text editor included with Apple systems.

Note: For The Non-Readers! The first lesson includes a lot more reading material than lessons 2 thru 7. If you can make it through Lesson 1, and get things set up properly, the last 6 lessons require a lot less reading.

Keep it organized!!

Important: Create a special folder to store your web pages in.

Name it something like htdocs.

Make it easy to find. Create it right on your c drive as c:\htdocs

Create another folder inside the c:/htdocs folder.

Name it images.

This will help you to start out in an organized fashion and find the page with your browser when previewing.

You will save pictures that we provide in Exercise 6 in the c:/htdocs/images folder.

HTML Code

The secret to learning HTML code is to USE AS LITTLE AS POSSIBLE!

You should spend as much time or more learning about CSS (cascading style sheets).

The Basic Web Page

This is all the code you need to get started.

The code in red links your web page to your style sheet.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> </body> </html>

Building Your Page Structure

Because so many people are viewing websites on devices other than desk top computers these days, I've added this new tutorial on the art of creating Liquid Web Pages.

Liquid web pages expand and contract with the size of a visiting browser.

More importantly, they conform to the different monitor resolutions used by devices like tablets and small notebooks.

The entire structure of our web page, its rows and columns, will be defined using divisions and relative values (percentages).

What's that? For now, think of divisions as 4 sided empty boxes on your web page that you are going to fill with pictures and text, even videos.

CSS (Cascading Style Sheets)

The more you learn about CSS, the more sophisticated a website you will be able to build.

You can, however, create a very impressive website by just learning the basics.

How do you create a style sheet?

Here's the beauty. You don't need any special tools. You can create a style sheet using a simple text editor like NotePad.

Just save your text file with a .css extension and put it in the same folder as your web pages.

Link your style sheet to your web page as shown above in the HTML code (red line of code).

Every time you add a snip of HTML code to your web page, add the style settings for that code to your style sheet and test in your browser.

What the CSS Does

The best way to see what the CSS does is to preview the web page before and after you add the CSS.

We will provide an explanation of what each line of style text does for those that need it.

Before You Start

We went a step beyond the call and made the tutorial liquid.

If you're working on a nice big desk top or lap top you can set the tutorial up just like this.

Open the tutor in your browser and place the tutor on the left.

Then open Notepad twice and place it on the right.

Paste your HTML code in the top Notepad editor and your CSS in the bottom.

You might even go a step further and put your viewing browser in the bottom half of the left window.

Ready to work? Start the first Exercise!

First Exercise

You're going to create 2 files in this exercise.

Save them both in your c:/htdocs folder.

HTML Liquid Design

Copy and Paste into NotePad

This is the HTML code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <div id="head"></div> <div id="main"></div> <div id="footer"></div> </body> </html>

Save the web page as firstpage.html

The .html extension is crucial.

Style Sheet Liquid Design

Copy and Paste into NotePad.
( You will have 2 sessions of NotePad open at the same time.)

* {
padding: 0 0 0 0;
margin: 0 0 0 0
}

body {
background: #6699CC;
color: #000000;
font-family: arial, tahoma, verdana, serif;
font-style: normal;
font-weight: normal;
padding: .5% 5% 0 5%;
}

Save as style.css in the same folder as firstpage.html

The .css extension is crucial.

Once you get the web page and style sheet saved, look at the HTML page with a browser or the Preview function of your HTML editor.

Explanation

The first block closes all gaps in your web page. It removes any default values for margins and padding for elements that you add to the HTML code of the web page.

The second block of CSS defines the body section of the web page.

The background color is defined in hexidecimal code #6699cc and produces the blue color you'll see when you preview the web page.

The line, color: #000000 defines the default color of text elements like paragraphs and header tags.

Colors for your links or anchor tags have to be set individually.

We also define the default font settings for the web page.

font-family: arial, tahoma, verdana, serif;

If we define the default font-family at the top of the style sheet we can experiment with the different font faces by simply changing their order.

You might also add Helvetica to the list. Sorry, we didn't have a sample.

Place your preferred choice first in the list.

We set font style and weight to normal.

If you want to bold individual words or phrases, use the <strong></strong> tag. Place the words you want bolded between the 2 tags.

We add some top, right and left gutters to the web page using the line:
padding: .5% 5% 0 5%;

We're adding a half a percentage point to the top and 5% to the right and left of the web page.

We add the 5% gutters to each side of the page to keep it from spreading out too much when viewed at a resolution of 1920 pixels wide.

If you want your web page to fill the entire browser window, just remove this line of CSS code.

The Result

Future Liquid Web page builders will see an empty blue colored browser window.

Were you successful? If you were, congratulations!!

If you see code in your browser, you probably saved your web page with a txt extension.

If you typed the code instead of pasting you may have errors.

Check the extensions of your saved files. They should be .html and .css

Go back and read the information again. Don't skip any steps.

Make sure both files are in the same folder.

If you are using a WYSIWYG editor, GET RID OF IT!!

Try copying and pasting the HTML code and CSS.

The HTML code and CSS must be exactly as shown.

Helps

If you missed the tutor on previewing web pages with a browser and are having problems, Visit that tutor now.

I don't see my pages!!!

If using Notepad to build your pages, you save them and come back later and they aren't there, click the All Files filter. Notepad only shows your txt files by default.