Nithin's blog

Introduction to web and HTML

Nithin's photo
Nithin
·

3 min read

Web server

A 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.

  • Apache HTTP server
  • Microsoft Internet Information Services (IIS)
  • Lighttpd
  • Jigsaw Server
  • Sun Java System

Live server extension in vscode

Normally, when you make a change in your code or write something new, you need to refresh the page manually to see the changes. In other words, if you make 100 changes in your code each day, you need to refresh the browser 100 times. The live-server extension, however, automates this for you. After installing it, an automated localhost will be able to run in your browser, which you can start with a single button. Once you make changes in your code or write something new, after saving it, the browser will auto-refresh itself. Then you will be able to see the changes quickly and automatically.

HTML

The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.

Some important HTML tags

  • HTML tag: It is the root of the HTML document which is used to specify that the document is HTML.

  • Head tag: The head tag is used to contain all the head elements in the HTML file. It contains the title, style, meta, … etc tag.

  • Body tag: It is used to define the body of an HTML document. It contains images, tables, lists, … etc.

  • Title tag: It is used to define the title of an HTML document.

  • Heading tag: It is used to define the heading of an HTML document. There are multiple heading tags for different sizes of headings ranging from h1 to h6.

  • Paragraph tag: It is used to define paragraph content in an HTML document.

  • Image tag: The image tag is used to embed an image in an HTML page. The image tag has two required attributes namely src and alt. src specifies the path to the image and alt specifies an alternate text for the image, if the image for some reason cannot be displayed

Lorem

Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available.

Here is a code of basic HTML page showing the use of different tags

<html>
    <head>
        <title>Title of your web page</title>
    </head>
    <body>HTML web page contents </body>
    <h1>This is a basic web page built by Nithin</h1>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Labore blanditiis corrupti temporibus impedit repudiandae. Aperiam totam facilis, cum cumque, nemo exercitationem et ducimus nulla aliquam, magni reprehenderit cupiditate voluptatem ex.</p>
    <img src="https://images.unsplash.com/photo-1565945887714-d5139f4eb0ce?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="smiley image" width="250" height="180">
</html>

Here is the resulting web page

Screenshot 2022-11-07 115207.png

HTML5web servers