Today’s goals:
- 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:
- http://www.internetlivestats.com/– Find out how many websites were hacked today and more on this website
Set up for Successful Coding!
- Launch the class website in Firefox or Chrome, click on Class Work, and then click on that day’s post.
- 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.
- Open Notepad++
- Follow the instructions written on the class page
- 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).
- SAVE your webpage and any related files in the folder you created for the project on your computer.
- 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.
- 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.
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
Questions:
- What are the four basic HTML tags we will always use to set up every webpage we create?
- Where does the text you put inside the title tag show up?
- Why would you use a comment tag? Does the browser display comments?
- What are two tags you can use to force content to start on a new line?
- Name the tags you learned today that are self-closing (not used in pairs)
- How do you save an HTML document correctly?
- Is your webpage live when you preview it in the browser?
- Why are you able to preview your webpage in the browser? (Hint- think about the purpose of a browser)
- When you update your webpage, how can you preview the update you just made? (Hint- two steps)