Creating a Page from Scratch - HTML 4

Using HTML to create a Web page from scratch involves four straightforward steps:

  • Plan your page design.
  • Combine HTML and text in a text editor to make that design a reality.
  • Save your page.
  • View your page in a Web browser.

So break out your text editor and Web browser and roll up your sleeves.

Step 1: Planning a simple design
We’ve discovered that a few minutes spent planning your general approach to a page at the outset of work makes the page-creation process much easier. You don’t have to create a complicated diagram or elaborate graphical display in this step. Just jot down some ideas for what you want on the page and how you want it arranged.

You don’t even have to be at your desk to plan your simple design. Take a notepad and pencil outside and design in the sun, or scribble on a napkin while you’re having lunch. Remember, this is supposed to be fun.

The example in this chapter is our take on the traditional “Hello World” exercise used in just about every existing programming language. That is, the first thing you learn when tackling a new programming language is how to display the phrase Hello World on-screen. In our example, we create a short letter to the world instead, so the page is a bit more substantial and gives you more text to work with. Figure shows our basic design for this page.

Figure : Taking a few minutes to sketch your page design makes writing HTML easier.

Taking a few minutes to sketch your page design makes writing HTML easier

The basic design for the page includes four basic components:

  • A serviceable title: “Hello World”
  • A few paragraphs explaining how the page’s author plans to help the Earth meet its yearly quota of Znufengerbs
  • A closing of “Sincerely”
  • A signature

Jot down some notes about the color scheme you want to use on the page. For effect, we decided that our example page should have a black background and white text, and the title should be “Greetings From Your Future Znufengerb Minister.”

When you know what kind of information you want on the page, you can move on to Step 2 — writing the markup.

Step 2: Writing some HTML
You have a couple of different options when you’re ready to create your HTML. In the end, you’ll probably use some combination of these:

  • If you already have some text that you just want to describe with HTML, save that text as a plain-text file and add HTML markup around it.
  • Start creating markup and add the content as you go.

Our example in this chapter starts with some text in Word document format. We saved the content as a text file, opened the text file in our text editor, and added markup around the text.

To save a Word file as a text document, choose File➪Save As. In the dialog box that appears, choose Text Only (*.txt) from the Save As Type drop-down list.

Figure shows how our draft letter appears in Microsoft Word before we convert it to text for our page.

Listing : The Complete HTML Page for the Zog Letter

<p>It has come to our attention that Earth has fallen well short of producing its yearly quota of Znufengerbs. To help you improve your production and establish a plentiful Znufengerb colony, I, Zog, the Minister of Agriculture of Grustland, will be arriving on your planet within the week along with my herd experts to take command of your Znufengerb enterprise.</p> <p>Do not fear, I have the highest expectations for a smooth transition from your current production of the creatures you call cows to our beloved Znufengerbs. The future of the galaxy hinges on Earth’s ability to meet
its Znufengerb quota, and I will do all in my power to make you the most productive source of Znufengerbs in the universe. </p> <p>I have studied your history extensively and feel that I am the best candidate for the position of Znufengerb Minister. I look forward to placing a Znufengerb in every home to bring you joy.</p> <p>Sincerely,
Zog, Minister of Agriculture
</p></body>
</html>

The complete HTML page looks like Listing.

The HTML markup includes a collection of markup elements and attributes that describe the letter’s contents:

  • The <html> element defines the document as an HTML document.
  • The <head> element creates a header section for the document.
  • The <title> element defines a document title that is displayed in the browser’s title bar.
  • The <title> element is inside the <head> element.
  • The <body> element holds the text that appears in the browser window.
  • The bgcolor and text attributes work with the <body> element. These attributes set the background color to black and the text color to white. (These attributes are deprecated, but really easy to use.
  • The <h1> element marks the Hello World text as a first-level heading.

Figure : The letter that is the text for our page in wordprocessing form

The letter that is the text for our page in wordprocessing form

  • The <p> elements identify each paragraph of the document.
  • The element adds a manual line break after Sincerely.

Don’t worry about the ins and outs of how all these elements work.

After you create a complete HTML page (or the first chunk of it that you want to review), you must save it before you can see your work in a browser.

Step 3: Saving your page
You use a text editor to create your HTML documents and a Web browser to view them, but before you can let your browser loose on your HTML page, you have to save that page. When you’re just building a page, you should save a copy of it to your local hard drive and view it locally with your browser.

Choosing a location and name for your file
When you save your file to your hard drive, keep the following in mind:

  • You need to be able to find it again.
  • Create a folder on your hard drive especially for your Web pages. Call it Web Pages or HTML (or any other name that makes sense to you), and be sure you put it somewhere easy to find.
  • The name should make sense to you so you can identify file contents without actually opening the file.
  • The name should work well in a Web browser.

Don’t use spaces in the name. Some operating systems — most notably Unix and Linux (the most popular Web-hosting operating systems around) — don’t tolerate spaces in filenames.

In our example, we saved our file in a folder called Web Pages and named it (drum roll, please) zog_letter.html, as shown in Figure.

Figure : Use a handy location and a logical filename for HTML pages.

Use a handy location and a logical filename for HTML pages.

.htm or .html
You can actually choose from one of two suffixes for your pages: .html or .htm. (Our example filename, zog_letter.html, uses the .html suffix.)

The shorter .htm is a relic from the 8.3 DOS days when filenames could only have eight characters followed by a three-character suffix that described the file’s type. Today, operating systems can support long filenames and suffixes that are more than three letters long, so we suggest you stick with .html.

Web servers and Web browsers handle both .htm and .html equally well.

Stick with one filename option. .html and .htm files are treated the same by browsers and servers, but they’re different suffixes, so they create different filenames. (The name zog_letter.html is different from zog_letter.htm.) This matters when you create hyperlinks.

Step 4: Viewing your page
After you save a copy of your page, you’re ready to view it in a Web browser.
Follow these steps to view your Web page in Internet Explorer. (Steps may be
different if you’re using a different browser.)

  • If you haven’t opened your browser, do that now.
  • Choose FileOpen and click the Browse button.
  • Navigate your file system until you find your HTML file, and then select it so it appears in the File name area.

Figure shows a highlighted HTML file, ready to be opened.
Figure : Use Internet Explorer to navigate to your Web pages

Use Internet Explorer to navigate to your Web pages

  • Click the Open button, and then click OK.

The page appears in your Web browser in all its glory, as shown in Figure.

Figure : Viewing a local file in your Web browser.

Viewing a local file in your Web browser.

You aren’t actually viewing this file on the Web yet; you’re just viewing a copy of it saved on your local hard drive. You can’t give anyone the URL for this file yet, but you can edit and view the changes you make.


All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

HTML 4 Topics