Intro to HTML

Demo starter files and file path exercise

Today we're going to jump right in and get our feet wet with some HTML.

HTML stands for HyperText Markup Language. In the simplest terms, it allows us to outline and define the different types of content on a web page. Headings, text, lists, links... everything in an HTML document must be surrounded by "tags" annotating the different parts. In this way, HTML gives us a standardized method for distributing content on a variety of different browsers and devices.

But first...

Browsers and Protocol

One of the things computers have to establish when talking to each other is what protocol they're using.

"I see you over there! But how should we communicate? Phone, fax, mail, or telegraphs?"

The vast majority of content on the web is transmitted using a method called the HyperText Transfer Protocol (HTTP). HTTP is a request-response form of communication between computers. On one end is the client making a request for information. On the other is the server that dishes it out.

A web browser is a computer program that makes navigating and viewing web content practical and easy. When you direct your browser to a web address, it sends a request to the appropriate server and awaits a response. If all goes according to plan, the server acknowledges and sends back the request HTML document (and usually a bunch of other stuff). Your browser then interprets and displays the information appropriately, as it downloads.

The modern web is constantly and rapidly changing. You will be reminded of this numerous times throughout our class. Nowadays, browsers do a lot more than simply request and display static pages. They handle advanced animation and graphics, interactive programs, encrypted communications, and more. We'll discuss many of these aspects of the web, but the scope of this class barely scratches the surface!

We are going to focus mostly on front-end development, that is HTML and CSS. Together, they create the visual layout, color and navigation of a web page. Technically HTML and CSS are not programming languages, just markup - a kind of grammar that browsers understand. Back-end development, which we'll touch on later, is more about storing and handling the information itself.

HTML Anatomy

An HTML document has two main parts: the head and the body.

The head contains mostly metadata - information about the information on the page. This includes things like keywords, encoding, and other resources that the page needs to be displayed. Nothing in the head of an HTML document is ever displayed on the web page.

The body on the other hand, is where all of the content that will be displayed goes. Let's draft our first HTML document and go over some of the basic tags to get started.

Open up a new document in a plain text editor.

We need to declare the doctype on the first line of every HTML document. This tells the browser what type and version of HTML we're using. You may come across older and more complicated looking declarations than this, but HTML5 is the latest version, and its declaration is very simple:

<!DOCTYPE html>

Tags, or elements, in HTML are delimited from the content itself by < and >. Most tags in HTML enclose text, or more tags, so they have an opening <tag> and a closing </tag>.

HTML5 requires that all tags be properly nested. This is very important. The best analogy I can give you is that it's like Russian nesting dolls.

