WEB

Web synonyms WWW or W3(abbreviated as World Wide Web).

Let's think you want to search for any information over the internet. We go to the browser and enter the URL(Uniform Resource Locator) or text we want to look for.

BINGO!!!

We see the information we looked for. But, how does it happen in the back end? How could I see so many pages or so many links of information? Before getting into this, we should appreciate the person who invented the Web in 1989 - Sir Tim Berners-Lee.

HTML is one of the 3 fundamental technologies by Tim and is also a foundation of today's web.

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

1. The browser sends a request from the client's computer to the web server.
2. Server searches for the file requested in its storage.
3. Later, the server processes the file and sends it to the browser.

A sequence of responses and requests happens day in and day out.

OMG !! So much data.

WEB SERVERS

Let's now dive in to understand what web servers are.

Web servers are computer programs which render web pages to the client's browser when requested.

Servers are majorly used by web hosting companies and web app developers, which allows users to deploy their websites on the Internet. Two major servers are:

1. Apache

2. Microsoft IIS(Internet Information Service)

Apache is an open-source, cross-platform web server. Also, known as Apache HTTP Server. The final website is deployed in this Apache Server.

LIVE SERVER

100 lines of code/day = 100 time reloading browser/day. Isn't this hectic for us?

Thanks to the Live Server extension, on providing a live reload feature. A Live Server is a small development server, which enables us to check our changes as we code on the fly.

Why Visual Studio(VS)?

There is a wide variety of IDEs( Integrated Development Environment ): Atom, Brackets, and Sublime Text. So, how is VS different from other IDEs? VS has many out-of-the-box tools like source control integration, integrated Terminal and debugging which is a great thing and many more. Also, provides developers to change theme. We can use plugins incases if it is not provided by VS.

EMMET

Emmet is an addon for the text editor. It enables us to write code quickly and provides shortcuts to enable HTML markup and CSS.

1. Generating HTML Skeleton

The initial thing to do while creating an HTML page is to create the skeleton for it. Skeleton includes DOCTYPE, HTML, head, and body tags.

Using Emmet it's easy. Below is the boilerplate shortcut.

Type '!' in the editor, and it will show a pop-up with the content that will be generated, press enter and there you have your HTML skeleton.

2. HTML tags with content

Wondering for a shortcut on how to add an HTML tag with content.

p{This is a paragraph} Will generate a p tag with text specified inside the curly braces ({}).

3. Nested elements

To generate a nested list we will use the ‘>’ operator

ul>li

What do we do when we scenario with menu items, which is usually more than one item? Emmet provides a shortcut for this as well.

But how would we go about repetition? Repetition can be done using the * operator li*5 will give three li’s just like normal multiplication.

ul>li*5

4. Adding classes and Id.

Shortcut: div#wrapper.wrapper-inside you can specify Id by using ‘#’ and classes by using ‘.’

5. To add Sibling

Use + operator to place elements near each other, on the same level:

div+section+p

6. Lorem Ipsum

lorem

Using this we can get Lorem Ipsum placeholder text. We can use multiplication operator with this to get more content of lorem ipsum as below:

lorem*5

7. Emmet for CSS

We can use shorthand using emmet for CSS as well. Let us look at some examples:

Add margin on all four sides: m10–10–10–10

which will be - margin: 10px 10px 10px 10px;

Add padding on all four sides: p10–10–10–10

which will be - padding: 10px 10px 10px 10px;

For more shorthand refer this: docs.emmet.io/abbreviations/syntax

HTML Tags.

HTML tags are like keywords, which are used to create web pages. Let us go through some basic HTML tags used.

Heading Tags.

Heading tags are used to distinguish the text from the other text on the website. Used in websites to highlight the important part of the entire website. Heading tags are ranked based on their importance. h1 tag(first level heading) has the highest ranking which is used for titles, motto, and vision sections in a website. Followed by the h2 tag(second level heading), which is a sub-heading.

Paragraph Tag.

Blocks of text with a structure and grouping related to some content are paragraphs. As said it is a block of text, p tag is a block-level HTML tag.

IMG Tag

You saw images added above, but are you wondering how can we do that using HTML?

Wait for a second!!!

Let me introduce you to the img tag.

Using the "IMG" tag we can embed and add images to our web pages and make them more colourful. a proverb says, "Picture is worth a thousand words"

Attributes of "img" tag:

• src: needs the image path entered
• alt: description of the image. In case the image isn't loaded, it shows the description of what the image is about.
• width: specify the width of the image.
• height: specify the height of the image.
• srcset: is the set of image paths to load along with the image size to be specified. Image sizes attribute to create responsive images for browser sizes.

Thank you for reading