Building websites is one of my favourite pastimes. I built this website to share some of my thoughts about coffee and then I started to share some coding tutorials on the site. While building a website can get complicated, I believe that anyone who puts in some time can create their own web page from scratch. You can build a web page that shows some of your interests to the world on the internet.
In this guide, you're going to join me in an exciting journey. We are going to build a web page together that shows some information about yourself. To follow the tutorial, you should have a basic understanding of how to create and open a file on your computer.
Our web page will:
- Show some text about who you are.
- Display some of your interests.
- Show a photograph you have taken.
Step 1: Create a HTML file
We're going to use something called HTML to build our web page. HTML is a programming language that lets you tell a computer how you want a web page to appear. Before we can use HTML, we need to create a file to write our code in.
Your first task is to create a file called index.html on your computer. You can do this by opening a text editor like Notepad (Windows) or Text Editor (Linux). Then click "File > Save As" and save your file as index.html.
Now you have a file to write your code in.
Step 2: Show off who you are
HTML uses tags to convey information. A tag is an instruction that your browser reads. Some tags let you show text. One tag lets you make an image. Certain tags let you make a list. Another tag lets you make text bold. A tag looks like this:
Welcome to James' Website
You can think of tags like Lego blocks. Each tag adds something to the page. Lots of tags together builds something great.
<h1> is the tag. The
</h1> tag tells our code that the tag has finished. Our
<h1> tag above creates a heading. h1 means the biggest heading. You can change the heading to whatever you like!
The tag above is the start to our web page. Add this text to your index.html file. Then open your index.html file in your browser (the thing you use to access the internet). You can do this by finding your index.html file in your Files and clicking "Open with Firefox" or "Open with Internet Explorer" depending on the browser you use.
Here is what our page looks like right now:
Now let's add some text to tell the person looking at your page about yourself.
I am James. I like building websites like this one. I also enjoy drinking coffee, taking photos, and going for walks.
<p> tells the browser to create a paragraph (basically, some text). The text between the
</p> tags appears as a paragraph. Of course, you should change the text to be about yourself. You're not making a web page for me! It's your web page!
Click the little circle arrow in the top left hand corner of your browser (the "refresh button"). You should now see a page like this:
Before we continue, we have to make a wee change to our index.html file.
You should change the file so it looks something like this:
There's a lot going on here. Let's break it down:
<!DOCTYPE html>tells your browser you have made a HTML document.
- All code on your web page should be added to a
<html>tag (aside from the DOCTYPE tag).
<title>tag sets the title of your page. The title appears in your browser tab name.
<head>tag is where information about your web page goes. We'll add styles to this part of the web page later on.
<body>tag is where the parts of the web page you see go.
Why do we need all of these fancy tags? They give our page a clearer structure. You don't need to memorise these tags. You just need to know that they should be on your web page in the order above.
Step 3: Show your interests
A lot of people (including myself!) share some of their interests on their website. Sharing your interests is a great way to help people learn about you.
Write down a list of your interests. Mine include:
We're going to turn your list of interests into something that your browser can show.
Add this code below the
<p> tag that you added to your index.html file earlier:
Open your index.html file. You should see a new list that looks like this:
We are using three tags here:
<h2>: Creates a heading smaller than an
<ol>: Creates a list with bullet points ("ol" means ordered list, or a list with numbers).
<li>: Creates an item in a list ("li" is short for "list item").
Now I want you to change the list above so that it shows all of the interests you wrote down earlier. Try to add at least three interests to the list.
Step 4: Show a photograph
Let's finish off our web page with a photograph.
To do this, we're going to introduce one more tag: the
<img> tag lets you show an image on your page.
To add an image to a page, you must first have an image to add. Before you continue, you should find a photograph you have taken and add it to the same folder as your index.html file. If you don't have a photograph of your own, you can download one from the internet. Maybe download a photograph of your favourite town or city. Or of a cat you like.
Or you can use this one that I took:
Once you have a photograph in the same folder as your index.html file, add the following text to the end of your index.html file:
Replace "your_photograph.png" with the name of the photograph you are using. Then replace "Describe your photograph" with a little bit of information on what is in the photograph. We add this so that people with screen readers can understand what is on a web page.
<img> tags don't need an end tag (
</img>) like headings, paragraphs, and many other tags do.
Refresh your page again. You should see an image at the bottom of your page:
We see our photo. But it's huge!
We can make the photo smaller by setting a height and width:
<img src="your_photograph.png" alt="Describe your photograph" height="500" width="500 "/>
We set the height of our image to 500 and the width to 500.
Let's see what happened:
Our image is now much smaller!
Step 5: Make your web page pretty
You will probably have noticed your web page is black and white with a coloured photo. We can spruce it up and make it look more colourful and pretty. To do so, we're going to use something called CSS. CSS is a way of adding styles to a web page. You can think of HTML as a sketch and CSS as the paint.
Add this text below the
<title> tag we added earlier:
<style> tag tells our browser we are going to include some CSS (or, in other words, some styles).
In our style tag we have written two rules. Let's explain the first one in detail:
The "html" is the tag we want to change. "html" is the whole web page. The background-color: skyblue; tells the browser to set the background color of the "html" tag (which means our whole web page) to sky blue. We use the curly brackets to tell the browser what rules apply to what tags.
We change the font of "html" to Helvetica which means any piece of text on our page will use Helvetica. Helvetica looks much prettier than the default font.
In the "body" rule, we add a white background that only applies to the body tag (not the html tag, which is the whole page). We add 10px padding which means there is a 10 pixel gap between our content and the edge of the box.
Finally, we add a 20px border radius. This is a fancy way of saying "make pretty rounded corners for our box."
Refresh your page. You should see something a lot more colourful and pretty:
Look! Your page has colour.
You have just learned the basics of how to style part of a web page.
Step 7: Congratulate yourself
Guess what? You have made your own web page! Take a photo of it and show it off to your friends and family. Your home page shows a bit of information about yourself, a photo, and some of your interests.
Do you want to add more to your web page? There's good news for you. All web pages follow the same rules of using tags that we discussed so everything you learn from here on in will build upon what you already know.
With HTML, you could:
- Add numbered lists to a page.
- Add links to other pages on your website.
- Make another web page.
- Make some text bold and some text underlined.
With CSS, you can:
- Change where pieces of HTML appear on a page.
- Change the colour of pieces of your web page.
- Make parts of your page a certain size.
All of the websites on the internet are built on the same building blocks you are learning.
Did you have fun? I sure did. I used the same building blocks to build this website. I hope that you keep learning HTML and CSS: the possibilities of what you can learn are endless.
Comments and reactions
Respond to this post by sending a Webmention.