Navigation Menu+

Lesson 2.5
Deprecated HTML

Lesson 2.5
Deprecated HTML


LEARNING GOAL: The Basics of HTML

Students will be able to design multiple web pages with HTML through the use of simple Text Editors.

Click Here to View the Learning Goal and Scale


OVERVIEW:

2-5_deprecatedhtmlThe world is full of people and things that come and go. Buildings that were once full of people can eventually turn into hollow rooms and empty spaces. Cities that were once popular and booming can become ghost towns for the poor. Even technology and music often has the same problem. We use new technology and disregard old technology. We listen to new music and try to forget old songs we no longer enjoy.

Hundreds of years ago, certain religious monks would punish themselves if they believed their bodies were full of sin. They believed their bodies had become corrupt and evil, so they would take a whip and beat their own backs. This behavior was known as self-deprecation and had to do with “praying away” the bad. Today, the word deprecation is still used as a way of saying something is old, or bad, or no longer proper to use.

In HTML, a coding language that constantly changes, there are many deprecated tags that were once used by every designer, but are now considered by the W3C to be no longer appropriate for current designers who write with HTML5. Today’s lesson is about learning some of the deprecated codes as well as some other random tidbits of character HTML.


DAILY SCHEDULE (85 MINUTES):


PART 1: GETTING STARTED – Journal Response

Click here to show/hide contents

casstechhighToday, we will be talking about something called Deprecated Codes. These are codes that can be used, but should not be used. In order to understand the meaning of deprecated codes, we’re going to look at pictures of an abandoned high school in Detroit and decide what should be done with the building now that it looks the way it does.

STEP 1: Read this short article to learn about Cass Technical High School, a building in Detroit that was constructed in 1917 and caught fire in 2007.

STEP 2: Now that you know what happened to the school and you’ve seen pictures of what it looks like from the inside, decide what you think they should do with the building. Should they tear it down or restore it?

STEP 3: Log into your Penzu Account (or click on the appropriate “Journal” link on the left) and create a new post.

STEP 4: Give your post the title “Destroy/Restore CTHS,” but choose either “destroy” or “restore” for your specific title. Write at least 2 paragraphs (200 words) that express your opinion about what should be done to the high school building. Should they destroy the building or should they restore the building?

This is a Graded Post.

Check This Rubric to Make Sure You Get an A or B.

This Post will be due by the end of Lesson 2.6.

This Post will be due at the same time your Source Codes are due.

STEP 5: If you finish early, you may continue working on Source Codes in the Daily Design at the bottom of today’s lesson.


PART 2: CLASS DISCUSSION – Deprecated Codes & Special Characters

Click here to show/hide contents

Topic #1 – Follow Up On CTHS

The fire at Cass Technical High School was in 2007. Surely they haven’t gone more than 10 years without making a decision. So what did you write about? What did you believe they should have done with the building? And what did they actually do in the end?

w3cTopic #2 – Another Message from TimBL

“It became clear to me that running the [W3C] would always be a balancing act, between taking the time to stay as open as possible and advancing at the speed demanded by the onrush of technology. This was not about having control over the Web, but about providing a place for people to come and find consensus.” (Tim Berners-Lee, Weaving the Web)

What does he mean? Using 30-30-60, consider how this quote applies to what we’re learning.

UDI vs URI vs URL

Topic #3 – When Something is Deprecated 

More than 200 years ago, some of the most religious members of society would try to “pray away evil” from themselves or someone else. They called this deprecation, from de- (against) and -prec (pray). Since that time, the word deprecation has been used by many others in society to describe something that they “strongly urge against using or doing.” In HTML, deprecated codes are any codes (tags, elements, or attributes) that can still be used, but are strongly urged against.

Think of Cass Technical High School and you can imagine that the building was probably still useful for a little while after the fire and after it was abandoned. But in the end, they chose to demolish the building because the structure was no longer good.

Over the last few weeks, you’ve learned about heading tags (<h1>, <h2>, etc), paragraph tags (<p>) and more. But deprecated tags are the ones that web designers can use even though they are no longer supported by the W3C. In other words, while web designers could use these codes, they usually choose not to use them.

Topic #4 – Examples of Deprecated HTML

