Introduction to HTML

Introduction to HTML

Photo by Niels Kehl on Unsplash

What Does Web Mean ?

The web is subset of internet consisting of the pages that can be accessed by the web browser. Many people assume that web is same as internet, however the internet is refers to the global network of servers that makes the information sharing that happens over the web possible, so although the web does make up the large portion of internet but they are not same.

Web pages are formatted in a language called Hypertext Markup Language (HTML).The web uses HTTP protocols to transmit data and share information. Browsers such as Internet Explorer, Google Chrome or Mozilla Firefox are used to access Web documents, or Web pages, which are connected via links.

Web Server:

Web server is a software and hardware that uses HTTP (hypertext transfer protocol) and other protocols to respond to client request made over the world wide web. The main job of a web server is to display website content through storing, processing and delivering webpages to user. Web servers also support SMTP (Simple Mail Transfer Protocol) and FTP (File Transfer Protocol), used for email, file transfer and storage.

Web server hardware is connected to the internet and allows data to be exchanged with other connected devices, while web server software controls how a user accesses hosted files. The web server process is an example of the client/server model. All computers that host websites must have web server software.

Common and top web server software:

Apache HTTP Server: Developed by Apache Software Foundation, it is a free and open source web server for Windows, Mac OS X, Unix, Linux, Solaris and other operating systems; it needs the Apache license.

Nginx: A popular open source web server for administrators because of its light resource utilization and scalability. It can handle many concurrent sessions due to its event-driven architecture. Nginx also can be used as a proxy server and load balancer.

About Emmet:

Emmet is very important for web developer which make the life of developer easy. Emmet is a set of plug-ins for text editors that allows for high-speed coding and editing in HTML, XML, XSLT, and other structured code formats via content assist. The project was started by Vadim Makeev in 2008 and continues to be actively developed by Sergey Chikuyonok and Emmet users.

By the help of Emmet we can get any tag by typing just one word, like we type i then automatically there will show tag <img></img> and just type Tab keyword.

What is HTML?

HTML stands for Hypertext Markup Language. HTML is very important language for Web Development. basically, HTML is not a programming language but markup language. In HTML markup tags tell the web browser such as Google Chrome, Mozila Firefox, how to display the page.An HTML must have html or htm file extension.

There are problems like web browser rendering to avoid this we have to define document type. first click [!!! + Enter] in html file it will gives <!DOCTYPE html>.if we click [! + Enter] this will gives us boiler plate code looking like follow

<!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>

In the above HTML file, at the top there is doctype which is html which will helps browser to understand. below of this there is a tag in which we have to type language. In HTML, there are some tags, such as <h1> to <h6>, <img>, <br>, <em>, <p> etc. following are the tags and explaination

<html></html >,The total html code is wrapped up in the this tag as it is the HTML document.

<head></head>,This is a container for metadata and is placed between the <html> tag and the <body> tag. Metadata is data about the HTML document. Metadata is not displayed. Metadata typically define the document title, character set, styles, scripts, and other meta information.

<body></body>,In this tag we write all the content of our web pages. there are lots of tags present in this <body> tag.

<h1> to <h6>,This tag is used as heading in which sizes are ranges from h1 to h6.<h1> gives us bigger font and <h6> gives smaller font.

<p></p> tag is used as paragraph. in this whatever we write is show in the paragraph format. To got to next line there is a tag known as<br> tag.

<img></img> tag is used to get any image on our web page. in this tag there is "src" attribute in which we have to give our image directory/location or image address link.also there is attribute in this tag which is "alt", which helps as alternate when the mistake in link.

<a></a> tag is anchor tag in this we can insert other web site. In this there is a attribute "href" in which we have to write address of web site.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>web dev</title>
</head>

<body>
    <h1>this is heading one</h1>
    <h2>this is heading two</h2>
    <p>this is paragraph</p>
    <p> Lorem ipsum <br> dolor sit amet consectetur adipisicing elit. Alias ipsa expedita, voluptatem exercitationem
        deserunt natus. </p>
    <img src="https://plus.unsplash.com/premium_photo-1675827055694-010aef2cf08f?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8bmF0dXJlfGVufDB8fDB8fHww"
        alt="nature image" width="200">
    <a href="https://google.com" target="_blank">go to google</a>
</body>

</html>

Thanks for reading...