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.
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.
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:
Tags, or elements, in HTML are delimited from the content itself by
>. Most tags in HTML enclose text, or more tags, so they have an opening
<tag> and a closing
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.
<!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
- 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.
<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.
Here are the basic HTML tags and their meanings:
<h2>tag, and its subsections in
<em>, this tag is bold by default. Good for keywords to make passages easier to skim.
(ordered/ unordered list)
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.
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.
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"
Now, as an example let's say we're working in another html page called
other-page.html in a subfolder called
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 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
<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.
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.