Introduction to web & HTML

Introduction to web & HTML

·

4 min read

What is the web?

The World Wide Web, commonly known as the Web is an interconnected collection of web pages that are accessible through the internet.

Web Server

Web server is software and hardware that uses HTTP (Hypertext Transfer Protocol) and other protocols to respond to client requests 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 users. Besides HTTP, 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.

Apache Server

Apache is a free and open-source software that allows users to deploy their websites on the internet. It is one of the oldest and most reliable web server software maintained by the Apache Software Foundation.

cPanel

It lets you to manage your hosting account and server.

Introduction to HTML

HTML stands for Hyper Text Markup Language. It is used to describe the structure of web pages.

Default Page

The index.html page is the most common name used for the default page shown on a website if no other page is specified when visitor request the site. Websites are built inside of directories on a web server. For your website, you must have each webpage as separate file. For example, your "About Us" page may be saved as about.html and your "Contact Us" page may be as contact.html. Your site will be comprised of these .html documents. Sometimes when someone visits the website they do so without specifying one of these specific files in the address that they use for the URL. Even though there is no page listed in the URL request made to the server that web server still needs to deliver a page for this request so that browser has something to display. The file that will be delivered is the default page for that directory.

Other default page names:

  • index.htm

  • default.htm or default.html

  • home.htm or home.html

Anatomy 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>First Article</title>
</head>
<body>
    <h1>This is heading first </h1>
    <h2>This is heading second </h2>
    <h3>This is heading third </h3>
    <h4>This is heading fourth </h4>
    <h5>This is heading five </h5>
    <h6>This is heading six </h6>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni, veniam, quibusdam earum rerum illum exercitationem fugiat molestiae autem deserunt dignissimos optio, quos repudiandae nostrum.</p>
<img src="https://thumbs.dreamstime.com/b/beautiful-rain-forest-ang-ka-nature-trail-doi-inthanon-national-park-thailand-36703721.jpg" alt="image">
<a href="https://www.google.com/webhp?authuser=1">google</a>
</body>
</html>

<head></head>— This element acts as a container for all the stuff you want to include on the HTML page that isn't the content you are showing to your page's viewers.

HTML is divided into two parts head part and body part.

head part: This part you cannot see but the information is still there. Some information you can see but the majority of the information you don't see.

body part: This part contains the information that we see on the webpage. So it is the visible part.

The entire HTML page loads in the top to a down manner, so the head part loads before the body part.

meta information: Information about information. This information is in the head part.

Some important tags in HTML

Heading tag - This tag is used to render bold and large font-size text. There are six variants of the heading tag i.e. from h1 to h6 with decreasing sizes from <h1> to <h6>.

paragraph tag: Each paragraph in HTML has to be wrapped in a <p> tag.

<img> tag : The <img> HTML element embeds an image into the document.

 <img
      src="https://images.pexels.com/photos/879109/pexels-photo-879109.jpeg"
      alt="code photo"
      width="200"
    />
  • src the attribute is required and contains the path to the image you want to embed.

  • alt attribute holds the text description of the image.

  • width attribute is an optional attribute which is used to specify the width to display the image.

(@hiteshchoudharylco)