Welcome to the world of web development! In this tutorial, we will explore the basics of how websites work, focusing on the front end. The front end is what users see and interact with when they visit a website. It consists of three main technologies: HTML, CSS, and JavaScript.
These technologies work together to create the structure, style, and interactivity of a website. By the end of this tutorial, you will have a basic understanding of how these technologies work and how they can be used to build a simple web page.
HTML is the foundation of any website. It defines the structure and content of a webpage.
Think of HTML as the skeleton of a website. It tells the browser what elements to display, such as headings, paragraphs, images, and links.
Example of HTML:
<!-- my_site.html -->
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is my first webpage. I am learning HTML!</p>
<img src="w3lynx_200.webp" alt="The lynx from the W3 schools site."/>
<br>
<p>A good site to learn HTML is W3Schools.
<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>
</p>
</body>
</html>
Let’s break down this HTML code:
<!DOCTYPE html> tells the browser that this is an HTML5 document.<html> is the root element of an HTML page.<head> contains metadata (like the page title).<title> sets the title of the webpage that appears in the browser tab.<body> contains the visible content of the page.<h1> is a heading.<p> is a paragraph.<img> is an image tag that displays an image. The src attribute specifies the image source, and alt provides alternative text for accessibility.<br> is a line break tag that creates a new line in the text.<a> is an anchor tag that links to another website using the href attribute, and target="_blank" makes it open in a new tab.This simple webpage looks like this.
HTML uses tags to define elements. Tags are enclosed in angle brackets (<>). Most tags have an opening tag (<tag>) and a closing tag (</tag>), with content in between. There are also exceptions such as the <img> and <br> tags that are self-closing.
HTML tags can have attributes, which provide additional information about an element. Attributes are written inside the opening tag. In the above example, the <a> tag has an attribute href that specifies the URL to link to, and target="_blank" that specifies how to open the link.
CSS is used to style a website and make it look attractive. It controls the colors, fonts, layout, and more.
Think of CSS as the clothing and decorations of the website. Without CSS, a webpage would look very plain.
Example of CSS:
/* styles.css */
body {
background-color: azure;
font-family: Arial, sans-serif;
}
h1 {
color: navy;
text-align: center;
}
p {
font-size: 18px;
color: darkblue;
}
This CSS code:
<h1>) navy and center-aligned.To use this CSS, you can link it to your HTML file like this:
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
For short CSS, you can also include it directly in the HTML file using the <style> tag inside the <head> section.
After incorporating the above CSS, our previous html-only site would look like this.
The above CSS code apply style to elements identified by their tag names. You can also apply styles to specific elements identified by a tag’s class or id attributes.
HTML tags can have class and id attributes. The class attribute is used to group elements together. Therefore, multiple elements can share the same class name (i.e., have the same class attribute value). The id attribute is used to uniquely identify a single element on the page. Therefore, only one element can have a specific id.
For example:
<p class="highlight">This is a highlighted paragraph.</p>
And in CSS, you can select the “highlight” class (note the leading .) and style it like this:
.highlight {
font-weight: bold;
color: orangered;
}
Anothe example for id:
<p id="unique">This is a unique paragraph.</p>
And in CSS (note the leading #):
#unique {
font-style: italic;
}
Let’s try the class attribute using the same example as before. We will add a class “highlight” to two new <p> tags and style it in the CSS file. The new HTML code looks like this:
<!-- my_site.html -->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is my first webpage. I am learning HTML!</p>
<p class="highlight">So for, I am making good progress.</p> <!-- new -->
<img src="w3lynx_200.webp" alt="The lynx from the W3 schools site."/>
<br>
<p>A good site to learn HTML is W3Schools.
<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>
</p>
<p class="highlight">The W3Schools site also teaches CSS!</p> <!-- new -->
</body>
</html>
And the CSS file:
/* styles.css */
body {
background-color: azure;
font-family: Arial, sans-serif;
}
h1 {
color: navy;
text-align: center;
}
p {
font-size: 18px;
color: darkblue;
}
/* new */
.highlight {
font-weight: bold;
color: orangered;
}
Take a look at the new webpage here.
JavaScript makes a website interactive. It allows you to create buttons, forms, animations, and dynamic content.
Think of JavaScript as the brain of the website, making it react to user actions like clicks or typing.
Example of JavaScript:
<button onclick="sayHello()">Click Me</button>
<script>
function sayHello() {
alert("Hello, welcome to my website!");
}
</script>
In this example:
For short JavaScript code, you can include it directly in the HTML file using the <script> tag like in the above example. For large project, JavaScript code is usually stored in separate files with the .js extension. You can include the external JavaScript files using the src attribute of the <script> tag. For example:
<script src="script.js"></script>
JavaScript can also manipulate HTML, allowing you to change the content and style of a webpage dynamically. For example, Javascript can retrieve new data from a sever (the backend of a website), locate elements on the webpage (e.g., using their id or class attributes), and change their content or style. We won’t go into the details about it in this tutorial.
Let’s add JavaScript to our previous example. We will add a button that shows an alert when clicked. The new HTML code looks like this:
<!-- my_site.html -->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is my first webpage. I am learning HTML!</p>
<p class="highlight">So for, I am making good progress.</p>
<img src="w3lynx_200.webp" alt="The lynx from the W3 schools site."/>
<br>
<p>A good site to learn HTML is W3Schools.
<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>
</p>
<p class="highlight">The W3Schools site also teaches CSS</p>
<button onclick="sayHello()">Click Me</button> <!-- new -->
<!-- in this example, we put javascript code at the end of the body -->
<script>
function sayHello() {
alert("Hello, welcome to my website!");
}
</script>
</body>
</html>
You can see the new webpage here.
With these three technologies, you can create amazing websites. Start experimenting by writing your own HTML, CSS, and JavaScript code!
Created by Jay / TDMDAL with litedown and ChatGPT.