How to create your first basic webpage

Many of you have written to me asking how they can create their own webpage and upload it to neocities. So I have decided to write a little article telling you how I started my webpage.

To create your own webpage all you need is a computer, a text editor and a browser.

You don't need a new shiny computer. Any old but working laptop or desktop will work just fine. They are preferable over a phone because typing on them with big paws is much easier but if you only have access to a phone or tablet you will need to make do with it and it can work as well.

Any text editor will do. I personally like and use gedit but mousepad, sublime, notepad, kate, emacs or vim etc. will work as well. If you have only a phone available you can use e.g acode on android or textastic on an iphone.

You should play around a bit with the settings and preferences of your text editor. It should show line numbers and preferably also highlight your code.

In gedit, if you don't see any line numbers displayed go to Preferences → View and tick "Display line numbers". Now each line of code should display its own number at the left side. This is important when you hunt for bugs because the browser might give you a hint with a line number that can help you fix your bugs.

I also like to tick "enable text wrapping" and "do not split words over two lines" but this is my personal preferene of course.

Under Preferences → Editor I have ticked "enable automatic indentation" but this is not super important if you only use HTML and a bit of CSS. If you start programming with JavaScript indentation is more useful however.

The other text editors work in a similar way.

A basic template for our webpages

Now that we are ready to use our text editor we are ready to start coding because the text editor is where we write our code into. I start all my webpages with this template: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <style> </style> </head> <body> <script> </script> </body> </html> These lines stay the same in all my files. The first line <!DOCTYPE html> tells the browser that it is a HTML file.

Next we wrap our whole document into HTML tags <html> </html> It defines the beginning and end of our html document. Note that the closing tag has a forward slash!

The html document contains a head and a body. Again the head and body come with opening and closing tags. The head usually contains information about the document while inside the body you find what is then actually displayed on the webpage. <meta charset="UTF-8"> tells the browser that we are using the UTF-8 character set which is a standardized system for representing characters from all languages. <meta name="viewport" content="width=device-width, initial-scale=1.0"> ensures that your webpage looks good on both large screens (like laptop and desktop monitors) and smaller screens (like smartphones and tablets).

Inside the title tag you can write the name of your webpage. The title here is not displayed directly on the page however but only appears on the top bar. It is optional but makes finding your site much easier when you have many tabs open.

The style tags are for your CSS. But for our first little webpage we can do without.

Now we can finally start writing the text of our webpage. As I said before the body contains everything that you can see in a webpage.

Adding a header

There we have the headers, from <h1>, the biggest to <h6>, the smallest. Headers make your text bold and usually also bigger - even though this is of course not the case with <h4> to <h6>! Again headers have an opening and a closing tag so in your webpage you would for example write: <h1>Why all teddies should learn how to code in JavaScript </h1> The browser usually starts a header on a new line and any text after will again be on a new line.

Then you can simply start writing your text. If you later want to style it with CSS you can put your text into either a div (for division) or a p (for paragraph). I will write about CSS in a later tutorial.

To get a new line

To separate text from each other and get to a new line you can use <br>

Adding images

The img tag is used to add images to your webpage. Imagine you have a picture of yourself called me.png in a folder called images. Then you write: <img src="images/me.png" width="480" height="360" alt="a picture of me" title="a picture of me"> src stands for source. The images/me.png gives the path to your image. You need of course adjust it to your own one.

Pictures can come in different formats like png, jpg, webp, gif etc. but when you take a photo it usually already has the correct file extension, so you don't need to worry too much about converting them starting out.

To specify the width and height of your image is optional but lets the browser save a nice little spot for it right away. The text below can then stay in place while the picture loads and doesn't suddenly slide down when the picture finishes loading. If you don't know the size of your image you can just display it without width and height in your browser first. Then right click on the image in the browser and then on inspect. The first number is the width and the second after the x the height. Now you can add it to your image.

id named "pic". Inside your CSS style you would then write: #pic { max-width:480px; aspect-ratio: 480/360; height: auto; } and your HTML would simply be <img src="images/me.png" alt="a picture of me" title="a picture of me"> That way on a wide enough screen your image would still be shown like before but on a small phone it would be shrunk dynamically with aspect-ratio making sure the proportions stay correct.

The alt attribute shows the text on the screen when for whatever reason your image can't be displayed and it is also helpful for people who are blind as their program can read the text to them. The text should therefore describe what's actually on the picture.

Whatever you wrote in the title is displayed when you hover over the image.

Adding a link to another webpage

Another important thing to know is how to link to another page. What would the internet be without links?! It is really a collection of webpages that are all somehow linked to each other.
To link to another webpage you write e.g. <a href="https://brummipapiteddy.neocities.org">https://brummipapiteddy.neocities.org</a> This is called an absolute link. If you want to link to another page of your web presence you simply write the address relative from where you are. If the page is in the same folder you might write: <a href="mycodingadventure.html">my coding adventure</a> I think this is really all you need to know to start your first webpage. This is the fundamental stuff you need to understand. Everything else are just like add-ons. They are nice to structure your page better or to make it look nicer. But all you need to create a basic webpage is what I talked about above. So you see it is not difficult.

Looking at your webpage in the browser

Now it's time to look at your page with a web browser!

To open your file in the web browser of your choice, open your browser and then click ctrl + o. Now you can click on the name of your file and your webpage should appear in the browser. Alternatively you can type the name in the address bar starting with file:/// and adding the folder and filename like this: file:///home/coding/mywebpage.html

(This assumes that your webpage is called mywebpage.html and is in a folder called coding in your home directory.)

Now that you have looked at your page in your browser you can decide if you like it the way it is or if you want to make any changes.

For now your webpage is only visible to you on your computer. Therefore once you are satisfied you can open an account at neocities and upload your file to share your webpage with the world.

Getting an email address to upload your page to the web

To upload your page to neocities.org (or nekoweb.org, another site where you could host your webpage for free) you need an email address. At the time of writing proton mail https://proton.me is one of the few email providers where you can still get an email address without a phone number. Another one I found was https://atomicmail.io. It looks good too but I haven't tried it yet. I will try to monitor this as I know that it is crucial for teddy bears.

When you log into neocities, neocities first sends you a number code that you need to paste in before you are allowed to your site. This is not really ideal for a teddy who doesn't have permanent access to an email address. If that is you, opening a site at nekoweb.org might be preferable for you as at least for now they just let you in with a password alone.

Looking at other people's webpage code

Now that you have created your first webpage and even have your own web presence you might be curious how other people program their pages. If you want to see how a webpage is made, you can easily have a peek under the hood. Just click Ctrl+u (or right click on the page and then choose (view) page source) when you are on the page and you can see the code. Cool, eh?!

Well, that's all you need to start your own webpage. What are you waiting for? Once you have access to a computer, get started! I hope to see you on the web soon!

Yours truly,
Brummipapiteddy