Introducion to HTML, CSS and Javascript
HTML, CSS, and JavaScript are the three main technologies used for web development. Together, they allow web developers to create dynamic and interactive websites that can run in modern web browsers.
HTML
HTML stands for HyperText Markup Language. It is a markup language that is used to structure and give meaning to web content. HTML is used to create the structure and layout of a web page by using a series of tags. These tags define the different elements on a page, such as headings, paragraphs, lists, and links.
Here is an example of an HTML document:
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is my personal website where I share my thoughts and ideas.</p>
<ul>
<li>About</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</body>
</html>In this example, we have an HTML document with a head element and a body element. The head element contains information about the document, such as the title, and the body element contains the content that is displayed on the page. Inside the body element, we have a heading and a paragraph, as well as an unordered list of links.
CSS
CSS stands for Cascading Style Sheets. It is a stylesheet language that is used to describe the look and formatting of a document written in HTML. CSS is used to control the layout and styling of web pages, including colors, fonts, and sizes.
CSS is usually written in a separate file from the HTML, and is linked to the HTML document using a link element in the head of the document. Here is an example of a CSS file:
body {
font-family: sans-serif;
color: #333;
background-color: #fafafa;
}
h1 {
font-size: 2em;
color: #00b8d4;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
margin-right: 1em;
}
a {
text-decoration: none;
color: #333;
}In this example, we have defined styles for the body, h1, ul, li, and a elements. We have set the font family for the body, the font size and color for the heading, and the display and margin for the list items. We have also removed the default list style and set the text decoration and color for the links.
JavaScript
JavaScript is a programming language that is used to add interactivity to web pages. It is a client-side language, meaning that it is executed by the web browser on the user’s computer, rather than on a server.
JavaScript can be used to manipulate the DOM (Document Object Model), which is a representation of the HTML document in the web browser. It can be used to add, remove, or modify elements on a page, as well as to handle events such as clicks or form submissions.
Here is an example of a JavaScript code snippet that changes the text of an element when a button is clicked:
const button = document.querySelector('button');
const text = document.querySelector('p');
button.addEventListener('click', function() {
text.textContent = 'Button was clicked!';
});In this example, we have selected the button and p elements from the DOM using the querySelector method. We have then added an event listener to the button that listens for a click event, and when the button is clicked, the textContent of the paragraph is changed to 'Button was clicked!'.
Conclusion
HTML, CSS, and JavaScript are the three main technologies that are used for web development. They work together to create dynamic and interactive websites that can be accessed by users through their web browsers. HTML is used to structure and give meaning to the content on a web page, CSS is used to control the layout and styling of the page, and JavaScript is used to add interactivity and handle events.
With these technologies, web developers can build a wide range of applications, from simple websites to complex web-based applications. Whether you are a beginner looking to learn web development or an experienced developer looking to expand your skills, understanding how these technologies work together is essential for building modern and effective websites.
