The Chicago Hot Dog Tutorial
Today we're going to learn how to build a basic HTML page. This workflow is much more complicated and sophisticated on bigger sites, but we're going for the foundations. If you want to learn more, see the last steps of this tutorial for recommendations.
Step Zero: Getting set up to work
A. Set up a project folder
Create a new folder called "Chicago-Dog-Site" and save it to your Desktop for today. (Or grab the Step 0 folder from the example files.)
B. Open your text editor
- Open TextWrangler (or Notepad++).
- Create a new file.
- Save the file as 'index.html' in your new project folder.
C. View your page: Let the browser translate your site
Opening the file from Finder (or Windows Explorer) will work well enough for today, or whenever you are trying to do something simple with basic HTML and CSS, but it is not a good long term practice in the world of web development. See Step 8 for directions on how to run a simple web server off of your computer.
- Navigate to your new index.html in Finder.
- Open index.html with Chrome.
Step 0 (zip)
Step One: Basic HTML tag structure
- HTML stands for hypertext markup language.
- Each HTML tag creates a box (that we don't see unless we style), which are by default 100% wide and 0% tall (or as tall as the content contained within them); websites are made of lots and lots of these boxes.
- HTML tags are like Russian nesting dolls. Most come in pairs with an opening tag (like <p>) and a closing tag (like </p>) that surround the content.
- The point of HTML is to structure the content. The browser then sees where the "boxes" are and also knows something about the importance of each piece of content.
- HTML5 (the latest iteration of HTML) brought us semantic tags like <article>, <header>, <footer> and so on that describe what content might be contained within.
Basic web page structure
This sets up your HTML page and is about as basic as a web page can be.
Note the <head> which contains information related to your site that you don't see in the browser, and <body> which contains the stuff you DO see.
1. Copy and paste in the basic structure for your page into index.html. You'll want to overwrite the "Hello, world!" that you typed in earlier.
<title>The Chicago Dog</title>
<meta name="description" content="This 50-60 character description is what will appear under your link in search engines.">
2. Now fill in your name, date and any other relevant information where it says Documentation Comment. Anything between the <!-- and the --> is a comment and will only be seen by you in the code, and will not appear on the screen.
- <!doctype> tells the browser this is no ordinary text file!
- The <html>, <head>, and <body> tags set up the basic structure.
- Title is what appears in the tab on your browser - try changing it, refresh and see what it does!
- UTF-8 is an international standard character set so that if you type in a special character or letter, like an accented-e or a cyrillic character, it will appear that way to someone opening the site in another country.
- In <body> we're going to put a container box to hold our site content in from the edges.
3. Save index.html and refresh your browser.
Step Two: Markup text with HTML tags ➳