Table of contents
The World Of Web
In this Era of Tech evolution everything is connected to each other through internet it's really important to understand the meaning of the web and the terms web1, web2 and web3 as these are part of our daily life. Web is the system of documents connected on the internet everything we do on the internet is connected to the web. The initial stage of the web was web1 In web1 only static websites were made without any interaction between the user and the website later in the web2 dynamic websites were made which allows the two way interaction between websites and users which makes the experience immersive. In recent years the term web3 is making huge attention it is basically nothing but all the previous experience of web in a decentralized platform we will discuss in detail about the web3 in some other blog.
All About Servers
As a web developer we deal alot with servers. A server is nothing but which serves or provides service on the internet. In the world of Web the server is most important thing as it provides all the resources for the website to run on the web. when a website is build we need to host the site but hosting the websites requires servers and the knowledge needed to maintain it. Even if we know all of this when the traffic on the website increases slightly there are more chances that the server might crash. In order to tackle this and make life of the developer easy there are some famous servers like apache2 and nginx server. Most of the sites use these servers usually.
These are for hosting on the internet but before hosting the site on the internet we as developer first check the site on our local machine for testing purposes. In order for this we use term localhost which is nothing but on the same device and localhost IP is 127.0.0.1 followed by the port number for example port numbers 8888.
Example : 127.0.0.1:8888
Most of the time during the development we deal with the localhost server. To avoid reloading of the server for each and every small change we can use Live Server extension In any IDE. This process makes very smooth experience for the developer there are so many live server extensions one of the famous one is Live Server Ritwick Dey
Emmet and IDEs
Emmet is one of the most important tool for web developer as it makes life of developer so much easy. By using the emmet we can increase the process of writing code very very fast as the shortcuts provided by emmet makes the process so easy and fast. There are alot of IDE's some of theme are sublimetext, atom, fleet, and VS code all of the text editors support the emmet. vs code comes with inbuilt emmet support we can use any editor based on our personal interests. you can learn more about emmet and provided shortcuts on the docs.emmet.io
Additional to the emmet and IDE's we should use the extensions or the plugins which makes the development process smooth.
Importance of HTML
HTML is one of the most important language for web development. HTML stands for Hypertext Markup Language it gives the web pages a structure we can say this as a skeleton for the web pages. on top of the html code we apply all the stuff to make it look good , interactive and dynamic. HTML follows a sequence according to that different tags are used. HTML have term as tags these are used according to the usage of text between the as heading, paragraph or images etc. there are alot of tags provided by html.
Before starting HTML code we need to specify the document type in order to avoid the browser rendering problems to do that just use shortcut !!! + Enter which gives the code snippet in IDE as <!DOCTYPE html> in order to get the boilerplate code of the HTML we can use shortcut ! + Enter which gives us the code snippet as below
<!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>
</body>
</html>
Now let's decode the each tag one by one.
<html></html> The total html code is wrapped up in the these tags as it is the HTML document
<head></head> The head tag includes all the data about the document which further includes some other tags which are meta title meta tag holds data about the data and title tag is used for giving the name for the site.
<body> </body> The body tag is where all the code goes whatever we write between these tags can be directly viewed on the site there are some of the tags which we can use according to the use cases in this part the various tags can be used.
The following are the Heading tags ranging from h1 to h6 according to the size of the text needed we can use the difference heading tags where h1 being largest and h6 being smallest.
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
For the paragraph part we can use the default tag as the p.
<p></p>
<br> => this tag helps in creating new line between we can say this as the break however there is no official abbreviation as break.
For the images to be shown in the site we use the img tag. Additional to the html tag this includes html attributes. HTML attributes provides additional information about the HTML tags. There are many attributes in the img tag there are mainly two attributes these are src and alt. src is nothing but the the source of the images basically location of the image or the link of the image and alt is the one shown where there are an error in searching src location or address then alt (alternate) text is shown in the place of the image.
<img src="" alt="">
There are alot more HTML tags to explore them visit the documentation of the HTML on the developer.mozilla.org/en-US/docs/Web/HTML
Thanks for reading...