First Page in HTML

Rumman Ansari   Software Engineer   2023-03-27   9298 Share
☰ Table of Contents

Table of Content:


Here's the great news: The most important Web technology you need is also the easiest. You don't need any expensive or complicated software, and you don't need a powerful computer. You probably have everything you need to get started already.

No more talking! Fire up a computer and let’s build a Web page!

1. Open a text editor.

You can use any text editor you want, as long as it lets you save files as plain text. If you’re using Windows, Notepad is fine for now. (Later, I show you some other free alternatives, but start with something you already know.)

Open a text editor and type code

Don’t use a word processor like Microsoft Word. It doesn't save things in the right format, and not all the nifty features, like fonts and centering, work right. I promise that you'll figure out how to do all that stuff but without using a word processor. Even the Save as HTML feature doesn't work right. You really need a very simple text editor, and that's it. In Chapter 3 of this minibook, I show you a few more editors that make your life easier. You’ll never use Word.

2. Type the following code

Really. Type it in your text editor so you get some experience writing the actual code. I explain very soon what all this means, but type it now to get a feel for it:

You if you don't want o write just copy form below



<html>
<head>
<!-- first-page.html -->
<title>My very first web page!</title>
</head>
<body>
<h1>This is my first web page!</h1>
<p>
This is the first web page I’ve ever made,
and I’m extremely proud of it.
It is so cool!
</p>
</body>
</html>


3. Save the file as first-page.html

save file as .html

It’s important that your filename has no spaces and ends with the .html extension. Spaces cause problems on the Internet (which is, of course, where all good pages go to live), and the .html extension is how most computers know that this file is an HTML file (which is another name for a Web page). It doesn't matter where you save the file, as long as you can find it in the next step.

You can use either .htm or .html as file extension. There is no difference, it is up to you.

save html file with .html extension

4. Open your Web browser

The Web browser is the program used to look at pages. After you post your page on a Web server somewhere, your Great Aunt Gertrude can use her Web browser to view your page. You also need one (a browser, not a Great Aunt Gertrude) to test your page. For now, use whatever browser you ordinarily use. Most Windows users already have Internet Explorer installed. If you’re a Mac user, you probably have Safari. Linux folks generally have Firefox. Any of these are fine. In Chapter 3 of this minibook, I explain why you probably need more than one browser and how to configure them for maximum usefulness.

5. Load your page into the browser.

You can do this a number of ways. You can use the browser’s File menu to open a local file, or you can simply drag the file from your Desktop (or wherever) to the open browser window.

Open the saved HTML file in your favorite browser (double click on the file, or right-click - and choose "Open with").

6. Bask in your newfound genius.

Your simple text file is transformed! If all went well, it looks like Figure below.

Output

Live Preview