Sir Tim Berners-Lee invented the World Wide Web in 1989. Sir Tim Berners-Lee invented the World Wide Web in 1989. Sir Tim Berners-Lee is a British computer scientist. He was born in London, and his parents were early computer scientists, working on one of the earliest computers.
What is the Web?
The Web is the common name for the World Wide Web, a subset of the Internet consisting of pages that can be accessed by a Web browser. Many people assume that the Web is the same as the Internet, and use these terms interchangeably. However, the term Internet refers to the global network of servers that makes the information sharing that happens over the Web possible. So, although the Web does make up a large portion of the Internet, they are not the same.
Web pages are formatted in a language called Hypertext Markup Language (HTML). It is this language that allows users to click through pages on the Web via links. The Web uses HTTP protocol to transmit data and share information. Browsers such as Internet Explorer, Google Chrome or Mozilla Firefox are used to access Web documents, or Web pages, which are connected via links.
All the pages are stored in a database and served to the client(YOU, yes You who is in front of the screen watching this page) through a server known as a WEB server. There are other parts to it like application server, database etc. but we are mostly interested in making a layman understand what this article is trying to convey.
The Web server holds all the pages and gives them to the user on demand, here's a representation of the same:
For tech geeks who want a proper definition, here you go :
(By the way, this article is for a total beginner so if you don't understand the below statement, you will in the future, don't worry you got this!)
A web server is a software and hardware that uses HTTP (Hypertext Transfer Protocol) and other protocols to respond to client requests made over the World Wide Web. The main job of a web server is to display website content through storing, processing and delivering webpages to users.
How do web servers work?
Web server software is accessed through the domain names of websites and ensures the delivery of the site's content to the requesting user. The software side is also comprised of several components, with at least an HTTP server. The HTTP server can understand HTTP and URLs. As hardware, a web server is a computer that stores web server software and other files related to a website, such as HTML documents, images and JavaScript files.
When a web browser, like Google Chrome or Firefox, needs a file that's hosted on a web server, the browser will request the file by HTTP. When the request is received by the web server, the HTTP server will accept the request, find the content and send it back to the browser through HTTP.
One of the famous servers that serving for a long time is APACHE2.
Apache is a popular open-source, cross-platform web server that is, by the numbers, the most popular web server in existence. It’s actively maintained by the Apache Software Foundation.
Some high-profile companies using Apache include Cisco, IBM, Salesforce, General Electric, Adobe, VMware, Xerox, LinkedIn, Facebook, Hewlett-Packard, AT&T, Siemens, eBay, and many more.
Now we know!
let's progress forward to know what HTML is.
What is HTML?
HTML is the language in which most websites are written. HTML is used to create pages and make them functional. The latest version is known as HTML5.
The code used to make them visually appealing is known as CSS, also to make it interactive like if you click a button some image pops up or the colour of the page changes from bright mode to night mode as you can test by clicking on the top icon where you can see moon/sun to the top right of this article. But..... wait, we shall focus on this later, it's like the Wright brothers, trying to dream about flying a military Jet, LOL.
Alright, A Markup Language is a way that computers speak to each other to control how text is processed and presented. To do this HTML uses two things: tags and attributes.
A small example of tags and attributes is below:
- Tags are used to mark up the start of an HTML element and they are usually enclosed in angle brackets. An example of a tag is:
<h1>.
Most tags must be opened <h1> and closed </h1> in order to function.
- Attributes contain additional pieces of information. Attributes take the form of an opening tag and additional info is placed inside.
An example of an attribute is:
<img src="mydog.jpg" alt="A photo of my dog.">
In this instance, the image source (src) and the alt text (alt) are attributes of the <img> tag.
Golden Rules To Remember:
The vast majority of tags must be opened (
<tag>) and closed (</tag>) with the element information such as a title or text resting between the tags.When using multiple tags, the tags must be closed in the order in which they were opened. For example:
<strong><em>This is really important!</em></strong>
But you would be asking, hey bro we need to write it somewhere, so there must be some text editor for it, right?
Right, there are multiple editors like Sublime text, Atom, VS code etc. Feel free to use any but I prefer VS code due to a variety of plugins. And one of the plugins which come pre-installed is EMMET.
What is Emmet?
What is Emmet you say?? let me put an analogy: EMMET to Developers is like what Fuel is to a car! You can either push the car or hit the accelerator and hit 100 Km/h.
EMMET increases a developer's speed by thousand folds(a bit exaggerating tho, but you get the gist), by using keyboard shortcuts.
Here's a video explaining how to use emmet, also you can go to the documentation for how to use it and become GOD in HTML development:
Now let's move to HTML and end this article with its basics.
HTML is made up of various tags like <a>...</a>, <P>....</P>, <div>...</DIV>
I won't go into all the tags, you can easily go to the link given at the bottom of this article, Adios!
Did you observe any inconsistency in the above examples? Right? Do you know HTML will still render them properly, meaning HTML is a flexible language, hey now, don't you take advantage of HTML's flexibility, be gentle with her, if you treat her with care, your site might reward you. You ask how?
Here comes the concept of Accessibility and SEO. Your HTML page should be developed with utmost care and you should have a bit of knowledge on how Accessibility and SEO play a role while developing.
What are SEO and Accessibility?
As you learn more about HTML — read more resources, look at more examples, etc. — you'll keep seeing a common theme: the importance of using semantic HTML (sometimes called POSH, or Plain Old Semantic HTML). This means using the correct HTML elements for their intended purpose as much as possible.
In Simple words, your site should be in a structured manner, inserting divs, p, a, and header tags here and there will mess up the site and make it less sensitive for the browsers to read and make it less SEO favourable.
You might wonder why this is so important. After all, you can use a combination of CSS and JavaScript to make just about any HTML element behaves in whatever way you want and have a beautiful page as well. For example, a control button to play a video on your site could be marked up like this:
<div>Play video</div>
But as you'll see in greater detail later on, it makes sense to use the correct element for the job:
<button>Play video</button>
Not only do HTML <button>s have some suitable styling applied by default (which you will probably want to override), they also have built-in keyboard accessibility — users can navigate between buttons using the Tab key and activate their selection using Space, Return or Enter.
OR
Adding attributes to alt attr to <img> tag like below
<img src="wrongname.gif" alt="A narrow city street with flowers in Chania">
If we put alt="A narrow city street with flowers in Chania", then any client who is visually not doing well, he/she/they can use text to speech synthesizer to understand what exactly is there on the website.
And do you know that's how it becomes favourable for SEO. Now let's say you created an HTML file for a client which owns a chocolate factory, why not Willy Wonka !!
But here's a catch, like Willy Wonka there will be multiple other chocolate businessmen who had asked developers to create the site, let's say that would be SiteB
Now your site, SiteA, and another site, SiteB both will come on the search of the chocolate factory.
But the question is who's site will come on the Top ?????
Here comes the power of SEO, if your site is more SEO favourable then yours will come to the top and the chances of a user clicking it increase as compared to the user going to the 7th page and hitting the link.
But first, learn about HTML as much as you can, and here's a link to where you can start as a beginner.
Once you have gone through it and practised, polish your knowledge and become an expert by going through the MDN docs for HTML, below is the link:
The motive of this article was not to give info to a beginner in an as short time as possible but to make a beginner grasp everything without searching on 10 different sites.