Today’s Goals:
- Period 2 & Period 3: More HTML: tables, favicons, and Font Awesome!
Today’s Featured Site:
- https://jenniferdewalt.com/rock_paper_scissors.html– Can you beat the computer in this classic game?
Tables
- Everyone used tables before CSS was used to control the layout of webpages
- Tables are still used sparingly on webpages, so it’s still useful for you to learn how to create them
- Let’s look at some table examples: school lunch page, this Code Pen example
- Let’s practice: We will begin with this example. Let’s add a border and some text.
- Can you: Create a table with the next 5 Patriots games (just the month of October)? Create a table with 5 rows of 3 cells. The first row should have 3 table headers that say Date, Opponent, and Watch. Then, the second row should say October 2, Buffalo Bills, 1:00 CBS. See the schedule here. See starter code here (if you want). Can you add a border to your table? How about a 100% width? Try adding a background color to your table (hint- same code as making your page a background color).
Font Awesome
- What is it and why would you want to use it?
- Some fun examples here and here
- How to use it? What is a CDN?
- Getting started: Grab the code from this file and copy and paste it below the title in your head section. Let’s check out the available icons and add some to our table headers. Add a calendar icon next to Date, a male icon next to Opponent, and an eye icon next to Watch.
- Fun extras (if you want): Try adding some of these examples.
- Bonus: Can you add this home icon in the table for the Pats’ home games? There are just 2 (October 2 and 16)
- What do you think about Font Awesome? What’s good? What could be better?
Favicons
- Favicons are the tiny icons next to your page title in the browser.
- What’s ours on the class website?
- Favicons are 16 x 16 pixels and the code for adding them goes into the <head> section
- To make one for your website:
- Create one first
- Go to https://pixlr.com/editor/ and choose “create new image”
- Make the image width and height 16 pixels
- To make things easier, change the view from 100% to 300%
- You are going to make a favicon that’s your first initial. You will need a background color and a text color
- To change the background color, pick a color by clicking on the color box in the tool bar on the right (bottom of the bar)
- Select the paint bucket tool (4th from top on the right) and click in your box to make the background the color you selected
- Now pick another color for your text
- Click on the type tool (letter “A”, second from the bottom), click in your box, and type your initial. Change the font and size to something you like (the font will be no bigger than 8 or 9 px roughly)
- When you’re done, go to file save, and call your image favicon. MAKE SURE YOU SAVE IT IN THE SAME LOCATION AS YOUR WEB PAGE (desk top or folder)
- Add the code
- Now add this code to your <head> section to link your favicon to your webpage (you will have to delete the quotation marks and add them again):
- <link rel=“shortcut icon” href=“favicon.jpg”>
- Now add this code to your <head> section to link your favicon to your webpage (you will have to delete the quotation marks and add them again):
- Want an image as your favicon?
- Try here http://www.favicon-generator.org/
- Create one first
One thought on “Class Tuesday, September 27, 2016”
Comments are closed.