Web Development

Introduction to Web & HTML

Rutvik Shilamkar's photo
Rutvik Shilamkar
·

5 min read

Table of contents

What is the Web?

  • World Wide Web is a subset of the internet and is an information system.

  • Any item we find online that we can watch, read, listen to, or interact with such as videos, blogs, and games is possible to access because of the web and this web content is served by web servers. Request for these resources to the server is made by using the programs such as a browser that acts as a client and to this request, the server responds by providing the corresponding resources.

  • Client can be any device connected to a network of internet through which we as a user request resources. But what is the server? the server is a computer program or device in a network that provides a service to another computer program or client.

What is a web server?

  • Web server is a piece of software that runs on the main computer to serve web content based on HTTP or HTTPS requests from other computers in a network.

  • Apache and Nginx are popular examples of web servers. Apache is an HTTP server released in 1995 and is free and open-source software with no server-side services and allows you to host static websites e.g. HTML/CSS/JavaScript.

  • Websites are collections of web pages and to access these websites over the web they are hosted on web servers. cPanel provides a dashboard that is easy to understand and it’s an online Linux-based graphical interface (GUI) used as a control panel to manage/ host websites on a web server without technical knowledge.

Live Server

  • Web servers come into the picture when you want to deploy a website on a server to access it over the internet. But during the development phase of a website or web application files like HTML, CSS, and JS don't need a server to be opened by your local machine browser.

So why do we need a Live Server?

  • During the development phase, a website opened in a local browser won't reflect any changes made in the code without reloading of the page. This is where live-server comes into the picture by providing nice functionality of detecting changes made in static files and reloading pages which results in a reduction in development time. It's a small software available as a plugin in code editors like VS Code.

vscode-live-server-extension.png

HTML

  • HTML stands for a hypertext markup language. It defines the structure of a webpage and it is used to create a website. We can use the ".htm" or ".html" extension.

  • HTML tags are used to define the look and feel of the website. To start building a website we first create an index.html or default.html file, it's a special file name that the search engine will look for as an entry point when the website root address is typed.

Structure of HTML page

<!DOCTYPE html>   <!-- specifies this is HTML 5 document -->
 <html lang="en">  <!-- the root of the HTML page and defines language as English  -->
 <head>            <!-- contains page metadata (information useful for search engines) -->
    <title>title of website</title> 
</head>
<body>  <!-- main body of the webpage rendered by the browser  -->
    <h1>Hello World!!</h1>  
    <p>my paragraph</p> 
</body>
</html>

HTML tags and Attributes

  • A tag is like a container for either content or other HTML tags. Most HTML elements have opening and closing tags with content in between them. Some HTML tags like <br>, <hr>, etc. don't have content and are called empty elements.

  • <html lang="en"></html> is root or parent tag of all HTML tags. The webpage is divided into two parts by two tags<head></head> and "". We can add elements inside the body tag to define the page layout.

  • HTML attributes are used to add more information corresponding to an HTML tag. We can use single or double quotes in attributes. example: <img src="img_car.jpg" alt='Girl in a jacket' width="500" height="600"> in the image tag src, alt, width, and height all are attributes that define which image and how to render it on a webpage.

  1. Heading tag

    • Used to mark heading in HTML. From h1 to h6, we have <h1>heading content</h1> as the most important heading tag and <h6>heading content</h6> least important tag. Depending upon the heading tag appearance of the heading changes.

  2. Paragraph tag

    • Used to add paragraph to an HTML page.
      <p>This is a paragraph</p>

  3. Image tag

    • add an image to an HTML document. "src" attribute specifies the location or relative URL of an image.
      <img src="img_car.jpg">
  4. br tag
    • it is used to create line breaks in an HTML document.

Write HTML faster with Emmet

  • Emmet is a built-in feature of VS Code and is available as an extension in other code editors. It is possible to write a lot of code quickly with the help of suggestions and shortcuts provided by emmet.

  • Above we saw the structure of a blank HTML page. Every time we write an HTML document we have to write the same boilerplate code again and again, but with emmet simply type! and you'll see suggestions from emmet to write boilerplate code for you. Simply with one key, you can create a blank HTML page.

  • Because of emmet just type tag name and hit Enter. Emmet will put the cursor inside the tag or inside the attribute value which results in saving time and faster development. Similarly, if you don't care about the content inside tags and you just want get done with HTML code you can use dummy text provided by emmet using lorem. e.g. just type lorem10 to generate 10 random words.

Web DevelopmentwebHTML5Emmetiwritecode