hello! this is a test code for coding practice. make yourself at home if you found this.
some little notes go below...
structure your pages so that the h1 element is always the main heading, its sub-headings are h2, their sub-headings are h3, etc
remember that block level elements like p cannot be put in inline elements like strong or em!
bolded and italicised!
example of a line
break :3
heres a basic paragraph with all applied:
hello! do you want to sing a song? its quite simple! here we go!
la la laaa
lalalalaa
lala!!
here is a link, using attributes! make sure to include the https
you can also link to your files by doing this :D
using identifiers you can quickly link to a specific spot on your page
to insert an image do
make sure to avoid hotlinking!
use title for text on hover
lists
- here is an unordered list
- it shows bullet points by default
- all elements need a closing tag
- look at this list within a list!
- a
- b
- c
- cool right?
- you can also make an
- ordered list like so
- and even place
- other kinds of lists!
- definition lists
- this is a definition list, dl starts the list, dt is the term, and this is the definition
- you can make multiple definitions in one list
- like so!!!
- last one
- yippeeee
tables oh god
this is | a header | row |
---|---|---|
and these are simple | data cells | under the headers |
you can make multiple... | rows with these... | like so... |
and these attributes stretch over the specified cells | ||
---|---|---|
name | stretch | detail |
name2 | detail2 | |
name3 | detail3 |
css shenanigans
this is normal text, but this is red text.
you can use a class to apply the css of it to anything in these brackets.
a general principle is that your class and id names should describe the meaning and function of the element rather than the styling, so instead of calling a highlight text "red", title it "highlight"
this makes sure that if you prefer your highlight being in a different color, you only need to change said color and not the name of the element
these css properties pertain to styling text;
- color: makes all text inside the element a specified color.
- font-family: changes the font of the text. value can be a font name or a generic font family. best to have your specific font first and then a generic font family after for readability.
- font-size: specifies font size. value can be an actual unit or a relative one.
- text-transform: modifies the letters with the values "uppercase","lowercase" and "capitalize"
- text-align: align the text inside element with the values "left", "right", "center" or "justify"
- text-indent: indentation of the text, specified in a length of px or em
- font-variant: variants of font with the values "normal" or "small-caps"
- font-style and font-weight: use "italic"/"normal" and "bold"/"normal" as values respectively
- text-decoration: for emphasis, values are "underline", "overline", "linethrough" and "none". if you want multiple put the values with a space between.
- letter-spacing: spacing between letters. values can be given in px/em or with "normal".
- word-spacing: exact same as above but with full words.
you should have fun with it, and try to tinker with different css when you can!