In our daily life, we use the web so much that whenever we need any information we directly jump into the internet and get the information, but what actually happens when you type something and get the result from the internet? There are many computers involved in this process that is connected to the internet, these are known as clients and servers.
Client: It is that computer that is connected to the internet and requests the required information by the user, it can be a phone, laptop, or any device that is connected to the internet and have web browsers like chrome.
Server: These types of internet-connected computers store webpages, websites, or apps. When a client requests any information on the internet then a copy of the webpage is downloaded from the server onto the client machine when a client device requests access to a webpage, where it is then displayed in the user's web browser.
Apache- web server
we have heard about so many hosting websites like Hostinger, Bluehost, etc. these websites provide us with a web server apache which accepts client's requests and send the response to the client. The Apache web server offers modules that expand the software's capabilities. Behind the scenes, these service websites install an Apache web server, and the top of this server's interface, known as Cpanel, is also offered. These hosting websites build a folder of HTML and CSS, which is then sent to us(the user).
eg: /var/HTML/www- apache server serves this folder and we have to upload all files in this folder.
Index.html
Most of us always create our first HTML file with the name index.html but few developers know why this is so. Instead of connecting to an individual file when you enter a website address, such as www.website.com, you are actually pointing to a directory listing of all the files.
The web server will attempt to provide a file by default called index.html or default.html, but it may serve a different file. You can configure this by changing the configuration files on your web server.
You will get a listing of the files if the server cannot locate any files to serve (for example, if you did not include an index.html file or renamed it without changing the server's configuration), which is rarely the intended behavior, especially at the root of a website.
Live Server
If we create a file with an extension .html, the webpage first loads in the memory(RAM), and then memory loads it and serves this, and to change anything to the webpage we have to refresh memory, so we need something(any software) which continuously remind the memory about any change and automatically refresh it, for this Live Server comes into the picture, it tracks the state of a webpage and if there is any change made by the developer in html file then it notifies that change and we can see all the changes in the browser. The most popular example of a live server is Ritwick Dey's live server extension.
Emmet
For a developer it is very time consuming to write all code without any shortcuts so to tackle this issue Emmet comes into the picture, it helps by providing various shortcuts for a code editor. For example, instead of writing whole html code like meta tags, head we can just press '!" and then tab and we can get complete boilerplate code for the html file.
HTML TAGS
Heading tags- <h1>, <h2>
In an HTML file, we can make some text bigger than others by using h1 and h2 tags, h1 is bigger than h2, h1 is mainly used for heading, and h2 for subtitles. Example- <h1> Hello World </h1>, <h2> how are you</h2> in this example "hello world" is larger as compared to "how are you".
Paragraph tag-<p>
This tag is used for paragraphs, after using this tag our text will start from the next line, we can add a title attribute(properties) to this tag for better accessibility. Eg: <p> text inside this paragraph </p>
Image Tag-<img>
To add or insert an image in the document we use an image tag. There are many attributes that are used within this tag like src, alt, height, width, etc. Src attribute= The src attribute is required and contains the path to the image you want to embed, for example- <img src=" path" >. Alt attribute= The alt attribute holds a text description of the image, which isn't mandatory but is incredibly useful for accessibility — screen readers read this description out to their users so they know what the image means. Alt text is also displayed on the page if the image can't be loaded for some reason. For example, if you insert an elephant image inside an image tag and in the alt attribute you write only elephant and by default your image is not loaded then viewers can read the name elephant, <img src=" path of an image" alt=" text for description of that image" >. Height and width attributes are used to set the height and width of the image for the webpage.
Lorem Ipsum
Many times we need to insert some text to check our webpage and it is very time-consuming to write such texts again and again so we use a shortcut called Lorem Ipsum, it is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. We can get sentences of 300 words or 6 words by just writing lorem300 or lorem6 and then pressing the tab.