|
HTML Tutorial: First HTML
|
|
We're going to start with a brain-dead version of this site's opening page. Follow these instructions to get a copy of it in your text editor.
Get Set
Start by making a working directory. C:\website would be a good choice for Windows. /home/martin/website would be good for Linux (if your username is "martin").
The tab in your browser that holds these words is your "tutorial" tab. Click the following link to open index1.html in a new browser window or tab.
www.easyHTMLtutorial.com/index1.html
View the HTML
Your first major webmastering trick: right-click the boring page and choose View Page Source. The HTML that generates the boring page will pop up in what looks like a text editor. Use the pseudo-editor's File/Save As to save a copy into your working directory using the name index.html (drop the "1"). Yes, anytime you see something neat, you can view the source to see how it was done.
Keep the pseudo editor open.
Edit the HTML
Open the index.html file with your text editor. Does it look like what you saw in the pseudo editor, or are all the lines run together? Windows does not use the same end-of-line marking as the rest of the world. The pseudo editor in Firefox is smart enough to correct for this. Many Windows-based text editors are not this smart. Go ahead and press Enter at all the points where your editor's copy runs the lines together. Make it look like what you see in the pseudo editor.
Don't worry about the funny stuff (we'll get there). Change the "This is a horrible ..." sentence to something else. Anything you like. Now save index.html.
Check the Result
Open a "working" tab in your browser (Ctrl+T in most browsers). Choose File/Open File... (Open File..., not Open Location...) and open index.html in your website directory. You should see your changes. You've written your first HTML page! (More precisely, you've modified your first HTML page. But you almost always start an HTML page by modifying another.)
Ready to learn what all those funny things do? You will, but first, let's learn why index.html is special.