This is how I'm learning to code

This page will be used as a cheat sheet for when it comes time to actually make my main site.
You probably won't see this

These are different headers. This is h1

This is h2

This is h3

this is h4

this is h5

and this is h6

this is a link. Links are defined with an a tag Like this. This one links to google

you can also add images like this

you can also create paragraphs
with a line break using br.
this is all one line of code!

You can also use the style attribute to change font, color and size. This paragraph is red!

Hover over this for a sec

Headings should only be used as intended.

Do not use them to make text big or bold. That's what the font style attribute is for as seen below

This paragraph is now 70 px

sometimes you want to post something like a poem,
but a paragraph attribute will
just display it all
on one line

and using the br attribute can get tedious

    the pre element
    is used
    to preserve
    a prexisting
    format
    ain't that lovely?
  

Back to fucking with colors again. These preset hues are nice, but I wonder when the color codes come in.... But, HEY! You can apparently text-align :P

you can also change the background color for a page by 'bracket'body style="background-color:color;"'bracket'. In this case, the page is now powder blue! Pretty cool!

You can also set the background color for different elements as well. This heading has a yellow background

This paragraph has a tomato background now. TOMATO

You can also use the font-family style to change fonts. This paragraph is now in Veranda

And this one is Courier

and this one's in wingdings

You can also change font size without specifying pixels
you can use percents as well. this paragraph's text size was increased by 300%

you can also format text by making them:

1. bold
2. strong
3. italic
4. emphasized
5. marked
6. small
7. deleted(however the fuck that's gonna look)
8. inserted
9. _subscript
10. ^{or superscript}

the difference between bold and strong text is that bold text isn't defined with importance
whereas strong text is
... I don't know about you, but they both look practically the same to me

You can also quote shit using the blockquote element, which indents information you're quoting, like so (I'm literally using the example from the tutorial website. sue me):

Here's a quote from WWF's website:

For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally

the q tag is used to define shorter quotations, and browsers usually insert quotation marks around it, like this:

WWF's goal is to: Build a future where people live in harmony with nature

the abbr tag is used to define an abbreviation or an acrpmum like this one for the World Health Organization,
Which the code turns into The WHO, which was founded in 1948.

You can also display an address for contact info using the address tag

You can also cite titles of creative works (boos, poems, movies, etc) using the cite tag

The Scream by Edvard Much. ainted in 1893.

It's pretty underwhelming...

the bdo tag, or bi-directional override, is used to override the current text direction

COLORS

you can also change the color

All browsers support 140 colors, which you can use to change the background of the site itself, the background of the text, as well as the text itself

you can also add borders by using style="border:(size)px solid (color).
This one is 4px in solid violet

VS. An inline span, which will not start on a new line and only takes up as much width as necessary

Colors can also be specified using RGB, HEX, HSL, RGBA and HSLA values

rgb(#,#,#,.5 (this is transparency))
#rrggbb,
hsl(hue,saturation,lightness,0.5(this is transparency))

External CSS (or external style sheet) can be used to define the style for many HTML pages. It's a seperate file from this one (probably can make one in the notes app on my computer)

HTML LINKS

By default, linked pages will be displayed in the current browser window
to change this, you mus specidy another target for the link. the TARGET attribute specifies where to oben the linked doc
It can have one of the following values:
_self: default. opens the document in the same window/tab it was clicked
_blank: opens the document in a new window or tab
_parent: opens the document in the parent frame
_top: opens the document in the full body of the window

Examples look like this
This directs to google in the same window using _self
This directs to google in a new window/tab using _blank
This directs to google in the parent frame using _parent
This directs to google in the full body of the window using _top

Relative URLS are local links, which are a link that directs to a page within the same website. It doesn't have the https://www part.
To use an image as a link,, put the bracket img bracket tag inside the a tag like this:
Va href="default.asp"V (img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;")(/a) (in which the () stands in for the graphics bc fuck this site oml)

You can also link to an email address by using mailto: inside the href attribute, which looks like this:
(a href="mailto:someone@example.com")Send email(/a)

To use an HTM button as a link, you have to add JavaScript code
This allows you to specify what happens at certain events, such as a click of a button

Link Titles

The title attribute specifies extra info about an element. The info is most often shown as a tooltip when the mouse moves over the element

You'll never guess what this is

More on Absolute URLs and Relative URLs

Use a full url to link to a webpage:
I don't have any other websites lol
How to link to a page in an html folder on your current website:
(a href="/html/default.asp")HTML tutorial(/a)
Link to a page located in the same folder as your current page:
(a href="default.asp")HTML tutorial(/a)

HTML Link colors can be changed by using CSS

It looks like this:

Adding Images

Adding a gif

An Image as a Link

Using CSS float property to let the image float to right or left of text

Adding a gif

The image will float to the left of the text

Adding background images: If you want the entire page to have a background image, you must specify the background image on the body element

If you want the background image to cover the entire element, you can set the background-size property to fixed
And to make sure the entire element is always covered, set the background-attachment property to fixed
This way the bg image will cover the entire element with no stretching