Introduction to Creating a Web Page using a Simple Text Editor (Notepad) 1 2004 Ecirp Studios
Building a web page may seem difficult at first glance, but it can be fun and easy with just a basic understanding of how the code works. This code is called HTML. HTML is an acronym for HyperText Markup Language. Simply put, HTML is various sets of instructions that tell a web browser how to display the information you want to present. These brief instructions are called HTML tags and are not visible on the web pages you see. The HTML tags are hidden in the source code for the page. The source code is like a plain text file that contains the information you want to present, except it also includes the HTML tags that control the page layout. Introduction to HTML 2 2004 Ecirp Studios
Introduction to HTML cont … HTML pages are nothing more than glorified text files. Each tag consists of the containers, which are the lesser than ( ) arrows, and the HTML command within them. There are two basic parts to an HTML tag. The first part turns a command on and the second part turns it off. For example, if you want to present the word “Internet” in bold text, you write it like this: Internet The first part, the tag turns on the command for bold text. The second part, the tag turns the command back off. You will notice the command to turn off (cancel) a command is a repetition of the original command with a forward slash (/) in front of it. When viewed with a browser, the code would show this: Internet Now let’s get started and create your web page… 3 2004 Ecirp Studios
Step 1: Opening Notepad To start Notepad: Click the Start button Select Programs Select Accessories Click Notepad 4 2004 Ecirp Studios
Each web page starts with the HTML language identifier. At the top of the page in Notepad, type the following: <html> TIP: To keep web pages easy to edit later, start each new set of tags on the next line. Step 2: The Tag 5 2004 Ecirp Studios
The section of an html page is where you place the title of your web page. The text of the title tag is what shows up in the title bar at the very top of your browser when you view a web page. <head> Step 3: The Tag 6 2004 Ecirp Studios
Type under your tag. Add the title “My Web Page” beside your tag. Once you have typed both the tag and the title of your web page, you will need to turn off the tag. Do you remember how to turn off a tag? <title>My Web Page Step 4: The Tag 7 2004 Ecirp Studios
Adding a forward slash within the containers and before the HTML command tells the browser this is the end of the HTML command. Most tags require a cancel tag for the page to function properly. You have not canceled (turned off) any other HTML commands yet because they are still active. Finish your title tag now by typing after the title “My Web Page.” Now cancel the head section of your page after the by typing. My Web Page </head> </title> Step 5: Issuing Cancel Commands 8 2004 Ecirp Studios
The body area is where you put all the content you want people to see. So far, nothing we have typed will show up on the web page (with the exception of the title, which shows only in the title bar at the top of the browser, not on the page itself). Type the body command like this: My Web Page <body> Step 6: The Tag 9 2004 Ecirp Studios
Now is the time to finally add something you will be able to see on the page when viewed with a web browser. Type the following content into your page: Gee, this is really easy. My Web Page Gee, this is really easy. Step 7: Adding Content 10 2004 Ecirp Studios
If you look at the code you have typed so far, which tags still need canceling? The only tags we have not yet canceled are the body tag and the opening html tag. Now add the following cancel tags after the content: My Web Page Gee, this is really easy. </body> </html> Step 8: Finishing the HTML Document 11 2004 Ecirp Studios
The first page people see when they come to your site, should be named “index” (without the quotes). That is the default name browsers look for. After that, you can name the rest of your pages as you like, as long as you don’t use any spaces or illegal characters in the name. Illegal characters include colons, slashes, extended characters, or even just spaces. b Page Gee, this is really easy. Step 9: Saving Your Web Page To save the file in Notepad: Choose File on the Menu Bar Click on Save As… 12 2004 Ecirp Studios
In the Save In field, click the arrow to access the drop-down list, then choose where you want to save your file. Once the Save In field is set, type index.html in the File name field. Click the Save button located near the bottom right corner of the Save As dialog box. Step 9: Saving Your Web Page cont… 13 2004 Ecirp Studios
Step 10: Viewing Your Web Page With your browser open, choose File Click on Open Open your web browser (In this example, Microsoft Internet Explorer) and open the page you made. 14 2004 Ecirp Studios
Click on the Browse Button Navigate to where you saved the HTML file named “index.html” Select the file “index.html” and click Open Step 10: Viewing Your Web Page cont… 15 2004 Ecirp Studios
You have just created a web page using Microsoft Notepad. Learning to create quality web pages that go beyond these basics is largely a matter of learning more HTML commands. Most are just as easy to learn and use as those just taught. Congratulations! 16 2004 Ecirp Studios