Ever wondered how websites are made?
It’s easier than you might think. In fact, by the end of this post, you’ll have coded your first webpage.
All you need is a notepad type app, the simpler the better.
Websites are structured in a code call HTML (‘Hypertext markup language’) and made to look good with something called CSS (Cascading Style Sheets).
You write the HTML first and then add the CSS at the end.
Open a blank document immediately go to save as. It will have untitled.txt in the file name. Choose a name for your document and replace the .txt at the end with .html
With that done, let’s do some coding!
You write html instructions, called tags, inside these symbols < > The tags descibe the structure of the webpage, and you mark the end of each section by “closing” the tags. </>
Don’t worry if this doesn’t make sense, yet. It’s one of those things that’s easier to learn by doing. Follow the steps and you’ll pick it up as you go along!
At the top of every HTML document is
This is called the declaration. It’s not technically a tag, it just tells the browser what type of code to expect. Type this in the top line of your document.
3. An HTML document is split into 2 main parts: the head and the body. The head section contains something called metadata. That means data about data.
In this case, information about the code in your document. Things like: the author, the title and description. In our example we’ll just put a title tag for our web page. This will apear in the tab at the top of the page when you open your code in your web browser (e.g. chrome, edge or firefox). We start with the <head> tag to tell the browser that everything inside the tag is metadata, and then we place the title tag inside of it and the title inside the title tag. Then we close all of the tags. Like this:
<title>Try it out!</title>
Can you see that the content “Try it out!” is inside the <title> tag and all of that is inside the <head> tag?
4. Next we move onto the main body of your website. We’re going to keep it simple. There won’t be many different tags and I’ll explain each one as we go along, putting comments <!- – Like this. – -> Anything inside <!- – these marks – -> will not affect your code. They’re often used by coders, working together, to tell each other what their code is meant to do.
<body> <!-- First we tell the browser that we're onto the main course by opening the body tag -->
<h1>We are the innovation Lab</h1> <!--h1 is a heading, the biggest one you can have, you can experiment by trying out h2, h3 or even h4. Feel free to experiment by changing the text inside the <h1> tag -->
<div> <!-- This marks a "division" a section in your website that you want to block together -->
<p>It's get online week, so try your hand at HTML and CSS</p> <!-- p is a paragraph, you put the text that you want to display between the <p></p> -->
<p>It's easier than you think!</p>
<p>Why not experiment and add a few paragraphs of your own?</p>
<p>Get stuck in, you literally can't break it. </p>
<p>You don't even have to be online, although the picture in the next div, and the link we're going add won't work if you're not online.</p>
</div> <!--Don't forget to close the div tag -->
If it’s easier, feel free to copy and paste the code in the boxes into your document and then edit it to see how it changes your webpage.
To see what the code does, close the </body> and </html> tags and save your code. Find where you saved it and double click to open it (you don’t have to close the notepad document) it will open in your internet browser.
Try changing something, like the text inside the heading tag <h1>, save the code, go to your internet browser and refresh the page (you can do this by pushing the F5 button on your keyboard.) You should see your website change!
Pretty cool, huh?
5. Let’s add a bit more. Start by opening a new <div> tag.
We’re going to add a link. To do this we use the <a> tag. The <a> tag is unusual, because we put the link INSIDE the tag as href (hyperlink reference) = “www.link.com”, this is because the link is separate to the clickable words or picture that will show on our website. In my example I use a picture as the clickable object, but you can use words by putting any text that you like in the <a> tag
<!--This is a link to our website where you can find out more about what the innovation lab does.-->
If you want to make a basic link, put some text after the > but before the </a> tag closes. I’m going to use a picture, which has its own tag: <img> src is the image source, in this case the image is coming from the storage area on the innovationlab’s website, but you can use it. In fact, as long as you know what the source is (where the image is saved), you can use pretty much any picture that you find online. You’ll also see a style= part to the code, this is our first bit of CSS. It tells the code how big the picture should be and where on the page it should show up.
img src="https://innovationlabnetwork.com/wp-content/uploads/2020/09/site-header.svg" style="height:300px" "max-width:100%" "alignment:center;">
When we’re happy with the coding for the image, we can go ahead and close the link tag.
And, in fact, the body (if you haven’t already) marking the end of our html coding.
6. Save your code and take a look at how it looks in your browser. Well done. Technically that is a working website. You could host it online and anyone could come and see it. Now would be a good time for a well earned cuppa. Next we’re going to use CSS to make it look good.