Lesson-2

Welcome back!

Warm Up - MATH

Click HERE to get your math warm-up.  

Do NOT Start until I say GO!

Getting back to HTML code.....

How to Insert a Picture:

Right Click on the pizza shown below, and "Save Picture As" to your H-Drive.  Rename the file "pizza" and note the file extension for future use (.png or .jpg or.gif)

An example of the code to insert a picture is shown below:

    <img src="pizza.png"> .   (The code on the left is for the pizza shown above, please note the name of the file and file extension will vary with the name and type of file you select)

How to Align Text or Images

Aligning things is easy.  Simply indicate if you would like the text or images to be center, left, or right.  See examples of the tag below:

    <center> xxxxxxxxxxxx </center>

How to Change Background Colors:

To change a background color go back into the body tag and use the code as shown below:

    <body bgcolor=green>  

This would change the background color to green.  Note that if your background color and font color are the same, your font will not be visible as it matches the background.

How to Insert a Picture as your Background:

Be careful when you do this....Many images make it VERY HARD to see text.  Choose neutral images or create a custom image so that the color scheme flows and is visually appealing.  Again, you will go into the body tag and change the code as shown below:

    <body background=nameofpicture.jpg> 

This would change the background to the picture you selected.  Make sure the image is in the same folder as your code.  

How to Create an Ordered List (numbered):

Creating an ordered/numbered list is as easy as 1, 2, 3!  Check out the code shown below:

    Creating an ordered list is as easy as: <br>

    <ol>

    <li>One,<br>

    <li>Two,<br>

    <li>Three!<br>

    </ol>

Note that the <li> stands for "list-item" and that I placed a line-break tag (<br>) at the end of each line so that each number is on its own line.

How to Create an Un-Ordered List (bulleted):

Creating an ordered/numbered list is as easy as 1, 2, 3!  Check out the code shown below:

    Creating an un-ordered list is as easy as: <br>

    <ul>

    <li>One,<br>

    <li>Two,<br>

    <li>Three!<br>

    </ul>

Note that the <li> stands for "list-item" and that I placed a line-break tag (<br>) at the end of each line so that each number is on its own line.

How to Create a Link to Another Website (external):

Linking web pages together is essential for growth and provides users with navigation to view more content.  An example of the code to link to Google is shown below:

    <a href="https://www.google.com/"> Google </a>

The code above uses a start-tag for the reference to Google's website, then I type what I want to appear as "clickable", in this case Google.  Then I use the end-tag </a> to complete the link.  Whatever I type in-between the start and end tags will be clickable as the link.  If you forget to type something, there will be no visible link. 

How to Create a Link to Your Web Pages (internal):

Linking YOUR web pages together builds a web site!  An example of the code to link your web pages together is shown below: 

    <a href="home.html"> Home </a>

The code above uses a start-tag for the reference to your Home Page, then I type what I want to appear as "clickable", in this case Home.  Then I use the end-tag </a> to complete the link.  Again, whatever I type in-between the start and end tags will be clickable as the link.  If you forget to type something, there will be no visible link. 

 Continue Tinker-Time:

Continue working on your Favorite Food / Least Favorite Food Web Page.  Use the skills that we learned today in combination with the skills we learned in Lesson-1.

This includes:

This Web Page should be completed by the end of class today.  I am OPEN during 2nd Connect if you need more time to work on it.

Homework = NONE.