html

Class Friday, September 21, 2018

 Today’s goals:

  • Discuss how to make up missed assignments
  • Learn how the internet works and what a website is
  • Use a simple code editor to code a webpage, preview it in a browser, and save it correctly
  • Begin learning HTML

 Today’s featured web site:

 Missed Assignments

  • You will have until the end of a quarter to hand in late work without any penalties. No work will be accepted after the next quarter begins. For example, if you missed something in first quarter, you must hand it in before first quarter ends and can’t hand it in second quarter. At that point you will receive a 0 for that assignment.
  • You are responsible, either by talking to me or by looking at the class website, to find out what you missed when you’re absent.
  • Exception: if you’re absent on a day we do Harvest of the Month you do not have to make that up.
  • I am available before school, after school, all day A and D days, and any period besides 5 and 6 if you want to meet with me to make up work.

 About the Internet and Websites

  • FYI- how to get your website online
  • Let’s watch this video
  • Let’s check out this informative infographic about how to build a website
  • In your tables of 2, you will find answers to the following questions. Google is your friend, but you could also try to find some information on this site in the web section at the top of the page.
    1. What is the internet?
    2. What is an IP address and how does it relate to a domain name?
    3. What is a webpage? What is a website?
    4. What is a browser and can you provide examples of some?
    5. How do you create and register a domain name?
    6. What is a web host and why do you need one?
    7. What tool do you have to use to write HTML code?

 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. Create a new folder on your computer if you’re beginning a new project. This is where you will save all of the project files.
  3. Open Notepad++
  4. Follow the instructions written on the class page
  5. 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).
  6. SAVE your webpage and any related files in the folder you created for the project on your computer.
  7. 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.
  8. 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 basics

What is it? What do you use it for?

  • Let’s read this useful HTML tutorial together
  • Create a folder on your computer right now and call it HTML basics. You’re going to save all of your practice webpages and images in this folder.

 View HTML

  • Let’s view the code of our featured website. What do you recognize? Do you notice any patterns with HTML?
  • Let’s view and edit the code of that website at the same time with X-Ray Googles (click it in your Bookmarks Bar).

 Create and edit HTML

  • Open Notepad++ on your computer
  • Look at your computer’s keyboard and find the pointy brackets (or greater than/less than symbols) < >. You must use the shift key to type these. Also look for the forward slash /, which we’ll be using in our closing tags. You DO NOT need the shift key to type the forward slash.
  • Let’s begin adding some HTML tags!
  • We’re going to use the basic tags to add text, images, links, and nested tags such as a bold link or a bold paragraph.

 Important!

  • HTML tags are never capitalized
  • HTML tags usually come in pairs with an opening and closing tag. There are some exceptions, such as the line break tag and the image tag.
  • All webpages must be saved as filename.html