Web Guide/The Very Basics - Revision history

Leah at 14:39, 21 March 2026

2026-03-21T14:39:37Z

← Older revision		Revision as of 15:39, 21 March 2026
Line 1:		Line 1:
	{{GuidePage\|title=The Very Basics\|theme=denim\|section=🌱 Make a Website}}__TOC__		{{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.		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]]!		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]]!

Leah: /* Next Up */

2026-03-14T18:07:25Z

Next Up

← Older revision		Revision as of 19:07, 14 March 2026
Line 74:		Line 74:
	* 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]].		* 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>		</div>
	* Start [[Web Guide/On HTML\|adding interesting things using HTML]]		* Start [[Web Guide/On HTML\|adding interesting things using HTML]].
			* [[Web Guide/Publishing\|Publish your site]] so that other people can see it.
	{{GuidePageEnd}}		{{GuidePageEnd}}

Leah at 17:59, 14 March 2026

2026-03-14T17:59:26Z

← Older revision		Revision as of 18:59, 14 March 2026
Line 74:		Line 74:
	* 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]].		* 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>		</div>
			* Start [[Web Guide/On HTML\|adding interesting things using HTML]]
	{{GuidePageEnd}}		{{GuidePageEnd}}

Thesamplemotion: clarified bit ab windows bothering you if you change the file extension

2025-11-12T14:08:42Z

clarified bit ab windows bothering you if you change the file extension

← Older revision		Revision as of 15:08, 12 November 2025
Line 11:		Line 11:
	# Open File Explorer and find a place for the local version of your new site. At this stage, it doesn't matter where; your Documents folder is pretty solid.		# Open File Explorer and find a place for the local version of your new site. At this stage, it doesn't matter where; your Documents folder is pretty solid.
	# Right click and press "New..." -> "Folder" to create a folder to contain all the website's contents. Give it an appropriate name.		# Right click and press "New..." -> "Folder" to create a folder to contain all the website's contents. Give it an appropriate name.
	# Enter this folder, then right-click and create a new text document with "New..." -> "Text Document". Call it <code>index.html</code>. This will be your homepage. You might have to go into it and save it as an HTML file in Notepad to make sure it is actually an HTML file, because by default, Windows is evil and doesn't let you see file extensions. Make sure to delete the original text file if using this approach. If you do it ~~without "saving as" in Notepad~~, Windows will ask you if you want to change the file type, and believe me, you very much do. Text documents aren't very useful on the World Wide Web Tee Em, unless they're encased in HTML.		# Enter this folder, then right-click and create a new text document with "New..." -> "Text Document". Call it <code>index.html</code>. This will be your homepage. You might have to go into it and save it as an HTML file in Notepad to make sure it is actually an HTML file, because by default, Windows is evil and doesn't let you see file extensions. Make sure to delete the original text file if using this approach. If you do it via renaming, Windows will ask you if you want to change the file type, and believe me, you very much do. Text documents aren't very useful on the World Wide Web Tee Em, unless they're encased in HTML.
	# Right-click (yeah i know, there's a lot of this) your new .html file, and select "Open with..." -> "Notepad", and watch as your blank HTML file appears magically before your eyes as a notepad document containing absolutely nothing. This is absolutely fine.		# Right-click (yeah i know, there's a lot of this) your new .html file, and select "Open with..." -> "Notepad", and watch as your blank HTML file appears magically before your eyes as a notepad document containing absolutely nothing. This is absolutely fine.
	# If you type things into this and save them, it will save to the HTML file quite happily, though Notepad isn't exactly the best editor for this... see later for details.		# If you type things into this and save them, it will save to the HTML file quite happily, though Notepad isn't exactly the best editor for this... see later for details.

Thesamplemotion at 22:18, 20 October 2025

2025-10-20T22:18:50Z

← Older revision		Revision as of 23:18, 20 October 2025
Line 14:		Line 14:
	# Right-click (yeah i know, there's a lot of this) your new .html file, and select "Open with..." -> "Notepad", and watch as your blank HTML file appears magically before your eyes as a notepad document containing absolutely nothing. This is absolutely fine.		# Right-click (yeah i know, there's a lot of this) your new .html file, and select "Open with..." -> "Notepad", and watch as your blank HTML file appears magically before your eyes as a notepad document containing absolutely nothing. This is absolutely fine.
	# If you type things into this and save them, it will save to the HTML file quite happily, though Notepad isn't exactly the best editor for this... see later for details.		# If you type things into this and save them, it will save to the HTML file quite happily, though Notepad isn't exactly the best editor for this... see later for details.
			</div>
	<div class="platform macos">		<div class="platform macos">
	=== macOS ===		=== macOS ===

