Time to learn how to insert a favicon, it'll show up as this site's icon in browser tabs.
Basically, in the 'head' and in a 'link' tag, you just have to 'href' the picture and 'rel' it as an icon.
I was studying HTML through a very bad source because i had to, but now i'll use Firefox's guide to learn. Thus, i decided to hide the old learning experience to make things less confusing.
Learning about 'headers' (again?!)
The text above has a h1 tag.
Header number two.
Header number three.
Header number four.
Header number five.
Header number six and the final number available for headers.
Learning about 'ordered lists'
One
Two
Three
Four
There are 5 types of 'orders' in ordered lists, they are: numbered (type="1"), lettered (type="a"), caps lettered (type="A"), roman numbered (type="i"), caps roman numbered (type="I")
For numbered lists, you can choose where the list will start by using start="", so if you want the list to start on '5' you'd write type="i" start="5". I don't understand why it doesn't work with lettered lists.
One
Two
Three
Four
One
Two
Three
Four
This time it is 'unordered lists'
THERE
IS
NO
ORDER
One more list type, 'description list'. Basically you list something (dt) and then describe it (dd) afterwards.
Test
Process to evaluate if the subject reaches one or more objectives.
dt
HTML tag that is the acronym for 'describe term'.
It doesn't look much like a list, if i'm being honest.
Time to learn about the hypertext part of the HTML, links!
And if you want to open the link on a new tab, you gotta use the 'target' attribute. '_blank' for opening the link in a new window but modern browsers force it to open in a new tab (there should be one for new tabs, tbh), '_self' to open link on the same tab, '_parent', '_top', and 'framename' have something to do with frames and i don't fully understand them yet so i'll have to come back to them later.
Learning about something that folks say should be done in CSS: styling. The 'style' attribute has these properties: background color (background-color), text color (color), text alignment (text-align), text/font size (font-size), and font (font-family).
Learning about background colors. To change the bg color you have to open a 'style' attribute in the 'head' element and create a 'body' element using {}, within that 'body' you gotta add the 'background-color: color;' property.
Color values can be determined with RGB ((255, 99, 71)), HEX (#ff6347), HSL ((9, 100%, 64%)), RGBA ((255, 99, 71, 0.5)), and HSLA ((9, 100%, 64%, 0.5)).
To have a gradient of colors as the bg color you have to use the 'background-image: -gradient(,);' property in the same way as the bg color property, after the ':' you put the type of gradient (linear, radial, conic), within the parentheses you put the direction (down/up/left/right/diagonally with two directions/angle), if linear, and colors (can be as many as you like and they appear in the same order).
Alright, this where i'm supposed to start learning css but i'm a bit aprehensive because i'm not learning from the best source and it's very confusing and chaotic.
For organization and ease of read you're supposed to put everything in the css file in the same order as your html file.
Now i'm gonna undo the stylisation i did previously to put it in the css file.
It's really annoying that in the 'style' element of the HTML file you must use CSS comments.
To communicate between css and html you gotta create a 'class' in css and call it in html. To do, in the css, so you gotta use .class_name + {} and put whatever you want in the brackets, then, in the html, you call that 'class' with 'class=""' in whichever tag you want to use the 'class' in.
Boxes!
Boxes in CSS are created with 'div', should be 'box', if it's a box 95% of the time why call it a division?????
'div' in tags for HTML and 'div' + {} in CSS.
RELEASE ME FROM THIS BOX!!
Ok, so i tested it out and it's not a box! Turns out it's a rectangle.
Will i morph into another shape???
Nooooow, i understood why i was seeing blocks elsewhere, it's because of the 'display' property, it actually has a ton of property values so i won't write them all but for the box it's 'display: block;' and then you set the height and width of the block and everything else you may want.
A cute little wide box.
Now it's time to learn about 'id', and from searching superficially it seems that it's better to use as many 'classes' as you want but only one 'id' to elements because they assign a unique identifier and integrate with JS code, also because if you are gonna use the same 'id' on multiple elements you're gonna have to individually configure each of them but with 'classes' you only need to do it once.
To use 'id' you use the same process as 'class' but with 'id=""' in the HTML and '#' in the CSS.
I'll use the same 'class' as the cute box but with a different 'id' in each box, this means each box will have the same structure but with a different configuration.
cute 1
cute 2
cute 3
Ok, now i'll start learning everything again from scratch for, like, the fourth time in my life, hopefully this time i'll actually learn it properly.
Just by skeeming Firefox's guide i can see it has a different approach to teaching, it has many more explanations instead of just saying: p is for paragraphs, create a paragraph.
This is much better because understanding how something works provides an abstract understanding that is much more creatively useful than rote memorization. Basically i'd rather how to write by by undestanding the processes involved than memorizing a dictionary.
- As the image below shows, an HTML element has three components, an opening tag, the content within the tag and the closing tag.
The |em| tag was chosen an an example and it italicises the text. From now on i'll use | | for tags because before neocities doesn't like using > inside the text, before i wasn't using anything and that's not ideal either.
- Now it's time to learn about nesting! That is, using elements inside other elements. Pretty straight forward concept for which they used |strong| as the example tag, it puts the text in bold.
An important note and something many will try to mess around with is that the nested tag must be opened and closed within the element it is nested to.
I'm a bit unsure about my language, it's awkward to chose between element and tag more often that not.
- The void is here!
Void elements are made of a single tag and usually embed or insert something. The chosen example was the |img| tag, which i already used a few times, so i'll skip it this time. Despite trying to learn HTML a few times i'm already learning something new; it's good to end void tags with /> for it to be valid XML (another markup language used to store data).
- Attibutes: extra content inside tags that carry information. They must have a space betweet the element name and it, an attribute name + ="" with a value within the brackets, for example |img src="img.png"|
-- Boolean attributes. Everybody knows Boo is all about duality so of course those attributes reflect that but there's a catch, this time Boo is set to false by default if there is no attribute and set to true by default if there is an attribute, this means that, for example, the attribute |disabled| will always be false until it exists in the code (e.g. |input type="text" disabled="disabled" /|). They are also special in that they can be written as simply their attribute name (checked, for example) or an empty "" (checked=""). Very cool stuff!
- Ommiting quotes in attributes: there are situations you can skip them but just use them anyway to avoid problems. They can be single or double but they must remain consistent within the attribute ("hi' = bad).
Funnily enough, i just mentioned neocities disliking the use > and it turns out there's a way to use those characters, you have to reference them, which i did right at the start of this page but forgot about it. In the case of < and > their references are &+lt+; and &+rt+;. For both training and properness i'll use those references from now on, but i'll leave the previous | | as is because you don't erase history!!
- Anatomy of an HTML document.
Alright this part is gonna be pretty big and has a ton of special characters so i'll try to simplify everything as much as possible.
