building your first web page
| If you lived in New York, you'd probably know the motto of this AM radio station: "1010 WINS: You give us 22 minutes, we'll give you the world." I'll make a similar promise: Give me 22 minutes, I'll give you a web site. 00:00 getting started You'll create your first web page using a text editor. If you're on a PC, use the program Notepad; if you're on a Mac, use SimpleText. If for some reason you can't find these programs (They ship with every computer; they should be there somewhere probably in the Applications folder), you can use any word-processing software, like Microsoft Word or WordPerfect. You might want to start a new folder for your web pages. To make things simple, name the folder "web." 02:30 open a new text document Within your text editor, start a new document and type the following: <html> <head> <title> My 22-minute web page </title> </head> <body> <h1>Who cares about the web?</h1> <p>Well ... <b>lots</b> of people. </p> </body> </html> Be sure to transcribe it exactly; don't add any extra spaces or slashes. 05:00 save the html file If you're working in SimpleText or Notepad, all you have to do is select "Save" and then name the document (see below). But if you're working in Word or WordPerfect, you'll need to think about how to save it. An HTML document must be saved in a "text only" format, so it can be read by any computer, on any platform. Programs like Word add a lot of junk to a text document to make sure it appears with all your fancy fonts and margins. But web browsers get confused by all this junk. So you have to save your document as "text only." To do this, just select the command "Save as" from the "File" menu, then choose "Text" or "Text only" from the formatting choices. 06:30 name the html file When you save your document, you also have to name it. In the "Save as" dialog box, enter a name for your web page. One good name would be 22minutes.html But you can actually name the file anything you want, as long as you follow three rules. 3 rules for naming HTML files:
09:30 look at the web page I left a generous 3 1/2 minute gap there for you to name your page, because if you're like most people, you spent way too much time thinking of a clever little name. (I urge you to break this habit: See naming site sections.) Back to business: To see your first web page, launch your web browser (probably Internet Explorer). Under the "File" menu, select the command, "Open File." Select your new page from the dialog box that pops up. 11:00 do you see it? If you've followed all the directions above, you should see your modest (but exciting!) little web page in the browser. Your title should appear in the very top of the browser; the headline should be biggish and bold, and the paragraph should be in normal text. Overall, it should look something like the image above. But what if it doesn't? Well, this is the first important lesson in web development: Things don't always work the way you think they're going to work. That's why we left 22 minutes for what could have been an 11-minute job. 11 minutes to build, and 11 minutes to make it work. Sounds about right. 12:00 you don't see it? If you don't see the web page, you're in luck! You'll get to not only build a page, but troubleshoot it. Let's think about what might be wrong:
17:55 do you see it now? I'm pretty confident that your page is displaying properly by now, so we'll spend the final four minutes examining what it all means. 17:55 understanding your web page Let's take a look at each element of your HTML document, starting, as all HTML documents do, with <html>. <html> The first thing on this and every web page is the <html> tag. All HTML documents begin with the tag <html> and end with </html>. (It's the document's way of saying "Curtain up!" and "Curtain down!") <head> The first section of the HTML file, between the <head> and </head> tags, is called the header. It contains all the background information about the page, such as the title. Nothing that appears in the header will show up on the web page itself. <title> Every web page should have a title, which identifies its main purpose. The title doesn't appear in the page proper. It's displayed at the top of the browser window, in the frame around the page. </title> You've probably noticed by now that HTML tags almost always come in pairs. Sweet, isn't it? So remember to finish what you start. With very few exceptions, every opening tag, like <title> needs a corresponding closing tag: </title>. <body> Begins the body, or the visible portion of the web page. <h1> Headlines are marked off by the tags <h1>, <h2>...<h6>, with <h1> the biggest and <h6> the smallest. If you're feeling cocky, you can experiment with your page now: How does the headline look in <h2>? </h1> Closes the headline. All subsequent text will be the default body text, unless you specify differently. <p> Begins a new paragraph by skipping a line. <b> Creates bold text. </b> Ends the bold text; returns to normal text. </p> Ends the paragraph. </body> Ends the body, or the visible portion of the page. </html> Ends the HTML document. 22:00 celebrate! Believe it or not, you now know enough to build a web site. Once you understand how to create and save an HTML document, the rest is a cinch. So don't stop now! Learn everything else about HTML at Webmonkey's Teaching Tool: http://www.webmonkey.com/teachingtool
|
EAN: 2147483647
Pages: 195