alright. you wanted a home of your own or a cool site. and its a good one. although we hate controversies and stuff i am helping people who were in an allegation (innocent people or wrongly accused) if you are actually remorse i can also help you but if you are accused of pedo just get out. just get the hell out of here.

so i decided to write this whole guide in one for cool people.

HTML is NOT a coding language, but rather a document language. all sites are actually documents. but more interactive. they can be accessed by paths, or links for short. for example, https://bitview.com leads you to a document called index.html on bitview. actually a good site if you hate youtubes copyright piss. also paths can be customised; you have to register a path or link (url) by paying all your treasure to a domain company. this gives your a custom email, which is best for answering stuff around. by the time this guide was written, i didnt have one, but wanted to get one soon for inqueries stuff.

it is actually nice to have a website since you can just flex it and you can put it as a diary, or debate or just a page. a troll page like aolsoulja.neocities.org . but like i said on the landing page if you have a website you unlocked the free speech rights so its very powerful if you decided to get a site.

here are the resources:

resources for neocities people

-neocities. it lets you contact other sites profiles and meet and track them. other hosting services like geocities.ws is actually a spyware on web and it once redirected to an illegal site and my brother freaked out after sawing that.
-codecademy (for if you want to learn more. i used that once and at first its boring, but helped me a long way.)
-pixeldrain (this is the best file host since it has an easy interface and you can store it infinitely of 50GB without crying about space. or if you are space aspect holder its fine just store it since neocities sucked)
-shareX. best screenshot or color picker and tool stuff. theres even a thumbnail and image splitter. you can link it to pixeldrain after you screenshot [in your account go to settings then apps -> shareX]. very neat and noice
-W3schools or mozilla dev HTML docs. this is another very helpful page incase you got stuck finding how a tag works or explore more other elements and use it on your page. best for people who dont want to interact coding but actually learn by reading


now we have the essentials listed. but first we have to be flexible with neocities files. neocities' folder works like this:

 https://schooltown.neocities.org/images/postal1dude.png 

https://schooltown.neocities.org = the https:// is the protocol and schooltown.neocities.org is the location of the page link.
/images/ = this is the folder. anything put inside it will follow this link part after.
postal1dude.png = the file name itself. it can be a page (.php or .html or .css) or any image. also the dude pic isnt real so just search it up.


folders can be very hard and difficult to learn and distinguish. think of it as a russian matryoshka doll or an actual folder. when a file is in a folder, its just the link above without the whole link location. aka /images/postal1dude.png

the folder path goes in the middle of a link, followed by the file name. you will need these to organise your whole page. you can store iamges, but i do not reccommend store images in there. use pixeldrain instead.

next i will discuss the elements used commonly in peoples pages and the design process.

design process

although to you this might be hard, but it is another thing to consider. every page is unique on its own.

if you stumbled into this page, you know that i am into old media and internet so if you wanna be one too then i am very very very glad to guide you through. my page is based off the frameless fancy geocities pages. but on neocities framed sites are more popular. but neocities is bringing back the old internet era so you can go either way.

but to do multiple identical pages is hard too. that's why we link the same .css file to every .html page we have. so that we could save some space and not screw up what we call classes. ill explain that later in the guide.

to fix the problem with not having identical pages (its up to you you can go different), just link the style.css to every page and use all that classes and variables to link to.

another one thing i want to mention to you is the design can be too fancy since new web minimizes for boomers. old web has no functions for disabled people yet (i am not an ableist). all assets include dividers, icons (favicons), and guestbook buttons.

if you want to go with a div framed custom fancyish page, you have to draw it and label what parts is which. i learnt that from cinni.net myself since her layout is complex. but she knows which part is so thats why we need to map it out. mapping page links is also important.

css stylesheets customizes your elements like make text small or margin and padding stuff around. html is the pencil and css is the colors.

elements used frequently in neocities pages

1. <div>

<div class="" id="" style=""></div>

this is the no#1 of all html pages. divs short for dividers are containers for storing text and elements. you can give it a background or a border or shadows. you can put an image or just text inside. the text here is inside a white box with fancy ridge border. note that the class="" and id="" and style="" is a variable. will explain them more in the css part. so div is just a container.

2. <br>

<br>

ooh! you noticed that this one doesnt have a closing tag (</>). some tags dont require end tags. i am not sure why but they are just small tags since you cant enclose text in br. br is a break element. equivalent to hitting enter in a word document. i used this alot in breaking off sentences and stuff around.

3. <img>

<img src="/folder/image.png" style="">

another tag that doesnt use an end tag. best for putting images in.

4. <a>

<a href="https://website.domain" target="_new">text here</a>

this is called an anchor tag. it is used for links (the ones you click on) to link it put the full link or /page to redirect it. the target="" is for when you want to automatically open a link in a new tab. in this case we use _new for this.

ok, there might be new tags added above. but i guess time for some css theory to finish off.

css and how to use it

css, also known as stylesheets, is a file linked to html for customizing pages and decorations. you can have more than 1 css file linked to a page. heres how to connect it.

 <link href="/style.css" rel="stylesheet" type="text/css" media="all"> 

so in neocities its already linked for you everytime you start a page. so thats the most convenient but you still have to know it.

next we have to know how a css "rule" is written. like html but different.



and comments are this:



i recommend checking the w3 docs by the web consortium (the one who sets laws about html that it should be typed like that). there is a whole lot of properties, but i will be covering most common and useful ones.

1. color

color: hex color, color name,;

the color variable is for the text color. i dont know why but its assigned that.

2. margin

margin:; margin-left:; margin-right: margin-top: margin-bottom:;

margin property is for spacing outside the element. i always use 3px so that it spaces out evenly. margin-top-bottom-left-right is for spacing in directions; if you assign margin-top: 20px; it moves down.

3. padding

padding:;

padding is the same as margin, except its INSIDE the element. best for spacing inside divs

4. background-image

background-image:url('path/image.png');

this is for the background. back then you can apply background image in html by putting background="" in body or any tag but its hard to navigate so we should include it in the css file.

5. border and border-radius

border: typeofborder 0px color; border-radius: 0px;

border assigns the border to an element (mostly divs) and this is best for fancy pages and stuff around. border radius determines how rounded the corners of the borders are. you can use this without assigning a border. but thats just new websites stereotypes.

ok. heres the 5 of them that i use alot. theres more of this, so make use of w3 or mozilla dev docs. this is all i could write. will update soon. anyways, check any of the apps. its very useful!