All About Neocities

Neocities is a fun way to create and share personal websites!

As Neocities itself puts it: Neocities is a social network of 865,800 web sites that are bringing back the lost individual creativity of the web. It's a wonderful way to learn how to code, reach out to other creators and gain inspiration! Personally, I love using it for moments where I just want to make something!

This website is not only for me, but the home page will be a guide on how to make your website and add things to it! Even I forget things sometimes, making me have to scramble around the internet for answers. Famous generators rarely work for me, too!

On the <aside> (The box to the left on PC and the box on top of this one on mobile) is the table of contents. Clicking through it will bring you to the correlating section in this box, which is called <main>! It'll also have other miscellaneous gizmos! Give it a look! :)

HTML Introduction

Basics

HTML, or HyperText Markup Language, is the foundation of every web page. It’s the standard language used to create and design web pages and web applications! By using various elements, HTML structures the content you see on the web, from text and images to links and buttons!

HTML is made up of elements, which are the building blocks of a webpage! Some of the most important and commonly used elements are:

<h1> to <h6>: Headings that structure your content and make it easier to read.
<p>: Paragraphs that hold blocks
<a>: Anchor tags used for creating links.
<img>: Used to display images on your webpage.

Think of HTML as the skeleton of a webpage — it provides structure and meaning to your content! Without HTML, the web would be an unorganized mess. It allows browsers to interpret and display text, images, videos, and other media in a way that makes sense to users!

Every HTML document follows a simple structure to ensure everything is properly displayed in the browser. Here's what a basic HTML document looks like:

<!DOCTYPE html>
<html>
  <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Page Title</title>
  </head>
  <body>
    <h1>Welcome to My Website</h1>
    <p>This is a paragraph of text.</p>
  </body>
</html>

While HTML is the backbone of a website, it often works hand-in-hand with CSS and JavaScript. CSS is used to style and layout the webpage, while JavaScript adds interactive elements to create a more dynamic experience!

Now that you know what HTML is and how it works, you’re ready to dive into the details!

Headings, Paragraphs, Links and Images

Headings

Headings make up titles and subheaders in a page! They go from most important, <h1>, to least important, <h6>. You can style each of them a different way with CSS! Use <h1> for the first title of your content, then <h2> for the heading inside of that content, and so on!

<h1>Main Title</h1>
<h2>Subheading</h2>
<h3>Sub-subheading</h3>
<h4>Lower-level Heading</h4>
<h5>Minor Heading</h5>
<h6>Least Important Heading</h6>

Paragraphs

Paragraphs (a block of text) are made with the <p> tag!

<This makes a paragraph appear! Using this to separate your chunks of text
is important!>

Links

Links are connections to other web pages! You can put links in text, images and buttons!

"href" is an attribute, it has the destination of the link!

<a href="link-goes-here">Clickable Text</a>

Images

Images are easily placeable in a page, but they can be tricky depending on the size they are when they're created.

