Web
World Wide Web, which is also known as the Web, is a collection of websites or web pages stored in web servers and connected to local computers through the internet.
The building blocks of the Web are web pages that are formatted in HTML and connected by links called "hypertext" or hyperlinks and accessed by HTTP.
Web Server
A web server is a piece of hardware and software that uses the Hypertext Transfer Protocol, also known as HTTP, as well as other protocols to answer requests from clients making use of the World Wide Web. The hardware houses the web server software as well as the files that make up a website.
Apache web server
Apache HTTP Server is a free and open-source web server that delivers web content through the internet. It was developed in 1995
Apache HTTPD is an HTTP server daemon produced by the Apache Foundation. It is a piece of software that listens for network requests (which are expressed using the Hypertext Transfer Protocol) and responds to them.
to fetch a webpage, your browser sends a request to the web server, which searches for the requested file in its own storage space. Upon finding the file, the server reads it, processes it as needed, and sends it to the browser.
HTML
The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. HTML is the structure or skeleton of the webpage.
Attributes:
HTML attributes are terms that offer further details about the elements or are a modifier for the HTML element.
Here the highlighted part of the code is an example of an attribute.
The title attribute is often used to give additional information about an element.
<h1 title="This is heading tag"\>Example of title attribute</h1>
Structure of HTML:
<!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>Heading1</h1>
<h2>Heading2</h2>
<p> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cum blanditiis facilis odit assumenda eveniet doloribus ut numquam id excepturi exercitationem! </p>
<img src="" alt="" sizes="" srcset="">
</body>
</html>
!DOCTYPE html
DOCTYPE declaration is not an HTML tag. It is information to the browser about what document type to expect.
<!DOCTYPE html>
Head Tag
Only machines and browsers can access this HTML element, which contains scripts and metadata that you do not wish to share with users. <head></head>
Title Tag
he <title> tag defines the title of the document. The title must be text-only, and it is shown in the browser's title bar or in the page's tab.
Meta Tags
HTML lets you add additional metadata about your document on your webpage. The <meta> tag is used to provide that information.
Labels a page as containing adult content, to signal that it be filtered by SafeSearch results.<meta name="rating" content="adult">
Use this element to give a brief summary of the page so that people may understand what your website is about. <meta name="description" content="A description of the page"
Body Tag
The <body> element displays the content of the HTML document.
h1, h2 & p
The heading is written using the <h1> and <h2> tags, and the paragraph is written using the <p> tag. As you can see in the code, I've written things like "lorem20," which is a generator by emmet (emmet is a plugin) that produces random words. The number 20 written after "lorem" indicates that I want 20 letters in that paragraph.
Emmet is a plugin that helps us to write a bunch of code in a faster way. Emmet is written in JavaScript and works across different platforms: web browsers, Node.js, Microsoft WSH and Mozilla Rhino. Emmet is also customizable with a few JSON files.
<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<p> lorem20 </p>
img Tag
Img is an HTML element that embeds image into the webpage.
The path of the image you wish to embed is contained in the required
srcattribute.altattribute holds the text description of the image that gives text-to-screen readers if the image has some issue loading.
<img src="https://images.unsplash.com/photo-1517694712202-14dd9538aa97?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="IDe on laptop" width="300"/>
Live Server
Live server constant server updates the condition of the file's memory after you modified and updated it with a few changes.