Basics of HTML Lesson 1: Basic HTML
Setup: Open TextPad Type in: <html> </html> Save as ex_firstTry.html Click the globe
Add between the <html> </html> <body bgcolor = #00B2EE> </body> Click the globe again, what happens? What number system is the color in?
Add between the <body> </body> Hello World! Save Go to the web browser and hit refresh What happens? What font does it use? What color is the text
Add between the <html> and <body> <head> <title> Best Web Page EVER! </title> </head> Save and refresh in the browser – what changes?
Your web page has two parts: Head Information about the page Body What is displayed on the page
Add: <font face="tahoma" size=5>Hello World!</font> Save and refresh in the browser – what changes? You already have this
Hello <br> World! Change: Hello World! To Hello <br> World! What changes?
Change the <br> to <hr> What happens?
More HR fun <HR width=50%> What happens? <HR width = 30%> <HR size=7>
More HR fun <HR width=50% align=center > What happens? If you have CENTER you would also expect to have ____ and ____. Can you change the color of a line?
Make this:
Does the order matter? Change: <font face=“tahoma” size = 5> To <font size = 5 face=“tahoma” > What changed?
Does the order matter? Change: <font face=“tahoma” size = 5> To <size = 5 face=“tahoma” font > What changed?
Lets make some mistakes Change <font face=“tahoma” size = 5> To <font face=“tahoma” size = 5 What happens?
Lets make some mistakes Change <font face=“tahoma” size = 5> To font face=“tahoma” size = 5> What happens?
Mistakes Since HTML is not a programming language, it is interpreted, not compiled. When the browser hits mistakes it does not give an error Why is this an advantage?
Try this: Print the numbers 1 – 10, one per line. Make each number a size (so 1 is printed in size 1, etc)
Add: <font face="tahoma" size=5 color=#ffff00> Save and refresh in the browser – what changes? You already have this
Change it so the Hello and There are different colors. <font face=“tahoma” size = 5> <font color=yellow>Hello</font> <br> <font color=red>There</font> </font>
OR We could do: <font face=“tahoma” size = 5 color=yellow> Hello <br> <font color=red>There</font> </font>
Try this: Print your name in size 7 Curlz MT font. <font face="Curlz MT" size = 7> Mrs. Dovi</font> What happens if you take off the “ “ around Curlz MT?
On Paper What did the following command do? FONT COLOR HEAD TITLE SIZE BR
Lesson 2: Linking and Images Basics of HTML Lesson 2: Linking and Images
First we need a picture Go online and save a picture to your h drive In Textpad create a new web page Print your name in size 6 blue font Change the font to something other than Times New Roman Change the background color
To add the picture: <img src="a.jpg"> What happens? You can also do: <img src="http:\\hcps.us\phhs\images\map_phhs.gif " > Why might this be a bad idea?
img tags <img src="a.jpg" alt = "AMAZING picture"> Refresh your page and hold the mouse over your picture – what happens? Why is this a good idea? http://www.w3schools.com/tags/tag_img.asp
img tags height width Try changing the width and height on your picture – what happens?
<a href="http://hcps.us/phhs”>PHHS</a> linking <a href="http://hcps.us/phhs”>PHHS</a> What does this do? What color is the link ? Remove the http:// and reload – what happens?
Changing Link Colors Change the font color INSIDE the <a> </a> tags – try it! Change the link properties for the whole page: < body link = #5500FF alink=yellow vlink= green>