In this tutorial, we tell you how to make a simple web page using HTML & CSS. No history lessons, no labored explanations, and the bare minimum of technical jargon required to understand what’s going on. It’s a step-by-step guide that will get the job done and introduce you to the (sometimes) wonderful world of web design.
The only tool you require for coding HTML is a text editor. I use and recommend Sublime Text.
This basic, modern webpage will have two parts:
- An HTML document containing HTML markup (code). This gives the web page its structure.
- A CSS stylesheet. This gives the web page its visual style.
Alright, let’s go already!
HTML: Structure
First things first.
1. Create a new folder on your desktop. Name it “My First Web Page”.
The name of the folder doesn’t matter, but for this tutorial, name it that anyway.
2. Open your text editor and create a new document by selecting New File from the File menu.
Pretty easy step. Don’t worry about naming or saving the document just yet.
3. Start writing markup.
Now let’s cover some basics.
HTML markup uses special codes called tags. Tags are keywords that are enclosed within < > characters. In your new document, write the following markup:
<html> </html>
Tags come in pairs: an opening tag and a closing tag. The opening tag in the above markup is <html>. The closing tag is </html>. A pair of tags will always use the same identifying keyword. Closing tags in HTML can always be identified by the forward slash (/) that proceeds their unique keyword.
Each individual HTML tag serves a unique purpose: it tells the browser what it should do with the information it contains. The combination of an opening tag, its closing tag, and the information they contain is known as an element.
An HTML document should contain only one <html> element.
4. Create the <head> element of the HTML document, and give the document a title.
Add the following markup between the <html> tags you just created:
<head> <title> My First Web Page </title> </head>
So that it looks like this:
<html> <head> <title> My First Web Page </title> </head> </html>
The <head> tag is used to create the <head> element. Makes sense, right?
Most elements placed within the <head> element deal with metadata. Metadata gives the browser specific instructions and information about specific things, but it isn’t rendered or visible to users. But there’s no need to think too much about that stuff at the moment.
Only one element that regularly appears with the <head> element is rendered by the browser, and that’s the <title> element included here. The content of the <title> element is the page title that will be displayed at the top of your browser window (or as tab titles in modern browsers).
An HTML document should contain only one <head> element and one <title> element.
5. Create the body element and some content within it.
After the closing </head> tag, and before the closing </html> tag, add the following markup:
<body> <h1> My First Web Page </h1> <p> This is my very first web page. It doesn't look like much, but it's a start! </p> </body>
The <body> element will contain the visible content of your website. Titles, text, images, videos: eventually, they all end up in between the two body tags. An HTML document should contain only one <body> element.
In addition to the <body> element, I’ve included an <h1> element and a <p> element. The <h1> element is generally referred to as a header element, and should be used for the page title. The <p> element is a paragraph element, used to break up text into paragraphs.
For SEO purposes, one <h1> element per page is a good practice. But HTML documents can contain tons of <p> elements. Sky’s the limit!
6. Add an image just for the hell of it.
Download this image and save it to the My First Web Page folder on your desktop.
Now link to it in your HTML document by adding the following tag after the closing </p> tag.
<img src="sample-image.jpg" />
Note that the <img> element is one of a few HTML elements that does not require a closing tag. It self-closes with />.
That’s because, unlike the paragraph and header elements, the <img> element doesn’t contain content. It links to it using its src (short for source) attribute. As you might guess, you can include as many <img> elements in a document as you want.
But whatever, dude. At this point, your markup should look like:
<html> <head> <title> My First Web Page </title> </head> <body> <h1> My First Web Page </h1> <p> This is my very first web page. It doesn't look like much, but it's a start! </p> <img src="sample-image.jpg" /> </body> </html>
7. Save the document.
Save the document with the name index.html into the folder you created in the first step called My First Web Page.
You can now locate and double click index.html to preview it in a browser, but it won’t look like much. Pretty dull, in fact. Pretty bland.
We need to add some style.
CSS: Style
1. In your text editor, create a new document by selecting New File from the File menu on the menu toolbar.
Wait – didn’t you do this already? You did! You’re doing it again.
2. Style some elements.
Add the following CSS code to your new document:
body {
background-color: #eeeeee;
font-family: Arial, sans-serif;
line-height: 1.5em;
color: #666;
text-align: center;
text-shadow: 1px 1px #ffffff;
padding: 40px;
}
h1 {
font-size: 2.0em;
color: #333333;
text-transform: uppercase;
}
p {
margin-bottom: 1.5em;
}
img {
border: 10px solid #ffffff;
box-shadow: 4px 4px 4px #ddd;
}
In CSS, HTML elements are targeted by their unique name (minus the surrounding < > characters), and styling is applied.
Each element has a list of properties that can be customized and defined. Examples of properties include font-family, font-size, background-color, border, margin, and padding.
All web browsers have their own defaults set for these properties, and by writing a CSS stylesheet and linking it to your HTML document, you essentially override the browser’s pre-defined styling.
In the code above, I targeted <body>, <h1>, <img>, and the <p> elements. I applied some minor customizations to the typography, I added a couple shadows, and centered everything on the page.
The syntax of CSS is element { }, with properties being defined between the curly braces. Each property definition gets its own line, and each definition must be closed off with a semi-colon (;).
3. Save the stylesheet
Go to File > Save, and save the document with the name style.css into the My First Web Page folder.
4. Link the stylesheet to your HTML document
We’re getting close now! Add the following markup to your HTML document (index.html) inside the <head> element, right after the closing </title> tag:
<link rel="stylesheet" type="text/css" href="style.css" />
This element links the CSS you just created to the HTML document you made in the first half of the tutorial. It works a little bit like the <img> tag.
5. Re-save index.html, and load it up in your browser.
Once you’ve re-save index.html with the style.css linked, locate it in the My First Web Page folder, and double click it to open it up in your default browser. It should look something like this:
And that’s that. You created a basic web page, and hopefully learned a bit about HTML in the process. Good job.
If you found this tutorial useful, please share it! If you hated it, tell us how much it sucked in the comments below.
Hey Rob, I love your user friendly and simple tutorial.
I have also created a similar tutorial on my site but I was mainly recommending using an HTML template and modify it, instead writing the code from scratch.
Your tutorial is definitely a good guide for starting out with HTML and CSS programming.