Back to journal page

Making an HTML file for the web, with CSS styles: A code tutorial: part 1

by Andi Boggs | May 6, 2017

Let’s say you want to design a page about your favorite museum for the web. You will need to use a text editor, which would be better called a code editor, to write your html page in. Examples of free code editors you can download from the web are Atom, or TextWrangler.
Next step: go to your favorite museum and take pictures and write a few paragraphs about it that will be the main content of your web page. Type your original essay up in a word or pages document and spell check it.

Open a new file in your text editor, and save it with an html file extension like museum.html. You have just created a blank html page. Now type the following code into your page.

CSS code
My CSS code in the text editor.

<!DOCTYPE html>
<html>
<head><title></title>
</head>
<body>
</body>
</html>

Notice that the closing tags all have a forward slash inside them. Now write “My trip to the museum” in-between the title tags.
It should look like <title>My trip to the museum</title>. This will be the title of your document and when you open the page in a web browser like Safari or Internet Explorer or Google Chrome or Edge, it will appear at the top of the document but not on the page. Why doesn’t the code or what’s contained in the head section appear on the page when you open it in Finder (Mac) or a web browser window? Because an html page is like a 2 layered page. The code appears invisible in the web browser view, but it is visible in the text editor view.

So what is the purpose of the code? The code is for organizing and styling the content. I think. Moving on.
Now cut and paste the essay about the museum you wrote inbetween the body tags. When you open your html page in a web browser, this will appear on the page. The body tags contain everything on the html page and whatever is typed inside them (except for more code) is visible on the web browser view. When you save the page and open it in Safari or some browser window you will notice the text looks plain. In order to style the text you have to write some CSS code.

So open a new file in the text editor and save it as museumstyles.css. It should have the .css file extension. Enter this code in your text editor on the css file.

h2 {
color: blue;
}

body {
width: 500px;
font-size: 18px;
color: deeppink;
background: beige;
text-align: justify;
line-height: 1.5em;
letter-spacing: 1em;
}

Now you have to connect that css file to the html file to apply those styles to your essay. (We forgot to put the <h2></h2> header tags around the title of your essay so add them into the file. The title of the essay should also be inside the body tags. Don't confuse the title of the essay with the title of the document.)

html code
My HTML code in the text editor. Notice the link in the head section to the css sheet called museumstyles.css
 

The way you connect the css file with the html file is by putting the following code inside the head section of the html file:

<link href=“css/styles.css” type=“text/css”
rel=“stylesheet”/>

These two lines can go right above the closing head tag which looks like </head>. Notice that the link href attribute directs the html page to the css file.

This will only work if the .css file is saved in the same location as the .html, so you might want to make a special folder for both of them called Museumproject.

Now save everything and open the html page museum.html in finder(Mac) or a web browser.
Remember every bit of code has to be perfect, it can’t be missing any semicolons or curly braces or brackets.

You should see colors and style appear on your html page now when you view it in the browser.
The last thing is to insert the images into the html page from your computer. They are automatically saved as .jpg files. We will complete this step in Part 2.

-AB

HTML code with CSS
What my code looks like in the browser with HTML and CSS.