Assigned: Wednesday, Jan 25, 2017
Due: Friday, Jan 27, 2017 at noon
Collaboration: You should work with your assigned partner(s) for this lab.
HTML (HyperText Markup Language) is a subset of a language called XML (eXtensible Markup Language). The structure of HTML follows that of XML, but the specific tags we use in HTML have special meaning in the context of a webpage. This lab will walk you through the basic structure of an HTML document, show you how to add headings and text to that document, and then delve into some of the useful structures you can add to pages to create things like tables and lists.
Work with your assigned partner(s) to complete this lab:
Yesterday, you used git entirely through GitHub’s web interface.
From now on, we’ll mostly use git using the command line git tool.
Go to the GitHub project for this lab, github.com/grinnell-cs/datavis-web-basics, create a fork, and add your lab partner as a collaborator just as you did yesterday.
On your fork (not the main repository page), click the “Clone or Download” drop-down button just above the list of files.
You can use SSH or HTTPS to pull files down from GitHub to your computer; either will work, but I recommend that you start with HTTPS for now.
Copy the contents of the text field to the right and open a terminal.
In your terminal, use the cd and mkdir commands to create/move to a directory where you would like to make a local copy of the repository.
Once you’re there, run the command git clone <paste the URL you copied here>.
If you’re used to using hotkeys, you’ll notice that the usual copy/paste hotkeys do not work in a terminal.
To copy, use the hotkey Control + Shift + C, and to paste use the keys Control + Shift + V.
Git will ask for your GitHub username and password, work for a few seconds, and then you’ll have a local copy of the repository.
While this local copy is different from a fork (GitHub doesn’t have a page for it) it works in much the same way. You can make changes to your code locally and commit them to the repository. Once you are ready to publish these changes, you can push them up to GitHub. If your partner has made changes and pushed them, you can pull them from GitHub to your local copy. Finally, once you have committed and pushed all your changes, you can create a pull request from your GitHub fork to send me a list of changes you would like me to accept (or, in this case, to grade but not accept into my starter code).
The git project has good documentation ranging from basic git commands to very complex issues that come up in large projects. There is also a useful guide for GitHub’s workflow, which extends the basic functionality of git with some good practices and a handy web interface. You’ve already seen this with yesterday’s mini-lab, but there are plenty of details we skipped over.
There are many other git guides in GitHub’s bootcamp, which are of varying quality. If you find yourself really stuck using git, odds are I can help you figure it out; don’t spend more than a few minutes resolving a git-related issue before you ask for help.
You should be familiar with basic HTML terms like tag, attribute, and body from today’s reading. If you need a refresher, I recommend that you refer to the Mozilla Developer Network’s Getting Started with HTML page.
At the time I was learning HTML, most people started out by building a personal website. We’ll be doing the same for the purposes of this guide, so you should work with your partners to choose one person who will be the “subject” of the site. You’re welcome to choose fictional characters if you’d prefer.
The first step in building your website is to create an empty document.
Move into the directory you cloned from GitHub and create an empty file called index.html.
This file has special meaning on most web servers;
if you browse to a directory on the website, the index.html file will be served by default.
Open this blank file for editing, and add the following basic structure:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My Website</title>
</head>
<body>
</body>
</html>
This is the basic structure you will follow for any HTML page. I’ll briefly describe each of the pieces below:
<!DOCTYPE html><html></html> closing tag at the end of the document. Everything in-between these tags is in the document. You can only have one of these on each page.<head><head> tag has a closing tag marking the end of the section.<meta charset="utf-8">meta tags do not have any special content, they just describe options or properties of the page.<title><body>Save this document and open it with a web browser. You can do this by navigating to the file using your file browser and double-clicking it, or you can use the “Open” menu in your browser. You shouldn’t see any content on the page yet, but there should be a title. Change the title to be a bit more descriptive (something like “Jordan’s Homepage” would be fine) and refresh the page to make sure you see the update.
Once you’re done, we should add this page to our git repository.
Use the terminal and navigate to your lab repository.
First, run the command git add index.html;
this will add the file to the current set of changes you are going to submit.
Next, verify that the file is listed when you run git status.
Third, run the command git commit -m "Committing my first webpage".
This creates a git commit to store the new document.
Finally, run the command git push to send this change back up to GitHub.
You may be prompted for git options at some point during this process;
just follow the instructions and git should leave you alone in the future.
If you browse to your fork’s GitHub page you should see your new file.
Follow this process (git add, git commit, and git push) each time you make a series of changes to your webpage.
Now that we have a basic document structure, it’s time to add some content to your webpage.
The first step is to create a title.
HTML has six heading levels: <h1>, <h2>, <h3>, …, <h6> in order from largest to smallest.
If you add text to the top of your page (just after the <body> tag) between <h1> and </h1> you should see large text appear on the page in your browser when you refresh.
You can think of headings as levels in a table of contents;
the title is <h1>, sections use <h2>, subsections use <h3>, and so on.
Use these headings to create a rough outline of your document.
We want a section at the top of the site where you briefly describe who you are, followed by sections where you list classes you are taking, websites you like (we’ll learn how to add links soon), and at least one other section that contains some content you would like to add.
Once you have headings, use git add index.html to stage your changes for commit, git commit them (using the -m option to set a commit message), and push the changes up to GitHub. You’ll get used to this process soon.
Now we’ll add text to your page just under the title.
This portion of the page will describe you (or your fictional subject) in a couple paragraphs.
Text in an HTML document goes inside of <p> and </p> tags (the “p” stands for “paragraph”).
You can write what you like here.
You may notice that adding extra whitespace or line breaks doesn’t change what appears on the webpage.
That’s because the structure of the HTML document describes the layout of the page, but that layout is independent of the layout of the HTML.
If you want a paragraph break, close your <p> tag and start a new one.
Hitting enter again doesn’t have the same effect.
If you want to add text styling like italics or bold text, you can use the <i> and <b> tags to surround the text you would like to style (remember the closing tags).
There is some debate around whether to use <i> versus <emph> and <b> versus <strong>.
In practice these have the same effect, but it’s a philosophical debate over whether HTML documents should describe the style of the page or simply the structure of the content.
You could imaging emphasizing text with <emph> in a variety of ways, but <i> clearly means the text should be in italics.
I’ll use <i> and <b> in this class partly because the debate seems to lean in that direction at the moment, but mostly because they’re shorter.
Use both of these text formatting tags at least once inside your paragraph.
There are a few special characters you can’t type in HTML, because they’re part of the HTML language itself.
These include <, >, ", ', and &.
Instead of typing these directly, you use HTML entities to write these characters.
Instead of a less-than sign, write the entity <.
Similarly, a greater-than sign is >.
Double quote is ", single quote/apostrophe is ', and ampersand is &.
Once you’ve written a quick paragraph or two about yourself, commit your changes and push them to GitHub. We’ll move on to the next sections of your page in part C.
Using headings and paragraphs, we can write pretty much any text-only page in HTML. But if you want to list things, show them in a table, or link between documents, you will need to use additional HTML tags. We’ll start out with your list of webpages that you like. Presumably you have a few websites you visit frequently. Come up with a ranked list of the five to ten webpages you visit most often, and we’ll add them to your website.
Once you have your list, we’re going to use an HTML Ordered List to format the ranking.
Ordered lists appear within the <ol> tag.
Each item in the list goes inside of <li> tags (short for “list item”).
The following example list may help:
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ol>
If you add this list to your webpage and refresh the browser, you should see numbers by each list item. Using this list as a template make a list of your top websites and commit your changes.
Now we’re going to make your list clickable.
Within each list item, we’d like there to be clickable text that names a website.
When you click it, it should take you to that URL.
For example, I often visit The Washington Post website.
I’d like the text of this link to be “The Washington Post”, and the target should be “http://washingtonpost.com”.
I can produce this link with the <a> tag (short for “anchor”):
<a href="http://washingtonpost.com">The Washington Post</a>
The href attribute inside the <a> tag holds the link target, while the text of the link goes between the opening and closing <a> tags.
For each website in your ordered list, use <a> tags to make clickable links for every website.
The <a> tag should go inside of your <li> tags.
Once you’re done, commit and push your changes to GitHub.
Sometimes we want to list things without ordering them, like the classes you are currently taking.
To do this, you can use the <ul> tag with <li> list items.
You’ll end up with a bulleted list instead of a numbered list, but the basic structure is the same.
Add a list of your courses using an unordered list, commit your changes, and push to GitHub.
There are many other types of structured content in HTML, but you should practice learning to use them using references.
Consult the Mozilla Developer Documentation page on HTML to add at least one more type of content to your webpage.
I recommend adding a table with <table>, a definition list with <dl>, or an image with the <img> tag.
Once you have your changes completed, commit your work and push to GitHub. You do not need to turn anything in for this lab; just make sure you have it finished before the next class so we can add to your page in the next lab.