Remember that just because a tag or an attribute is deprecated doesn’t mean it won’t work or it can’t be used. When we say it is “deprecated,” we are saying that the W3C, that group who writes the rules of HTML, would prefer we write our HTML in a different way. Look over this list of Deprecated Tags and Attributes and see which ones you recognize. Several of them we have used in this class.

spadeTopic #5 – Special Characters & Entities

On your phone, you probably have hundreds of emoticons and emojis. Sometimes you can write these with a combination of letters and symbols (like the : and ) that becomes a happy face). In HTML5, there is a similar feature called special characters and entities. They might not sound as fun or interesting as emojis, but they still work the same way and they can definitely help make a web page more interesting. Click here to get started.

Basic Symbols | Symbol Entities | Miscellaneous Symbols

Topic #6 – Review for Quarter Quiz #2

On Monday, March 5, Quarter Quiz #2 will only include questions related to information you learned in Lessons 2.1-2.5. Almost all of the questions will relate to things that we have either reviewed at the beginning of each discussion or things we have talked about as a class quite a bit. The quiz will include the following:

Fill in the Blank (8 Questions + 1 Bonus Question)

Syntax Corrections (10 Errors to Fix/Correct)

Short Answer (2 Questions)

Essay (2 Questions)

There should be no surprises on the quiz, but it’s always good to review. Click here to open Kahoot.


PART 3: DAILY DESIGN – Source Codes

Click here to show/hide contents

Between Lesson 2.2 and Lesson 2.5, you are responsible for getting 4 out of 6 source codes completed for an A (3/6 = B, 2/6 = C, 1/6 = D, 0/6 = F). However, if you finish any of them early, just keep going because the more pages you build, the more prepared you’ll be for the Learning Goal #2 Project. Source Codes will be due by the end of Lesson 2.6.

Source Codes that are highlighted in green are new codes from this lesson, but you may finish an old source code first if necessary.

The Source Code highlighted in yellow is an error code that will only work if you fix the syntax problems.

*******************************************************************

SOURCE CODE :: HTML SAVE TITLE :: FOLDER :: LOOKS LIKE

Source Code #1 :: scinline.html :: /pages :: Looks Like This

Source Code #2 :: scinternal.html :: /pages :: Looks Like This

Source Code #3 :: scivyleague.html :: /pages :: Looks Like This

Source Code #4 :: sclinks.html :: /pages :: Looks Like This

Source Code #5 :: scwhitewolf.html :: /pages :: Looks Like This

Source Code #6 :: sclibraries.html :: /pages :: Looks Like This

*******************************************************************

If you finish ALL of these codes, you may try out some of the challenges below:

*******************************************************************

CODE CHALLENGE #1:

Step #1 – Open a new Notepad document and save it as “codechallenge1.html” in your /pages subfolder.

Step #2 – Type this source code into your Notepad document.

Step #3 – When you are finished, check to see that it looks like this. You should notice that it’s an absolute mess.

Step #4 – Read the two paragraphs that you wrote in your code and follow the instructions from Paragraph 2. When you complete those instructions, your page should look like this.

Step #5 – If you think that yours is correct, raise your hand and ask for permission to go onto the next challenge. Remember, you must complete this challenge first and prove that you can solve it on your own.


CODE CHALLENGE #2:

Step #1 – Open a new Notepad document and save it as “codechallenge2.html” in your /pages subfolder.

Step #2 – Type this source code into your Notepad document.

Step #3 – When you are finished, check to see that it looks like this. You should notice that there is a number in the top left cell and a color in the bottom right cell. You are looking at an HTML table.

Step #4 – Using what you now know about inline styling, make your page look like this.

Step #5 – If you think that yours is correct, raise your hand and ask for permission to go onto the next challenge. Remember, you must complete this challenge first and prove that you can solve it on your own.


CODE CHALLENGE #3:

If you’ve gotten this far, you’re doing fantastic! But the fact is, not everyone in the class is doing quite so well. Walk around the room and find a student who isn’t feeling quite as confident (especially if they’re still trying to figure out the first or second code) and stay with them for a little while. Help them fix their errors and find success with their code, then move on to someone else who needs your support. Not only will this make YOU better, but it will make THE WHOLE CLASS better. You never know… you could be doing a project with that person later in the semester.


RESET WORKSTATIONS (2 Minutes)

Translate »
error: Content is protected !!