In this lesson we will :
- Create an account on neocities
- Complete the basic introduction tutorial
- Begin designing our own website
HTML is the language which will hold the content and the structure of our webpage. If you have not done so already, register an account at neocities. There is a beginner's tutorial there I would highly recommend ensuring you have completed.
Once this is done, create a new directory on your computer. Into this directory we will add two files :
HTML is a rather forgiving language but it will help if we keep our code looking tidy. How you do this is upto you but for me, I'm going to stick to tabs! A basic example will look like :
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Title of Page</title> <link href="/style.css" rel="stylesheet" type="text/css" media="all"> </head> <body> <h1>Welcome to my website!</h1> <marquee>Site Under Construction!</marquee> <p>This is a simple example!</p> </body> </html>
We will discuss what style.css does in a future class. If we manage to get this working correctly, open the index.html file with your web browser. You should be greeted with the following!
Let's go through this code and see if we can understand what's going on.
Firstly everything is wrapped in
This understandably just tells the computer we're writing HTML!
Next we can see the code is grouped into two sections; head and body.
What goes in the head?
The head contains all the bits of the webpage that describe things about the whole page and for things outside the browser window.
<title> tag has changed the title in the tab and titlebar of the browser.
We'll come back to the other commands.
Sufficed to say, just copy and paste them for now.
What goes in the body?
This is where the content of your website should go. There are many(!) tags we can use. Let's learn a few of the more common and useful ones.
- ol / li
- ul / li
How to structure your page
Unless we just want lots and lots of text, which admittedly isn't the worst website design, we're going to need to learn how to structure a page.
For this we will use
These define divisions on our page, allowing us to group content in a useful way.
If we want to do this, we'll need to create div tags for all these bits.