Every time you fire up the web browser and enters a URL, it will present you with a web page. As you can see that a web page is full of text, images, videos. But, Under the hood, A web page is nothing a text file with a bunch of code and content in it. It’s that simple. Nothing more.
You write a web page in HTML, CSS, and Javascript languages. Now, let’s take a look at their responsibilities.
The only purpose of HTML is to give structure and meaning to your website content. the web browser uses this structure to paint the web page on to the screen.
“Wait! What is the content?”
Content is the information, and on a Web page, you can serve the content using text, images, videos, audio, powerpoint presentations, etc. Content lets you communicate with your website audience (Users of your website!)
“I see a lot of text on websites, Where does the text go inside the code?”
Not only text, but also Every other type of content lives in between HTML Tags, and That’s how HTML gives meaning to the content. For example, Imagine you are writing a novel. You can add quotes using the “<blockquote>” HTML tag. You can divide that long piece of text content into paragraphs using a bunch of “<p>” tags. You can add a beautiful image using the <img> tag. There is an HTML tag for almost every purpose.
CSS controls the look and feel of the content written in HTML. It deals with the layout of a web page. It adds color to otherwise dull headline and text content. It adds space between those two long paragraphs. It does a lot more. To sum it up, we use CSS for design purposes.
When you click on “What’s on your mind?” box on Facebook, Facebook tries to give you a feel that status box is being raised up by covering up the rest of the page with a transparent black background, so that you can focus on typing your status. Javascript made this feature possible.
“So, what’s the point?”
When written correctly, Javascript helps your website users to experience your website in a better way. It encourages interactivity on your site.
Facebook’s Like feature is another example. Facebook gives you immediate feedback showing you that liked a profile picture when you click on the like button.
Here are a few more examples of what Javascript brings to the table. Without Javascript, you can’t imagine using the following services. In fact, these services do not even let you use their service without enabling Javascript on your browser.
Google Search
Gmail relies heavily on Javascript to give its users a better experience. For example, When you click on an email, it immediately shows the content of it. Gmail allows you to quickly skim through all the available emails within a tiny amount of time by using Javascript.
“That means, we can enable and disable javascript of the website using the browser, is that right?”
Right! The browser lets you disable javascript for various reasons.
“But wait, When I visit my Facebook account or any other website for that matter, I do not see any code. I can only see the content. What’s happening?”
Well, how do you open up a website?
“I open up the Browser, I type a website URL and hit the enter button.”
That’s correct. And when you submit a website URL, Browser gets the webpage with Content and code, goes through it line by line, analyzes it and draws the web page on to your computer screen.
“Hey, Guys! Stop it right there! What is a URL?”
Haha, you skipped the previous lessons, don’t you? URL stands for Uniform Resource Locator. It is nothing but a reference to a web page. For example, the only way you can access the design related questions on Quora is by visiting this quora URL “https://www.quora.com/pinned/Entertainment”.
Now that you understand the ecosystem of a website, in the next lesson, you’ll learn about the Static Website and Dynamic website.
