Today’s goal:
- Learn more HTML: tables, favicons, and Font Awesome!
Today’s featured website:
- https://moments.epic.net/#home– Have some fun playing with this interactive site and then check out some of the code that makes it work here.
Tables
- Everyone used tables before CSS was used to control the layout of webpages
- Tables are still used on webpages to display data and other types of content that might commonly be put into a spreadsheet. You will learn later on this year how to make tables responsive and mobile-friendly.
- 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 that is one pixel wide. What do you notice about table rows tr and table cells td?
- Let’s now begin a new webpage in Notepad++ and add our table to it. What HTML tags should we put in first and in what order? Go ahead and look at your other webpages for help.
- Can you: Create a table with the next 5 Patriots games (just the month of October)? Let’s change the table we’re working with by changing the text and adding some more rows. The first row should have 3 table headers that say Date, Opponent, and Time. Then, the second row should say October 1, Panthers, 1:00. See the schedule here..
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 3 (October 1, 22, and 29)
- 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:
- <link rel="shortcut icon" href="favicon.jpg">
- Now add this code to your <head> section to link your favicon to your webpage:
- Want an image as your favicon?
- Try here http://www.favicon-generator.org/
- Create one first