anything that has < > delete the spaces between the symbols and the text directly beside them, indent not always needed in style.



what < h1 > (text) < /h1 > looks like

what < h2 > (text) < /h2 > looks like (it goes up to 6)

STUFF THAT GOES ANYWAY/BASIC LAYOUT:

STUFF THAT GOES IN THE HEAD SECTION:



STUFF THAT GOES IN THE STYLE TAG:


You use < p > < /p >" to make a paragraph. Look how easy it is wahoo woah there!! Oh yeah and < br > starts a new line.
Like this!!!(ﾉ´ヮ´)ﾉ*: ･ﾟ(ﾉ´ヮ´)ﾉ*: ･ﾟなあなたなあなた
also!! using < em > < /em > gets you italics for whatever text is inside it. looks like this!
bold uses < strong > < /strong > and looks like this!
< ul > < /ul > makes bullet point lists, each item must be surrounded by < li > < /li >!!

numbered bullet points still have < li > but use < ol > < /ol > instead of < ul>.
images use < img > with the web adress or file link. Specific sources can me made with < img (fingerspace) src= >.

to change the image size, inside of the < img > arrows a width="(number)" or height="(number)" can be used.

CSS is a type of code seperate to html, the current one, but is included in hrml. Using the tag of < style >, (which needs to be inside the head tag to work) similar to head or body themselves shows that anything inside it is in CSS code and will be for decorating the site. < head > is what you dont see, < body > is what you do see. inside of < style > tag to change colour put what you want to change, for example all text with the h2 size would be

< style >

h2 {
colour: rbg(0,0,0);
}

< /style >

use body instead of h2 to change everything!! Also if you use

body {
}

you can then use background-colour: rgb(0,0,0); too! dont forget to always put ; after code pieces in a style tag.
When making one thing a colour, when the text is wrote instead of < h2 > use < h2 id="(a name)" > these must use dashes instead of spaces,and when using an id instead of h2 use a # before the id. so later in the style tag you can write

#(a name){
colour: rbg(0,0,0)
}

Also #FFFF or just that typa colour code can be used instead of rbg(0,0,0).

You can hilight text by using background-colour= inside of a soecified text { }.To assign texts to groups instead if individual ids, use class="(another name)" so you can then use

.(another name) {
}


< p > < img style = " float: left;" src="(image)" (paragraph here/text) < /p >


makes gthe text wrap around the image instead of looking wonky. Can replece left with right.


< div style="float: right; width: 100px; font-size: 80%; padding: 0.5em;"> (sidebar text)< /div >


is how to make a sidebar of text from a paragraph. (the code goes after < p > but before the paragraph text itself.)


< p style="overflow: auto;" > (paragraph and div whatever else) < /p >

is how to avoid the image going overboard.


< style type="text/css">

.container { overflow: auto; }
.menu { float: left; width: 150px; border: 1px red solid; }
.main { margin-left: 155px; border: 1px green solid; }
< /style>


is how to assign shape/textbox into existence. Basically adding details into a variable inside of the style tag so that when you type something down in < body > you can use them on your text. An example of using them in head is:


< div class="container">
< div class="menu">
(text here/sidebar)
< /div>
< div class="main">
(main text)
< /div>



and that code looks like this: - the div here goes around the text like a paragraph or h2 would, though it starts a variable, shows the text you want inside of it, then ends the variable with < /div > before grabbing the other variabke for the other text.



(text here/sidebar)
main one



this is a good source for the above code.


Also! the code used to embed a link with the desired text is this!


< a href="(link)"> (what you want the link to show as or say instead of it)< /a>


< style>
body {background-image: url("(image link)");}


is how to set an image background, be wary it can get uh not great across different size platforms/devices.


This is how to make an image link (this goes in the body tag!!)


< a href="(page you want it to go to"> < img src="(link to the image youre using)">


With proportions:

< a href="(link)">< img src="(image link)" style="width:42px;height:42px;">< /a >


How to hilight text:


< span style="background-color: (colour);" >(text)< /span>



back/sad homepage