Intro ⤵️

We are going to see what the web is, how it works, what is a server, and a quick brief intro to HTML to give you the essence of the Web Development World.

Web ⤵️

World Wide Web Gif: A gif where a spider comes over the earth and makes a web and text of World Wide Web comes on the screen in web style.

World Wide Web(WWW) commonly known as the Web is an information-sharing system that helps us access websites or other web resources over the internet. It is a subset of the internet. You can also call think of it as a collection of web pages. These Web Pages are made up of text pages, audio, videos, and images. The name web is given to this system because all the web pages available here are linked and can be accessed from anywhere globally.

Webpage: A single document usually written in HTML language.

Website: Collection of Webpages linked with each other.

The Internet and the Web are not the same things. The Internet is an infrastructure, whereas the Web is a service built on top of the infrastructure. It is worth noting there are several other services built on top of the Internet, such as email and IRC.

Web Server:

A web server is a software or hardware, or both working together which takes the request from the client, fetches the required website from its database, processes it, and then provides the client with the website which was requested.

The Hardware side of a server is a computer that stores web server software and a website's component files (for example HTML files, images, CSS stylesheets, and JavaScript files).
The Software Side of a web server includes several parts that control how web users access hosted files. At a minimum, this is an HTTP server.
An HTTP server is software that understands URLs (web addresses) and HTTP (the protocol your browser uses to view webpages).

Apache Web Server:

Apache is the most popular Web Server in existence. It is the most commonly used web server. Apache is not a physical server, it is software that runs on a server. Although it is considered a web server.
Apache is free and open-source.

HTML ⤵️

HTML, also known as Hyper Text Markup Language is a language that is used to define the meaning and structure (skeleton) of a webpage.

HTML Basics:

HTML consists of different elements which consist of tags and content*.* Tags are case insensitive, meaning you can write them in uppercase or lowercase, whichever you want. Although the correct practice is to write the tags in lowercase.

Elements:

Elements start with an opening tag <> and ends with a closing tag </>
Example: Paragraph Element (p) is written like this <p>Some text in between</p>.

Some elements don't require a closing pair of brackets. They are known as void elements. </>
Example: Image tag (img) is written like this <img src="cat-image.png"/>

<img src="./cat-image.png" alt="A cat image" />

In the image (img) tag above the src and alt are two attributes.

Attributes:

Attributes give extra information about the elements. They can be also used to control an element's behavior.

Attributes are written inside the opening tag <>.

An element can have one or more attributes. The attribute name is followed by an equal = sign and the value of the attribute is placed inside a pair of quotation marks " "

HTML Tags:

Basic Structure of an HTML Document ⬇️

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Test Website</title>
  </head>
  <body>
    <h1>Largest Heading</h1>
    <img src="images/catImage.png" alt="Cat Image" />
    <p>A Random Paragraph</p>
    <h6>Smallest Heading</h6>
  </body>
</html>

ANATOMY 🩻

<!DOCTYPE html> : HTML document starts with this tag. It tells the browser about the file type. Though this tag is not necessary, it is a good practice to use this tag at the start of an Html document to ensure that the browser behaves correctly.
<html></html> : This tag wraps all the content in an Html document. It has an lang attribute that is used to set the primary language of the document.

For Example: if the main language of our document is English the tag would be like <HTML lang="en">
<head></head> : This tag is used to wrap the content that you don't want the viewers of your page to see. It contains metadata (data about data) of the HTML document. It is used to define the title, description, character set, and many more things.
<meta> : Meta tags are always written inside the head element. It is used to define the metadata of the HTML document. Meta tags can help boost the SEO of your site and increase traffic.

Meta tag to define the character set:

<meta charset="utf-8">

Meta tag to ensure that the HTML page gets rendered correctly according to the device width on which it is being viewed
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title> : As the name suggests, this tag is used to give a title to your web page which gets displayed at the top of your browser tab. It is also used as the default name if you bookmark a page.
<body></body> : Anything that you can see on a web page is wrapped inside this tag.

IMAGES 🖼️

<img src="https://plus.unsplash.com/premium_photo-1661508614319-b5e40d1143bb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80g" alt="Holding Cute Little Cat in Hands" width="300"/>

https://codepen.io/nairitya/pen/eYjYoMm?editors=1000

<img> : This tag helps us embed an image on our page. It contains a src (source) attribute which is used to define the path of the image file.

There is another important attribute that is alt (alternative). It is used to define a descriptive text about the image. It is used by the screen reader to read out the text to visually impaired people. It's also displayed on the screen if something goes wrong and the image can't be displayed.

TEXT 🔠

HEADINGS 🆎

Heading tags in HTML are from <h1></h1> to <h6></h6> . h1 is used to define the most important title of the page and similarly, the importance decreases as we go from h1 to h6 .

<h1>Level 1 Heading - Most Important Title</h1>
<h2>Level 2 Heading</h2>
<h3>Level 3 Heading</h3>
<h4>Level 4 Heading</h4>
<h5>Level 5 Heading</h5>
<h6>Level 6 Heading - Least Important Title</h6>

PARAGRAPHS 🔤

Paragraph tag <p></p> is used to wrap paragraphs of text. You can use this to mark up the regular text on your website, be it a single line or a multiple lines paragraph.

<p>A single line of text.</p>
<p>A multiline paragraph.A multiline paragraph.A multiline paragraph.A multiline paragraph.A multiline paragraph.A multiline paragraph.A multiline paragraph.A multiline paragraph. </p>

LISTS 📃

The list tags are used to wrap text that we want to mark up as lists. There are two types of list tags.
Ordered List <ol></ol>: These are used when the order of the list matters. By default these provide numbers to each of the list items, starting from 1.

Unordered List <ul></ul>: These are used when the order of the list does not matter.

Each List Item inside the list is wrapped inside a <li></li> tag.

<ol>
  <li>Ordered List Item One</li>
  <li>Ordered List Item Two</li>
</ol>

<ul>
  <li>Unordered List Item One</li>
  <li>Unordered List Item Two</li>
</ul>

Output of Ordered list tag containing two list items and unordered list tag containing two list items

LINKS 🔗

As we talked about at the beginning of this article that the web is a collection of web pages linked with each other. This is made possible by the link tag which is <a></a> ( anchor).

We can wrap almost anything inside <a></a> tag. The only thing we can't wrap inside an anchor tag is another anchor tag.

This tag contains an attribute known as href . You can pass a web address as a value to this attribute, which you want the user to visit.

<a href="https://www.google.com/" target="_blank">Take me to Google!!</a>

https://codepen.io/nairitya/pen/eYjmKJJ?editors=1000

Add an attribute target="_blank" , if you want the link to be opened in a new tab.

That's all for this article. We have understood the web and HTML in the most basic way. Using the information above you can now build a basic web page. We have just scratched the surface of the HTML to give you an essence of it. If you want to learn more visit here !! ⬅️

Do share your feedback!! :)

#iwritecode #ineuron #htmlbasics #web #www #webserver Hitesh Choudhary

Design and Code