Archive‎ > ‎Class of 2015‎ > ‎

Intro to HTML

posted May 13, 2014, 10:57 AM by mdreyfus@ctkschool.org   [ updated May 15, 2014, 12:04 PM ]
Today we're going to walk through some HTML basics that everyone should know!

Getting Started

  1. Start by opening an app called TextWrangler.
  2. Save a new file called index.html on your desktop.
  3. If you open the file from your desktop, it will open in a browser and show a blank web page.
  4. Type "hello world" into the file on TextWrangler.
  5. SAVE THE FILE. You'll have to do this each time to see your changes.
  6. Refresh the blank web page. You should see "hello world" at the top of the page.

Add some tags

HTML stands for Hyper-Text Markup Language. That means that text is "marked up" to give it structure and link to other text. Text is marked up with tags to define what the text should look like or where it should go.  For example:

<h1>hello world</h1>

This is a level 1 header tag. That's the biggest kind of header text. Notice the structure of a tag: open angle bracket, tag name, closing angle bracket. Then the text inside the tag. Then the closing tag: open angle bracket, slash, tag name, closing angle bracket.  If you mess up even one letter, your tag won't work properly.

Here's a nice side-by-side of how some tags work. Notice how tags can be nested inside each other. 



Try adding the following tags to your document to see what they do.  Remember to save each change!

  • <title>Page Title</title>
  • <h1>A header</h1>
  • <p>Paragraph text that could be just a word or two or maybe it's a really long paragraph that goes on and on and on. Paragraphs have space at the top and bottom.</p>
  • <br/>A break is basically a return. It is also a self-closing tag (not paired). Try adding just a return in the middle of a paragraph to notice how whitespace is ignored.
  • <!-- This is a comment -->
  • <li>A list item</li>

Structure

Just like an essay, a web page has structure. While the tags would work just scattered around a document, using the right structure helps everything make sense (just like in an essay).  The image below shows the basic structure. Notice how we use indentation to keep nested things organized. Try to apply this structure to your web page!


Adding images and links

The web is more than just text, right? As a user, yes, but under the hood it's all marked up text!  To learn how to write these more complex tags, let's head over to CodeCademy.com. That link will take you to a refresher about some basic tags and then onto links and images!

More CodeCademy links

Take your knowledge to the next level with these lessons!

Comments