HTML Source Codes
HTML Source Codes
LEARNING GOAL: The Basics of HTML
Students will be able to design multiple web pages with HTML through the use of simple Text Editors.
Now that we’ve had three or four weeks of working with HTML and building our own source codes, the time has come to learn how to work with some pre-written source codes. Today, you will be given a number of free, already-written codes and all you have to do is edit them. With all that you’ve done up to this point, playing around with a code should be much easier than anything you’ve done up to this point.
A source code is the written foundation that makes a web page look a certain way. In a web design template, the source code includes HTML tags, elements, and attributes, but it can also include various internal and inline styles.
After this lesson, we will be designing for your first major web design project. And that means today is your last day to get comfortable with writing code before the pressure sets in to accomplish something on your own.
DAILY SCHEDULE (85 MINUTES):
Topic #1 – One Last Message from TimBL
“My hope and faith that we are going somewhere [with the World Wide Web] stems in part from the repeatedly proven observation that people seem to be naturally built to interact with others as part of a greater system.
A person who is completely turned inward, who spends all his or her time alone, is someone who has trouble making balanced decisions and is very unhappy. Someone who is completely turned outward, who’s worried about everything and spends no time sitting at home or in his local community also has trouble making balanced decisions and is also very unhappy.
It seems a person’s happiness depends on having a balance of connections at different levels.”
(Tim Berners-Lee, Weaving the Web)
What does he mean? Using 30-30-60, consider how this quote applies to what we’re learning.
Topic #2 – Brick Site Apology
At the beginning of the semester, we tested an idea that had never been done before. But like many ideas, occasionally, they don’t work out. Claiming a brick would have been interesting if we were allowed to leave things up all semester and update them every couple of weeks. However, with testing next Tuesday, everything on the wall must come down and stay down for the rest of the semester.
Topic #3 – Upcoming Dates of Importance
Monday, March 5 – Periods 1, 3, 5, 7 (Tuesday Schedule)
Tuesday, March 6 – AM Testing FSA + PM Straight 7 (Shortened Monday Schedule)
Wednesday, March 7 – Periods HR, 2, 4, 6 (Normal Wednesday Schedule)
Due to our testing day for FSA Writes and the upcoming schedule change, our Quarter Quiz #2 (for both WD1 and WD2) has been pushed back to Tuesday, March 6, the same day as your FSA Writes exam. But this will already be a very short period. That means you cannot be expected, in such a short time, to finish a really long exam with essay questions and error codes, so the quiz will also be very short. Quarter Quiz #2 will only have 15 questions and all of them will be multiple choice. In other words, if the class period is only 30 minutes, you should have plenty of time to finish a 15 question quiz. And everything on the quiz will come from Lessons 2.1-2.5.
On Monday, March 5, and Wednesday, March 7, all Web Design I students will be introduced to their 9-week Quarter Project. This is a three day project that will be graded on Wednesday, March 14, and Thursday, March 15. Which means everything will be graded before Spring Break.
On Monday, March 5, and Wednesday, March 7, all Web Design II students will also be introduced to their 9-week Quarter Project, but these students will have extra days to complete their project. All Web Design II projects will be graded after Spring Break and will be the first graded assignment in Skyward for the next 9-weeks.
Topic #4 – Source Code Grading
The time has come for all your source codes to be graded. Using Google Chrome or Firefox, please open up all of your HTML source codes that begin with “sc” so that the teacher can come around and give you credit for the work. Remember that 4 complete codes is an A, 3 is a B, 2 is a C, 1 is a D, and anything less is an F. The teacher will give you two minutes to get ready for grading and this does not mean continuing to code. This means displaying what you have completed.
Topic #5 – About This Lesson
The goal of today’s lesson is not to struggle through typing long codes, but to get extremely comfortable with a few source code templates that you might like to use on the upcoming project. Those who invest themselves into today’s challenges will be MUCH better off when the project begins. You have all the resources necessary to be successful, so anyone failing to use this time wisely has no excuse.
TEMPLATE #1 (Black Abstract Challenge)
Source Code: Black Abstract
Save As: tp1-blackabstract.html
Could Look Like: Black Abstract
In Order To Work, It Still Needs: Image File Paths and Hex Values
CHALLENGE: Change it into the Home Page for a Local Soccer Team (real or fictional).
TIP: Do some research to see what other soccer team websites look like. Try to do more than just plugging in pictures and changing a few words. See if you can completely redo the template and make it more original.
TEMPLATE #2: (Ice Abstract Challenge)
Source Code: Ice Abstract
Save As: tp2-iceabstract.html
Could Look Like: Ice Abstract
In Order To Work, It Still Needs: Image File Paths, Hex Values, and Button Adjustments
CHALLENGE: Change it into the Home Page for a local petting zoo (make it up if you have to).
TIP: Do some research to see what other petting zoo websites look like. Try to do more than just plugging in pictures and changing a few words. See if you can completely redo the template and make it more original.
TEMPLATE #3: (Original Index Challenge)
Source Code: Original Index
Save As: tp3-originalindex.html
Could Look Like: Original Index
In Order To Work, It Still Needs: Image File Paths and Hex Value Adjustments
CHALLENGE: Change it into the Home Page for a local pool cleaning company (make it up if you have to).
TIP: Do some research to see what other pool cleaning websites look like. Try to do more than just plugging in pictures and changing a few words. See if you can completely redo the template and make it more original.