Web Guide/The Very Basics: Difference between revisions
No edit summary |
No edit summary |
||
| 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 | == 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 | # 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> | ||
== | == 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}} | {{GuidePageEnd}} | ||