Webpage to website

With a basic webpage now created, the next hurdle is to add multiple pages, and get them all linked together into a website of some sort.

Create a new page

First off we need a second page, with its own unique name. Let's call it about.html.

To quickly get this up, copy and paste the index.html file from the previous guide, and simply rename it.

Link the pages

Next up, creating our links. We're going the traditional route, with a navbar. So at the top of the body tag, above the other content, add the following.

<nav>
	<a href="index.html">Home</a>
	<a href="about.html">About</a>
</nav>

The key part of the snippet is the anchor/a tag, as this tells the browser to create the link to the files in the hrefs.

Style the navigation

In the style tag, add the following (I recommend at the bottom of what's already there). Then give the page a reload.

nav{
	background-color: white;
	border-bottom: 1px solid gainsboro;
	padding: 12px;
}
nav a{
	padding: 12px;
	text-decoration: none;
	font-weight: bold;
}
nav a:hover{
	background-color: black;
	color: white;
}

Give each link a click to check everything's alright. Doing this you may spot the nav styling is only on one page, oops, simple mistake. To fix this you'll have to open up the other HTML file, and add the styling in there too.

Make the styling global

With multiple pages up, imagine for a second if you had 10-15 more pages. How much of a pain would changing some styling be? Even just a simple colour change would be mega annoying, and time consuming. Open file, change style, save, and repeat...

Thankfully there's a simple solution to this problem, and it's actually best-practice to do this for every website!

External CSS

Our current internal stylesheet is now a hindrence as we've got multiple pages. So what we're going to do is take its content, and pop it into its own file.

How

First off, create a new file (same place as the .html files) called main.css, this will be our external stylesheet.

Next, open up one of the .html pages, and copy everything between the style tags, paste it into the CSS file, and save each file.

Now we've got the styling, we can get rid of the internal CSS entirely. Delete the style tags, and everything between from the .html pages, and replace them with the following snippet.

<link rel="stylesheet" type="text/css" href="main.css">

Reload, and voila! The site looks exactly the same. It's just easier to manage now.

Footer

To finish things off, why not add a quick footer proclaiming our copyright of the site?

Add the following snippet just before the closing </body> tag.

<footer>
	<p>© Aney 2022 | Made with ♥</p>
</footer>

And a little styling to the CSS file.

body{
	display: flex;
	flex-direction: column;
}
main{
	flex: 1 0 auto;
}
footer{
	background-color: black;
	color: white;
}

You may notice that body has already been used in the CSS, and that's OK thanks to the cascading nature of CSS. This can become a problem if you have the same selectors scattered around though, as it can begin to override styling. To avoid this problem I recommend having just the one location for each selector. So take the new body styling, and add it to the pre-existing body styling near the top of your CSS file.

We got a website

A little bit of content here, and there. A couple of styling tweaks, and a few more pages then you've got your very first website.

From here there are a few different directions. You could:

1. Follow along to the rest of my web-dev 101
2. Venture to the internet and learn everything you can about web development
3. Setup a server, pop what you've got on the worldwide web, and call it a day

Whatever you choose to do, I offer you the best of luck.