There is no class today due to the Husky Award Assembly. Have a great break!
|
There is no class today due to the Husky Award Assembly. Have a great break!
0 Comments
Today, you are going to practice adding in a table of important dates into your HTML Website!
To do this, you need to use the HTML code below. <table style="width:100%" border="1" bgcolor="lightblue"> <tr> <th>Date</th> <th>Holiday</th> </tr> <tr> <td>Wednesday, October 31, 2019</td> <td>Halloween</td> </tr> </table> Today's Activity:
We are going to cover two things today.
First, you will be embedding videos onto your page. When you embed a video, it will show up directly on your page, rather than be linked to view on a website somewhere else. To embed a video, complete the following steps in your HTML Notepad file: - Go to Youtube or another site that has the video you want to use. - Look for the option to "Share" the video (there will be an arrow usually with it) - Look for the option to "Embed" the video. - You will then see some code to embed the video. - Copy ALL of the code listed and paste it into your Notepad website in the place you want the video to appear. I would like your sites to include at least one video, but you are welcome to add more if you would like. Once you have your video in your site correctly, and you are caught up on all previous things, then you may start working on the layout of your site. <center> will center things on your page <br> adds a line break Use those tags as well as the others we have practiced to format the site the way you want to. Today, we will be working more on our HTML websites.
Start by opening up your site in Notepad and open the preview in your web browser. Today we will be adding in a website link in your code. To create a website link in HTML, you will want to put in the following code: <p><a href="html_images.asp">HTML Images</a> is a link to a page on this website.</p> The <p> tag exists to place text on your computer. The first quotations will contain the actually website address (ex. www.coolmath.com) The text after the quoatations will be the text on your website that can be clicked on to take you to the site. Copy and paste the code above into your own Notepad code. Then, create your own link to an appropriate website of your choice and change the wording. Do this for at least 2 sites! I will also be using this class to review your work so far and see how many of us need to catch up. So far in your HTML website, you should have the following code done in Notepad.
Watch this tutorial to help you with today's activity: Sizing Photos in Notepad
Last time, we learned how to add in an image into your HTML Websites. To review, go to Google and find an image you want to put on your site. Right-click on the image and choose "Copy Image Address" Then in your Notepad file, type the following code: <img src="PasteYourImageAddressHere"> This will put the image in your website! Today, we are going to learn how to adjust your size of your images. When you have an image from the Internet show up on your page, there is a good chance that it appears very big. To resize your image, you want to add in the words "height="" and "width="" onto the line of code where your images goes. For HTML, images are measured in Pixels, not inches or something else. An average size is probably between 200 and 500 pixels. Type the number size you want IN BETWEEN the two quotation marks. The height and width information should be placed AFTER the quotation mark of your copied image address, but BEFORE the right arrow tag. Here is an example of how your code should look when adding in an image and resizing it. <img src="PastedImageAddress" height="300" width="300"> Remember to preview your site in the web browser. Making the height and width the same number will make your image a square. Play around with the pixel numbers to get the image size the way you want it! Once you have an image on your page and set the the size you want, add at least 2 more images onto your webpage. Last time, we started creating a web page in HTML using Notepad!
Today, we are going to continue working on our code. Remember that this is an ongoing project and will be for a large grade, so make sure you try your best and use your time appropriately. We will be adding more to this project each class until completion. For today, start with going to your StudentShare folder. Double click on your HTML file you created last class. This will open up your website to preview it. Go back to the file in your folder. This time, right-click on it. Choose Open With, and then choose Notepad. Ultimately, you want to have your Notepad file open AND your webpage open together. When you save your Notepad, click on the refresh arrow on your webpage to instantly see the changes! So far, you should have the following completed on your website:
Today's Activity: Today you will learn to Bold, Italics, and Underline words: Bold: <b>Bolded Text </b> Italics: <i> Italics Text </i> Underline: <u> Underlined Text </u> We are also going to learn how to add in photos! To do this:
Have you ever thought about what the first website ever created actually looked like?
Check it out HERE! For today, you will be starting to make your very own web page! To do this, we will actually be learning HTML code! Watch this video together as a class for a brief demonstration! Creating an HTML File Above is an image of popular and common HTML code that we will be using today. To begin, please follow the following steps:
We will be adding a lot more to this so be sure to SAVE your work.
To preview your work at anytime, find your file in the StudentShare folder. Right click on the file and choose "Open With" Then choose Google Chrome and you will see your HTML code transfer to a webpage. (If something looks off, that means you need to change/fix something in your code!) Websites consist of certain "languages" to function well.
These coding languages are HTML, CSS, and JavaScript. We will be learning much about these coding languages throughout this course. Watch this video to learn more: The 3 Web Languages Today's Activity: Interested in seeing what websites were like 10 years ago? Explore this website to find out! http://tenyearsago.io/ Next, go here: Introduction to HTML Read through the descriptions and click on the "Try Me" button found on the site. Play around with the options and see what happens when you change the code! Next class, we are going to start building our own HTML websites! |
AuthorWrite something about yourself. No need to be fancy, just an overview. Archives
January 2020
Categories |