Introduction to web and Html

Introduction to web and Html

Introduction Web and HTML.png

Web development

One of the complex and creative things that web developers do is write a thousand lines of code and turn that into a website. Web development refers to the creation, building, and maintenance of websites. It includes elements like web design, web publishing, web programming, and database management. It involves the development of an online application, or a web server.

Servers and it's types

Web Server

A web server is just a simple computer application that delivers web pages in response to requests. The application or device that answers the request and sends the user the requested page's content is known as the web server. A website must be uploaded to a web server while it is being created in order for other people to access it. Every website is assigned a distinct web address that people can use to visit it.

Introduction Web and HTML (1).png

Many web servers are available in the market, but the common ones which we use in our day-to-day production are:

Introduction Web and HTML (2).png

1. Apache HTTP Server

Almost all operating systems, including Linux, Unix, Windows, FreeBSD, Mac OS X, and more, are supported by Apache, which is open-source software. An "open source web server" is any web server whose source code is available for developers or the general public to read, copy, alter, or modify. It is easier to solve administrative issues and can be installed successfully on multiple platforms. Approximately 60% of machines uses the Apache Web Server.

The most recent version of Apache is far more adaptable than earlier versions and is capable of efficiently handling more requests.

2. Nginx Web Server

It is also an open source software like Apache, It is known for it's high performance, stability, simple configuration and low resource usage. Nginx processes requests in a single thread using an asynchronous method rather than starting new processes for each request made by the user. It is mostly used for caching, streaming video, load balancing, managing static files, auto-indexing, etc.

3. Live Server

It is a server with live reload capability, developed by Ritwick Dey to overcome the problem of reloading the server every time. Some of the common feature of this server is A simple click in the status bar will start or stop the server, From the Explorer menu, open an HTML file in your browser, Support for file exclusion during change detection.

HTML

Introduction to HTML

As you visit a website, a server delivers an HTML file to your computer, where your browser decodes the file's contents and displays them on your screen. HyperText Markup Language builds a format for web documents that serves as a foundation for web applications.

History of HTML

HTML is a evolving markup language developed by Tim Berners-Lee in 1990s. Every new edition has made it significantly simpler and prettier for users to build web pages, which has increased the effectiveness of sites.

HTML 1.0 was released in 1993 and HTML 2.0 in 1995, HTML 3.0 added enhanced new features that gave web designers more strong capabilities while developing web pages. Next is HTML 4.01, which is widely used and was a popular HTML version before HTML 5.0, which was launched in 2012 and is currently in use everywhere.

HTML 5

HTML 5 can be said for an extended version of HTML 4.01, HTML5's syntax has also changed, and it now uses Document Type Declaration as its foundation.<!DOCTYPE html> it is concise, easy-to-use, reliable, and case-insensitive.

HTML 5 includes new elements such as <video>, <main>, <article> and others as well as new functionality like multimedia, enhanced document markups, and the introduction of Application Programming Interfaces (APIs).

Syntax of HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Page Title</title>
</head>
<body>
    <h1>This is a heading.</h1>
    <p>This is a paragraph.</p>
</body>
</html>

Here various HTML tags, elements, and other things have been used.

  1. <!DOCTYPE html>: lets the web browser know what version of HTML was used to build the page. A DOCTYPE declaration must come first in every HTML document.

  2. <html>: It serves as a container for all other HTML components and is the HTML document's root.

  3. <head>: It serves as a metadata (document title, character set, styles, scripts, and other meta information) container and is positioned in between the head and body tags.

  4. <title>: It defines the title of the document in the browser toolbar.

  5. <body>: It defines body of the document contains every element that makes up a document in HTML, including headings, paragraphs, images, hyperlinks, tables, lists, and more.

Tags, Element, Attributes In HTML

The fundamental building blocks of HTML code are tags, elements, and attributes.

Tags

HTML tags specify how a web browser should format and present the text. The opening tag, content, and closing tag are the three essential components of an HTML tag. A tag is always surrounded by two angle brackets<>...</>.

Let us now discuss some common tags:

Heading Tag

The h1 to h6 elements specify the six main types of HTML headings. from the highest level h1 to the least level h6.

<h1> The main Heading </h1>  
<h2> The Sub Heading </h2>

Paragraph Tag

A webpage's paragraph is defined by the HTML p tag.

<p> This is a paragraph. </p>

Anchor Tag

A hyperlink that connects one page to another is defined by the HTML anchor tag.

<a href="home.html"> Home Page </a>

Line Break Tag

Where line division is required, such as in a poem or an address, it is typically utilized.

<p> Hello I am Nandini, <br> A Software Developer <br> Hope you like this Blog </p>

Image Tag

Images are displayed on web pages using the HTML img tag, it is an empty tag closing element is not used here. Example:

<img src="Header.jpg" alt="Header Image"/>

Attributes of HTML img tag are:

  1. src: Describes the image's source or path.
  2. alt: Specifies a substitute text for the picture
  3. width: For defining the width in which the image will be displayed.
  4. height: For defining the height in which the image will be displayed.

Elements

The start tag through the end tag are all considered HTML elements. The syntax of the HTML element is <tagname> Content to be written </tagname>.

Example:

<h1> This is my heading </h1>
<p> This is my paragraph. </p>

Attributes

More details regarding elements are provided through attributes. Always specify attributes in the start tag. The standard format for attributes is name="value". The syntax of the HTML attribute is <tagname name="value"> Content to be written</tagname>.

Example:

<a href="https://google.com"> Go to Google </a>

We have now finished talking about HTML and web servers. If you have read this far, I sincerely appreciate it. Please share your thoughts.