"Alt" is short for alternative text. Screen readers read alternative text out for accessibility (I.e. Those who can't see images)

<img src="link-of-image" Alt="Alternative text">

Tables, Lists, Horizontal Rules and Breaks

Tables

Tables are great for organizing small amounts of data in columns and rows!

<tr>: Table row.

<th>: Table heading.

<td>: Table data.

<table>
  <tr>
    <th>Table Header</th>
  </tr>
  <tr>
    <td>Table data</td>
  </tr>
</table>

Lists

Lists group unrelated items! Theres a ton of ways you can make this look with CSS, including changing the list style.

<ul>: Unstyled list.

<li>: List item.

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Horizontal Rules

<hr> stands for "Horizontal rule". You use this tag singularly without an end tag! It creates a thin line in your page. It's commonly used as a divider!

<hr>

Breaks

"br", short for Break, breaks apart a line of text. This is helpful if your text is running off of the page or you want to break a group of information for better viewing!

<br>

Details, ID, Symbols and Semantic HTML

Details

You are currently in a detail summary tag right now! Details and summary are a group of text that are hidden until you click the summary, which is a heading of its own!

<details><summary>Summary Heading<summary>Details inside the summary<details>

ID

An "id" in html specifically points towards the unique identifier of an element. If you want one link to stand out against the others, class it with an "id" and style it with CSS!

<h1 class="coolheading">Cool h1 Heading<h1>

Symbols

Many unsupported special characters can be written into your website with HTML code. There's many websites available to help you find them! Here's the code for the copyright symbol:

&#169;

Semantic HTML

Semantic HTML is a straightforward way of HTML. It states the element as it is, like tables, details, summary. In this list, I'll focus on the semantic HTML layout of this page!

header: The introduction of the page, such as "SugarStarlette's Silly Playground!"
nav: Short for "navigation", a list of links to navigate the website!
section: Defines the section of a document. Can be used separately, or with other elements, such as the ones I have here with aside and main being in a section.
aside: The additional information section relating to the main page. Typically used for sidebars, like my table of contents!
main: The main body of the page. Mine is about code!
article: An unrelated section of the page. It's typically used for blog posts and other information!
footer: A section of information at the bottom of the page containing ownership information and copyright.

CSS Introduction

Basics

🎨 Cascading Style Sheets (CSS) are what make your HTML pages look beautiful and stylish. They let you control the design and layout of your content!

CSS is like the makeup and wardrobe for your HTML content. While HTML structures your page, CSS dresses it up with colors, fonts, spacing, and more!

CSS uses selectors to target HTML elements and properties to style them. Here’s a simple example:

h1 {
color: blue;
}

"h1" here is targeting all HTML elements using <h1>, making the text blue, just like how you see on my page! You can change the color, size, font, the text shadow, how wide it is and even center it in your page!

CSS is all about customization. It's the sole reason you're about to make boxes on your page. In fact, that's all CSS is! Boxes inside of boxes!

Backgrounds, Borders, Colors and Fonts

Backgrounds

Backgrounds here refer to "background-color:" which can be used in a variety of things from buttons, to links, to boxes, to text! Use preset CSS colors for the easiest way to color your background

h1 {
background-color: yellow;
}

Borders

There are many different kinds of borders you can use. This section specifically refers to the singular "border" though. You can specify the thickness of the border, the color, and if you want it dotted, solid or dashed! An example of this is the box this text is in, which uses a blue border!

section {
border: 2px solid blue
}

Colors

CSS has a variety of different colors to pick from if you dont want to use hex codes (which look like this: #FFFFFF). My go-to site is Davidbau's CSS colors for the accessibility. Here are a few of my favorites!

Red

Black

Sienna

Cyan

Gray

Chartreuse

section {
color: red;
}

Fonts

Fonts are one of the best customization options for pages! You can go about them in a lot of ways, such as using browser-safe CSS fonts or downloading custom fonts to add to your website!

body {
font-family: arial;
}

Or:

<head>
  @import url('link-goes-here');
<head>

"@import" can only go in the head section! It tells the document what to take from a certain website and integrate it into yours! a very popular way to find fonts to import is the google fonts website.

Padding, Margin, Width and Height

Padding

Padding is the amount of space inside an element. You can control it in quite a few ways! One way I like to use padding is:

main {
padding: 0 10px;
}

This is telling the main box that I don't want space on the top and bottom padding, but 10 pixels of space on the left and right!

Margin

Margin is the amount of space outside an element. It pushes your element away from others instead of spacing out the elements inside of it. I find this especially helpful when creating buttons!

.button {
margin: 3px 5px;
}

Like the padding, this button (which is a div, something I'll explain in the next section) is telling the margin to put 3 pixels of space between the top and bottom, while left and right get 5 pixels.

Width

Width is referring to the width of the element, how long it is on the screen. A lot of people will use "px" for pixels, but I prefer to use "em" so it can also properly adjust on mobile screens.

"max-width" is the maximum width of an element. It prevents other elements inside that element from going beyond it!

section {
width: 600px;
}

main {
max-width: 100%;
}

Height

Height refers to the height of an element, or how long it is. You'll use these with boxes and sections!

"max-height" works similarly to "max-width", only for the length instead.

section {
height: 600px;
}

main {
max-height: 100%;
}

Display, Overflow, Shadows and Buttons

Display

Displays are different types of boxes. Some are good for photo galleries while others work better for putting text next to each other. Personally, I am a HUGE fan of flex, as it automatically adjusts itself to mobile screens, which I use most!

None: Removes the targeted element, making it remove any space with it.
Flex: Short for "flexible box layout", creates an organized set of boxes that arranges itself based on the screen size. Helpful for multiple boxes and photo galleries!
Inline: Inside the element on the same line (right next to each other.) Helpful for links and buttons!
Grid: A complex grid layout on the page using multiple, adjustable boxes. Helpful for complicated page layouts and multiple sets of information!

section {
display: flex;
justify-content: center;
}

Overflow

Setting the overflow property tells the element what to do if the content overflows its box. You're in a box using overflow: auto, which helps you scroll down here!

Auto: One scroll bar on the side.
Scroll: Two scroll bars on the side and the bottom.
Hidden: Disables the scroll bar and hides everything beyond the width and length of the element.

main {
overflow: auto;
}

Shadow

You can put shadows on quite a few elements, such as text and boxes! The first two numbers tell the shadow what placement to be at (up/down) (left/right), and then the color specifies what color the shadow should be!

section {
box-shadow: 2px 3px orange;
}

header {
text-shadow: 2px 2px orange;
}

You can blur the shadow behind these elements by adding an extra third number! (2px 3px 5px)

Buttons

Buttons are a simple HTML element, but with CSS, you can style them to have all kinds of colors and decoration! Putting together everything we've learned from the above, we can create...


<button type="button" class="examplebutton">A colorful button!</button>
          
.examplebutton {
  background-color: magenta;
  border: 2px solid cyan;
  width: 15em;
  color: yellow;
  padding: 10px;
}

Advanced HTML

Inline Styling

Inline styles are styles applied to a page using the body section of the page instead of a separate CSS sheet. This is great for smaller projects, but not so much for big ones.

<p style='color: blue;'>This is a blue paragraph!</p>

Advanced CSS

Div, !important, and Rounded Corners

Pre/Code

If you want to type out code in your HTML page, you'll need a combination of special characters and "<pre><code>", which are HTML tags that tell the body that you're writing long code snippets!

<pre><code>&lt;This is how you write HTML tags without turning them into
elements!&gt;</code></pre>