Learn the key components of HTML and how to structure web pages.
Understand the basics of CSS for styling elements on your webpage.
Create your first HTML page and apply internal CSS styles.
Grasp fundamental concepts like the Box Model and text alignment.
HTML (Hypertext Markup Language) is the standard language used to create web pages. Understanding its structure is essential for any web developer.
Key Components of HTML:
<h1>This is a main heading</h1>
<h2>This is a subheading</h2>
Paragraphs: Use <p> tags to define blocks of text.
<p>This is a paragraph of text.</p>
Links: Use <a> tags to create hyperlinks.
<a href="https://www.example.com">This is a link</a>
Images: Use <img> tags to include images.
<img src="image.jpg" alt="Description of image">
Let’s create a simple HTML page. Follow these steps:
Open a Text Editor: Use any text editor like Notepad, VSCode, or Sublime Text.
Create a New File: Save it as index.html.
Basic HTML Template:
<!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 First Web Page</h1>
<p>This is a paragraph of text that provides some information.</p>
<a href="https://www.example.com">Click here to visit an example site</a>
<img src="image.jpg" alt="A sample image">
</body>
</html>
The box model is a fundamental concept in CSS that describes how elements are structured and styled on a webpage. Each HTML element is considered a box, which consists of the following:
| Margin |
| Border |
| Padding |
| Content |
CSS (Cascading Style Sheets) is used to style HTML elements. You can apply styles in different ways:
<!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>
<style>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
color: #333;
}
h1 {
color: darkblue;
text-align: center;
}
p {
font-size: 18px;
text-align: justify;
}
a {
color: green;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<h1>Welcome to My First Web Page</h1>
<p>This is a paragraph of text that provides some information.</p>
<a href="https://www.example.com">Click here to visit an example site</a>
<img src="image.jpg" alt="A sample image">
</body>
</html>
<!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>
<style>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
color: #333;
}
h1 {
color: darkblue;
text-align: center;
}
p {
font-size: 18px;
text-align: justify;
}
a {
color: green;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<h1>Welcome to My First Web Page</h1>
<p>This is a paragraph of text that provides some information.</p>
<a href="https://www.example.com">Click here to visit an example site</a>
<img src="image.jpg" alt="A sample image">
</body>
</html>
You can set colors using color
body {
font-family: Arial, sans-serif;
font-size: 16px;
}
h1 {
color: red; /* Color name */
}
p {
color: #00ff00; /* Hex code */
}
You can change the font family, size, and style.
Text Alignment:
You can align text using the text-align property.You can align text using the text-align property.
h1 {
text-align: center;
}
Let’s apply CSS to the HTML page you created earlier.
index.html to include an internal stylesheet:<!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>
<style>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
color: #333;
}
h1 {
color: darkblue;
text-align: center;
}
p {
font-size: 18px;
text-align: justify;
}
a {
color: green;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<h1>Welcome to My First Web Page</h1>
<p>This is a paragraph of text that provides some information.</p>
<a href="https://www.example.com">Click here to visit an example site</a>
<img src="image.jpg" alt="A sample image">
</body>
</html>
index.html in your web browser to see the results.Congratulations! You’ve created your first web page using HTML and CSS. In this blog series, we’ve covered the basic structure of HTML, the box model, and how to style your webpage using CSS.
Stay tuned for more advanced topics in web development, including JavaScript and responsive design!
HTML (Hypertext Markup Language) is the standard language used to create and structure content on web pages. It defines the structure of a webpage using elements like headings, paragraphs, links, and images.
By submitting, you agree to our privacy policy.
