In this article, we are going to talk about some basic introductions to the web, how the web works, a few HTML tags, etc.
Basic Introduction on how the web works.
Whenever we open any webpage in our browser, our browser(aka client) sends a request to the web server(E.g. Apache web server), and after receiving a request from the client web server gets the requested files from the physical computer and sends them to the client, web servers send different types of files in this article we are going to talk about HTML files only.
server:- a server is basically computer software installed on a physical computer or virtual machine in the data center and it allows us to access its files from anywhere in the world. Apache is one of the many software and it is the most popular one but in general, we call the physical and software part both as servers.
client:- the client can anything that can send a request to the server, your computer, your phone e.t.c can act as a client.
Basic Introduction to HTML.
HTML stands for Hyper Text Markup Language. HTML defines the structure of a website. HTML files consist of different elements and tags. This is what a simple HTML file looks like.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>This is h1</h1>
<h2>This is h2</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In, deleniti?</p>
<img
src="https://images.pexels.com/photos/879109/pexels-photo-879109.jpeg"
alt="img"
/>
<a href="./home.html">go somewhere</a>
</body>
</html>
<!DOCTYPE html>
<!DOCTYPE html>this is the first line we see in any HTML file, this line tells the browser to parse this file as an HTML file.
<html></html>
this is the second line we see in any HTML file, every element and tag inside your HTML document should be wrapped inside of the element. lang attribute tells the browser that we are using the English language in our HTML document. The element is also known as the root element.
<head></head>
the head element contains all the information which are not visible to the user but this information describes the HTML document and is needed for an HTML document to work properly.
meta
this element is used to provide additional information about the HTML document and its content. this tells the browser to use UTF-8 character encoding.
<title></title>
This element is used to set the page title which we see in our browser's tab.
<body></body>
All the content we see on a webpage is wrapped inside this element. Every heading, paragraph, image, etc we want to see on a webpage must be wrapped inside this element.
<h1>This is h1</h1>
<h2>This is h2</h2>
This is the heading element, we use these elements to write a heading on our web pages. we can use six levels of heading in HTML documents h1 to h6. h1 represents the main heading, h2 represents the sub-heading, and so on.
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In, deleniti?</p>
This is the paragraph element. We use this to write paragraphs on our webpage. Currently, I am just using a filler sentence called Lorem Ipsum, which is just a placeholder text and it doesn't mean anything. It is used when we don't have the content yet, but we want to display something on the page.
<img
src="https://images.pexels.com/photos/879109/pexels-photo-879109.jpeg"
alt="programmer image"
/>
Whenever we want to display images on our webpage we use this element. We can add many different attributes to the
<img/>element, but here we are only adding two attributes, src attributes contains the source of the image, and alt attributes contain the alternative text for the image. alt attribute is necessary because if the image doesn't load up alternative text gives a basic idea about the image to the user. It is also necessary for screen readers.
<a href="./home.html">go somewhere</a>
The element is known as the anchor element. This element is used to hyperlink between web pages and documents, href attribute contains the location of the document, and the content inside the anchor tag indicates the location.
Top comments (0)