Introduction to Web server and HTML
Tags: webdev, html, webserver, beginners
Published: 2023-02-28 13:41:29

 In this article we are going to learn about what is web server and few basic tags of the HTML.
As a beginner the first thought which comes to our mind after hearing the server is " Server means the racks of machines". But server does not mean the racks of machine but the
server is a software that serves. Most famous web server is Apache2 .The Apache2 Server is a free and open-source cross-platform web server software.

## About cPanel:
cPanel is the simplify server management. It acts like an Interface between the server. People used to write their HTML CSS code and used to dump on the folder. These folders were given
by the companies like bluehost  etc. Behind the scene there was the server installed like Apache2 & on top of that an interface was given to us which was cPanel

cPanel has default serving .There was a folder & name of the folder was:
**/var/html/www**

whenever you place any file inside these folders these files being served to you.

## Live web servers
One of the most popular  & useful live web server extension is **_Ritwick Dey's live server._**
It makes your existing server live. You can easily reload the dynamic pages by using this extension.

**How to install the live server extension?**

First go to your editor. There will be a extension named tool. Open it & search "live web server". You can easily get it. There are lot more options of live web server. You can install any of them by taking a look at it. 
If you have already installed the live web server extension you just need to enable it & disable it as per your requirement. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nyrztg0m84ibpc6zz07y.png)

## HTML

**HTML** stands for **Hyper Text Markup Language.** HTML is the code which is used structure a web page and its content. HTML consist of the series of elements and contents.
By using elements we can structure a web page.

**<!DOCTYPE html>**
when internet was getting designed ,there were lot of types of files which came around like pdf file, image file, text file etc. Everybody was having issue like what kind of file is this?
So at that time the standard came up like whatever the file it is, you have to write the type of the document first so that browser will know the type of the document.
Above we are clearly writing our type of document as _html_.
<html lang="en">
Browser needs to know in what language this page is being served. Whatever the first tag you are writing in that mention which language you are using. In above example we are using English language. _en_ means _English_.

HTML is divided into the TWO parts: 
1. head
2.body

**1. head:-**

The head part you can not see but still the info is there but majority is something we don't see. head is something that loads before body. Anything you write in head is not
visible to end user. It is meant for extra information.

**2. Body :-**
The information that you see on the web page.

**_Note :- The entire html page loads from the top to bottom._**


**HTML elements:**
HTML elements has some parts mentioned below:
**1. Opening tag:-**
This consist the name of the tag wrapped by the opening and closing angle brackets. This means the element begins or starts.

**2.Closing tag:-**
This is same as opening tag only the difference is it includes forward slash(/). This means the elements ends here.

**3. The content:-**
Content is the part between opening tag and closing tag. Content is nothing but text.

**4. The element:-**
The opening tag, closing tag and content together forms the element.

What are the attributes?
- The elements/tags can have the attributes. Attributes is nothing but the properties.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vqjwzt2akchm6fe1q7pt.png)

**List of some basic HTML elements:**

**1.h1:-**

It defines the most **important heading** in the HTML document.
Example:-

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cnm5zey9l35m5jdq0plz.png)

Headings can range from h1 to h6. The most important heading is h1 and the least important heading is h6.
Example:-

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/716dybcl81wrh7tkfdm2.png)


**2.p :-**
p tag represents the **paragraph**. 
Example:-

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iu3st4fzg8bqiuvm05oz.png)

**How to write so many words without actually writing it?**

If you don't want to write paragraph manually you can use lorem and the number of words in between the opening and closing tag.
It will give you required amount of words  in the paragraph. Make sure there is some space around p & /p then write lorem & the amount of words you required & then hit the tab it will give you 30 words.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cze2vu3d1e1mzxinmxqx.png)

**3.br:-**
If you want the content on the new line you can use br tag.
Example:-

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2uchg0jn8po8koh233c6.png)

**4.Image:-**
Whenever you want to add an Image you can use img tag. In this tag src will be your local file or something from internet.
alt means if by mistake your image is not visible then you can write the description of the image
It is not mandatory to write alt.

example:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1zrgk9epnj3lbqold6kn.png)

**_Never ever download any image from google & use it. Because the owner of the image may charge you for the copyright._**

Here are some websites form where you can download any image for free.
1.Unsplash
2.pexels

**5. The anchor element :-**
The a HTML element (or anchor element), with its href attribute, creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address.
href is hyperlink reference.

example:-


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i27wqhlef8ses1h37ter.png)