If you need some extra time to complete your webpage, use the videos linked below to complete your basic site. The four videos cover the following topics (note that these were developed for a previous, online course and ignore any mentions of different assignments or deliverables):
- What is HTML? What are tags and mark-up?
- Getting set up: choosing a text editor
- Making a basic HTML page: “Hello, world”
- Styling your text: the basics
- Making a list
- Creating links
- Adding an image
- Making the image into a link
- Embedding a YouTube video
Make sure you watch all four in order. I recommend watching them at full-size or larger size so that you can read what’s being typed.
It Isn’t Working!
If you have questions as you’re completing the assignment, consider posting them in the comments in addition to emailing me; this way, our class can help one another learn. If you’ve watched the video and worked alongside it, but are having trouble with your web page, consider these tips:
- Be sure you’re “closing” all your tags. Tags are like the bread on your basic sandwich; every first tag needs a second tag that comes along a little later. If you write the “body” tag (<body>) somewhere, make sure the closing body tag (</body>) is also somewhere in your file. Closing tags look just like opening tags, except they have a slash / in front of the word in the tag.
- Be sure you’re working in a text editor and not a word processing program. If you can’t use the TextWrangler app used in class, please use one of the resources discussed at the beginning of the video: Notepad (on a Windows computer), TextEdit (on a Mac), or a real text editor such as Notepad++ (for Windows) or TextWrangler (for Mac). If you’re using Notepad or TextEdit, you need to make certain you’re in “plain text” format (if you are, you won’t be able to change text size or make it bold, and it will default to saving as .txt — though you’ll want to save your HTML file as .html instead of .txt). What you don’t want to be in is “rich text” format, which will save as .rtf.
- Be sure your file is saved as “index.html”. If it isn’t, or if it looks like it’s saved as index.html but it’s actually something like index.html.rtf or index.html.txt and the file ending has just been set to hidden, your web page won’t appear correctly.
- Be sure your image file is on the same “level” as your HTML file. If the .html file is saved on your desktop, the image file should be as well; if the .html file s saved in a folder, save the image in that same folder. There are ways to point to a file that’s anywhere, but we won’t get into that right now.
Let’s Go Public
If you’re raring to get your own website online and show it off to the internet, check these out:
- The University of Maryland’s guide to hosting a website on your free student web space (if you create a site using UMD webspace, the URL will be http://www.terpconnect.umd.edu/~username)
- Lifehacker’s guide to Choosing a Host and Launching Your Site
- Lifehacker’s list of the most popular personal web hosts (a web host is the service that will make your HTML files available to the world)
My Site Looks… Not So Interesting
Don’t worry; the assignment grading is based on completion, not on how great your site looks. Honestly, your site won’t look that good without CSS (Cascading Style Sheets), which is the language used to “style” (control the appearance of) HTML. We won’t cover CSS in this class (alas), but you can check out this tutorial and then use this cheat sheet if you’re interested in making a better site.