Day 1 | Intro to Web Development & HTML | HTML & CSS Zero to Hero (5 Days)
Table of Contents
Introduction
This tutorial is designed to introduce you to the basics of web development, focusing specifically on HTML, as presented in the "HTML & CSS Zero to Hero" series. By the end of this guide, you will have a foundational understanding of HTML, enabling you to create simple web pages and prepare you for further learning in web development.
Step 1: Understanding HTML Basics
-
What is HTML?
- HTML stands for HyperText Markup Language. It is the standard language used to create web pages.
- HTML uses tags to structure content on the web.
-
Essential HTML Tags
<html>
: The root element of an HTML page.<head>
: Contains meta-information about the document.<title>
: Sets the title of the document (shown in the browser tab).<body>
: Contains the main content of the web page.
-
Practical Tip
- Always start your HTML document with a
<!DOCTYPE html>
declaration to define the document type.
- Always start your HTML document with a
Step 2: Structuring Your First HTML Page
-
Create a Basic HTML Document
- Open a text editor (e.g., Notepad, VS Code).
- Start with the following code snippet:
<!DOCTYPE html> <html> <head> <title>My First Web Page</title> </head> <body> <h1>Hello, World!</h1> <p>This is my first web page.</p> </body> </html>
-
Explanation of the Code
- The
<!DOCTYPE html>
declaration defines the document as HTML5. - The
<h1>
tag is used for the main heading, and the<p>
tag defines a paragraph.
- The
Step 3: Adding More Content and Elements
-
Common HTML Elements
- Headers:
<h1>
to<h6>
for different heading levels. - Paragraphs:
<p>
for text blocks. - Links:
<a href="URL">Link Text</a>
to create hyperlinks. - Images:
<img src="image_url" alt="description">
to add images.
- Headers:
-
Example of Adding Elements
<h2>About Me</h2> <p>I am learning web development.</p> <a href="https://example.com">Visit my website</a> <img src="profile.jpg" alt="My Profile Picture">
Step 4: Understanding HTML Attributes
-
What are Attributes?
- Attributes provide additional information about HTML elements. They are always specified in the opening tag.
-
Common Attributes
href
: Specifies the URL for links.src
: Specifies the path to an image.alt
: Provides alternative text for images.
-
Example of Using Attributes
<a href="https://example.com" target="_blank">Open in a new tab</a> <img src="logo.png" alt="Company Logo" width="200" height="100">
Step 5: Creating a Simple Web Page Layout
-
Building a Structured Layout
-
Use various elements to create sections in your web page:
<body> <header> <h1>Welcome to My Web Page</h1> </header> <nav> <ul> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav> <section id="about"> <h2>About Me</h2> <p>This section contains information about me.</p> </section> <footer> <p>© 2023 My Web Page</p> </footer> </body>
-
-
Tips for Layout
- Use semantic HTML elements like
<header>
,<nav>
,<section>
, and<footer>
for better structure and accessibility.
- Use semantic HTML elements like
Conclusion
In this tutorial, you have learned the essentials of HTML, including basic tags, structuring a web page, and adding content. You now have the foundation needed to start building your own web pages. As a next step, consider exploring CSS to enhance the appearance of your HTML structures and gain more skills in web development. Keep practicing by creating more complex layouts and experimenting with different HTML elements and attributes. Happy coding!