Download presentation
Presentation is loading. Please wait.
1
Basics of HTML Lesson 1: Basic HTML
2
Setup: Open TextPad Type in: <html> </html>
Save as ex_firstTry.html Click the globe
3
Add between the <html> </html>
<body bgcolor = #00B2EE> </body> Click the globe again, what happens? What number system is the color in?
4
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
5
Add between the <html> and <body>
<head> <title> Best Web Page EVER! </title> </head> Save and refresh in the browser – what changes?
6
Your web page has two parts:
Head Information about the page Body What is displayed on the page
7
Add: <font face="tahoma" size=5>Hello World!</font>
Save and refresh in the browser – what changes? You already have this
8
Hello <br> World!
Change: Hello World! To Hello <br> World! What changes?
9
Change the <br> to <hr> What happens?
10
More HR fun <HR width=50%> What happens? <HR width = 30%>
<HR size=7>
11
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?
12
Make this:
13
Does the order matter? Change: <font face=“tahoma” size = 5> To
<font size = 5 face=“tahoma” > What changed?
14
Does the order matter? Change: <font face=“tahoma” size = 5> To
<size = 5 face=“tahoma” font > What changed?
15
Lets make some mistakes
Change <font face=“tahoma” size = 5> To <font face=“tahoma” size = 5 What happens?
16
Lets make some mistakes
Change <font face=“tahoma” size = 5> To font face=“tahoma” size = 5> What happens?
17
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?
18
Try this: Print the numbers 1 – 10, one per line.
Make each number a size (so 1 is printed in size 1, etc)
19
Add: <font face="tahoma" size=5 color=#ffff00>
Save and refresh in the browser – what changes? You already have this
20
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>
21
OR We could do: <font face=“tahoma” size = 5 color=yellow> Hello
<br> <font color=red>There</font> </font>
22
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?
23
On Paper What did the following command do? FONT COLOR HEAD TITLE SIZE
BR
24
Lesson 2: Linking and Images
Basics of HTML Lesson 2: Linking and Images
25
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
26
To add the picture: <img src="a.jpg"> What happens?
You can also do: <img src=" " > Why might this be a bad idea?
27
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?
28
img tags height width Try changing the width and height on your picture – what happens?
29
<a href="http://hcps.us/phhs”>PHHS</a>
linking <a href=" What does this do? What color is the link ? Remove the and reload – what happens?
30
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>
Similar presentations
