Login |
RegisterOver 34,599 Wishes Granted!
Lesson 2 – Intro to HTML
Page Views: 122
|
Lesson 2 – Intro to HTML Part 1. We are going to continue to where we left off. We are going to open the webpage we made last time. Click on Start > Notepad++. Once Notepad++ is open Click File > Open. Select your network drive (the one with your name in it) and then select the lesson 1.html file you were working on last time. Your code should look similar to this: <HTML> <BODY BGCOLOR="tan"> This webpage was designed by<BR> Ron Paul </BODY> </HTML> Part 2. Save this as lesson 2. Click File > Save As. Type Lesson2.html for File Name. Select HTML File for the Save as type. Make sure you save it to your network drive. Click Save. Open up your webpage along with your code. Click Start > Documents > My Documents. Select your Network Drive. Double click lesson2.html to open it. It should open up in a browser. Part 3. Click back on Notepadd++. We are going to change the font. In order to do this we have to add the FONT tag around our text. Add the FONT tags around your text, so your code looks similar to this: <HTML> <BODY BGCOLOR="tan"> <FONT FACE=”arial”> This webpage was designed by<BR> Ron Paul </FONT> </BODY> </HTML> r>
Part4. The face attribute controls what font it will use. Attributes are always added to the opening tags, never the closing tags. Right now we have arial selected. Try typing in a different font. Here’s a partial list of HTML fonts:
http://www.ilovethisplace.com/webdesign/fonts.html
Onceyou have typed in a different font, in Notepadd++ Click File > Save.
Now click on the browser where your webpage is being displayed and hit the F5 key to refresh your page. You should see that your font has changed.
Part 5. Now let’s change the font color. Add the color attribute to the FONT tag so your code looks similar to this:
<FONT FACE=”arial” COLOR=”red”>
This webpage was designed by<BR>
Ron Paul
</FONT>
Part 6. Change the color from red to a different color. Here’s a list of HTML colors:
http://en.wikipedia.org/wiki/Web_colors - X11_color_names
In Notepad++ Click File > Save. Now click on your webpage in the browser and hit the F5 key to refresh it. Your font color should have changed.
Part 7. Now let’s make your name bold. Type the B tags around name, so your code looks similar to this:
<FONT FACE=”arial” COLOR=”red”>
This webpage was designed by<BR>
<B>Ron Paul</B>
</FONT>
Part 8. Click File > Save in Notepad++. Click on your webpage in the browser and hit F5 to refresh it. Your name should now be bold.
Part 9. Let’s organize our webpage a little by putting everything in a table.
A table has three sets of tags. The TABLE tags, TR tags, and TD tags.
Think of the TR tags as the rows of the table and think of the TD tags as the columns of the tables. The TR tags go inside the TABLE tags, and the TD tags go inside the TR tags.
All of the TABLE, TR, and TD tags will go inside the BODY tags. The FONT tags and your text will go inside the TD tags. Go ahead and put everything in a table so your code looks similar to this:
<HTML>
<BODY BGCOLOR="tan">
<TABLE>
<TR>
<TD>;
<FONTFACE="arial" COLOR="red">
This webpage was designed by<BR>
<B>Ron Paul</B>
</FONT>
</TD>
</TR>;
</TABLE>
</BODY>
</HTML>
<br>
Part10. Any tags or text that is inside another set of tags needs to be tabbed over. So, tab everything over so your code looks similar to this:
<HTML>
<BODY BGCOLOR="tan">
<TABLE>
<TR>
<;TD>
<FONTFACE="arial" COLOR="red">
This webpage was designed by<BR>
<B>Ron Paul</B>
</FONT>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Part11. We need to add the BORDER attribute to the top TABLE tag and set it to 1 so we can see it. Go ahead and add the border attribute to the top TABLE tag so your code looks similar to this:
<TABLE BORDER=”1”>
Part 12. Click File > Save in Notepad++. Click on your webpage in the browser and hit F5 to refresh it. You should now be able to see the table you created.
Let’s add another row to this table. To add another row you have to add another set of TR and TD tags. Add another row below the first, so your code looks similar to this:
<TABLE BORDER=”1”>
<TR>
<TD>
<FONT FACE="arial" COLOR="red">
This webpage was designed by<BR>
<B>Ron Paul</B>
</FONT>
</TD>
</TR>
<TR>
<TD>
</TD>
</TR>></TABLE>
Part13. Tab the TR and TD tags over so your code looks similar to this:
<TABLE BORDER=”1”>
<TR>
<TD>
<FONT FACE="arial" COLOR="red">
This webpage was designed by<BR>
<B>Ron Paul</B>
</FONT>
</TD>
</TR>
<TR>
<TD>
</TD>
</TR>></TABLE>
Part14. In between the bottom TD tags type “row 2”. Your code should look similar to this:
<TR>
<TD>
row 2
</TD>
</TR>
Part 15. Click File > Save in Notepad++. Click on your webpage in the browser and hit F5 to refresh it. You should now see that there are two rows in the table. Let’s change the background color of the two rows. To do this we’ll use the TD attribute BGCOLOR. In the first TD tag type BGCOLOR=”cornsilk”. Your code should look similar to this:
<TD BGCOLOR=”cornsilk”>
<FONT FACE="arial" COLOR="red">
This webpage was designed by<BR>
<B>Ron Paul</B>
</FONT>
</TD>
Part 16. In the top of the second set of TD tags type BGCOLOR=”cornsilk”. Your code should look similar to this:
<TR>
<TD BGCOLOR=”cornsilk”>
row 2
</TD>
</TR>
Part 17. Change the color from cornsilk to a different color. Here’s a list of HTML colors:
http://en.wikipedia.org/wiki/Web_colors - X11_color_names
In Notepad++ Click File > Save. Now click on your webpage in the browser and hit the F5 key to refresh it. The background color of the two rows should have changed.
Part 18. Let’s make the table a little bit bigger. We are going to increase the WIDTH of the table. To do this we’ll use the WIDTH attribute of the TABLE tag. In the opening TABLE tag type WIDTH=”35%”. Hold down the SHIFT key and hit the 5 key to type the percent. Your code should now look similar to this:
<TABLE BORDER="1" WIDTH="35%">
Part 19. In Notepad++ Click File > Save. Now click on your webpage in the browser and hit the F5 key to refresh it. The width of the table should have increased. Let’s increase the HEIGHT of the table. To do this we’ll use the HEIGHT attribute of the TABLE tag. In the opening TABLE tag type HEIGHT=”40%”. Your code should now look similar to this:
<TABLE BORDER="1" WIDTH="35%" HEIGHT=”40%”>
Part 20. In Notepad++ Click File > Save. Now click on your webpage in the browser and hit the F5 key to refresh it. The height of the table should have increased. Let’s center everything in the table. To do this we’ll use the ALIGN attribute of the TD tag. In the opening TD tags type ALIGN=”center”. Your code should look similar to this:
<TD BGCOLOR="cornsilk" ALIGN="center">
<FONT FACE="arial" COLOR="red">
This webpage was designed by<BR>
<B>Ron Paul</B>
</FONT>
</TD>
</TR><br><TR>
<TDBGCOLOR="cornsilk" ALIGN="center">
row 2
</TD>
Part 21. In Notepad++ Click File > Save. Now click on your webpage in the browser and hit the F5 key to refresh it. The text in the rows should now be centered. By default the text is centered vertically in the rows. Let's move the text to the top. To do this we'll use the VALIGN attribute of the TD tags. VALIGN stands for vertical alignment.
In the opening TD tags type VALIGN="top". Your code should look similar to this:
<TD BGCOLOR="cornsilk" ALIGN="center" VALIGN="top">
<FONT FACE="arial" COLOR="red">
This webpage was designed by<BR>
<B>Ron Paul</B>
</FONT>
</TD>
</TR><br><TR>
<TDBGCOLOR="cornsilk" ALIGN="center" VALIGN="top">
row 2
</TD>
Part 22. In Notepad++ Click File > Save. Now click on your webpage in the browser and hit the F5 key to refresh it. The text in the rows should now be at the top. You are now finished with Lesson 2. Printout your code.
In Notepad++ click File > Print.
Do not click "Print Now".
|
|
| Comments |
Notepad++ was used as the software to type the HTML Code in.
It is available for free on the web. |
| Materials: |
|
|
 |
|
|
