Creating an Old-Web Inspired Site
by trainsarecool in Design > Websites
256 Views, 2 Favorites, 0 Comments
Creating an Old-Web Inspired Site
Have you ever wanted to make a website without using a big, online website builder that costs money and has so many ads that it slows your computer down? If yes, then this is the right tutorial! Here I will show you how to create a website easily and for free, with no stress on your computer! I am creating this Instructable for the Making History contest because I think it fits in the Later 1900s category, because people started creating websites in the 1990s.
Supplies
- Computer
- Text editor
- File application
- Knowledge of H.T.M.L. and C.S.S.
What Will Your Website Be About?
The first step is to decide what you want to put on your website. This requires some thinking. (Obviously!) Once you have done all the thinking you want, then it is time to build your website!
What Editor Should I Use?
If you don't already know which text editor you will be using, then here is a list of some:
Operating System: Editor(s):
MacOS: TextEdit, Terminal
Windows: Editpad Lite, Editpad, Notepad, Notepad++
Chrome: Text
Linux: Nano, Vim, ed
Starting to Code
Once you have finished Step 1 and Step 2, you can start coding. I am coding in H.T.M.L. I have a Chromebook, so I am using Chrome Text. Press the "New" button to create a new file. Then, press either "Save" or "Save As" to download the file. When the Files app shows up, change the part of the name before the dot to "index", and change the part after the dot to "html". This will make your new file be called index.html, so that your text editor, depending on which one you use, might recognize it as an H.T.M.L. file and turn on special features like different elements showing up as different colored text, or automatically adding closing tags for you. This file will be your homepage.
Add the Tags
Add these tags to start your code:
You can use this code as a journal for your website. Just fill in the placeholder text!
Adding an "about Me" Page
Make sure you press "Save". Then repeat Step 3, but name the file "about.html". You can then code it so that it tells other people about you! After this, you can add as many other pages as you want to.
Publishing Your Site on the Web
To make our site available to everyone, we can use Neocities (https://www.neocities.org), a web-hosting site created after the death of Yahoo!'s Geocities, another web-hosting site. Just go to Neocities, and fill in the "Username" blank with the name of your site. Then fill in "Tags" with some hashtags about your site. Fill in "Password" with a password to log into your Neocities account, and then fill in your email address. Finally, do the captcha and sign up! Neocities is completely free to start, but some features and file types are unavailable unless you become a Supporter, which gives you access to these features when you pay $5 a month.
Adding Your Pages
Once you have your site, go to your index.html on Neocities, then on the one that you made using your text editor, copy everything and then paste it into the Neocities text editor. The reason you shouldn't use the Neocities text editor to test your code is because once you press "Save", then the whole world is able to see what you just put on your site. After you import your homepage, go back to the editing dashboard and select "Upload". It will bring up your Files app, where you can now upload your About page and the other page(s) that you created.
Adding a Navigation
Make sure that, at least on your homepage, you add a list of links, like this:
Or, you can change the links to buttons, like this:
Just make sure that you change the "/page" and "Something" to what you actually made.
Ta-da!
Ta-da! Now you have a finished website that everyone can see! Make sure you update it regularly so that everyone that looks at it will see a better version of your website!