Week 7

Introduction

This week is a brief follow on to last week's topic of recording videos.

Recap from Last Week

Last week contains a lot of resources on how to find a good way to record your video for this week. If you are not sure of how to go about recording a video or screencast, please visit the information presented last week. Additionally, if you find youself stuck, visit YouTube and review one of the thousands of tutorials available free-of-charge.

Embed Codes and HTML

This week will help you get ready for a part of your final project portfolio. You will be be using the URL, and possibly the embed code, that you are submitting for the assignment this week to put into your website portfolio. This module will explain where that code will go in a standard web page and how to embed a video in Google Sites. Whether or not you need the embed code depends on what service you use to host your website. I will be describing how to set up a webpage in Google Sites for this class, but you are welcome to use other services, such as Wix, Square Space, or straight code and web server. I suggest that you start thinking of what service you want to use now so it will be easier to complete your final portfolio later.

Google Sites, for example, only requires the URL, not the embed code, which makes it very easy to use. You may find yourself needing to embed a video in your company's website in the future so I want you to know how that works so I have a very brief code discussion below. Additionally, when you are at your future company and you need to do something technical, there are dozens of free resources on YouTube and other tech help sites like Stack Overflow and W3 Schools.

HTML

A few of you have indicated that you are comfortable with HTML, however, a majority of you are unsure of this language, which is perfectly fine. HTML is Hyper Text Markup Language, and it is most of the text, tables, boxes, spaces, etc. on your web page. HTML is mostly static, which means it does not enable things to move on your web page. If it moves on your web page it is usually either JavaScript, CSS, or PHP, which are other programming languages that play well with HTML.

HTML has a basic set up on the code page, which is quite similar to a wordprocessing document. HTML works in tags, or symbols that looks like sideways carrots < or > If you want to make a paragraph you have to start with a tag that looks like this: < p > Please note that I am putting extra spaces in between the tag and the letters because I am typing this in HTML and I do not want my editor to think that these are actually tags I want to function. With the exception of a few specialized tags, there are end tags. To end a paragraph you do a slash p that looks like this < /p > Here is a picture of the beginning and end paragraph tags in this web page:

An HTML pae has sections, like your word processing document:

• HEAD
• TITLE
• BODY
• FOOTER

Here is an example of how the code looks like from a programmer's perspective:

   

 

The head is where you link your more advanced language files. The title is the name of the page that will show up in your tab. The body is where you type the text of your page. For example, you are reading text I put in the body of the page. The footer also contains links to more advanced scripts and if you want to include copyright or contact information. If you embed a video it will go in the body section. The iframe code I mentiond last week goes betwen the beginning body tag and the end body tag like this:

Google Sites

You will be embedding your iframe code in a Google Sites page for your final project portfolio. You will be creating your own Google Site from your Google account that you created in the beginning of the semester. If you did not complete this assignment, you will have to create a Google account to complete this assignment.

To create a Google site you must login to your Google account.

Here are a few resources to help you with creating a Google site:

https://support.google.com/sites/answer/153197?hl=en

Adding Your Embed Code or URL

Now that you have your Google Site, you need to copy over your embed code, or URL, of the video you recorded and uploaded to YouTube. This is the easy part and will take a few minutes.

Grab your embed code, and URL, from YouTube and go to your Google Sites page you are building. The New Google Sites pages will only need the URL.

Start by clicking on the edit button:

Click insert and then YouTube:

Insert the URL for your uploade video:

You should see this if the embed took:

Save your work and you will see the video that you embedded: