Jake Selvidio
Art & Design Instructor

gd262 « Web Design 2 » Lesson 1

What is HTML?

HTML stands for Hyper Text Markup Language. The concept of an internet-based hypertext system was developed in the late 1980s by Tim Berners-Lee, a research scientist. The first HTML documents were created in the early 1990s and HTML has since become the basic framework for creating webpages (Michaud, xi). HTML is a system of markup tags used to describe our content. I like to refer to HTML as the skeleton of the webpage. It gives our page it's basic structure, categorizes our content for SEO (Search Engine Optimization), and provides us with identifying markup to hook in our stylization with CSS. HTML and CSS together establish the look and feel of our page. We use them to create space in our layout, apply backgrounds and typographic effects, and implement some basic interactivity.
To learn more about the history of HTML, visit the Resources page.

What does HTML look like?

HTML is a series of opening and closing "tags" that indicate the beginnings and ends of the different sections of content. The content is essentially wrapped in HTML tags.

<tag>This is content.</tag>

We refer to the opening and closing markup as the "tags" while the text object as a whole is referred to as an "element." Here is an example shown using paragraph tags:

We use different tags for different types of content. While we use <p> to indicate a paragraph, we use <h1> to indicate a main headline. These tags serve as more than just visual indicators in code. Each element will take on a different style and appearance within the browser. By default, headlines like <h1> will be bigger and bolder, while <p> content will inherit a base font size and style.
For example, the following markup...

<h1>This is the headline.</h1>

<p>
This is a paragraph. Enim Etsy artisan, vero four loko ex fanny pack Pinterest. Tattooed try-hard pariatur irony sint banjo.</p> Filler text provided by HipsterIpsum.me
...will look like this in a web browser:

Every browser will have it's own default stylization for the various HTML elements. For the most part, it will be pretty straightforward like you just saw; black text, white background, boring fonts. We have the ability to take control of these stylizations and make all of our own decisions about the appearance of our content. We can do this using CSS, which we'll cover in later lessons.

Creating an HTML document: Let's get started!

Every HTML document must have these basic parts:

  • Must begin with an <html> declaration.
  • Followed by an opening and closing <head> tag. I like to refer to this section as the "brain" of our document.
  • Inside the <head>, you'll need a <title>. This displays at the top of our browser window.
  • After the </head>, must be a <body>. This is where all of our content goes.
  • Finally, our document ends with a closing </html>
  • So, to summarize:
    • <html>
    • <head>
    • <title>
    • <body>

When we put it all together, it looks something like this:

<!doctype html>
<html>
<head>
<title>Title of Document</title>
</head>
<body>
Content goes here.
</body>
</html>

Wait, what's that first part again? That <!DOCTYPE html> declaration is telling our browser that we are using HTML5, the newest and current web standard as set by the W3C (World Wide Web Consortium). Click here to find out more about the W3C.

There is one more important element we should include before we get going, and that's the <meta> element.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of Document</title>
</head>
<body>
Content goes here.
</body>
</html>

The <meta> element provides the browser with more metadata about our website. In this case, we are telling the browser what character set we're using. This helps the browser to properly display special characters and allows us to distiguish between special characters used to code our site versus special characters used to display in our content. We'll cover more about this later on.

HTML documents can be created in nearly any plain text writing software, such as TextEdit (in plain text mode) or free programs such as Text Wrangler. On our computers here we have BBEdit and Dreamweaver. Both of these applications give us the ability to hand-code, while Dreamweaver offers some additional site-building tools. Though I'm not a huge fan of some of the Dreamweaver specific site-building tools, I do think it's a nice platform for beginners, so that's where we'll start.

Using Dreamweaver

Go ahead and open up Dreamweaver CS6.

  1. Ignore the Welcome screen for a moment, we need to edit some preferences first. In the menu bar at the top of your screen, go up to Dreamweaver > Preferences. In the New Document category, make sure that the Default encoding is set to UTF-8, but most importantly, that the Default Document Type is set to HTML5.
  2. Now you can revisit the Welcome screen and choose Create New > HTML.
  3. In the top left corner of your Document Window, you'll see three adjacent buttons known as your View mode buttons.
    Code will reveal only your source code, design let's you see a preview of your current document (similar to what you'd see in a browser). Split mode will show you both. Try all three buttons now.
  4. You should see that our "blank" HTML document consists solely of the basic elements shown earlier. Let's add a little content to our page. Copy and paste the following text in between the <body> tags.
    If you hold a cat by the tail you learn things you cannot learn any other way. ~ Mark Twain
    While we're at it, let's update our document <title> as well.
  5. <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Mark Twain Quote</title>
    </head>
    <body>
    If you hold a cat by the tail you learn things you cannot learn any other way. ~ Mark Twain
    </body>
    </html>
  6. Now let's save our document to the desktop as mark-twain-quote.html.
    Important note!: Notice that we are using all lowercase characters and NO spaces. This is standard for creating web documents. It is fine to use dashes or underscores instead of spaces. Even running all the words together, "marktwainquote.html" is an acceptable convention. Now double-click your document on the desktop to open it in your default browser or CTRL+Click it and choose Open with to open it in your favorite browser. If this is your first web page, pat yourself on the back.

  7. We've got a little more to do before any real celebration. For starters, we never want to leave text just free-floating in between our body tags. So let's give it some proper markup.
    In Code view, let's wrap the quote in opening and closing paragraph <p> tags. And let's do the same with "~ Mark Twain." You can add carriage returns as needed on the code side. I usually try to break my elements up on to separate lines for easier reading. Like this:
  8. <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Mark Twain Quote</title>
    </head>
    <body>
    <p>If you hold a cat by the tail you learn things you cannot learn any other way.</p>
    <p> ~ Mark Twain </p>
    </body>
    </html>
    Save your document again and open it in a browser, you should see that our quote and author are now on separate lines - they are actually in separate paragraphs, thanks to our tags.

  9. Let's add a headline before our first paragraph and wrap it in <h1> tags.
  10. <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Mark Twain Quote</title>
    </head>
    <body>
    <h1>Mark Twain Quote</h1>
    <p>If you hold a cat by the tail you learn things you cannot learn any other way.</p>
    <p>~ Mark Twain </p>
    </body>
    </html>
  11. If you want to see your page in action as you code it, turn on Live mode by clicking the "Live" button to the right of the View Mode buttons. This gives us a rough idea about how our page will look in a browser (it most closely resembles Safari and Chrome). Now, let's save our document once again, but this time, let's test it using the Preview button up in our Document Toolbar. Click on the globe icon and choose the browser your want. If your doc hasn't been saved recently, it will prompt you to do so now.
  12. Last step! (I promise).
    Now let's add a hyperlink (the most important feature of the internet). In code view, highlight "Mark Twain" where it appears after our quote (not the one in the headline). Now go to your Properties Inspector just below your Document Window. Here you will see a "Link" input field. Let's paste in a link to Mark Twain's wikipedia page. Press enter and Dreamweaver will transform your plain text into a hyperlink by wrapping it in anchor <a> tags. We'll delve into these more later on.

Click here to see the finished page.

works cited

Copyright © 2014 Jake Selvidio. All rights reserved.