Week9
Unicode
- unicode.org
- unicode.org/charts
On the W3Schools -> HTML Tutorial read:
HTML Entities
HTML Symbols
HTML Emojis
On the W3Schools -> CSS Tutorial read:
CSS Fonts
- Font Family
- Font Web Safe
- Font Fallbacks
- Font Style
- Font Size
- Font Google Google Fonts website
- Font Pairings
- Font Shorthand
CSS Icons Icon Tutorial
On the W3Schools -> CSS Advanced Tutorial read:
CSS Web Fonts
Additional Resources
Transfonter Webfont generator.
Font Squirrel @font-face kits (font generator no longer works)
Font Spring and the blog relating to best practices.
Typekit web font hosting service (now part of Adobe)
Font Freak freeware and shareware fonts.
Goova Fonts free fonts.
This is the Moms Typewriter complete kit downloaded from Font Squirrel.
The demo.html file included in the kit. Directory listing
College slab serif and England script fonts downloaded from Font Squirrel.
Document using College slab serif and England script fonts. Directory listing
Cast Iron and Nauvoo downloaded from Font Freak.
Document using Cast Iron and Navoo fonts. Directory listing
Lab9
Create a web page file named lab9.html Notice that it is all lowercase, no spaces.
Specify a DOCTYPE as the very first line in the HTML document.
Create a html file that has the correct structure using the doctype, html, head, title, and body opening and closing tags.
Title the page "Your Name lab9" where YourName is your real name.
Create a web page similar to what you see below in concept. Chose your own topic, icons, and text. Do not use the topic we did in the class lecture nor the topic in the screenshot below. You must demonstrate at least the same concepts that I am showing. Please make sure your topic is non-controversial (rated G).
You may want to set the page body text to be Arial or sans-serif and set the background so it has a nice look.
Use at least two free fonts that you found online.
Use at least two Google icons.
Use at least two emoji or other HTML entities.
Describe which fonts you used and where you found them.
You have now created a web page.
Verify that your web page validates using the W3C online validator. You must submit a screenshot to the dropbox that the page validates without ANY errors.
Your result should be similar to what you see below.
You need to turn in all files zipped together into one zip file for credit.
Your instructor can see if your web page (lab9.html) works correctly only if the ALL files are turned in within the zip file!
When validation is passed, you should see a message like below.
Grading Criteria | Possible Points 15 |
Your Points 15 |
Correct file name. Correct DOCTYPE, HTML, HEAD, TITLE, and BODY structure. | 1 | 1 |
Two free fonts used and demonstrated effectively. | 6 | 6 |
Two (or more) Google icons used. | 2 | 2 |
Two (or more) emoticons or HTML entities used. | 2 | 2 |
Description to where font was found. | 1 | 1 |
Document validated without any errors. | 3 | 3 |