HTML (HyperText Markup Language):
HTML is the foundational language used to create the structure of a webpage. It stands for HyperText Markup Language. HTML uses various tags to define and structure content on a web page. These tags represent elements such as headings, paragraphs, images, links, and more. HTML provides the skeleton of a webpage, outlining its basic structure and organizing the content in a way that browsers can interpret and display.
Example of HTML code for a simple webpage 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 Webpage</title>
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
</header>
<section>
<p>This is a simple webpage created using HTML.</p>
<img src="image.jpg" alt="A sample image">
</section>
<footer>
<p>© 2024 My Website</p>
</footer>
</body>
</html>
CSS (Cascading Style Sheets):
CSS complements HTML by providing the styling and presentation of the content. It stands for Cascading Style Sheets. CSS allows you to control the layout, colors, fonts, and overall design of a webpage. By using CSS, you can enhance the visual appeal of your HTML structure, making it more engaging and user-friendly. CSS rules are applied to HTML elements, specifying how they should be displayed on different devices and screen sizes.
Example of CSS code for styling the previous HTML webpage:
body {
font-family: 'Arial', sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
section {
padding: 20px;
}
img {
max-width: 100%;
height: auto;
}
footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
Together, HTML and CSS form the backbone of web development, allowing developers to create visually appealing and well-structured websites. HTML defines the content, and CSS styles and formats that content to provide an engaging and seamless user experience.
Lets See a complete html css code of a website :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Website</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
nav {
background-color: #444;
color: #fff;
padding: 10px;
text-align: center;
}
nav a {
color: #fff;
text-decoration: none;
padding: 10px;
margin: 0 10px;
}
nav a:hover {
background-color: #555;
}
main {
padding: 20px;
}
footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
position: fixed;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<header>
<h1>Simple Website</h1>
</header>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
<main>
<h2>Welcome to our simple website!</h2>
<p>This is a basic example of an HTML and CSS website.</p>
</main>
<footer>
© 2024 Simple Website
</footer>
</body>
</html>
