LTP

What is HTML

When you open up your Internet Explorer or Netscape (other Internet BROWSERS include AOL's browser and MSN browser that are based on Netscape or Internet Explorer), you get to see a pretty website with text, pictures, and sometimes video and sound. What is really happening here is that a text file is describing (to the browser program) what the web page should look like. The text may say things like "center this picture here," and "underline this text there." Even though you do not see these instructions, they are there...even on this web page.

The browser knows what part of the text document are instructions, and what part of the text must be displayed. The way to tell the browser the instructions is to wrap the code around brackets: <whatever instructions> The language you use to write these browser instructions is called Hypertext Markup Language (HTML), and you would save this text file as a: filename.htm

Let us do a web page together from scratch so that you can see how simple it is:

Open your text editor program (Comes free with every computer: Notepad(PC) and SimpleText(MAC))
Type the following (or copy and paste) the following:

<html>
<head>
<title>Your web page title goes here</title>
</head>
<body bgcolor="#FFFFFF" text="#000000">
Your web page content: Text, Pictures, Movies, Animation, etc. goes here
</body>
</html>

The letters in red/italics is what you will type, and the rest in bold text is something you will have to put always. This tells the browser that it is not a text file, but an html page. Notice how every command wrapped in ("<command>") these brakets, have an endind command with the backslash ("</command>") called the closing command. The closing command lets the web page know where the title ends, where the html ends, etc. Without it, the web page would not know when to stop creating the title and where to start creating the body text. (Sometimes HTML is forgiving, but there are some cases where poor HTML will look bad.)
After you type the above code into the text editor, go to File > Save (this will open the Save Dialog Box window) and save your file as mywebpage.htm. Make sure that you select "All Files" under the Save as Type menu area in the Save Dialog Box.
Open your BROWSER and go to File > Open and browse for your mywebpage.htm file. When you click on it, you should see "Your web page title goes here" on the title of the browser and "Your web page content: Text, Pictures, Movies, Animation, etc. goes here" in the main area of the browser. If you see all the coding, the browser thought you were opening this file as text, and therefore will show you the text file you created as is. (To fix this, open your txt file in notepad again, and go to File > Save as, and save it correctly as mentioned in step 3. You probably did not change the Save as Type option.)
Go back to your notepad file and edit some of the stuff you wrote in red. Make sure you hit File > Save, and then go to the browser and hit the refresh or reload button. The browser refresh button looks for the most recently saved html file. (If you do not see the updates, you probably forgot to save the html or your refresh button may be looking at the cache [memory that does not realize that things have been changed]. In the case of the cache memory problem, hit the CTRL key while pressing the Refresh/Reload button.)
You should now have your first web page with text content. Feel free to add or play with the content to make more pages. Do a File > Save As, and save a page1.htm, page2.htm, etc. Usually, you want to make your home page file name index.htm. This is a standard to allow people who visit the www.nasa.gov site to automatically get the default htm file. If you do not have an index.htm file then every user who visits your page has to type "www.yourwebdomain.com/yourpagename.htm". As you can see, it is nicer to have the users just type "www.yourwebdomain.com" only, and not "www.yourdomain.com/index.htm". We will learn how to create links next. Links allow you to jump from one web page to another. The power of the internet lies in the fact that your personal page on airplanes for example, can link to other sites on airplanes (e.g. NASA Aeronautics pages, LTP's Beginners Guide to Aeronautics).

Go on to Lesson 2. For those eager to learn more, look at other people's website to see how they create their html code. Look at the HTML file code by going to the browser's menu, and click under View > Source: the HTML code should appear in your computer's default text editor.

-Steven Gutierrez - Author


		Teacher's Corner Home \| Teacher created Web pages \| Educator's Workshop \| Standards \| Educational Technology Creation
	Educational Technology Creation Lesson 1: Web Development (Level: Beginner) - Go to Lesson 2 What is HTML When you open up your Internet Explorer or Netscape (other Internet BROWSERS include AOL's browser and MSN browser that are based on Netscape or Internet Explorer), you get to see a pretty website with text, pictures, and sometimes video and sound. What is really happening here is that a text file is describing (to the browser program) what the web page should look like. The text may say things like "center this picture here," and "underline this text there." Even though you do not see these instructions, they are there...even on this web page. The browser knows what part of the text document are instructions, and what part of the text must be displayed. The way to tell the browser the instructions is to wrap the code around brackets: <whatever instructions> The language you use to write these browser instructions is called Hypertext Markup Language (HTML), and you would save this text file as a: filename.htm Let us do a web page together from scratch so that you can see how simple it is: Open your text editor program (Comes free with every computer: Notepad(PC) and SimpleText(MAC)) Type the following (or copy and paste) the following: <html> <head> <title>Your web page title goes here</title> </head> <body bgcolor="#FFFFFF" text="#000000"> Your web page content: Text, Pictures, Movies, Animation, etc. goes here </body> </html> The letters in red/italics is what you will type, and the rest in bold text is something you will have to put always. This tells the browser that it is not a text file, but an html page. Notice how every command wrapped in ("<command>") these brakets, have an endind command with the backslash ("</command>") called the closing command. The closing command lets the web page know where the title ends, where the html ends, etc. Without it, the web page would not know when to stop creating the title and where to start creating the body text. (Sometimes HTML is forgiving, but there are some cases where poor HTML will look bad.) After you type the above code into the text editor, go to File > Save (this will open the Save Dialog Box window) and save your file as mywebpage.htm. Make sure that you select "All Files" under the Save as Type menu area in the Save Dialog Box. Open your BROWSER and go to File > Open and browse for your mywebpage.htm file. When you click on it, you should see "Your web page title goes here" on the title of the browser and "Your web page content: Text, Pictures, Movies, Animation, etc. goes here" in the main area of the browser. If you see all the coding, the browser thought you were opening this file as text, and therefore will show you the text file you created as is. (To fix this, open your txt file in notepad again, and go to File > Save as, and save it correctly as mentioned in step 3. You probably did not change the Save as Type option.) Go back to your notepad file and edit some of the stuff you wrote in red. Make sure you hit File > Save, and then go to the browser and hit the refresh or reload button. The browser refresh button looks for the most recently saved html file. (If you do not see the updates, you probably forgot to save the html or your refresh button may be looking at the cache [memory that does not realize that things have been changed]. In the case of the cache memory problem, hit the CTRL key while pressing the Refresh/Reload button.) You should now have your first web page with text content. Feel free to add or play with the content to make more pages. Do a File > Save As, and save a page1.htm, page2.htm, etc. Usually, you want to make your home page file name index.htm. This is a standard to allow people who visit the www.nasa.gov site to automatically get the default htm file. If you do not have an index.htm file then every user who visits your page has to type "www.yourwebdomain.com/yourpagename.htm". As you can see, it is nicer to have the users just type "www.yourwebdomain.com" only, and not "www.yourdomain.com/index.htm". We will learn how to create links next. Links allow you to jump from one web page to another. The power of the internet lies in the fact that your personal page on airplanes for example, can link to other sites on airplanes (e.g. NASA Aeronautics pages, LTP's Beginners Guide to Aeronautics). Go on to Lesson 2. For those eager to learn more, look at other people's website to see how they create their html code. Look at the HTML file code by going to the browser's menu, and click under View > Source: the HTML code should appear in your computer's default text editor. -Steven Gutierrez - Author Please send any comments to: Web Related: David.Mazza@grc.nasa.gov Technology Related: Thomas.J.Benson@grc.nasa.gov Responsible NASA Official: Theresa.M.Scott (Acting)

Educational Technology Creation