Introduction to Web and HTML

Introduction to Web and HTML

What Is Web?

We refer to this time period as the internet era. We use the internet for a variety of activities, such as searching for anything. However, we are unsure of how we are getting any of this information or anything else we searched for. Is there a magician who performs some magic and delivers us the results we want? Obviously not—that would be ridiculous. Then, what actually occurs on the backside of web???

To understand this we have to know about Web.

What Is the Web Now? All we are aware of is the Web, sometimes known as the World Wide Web. Additionally, a web is a collection of numerous pages that may be accessed with a web browser. Then, how are these websites built can become a question. You will find the solution below, but for the time being let's just understand how the web functions.

So, now let's learn how the web page is rendered on our systems.

  • The client will use a computer to deliver the request to the web server.
  • The server now makes an attempt to find the requested file, which is kept in storage.
  • The file is then transferred to the browser and shown to the client after the search result is obtained.

So, this is how web works. Now, we move further on Webserver.

Web Server

ian-battaglia-9drS5E_Rguc-unsplash.jpg Web server are the programs which renders a web pages. There are many servers are there in market that every web developer is using nowadays,

  • Apache
  • Tomcat
  • Nginx

Live Server

There is a problem while building web pages like we have to refresh or reload the browser every time we make changes. It becomes hectic while we are building or working on larger projects like you made thousands of changes and you need to reload browser thousands of times.

Why we have to reload or refresh pages what is the reason behind this? Well, let understand it in more depth, first you have created simple page/ webpage and that is stored in memory and every time you request that file or page it will show it up. However, after some time you make some changes in file, you saved that file, but browser is serving previously executed file. In order to get updated data or file we have to refresh memory.

To get rid of this problem we have one Extension called "Live Server", which automatically reload browser when any changes occur in file or code.

HTML Tags

With the help of HTML tags, you'll be able to create awesome webpages. There are many tags that we use so far but let' s have a look at basic tags which we use more often.

Heading Tags

In order to make some sentence or text distingue then other we use heading tags. H1 to H6 html tags represent different level of heading tags. H1 is the highest level and H6 is the lowest one.

heading tag.png

Paragraph Tag

As name suggest this tag is mainly use for paragraph or chunk of text that we want to display on browser. It is block-level html tag which automatically close if there is another block level element parse before closing paragraph tag.

p tag.png

Lorem ipsum

Lorem is just a placeholder text that is used to display text or content without relying on any meaningful content. We can get any amount of text that we need while building webpages. Simple we have to write lorem and amount of word we required.

lorem.png

Image Tag

Image tag is referred as img in Html code. Using img tag you will be able to add picture to your webpage or website very easily and make it more attractive. This tag is also known as elements or HTML Elements. We have many attributes for every element which are present in HTML. But, let's have a look at attributes of img tag.

img tag.png

  1. src - for image URL or path
  2. alt - for image description. If image is not loaded or there is an error loading image it will display entered text.
  3. width - to give width of image.
  4. height - to give height of image.
  5. srcset - is the collection of picture paths to load along with the requested image size. To produce responsive images for browser sizes, use the image sizes attribute.

Thank You.