History of HTML

The first version of HTML was written by Tim Berners-Lee in 1993, Tim Berners-Lee, a physicist at the CERN research institute in Switzerland invented HTML in 1991, The first version consisted of 18 HTML tags. Now, there are currently about 140 HTML tags, although not all of them are supported by modern browsers**.**

Web Server and Apache

Now before talking more about HTML let's discuss a little bit about web servers.

A web server is like a helpful assistant for the internet. It's a mix of software and hardware that uses the language of the web, called HTTP(Hypertext Transfer Protocol), to respond to requests from users.

When you visit a website, your browser sends a request to the web server. The web server understands this request and knows how to find the information you want.

Once the web server receives your request, it gets to work. It searches for the specific file or data you asked for, like a web page or an image. If it finds what you need, it sends it back to your browser.

What is Apache

The Apache HTTP Server is a free and open source cross platform web server software. Think of Apache as the traffic controller of the web. It's the web server software that receives requests from users and delivers web content using the HTTP protocol. It processes these requests and serves web assets, such as web pages and images, to users' browsers.

Why index.html

websites contain several pages. When a user enters "www.website.com/contact_us" in the browser, the server looks for the "contact.html" file and serves it as the requested page. However, when the user enters just "www.website.com," the server needs to determine which file to serve as the default page.

By convention, web servers typically look for an "index.html" file in the website's directory as the default landing page. If the server finds an "index.html" file, it will serve it as the default page. This ensures that users are presented with the desired content immediately upon accessing the website's root domain.

While "index.html" is the most commonly used default page name, web servers can be configured to recognize alternative default page names, such as "index.htm" or "default.htm." These variations allow for flexibility based on server settings or personal preferences.

The purpose of having a default page is to provide a seamless and consistent user experience by displaying relevant content right from the start. It prevents users from seeing a directory listing of all the files, which can be confusing and undesirable.

In summary, the default page (often "index.html") is the landing page served by the web server when users access a website's root domain. It ensures a smooth browsing experience and helps maintain the organization and structure of the website's content.

Emmit

Emmet is a set of plug-ins for text editors that allow for high speed coding and editing in HTML, XML, CSS and other structured code formats via content assists.. It allows for faster and more efficient HTML and CSS coding by providing a set of shorthand abbreviations and keyboard shortcuts.

The Emmet plugin expands these abbreviations, known as Emmet abbreviations or snippets, into full HTML or CSS code snippets. It greatly speeds up the process of writing repetitive or complex code structures, such as HTML elements, classes, IDs, attributes, and CSS properties.

The plugin supports a wide range of coding editors and IDEs, including Visual Studio Code, Sublime Text, Atom, and more. Once installed and configured, Emmet enables developers to write code using shortcuts and abbreviations and generate the full corresponding code instantly.

For example, by typing div.container>p.title+ul.list>li.item*5, Emmet expands this abbreviation into the following HTML code:

html

Copy code

<div class="container">

<p class="title"></p>

<ul class="list">

<li class="item"></li>

<li class="item"></li>

<li class="item"></li>

<li class="item"></li>

<li class="item"></li>

</ul>

</div>

This dramatically reduces the time and effort required to write repetitive HTML or CSS structures, making it easier to create and manage complex layouts and structures with minimal keystrokes.

In addition to expanding abbreviations, Emmet also provides other powerful features like numbering, grouping, nesting, and mathematical operations for quickly manipulating code.

Overall, the Emmet plugin is a valuable tool for web developers, streamlining their workflow and enhancing productivity by allowing for faster and more efficient coding of HTML and CSS.

More About HTML

Let's talk about some elements in HTML. There are many elements and that's it basically. We have <h1> or <h2> that element to write headings, <p> for paragraphs, <img> for images, <a> to create hyperlinks to web pages and so much more.

Heading

HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading.

Example

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<h6>Heading 6</h6>

Note: Browsers automatically add some white space (a margin) before and after a heading.

We will get the below output -

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraph

<p> tag defines a paragraph.

Browsers automatically add a single blank line before and after each <p> element.

<p> This is my first Paragraph </p>

<p> This is my second Paragraph <p/>

If we write the above lines we will get the below output -

This is my first Paragraph

This is my second Paragraph

Both the paragraphs take the entire horizontal space as they are block level elements.

Attributes

Both Heading and Paragraph elements support only Global Attributes. These attributes are common to all elements and can be used on all elements. One of such attribute is the title, It contains text representing advisory information related to the element it belongs to.

The Image Embed Element

The <img> element is used to embed images in the document.

<img class="images"

src="https://images.unsplash.com/photo-1621839673705-6617adf9e890?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1932&q=80"

alt="Let's start the journey of web development">

This will give us the below image -

Attributes

The <img> element has some more attributes along with the global attributes.

alt - It is not mandatory but it is very useful. It defines an alternative text description of the image. If the browser is unable to display the image then it replaces the image with the alternative text from the element's alt attribute. Setting the attribute to an empty string (alt=" ") indicates that this image is not a key part of the content and non-visual browsers may omit it from rendering. The visual browser will also hide the broken image icon if the alt is empty and the image fails to display.

decoding - It provides image decoding hints to the browser and it has three allowed values, sync, async and auto.

• sync is used to decode the image synchronously, for atomic representation of the image with other content.

• async is used to decode the image asynchronously, to reduce the delay in presenting other content.

• auto is the default, where the browser decides what is best for the user.

fetchpriority - It provides a hint of the relative priority to use when fetching the image. This has three allowed values such as high, low and auto. high signals a high priority fetch relative to other images whereas low signals a low-priority fetch relative to other images and auto is the default, it signals automatic determination of fetch priority relative to other images.

ismap - This is a Boolean attribute that indicates the image is a part of server side image map (an image map is an image with clickable areas). So the coordinates where the user clicked on the image are sent to the server. This attribute is allowed only if the <img> element is inside a <a> element with a valid href attribute.

loading - It indicates how the browser should load the image and it has two values: eager and lazy.

• eager is the default value and it loads the image immediately regardless of whether or not the image is currently within the visible viewport.

• lazy defers the loading until some conditions are met. This generally improves performance.

src - This is the image URL or this contains the path of the image we want to embed and this attribute is mandatory for <img> element.

srcset - This attribute specifies multiple image resources for the <img> element and it allows us to specify different kinds of images for different screen sizes or orientation or display types.

sizes - It defines the conditions according to which the browser will select a particular image defined in the srcset attribute. It consists of two parts :-

• A media condition, the condition according to which the browser will make a decision to select a particular image.

• A source size value.

With the srcset and sizes attributes we can create responsive images according to the browser conditions.

width - It specifies the width of the image in pixels, it must be an integer value without a unit.

height - It specifies the height of the image in pixels and it must be an integer value without a unit.

There are some more attributes like crossorigin ,usemap etc and we use them for various purposes.

Live Server

Live Server is a popular development tool and browser extension that provides a local development server for web projects. It enables developers to create and test web applications locally without the need for a full-fledged server setup.

When using Live Server, you can simply open your HTML, CSS, or JavaScript files in your preferred code editor, activate the Live Server extension, and instantly launch a local development server. This server serves your web project and automatically refreshes the browser whenever you make changes to your code.