For beginners, the thought of designing a website from scratch can seem like a really difficult task. Let’s ease it a little bit in this blog. The online market is expanding at a good rate and for most of us, websites form part of our daily life.
HTML, CSS, and JS are special web languages that work together as a framework to form the front-end design of a website by applying information that affects content, styling, and dynamically interacting with a site. A framework can be considered as a platform to develop applications. The framework may differ upon the type of software you are designing but in our case, this platform is provided to us by the combination of web languages mentioned above.
Using HTML to display our content
HTML stands for Hypertext Markup Language. It allows the user to create and structure the content inside the web pages. The content can contain anything like headings, paragraphs, images, links, etc.
HTML doesn’t have the ability to create dynamic functionality because it’s not a programming language. Instead, it just makes it possible to organize and format documents, the same way we do in Microsoft Word. When working with HTML, we use tags to mark up a web page. Let’s see an example below:
Here I have created a file with the extension .html (must for all HTML files)
<!DOCTYPE html>
<html>
<head>
<title>
My Website
</title>
</head>
<body>
<section>
<h1>This is an ocean</h1>
<img src="../assets/images/ocean.png" alt="nature"/>
<p>An ocean is a body of water that composes much of a planet's hydrosphere.</p>
<p>On Earth, an ocean is one of the major conventional divisions of the World Ocean. These are, in descending order by area, the Pacific, Atlantic, Indian, Southern, and Arctic Oceans.</p>
<button>Sea</button>
<button>Mountain</button>
</section>
</body>
</html>Here’s what the output of the above code looks like:
Everything enclosed between <> represents a tag. Tags used in above code include <h1>, <p> etc. They all have a different purpose and there are tons of tags shipped inbuilt with HTML. Go ahead and explore them using the internet and books.
It’s good to see our content on the webpage, but it isn’t looking pretty. Right? Next we will add some styling using CSS.
Using HTML with CSS to make our webpage attractive
CSS stands for Cascading Style Sheets. It is a simple design language whose purpose is to make web pages attractive and presentable by altering the various inbuilt styles used in the content presented through markup languages like HTML.
Using CSS, you can control the text color, font size and font family of the text, the gap between paragraphs, headings and other content, positioning of content, what to insert in the background, different styling for different devices and screen sizes as well as a huge variety of other effects and animations. Basically, any design you can think of, it can be achieved through CSS. We just need to write in the format of “property: value”
CSS can be used in 3 ways:- inline, internal, and external. It is best to use external CSS (which I will be using below) but I suggest you try and use the other two ways so that you are familiar with all the ways (although it is not the best practice).
Enough talking. Let’s see it in practice and modify our above code using CSS and see the output.
Here I have created a new file with the extension .css (must for all CSS files)
body {
margin: 0;
background-color: black;
}
#main-section {
text-align: center;
}
#heading {
color: white;
margin: 0;
font-size: 48px;
padding-top: 2%;
padding-bottom: 2%;
}
#nature-image {
width: 100%;
height: 50vh;
}
#first-paragraph {
color: white;
letter-spacing: 1px;
text-align: left;
padding-left: 3%;
}
#second-paragraph {
color: white;
letter-spacing: 1px;
text-align: left;
padding-left: 3%;
}
.button {
padding: 10px;
width: 15%;
font-size: 18px;
margin-top: 3%;
border-radius: 8px;
}Here is our modified version of HTML so that it can interact with the above CSS file.
<!DOCTYPE html>
<html>
<head>
<title>
My Website
</title>
<link rel="stylesheet" type="text/css" href="demo.css">
</head>
<body>
<section id="main-section">
<h1 id="heading">This is an ocean</h1>
<img id="nature-image" src="../assets/images/ocean.png" alt="nature"/>
<p id="first-paragraph">An ocean is a body of water that composes much of a planet's hydrosphere.</p>
<p id="second-paragraph">On Earth, an ocean is one of the major conventional divisions of the World Ocean. These are, in descending order by area, the Pacific, Atlantic, Indian, Southern, and Arctic Oceans.</p>
<button class="button">Sea</button>
<button class="button">Mountain</button>
</section>
</body>
</html>
Here’s what our output looks like after adding basic CSS to our code:
Understanding the above code
The external CSS file is linked to HTML using a <link> tag. CSS can access the HTML tags using their selectors (like ‘body’ in above code), using classes (like ‘.button’) or using ids (like ‘#main-section’). The key difference between an id and class is that id is restricted to one single element while classes can be used on multiple elements (like both buttons receive the same class in the above code).
But you must be wondering, what are those two buttons doing there? The answer is that they are just static buttons and do not perform any activity if we click them. And that is because we cannot make them do some activity using only HTML and CSS as they are only responsible for displaying the content and styling it. To add some brain to our webpage and make it dynamic, we have a very powerful tool to help us, JS.
Let’s see how it can help us, in the next section.
Using HTML with CSS and JS
JS stands for JavaScript. It is a scripting language that is used to make our webpage dynamic by changing its content at runtime, i.e. any event that occurs while you are interacting with the webpage without requiring you to manually reload that web page. JavaScript provides a ton of inbuilt functions that we can use to make our page interactive or to say, give it some brain.
As mentioned earlier, using JavaScript, we can make our buttons functional too. In most cases, a button performs a task whenever it is clicked. For that purpose, we have a predefined event handler in JS by the name of “onclick”.
So now that we know it, let’s use that in our code and see how it works.
Just like HTML and CSS, we will be creating a separate file for JS with the extension .js but you can write JS code in the HTML file itself (again it’s not the best practice).
So here’s what our JS file looks like:
function seaContent() {
document.getElementById("nature-image").src="../assets/images/ocean.png";
document.getElementById("heading").innerHTML = "This is an ocean";
document.getElementById("first-paragraph").innerHTML = "An ocean is a body of water that composes much of a planet's hydrosphere.";
document.getElementById("second-paragraph").innerHTML = "On Earth, an ocean is one of the major conventional divisions of the World Ocean. These are, in descending order by area, the Pacific, Atlantic, Indian, Southern, and Arctic Oceans.";
}
function mountainContent() {
document.getElementById("nature-image").src="../assets/images/mountain.png";
document.getElementById("heading").innerHTML = "This is a mountain";
document.getElementById("first-paragraph").innerHTML = "A mountain is a large landform that rises above the surrounding land in a limited area.";
document.getElementById("second-paragraph").innerHTML = "A mountain is generally steeper than a hill. Mountains are formed through tectonic forces or volcanism. These forces can locally raise the surface of the earth.";
}And here’s our slightly modified HTML file in which we have linked the JS file and made the buttons interactive.
<!DOCTYPE html>
<html>
<head>
<title>
My Website
</title>
<link rel="stylesheet" type="text/css" href="demo.css">
<script src="demo.js">
</head>
<body>
<section id="main-section">
<h1 id="heading">This is an ocean</h1>
<img id="nature-image" src="../assets/images/ocean.png" alt="nature"/>
<p id="first-paragraph">An ocean is a body of water that composes much of a planet's hydrosphere.</p>
<p id="second-paragraph">On Earth, an ocean is one of the major conventional divisions of the World Ocean. These are, in descending order by area, the Pacific, Atlantic, Indian, Southern, and Arctic Oceans.</p>
<button class="button" onclick="seaContent()">Sea</button>
<button class="button" onclick="mountainContent()">Mountain</button>
</section>
</body>
</html>
Here is the output after using JS in our static website to make it dynamic.
Default view
After clicking Mountain button
After clicking Sea button
Understanding the above code
In the above code, we call a function in our HTML file whenever someone clicks on a button and also linked our external JS file using <script> tag. For both buttons, I have created a separate function so that they both give different outputs. In our JS file, we have defined the functions we called while clicking the buttons. Both functions perform a similar task. Just like CSS, JavaScript can access our tags or elements using selectors, ids, and classes.
Here I have used ids because this is what was best for my use case, you can definitely choose a different approach. After getting access to the element, we can change its various properties like content, font-size, color, etc. I have simply changed the text content and the image using innerHTML and src attribute of the elements respectively. Feel free to take this even further and try to add some more content to the webpage rather than just replacing the already present content.
Basic architecture of a webpage
Conclusion of HTML, CSS and JS as a Framework
Just like the internet connects us, these languages combine themselves to make up the websites internet contains. Alone they may achieve something or the other, but together as a framework, they can create wonders. HTML, CSS, and JS are the most basic requirement required to create a webpage and there is nothing on the front-end side of the web which cannot be achieved through a combo of these three. Although to create a much complex website and designs, various other tools are available in the market which saves time and enhances the code readability on the way. Explore them!
Here are some links to go forward with:
https://www.w3schools.com/
https://angular.io/
https://ionicframework.com/
