Introduction to Html and Web Development
Learn the essential skills and steps to become a full stack developer. Start your journey today with this comprehensive guide for beginners!
Last Update: 10 Oct 2024
1.Introduction to Web Development
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">
2.HTML Basics: Structure of a Web Page (Headings, Paragraphs, Links, Images)
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>
3.Understanding the Box Model
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:
- Content: The actual content of the box, such as text or images.
- Padding: Space between the content and the border of the box.
- Border: A line that surrounds the padding (if any).
- Margin: Space outside the border that separates the box from other elements.
| Margin | | Border | | Padding | | Content |
4.Hands-on: Creating Your First HTML Page
CSS (Cascading Style Sheets) is used to style HTML elements. You can apply styles in different ways:
1. Inline Styles: Directly within the HTML elem
<!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>
5.Styling with CSS: Inline Styles, Internal Stylesheets
<!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>
6.Basic Styling with CSS: Colors, Fonts, and Text Alignments
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 */
}
Fonts:
You can change the font family, size, and style.
Text Alignment:
You can align text using the text-align property.Text Alignment:
You can align text using the text-align property.
h1 {
text-align: center;
}
7.Hands-on: Applying Basic CSS to Your HTML Page
Let’s apply CSS to the HTML page you created earlier.
Update your 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>
Final Steps:
- Open Your HTML File: Open
index.htmlin your web browser to see the results. - Experiment: Modify styles in the CSS section and refresh the page to see changes in real-time.
8.Conclusion
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!
Get the best of our content straight to your inbox!
By submitting, you agree to our privacy policy.
