9.4 KiB

Raw Permalink Blame History

HTML

My very first language that I learned at 12 when I was on neopets.com. It stands for HyperText Markup Language and it's used to create websites! The website thing really takes off in the future so it's good that you got pretty good at it at some point. Now if only you could remember your neopets username and password...

Bring back the blog!1 Amazing html tutorial sites:

https://thoughts.melonking.net/guides/introduction-to-the-web-revival-3-make-a-website
https://brutalist-web.design/
motherfuckingwebsite written in pure html as one should

Funnily enough I keep going back to the time I w as 12 and learning this stuff because I learned a bunch in a relatively short amount of time and it was so much fun designing my pet pages and my profile.

Brackets is the preferred Editor for HTML/CSS but nowadays there is Phoenix! Straight from your browser.

For instance designing a Neoshop Blog!


	Stuff Goes Here. Leave the Credit in the blog text. Blog coding by SunnyNeo.com

On a more serious note, HTML is used everywhere. HTML (Hypertext Markup Language) is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript. Web browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.

HTML has been in use since 1991, but HTML 4.0 was the first standardized version where international characters were given reasonably complete treatment. When an HTML document includes special characters outside the range of seven-bit ASCII, there are two aspects should be taken into consideration: the information's integrity, and universal browser display.

Neopets HTML Code

<center>
<table width="400px" height="400px" background="https://www.sunnyneo.com/bloggers/kadoatieblog.gif" border="0" cellpadding="0" cellspacing="0">

<tr><td height="245px"></td></tr>
<tr><td width="20px"></td>
<td>

<div style="width: 350px; height: 120px; overflow: auto; scrollbar-arrow-color: #4A87D7; scrollbar-darkshadow-color: #4A87D7; scrollbar-track-color: white; scrollbar-face-color: #8DAFE7; scrollbar-shadow-color: #4A87D7; scrollbar-highlight-color: #4A87D7; scrollbar-3dlight-color: #4A87D7; font-size:9pt; color:black; text-align:center; font-weight: bold; font-family: verdana;">

Stuff Goes Here.  Leave the Credit in the blog text.


<br>
<br>Blog coding by <a href="https://www.neopets.com/~TheSunnyNeo"><font color="black">SunnyNeo.com</font></a><br><br><br><br><br><br><br><br><br><br>
</div></td></tr>
</table>
</center>

Getting started in HTML

<!DOCTYPE html>
<html>
  <body>


    Shwetha's Website


  </body>
</html>

<h1> </h1> is used for headers
<p> </p> is used for paragraphs
omg remember a href??

<a href = "https://shwethajayaraj.com"> Check out my website!</a>

and then of course, can't forget about img src

<img src="/cat.png">

<!DOCTYPE html>
<html>
  <body>


    <h1>Shwetha's Website</h1>
    <p>Welcome!<a href="https://shwethajayaraj.com"> Check out my website!</a></p> 
    <img src="/cat.png">
    
    <br>My top animes are: </br>
    <ol>
      <li> Sailor Moon 
        <a href="https://en.wikipedia.org/wiki/Sailor_Moon">here</a>
      </li>
      <li> Naruto </li> 
      <li> Dragonball Z </li> 
    </ol>
    
    <br>I've lived in: </br>
    <ul>
      <li> India </li>
      <li> California </li> 
      <li> Connecticut </li> 
    </ul>


  </body>
</html>

Tables

Creating tables in HTML are possible too if you remember back to your neopets website. Indeed, this is where a bulk of your reference information can live. A good tutorial on getting a refresher with HTML tables is over here.

! An example of an HTML table^. The tutorial for that found here.

A thing called HTMX releases updates quite frequently.

! Here is the sample HTML code for a website visitor counter!

<script type="text/javascript" src="//counter.websiteout.net/js/1/0/0/1"></script>

Other notes:

There a lot of philosophies about a "website" such as the IndieWeb which I think is great.

via IndieWeb:

Beyond Blogging and Decentralization

The IndieWeb effort is different from previous efforts/communities:

Principles over project-centrism. Others assume a monoculture of one project for all. We are developing a plurality of projects. The IndieWeb community has a code-of-conduct.
Publish on your site instead of emailing a list. Show before tell. Prioritize by making what you need, creating, iterating on your own site.
Design first, protocols & formats second. Focus on good UX & using your own prototype features to create minimum necessary formats & protocols.

What is PUG?

There is a template engine used for Node.js called Pug, formerly known as JADE, that is being used much more frequently nowadays because it compiles down to HTML. This makes for much more readable, html formatted code. !

Pug to HTML converter
Alternatively, there is also this HTML encoder tool

CSS

Ah the design and creative part of front end coding. This is what I started out doing when I was around 12 years old on neopets.com. The world has gotten a lot better since then now and we have many options for web design and front end programming.

One of the best tools to use for CSS is https://tailwindcss.com/
- for more info on how to set it up: https://tailwindcss.com/docs/installation
Coding an iOS calculator using CSS, HTML, and javascript
fantastic guide on CSS by every-layout.dev
- sidebar layouts & search bar layouts!
if you're not using codepen.io what are you even doing.
More tricks to be found CSS-Tricks as well
CSS cursor reference
I've kept loads more webtools and front end references on raindrop.io
The CSS Cheatsheet all on one page!
Every Layout is a guide that will show you how to code CSS for, well, every layout!

Customizing Style

hundreds of user themes found on Stylish
use the Stylus extension to make custom CSS
CSS Peeper is another necessary inspection if going based off of inspired Inspected webpages

---> Onwards to UX/UI Design

HTML & CSS were how you hand coded designs for webpages, this was before automation where it was simply easier to copy and paste to do the same thing. However, now that is so commonplace it has since lost the charm of hand-crafting a webpage from HTML & CSS to create something of your own.

That is why there is a directory that you can place hand-crafted webpages onto as well.

Here is the link to add your hand-coded website.

9.4 KiB Raw Permalink Blame History