In this lesson, you will write your first HTML and CSS files, including: head, title, body, h1, h2, h3, h4, div.
You will also practice using font, size, case, and style to communicate the emotional associations of words. If necessary, refer to the typography lesson on aesthetics and emotion.
Overview of The Assignment
- Choose a word you have an emotional or physical association with. Words with strong associations often work best: love, hate, fear, mother, whisper, justice, pain…
- Using only web safe fonts, communicate four different (even opposite) connotations for the word. Experiment with case (capital and lowercase), style (roman and italic), weight (normal and bold), opacity, and size.
- Create an HTML document defining four versions of the word and a CSS document describing how each of the four versions should look. If you are an HTML/CSS beginner (or feeling a bit rusty), follow the step-by-step instructions below to start a version of this lesson.
- Ask at least two people to look at your finished assignment and describe the emotional associations that they have with each version of the word. This will help you think about your readers while learning to communicate emotional associations in a subtle way with available resources (web-safe fonts).
- Write about your decisions. How did you use size, case, style, opacity, and font to affect the meaning of the word? Did other people have the same emotional associations with the word that you did?
Before You Write the HTML and CSS Files
Before you can start writing your HTML and CSS files, you need to get a text editor (to write the files), learn about naming conventions (so the files work), and set up some folders (to put the files in).
Get a Text Editor
You need a text editor to write your files. I used TextWrangler from Bare Bones Software for my files. The software is free, and works on Macs.
If you’re working on a PC, Notepad++, is another free text editor.
If you’re working in a program such as Adobe Dreamweaver, you can still do all the lessons. But make sure you work in code view!
Some Rules for Naming Your Folders and Files
- Filenames need to be consistent, and HTML is case sensitive. I always use lowercase letters (no caps), so I know exactly what case I used for each filename.
- HTML does not like spaces. If you create a file, folder, or image name with a space in it, any links to that file, folder, or image will break. Use a hyphen (-) or underscore character (_) instead of a space. For example, I would name a folder word_connotations instead of Word Connotations.
- To keep filenames simple and links working, use only letters, numbers, and hyphens or underscore characters.
- Periods (dots) should only be used with file extensions (.html, .css, and so on)
- Your home page should always be called index.html. A browser will look for and open the index.html file in any folder you send it to.
- Finally, name your files and folders something meaningful. You won’t remember what the heck new_page2.html is tomorrow morning.
Create Folders to Organize Your Files
HTML files reference other files. They link to images, other HTML documents, PDFs, CSS files, and so on. These links work only if the HTML file knows where to find the other files.
For now, you’ll be working in a kind of closed system. Your HTML files will reference only other files on your desktop. It’s still important to keep everything organized so that links don’t get broken.
- Create a main folder for all the lessons you’ll do for TWD, calling it web_typography_yourlastname.
- In that folder, create a folder for this lesson, and call it word_connotations.
Start the HTML File
In your text editor, create a new document, and save it as index.html in your word_connotations folder.
Type the initial code
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <meta charset="UTF-8"> </head> <body> </body> </html>
OK, so what the heck does all that mean?
The DOCTYPE
Take a closer look at the first line:
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <meta charset="UTF-8"> </head> <body> </body> </html>
The DOCTYPE tells browsers that your file is written in HTML. This simple DOCTYPE (older versions were much more complex) tells browsers to render the document using current standards. The DOCTYPE is case sensitive. Type it exactly as shown. If there is no DOCTYPE, or if there is an unrecognized one, a browser will assume you’ve written invalid mark-up. The browser will use “quirks” mode and interpret the document as best it can, often rendering the page incorrectly.
Tags
HTML uses tags to define elements. Most tags come in pairs: they open and close. Look at the preceding HTML example closely. Find the <html> tag and the </html> tag. The first tag opens the definition; the second tag (with the /) closes the definition. The <html></html> pair means that everything between these two tags is HTML.
Head, Title, and Body Elements
You’ll also see three other tag pairs, called elements:
<head></head> <title></title> <body></body>
The closing tag in each pair includes a slash (/).
An HTML document begins with a head element, which defines information about the document (what the title is, the link to the CSS file, metadata, scripts, and so on).
Next is the title element, which lives in the head element. The tag pair <title></title> should be nested inside the <head></head> tags. In other words, the <title></title> tags always go after the starting <head> tag but before the closing </head> tag, as follows:
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <meta charset="UTF-8"> </head> <body> </body> </html>
There is also some metadata in the head element (right after the title element):
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <meta charset="UTF-8"> </head> <body> </body> </html>
This metadata defines the character encoding, which tells the browser what set of characters (letters, numbers, and so on) to use when converting the bits to characters. You don’t need to understand exactly how it works; just know that this line is required and should live in the head element.
Notice that, unlike the title element (which wraps around the text to use as the title of the web page) the meta element is an “empty” element — it doesn’t wrap around anything. It doesn’t come as a pair of tags. Sometimes, you’ll see an extra forward slash added to the end of an element that doesn’t have a closing tag. For example, you might see:
<meta charset="UTF-8" />
These extra forward slashes are a holdover from the practice of using XHTML to write HTML documents. We used them because XHTML requires all tags to close. They are not necessary when writing HTML. If you see a webpage that uses these closing forward slashes, it may be an older page written in XHTML, or it may have been written by someone who used to use XHTML and continues to close all their tags.
Using these forward slashes are not necessarily wrong; HTML will work if you use them. But since the forward slashes aren’t necessary in HTML, you won’t be using them for the lessons in this book.
Finally, the last pair of tags is the body element, which will wrap around the content of the HTML document. You’ll add content here as you progress through the lesson.
View Your Web Page
Take a moment to save your document.
Open the document in your browser. Do you see a blank screen, with Title of the document at the top of the browser window? Perfect!
Now you can start putting in some content.
Give the Page a Title
Back in your text editor, between the <title> tags, change Title of the document to Word Connotations.
Add the Content
Between the <body> tags, add your word four times. It will look something like this (I’m using the word “yes” you should use your own word):
<body> yes yes yes yes </body>
View Your Web Page
Save your HTML document, and view your document in your browser (if your browser is still open you can just click the Refresh button). You’ll see the changes.
Now your web page has a meaningful title at the top of the browser window, and it has your word written four times. Unfortunately, the word runs across a single line, like this: yes yes yes yes.
Why does it look like this? Browsers translate the HTML. Your browser will show only what you’ve given it. You haven’t told the browser where to put line breaks, so it didn’t add any.
Define Your Headings
Usually, you’d use the paragraph element <p></p> to define paragraphs and break the lines. But you aren’t using whole paragraphs of text here, and I want you to set each of the four words differently. So you’ll use a variety of heading elements to define the words.
Add the following tag pairs (shown in bold) to your HTML, using one pair around each word:
<body> <h1>yes</h1> <h2>yes</h2> <h3>yes</h3> <h4>yes</h4> </body>
View Your Web Page
Save your HTML document, and view the changes. You should see your words in a column along the left edge. The words are bold and get smaller as they go down.
Why does each word look a little different from the others? The heading elements (h1 to h6) have default stylistic values that browsers use to display the headings — unless you describe the elements differently. That’s exactly what you are going to do next.
Write the CSS File
The CSS document is where you can, among other things, describe how elements defined in HTML should look. For this assignment, you tell the browsers what the h1, h2, h3, and h4 elements should look like.
In TextWrangler (or whatever text editor you are using), create a new document, and save it as word_connotations.css in your word_connotations folder.
How to Describe an Element
CSS descriptions have three parts:
- Selector: The element/ID/class you want to describe
- Property: The attribute you want to affect
- Value: The value you want to assign to the property
Written together, they look like this:
selector{property:value;}
If you want to set your h1 in Georgia, for example, you would write it like this:
h1{font-family: georgia;}
To set your h1 in 24px Georgia, you write it like this:
h1{font-family:georgia;font-size:24px;}
Notice that the two properties (font-family and font-size) are separated by a semicolon. Also notice that there are no spaces anywhere in the syntax. If you ever need to type a value with two or more words (such as Comic Sans MS), put that value in quotation marks (as in font-family:”Comic Sans MS”).
If you want to set your h1 in 24/32 Georgia and remove the bold (default) setting associated with the h1 element, your syntax is going to get longer. To make the CSS easier to read, it’s customary to put one property:value pair on each line, separated with a semicolon, like this:
h1{
font-family:georgia;
font-weight:normal;
font-size:24px;
line-height:32px;
}
It is also customary to indent the property:value pairs. This helps make the syntax easier to read.
The one place you can consistently add spaces in your CSS without causing problems is after the colon separating the property and value. Thus, your syntax will still work if it looks like this:
h1{
font-family: georgia;
font-weight: normal;
font-size: 24px;
line-height: 32px;
}
Describe the First Element: h1
In this lesson, you will create four typographic versions of the word you choose. But to learn the HTML/CSS, start with the example I provide… using the word yes.
For now, make the top (h1) version of your word look like my top “yes.” Make it 48/48 Georgia italic, regular weight, and centered.
To do this, type in the following CSS syntax and then save the CSS file:
h1{
font-family: georgia;
font-style: italic;
font-weight: normal;
font-size: 48px;
line-height: 48px;
text-align: center;
}
View Your Web Page
Now look at the web page in the browser again. Wait! Nothing changed! What went wrong?
Tell the HTML File to Reference the CSS File
The browser doesn’t know to use the CSS file until you tell it to. Add the following line in the head element (that is, between the <head></head> tags) of the HTML file:
<link href="word_connotations.css" rel="stylesheet" type="text/css">
Put this syntax in the head element of any HTML file that references a CSS file. Notice that you’re telling the HTML file to reference word_connotations.css, which is the CSS file you just created. This filename is a variable. Use the correct name of the CSS file for each project.
View Your Web Page
Save the HTML file, and reload the file in the browser window. It works!
Describe the First Element (h1) Your Own Way
Back in your CSS file, change the styling of the h1 so it looks the way you want your first word to look. Change font, weight, size, case, letter-spacing, and opacity as needed.
Here’s a CSS cheat sheet to help you make your changes.
Describe the Second Element: h2
Once your h1 is all set, describe your h2 (the second version of your word). Start by identifying the selector you want to style with the following CSS syntax:
h2{
}
Now list the the properties and values (between the curly brackets) as needed! Remember to separate each property:value pair with a semi colon (;)
For example, the CSS for my h2 looks like this:
h2{
font-family: georgia;
font-weight: normal;
font-size: 60px;
line-height: 60px;
text-transform: uppercase;
letter-spacing: 5px;
text-align: center;
}
View Your Web Page Often!
Save the CSS file as you work, and view the web page in the browser after each small change. This will help you catch syntax errors immediately, so you can fix them more easily.
Describe the Third and Fourth Elements: h3 and h4
Once your h2 is all set, move on to the h3 and then the h4. I’m not going to tell you how to type in the syntax. You’ll learn more quickly if you piece it together from the what you did for the h1 and h2 (and, of course, the CSS cheat sheet).
Why is There So Much Space Between the Words?
As you define your headings, everything looks good, but the words have unexpected spaces between them. These spaces are caused by default margin and padding in the h1-h6 elements. Leave the space for now (I cover margin and padding later; you can come back and change them if you want to) and move on to creating a “div.”
Creating a div
Div is short for division. Think of a <div></div> pair as a container (or layout box) you can use to structure your web page.
A div is a box to hold content. It has a border. It also has padding inside the border and a margin between the border and other elements in the layout. You’ll become more acquainted with margins, padding and borders later, but for right now, add and describe a simple div.
Add a div in Your HTML
You want your four words to live inside the div, so add the <div> tags around your content. Type the following syntax inside your body element (after the body element start tag) and before your h1 element (before the h1 start tag), like so (new syntax is in bold):
<body> <div id="main_container"> <h1>your word</h1>
As with most elements, you have to close the div. You want the div to wrap around all four words. So after your h4 element (after the h4 closes), but still inside your body element (before the body closes), type the following (new syntax is in bold):
<h4>your word</h4> </div> </body>
Notice you didn’t type just <div> to open the div element. Why? Web pages contain more than one div to structure the content (just as most magazine pages have more than one column of text). Unlike headlines, in which you have six (h1 to h6) tags to work with, you have only one <div> tag to use, so you need to identify (ID) which div you are using in your HTML.
I’ve named the div “main_container” because it’s the main div that contains all the other elements in the layout. In HTML and CSS, you can name divs whatever you want to. I find that main_container is most meaningful for me, but you’ll often see the main div referred to as wrapper. You can call it wrapper if you prefer. Just make sure that the div name in your HTML matches the div name in your CSS.
As your web pages become more complex, you’ll need to identify multiple divs to build your pages (div IDs are unique and can only be used once on a page). You should always name your divs in a meaningful way: text_column, image_column, and so on.
Describe the div ID
If you were to save and view your index.html file in the browser, you wouldn’t see any changes. Why? Because you haven’t described the div ID in your CSS.
To make your main_container div a white rectangle (400px wide) with a black border (1px), centered in the browser, write the CSS syntax (in your CSS file) like this:
#main_container{
width: 400px;
border-width: 1px;
border-style: solid;
margin-top: 20px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-color: #ffffff;
}
The ID selector looks different from the h1 selectors because you’re not describing an element (h1, div)… you’re describing an ID that can be applied to an element. To create and describe an ID in CSS, you must precede the name with a hash mark (#). Thus the ID selector becomes #main_container.
There are also some new properties in this syntax:
You set the size of the container to 400px wide and put a solid, 1px border around it. By default, borders are black, so you didn’t have to specify the border color.
You set the margins of the main_container. The margins are the spaces between the container and elements next to it. The only element next to your main_container is the browser window. You put 20px between the top edge of the main_container and the browser window. You put 0px between the bottom edge of the main_container and the browser window. Most important, you told the browser to automatically calculate the amount of margin to put between the sides of the main_container and the browser window. This keeps the main_container centered left to right, regardless of the width of the browser window.
Finally, you made the main_container background color white. CSS uses hexadecimal color codes to represent RBG (red, green, blue) colors, and #ffffff means white. Plenty of color charts are available online. My favorite is Hues Hub.
You’re almost done. Next, you add the background color.
Add a Background Color to the Page
After you learn the syntax for a property, you can use it across selectors. For example, you just gave main_container a white background by adding a line to the syntax describing the #main_container:
background-color: #ffffff;
To add a background color to the page, use the same property syntax but apply it to the body element. In the CSS file, type the following:
body{
background-color: #999999;
}
Save the CSS file, and view the web page in the browser again. It should look similar to mine.
You have created and described four heading elements, described the body element, and created and described an ID for a div. Congratulations!
Validate Your Work
Before you move on to the next lesson, you want to make sure your HTML and CSS are valid (and will work properly across multiple browsers and devices). If you banged your head a few times while doing this lesson, you’ll be happy to learn that validating your pages when things aren’t working can also help you find and fix errors as you go.
Validate Your HTML
Validator.w3.org is the site for validating your HTML markup. Once there:
- Choose to validate by upload (currently the second tab).
- Click the browse button that appears.
- Navigate to the file you want to validate.
- Click open.
- Click Check.
- If you get any errors or warnings, scroll down to read them.
A note on warnings: at this time HTML 5 will always result in a warning, because the validation checker for HTML 5 is still experimental.
A note on errors: the validator returns a warning stating where (on what line of syntax) the error was found. It also provides a statement describing the error. If you are not familiar with HTML lingo yet, the statement might not make sense. But you can still look at your syntax to find what is missing, or typed incorrectly, and fix it.
Often, the validator realizes there is an error when a new (often correct) element starts. So the error may not actually be in the line indicated by the validator. Start at the line indicated, and if the error is not in that line, move backward through your syntax to find the error.
Validate Your CSS
jigsaw.w3.org/css-validator is the site for validating your CSS. Once there, you’ll follow the exact same steps as you did when validating your HTML above.
Again, the validator often realizes there is an error when a new (often correct) property starts. So the error may not actually be in the line indicated by the validator. Start at the line indicated, and if the error is not in that line, move backward through your syntax to find the error.
Always validate your work. Even in I don’t tell you to.
Quick Tips
- Problems? Check out my Frequently Asked Questions page.
- Need syntax for a property I haven’t covered? Try HTML Dog.
- Want a CSS cheat sheet at your side? Just download and print!
Great exercise!