Basics of HTML Lesson 1 Basic HTML Setup

Basics of HTML Lesson 1: Basic HTML

Setup: 1. Open Text. Pad 2. Type in: <html> </html> Save as ex_first. Try. html 4. Click the globe 3.

Add between the <html> </html> <body bgcolor = #00 B 2 EE> </body> Click the globe again, what happens? What number system is the color in?

Add between the <body> </body> Hello World! Save 2. Go to the web browser and hit refresh 1. • • • 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 l Information about the page Ø Body l What is displayed on the page

Add: Hello World! Yo ua lre ad yh av e thi s Save and refresh in the browser – what changes?

Change: Hello World! To Hello World! • What changes?

Change the to <hr> What happens?

More HR fun <HR width=50%> • What happens? <HR width = 30%> • What happens? <HR size=7> • What happens?

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: Ø To What changed?

Does the order matter? Ø Change: Ø To <size = 5 face=“tahoma” font > What changed?

Lets make some mistakes Ø Change Ø To <font face=“tahoma” size = 5 What happens?

Lets make some mistakes Ø Change Ø 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: Yo ua lre ad yh av et his Save and refresh in the browser – what changes?

Change it so the Hello and There are different colors. Hello There

OR We could do: Hello There

Try this: Print your name in size 7 Curlz MT font. Mrs. Dovi What happens if you take off the “ “ around Curlz MT?

On Paper Ø What did the following command do? Ø FONT Ø COLOR Ø HEAD Ø TITLE Ø SIZE Ø BR

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 l l l 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='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20570%22%3E%3C/svg%3E' data-src="a. jpg"> Ø What happens? Ø You can also

To add the picture: <img src="a. jpg"> Ø What happens? Ø You can also do: <img src="http: \hcps. usphhsimagesmap_phhs. gif " > Ø Why might this be a bad idea?

img tags Ø <img src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20570%22%3E%3C/svg%3E' data-src="a. jpg" alt = "AMAZING picture"> Ø Refresh your page

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. w 3 schools. com/tags/tag_img. asp

img tags Ø height Ø width Ø Try changing the width and height on your picture – what happens?

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 1. Change the font color INSIDE the <a> </a> tags – try it! 2. Change the link properties for the whole page: < body link = #5500 FF alink=yellow vlink= green>