🌱 Make a Website
Web Guide/The Very Basics: Difference between revisions
Created page with "{{GuidePage|title=The Very Basics|theme=denim|section=🌱 Make a Website| things here at some point!!}}"  |
No edit summary  |
||
(15 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
{{GuidePage|title=The Very Basics|theme=denim|section=🌱 Make a Website| | {{GuidePage|title=The Very Basics|theme=denim|section=🌱 Make a Website}}__TOC__ | ||
Let's do the thing. First of all, make sure you have a '''desktop computer''' or laptop (i'm just going to say "desktop" from now on to save time); you can ''technically'' follow along using a mobile phone or iPad but, for the time being, this guide won't cover how to do that. If you don't own a desktop, pretty much every public library will have some that you can use for free. | |||
 | |||
The first thing you'll need to do is create a folder on your computer, which will contain all the files for your website. If you don't have any experience working with files and folders, [[Web Guide:Sidebar/How Files & Folders work|now is a good time to learn]]! | |||
 | |||
== Setting Up Your Website == | |||
{{#widget:Guides/PlatformSwitcher}} | |||
<div class="platform windows"> | |||
=== Windows === | |||
</div> | |||
<div class="platform macos"> | |||
=== macOS === | |||
#Â Open the Finder and pick a folder to place your new site into (it doesn't really matter where, "Documents" is a solid choice). | |||
# Press <kbd><kbd>⌘</kbd> + <kbd>Shift</kbd> + <kbd>N</kbd></kbd> to create a new folder. | |||
# Give it a name and press return. | |||
# Now, open TextEdit. | |||
#If it doesn't start a new document automatically, click "New Document" or press <kbd><kbd>⌘</kbd> + <kbd>N</kbd></kbd> to do that. | |||
# HTML is a plain text format, so we need to go to Format > Make Plain Text (or press <kbd><kbd>⌘</kbd> + <kbd>Shift</kbd> + <kbd>T</kbd></kbd>) to make TextEdit treat it as such. | |||
# Go to File > Save (or press <kbd><kbd>⌘</kbd> + <kbd>S</kbd></kbd>) to save the file. It should pop open a dialog asking you where to save the file. [[File:MacOS save screenshot.png|thumb|right|alt=A screenshot of the macOS save dialog. The "Save As" field is set to "index.html" and the "Where" field has been expanded and the "website" folder has been selected|This is roughly what you want it to look like]] | |||
# Where it says "Save as:", type <code>index.html</code>. In the "Where:" field, navigate to the folder you created earlier (you might need to click the little down arrow to get a proper file picker). | |||
# Click Save. If it interrogates you about the .html extension, select "Use .html". | |||
# You're ready to start editing your website! | |||
</div> | |||
<div class="platform linux"> | |||
=== Linux === | |||
fuuckkk... uuhhhh.. okay. uh | |||
 | |||
So there are a lot of different Linuxes and they're all slightly different in completely inscrutable ways, so it's going to be difficult to be as precise as you would with other platforms. I am going to assume that, because you're using the fucking nerd operating system for fucking nerds, you know how to create files and open a text editor on your specific flavour of Linux. | |||
 | |||
# Create a folder somewhere on your computer | |||
#Open a text editor (such as Kwrite, Mousepad, uh, Text Editor) and create a new document | |||
# Save the document as index.html within the folder you just created | |||
</div> | |||
<div class="platform haiku"> | |||
=== Haiku === | |||
# Find a folder to place your new site into (your home folder will work fine). | |||
# Create a new folder, call it whatever you want. | |||
# Open that folder, right click and select <code>New</code> → <code>text file</code> and call it <code>index.html</code>. This will be your site's homepage. | |||
# Right click the newly created file and select <code>Add-ons</code> → <code>FileType</code>. | |||
# In the window that appears, type <code>text/html</code> into the "File Type" field and then close it. | |||
# You can now right click and open your new file in a text editor like Pe (''not'' StyledEdit). | |||
 | |||
Note that WebPositive's developer tools are currently fairly lacking, so you may want to install a browser like Falkon from the HaikuDepot. | |||
</div> | |||
 | |||
== Adding Things == | |||
 | |||
[[File:Blank Page.png|thumb|right|alt=A screenshot of my empty index.html page opened in a web browser.|How exciting!]] | |||
 | |||
At this point, you should have a folder with a file called "index.html" inside it.<ref>By convention, the index.html file will be served up when you don't ask for a specific file. A "home page", if you will.</ref> You can double click the file in <span class="platform macos">the Finder</span><span class="platform windows">File Explorer</span><span class="platform linux">your file manager</span><span class="platform haiku">the Tracker</span> or drag its icon onto the "new tab" button on your web browser. You should see an entirely blank page. We haven't put anything in the file yet, so that makes sense. | |||
 | |||
Let's put some stuff on our page. For the rest of the guide I'll be making my website about my two cats, but you can of course [[Web Guide/What Do I Put On My Website?|make your website about anything you want]]. | |||
 | |||
Switch back to <span class="platform macos">TextEdit</span><span class="platform windows">Notepad</span><span class="platform linux">whatever text editor you're using</span><span class="platform haiku">Pe</span> and just start typing some stuff: | |||
 | |||
<pre> | |||
Hello! This is the homepage of Basil & Onion. They are the swamp creatures that live in my house. | |||
</pre> | |||
 | |||
Press <kbd class="platform macos"><kbd>⌘</kbd> + <kbd>S</kbd></kbd><kbd class="platform linux windows"><kbd>Ctrl</kbd> + <kbd>S</kbd></kbd><kbd class="platform haiku"><kbd>Alt</kbd> + <kbd>S</kbd></kbd> to save and then reload the page in your web browser. Hopefully, what you wrote should show up on the page! | |||
 | |||
[[File:Website with Text.png|thumb|center|alt=A screenshot of two windows, the first being a TextEdit window with the above text written in it, the second a Safari window showing the same text in a serif font.|500px|That's a website!!!]] | |||
 | |||
== Next Up == | |||
 | |||
<!-- pe and most linux text editors are actually pretty good --> | |||
<div class="platform macos windows"> | |||
* Tired of <span class="platform macos">TextEdit</span><span class="platform windows">Notepad</span> yet? Now is a good time [[Web Guide/Text Editors|install a nicer text editor]]. | |||
</div> | |||
{{GuidePageEnd}} |
Latest revision as of 13:57, 6 February 2025
Let's do the thing. First of all, make sure you have a desktop computer or laptop (i'm just going to say "desktop" from now on to save time); you can technically follow along using a mobile phone or iPad but, for the time being, this guide won't cover how to do that. If you don't own a desktop, pretty much every public library will have some that you can use for free.
The first thing you'll need to do is create a folder on your computer, which will contain all the files for your website. If you don't have any experience working with files and folders, now is a good time to learn!
Setting Up Your Website
Windows
macOS
- Open the Finder and pick a folder to place your new site into (it doesn't really matter where, "Documents" is a solid choice).
- Press ⌘ + Shift + N to create a new folder.
- Give it a name and press return.
- Now, open TextEdit.
- If it doesn't start a new document automatically, click "New Document" or press ⌘ + N to do that.
- HTML is a plain text format, so we need to go to Format > Make Plain Text (or press ⌘ + Shift + T) to make TextEdit treat it as such.
- Go to File > Save (or press ⌘ + S) to save the file. It should pop open a dialog asking you where to save the file.
This is roughly what you want it to look like - Where it says "Save as:", type
index.html
. In the "Where:" field, navigate to the folder you created earlier (you might need to click the little down arrow to get a proper file picker). - Click Save. If it interrogates you about the .html extension, select "Use .html".
- You're ready to start editing your website!
Linux
fuuckkk... uuhhhh.. okay. uh
So there are a lot of different Linuxes and they're all slightly different in completely inscrutable ways, so it's going to be difficult to be as precise as you would with other platforms. I am going to assume that, because you're using the fucking nerd operating system for fucking nerds, you know how to create files and open a text editor on your specific flavour of Linux.
- Create a folder somewhere on your computer
- Open a text editor (such as Kwrite, Mousepad, uh, Text Editor) and create a new document
- Save the document as index.html within the folder you just created
Haiku
- Find a folder to place your new site into (your home folder will work fine).
- Create a new folder, call it whatever you want.
- Open that folder, right click and select
New
→text file
and call itindex.html
. This will be your site's homepage. - Right click the newly created file and select
Add-ons
→FileType
. - In the window that appears, type
text/html
into the "File Type" field and then close it. - You can now right click and open your new file in a text editor like Pe (not StyledEdit).
Note that WebPositive's developer tools are currently fairly lacking, so you may want to install a browser like Falkon from the HaikuDepot.
Adding Things

At this point, you should have a folder with a file called "index.html" inside it.[1] You can double click the file in the FinderFile Exploreryour file managerthe Tracker or drag its icon onto the "new tab" button on your web browser. You should see an entirely blank page. We haven't put anything in the file yet, so that makes sense.
Let's put some stuff on our page. For the rest of the guide I'll be making my website about my two cats, but you can of course make your website about anything you want.
Switch back to TextEditNotepadwhatever text editor you're usingPe and just start typing some stuff:
Hello! This is the homepage of Basil & Onion. They are the swamp creatures that live in my house.
Press ⌘ + SCtrl + SAlt + S to save and then reload the page in your web browser. Hopefully, what you wrote should show up on the page!

Next Up
- Tired of TextEditNotepad yet? Now is a good time install a nicer text editor.
- ↑ By convention, the index.html file will be served up when you don't ask for a specific file. A "home page", if you will.