Thesamplemotion at 22:17, 20 October 2025

2025-10-20T22:17:52Z

← Older revision		Revision as of 23:17, 20 October 2025
Line 6:		Line 6:
	== Setting Up Your Website ==		== Setting Up Your Website ==
	{{#widget:Guides/PlatformSwitcher}}		{{#widget:Guides/PlatformSwitcher}}

	<div class="platform windows">		<div class="platform windows">
	=== Windows ===		=== Windows ===
	~~</div>~~

	# Open File Explorer and find a place for the local version of your new site. At this stage, it doesn't matter where; your Documents folder is pretty solid.		# Open File Explorer and find a place for the local version of your new site. At this stage, it doesn't matter where; your Documents folder is pretty solid.
	# Right click and press "New..." -> "Folder" to create a folder to contain all the website's contents. Give it an appropriate name.		# Right click and press "New..." -> "Folder" to create a folder to contain all the website's contents. Give it an appropriate name.
	# Enter this folder, then right-click and create a new text document with "New..." -> "Text Document". Call it <code>index.html</code>. This will be your homepage. You might have to go into it and save it as an HTML file in Notepad to make sure it is actually an HTML file, because by default, Windows is evil and doesn't let you see file extensions. Make sure to delete the original text file if using this approach. If you do it without "saving as" in Notepad, Windows will ask you if you want to change the file type, and believe me, you very much do. Text documents aren't very useful on the World Wide Web Tee Em, unless they're encased in HTML.		# Enter this folder, then right-click and create a new text document with "New..." -> "Text Document". Call it <code>index.html</code>. This will be your homepage. You might have to go into it and save it as an HTML file in Notepad to make sure it is actually an HTML file, because by default, Windows is evil and doesn't let you see file extensions. Make sure to delete the original text file if using this approach. If you do it without "saving as" in Notepad, Windows will ask you if you want to change the file type, and believe me, you very much do. Text documents aren't very useful on the World Wide Web Tee Em, unless they're encased in HTML.
	# Right-click (yeah i know, there's a lot of this) your new .html file, and select "Open with..." -> "Notepad", and watch as your blank HTML file appears magically before your eyes as a notepad document containing absolutely nothing. This is absolutely fine.		# Right-click (yeah i know, there's a lot of this) your new .html file, and select "Open with..." -> "Notepad", and watch as your blank HTML file appears magically before your eyes as a notepad document containing absolutely nothing. This is absolutely fine.
	# If you type things into this and save them, it will save to the HTML file quite happily, though Notepad isn't exactly the best editor for this... see later for details.<div class="platform macos">		# If you type things into this and save them, it will save to the HTML file quite happily, though Notepad isn't exactly the best editor for this... see later for details.

			<div class="platform macos">
	=== 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).		# Open the Finder and pick a folder to place your new site into (it doesn't really matter where, "Documents" is a solid choice).

Thesamplemotion at 22:15, 20 October 2025

2025-10-20T22:15:34Z

← Older revision		Revision as of 23:15, 20 October 2025
Line 12:		Line 12:
	# Open File Explorer and find a place for the local version of your new site. At this stage, it doesn't matter where; your Documents folder is pretty solid.		# Open File Explorer and find a place for the local version of your new site. At this stage, it doesn't matter where; your Documents folder is pretty solid.
	# Right click and press "New..." -> "Folder" to create a folder to contain all the website's contents. Give it an appropriate name.		# Right click and press "New..." -> "Folder" to create a folder to contain all the website's contents. Give it an appropriate name.
	# Enter this folder, then right-click and create a new text document with "New..." -> "Text Document". Call it "index.html". You might have to go into it and save it as an HTML file in Notepad to make sure it is actually an HTML file, because by default, Windows is evil and doesn't let you see file extensions. Make sure to delete the original text file if using this approach. If you do it without "saving as" in Notepad, Windows will ask you if you want to change the file type, and believe me, you very much do. Text documents aren't very useful on the World Wide Web Tee Em, unless they're encased in HTML.		# Enter this folder, then right-click and create a new text document with "New..." -> "Text Document". Call it <code>index.html</code>. This will be your homepage. You might have to go into it and save it as an HTML file in Notepad to make sure it is actually an HTML file, because by default, Windows is evil and doesn't let you see file extensions. Make sure to delete the original text file if using this approach. If you do it without "saving as" in Notepad, Windows will ask you if you want to change the file type, and believe me, you very much do. Text documents aren't very useful on the World Wide Web Tee Em, unless they're encased in HTML.
	# Right-click (yeah i know, there's a lot of this) your new .html file, and select "Open with..." -> "Notepad", and watch as your blank HTML file appears magically before your eyes as a notepad document containing absolutely nothing.		# Right-click (yeah i know, there's a lot of this) your new .html file, and select "Open with..." -> "Notepad", and watch as your blank HTML file appears magically before your eyes as a notepad document containing absolutely nothing. This is absolutely fine.
	# If you type things into this and save them, it will save to the HTML file quite happily, though Notepad isn't exactly the best editor for this... see later for details.<div class="platform macos">		# If you type things into this and save them, it will save to the HTML file quite happily, though Notepad isn't exactly the best editor for this... see later for details.<div class="platform macos">
	=== macOS ===		=== macOS ===

Thesamplemotion: i have been the change i want to see in the world. sorry if i broke things.

2025-10-20T22:12:01Z

i have been the change i want to see in the world. sorry if i broke things.

← Older revision		Revision as of 23:12, 20 October 2025
Line 9:		Line 9:
	=== Windows ===		=== Windows ===
	</div>		</div>
	<div class="platform macos">
			# Open File Explorer and find a place for the local version of your new site. At this stage, it doesn't matter where; your Documents folder is pretty solid.
			# Right click and press "New..." -> "Folder" to create a folder to contain all the website's contents. Give it an appropriate name.
			# Enter this folder, then right-click and create a new text document with "New..." -> "Text Document". Call it "index.html". You might have to go into it and save it as an HTML file in Notepad to make sure it is actually an HTML file, because by default, Windows is evil and doesn't let you see file extensions. Make sure to delete the original text file if using this approach. If you do it without "saving as" in Notepad, Windows will ask you if you want to change the file type, and believe me, you very much do. Text documents aren't very useful on the World Wide Web Tee Em, unless they're encased in HTML.
			# Right-click (yeah i know, there's a lot of this) your new .html file, and select "Open with..." -> "Notepad", and watch as your blank HTML file appears magically before your eyes as a notepad document containing absolutely nothing.
			# If you type things into this and save them, it will save to the HTML file quite happily, though Notepad isn't exactly the best editor for this... see later for details.<div class="platform macos">
	=== 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).		# Open the Finder and pick a folder to place your new site into (it doesn't really matter where, "Documents" is a solid choice).

