Table of contents
⚠️⚠️**Disclaimer: **⚠️⚠️This blog is strictly prohibited for people who are way too serious. If you want bookish and English literature-type definitions, you can go to other blogs. Please enter at your own risk.
My writing skills: 🤣
I have never written a single blog on the internet, not even a Facebook post. I am too lazy for that. But now because my first ineuron class was so awesome, I think I owe them one blog under #iwritecode. Nice hashtag. Well, a hashtag is...(oh, we are going to talk about Html today). So, stay tuned.
The most left-swept language:😭
Name any other language to bring the text, images, links, and whatnot. If c, java, and python are about maths, then HTML is about colors and beauty. Haters will rant that the HTML tags are ugly("<>"). Don't listen to that, we are together in this.
Before talking about Html, we need to know how the web works. FYI, Html is the building block of a webpage just like the skeleton of our body. As previously discussed, we are not using bookish words(It is more complicated than I thought). Suppose, you are in a restaurant and you have ordered mutton biryani. After a few times, you are delivered that delicious dish. So, here your order is the request, the prepared food is the response and the restaurant is the server. A server does not only mean the heavy racks in a data center, it can also be software made by people like us. One of the most popular servers is Apache (not to be confused with Tvs apache bike, though I like the second one more). Enginx is another one. After getting a brief overview of the server, now we can discuss live servers.
A long long time ago, web developers used to create an HTML file and they used to double-click it to open the webpage and open it with notepad to edit that file. So, how did that work out? At first, when the file is double-clicked, the browser searches for the HTML files at the local host and shows the content of the file. So, if you change some of the contents in your HTML file, the browser does not show it. Then you have to reload the page. The process of reloading the browser page every time you make changes in your HTML file is very tedious. So, many text editors have this thing called a live server. Whenever you make any change in your HTML document, it shows up immediately in your browser. So, it saves you a lot of time and headaches🙌. Huge shoutout to Ritwick Dey 👏 %[github.com/ritwickdey/vscode-live-server-pl...
The structure of HTML 😎: An HTML file has its document type declared at the top to remove all of the confusion about the file type i.e. (). An HTML file has two parts. One is the head and the other is the body. In the human head, all of the information about the body is stored. This is the same for an HTML file. It has information about the HTML file within its meta tags. Now, What is a meta tag??
Book definition alert!!! The tag defines metadata about an HTML document. Metadata is data (information) about data.
My definition: Metadata is like a dictionary. Short and sweet.
Who would love to see a webpage of chrome showing 127.0.0.1:5500? No, not me. Hence, the title tag. We are done with the head😌 without banging our heads to the wall.
Html body: Whatever you write in this section, will show up on the browser one way or another. So, to showcase headings, paragraphs, images, audio, and line breaks separately and in an organized way, we use tags. In simple words, to "tag" is to mark to identify later. For example, the h tag for the heading, the p tag for the paragraph, and the img tag for the images. The tags are written under "<></>" generally. That will be discussed later.
The image tag(My favorite)
Nobody likes text(well, some of us do) but Images are way more engaging for a person. Html provides us
tag. it has two attributes (properties) which are src and alt. The src is for the source of the image. It can be a photo located in your C:/downloads/photos/public/unknown/notunderstandable/willneveropen folder or any shady website. The alt attribute is for showing an alternate text if there is some problem loading the image. Maybe you did not pay the internet bill!!!... Sorry, who am I to judge?
Check out some other attributes... %[developer.mozilla.org/en-US/docs/Web/HTML/E..
The least important topic: Lorem ipsum dolor..... sounds very beautiful right? Its meaning is well..... nothing. It is used as filler words. Open a text editor with emmet installed and type lorem10, lorem11, and lorem5 in an HTML paragraph, and press the tab after each of them, You will understand.
I would like to give you more information but my hands are tired from typing. But cheer up. If you like my content then I will be landing more blogs for you. Just let me know by giving me a thumbs up and a sweet comment.
Bidaaay(Goodbye in Bengali)