In this lesson, we will learn more about websites, with a focus on following key points,
- More on using HTML, CSS, and JavaScript to create websites.
- Different components that are involved in the working of websites.
In the previous tutorial, we touched upon some basics of HTML and CSS. We were able to create a website by giving it structure using HTML and styling using CSS. However, plain websites with only color and information can also be boring. Users generally want the websites to be interactive and have engaging content. For this purpose, websites use another programming language called JavaScript. HTML elements and CSS styles can be modified and animated using JavaScript code for more immersive content. The first part of the lesson will focus on learning more about these topics.
Coding websites using HTML, CSS, and JavaScript files create them locally only. A crucial part of understanding how websites work is to understand how they are available on the internet. This requires internet protocols and webservers. We will explore these terminologies, and also explore the process of loading websites in browser in the second part of this lesson.
More on HTML Tags and CSS Selectors
Since we know basic HTML and CSS, let's start by considering an example. The following HTML/CSS code creates a web page with blue-colored headings, styled using CSS.
1<!DOCTYPE html>
2<html>
3<head>
4 <title> My First Webpage </title>
5 <link rel="stylesheet" href="style.css">
6</head>
7<body>
8 <h1> First Heading </h1>
9 <p> Hello World! </p>
10 <h1> Second Heading</h1>
11</body>
12</html>1h1{
2 color: blue;
3}
However, as we have selected the entire h1 heading as a CSS selector, it colored both the headings blue.
To color individual h1 headings with a different color, we can assign IDs or classes as attributes to respective h1 HTML tags. In CSS, we can refer to these tags by using ID selectors (# symbol) and class selectors (. symbol)for styling. This is a common technique for the styling of HTML elements. Let's look at an example.
1<!DOCTYPE html>
2<html>
3<head>
4 <title> My First Webpage </title>
5 <link rel="stylesheet" href="style.css">
6</head>
7<body>
8 <h1 id="first"> First Heading </h1>
9 <p> Hello World! </p>
10 <h1 class="headings"> Second Heading </h1>
11</body>
12</html>1#first{
2 color: blue;
3}
4.headings{
5 color: green;
6}
The difference between an ID and a class attribute is that an ID is unique to a specific HTML attribute, and can be specified to only one element. Unlike an ID, a class can be used for multiple HTML elements. This makes classes a more generalized method of styling HTML elements.
Are you sure you're getting this? Click the correct answer from the options.
Which of the following statements is true about HTML attributes?
Click the option that best answers the question.
- "Attributes provide extra information to HTML tags"
- "Attributes are specified inside opening HTML tag"
- "Attributes are specified in name-value format"
- "All of the above"
Basics of JavaScript
JavaScript is a lightweight, text-based programming language that adds interactivity to websites. It cannot execute independently, that is, it requires the support of another language (HTML) for execution.
Adding JavaScript to a Web page
Just like CSS stylesheets are added to an HTML page, JavaScript files can be externally linked in a similar way using the <script> tag within the head or body element.
1<!DOCTYPE html>
2<html>
3<head>
4<title> My First Webpage </title>
5<link rel="stylesheet" href="style.css">
6<script src="script.js"></script>
7</head>
8<body>
9<h1> Hello World! </h1>
10</body>
11</html>Scripts can also be embedded within the HTML document by writing the JS code within the <script> tag. However, the recommended approach is to use external scripts as this approach allows us to reuse the same script for multiple HTML files.
Working with JavaScript
JavaScript allows editing and modifying HTML content and CSS styles. Let's understand how JavaScript brings interactivity to websites by an example.
Consider a website with some hidden content. We can use JavaScript to display this hidden content once the user interacts with an HTML element (here, a button) on the page.
The HTML code for this example will be,
1<!DOCTYPE html>
2<html>
3<head>
4<link rel="stylesheet" href="style.css">
5<script src="script.js"></script>
6</head>
7<body>
8<h1> JavaScript Example </h1>
9<p> This is a JavaScript example </p>
10<p id="example"> This is a hidden sentence </p>
11<button type="button" onclick="display()">Show</button>
12</body>
13</html>CSS stylesheet
1#example{
2 display: none;
3}JavaScript code
1function display(){
2 document.getElementbyId('example').style.display = "block"
3}Here, we assign a JavaScript function to the onclick attribute of the button HTML tag. This attribute specifies that the display() function from the script should be called once the user clicks the button. The JavaScript function gets the hidden element from its ID and changes its display style to show the hidden content. The hidden text then becomes visible.
This example shows one of the many things that JavaScript can do. Many libraries have also been developed in JavaScript to make it easier to perform various tasks on the web.
Let's test your knowledge. Is this statement true or false?
JavaScript files can be added to HTML document using the <link> tag.
Press true if you believe the statement is correct, or false otherwise.
Technical Working of Websites
So far we have discussed what kind of files are used in the creation of websites. HTML, CSS, and JavaScript are all files used to create a single website that is displayed on our browsers. However, the question remains about how these websites are made available on the internet, and how does the internet retrieves the desired website once we type in its address in the address bar in a browser.
Let's understand this step by step, with some technical terminologies.
IP Address and DNS Records
Every website on the internet has an IP address. This IP address is a unique identifier for each website that is available on the internet. Each of these IP addresses is recorded in a directory called DNS (Domain Name System). DNS contains a list of URLs of all the websites with their corresponding IP addresses. It's like a phone directory that has a list of names with corresponding phone numbers!
As you type in the domain name (or address of the website) into the browser's address bar, the browser looks up the corresponding IP address of the specified website in these DNS records.
This
IP addressis important as it is used later to identify and obtain information according to the requested website address.
Internet Protocol and HTTP Requests
Once you find the IP address from DNS, then an HTTP request is issued. This means that the browser will now build a connection with the server that matches the corresponding IP address to transfer information. This connection is built using internet protocols. Internet protocols are the set of rules and guidelines that dictate how data communication over the Internet takes place. Several internet protocols exist, but the most commonly used protocol is known as TCP protocol.
Once the browser receives the correct IP address of the specified domain name, it builds a connection with a webserver that matches the IP address. As this connection is established, now the data transfer from the webserver to the client (your computer) can take place.
Webservers and HTTP Response
A webserver is software and hardware where websites are stored, processed, and delivered over an HTTP connection.
Once web servers receive an HTTP request, they process it and generate an HTTP response. This response contains the requested website and other important information. The browser has now received the content for the website and displays the requested webpage.
At a broader level, browsers go through the aforementioned steps to display a website. This may seem like a very long process, but they are performed instantly and browsers display websites within milliseconds.
Are you sure you're getting this? Fill in the missing part by typing it in.
The program used by clients (or users) to view websites is ____.
Write the missing line below.
Summary
In this lesson, we learned more about the working of websites, both about underlying files of websites and regarding browser technicalities.
One Pager Cheat Sheet
- We will explore modifying and animating HTML elements and CSS styles with JavaScript code for creating user-engaging websites, and also learn about internet protocols and webservers to make them available on the internet.
- We can use
ID selectors(#symbol) andclass selectors(.symbol) inCSSto style individualHTMLelements assigned withIDsorclassesas attributes. - All HTML elements can have
idandclassattributes that can be used to target single or multiple elements for styling. - JavaScript is a
lightweight,text-basedprogramming language that adds interactivity to websites and requires the support of another language (HTML) for execution. - Linking a
<script>tag with an external JavaScript file is the most efficient way to add JavaScript code to an HTML page. - JavaScript allows users to interact with HTML elements by attaching JavaScript functions to create dynamic effects with the help of libraries.
- The
<link>tag is used toaddstylesheetsto anHTMLdocument, while the<script>tag is used to include a script, with thesrcattribute specifying the path to theJavaScriptfile. Websites are made available on the Internet through the use ofHTML, CSS and JavaScriptfiles, and the Internet retrieves these websites when an address is typed into the address bar of a browser.- Every website has a unique
IP addressthat is recorded in theDNSdirectory, which functions like a phone directory connecting domain names to their correspondingIP addresses, allowing the browser to look up and identify information according to the requested website address. - Using
Internet Protocolssuch as TCP, the browser builds a connection with a webserver using the correct IP address obtained from DNS to transfer information. - Browsers make an
HTTP requestto awebserver, which generates anHTTP response, allowing the browser to quickly display the requested webpage. - The process of loading a webpage is completed by a user's browser sending an
HTTP request, then receiving and displaying the webserver'sHTTP responsewith the requested content in milliseconds. - We explored the relationship between
browsersand the files that make up websites.
