This is fun, i say.
^ me learning HTML right now.
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'
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!
Click here to go to the main page of my site!
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.
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.
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.
