Topic #1 – Why Learn to Code

“The vision I have for the [World Wide] Web is about anything being potentially connected with anything.”
Tim Berners-Lee, Weaving the Web, 1999

Topic #2 – Quick Review

Below are a few things that have already been discussed in this course. You have two minutes to discuss them with your team and then the globe will be tossed at random, in search of someone to answer for the rest of the class.

• True or False – You are allowed to eat, drink, or chew gum at your computer workstation.
• What is the Internet?
• What is the Web?
• What is a Web Page?
• Name one kind of web site structure that was discussed in this course.
• True or False – Your teacher will notice if you play with the handle on your chair.

Topic #3 – A Short Summary of HTML

Remember Tim Berners-Lee? People who know him online use his nickname: TimBL. He’s that engineer who created a big space for people to share information as long as they are connected to the Internet. Remember what he called that big space on the Internet?

Anyhow. When Tim created that big space, the World Wide Web, he shared a link that showed people how to write something known as Hyper Text Markup Language, or HTML, It was called “hyper” text because it meant that text could be linkable. Or to put that another way, it meant that text had more value than just to be read.

HTML is the basic structure, or skeleton of every single web page on the World Wide Web. A page written ONLY with HTML might look pretty boring, but a page without HTML will never work. When you visit a web page, simply right-click on your mouse or type Ctrl-U and you will be able to view the source code that makes that page work. Most pages have a LOT of code, but not everything is HTML.

Try thinking of HTML like the bread that goes around a sandwich. You can have a sandwich with only bread, but it would taste really plain. That’s why you need ingredients. But think of it the other way. If you had a bunch of ingredients to put in a sandwich and you had no bread, you couldn’t really call it a sandwich anymore. Open the Source Code for this lesson and the teacher can show you how HTML looks compared to the rest of the code.

Topic #4 – Grammar & Syntax

Most of us hate grammar. And most of us hate grammar because it has to do with the rules of writing. We just want to write the way we want to write. And we don’t like for people to tell us how to write. But there is a really good reason that grammar exists. A good reason that teachers try to teach good writing.

If you have something that you want to communicate with someone, but you write in a way that makes no sense, the person you’re trying to communicate with will not understand. So to some extent, you already follow a few rules. You put spaces between your words. You put periods at the end of sentences. You capitalize the beginning of sentences. You might not do this all the time, but you do it most of the time because you realize that if you don’t, the person reading will have a harder time understanding your message.

Look at this example and see if you can decode it.

Grammar is a set of basic rules about how to write properly so that most readers can understand what we are trying to say. Here is an example of a sentence with proper grammar.

In the same way, the word syntax has to do with the proper arrangement of letters, words, and symbols that you might see in a code. Syntax might include brackets, slashes, equal signs, quotation marks, or even colons and semicolons. But like grammar, syntax might also include the words, the letters, and the numbers in a code. See the examples below.

• Correct HTML Syntax
• Incorrect HTML Syntax

Topic #5 – The Symbols of HTML

Symbols are common in every language. Even letters are sometimes considered symbols because letters have meaning. Here is a list of all the major HTML Symbols.

Topic #6 – The Structure of HTML

• The Basic Structure of HTML
• Tags

• Elements

• Attributes

• A Complete List of Tags
• A Complete List of Attributes

Topic #7 – HTML Body Content

When you design a web page with HTML, your goal is present information to a reader or a viewer. You might be showing images and words and videos, but all of this together is called body content. And in order to have content on your page, you need to have a BODY tag. In the old days of writing HTML, designers always had to have a HEAD tag, where you would put all the information that described or assisted the page (everything that was not related to actual content). But times have changed. Now, the BODY tag is still required, but the HEAD tag is no longer used.

Topic #8 – Making Sense of It All

Topic #9 – The Tools of HTML

1. Text Editors

   A Text Editor is just a program where you can write text (obviously) and save it as a .txt file. But since HTML requires text, you can use a text editor, like Notepad, to write web pages and save them as .html or .htm files. Notepad comes as an accessory on most Windows computers while TextEdit is the alternative text editor on Apple computers (Macs). Remember that the default for saving files in a text editor is .txt, so if you don’t save them as .html or .htm, your pages will never open with a browser like Chrome or Firefox.

2. HTML Editors

   An HTML Editor, like Notepad++, is a program you can download, but it is used primarily for HTML files and not for random text files. After we build a collection of web pages, all students in Web Design I will be taught how to use Notepad++ instead of Notepad. At that point, all students will be free to choose which one they prefer to use in class.

3. Code Validators

   An HTML Validator is a tool for making sure your code was written correctly. When you write a long code and it doesn’t work, there’s a good chance your syntax is messed up. Maybe you forgot an angle bracket. Maybe you forgot to close a tag. Maybe you misspelled an attribute. On the left side of our class website, underneath the resources tab, you can always feel free to use the VALIDATE MY CODE link to see what might be wrong with your code.

Challenge #1: Setting Up a New Document (Individual)

During the last lesson, you set up all of the folders and subfolders in your U:Drive and you even created a new file for your “pgs” subfolder. Now, you’re going to create another new file. Open a new document with Notepad and save it as “2-2_practice.html” in your “pgs” subfolder. Once you have this saved, type the words “I AM READY TO BEGIN” and go on to Challenge #2.

Challenge #2: Setting Up a New Document (Teams)

Find the members of your team who have not yet figured out how to save their Notepad documents and help them out. You can even show them how to change their settings (Word Wrap, Size, Font). But once ALL the members of your team have correctly saved this new Notepad document, ALL members of your team must raise their hands to earn permission to begin Challenge #3.

Challenge #3: Setting Up a New Document (Class)

If the teacher has given your team permission, begin moving around to other teams and helping other teams to finish setting up their Notepad documents. We will not begin coding until ALL students are ready.

Challenge #4: Following the Teacher

During this design, you will be creating a simple page with a color background a few basic HTML elements. But in order to do this successfully, you will need to do three things: keep up with the teacher, assist those around you who fall behind, and reach out to your teammates if you are the one who falls behind.