Hello,
I am Azhar Choudhury, a Civil Engineering graduate by degree but a software engineer and developer by profession and, a student forever. I have stepped into the world of development and to begin with, the development journey, which is my first development journey, I have chosen to be on the path of Web Development. I am inquisitive to learn and explore this vast development world and implement the ideas and concepts in reality.
I have chosen to be the student of Hitesh Choudhary sir, about whom I don't think the need for an introduction because I can write a whole blog on him. But, if you don't know him and want to know who this gentleman is, then please google the name Hitesh Choudhary and search on youtube as well. You will get a clear idea of who this person is and how influential and good he is.
Well now, let me start my first technical blog, and the topic is Introduction to Web and HTML
Introduction to WEB and HTML
www, w3 or the web - we have heard these terms or have come across them many times on the internet.
Let us see what these terms actually mean-
The web or www or w3 is an interconnected system of public pages accessible through the Internet.
The Web is not the same as the Internet. The Web is one of many applications built on top of the Internet.
The Web consists of several components:
The HTTP protocol governs data transfer between a server and a client.
To access a Web component, a client supplies a unique universal identifier, called a URL (uniform resource locator) or URI (uniform resource identifier) (formally called Universal Document Identifier (UDI)).
HTML (hypertext markup language) is the most common format for publishing web documents.
Linking, or connecting resources through hyperlinks, is a defining concept of the Web, aiding its identity as a collection of connected documents.
That was an overview of what the web is. Now let us move to some more extended concepts associated with the web.
Servers
A simple definition of a server is
A server is a computer program or device that provides a service to another computer program and its user, also known as the client.
Servers can be classified into many types. Let us see some of them.
- Web Server
- Application Server
- File Server
- Proxy Server
- Database Server
- Virtual Machines
- Mail Server
- Print Server
- Gaming Server
- Domain Name System Server or (DNS Server), and many more...
Each type of server does its respective work but the concept of servers is the same everywhere. Its purpose is to provide service to the client which can be a user or another computer or system.
How Servers work
Servers work in several ways to connect users to different data functions. They house large amounts of data for organizations and make it accessible to users through internal networks or via the internet. They respond to user requests to retrieve appropriate requested files from stored or interconnected data sources. They also work unitedly with an operating system to better listen to and respond to user requests.
IT professionals can increase the functionality of a server by installing software that creates additional roles such as responding to website requests from an internet browser. Servers can also act as safeguards to verify the identity of users before allowing access to a network.
Web Servers
The term web server can refer to hardware or software, or both of them working together.
- On the hardware side, a web server is a computer that stores web server software and a website's component files (for example, HTML documents, images, CSS stylesheets, and JavaScript files). A web server connects to the Internet and supports physical data interchange with other devices connected to the web.
- On the software side, 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). An HTTP server can be accessed through the domain names of the websites it stores, and it delivers the content of these hosted websites to the end user's device.
At the most basic level, whenever a browser needs a file that is hosted on a web server, the browser requests the file via HTTP. When the request reaches the correct (hardware) web server, the (software) HTTP server accepts the request, finds the requested document, and sends it back to the browser, also through HTTP. (If the server doesn't find the requested document, it returns a 404 response instead.)
Let us see some working examples of web servers-
Apache HTTP server
The Apache HTTP Server is a free and open-source cross-platform web server software. Apache is developed and maintained by an open community of developers under the auspices of the Apache Software Foundation.
In simple words,
As a Web server, Apache is responsible for accepting directory (HTTP) requests from Internet users and sending them their desired information in the form of files and Web pages.
Live Server
Live Server is actually a Web Extension that helps us to live reload features for dynamic content.
When we write codes for web pages, we need to visit the page and see the changes and check if the page functions properly or the way we wanted it to.
So, if we make some changes and want to check it, we need to visit the site and reload the page as many times as we make the changes. Live Server plays a role of ease for developers in such scenarios. What the Live Server does is that it constantly refreshes the page automatically as the user makes any changes to the code. So, we don't need to visit the page and refresh it again and again.
If you want to know more about the Live Server, please click here.
So, that was an overview of the web and the server without diving much deep into the topics.
Now, let's look at just a few of the HTML elements, not much but just a few of them.
HTML Elements
HTML Elements are defined by tags, a start tag and an end tag with some contents in between them.
Let us look at some of the HTML tags and understand what they define.
The <h1> to <h6> HTML elements represent six levels of section headings.
<h1> is the highest section level and <h6> is the lowest.
H1 tag:
This is the highest section level of all the headings.
Example of H1
This is a heading with H1
H2 tag:
This is the second highest section level of all the headings.
Example of H2
This is a heading with H2
P tag:
The <p> HTML element represents a paragraph. Paragraphs are usually represented in visual media as blocks of text separated from adjacent blocks by blank lines and/or first-line indentation, but HTML paragraphs can be any structural grouping of related content, such as images or form fields
Paragraphs are block-level elements and notably will automatically close if another block-level element is parsed before the closing </p> tag.
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, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. If we want to put some dummy words, we can use lorem. Lorem ipsum has its history and we won't go for it. If you are curious to know about it, please go and read about it on Wikipedia.
Eg: if the user wants 50 dummy words, the user should write lorem50 and press enter.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo mollitia laudantium officia eum harum, vel nam soluta at, omnis tempore cupiditate, ea ipsum optio iure eius corrupti facere nemo veniam voluptatum ab ex adipisci quo nostrum! Eius perspiciatis expedita, aspernatur officiis culpa eveniet ea nam atque recusandae hic aliquam tenetur.
img tag
The <img> HTML element embeds an image into the document.
But it needs an attribute to work. The src attribute which implies the source, tells the img tag to take the image from the source file or source image address and display it on the website.
Example of the <img> tag with the src attribute :
<img src="https://images.unsplash.com/photo-1447752875215-b2761acb3c5d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80">
This will be displayed on the website as shown below 👇
The img tag has another attribute, alt , which means alternate text for an image. It means if the image doesn't load for any reason, the user can at least see the text and understand what was the image of.
It also serves the purpose of Accessibility which is very important in Web Development.
How To Create A Webpage?
For creating a webpage, we need three fundamental programs -
- HTML
- CSS
- JavaScript
We have seen a small overview of HTML. We will read more about HTML and then CSS and JavaScript in the upcoming articles.
Thank You 😊
-Azhar Choudhury
References: MDN Docs, indeed, Google, unsplash