Sneha's tech blog
Introduction to Web and HTML

Introduction to Web and HTML

Sneha Raut's photo
Sneha Raut
·

5 min read

I am going to show you how amazing the HTML is. We have always underestimated and neglected the details of HTML and the wonders it can create. One can use HTML in an incredible way to achieve accessibility.

What is "The Web" ?

If you think the web is same as internet then you are wrong.

"The web is one of many applications built on top of the internet." It enables web resources to be accessed over the internet.

"The Web" also known as "World Wide Web" have several components: Hypertext Transfer Protocol (HTTP), Hypertext Markup Language (HTML), Uniform Resource Locators (URLs), Web Browser and Web Server.

Web Server

It is a software which serves as per your request. It accepts requests from web browsers and in response delivers the web resource or web page, e.g. Nginx web server, Apache2 server. Apache2 is a popular web server which is used by classic domain providers and liked by most programmers. It provides a "\var\html\www" folder to store pages.

Web servers serve index.html or default.html as home page by default. but, index.html is famous and has been industry standard. There are two extensions for HTML files - '.htm' and '.html'; the server treats both as the same.

HTML

HyperText Markup Language is a basic component of Web. It defines the structure of the web page. It uses "markup" to annotate web contents like text, images to display in web pages. HTML has a number of tags and attributes which are called as elements of HTML. HTML 5 is the current version of HTML, it has introduced application programming interfaces(API), Document Object Model(DOM) and also improved markup for documents.

Web Page

It is a structured document consisting of hypertext displays by browser over a request of the user. Lets see how to create a web page - Open editor of your choice e.g VS Code, Sublime Text. Then create your first index.html file and use below structure to code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

Lets see how web page gets load on browser -

First web page code gets loaded in a memory (RAM) then the browser interprets it and displays output. While developing we need to refresh the browser each time to see changes done in the web page, it is a bit annoying. What if without refreshing the browser we get to see changes in the web page as we change the code. That's why we need a live server to be able to see live changes in the web page on the browser while developing it.

Live Server

It is a software that continuously notifies memory (RAM) that the state of a file or page is changed. It allows us to see live changes on a web page. Live Server of Ritwick Dey's is quite famous, it is introduced as a development local server with live reload feature for static and dynamic pages.

HTML Elements

HTML elements are HTML tags ( opening <> and closing tag </> )and attributes. Lets know more about basic tags and the tags we have used in the above code snippet.

  • <!Doctype html> - It defines document type, it is needed to make sure your document behaves correctly.

  • <html></html> - It is a root element that wraps all the content of a web page. It also includes a lang attribute to set language of the page.

  • <head></head > - This element contains metadata about the document, like title, scripts and style sheets.

  • <meta charset="UTF-8"> - It sets the character set document should use. UTF-8 includes most characters from the vast majority of written languages.

  • <meta name="viewport" content="width=device-width, initial-scale=1.0"> - It is a viewport element that instructs the browser to render a web page as the width of the viewport of a particular device. 'viewport' is the size of the browser window.

  • <title></title> - It sets the title of a web page, that appears in browser's tab.

  • <body></body> - This element contains all page content that you want to show the web user, like text, images, videos, audios, etc.

Lets see some necessary tags -

Headings

This element is used to show heading and subheading on a web page. It has 6 levels, 'h1' to 'h6'. <h1></h1> is biggest in size and <h6></h6> is smallest.

<h1> Main Title </h1>
<h2> Top level heading </h2>
<h3> Subheading </h3>

Paragraphs

Its paragraph tag contains paragraphs of text.

<p> Single paragraph </p>

Lorem

It is a filler text that is used to lay out a page when focus is on design and not on content. It is used as below:

<p>lorem10</p>

It prints 10 words from the lorem, you can put any number for words after the lorem.

Links

Anchor tag <a></a> is used to make text into a link using href attribute.

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

Image

This element is used to embed images in web pages. 

<img src="url" alt="description about Image" width="" height="">

There are multiple attributes of the image tag. some are listed below :

  • src - It is a required attribute that contains path to the image.

  • alt - It holds a description of the image, it is not mandatory but useful for accessibility.

  • width, height - Use to set the size of the image.

  • sizes - It indicates a set of source sizes, consists or media size and source size value as per viewport properties.

  • srcset - One or more strings separated by commas, indicating image sources contains URL to an image, width and pixel density.

  • usemap - The partial(starts with #) of an image map associated with the element. Can't use this if image is inside anchor or button element.

  • decoding - Provides an image decoding hint to the browser. It has two values : sync(decodes image synchronously) and async(decodes image asynchronously)

  • ismap - It is a boolean attribute that indicates the image is part of a server side map. It sends coordinates where the user clicked on the image to the server.

  • loading - Indicates how the browser should load the image: eager - Immediately loads the image, lazy - Defers loading the image until it reaches a calculated distance from the viewport. It improves performance of the content.

Lets conclude our discussion on web and html, please feel free to share your thoughts.

iwritecodeineuronWeb DevelopmentHTML5@hiteshchoudharylco