# All I Learned from a Tutor-Recommended Youtube Video Okay! Hackmd readers. I’m back again. It’s your favourite amateur programmer on her journey to becoming a top-tier professional Web3 developer! Got another assignment to complete and that is basically to review a video I was tasked with watching. Funny story. Even though I have watched at least 10 videos about HTML, apparently my tutors do not believe that's enough. So I was slammed with another one! Here goes… The video tutorial was basically a comprehensive rundown on the basics and not-so-basics of HTML for beginners. ### First things first. What is HTML? HTML (Hypertext Markup Language) apparently, is the standard markup language used to create web pages. It's the backbone of a website, providing the structure and content that the web browser renders to the user. In this tutorial, the tutor covered the basics of HTML, from definitions to the creation of a simple online taco shop. To be honest, I’m literally racing against time here, so I’ll try to be as brief as humanly possible while at the same time trying my dammest to cover all the bases. Stick with me, okay? Now, in the first part of the video, the tutor basically says that HTML is a markup language that uses tags to wrap around content, telling the web browser how to display it. A basic HTML document should consist mainly of a `DOCTYPE` declaration, `<html>`, `<head>`, and `<body>` elements. Here’s an example below: ``` <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <!-- content here --> </body> </html> ``` For some reason that i haven’t yet fathomed, Hackmd never allows me to type normally again the moment i try to display a code in actual code form. Dear reader, if you have a solution for this, please help a *fledgling tech Sisi*. On to the next part where the tutor showed how HTML elements are represented by tags, which are surrounded by angle brackets (`<>`). Tags usually come in pairs, with the opening tag preceding the content and the closing tag following the content. Some common HTML elements include: - Headings (`h1-h6`) - Paragraphs (`p`) - Links (`a`) - Images (`img`) - Lists (`ul`, `ol`, `dl`) - Tables (`table`) - Forms (`form`) If you didn’t know all of these before now, I hope you’re feeling just a teensy bit smarter now? Now, I’m really going to put a rush on things because, like I said….."*time waits for no woman*", right? The tutor powered on too like i’m doing right now. He jumped right into lists and i even learned a new thing at this point! I leaned about an interesting sort of lists called descriptive lists ‘dl’. Wild, right? Of course, then he dove right into the adding of links, both internal and external. Now, at this point, I realized (with my instructor’s help, of course) that his color-choosing skills were *"pfft!"* because, tell me why he chose a gray color scheme and now the links are looking like neon lights having a fever or some equally ignomious disease? Moving right on, apparently links are added using the `a` element, which requires an `href` attribute to specify the link destination, for example: ``` <a href="https://www.example.com">Visit Example</a> ``` Right after links (or was it before?), the instructor taught how to add images to the webpage. Images are added using the `img` element, which requires a `src` attribute to specify the image source, for example: ``` <img src="image.jpg" alt="Example Image"> ``` Now, as I’ve learned from the 3 or 12 HTML tutorials I’ve watched so far, no tutor worth his salt ever leaves the mic and ring light without mentioning the importance of semantic tags. Semantic tags provide meaning to the structure of a web page, making it easier for search engines and screen readers to understand the content. Some common semantic tags include: - `header` - `nav` - `main` - `section` - `article` - `footer` Oh! I learned too that although the <b></b> tag still carries out the function of emboldening text in your webpage, its not exactly semantically readable and this make it bad form to use it. The more semantically acceptable form of emboldeneing text now is the <strong></strong> tag. Seems a bit like an “in with the new, out with the old!” sort of matter to me, but what do I know? I’m just an ignorant newbie tech-Sisi who is still trying to understand the hype behind hypertext. You got the pun, right? And from this point, the tutor just decided – without consulting us, I might add– to amp the difficulty level. He introduced tables and forms! Now, from what i actually heard and practiced, the key thing to remember is this: HTML tables are created using the `table` element, which consists of rows (`tr`) and cells (`td` or `th`) and HTML forms are created using the `form` element, which contains input fields (`input`) and submit buttons (`button` or `input type="submit"`). Like this for tables: ``` <table> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> </table> ``` And like this for forms: ``` <form> <label for="name">Name:</label> <input type="text" id="name" name="name"><br><br> <input type="submit" value="Submit"> </form> ``` And that was it! I won’t bore you with the html code for my own online taco shop. That’s for my lecturer to evaluate, and not for you to judge, *Judge Judith!* ### Roundup Time! I have now come to the end of my expository article (Nods sagely), and now i must thank you for bearing with my absolutely unserious lean towards this assignment. I can assure you though, that if my tutors ever get round to reading it, I’ll definitely be wearing a much more serious mien when next I trouble you with an article of mine, since they would probably have smacked some decorum into my keyboard (Yep! I’ll blame it all on my keyboard. It’s just too cheeky by half. Ha ha!). Cheerios for now!