• Home  / 
  • HTML and CSS
  •  /  Building a Web Page with HTML & CSS for Complete Beginners

Note: If you know anything at all about HTML and CSS, don’t bother reading this, it’s a guide for the uninitiated, technophobes, luddites, computer-illiterates, anyone who is more comfortable with a pen and paper than a keyboard and mouse. If making a web page seems like brain surgery to you, then this is the article for you.

What you need to know

The only prior knowledge I will assume is that you’ve used a computer before, you’re familiar with using a keyboard and a word processor, and you’ve at least seen a website. Other than that, I assume you are completely ignorant!


The Basics

When you visit a website (for example the one you’re reading now), you see a page in your web browser (the program you use to access the internet) , containing text, images and maybe some other things like videos, music etc. This page may look similar to a page you could put together in a word processor (like Microsoft Word), but alas, it’s not quite as simple as that on the web.

In order to display a page correctly, the web browser needs to know about the structure of the page, e.g. Which part is a heading, which part is a list, which part is an image etc. To give the browser this information, we need to write the page in a language the browser will understand. This language is called Hypertext Markup Language (HTML). The browser translates the HTML into a readable document which is displayed on the web.

What HTML Looks Like

HTML uses ‘tags’ to identify different parts of a page. A tag is a sequence of one or more letters contained within angle brackets, for example <p> is a paragraph tag. Most tags come in pairs, so you have an opening tag <p>, and a closing tag </p>. Closing tags are always the same as the opening tag, but with a forward slash immediately after the opening angle bracket.

Each pair of tags tells the browser what type of data to display on the page. For example, a pair of paragraph tags indicates that what comes between them is a paragraph of text, and should be displayed on the page as such.

Note: Some tags are ‘self-closing’. This means that the tag doesn’t actually contain any text to be displayed on the page, so a closing tag is not required. However, if you do omit the closing tag, you need to insert a space followed by a forward slash directly before the closing angle bracket. e.g. the ‘line-break’ tag <br /> doesn’t contain any information to be displayed on the page, it just tells the browser to insert a line break at that point.

Getting Started

To write an HTML document, it’s easiest to use a plain text editor such as Notepad. There are many code editors developed specifically for creating and editing HTML pages, but until you’re a bit more familiar with HTML, it’s probably best to keep it simple.

Open Notepad and save your file with an appropriate filename. For this example we will call it ‘example.htm’

Note: HTML files use the file extension .htm to let the browser know that it is reading an HTML page (.html is also acceptable, but since most file extensions are three letters (e.g .doc, .jpg, .mp3), I prefer to use .htm)

The first thing you need to tell the browser is that this page contains HTML. Web pages can contain all sorts of different languages, such as PHP, Javascript, ASP.NET etc. but if you include a pair of HTML tags, the browser will know that everything between them is HTML.

<html>

</html>

Next, the page must contain a HEAD section. This contains information that isn’t displayed on the page, but tells the browser various things about the page, such as what it’s about, who wrote it, and whether there are any other files this page needs to refer to in order to display and function properly.

There are many HTML tags which can appear within the HEAD section, but for the sake of simplicity we’ll just address one – the TITLE tag. This contains the title of your page, which is displayed in the title bar at the top of your browser.

<html> 

<head> 

<title>HTML & CSS for aliens, old-age pensioners and single-cell organisms</title>

</head>

</html>

Now we can get some actual content onto the page. For this we use the BODY tag. Everything between a pair of BODY tags is actually displayed in the browser. Let’s start with a simple example where we just display a paragraph of text.

<html> 

<head> 

<title>HTML & CSS for aliens, old-age pensioners and single-cell organisms</title>

</head>
<body>

<p>Hello World</p>

</body>

</html>

Let’s view the page in a browser. Open your web browser, go to File>Open and click the ‘Browse’ button to browse to your file – example.htm – Click Open, and you’ll see the web page you created. Congratulations, you’re a webmaster!

Ok, so it’s not that exciting, let’s give it a bit of style.

Cascading Style Sheets

HTML tells the browser what data to display on the page, but it doesn’t tell it what that data should look like, e.g. What color the text and background should be, what font to use, how big the text should be etc. If we leave the HTML file as it is, the browser simply uses its default styles, which for most browsers means black text on a white background in Times New Roman, or a similar font. Pretty dull. But we can specify how the page should look using Cascading Style Sheets (CSS).

CSS is another language, so it is written differently from HTML, but again it’s written in plain text, so open a new file in Notepad and save it as ‘styles.css’ (.css is the file extension for CSS files)

A CSS file contains a list of styling rules that tells the browser what certain HTML elements should look like. For example, you can specify that all text that appears within paragraph tags should be displayed in red, Arial font. Let’s see how that works.

p {color: red; font-family: Arial;}

Here, ‘p’ is the HTML element we want to style, and we put the desired styles within curly brackets, each rule separated by a semi-colon. This rule will make any text between paragraph tags display in a red Arial typeface. To see this in action, we need to link the CSS file to the HTML file we want to style.

I mentioned earlier that the HEAD section contains references to any other files the HTML page needs in order to display properly. This is where we refer to our stylesheet, using the LINK tag.

<html> 

<head> 

<title>HTML & CSS for aliens, old-age pensioners and single-cell organisms</title>
<link href=”styles.css” type=”text/css” rel=”stylesheet” />

</head>
<body>

<p>Hello World</p>

</body>

</html>

The LINK tag tells the browser to link to another file. The href attribute tells it which file to link to (href=”styles.css” means “please link to the file called styles.css“). The type attribute tells the browser what type of file it is linking to (in this case type=”text/css” means we are linking to a text file containing CSS). And the rel attribute tells the browser the relationship between the current file and the file we are linking to (here rel=”stylesheet” means “we are linking to this file because it is a stylesheet and we want to apply the styles in it to our HTML page”). Don’t worry if you don’t fully understand this line, it’s the same for every stylesheet you want to link to, you just need to provide the right file name.

