How to make a website - the basics
So today is Back in Febuary, Zawn96 crossed it's 1 year anniversy!
This was supposed to be finished by and posted to celebrate but I ended up not finishing it in time. It's taken me awille to finish (sorry!) but I'm excited to finally share it with you!! Enjoy!
--
I'm constanly frustrated with the fact that websites are nowadays seen as somthing the only businesses use. I, like many other
likeminded individuals, want too change this.
Back when the internet was just beginning to piece itself together, you'd see thousands of webistes created by people from all walks of life. Yeah, most of those sites looked like utter shit but they were all unique
and persoanl and you'll never
ever get that with a profile page on a social media platform like Facebook or Twitter.
Social media sites like Twitter, Facebook, Tik Tok etc should not be the extent of what expressing yourself on the internet can be.
But you didn't come here for a TED Talk! You wanna know how some idiot like me made a website.
Isn't making a website hard?
I mean, I'm pretty stupid, so if I can so can you!
//SECTION 000 -- THE BASICS - PLANNING + PREP//
Let's start with some terminoligy. This is a list of terms that I recommend familiarizing yourself with.
~ HTML ~
This is the main language you'll be using. I kinda see it as your way of defining a web page's structure - I guess it's a bit like the website's skeleton
CSS
This is the other language you'll be using. If the HTMl is the skeleton, CSS is the flesh and other non bone stuff that forms a web page.
Website
You already know what this is...right? You're on one right now!
Web Page
You're never gonna believe this, but a web page is a page on a website. Pretty crazy right?
Planning
So you wanna make a website? Alright, why?
A porfollio? Maybe you just want somewhere to tell the world about that one obsession you never seem to shut up about!
Great! But before you start clacking away on your keyboard like Stevie Wonder on his piano, I would recomend you do a bit of planning. You don't have to get too detailed but having a rough idea of how you want the site to look will make things a lot easier.
I did this, and in doing so, I only learnt what I needed to learn when I needed to learn it. It really made everything feel a lot less overwhelming. Plus, having something to aim for will just help in gerneral.
Stuff you'll need
- A computer (you could use your phone (I guess) but I'd advise against that)
- A source-code editor (I'll be using Notepad++ - recomend using if you're gonna follow this guide)
//SECTION 001 -- HTML BASICS//
So then, the first web page. We'll start with the html.
1. Stating the document type
Your first line of code will be this:
<!DOCTYPE html>
This line is used to tell the browser that the language of code is html. It's important that you remember to add this to the top of each page you create, otherwise the browser won't have a clue what you're on about!
2. Adding <html> tags
Next up are the html tags. The lang="en" part tells the browser what language the page is written in. Search engines will look for this when looking for pages in a certain language.
Don't want the language to be english (en)? Then replace it with one of the language codes from
this list!
<html lang="en">
Then below that add this line:
</html>
Note: Everything else from this point on
must be written inbetween these two tags!
3. Adding <head> and <title> tags
Heads up, the head tags are next!
<head>
</head>
There's a few things you can put between these tags, but for now we're gonna just add title tags.
<head>
<title>Put your title here!</title>
</head>
Whatever you write between these tags will be displayed in the browser tab for that web page - for example, this page's title is 'Blog - Zawn96'
4. Adding <body> tags
Under the head tags will be the body tags.
<body>
</body>
Most of the html for your web page will go in between these tags. We'll come back to these later.
Recap
Alright so far? Hopefully you have something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Put your title here!</title>
</head>
<body>
</body>
</html>
5. Adding heading tags
Time for some text! - specifically a heading. To create one you'll need to use heading tags. Heading tags come in 6 flavours:
<h1> - (the biggest)
<h2>
<h3>
<h4>
<h5>
<h6> - (the smallest)
Let's add one to our code.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Put your title here!</title>
</head>
<body>
<h1>I am a big heading</h1>
</body>
</html>
Preview (skip if you're not using Notepad++)
You might have been wondering if there's a way to view the webpage. Well if you were, you'll be glad to know there is! And if you were'nt...well...I'm gonna tell you anyway!
First you'll need to save your work (by either clicking the floppy disk save icon or by pressing the 'Ctrl' and 'S' keys simultaneously). If you haven't saved yet, you'll need to pick a location and name for the file. Neither matter so it's up to you - just make sure to add .html to the end of the file's name.
Once that's done, click on 'File' and then 'Open in Default Viewer'. This should open the file in your default browser. If you'd rather it didn't, you can instead click 'View' then select from the list that appears when you hover over the 'View Current File in' option.
And voila! You can now see your web page in all it's glory!
I'd highly recomend doing this whenever you make changes - it makes it a lot eaiser to figure out the cause of any errors you make!
6. Adding paragraph tags
Ready for some more text?
<p>
Paragraph tags arn't imperative for adding text but they'll make stylizing the text much easier.
Let's add a few to our code.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Put your title here!</title>
</head>
<body>
<h1>I am a big heading</h1>
<p>words, words and even more words!</p>
<p>more words? whaaaaaaa</p>
</body>
</html>
Well we've got some text now but our web page looks pretty bland, right? Some CSS will fix that!
//SECTION 002 -- CSS BASICS//
Time for some
style!
Create a new page, save it and add .css to the end of the file's name instead of .html - I'd reccomend using the same name as the html file.
Then you'll need to add one final bit of code to the html file:
<link rel="stylesheet" href="tut_style.css">
Place this somewhere between the
<head> tags and replace "tut_style.css" with the name of your css file.
1. Changing the background
There's a couple ways you can change the background. For now. we'll look at the simplest way.
{background-color: blue;}
Your background should now have changed colour! If you want a specific colour you can use hex codes instead.
{background-color: #24e9ec;}
2. Changing the heading colour
Pretty similar to what we've just looked at.
h1 {color: purple;}
//CONCLUSION + FURTHER READING//
So that's that! This is just a taste of what you can do! I might add to this in the future or even make a new guide with some slighlty more adavnced stuff.
I hope you've enjoyed reading this and find it useful!
Wanna know more? Here's a list of sites I recomend checking out:
- W3Schools -- https://www.w3schools.com/html/html_intro.asp
Follow me on Neocities!:
Zawn96| Send me an e-mail!: zawn96webmaster@gmail.com
