This is the main menu for Web Design: Lessons. Hover over the button below, and the menu for the Lessons pages will appear.
Unfortunately, not everyone’s browser will support the spiffy JavaScript menu behind that innocent-looking button. If your browser won’t display the menu, just click on the button and you’ll be taken to a separate page with the entire menu displayed in clear, non-JavaScript HTML.
Welcome to Web Design!
Hi! This is the first of a series of lesson in making basic Web pages using modern, standards-compliant HTML and CSS. It uses best practices to ensure that the pages created with this lesson are up-to-date and valid.
During the lesson, you will see a number of links giving more information about the particular technique or element being discussed. I encourage you to pause a moment (take a “side trip,” as it were) and read through it to learn more. But if you’re in a tearing hurry to get your Web page up and running, you can save them for later.
All the information in one place.
What Is This HTML Stuff?
HTML is the language used to make Web pages.
It is a system of tags, or elements. Each element has an opening and a closing:
<> means opening. </> means closing.
<something> means you’re opening an element that will do something. </something> means you’re not going to do that any more — you’re closing it.
That’s enough for now. We’ll learn more as we go. Let’s build a Web page!
Getting Started
Creating Your First HTML File
Open Notepad in a Windows PC, or TextEdit/SimpleText in a Mac. (For brevity’s sake, I’ll refer to your program as “Notepad” from here on out, but any text editor will do. See the main tutorial page of this site for more information about text editors. In fact, this entire creation process is walked through thoroughly on that page; if you’re going through this, you’re getting the short, less complete version.) Create a folder called mydesign, in My Documents or wherever you like on your hard drive. Use “Save As” to save the file to that folder as index.html. You will do all your work in this file (for now). We’re going to call it your home page."
When you save the file, do two things:
- Save it as an HTML file, which means you'll add the
.htmlextension. Very important! - Save it using the UTF-8 from the Encoding (or the Plain Text Encoding) dropdown list. This is also very important!
If you neglect to select UTF-8 when saving your files, it’s likely that you won’t notice much of a difference. However, when someone else tries to view your web site (say, a Korean friend of yours), they’ll probably end up with a screen of gobbledygook. Why? Because their computer is set up to read Korean text, and yours is set up to create English text. UTF-8 can handle just about any language there is (including some quite obscure ones) and most computers can read it, so UTF-8 is always a safe bet. – Ian Lloyd
Note: Microsoft sometimes hides file extensions from Windows users. Why? Because Microsoft thinks you’re too stupid to need to have those visible — you might hurt yourself or something. When you come across a file just labeled “index” or “mypage” or “rx325sdfs”, you have no way to know what kind of file it is. You need to make those file extensions visible, so you can see the file is “index.html” or whatever. Here’s one method:
- Open Windows Explorer. (Not My Computer. Windows Explorer is in Accessories, right beneath Notepad.)
- If you’re using Vista or, I believe, Windows 7, choose Organize > Folder and Search Options. XP users will chose Tools > Folder Options.
- Choose the View tab.
- In Advanced Settings, make sure that "Hide extensions for known file types" is not checked.
Never, ever use a word processor such as Microsoft Word, WordPerfect, WordPad, OpenOffice, TextMate, Apple iWork, or any such software to create Web pages. Just don’t do it. They all add their own formatting to the text that will interfere with the browser’s rendering of the code. And the programs like Word, Publisher, and TextEdit that tell you just to write your information and let them do the HTML/CSS coding? No way, no how. They lie.
Creating Your First Stylesheet
Now you’re going to create an empty stylesheet. This is where your CSS styling information goes.
Open another blank page in Notepad. Save it as styles.css. Very important: save it in the CSS folder you created, not the main (root) folder. Otherwise your browser won’t find it when you take a look at your design.
(What CSS folder, you ask? You skipped the introduction. Go take a look at the section on folder creation and come back when you’ve gotten your folder structure in order.)
All your CSS information will go in this file.
Note: When you’re coding an internal stylesheet, you use these HTML tags:
<style type="text/css"> </style>
These do not go in your stylesheet. Do not include them! (You wouldn’t believe how many people do include them, including some who ought to know better.)
More about different types of stylesheets.
Firing up the Browser
Open your browser: Internet Explorer, Firefox, Safari, Chrome, Opera, or whatever browser you prefer. Go to File, Open. Click Browse. Go to your mydesign folder. Open your Notepad file in your browser. It will be blank, but not for long.
More information about designing for different browsers.
Starting with a DOCTYPE
Open up a second browser window. Go to this address:
http://www.w3.org/QA/2002/04/valid-dtd-list.html
Go about halfway down until you find the heading:
HTML 4.01 Strict, Transitional, Frameset
Look just below that heading. Copy this doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Or just copy it off the screen above. Copy it EXACTLY.
Minimize this copy of your browser. You will use it again later.
Paste this doctype into your HTML file.
More information about DOCTYPES.
Building the Bare Bones of Your Site
Copy this code EXACTLY into your HTML file, including the spacing and tabs, beneath the DOCTYPE you’ve just copied into your file.
<html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>My First Web Page</title> <link rel="stylesheet" href="css/styles.css" type="text/css" media="screen"> </head> <body> </body> </html>
Save the file.
Notice there’s a lot of space between the <body> and </body> elements. This is deliberate. It’s nice to have some room to work in, and your browser will ignore the extra spacing.
You’ve added three main elements to your page:
- the DOCTYPE;
- the HEAD; and
- the BODY
More information about elements of basic HTML structure.
More information about the DOCTYPE.
More information about the two parts of the HTML page.
Your head includes this element:
<link rel="stylesheet" href="css/styles.css" type="text/css" media="screen">
which links the styles.css stylesheet to the page you’re creating. You made that page in the first lesson, but you haven’t added anything to it yet. Don’t worry, you will.
Refresh your browser with your file open, and see what’s different. (Hint: not much, not yet.) You’ve actually built the basic structure for your Web page, you just haven’t added anything to it yet. You’re going to right now.
Notice that all your code so far, except for portions of the DOCTYPE, has been written in lowercase and not UPPERCASE letters. This is best practice, for a number of reasons. You should get used to it now, rather than later.
And what is that charset=UTF-8 all about? (We saved your html file in UTF-8 above, but we didn’t talk about it.) You’ve used a meta tag to set what’s called a charset. Right now, just leave it as is. You can find out more at the link below:
More information about meta tags.
More information about charsets.
Now, if you like, change the page to suit you. You can to change the <title>My First Web Page</title> to something more personalized. Don’t change the <title> </title>, just the "My First Web Page" text.
Save your file and refresh the page. See the change? No? Look up at the very top of the browser, on the "title bar." This is what appears in search engines and in bookmarks, so always remember to keep the title up-to-date and accurate.
More information about titles.
Adding Your First Paragraph of Text
In between the <body> and </body> tags, copy this exactly:
<p>Hello, world! My name is ____. What's up? </p>
Insert your name in the space. Save the file. You just used the PARAGRAPH (<p> </p>) tag.
Refresh your browser with your file open. See what’s different.
You have just created your first WEB PAGE.
Congratulations!
Change that paragraph if you like. Instead of the "Hello, world!" text, change it to something that reflects your personality. Save the file and refresh your browser. Now you’re personalizing your page!
Check your work: take a look at an example page to see if you’ve gotten it right so far. Use your browser’s View Source (or Source, or maybe View Page Source), found in your right-click menu, to see the source code in the example, and make sure it matches up with yours. Why the example code is not exactly like the code you’re generating.
