Hellaur there, this is a heading

this is a paragraph (p)

here's a tag reference!

this page is mostly just for me to follow along with HTML tuts. here's some headers:

heading 1, h1

heading 2, h2

heading 3, h3

heading 4, h4

heading 5, h5

Headings can be resized with the CSS "font-size" property, and "style" attribute (style="font-size:[]px;"Heading text")

html links are defined with the "a href" tag, that you close with "/a"!

here's a link

(href) indicates the links destination, and the link text is visible to the reader.

HTML images are defined with the "img" tag!

The source file (src), alt text (alt), width, and height are provided as attributes.

pixel animation of cat

Never forget the end tag!

Some elements will display correctly if not closed, but errors may occur!


Some HTML elements are "empty"

For example, the "br" tag defines a line break...

...and has no closing tag!

HTML is also not case sensitive, but lowercase is generally recommended, and even demanded in stricter XHTML.


HTML attributes :D

"a" defines a hyperlink, and "href" specifies the host URL

"img" embeds an image, and "src" specifies the image path.
These can be absolute (external image on another website),
or relative (image hosted within the website).

An "img" tag should also contain the "width" and "height" attributes (in pixels).
The required "alt" attribute specifies alt text, which is useful if the image doesn't display, or for users of screen readers.

"Style" is used to add styles to an element, like color/size/font/etc, like this paragraph being red!

The "lang" attribute inside the HTML tag (html lang="en-US", specifying US English!)

The "title" attribute displays extra information about an element.


Horizontal rules, pre-formatted text

The "hr" tag defines a thematic break in HTML content. It's used to separate content, or define a change in a page.

The "pre" element defines pre-formatted text (like a poem with line breaks), usually displayed in fixed-width (like Courier), and preserves spaces and line breaks.


HTML STYLES!! :3

The HTML style attribute syntax: "([tag] style="property:value;")", "property" and "value" both belonging to CSS

Putting the "style" attribute in the "body" heading can change a property for the entire page, like "background-color:powderblue;"

...and can also be used in other body elements!

The "color" property defines text color.

The "font-family" property defines the font.

The "font-size" property defines the text size.

The "text-align" property defines the horizontal text alignment.

Multiple style properties can be applied within specified quotes, between semicolons.


HTML colors!

A color can be specified with a color name, and HTML supports 140 standard color names!

For example, DodgerBlue!

You can also add borders, and apply the colors to them :)


HTML FORMATTING!!!!

THIS IS BOLD (b)
this text is STRONG (strong)
~this text is italic~ (i)

The (em) element defines Emphasized text, and a screen reader will pronounce an emphasized word with verbal stress.

(small) makes text smaller

(mark) defines text to be marked/highlighted

The (del) element defines text that has been deleted from a document.

The (ins) element deines text that has been put inserted into a document

(sub) is subscripted, like H2O

(sup) is superscripted, like footnotes[1]


html quotation and citation

(blockquote) for quotations, usually indented:

Is this website good

(q) for short quotations

my goal is to: make peanut butter banana sandwiches

(abbr) defines an abbreviation or acronym, like HTML, CSS, etc.

Do only old people really say LOL instead of younger people now?

(address) defines contact information, can be an email, URL, physical address, etc.
Usually renders in italic, and will always add a line break

Written by Zero
Visit me at:
redvawx on twitter

(cite) defines the title of a creative work, usually renders in italic

Realign by Red Vox. Released in 2020.

(bdo) is used to override the current text direction, (dir="rtl") meaning "right to left"

this is right to left!

html rgb and rgba colors

represented by rgb(red,green,blue)

is this red?? yea ("color:rgb(255,0,0);")

the "alpha" value in RGBA defines opacity (rgba(255,0,0,0.8))


html HEX CODES!!!

Formatted as #RRGGBB (red green blue), hexadecimal values between 00 and ff (same as decimal 0-255)

#ff0000 is displayed as red because red is set to the highest (ff) value

#ffffff is displayed as white


HSL and HSLA colors

formatted as hsl(hue,saturation,lightness), or hsla(hue,saturation,lightness,alpha)

Hue is a degree from 0 to 360. 0 is red, 120 is green, and 240 is blue.

Saturation is a percentage, 0% means a shade of grey, and 100% is the full color.

Lightness is also a percentage, 0% is black and 100% is white.


CSS! Cascading Style Sheets!

CSS can control the color, font, size of text, spacing, and more!

CSS can be added to a document in 3 ways:
Inline, by using the style attribute,
Internal, by using a (style) element in the (head) section,
or External, by using a (link) element to link to an external CSS file.

External CSS files are the most common.

Inline is used to apply a unique style to a single HTML element. This paragraph is red.

Internal CSS is used to define a style for a single HTML page, in the (head) section of an HTML page, with a (style) element.

External CSS is used to define the style for multiple HTML pages, linked in the (head) section of each HTML page.

A style.css file could look like this:


CSS extras

the Border property defines a border around an HTML element.


Padding defines a space between the text and the border. This one is set to 30 pixels.


Margin defines a margin outside the border. This one is 50 pixels.


External style sheets can be referenced with a full URL or path relative to the current web page, using (link rel="stylesheet" href="url"), (link rel="stylesheet" href="/html/style.css"), or (link rel="stylesheet" href="styles.css").


HTML links

The target attribute specifies where to open the linked document.
_self is default, and will open the document in the same window/tab
_blank opens the document in a new window or tab
_parent opens the document in the parent frame,
and _top opens in the full body of the window.

All of the links on this page carry the "_blank" target attribute, try it out!

Absolute URLs carry a full URL in the href attribute, while relative URLs carry a local link to a page within the same website.

An image can also be used as a link with the img tag inside the a tag!

Black box with white arrow with text that reads: My stupid twitter, followed by several exclamation points.

Using mailto: inside the href attribute creates a link to the users email program to let them send a new email to the specified address.

The title attribute specifies additional information about an element, and can be used inside the href attribute.

visit my favorite twitch streamer :3

link colors can also be changed with css, like this: