Purpose: Learn How To Create Basic Web Page.
Ask: “Can you remember what is the purpose of a Browser. “
“Do you remember what I did to show you what is actually travelling through the cable or telephone lines?”
Visit any web page of your choosing and view the Source Code. (Hint: MM/View/Source.)
!Activate Your PC Extension: Instructions Click Here.
Access Note Pad
Show students how to access Note Pad. – This is the program you will write your code with. (Mac users use “Text Edit.”)
Step-ByStep Guide: My First Web Page - Video Tutorial: (Mobile) (You Tube)
Model: "My First Web Page."
- First, lets make a webpage! The easiest way to learn how to create a website is to just hop right in... I will explain what each Tag does later.
- Open Notepad and begin typing. (Remember PBJ & accuracy??)
- I recommend you turn on "Text Wrap": MM/Format/TextWrap.
- I also recommend you have at least 2 windows open at the same time: one window will show Notepad open where you will type the code, while the second window can have the lines of code that you are copying visible.
- Follow the routine of: 1. Type the code with Notepad, 2. Save the file to the appropriate folder, and 3. Then open that file with the browser of your choice (I like to right click on the file and then select "Open With," and then I find a Browser. After the first time that you save the file, all you have to do is Save anytime you make a change to the code and then hit refresh on the browser.
- Important: The first time you create a new page...you must save it as a ".html" file. Any time you want to edit the page: Open Note Pad (or Text Edit for Mac) / MM / File / Open / then find the web page you want to edit. Anytime you want to view the page in a browser, just double click on this document and it will open in a browser window.
As you created your First Web Page, notice that this simple page was based upon the follow 4 tags.
The 4 Tags shown below are the basis of all web pages...it is that simple!
Tag
(Open)
|
Description |
Tag
(Closed)
|
,<html> |
Defines and HTML document. |
</html> |
<head> |
Defines information about the document. |
</head> |
<title> |
Defines the title of the document – seen at the top of the page. |
</title> |
<body> |
Defines the main part of the document – what you see on the page. |
</body> |