Leah at 13:57, 6 February 2025

2025-02-06T13:57:07Z

← Older revision		Revision as of 14:57, 6 February 2025
Line 2:		Line 2:
	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.		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]]!		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 ==		== Setting Up Your Website ==

Leah at 16:17, 26 January 2025

2025-01-26T16:17:40Z

← Older revision		Revision as of 17:17, 26 January 2025
Line 4:		Line 4:
	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]]!		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~~ ==		== Setting Up Your Website ==
	{{#widget:Guides/PlatformSwitcher}}		{{#widget:Guides/PlatformSwitcher}}
	<div class="platform windows">		<div class="platform windows">
Line 17:		Line 17:
	#If it doesn't start a new document automatically, click "New Document" or press <kbd><kbd>⌘</kbd> + <kbd>N</kbd></kbd> to do that.		#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.		# 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\|This is roughly what you want it to look like]]		# 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).		# 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".		# Click Save. If it interrogates you about the .html extension, select "Use .html".
Line 39:		Line 39:
	# Right click the newly created file and select <code>Add-ons</code> → <code>FileType</code>.		# 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.		# In the window that appears, type <code>text/html</code> into the "File Type" field and then close it.
	# You can now ~~double~~ click your ~~index.html~~ file ~~to open it~~ in ~~WebPositive~~.		# 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.		Note that WebPositive's developer tools are currently fairly lacking, so you may want to install a browser like Falkon from the HaikuDepot.
	</div>		</div>

	== ~~Editing it~~ ==		== Adding Things ==

	~~(coming soon)~~		[[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}}		{{GuidePageEnd}}