Today’s Goals:

• Period 2: Continue learning basic HTML
• Period 3: Continue learning basic HTML

Today’s Featured Site:

• http://www.crazycardtrick.com/– Can you figure out what’s really going on?

Period 2 Only- Final WordPress question

• Can you make more than one website with one account and is there a student discount?

New: Using Your Computer Effectively

• You’ve seen how important it is to save your practice webpages in a place that is easy for you to find them. You’ve also see how important it is to save things you want to use on your webpage, such as images, in the right location. This is why I encouraged you to set up a folder at the beginning of the year. It’s important to stay organized and to keep your files together. We are just practicing HTML right now but for future projects you might want to create sub-folders in your main folder. Where you save things matters and your code won’t work if you don’t have things saved in the correct location!
• You are responsible for understanding how your computer works and for saving your files in the correct location. We reviewed this yesterday and will do so again today. If your code isn’t working (such as an image not showing up), check first to see if you saved something incorrectly or in the wrong place.
• Important: Save all of your webpages with the correct file extension (webpage_name.html). If you save it as a text file, it won’t be read as a webpage. To find out where your webpage is saved, look at the file path in the top of Notepad++ OR launch the webpage in a browser and check the address bar to get the file path (Example: file:///C:/Users/GoldsberryA/Desktop/Allison/webpage1.html). To save your webpage somewhere else, go to File, Save As, in the top menu, and pay attention to the file locations that appear in the dialogue box. Navigate to the correct location by using the drop-down menu or clicking on the menu links on the left.
• We will review this once again. From September 14: Helpful Guide to Using Your Computer. Finally, if you need a computer mouse, let me know.

Reminder: Set up for Successful Coding!

1. Launch the class website in Firefox or Chrome, click on Class Work, and then click on that day’s post.
2. Open Notepad++
3. Follow the instructions written on the class page
4. SAVE your file in Notepad++ every time you make a change (use save icon in top menu, go to File, Save, or simply hit ctrl s on your keyboard).
5. LAUNCH or OPEN your webpage in Chrome or Firefox to preview your work. Go to RUN in the top menu of Notepad++ or find your webpage on your computer and double-click on it to open in a browser. Leave your page open; do not close it.
6. REFRESH the browser every time you make a change (hit the refresh button at the top of the browser or simply hit ctrl r on your keyboard).

HTML Practice Continued

• Let’s do this together: Embedding videos and adding a weather sticker. Video embed: what is an iframe? Weather banner: how does this work? Can you recognize any pieces of code in what you copied?
• You choose what to do from the options below. You don’t have to do them in any particular order but you must finish at least 1!
• Use as a guide & reference: Webpage structure and common HTML tags in this text file
• Challenge #1: Create a new page from scratch. Add opening and closing html, head, title, and body tags. Add a headline at the top that says “Welcome to my webpage!” Make the background color yellow. Add an image using this image as the src: https://www.mhswebdesign.com/storage/2016/04/cute-dog-on-blanket.jpg. Add a link to the MHS website. Save this as webpage2.html.
• Challenge #2: Fix the following code by downloading the text file, copying it, and pasting it into a NEW Notepad++ page. Save the page as broken.html. Here is the code to fix.
• Challenge #3: We are going to learn how to create tables with HTML next week. See if you can do it by getting started with some of these examples. You can code on that website and/or copy and paste the table code into your practice webpage. Don’t worry about the CSS; just focus on adding the HTML (table rows and table cells).
• Challenge #4: We’re going to learn about Font Awesome next week and how you can add fun graphics like these to your webpage. Step 1: grab the code from this file and copy and paste it below the page title in your head section. Step 2: see if you can figure out how to add the icons by grabbing some code from here. You can add these to your bullet code (see here for reminder on how to create bullets), add them before any text, or simply by themselves. Hint 1: maybe view the source on this page to see how I added the icons before your names. Hint 2: click on the icon you want to add so you can see the code examples.
• Challenge #5: Go to the X-Ray Googles site, follow the instructions to install the bookmark, go to another webpage, activate X-Ray Goggles on there, and play around with it by checking out the different code and making changes.