This LINK tag tells the browser to look at styles.css and apply all the rules in that stylesheet to this HTML page. Save the file and refresh the page in your browser and you should see that ‘Hello World’ is now displayed in red.

That’s all very nice, but on a real web page, it’s very unlikely that we’ll want all of our paragraph text to be styled exactly the same. So we need to use the HTML ‘class’ attribute to differeniate between elements of the same type, which we want to be styled differently. Let’s say we want to display another paragraph containing, for example, a date. We want the date to appear in blue, so we need to define a new style for dates. First let’s add the date paragraph to the HTML.

<html> 

<head> 

<title>HTML & CSS for aliens, old-age pensioners and single-cell organisms</title>
<link href=”styles.css” type=”text/css” rel=”stylesheet” />

</head>
<body>

<p>Hello World</p>
<p class=”date”>Monday, 27th April, 2009</p>

</body>

</html>

I’ve added the date paragraph and used the ‘class’ attribute to apply the class “date” to this paragraph. This says to the browser “This paragraph is not just any paragraph, it’s a ‘date’ paragraph”.

Note: You can use any class name you like, but it should ideally describe the type of data contained in the tag. e.g. If your paragraph tag contains a price, you might use class=”price”.

Now in our stylesheet we can use a CSS ‘dot selector’ to tell the browser how to display ‘date’ paragraphs. This means you put the tag name, followed by a dot (period/full-stop), followed by the class name:

p {color: red; font-family: Arial;}
p.date {color: blue;}

Now all p tags without a class attribute will still be displayed in red, but any p tags with class=”date” will be displayed in blue.

Specificity

There’s an interesting feature of CSS known as specificity, which refers to how specific a rule is. More specific rules will override less specific rules. This subject can get pretty complex, but using our simple example, rules with a dot selector (e.g. ‘p.date’) are more specific than rules applying to an HTML element by itself (e.g. ‘p’). So our rule that makes all paragraph text display in red will be overridden by the more specific rule that makes all ‘date’ paragraph text appear in blue.

Further Reading

This introduction barely scratches the surface of creating a fully-functional web page, but hopefully it has given you a better idea of how a web page works, and this knowledge should serve you well as you continue your HTML journey. The following articles may be of interest:

How to make a website using HTML

Introduction to HTML

Why code by hand

About the author

Ben Hunt

Ben has over 20 years' experience in web design and marketing, and is one of the most influential figures on the subject of effective web design. He has written a bunch of books and spoken at multiple conferences internationally.In 2015, Ben created Open-Source Marketing, which promises to turn the practice of marketing upside down.. Find out more at http://opensourcemarketingproject.org

Ilonka - 4 years ago

Dear Ben
That is great information! I have been working on websites for quite some time now…. finding my way in a checkered learning environment I refer to as ‘copy & paste code’ combined with ‘fly by the seat of yr pants’.
Finally, a clear explanation of what I’ve been staring at that will help me get to the next level, I’m sure, so your article is not just for the completely initiated, it’s helpful info for the ‘run before you can walk/necessity is the mother of invention’ types like me.
I would be interested to learn more about your products & services
Thanks again!
Ilonka

christopher - 4 years ago

This is a great explanation of understanding HTML and CSS….but, don’t you find it easier with all the open source CMS to get a website up right away?? rather than trying to write one from scratch?

    Ben Hunt - 4 years ago

    Yes, generally I do advise using a CMS like WordPress these days. There are benefits of coding your own site, and I still do it occasionally when I want complete control, but most of the sites I build today are on WordPress.

      Tingli - a couple of years ago

      Agreed. WordPress theme is much more convenient to build websites on.

Active Computing - 3 years ago

Joomla. The easiest CMS I’ve come across.

sandeep - 3 years ago

thakzz

michael - 3 years ago

i dont understand where to put the css tags inside of the code so that they effect the html.

elisa - 3 years ago

Ben you explained it beautifully!!
wanna read more ..

Islam Muslim - 3 years ago

Thank’s for this (Building a Web Page with HTML & CSS for Complete Beginners) great tutorial. I was having a hard time with those.

Omar Chávez - 3 years ago

hola
Soy Omar Chávez
San Salvador, El Salvador
Me gusta pagina web y html & css pero quiero aprendo html.

    Ben Hunt - 3 years ago

    Hi. I hope you find the help you need.

Cuppa - 3 years ago

Great stuff here for begginers. well written article.

Snigdhadeb Samanta - a couple of years ago

I’m just a beginner and learning w3 level html. The one problem is i dont know the basic of java script. but i’m already on my way to learn html. what should i do?

Thenie - a couple of years ago

I still prefer WordPress over simple CSS/HTML website, because it’s much easier & better! Anyway good article, Ben.

Tingli - a couple of years ago

Easy to understand. THX!

Verlene - a couple of years ago

I have been bгowsing on-line grеatеr than 3 hours as
of latе, but I by nо means discoѵered any interesting article like yours.
It’s pretty value sufficient for me. In my opinion, if all webmastеrs
and bloggers made just right content material as уou diԁ, the net will probably be a
lot moгe helpful than eveг before.

Carmella - a couple of years ago

Hello! I just wanted to ask if you ever
have any trouble with hackers? My last blog (wordpress) was hacked and I ended up losing several
weeks of hard work due to no back up. Do you have
any solutions to protect against hackers?

    Ben Hunt - a couple of years ago

    Hi Carmella.

    I have had problems with WordPress sites being hacked in the past, but it would not be sensible for me to disclose details.

    Check out our WordPress Security Essentials article.

Comments are closed