shway
/
Notepad
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Notepad/enter/Coding Tips (Classical)/Terminal Tips/Languages/HTML & CSS.md

6.8 KiB
Raw 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...

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.

For instance designing a Neoshop Blog!

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



Blog coding by SunnyNeo.com









<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>

<!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.

!Pasted image 20230619211526.png An example of an HTML table^. The tutorial for that found here.

A thing called HTMX releases updates quite frequently.

!Pasted image 20230620180623.png 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>

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. !Pasted image 20230607204133.png

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.

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: