Today’s goal:
- Continue learning HTML: images, bullets, ordered and unordered lists
- Continue learning how to use a code editor: editing your webpage, saving it, previewing webpage and changes in the browser
Today’s featured web site:
- http://fabianburghardt.de/webolution/– See how web design has changed between 1991 and 2015 by checking out the evolution of NASA’s website.
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
Create and edit HTML
- Open Notepad++ on your computer
- Using this file as a reference, let’s add some more HTML tags: images and ordered/unordered lists.
- Image tips: save image or move image in same location as your webpage; resize image to desired size before adding it to your page; make sure you know your image name and file type (jpg, gif, or png) before adding it to your webpage. If your image isn’t appearing on your page, check: where it’s saved and the name and file type.
- Self-paced HTML challenges:
- Create New Page from Scratch: In Notepad++, choose File, then New to begin a new webpage. Add opening and closing html, head, title, and body tags and make sure they are in the right places. Save your new webpage as some_webpage_name.html (make up your own file name). Change your page title to say “Your Name’s webpage” (example: Allison’s webpage). Add a headline at the top that says “Welcome to my webpage!” Add a paragraph below the headline that says “Here are my top 3 favorite websites”. Add 3 bullets (numbered or just bullets) that each include a link to your top 3 favorite sites below the paragraph. Next, add an image of something to your page below the list of your favorite sites. Again, use this file with basic HTML tags to help you.
- Copy and Paste HTML to Add Fun Things to Your Page: You should add the following content to the page you just created. Choose a video to embed onto your page from YouTube. Pick a video, then go to Share, then Embed, and copy the HTML onto your page. Add an automatically updating weather sticker by going to this site, creating one, and then copying the code onto your page.
- Fix This Mess: 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 and then fix the coding mistakes. Here is the code to fix.