Matryoshka dolls (credit: Joe Lodge https://www.flickr.com/photos/joe57spike/5690570945/)
Matryoshka dolls (credit: Joe Lodge)
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Hello World</title>
    </head>

    <body>

    </body>
</html>

Let's take a minute to dissect this.

  • We've got our two main parts, head and body, between the <html> tags.
  • The doctype is the only tag that ever goes outside of the nested structure of the document.
  • Notice the way I tabbed and spaced things. Except for the spaces between words, HTML ignores all whitespace. This gives us a lot of freedom to space things out and make the code more readable. Even though your browser ignores the whitespace, readability is very important.
  • The <title> tag defines a page title for displaying in the browser's tab or window.
  • There's also a <meta> tag. The character set is almost as important as the doctype, and it tells the browser what kind of text encoding we're using. We will always include this, and we'll always use utf-8.

Save your file with the name index.html and test it. If you're working off the starter files, save it in the parent folder. Since the body is still empty, you should get a blank page when opened in a browser.

Tags

Here are the basic HTML tags and their meanings:

Tag
(abbr. for)
Location / Closing Tag?
Usage
<head></head>
html / yes
Information about the web page is contained here. None of its contents are displayed on the page.
<title></title>
head / yes
The page's title, to be displayed in the browser's window or tab.
<meta>
(metadata)
head / no
Information about the content of the web page. Keywords, a short description, etc. Helps search engines to understand what the page is about.

<body></body>
html / yes
All of the content that will be displayed in the browser.
<div></div>
(division)
body / yes
A arbitrary division, for breaking content up into sections. The name can be misleading because it's used to group content, not as a separator between sections.
<h1></h1>, <h2>...<h6>
(header)
body / yes
Headers of diminishing importance. e.g. An article title might be in an <h2> tag, and its subsections in <h3> tags.
<p></p>
(paragraph)
body / yes
A paragraph.
<br>
(line break)
body / no
Forces a line break (carriage return). Different from a paragraph; use sparingly.
<em></em>
(emphasize)
body / yes
Represents text that should be emphasized when spoken.
<strong></strong>
body / yes
More important than <em>, this tag is bold by default. Good for keywords to make passages easier to skim.
<hr>
(horizontal rule)
body / no
Creates a line spanning the full width of its container. Can be used as a visual separator.
<ol></ol>,<ul></ul>
(ordered/ unordered list)
body / yes
Defines the beginning and end of a list. Ordered lists number themselves automatically, unordered lists have bullets.
<li></li>
(list item)
ol or ul / yes
Defines each list item.
<a></a>
(anchor)
body / yes
One of the most important tags, anchors are links connecting html pages. Anchors can also link to different parts of the same page.
<img>
(image)
body / no
Defines an image.
<!--
comment
-->
anywhere / no
A comment. Used for making notes to yourself or other developers in the code itself. Ignored by browsers and search engines.

HTML tags also have a set of possible attributes which are always defined as <tag attribute="value">. You should always put the value of the attribute in quotes.

Phew! That's a lot of new vocabulary to start with, but you'll use most of these tags a lot, so you'll learn them pretty quickly.

Let's try a couple of these tags out in the body of our document.

Images and Links

Okay, now some more interesting stuff.

Images

Here's the code to insert an image:

<img src="images/my-image.jpg" alt="photo of me">

img tags require two attributes, a src (source), and alt (alternative text), which will be displayed instead if the image can't be.

HTML5 requires the inclusion of the alt attribute for all images. This should be a short textual description of what the image contains. It's always a good idea to write something, but you can leave it empty (e.g. alt="").

This will insert an image from the source images/my-image.jpg. If you don't supply a full web address, it's important to note that the browser follows this path relative to the page you're on.

If I save index.html next to my images/ directory, as below, this will work perfectly. "From here, go into images, then find my-image.jpg"

screenshot of folder structure

Now, as an example let's say we're working in another html page called other-page.html in a subfolder called categories/.

screenshot of folder structure

If we try to add the image here using the same path we used before, we'll hit a dead end. other-page.html is in the categories/ directory, not next to the images/ directory. We need to tell the browser to go up one level first, to the parent folder:

<img src="../images/my-image.jpg" alt="photo of me">

../ is the shortcut for the parent directory. Now the image will work because the browser's directions are "From here, go up one level, then go into images, then find my-image.jpg"

The concept of relative paths is very important. Let's practice that a little more, then add a couple of pictures to our document.

Hyperlinks

Hyperlinks are the strands that connect just about everything on the internet. They're really simple to make:

<a href="http://www.google.com">Link to Google</a>

That's all there is to it. Everything between the opening and closing <a> tags is the hyperlink text that gets displayed, and an href is the only attribute you need. href stands for "HTTP reference".

Here's what the above code looks like: Link to Google

Hint: Text isn't the only thing you can wrap in anchor tags.

Now, since this link takes us somewhere outside of our web site, you might want the browser to open it in a new tab (or window, depending on the user's settings).

<a href="http://www.google.com" target="_blank">Link to Google</a>

Tip: Be careful not to overuse target="_blank". Generally you don't want to open new tabs for links within your own web site. And many choose to leave it up to the user completely, since you can always right click, or CMD/CTRL/SHIFT click to open a link in a new tab.

Hyperlinks can also jump to different parts of a page. Let's say you give a tag in your document an id:

<h2 id="section5">The Fifth Section</h2>

IDs are represented by a # symbol. To jump to that part of the web page you'd use:

<a href="#section5">Link to Section 5</a>

This kind of link is useful on longer pages (e.g. building a table of contents), or at the bottom of a long page when you want to let users quickly go back to the top.

File Paths

One last thing - a clearer explanation about file paths.

File paths pointing to resources (links, images, etc) on a web site can either be relative or absolute.

A relative path points to a resource relative to the page we're working on. For our purposes, this kind of path is best for anything that's stored on your hard drive.

An absolute path is a full URL, meaning it doesn't matter "where we are", the link works no matter what. You'll use absolute paths to link to resources or web pages elsewhere on the internet.

Let's create a second page and add some links to finish the demo.