1. Discussion about HTML5 and CSS3
2. We will continue with working on the HTML files we began last week.
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
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. iframes
An iframe is used to display a web page within a web page. Here is an example: https://www.mhswebdesign.com/assignments/
Our Medford Web Search Challenge is actually a Google Form that is embedded into our class website using iframes. Google generously provided that code for me but now you’re going to learn how to do it yourself! Please note that some older browsers might not support iframes.
A. Copy and paste this code somewhere in your HTML file:
<iframe src=”URL”></iframe>
B. Where is says “URL,” copy and paste Google.com into there. Make sure to include the entire address. Example: <iframe src=”http://www.google.com/”></iframe>
C. Next, specify width and height:
<iframe src=”http://www.google.com/” width=”300″ height=”400″></iframe>
D. Try doing a Google search and see what happens.
E. One last thing to try- get rid of the border:
<iframe src=”http://www.google.com/” frameborder=”0″ width=”300″ height=”400″></iframe>
F. Please pay attention to your quotation marks. When you copy and paste from the website they end up being incorrect. You will likely have to delete the quotation mark and at it again.
5. Headlines
Headings help organize your webpage. The largest heading is <h1></h1> and the smallest heading is <h6></h6>. Everything in between <h2></h2>, <h3></h3>, etc. all get progressively smaller. When you learn CSS you will discover how to exactly format your headings and specify how large each one is, what kind of font, if it’s bold, etc.
A. Try it by copying and pasting the following in your HTML file.
<h1>This is the largest heading</h1>
<h6>This is the smallest heading</h6>
<h3>This is a more medium-sized heading</h6>
6. 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.
7. Comments
Sometimes you might be working on a webpage with several people and you want to leave notes for them. You can do this right in the code and to make sure the browser doesn’t read it as something that should be displayed you need the following:
<!– This is a comment –>
Everything in between the brackets and dashes will not be visible to anyone who goes to your webpage and can only be seen by people looking at the code.