Login |
RegisterOver 34,599 Wishes Granted!
Lesson 1 - Intro to HTML
Page Views: 224
|
Lesson 1 – Intro to HTML
Part 1. We are going to write HTML code. HTML is the code that WebPages are written in. HTML stands for Hypertext Markup Language.
Part 2. All of our HTML code will be written in a program called Notepad++.
Click on Start > Notepad++.
Now that Notepad++ is open, lets go ahead and start.
Part 3. Almost all HTML code is written in tags. Lets start the webpage by typing in the first tag, which is the HTML tag. Type the following code in Notepad++:
<HTML>
</HTML>
Type it exactly as you see it. Use capital letters. HTML code looks a lot cleaner when it’s done in all capital letters. The <> brackets are typed by holding down the shift key and hitting the comma and period keys. The / backslash key is found next to the right shift key.
All WebPages have to have the HTML tags. Most tags are written with an opening tag <HTML> and a closing tag </HTML>. The closing tag has a backslash in it; the opening tag does not.
Part 4. Now hit ENTER a few times after the first HTML tag to put some space between the two tags. Your code should look similar to this:
<HTML>
</HTML>
Part 5. Somewhere in between the two tags, type your first and last name. Your code should look similar to this:
<HTML>
Ron Paul
</HTML>
Part 6. Click at the beginning of your name and hit the TAB key one time. Your code should look similar to this:
<HTML>
Ron Paul
</HTML>
Part 7. Click File > Save As.
Under File Name Type: Lesson 1.html
Under Save As Type Select: HTML File
Under Save in: Make sure you save it on your network drive.
Click Save.
If you Saved it correctly, the HTML tags should have turned blue.
Part 8. You have now created a webpage. A very simple one, but you wrote all the code yourself. Go to your network drive and click on your webpage.
Start > Documents > My Documents
Select your network drive.
You should see your webpage there. It should be called Lesson 1.html
When you open your webpage in a browser all you should see is your name somewhere at the top.
Part 9. Open up your code by clicking back on Notepad++. Every webpage should have a BODY tag. The BODY tags go in between the HTML tags. Type the BODY tags in between the HTML tags, but around your name. Your code should look similar to this:
<HTML>
<BODY>
Ron Paul
</BODY>
</HTML>
Part10. It is important to organize our HTML code. Any tags that are within another set of tags need to be tabbed over one time. Highlight the opening BODY tag, Your Name, and the closing BODY tag. Hit the TAB key one time. Your code should look similar to this:
<HTML>
<BODY>
Ron Paul
</BODY>
</HTML>
Part 11. Click on File > Save. Click on your webpage and hit the F5 key to refresh it. Nothing should have changed. You should still only see your name somewhere at the top.
Part 12. Click back on Notepad++. Right before your name add the words “This webpage was designed by”. Your code should now look similar to this:
<HTML>
<BODY>
This webpage was designed by Ron Paul
</BODY>
</HTML>
Part 13. We are going to add a line break. A line break is like hitting the ENTER key. It takes you to the next line. Put the <BR> tag right after the word by. The <BR> tag is one of the few HTML tags that doesn’t have a closing tag. Your code should now look similar to this:
<HTML>
<BODY>
This webpage was designed by<BR> Ron Paul
</BODY>
</HTML>
Part 14. Click File > Save. Click back on your webpage in the browser and hit the F5 key to refresh it. Your name should now be below the text “This webpage was designed by”.
We are now going to change the background color of the webpage. The BODY tag has an attribute called BGCOLOR. This attribute controls the background color. Most HTML tags have attributes. Click inside the top BODY tag. After the word BODY type a space and BGCOLOR=”tan”. Make sure you type the equal sign and the double quotes. The double quotes key is right next to the ENTER key. Make sure you hold down the SHIFT key when you type the double quotes. Your code should look similar to this:
<HTML>
<BODY BGCOLOR=”tan”>
This webpage was designed by<BR> Ron Paul
</BODY>
</HTML>
Part 15. Click File > Save. Click back on your webpage in the browser and hit the F5 key to refresh it. The background color of the webpage should now be a tan color. Hit ENTER after the BR tag so your name is on the line below. Your code should now look similar to this:
<HTML>
<BODY BGCOLOR="tan">
This webpage was designed by<BR>
Ron Paul
</BODY>
</HTML>
Part 16. Click File > Save. If you click back on your webpage in the browser and hit the F5 key, nothing should change. Change the background color. To do this, replace the word tan with another color from this list:
http://en.wikipedia.org/wiki/Web_colors - X11_color_names
Make sure you keep the double quotes around whatever color you choose.
When you have typed in your new color click File > Save.
Click back on your webpage in the browser and hit the F5 key to refresh it. The background color should have changed.
In Notepad++ click File > Print. Once you have printed out your code you are finished with this lesson.
|
|
| Comments |
I had the students use Notepad++ to type in the HTML code.
It is available for free on the web. |
| Materials: |
|
|
 |
|
|
