HTML, CSS, Javascript
You will learn how websites work.
The Foundations of Web Development: HTML, CSS, and JavaScript
When it comes to building websites, three core technologies form the foundation of web development: HTML, CSS, and JavaScript. Each plays a crucial role in creating dynamic, interactive, and visually appealing web pages. In this blog post, we will explore these technologies, explain their roles, and provide simple examples to help you get started.
HTML: The Structure
HTML (HyperText Markup Language) is the backbone of any web page. It defines the structure and content of a web page using elements like headings, paragraphs, links, images, and more.
Key Features of HTML:
- Elements and Tags: HTML uses tags (e.g.,
<p>
,<a>
,<img>
) to create elements that structure the content. - Attributes: Tags can have attributes that provide additional information (e.g.,
<a href="https://example.com">
).
Example of HTML:
Here’s a basic HTML document structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph of text on my web page.</p>
<a href="https://example.com">Visit Example.com</a>
</body>
</html>
In this example:
<h1>
defines a heading.<p>
defines a paragraph.<a>
defines a hyperlink.
While these three are the core building blocks, modern websites often incorporate additional elements:
- Images and Videos: Enhance the visual appeal and provide additional information.
- Fonts: Add variety and enhance visual hierarchy.
- Frameworks and Libraries: Pre-written code that simplifies development and adds functionality.
Semantic and Non Semantic Elements
Semantic
<div></div>
<main></main>
<section></section>
Non Semantic
<p>Paragraph</p>
<b>Bold</b>
<nav>Navigation</nav>
<aside>Sidebar</aside>
<footer>Footer Text</footer>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<ol>
</li>First</li>
</li>Second</li>
</li>Third</li>
</ol>
<select>
<option>1</option>
</select>
<button>Press Me</button>
Attributes
Attributes can be added to elements to adjust their behavior or functionality.
<html>
<head>
<title>Welcome</title>
<link rel='stylesheet' href='style.css'>
<script src='script.js'></script>
</head>
<body>
<input id="personal-phone" class="phone-number" value="1234567890" type="tel"/>
<button onclick="alert('Hello')">Call Me</button>
</body>
</html>
CSS: The Style
CSS (Cascading Style Sheets) is used to control the presentation and layout of web pages. It allows you to apply styles like colors, fonts, spacing, and positioning to HTML elements.
Key Features of CSS:
- Selectors: Select elements to apply styles to (e.g.,
h1
,.class
,#id
). - Properties and Values: Define styles using properties (e.g.,
color
,font-size
) and their values (e.g.,red
,16px
).
Example of CSS:
Here’s an example of CSS to style the HTML from above:
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 20px;
}
h1 {
color: #333;
}
p {
color: #666;
font-size: 14px;
}
a {
color: #0066cc;
text-decoration: none;
}
In this example:
- The
body
selector styles the entire page with a font, background color, and margin. - The
h1
selector changes the color of the heading. - The
p
selector adjusts the color and font size of paragraphs. - The
a
selector changes the color of links and removes the underline.
JavaScript: The Interactivity
JavaScript is a programming language that adds interactivity and dynamic behavior to web pages. It allows you to manipulate HTML and CSS, respond to user actions, and create complex web applications.
Key Features of JavaScript:
- DOM Manipulation: Change the content and style of HTML elements.
- Event Handling: Respond to user actions like clicks and keyboard inputs.
- Logic and Computation: Perform calculations, make decisions, and control the flow of a program.
Example of JavaScript:
Here’s a simple example of JavaScript to add interactivity:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Web Page</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
}
button {
padding: 10px 20px;
font-size: 16px;
}
#message {
margin-top: 20px;
font-size: 18px;
}
</style>
</head>
<body>
<h1>Click the Button!</h1>
<button onclick="displayMessage()">Click Me</button>
<p id="message"></p>
<script>
function displayMessage() {
document.getElementById('message').innerText = 'Hello, world!';
}
</script>
</body>
</html>
In this example:
- An HTML button is created with an
onclick
attribute that calls thedisplayMessage
function when clicked. - The
displayMessage
function uses JavaScript to change the text of the paragraph with the IDmessage
.
Add two numbers together when a button is clicked
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<button onclick="add(3,4)">My CSS will make me blue</button>
<script src="script.js"></script>
</body>
</html>
function add(a,b){
console.log(a+b)
}
button{
background-color: blue;
padding: 10px 10px;
border-radius: 2rem
}
You can also include HTML, CSS and JavaScript in the same HTML file
<html>
<h1 id="heading">Hello World</h1>
<p>Click the button below to change the size and color of the heading</p>
<button onclick="changeColor()"> Change Color </button>
<style>
h1{
color:red;
font-size: 64px
}
</style>
<script>
function changeColor(){
const heading = document.getElementById('heading')
heading.style.color = 'green'
heading.style.fontSize = 120
}
</script>
</html>
Modern websites often incorporate additional elements:
- Images and Videos: Enhance the visual appeal and provide additional information.
- Fonts: Add variety and enhance visual hierarchy.
- Frameworks and Libraries: Pre-written code that simplifies development and adds functionality.
You can also include HTML, CSS and JavaScript in the same HTML file
<html>
<h1 id="heading">Hello World</h1>
<p>Click the button below to change the size and color of the heading</p>
<button onclick="changeColor()"> Change Color </button>
<style>
h1{
color:red;
font-size: 64px
}
</style>
<script>
function changeColor(){
const heading = document.getElementById('heading')
heading.style.color = 'green'
heading.style.fontSize = 120
}
</script>
</html>
In a Nutshell
Here’s how HTML, CSS, and JavaScript work together:
- HTML provides the structure of the page.
- CSS styles the page to make it visually appealing.
- JavaScript adds interactivity to respond to user actions.
By combining these technologies, you can create dynamic and engaging web pages that provide a rich user experience.