1. Facebook changes- what do you think?
2. We will continue with working on the HTML files we began last week. To follow along, you will need our class website open, your website open, and your Notepad file open.
To Begin:
A. Find your index.html file in your folder
B. Double-click the file and it should open in Firefox
C. Right-click on your index.html file, go to Open With, and click Notepad. You can also open Notepad, go to File, Open and then find your folder and click on your file. You might have to change it to All Files under Files of Type in order to see index.html
D. You should have your webpage open in Firefox and in Notepad at the same time. Please keep both of them open as you will be working with both of them.
E. Remember, when you make a change to your Notepad file, save it, and then go to Firefox and refresh the page so you can see the change you just made.
3. Embedding video- let’s try this again with Flash updated
Embedding video is very easy. We are going to learn the simplest way to do it today that only involves copying and pasting rather than generating your own code, which we’ll talk about later in the course.
A. Find a video (do a Google Video search, go to YouTube, or check out the school’s video archives here)
B. Copy and paste the embed code into your HTML file. It should say “embed this video” or “share this video” or something along those lines.
C. Save Notepad and then refresh your page.
4. Horizontal Lines
There is code for adding a horizontal line as a way to separate your content on the page.
The code for adding a horizontal line is simple: <hr />
Just like the line break tag <br /> the horizontal line tag is used by itself.
Try it by adding one or two horizontal lines to your HTML file.
5. Ordered and Unordered Lists
Ordered and unordered lists are two ways to display a list of items on your webpage. An ordered list shows a list with numbers (1, 2, 3, etc.) while an unordered list shows bullets. Example: The menu at the top of the Guidance webpage is an unordered list.
Copy and paste the following into your Notepad file:
A. To do an ordered list:
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>
B. To do an unordered list:
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
6. Helpful websites for learning HTML and CSS
7. HTML Quiz
Test your knowledge! We will do this together as a class. Click here to go to the quiz or watch the screen.