Introduction to HTML
Introduction to 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.
Hyper Text Markup Language, or 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 the page work from behind-the-scenes. Most pages have a LOT of code, but not everything in those codes is actually 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.
During this lesson, you will be introduced to all the important parts of an HTML file.
DAILY SCHEDULE (85 MINUTES):
CLASS DISCUSSION: AN INTRODUCTION TO HTML
Topic #1 – Why Learn to Code in the First Place?
“The vision I have for the [World Wide] Web is about anything being potentially connected with anything.” (Tim Berners-Lee, Weaving the Web)
Now open up a new Notepad Document and save it as “htmlintro.html” in your “pages” folder.
Topic #2 – A Short Summary of HTML
Remember Tim Berners-Lee? His online nickname is TimBL and he not only created the World Wide Web, but he also created HTML, one of the two coding languages that you’re going to learn in this class. Within each lesson of Learning Goal #2, you’re going to see a lot of quotes from TimBL because he has a lot of interesting things to say about what we’re studying.
Hyper Text Markup Language, or 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 #3 – Grammar & Syntax
All sentences end with periods. A series of items in a sentence are separated with commas. And words get separated with spaces. But why do we use periods, commas, and spaces? Because without them, our words would all run together and be extremely hard to understand. 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.
Topic #4 – 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 #5 – The Structure of HTML
All documents written with HTML have a simple structure that looks something like this.
When writing the basic structure of HTML, you need to know three simple words:
1. What are Tags?
2. What are Elements?
3. What are Attributes?
Topic #6 – The Two Main Parts of HTML
In the simple structure we just discussed, you should have noticed a <head></head> element and a <body></body> element. The <head></head> element contains other elements that describe or provide information about the page, but nothing in the head will actually show up on the page (like the title or the style). However, the <body></body> element contains all the other elements that will show up on the page (like paragraphs and images). Some advanced designers write pages without a head, but it’s a good habit to always include both. Consider that you can’t walk around without a head (because it holds your brain) and you can’t walk around with only a head (because it needs your feet).
Topic #7 – Making Sense of HTML & HTML5
Topic #8 – The Tools for Writing HTML
Now that we know all the random details of HTML, here are three more things you’ll need to know going forward.
1. What is a Text Editor?
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. What is an HTML Editor?
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. What is an HTML Code Validator?
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.
DAILY DESIGN: ABSTRACT BACKGROUNDS
Now that we have a pretty good idea how HTML works, the time has come to build something using HTML. We’ll begin by gathering Abstract Images, then we’ll learn how to place those images into a page background. Follow the teacher’s directions carefully and use your partner for assistance.