HELLO!!!!!!!!

html notes

making words and related stuff:

you us [p] for paragraph, h1-6 for heading, [br] for line breaks, [hr] stands for horizontal rule but it's just a line, [abbr title="full name"] followed by the abbreviation, [bdo] to reverse text, [pre] to preserve all formatting

you can throw in a title attribute to put a tooltip on

technicallity stuff:

put [!DOCTYPE html] at the start of a doc, put [html lang="en], [!-- --] for comments, creat icon with [link rel="icon" type="image/x-icon" href="file"] in your head, ".." for file paths let you go a folder up

[meta] stores data in the formate name="info type" content="info", with info such as author and name or keywords and said keywords, you can have as many as you want in the head

media:

you use [a href="link"] for links but you can also write whatever text you want to replace the link with, [img src="pic or path to pic or link to pic" alt="put an alt text"], use [pre] to display text with all spacing

inline styling:

you're gonna be using css but for inline styles you do style="property:value;property2:balue;", you can do color, background-color, text-align, and more

customizing words:

[b] for bold, [mark] to highlight, [del] to strikethrough, [ins] to underline, [sub] for subscripts, and [sup] for superscripts

links:

the target attribute has 4 varients: "_self" will open in the same tab, "_blank" is new tab or window, "_parent" opens in the frame, and "_top" opens in the full window body

by putting an image tag within the link tags you can click the picture to go to the link

by putting the title attribute in you can also create a tooltip on the link

bookmark links:

put an id on the tag you wanna bookmark, then create a bookmark link by href="#id", you can also go to bookmarks on other htmls by doing "file.html#id"

tables:

now i know you literally won't be using this but....

start with [table], create a table row [tr], then table heads [th], then in the next row put some data [td]

you can mess with the borders, width/height, text alignment, padding, and make a td span multiple rows or columns

lists:

[ul] are bullet points, [ol] are ordered, [li] are your list items, [dl] lets you make headers/sections for your list with [dd] being the item in each section

list-style-type lets you change the bullet style and just type changes the order style

containers, blocks, and more:

stuff like [p] will take up an entire block, but if you make a [span] it'll take up whatever space you specify it to be

[div] is a block sized container, very handy and all, and can have set sizes and be centred with margin:auto or put side by side with display:inline-block

while [span] is basically div but for like paragraphs and is inline

class and id

class is case sensitive and applies to all elements and it's css container is denoted by ".", while id is unique to a singular element is denoted with # in css

iframes

you can use this to display websites INSIDE the website with [iframe src="url" title="description"]

html layouts and semantics

responsive design

set a viewport with [meta name="viewport" content="width=device-width, initial-scale=1.0"]

use quantifiers like percentage and vw

code?

you can write real ass code and not this fake html stuff using the [code] element

you can do math with variables, everything else is pretty much stupid

entities

• < = [&]lt;
• > = [&]gt;

other stuff that i don't wanna write about but you could look into if it seems interesting:

• image mapping lets you click on different areas of an image and have them direct to different pages
• [picture] lets you essentially change the image based on screen size
• [base] set base url, whatever that means

testing area: