×
(adsbygoogle = window.adsbygoogle || []).push({});

Start Creating A Web Page with HTML, Step by Step

A Web Page, step by step

You got a look at an HTML document in Chapter 1, HTML Overview, but now you’ll get to create one yourself and play around with it in the browser.

Before We Begin, Launch a Text Editor-

In this chapter and throughout the book, we’ll be writing out HTML documents by hand, so the first thing we need to do is launch a text editor. The text editor that is provided with your operating system, such as Notepad (Windows) or TextEdit (Macintosh), will do for these purposes. Other text editors are fine as long as you can save plain text files with the .html extension. If you have a WYSIWYG web-authoring tool such as Dreamweaver, set it aside for now. I want you to get a feel for marking up a document manually (see the “HTML the Hard Way”).

 

HTML the Hard Way

I stand by my method of teaching HTML the old-fashioned way—by hand. There’s no better way to truly understand how markup works than typing it out, one tag at a time, then opening your page in a browser. It doesn’t take long to develop a feel for marking up documents properly. Although you may choose to use a web-authoring tool down the line, understanding HTML will make using your tools easier and more efficient. In addition, you will be glad that you can look at a source file and understand what you’re seeing. It is also crucial for troubleshooting broken pages or fine-tuning the default formatting that web tools produce. And for what it’s worth, professional web developers tend to mark up content manually because it gives them better control over the code and allows them to make deliberate decisions about what elements are used.

    This section shows how to open new documents in Notepad and TextEdit. Even if you’ve used these programs before, skim through for some special settings that will make the exercises go more smoothly. We’ll start with Notepad; Mac users can jump ahead.

                       Figure 1-1. In this chapter, we’ll write the source document for this page step by step.

Creating a new document in Notepad (Windows)

These are the steps to creating a new document in Notepad on Windows 10

 

 

 

(adsbygoogle = window.adsbygoogle || []).push({});