HTML Basics

HTML and CSS seem difficult. You often wonder: How do these people GET those things? How exactly do they make a Text Area box? Well, they’re very simple if you get the logic of them, and our goal today is to have you learn the basics and get the hang of it.

Below are the basic coding that you need to know if you are building a website or coding on Neopets!

Text

Line Breaks
<br>
Paragraph
<p>
Bold
<b>Your Text</b>
Italic
<i>Your Text</i>
Underline
<i>Your Text</i>
Line Across
<strike>Your Text</strike>
Centered Text
<center>Your Text</center>
Linked Text
<a href="urlhere>texthere</a>
Change Font Face
<font face="fontnamehere">Your Text</font>
Change Font Color
<br> <font color="dodgerblue">Change Font Color</font><br>

Changing Size

<font size="5">Your Text</font>
All In One
<font face="comic sans ms" color="dodgerblue" size="5">Your Text</font>
Now, you can put them together if you want more than one effect. Underlined and Italic… How cool!
<u><i>Your Text</u></i>

Images

Inserting Images
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="yoururlhere"><noscript><img decoding="async" src="yoururlhere"></noscript>
Linking Images
<a href="urlhere"><img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="imgurlhere"><noscript><img decoding="async" src="imgurlhere"></noscript>
Get rid of the white around images (Ok, a bit into CSS here)
<style type="text/css"> img {filter:chroma (color:FFFFFF);} </style>

Background

Colored Background
<style type="text/css">body{background:royalblue}</style>
Picture Background
<stle type="text/css>body{background:white url(backgroundurlhere)}</style>
No Repeat/fixed/positioned
<style type="text/css"> body{background:white url(https://images.neopets.com/backgrounds/sketch/800_kougra.jpg) no-repeat bottom right fixed} </style>