Learning Goal #5
Students will be able to construct complex web pages and understand the purpose of every HTML element, attribute, and value that was written into their code.
PART 1: DeadlinesRead More
Below are your deadlines for Learning Goal #5: Mastering the Foundations of HTML. If you complete approximately 1.5 lessons per week, you should be able to keep up with the deadlines.
- January 11, 2019:
Getting Started – Lesson 5.0
- February 1, 2019:
5 Lessons Complete (5.1 through 5.5)
- February 4, 2019:
Quarter Quiz #1 (Questions from 5.1 through 5.5 Only)
- March 1, 2019:
6 Lessons Complete (5.6 through 5.11)
- March 4, 2019:
Quarter Quiz #2 (Questions from 5.1 through 5.11)
- March 4 to March 13, 2019:
Learning Goal Project (Grading on March 13)
REMINDER: In order to earn an A for each lesson, you need to complete each assignment within the lessons. At the end of each lesson, you will take a short quiz on eCampus and confirm that you have done all the assignments. If you only do some of the assignments, you can still do okay, but it is in your best interest to complete them all. Your grade depends on how much you get done within the time you are given.
PART 2: OverviewRead More
One of the greatest American painters, Georgia O’Keeffe, once said, “I found I could say things with color and shapes that I couldn’t say any other way – things I had no words for.” These days, we never question the value of color in a web page, in a canvas drawing, or in a children’s book because we expect it. During Web Design I, you learned how to use basic color names and some of the more complicated hex values. In this lesson, you’ll learn to expand your knowledge of color, including some work with RGB values.
Below are some helpful tips and resources that you can use during and after this lesson is over.
Important Points to Remember
- Colors in HTML can be written in three ways: Color Names, Hex Values, and RGB Values.
- There are only 140 Color Names that can be used and understood by all the major browsers (such as Blue, DarkBlue, Cyan, Brown, etc).
- HTML color values are based on a combination/blend of Red, Green, and Blue.
- Hex Values are written with a hash (#) and six characters ranging from 0 through F (#FF0000, #00FF00, #0000FF, etc).
- RGB values are written like rgb(0, 100, 255) where the numbers represent how much red, how much green, and how much blue should be added (between 0 and 255).
- The Color Wheel allows web designers to find primary, secondary, tertiary, complimentary, shades, and analogous colors.
- For all future web pages and designs, you may NO LONGER USE HailPixel since the colors you find there are purely random and this class will only accept color combinations based off the color wheel.
- Inline styling means going into the tag, adding the style attribute, then inserting a series of styles like this with a very specific syntax.
PART 3: AssignmentsRead More
Assignment #1 (1 Point): SoloLearn Lessons
Log into your SoloLearn account and find the Course called HTML Fundamentals. Inside of this course, watch the following lessons (you may need your headphones). When you finish, be sure to make note of how many SoloLearn points you have earned. Points are based on how many slides you complete and how many questions you answer correctly after each slide segment.
- HTML Colors
- Blog Project: Putting It All Together
- Module 2 Quiz
- Challenge 1
Assignment #2 (1 Point): Design Project
Open TWO new documents with Notepad or Notepad++ and save them as “5-6_hextable.html” and “5-6_rgbtable.html” in your WD2 Folder. If you watched the SoloLearn slides carefully and read the resources from the overview, you learned that there are three ways to write colors into a page: color names, hex values, and RGB values.
On the “5-6_hextable.html” page, you must design a table with five boxes that each have a different shade of RED written with hex values. Inside of your tables, the page must show what hex value is being used like this. On the “5-6_rgbtable.html” page, you must design the exact same table with the exact same shades of RED, but instead of hex values, you must write your colors with RGB values and include those values on the page like this.
Below are some resources that can help to get you started, but don’t forget about all the elements and attributes you learned how to use in Lessons 5.1, 5.2, 5.3, 5.4, and 5.5:
- Understanding the Color Wheel
- Understanding Complementary Colors
- Color and Contrast
- Complementary, Analogous, and Triad Colors
- The Paletton Color Wheel
- Adobe Color Wheel
- How to write Hex Values (Color-Hex Website)
- RGB Color Chart
- Using inline styling with Color Names and Values
- PaletteFX: Getting Color from an Image on your Computer
- CSS Drive: Getting Color from an Online Image URL
- Pictaculous: Getting Color from an Image
Assignment #3 (1 Point): Florida Orange Palette
The word “palette” means a selection of colors. In this assignment, you will be creating a palette of orange shades, but you get to make up color names like this. Open a new document with Notepad or Notepad++ and save it as “5-6_orangepalette.html” in your WD2 folder. You may copy/paste the code from one of your 5.6 table pages and just use orange colors instead of red. Feel free to be silly about the color names that you make up for your table.
Assignment #4 (1 Point): Update Your Index
Similar to the last lesson, take the time to add your new designs (all three of them) to your index page using screenshots and links.
Assignment #5 (1 Point): Review and Quiz
Look over the 5.6 Review Sheet. Read over the vocabulary terms. Look over the questions. Make sure you know how to answer each question. Then go to eCampus, find the quiz for Lesson 5.6, and take it. This is a way for you to show the teacher that you have finished this lesson.
If you have finished the assignments in this lesson, you will need a new password so that you can enter Lesson 5.7. Feel free to ask the teacher and don’t be afraid to raise your hand or go up to ask. If you are actually finished with a lesson, you will get an answer.