Hello fellow developers! 👋 In our quest to master web development, we'll begin by tackling a cornerstone technology - HTML. This coding language is a must-know, whether you're a seasoned developer or just starting out. So grab your favorite beverage ☕️, and let's get started.
The ABC of HTML 📚
HTML, or HyperText Markup Language, is the standard markup language utilized for creating web pages. HTML helps in creating and structuring sections, paragraphs, headings, links, and blockquotes for web pages and applications. Here's a look at a simple HTML structure:
<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a simple HTML document.</p>
</body>
</html>
An HTML document always starts with a <!DOCTYPE html> declaration, informing the browser that this is indeed an HTML5 document. This is followed by the <html> element, which wraps around all the content on the entire page.
The <head> element inside <html> contains metadata for the web page, such as its title displayed in the browser's title bar or tabs.
The <body> element inside <html> contains the content that is visible to the user.
Adding Style with CSS 🎨
Now that we created a basic HTML structure, let's add some style. CSS (Cascading Style Sheets) is a style-sheet language used for describing the look and formatting of a document written in HTML. Here's how to add CSS directly into HTML:
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
<title>My Stylish HTML Page</title>
</head>
<body>
<h1>This is a blue heading</h1>
<p>This paragraph is in red.</p>
</body>
</html>
In the above snippet, we have used <style> tags inside the <head> element for our styling. The body tag has been given a background-color of powderblue, the h1 tag a color of blue, and the p tag a color of red.
Well, that wraps up our quick introduction to HTML. With the foundational knowledge of HTML and CSS, you are now on your way becoming a web developer! 🎉
Remember to code everyday, and the seemingly steep learning curve will gradually flatten out. ⛰️
You can learn more about HTML and CSS from the resources below. But remember, web development is a rapidly changing field, so some materials might get outdated. 📅
Further Reading:
- HTML documentation: Mozilla Developer Network
- CSS documentation: Mozilla Developer Network
Until next time, happy coding! 👋 👨💻
