Paradigms of a Good Website
Some good rules of thumb to create accessible sites, that are easy to program
- host files with your sites or on an explicit file host (not discord!!)
- use semantic html
- html is reactive by default, any change to css must be able to work on most devices
Building the Shell
A website is made from a few things.
- html files
- css files
- images
- really any file type*
the two big ones are html and css, for which you will need any text editor for.
for this guide, we will use the following file setup:
.
├── images
│ └── skull-rotate.gif
├── index.html
└── main.cssThat's all we need! we don't even need the images however i have included it for means of examples.
HTML
html files are where all the information is stored in websites. these can be named, such as about.html, however there is always an index.html file. This file is the first page on your site.
The following is the very base of a html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Write Your Website</title>
<link rel="stylesheet" href="/main.css">
</head>
<body>
Body Content Goes Here!
</body>
</html>
This may look scary however, i am about to explain what each thing is!
Firstly, html is composed of elements, created from tag pairs, for example <title>Write Your Website</title>. there are some exceptions however, the only one you really need to worry about is <img> but we will get to that later.
<!DOCTYPE html>: This simply explains to the computer that this file is a html document.<html lang="en"></html>: This defines the whole page, and what language it is in. Everything you do will be within this tag.<head></head>: This defines all metadata on the page, content does not go here.<meta>: More metadata stuff, it depends a lot on the values however in this example it just tells the computer how to render the text, and allows for zooming on mobile.<title></title>: This is the title of the page! What you see as the tab's name! Set it to whatever you like!<link>: This tells the computer where to look for other files, in this case the css. Not to be confused with<a>. (Be sure to note that the url of the file begins with a /, this is so the computer knows where to look no matter where the page is)<body></body>: Now this is where the fun begins. this is where all your content goes.
Elements may also have attributes, the most common ones you will see are seen in the following:
<a href="https://example.org">link</a>
<img loading="lazy" src="images/skull-rotate.gif" alt="A rotating skull">
<p style="colour: aquamarine" class="example-class" id="example-id"></p>href and src both refer to another place on the internet, href often being used for links, while src often used for files. alt is for text describing an image, loading="lazy is for telling the computer how to handle images (this should be default, it is not). style, class, and id are used mostly for styling, however id is also used for anchor links.
Once you have a index.html file, you can open that up in your web browser and that will bring up a blank white page, with whatever you named the page in the tab bar.
(Recommended) Running a local website
TODO: Expand on this part:- Install Python 3
- Open Terminal
- Navigate to folder in terminal
- Run
python3 -m http.server - Navigate to
localhost:8000in browser
(Recommended) Uploading your site to neocities
TODO: Expand on this part- Create Neocities Account
- Open folder with html stuff
- Drag and drop babieeee
Sectioning Your Content
A good practice when making sites is sectioning your content so that computers know what stuff is. This is important for accessability.
The three big ones you will want to know are main, section and nav
<body>
<nav>
Navigation Content Here (Links)
</nav>
<main>
<section>
<h1>A Section</h1>
</section>
<section>
<h1>Another Section</h1>
</section>
</main>
</body>Words and Images
(static and moving)
Now, of course you want to put something actually on your site! that is easy! with the power of the paragraph element,<p></p>, anything you put between it will become a paragraph. But we should let the computer know where the main content is (so later when you want to add stuff like navigation, its easier), so we should put it in the main element. <main></main> this should all go inside the <body></body> tags.
<p>This is a really cool paragraph!</p>
<p>This is one too!</p>This is a really cool paragraph!
This is one too!
Plain text however, can be boring!<b>This is bold!</b><br>
<em>This is italics!</em><br>
<u>This is underlined!</u><br>
<s>This is struck through!</s><br>
<span style="color: #2e2;">This is coloured!</span>This is italics!
This is underlined!
This is coloured! There are two new things here,
<br> and style="color: #2e2". By default, html ignores spacing and new lines for the most part, so using <br> allows you to create new lines within paragraphs.
style however is a bit more complicated, it can be placed on any element, and it contains css that applies to that element. We will get into the complexities of that later but in this instance we are just changing the colour of the text.
You may also want headings! html has headings ranging from level 1 to level 6, biggest to smallest. Simple and easy!
<h1> Heading Level 1! </h1>
<h2> Heading Level 2! </h2>
<h3> Heading Level 3! </h3>
<h4> Heading Level 4! </h4>
<h5> Heading Level 5! </h5>
<h6> Heading Level 6! </h6>Heading Level 1!
Heading Level 2!
Heading Level 3!
Heading Level 4!
Heading Level 5!
Heading Level 6!
Another important part of the internet is interconnections, and that's best done through links!<a href="https://en.m.wikipedia.org/wiki/Hyperlink">This is an external link!</a> <br>
<a href="another-page.html">This is a relative link!</a> <br>
<a href="/another-page.html">This is a absolute link!</a> <br>
<a href="#anchor">This is an anchor link!</a>This is a relative link!
This is a absolute link!
This is an anchor link!
Here we have four types of links.:
- External links are easy, they will go to a different site!
- Relative links stay on the same site, but are relative. For example if you are at
https://example.org/section/page.html, and you click the relative link above, you will go tohttps://example.org/section/another-page.html! honestly, relative links aren't that great in my opinion. - Absolute links are from the domain name, taking the previous example of
https://example.org/section/page.html, if you click the above absolute link, you will go tohttps://example.org/another-page.html! - Anchor links are super useful on long pages! They take you to the element with the id of the same name. The above anchor link will take you to the element
<p id="anchor"></p>. the id can of course be anything!
<img> tag.
<img loading="lazy" src="/files/skull-rotate.gif" alt="A rotating skull">
When creating an image element, you must have the src, which is a link to the image, and an alt attribute, which explains what the image is for screen readers, or if the link to the image breaks. This image element also has a lazy loading attribute, which makes it so it only loads when you can see it. If you have a lot of images on one page this is a must.
An image element is what is known as a void element, this means there is no closing tag. You can find a list of void elements on the MDN website.
What about music? or video? There are elements for that too!
<audio controls src="/files/the-penis-eek.mp3"></audio>
<video controls src="/files/test-video-do-not-watch.mp4"></video>