HTML Style Guide 🎯

Welcome to our in-depth guide on HTML! This tutorial is designed to help you understand the fundamental building blocks of the web, making you confident in creating your own web pages. 📝

What is HTML? 💡

HTML, or HyperText Markup Language, is the standard language used to create web pages. It consists of a series of tags that define the structure and content of a web page.

Basic HTML Structure 💡

Every HTML document starts with a <!DOCTYPE html> declaration, followed by an <html> tag and its contents. The root element inside the <html> tag is the <head> section, which contains meta-information, and the <body> section, which contains the visible content.

html

<!DOCTYPE html>
<html>
<head>
    <!-- Meta information goes here -->
</head>
<body>
    <!-- Visible content goes here -->
</body>
</html>

HTML Elements and Attributes 💡

HTML elements are defined using tags, such as <p> for a paragraph or <img> for an image. Some tags, like <a> for a link, may have attributes, such as href for the link's URL.

html

<a href="https://codeyourcraft.com">Visit CodeYourCraft</a>

HTML Text Formatting 💡

HTML provides several tags for text formatting, including <h1> to <h6> for headings, <p> for paragraphs, <strong> for bold text, <em> for italic text, and more.

html

<h1>Welcome to CodeYourCraft!</h1>
<p>Here is some text in a paragraph.</p>
<strong>This text is bold.</strong>
<em>This text is italic.</em>

HTML Lists 💡

HTML offers two types of lists: ordered (numbered) lists using <ol> and unordered (bulleted) lists using <ul>.

html

<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

HTML Links and Images 💡

HTML allows you to create links using the <a> tag and to add images using the <img> tag.

html

<a href="https://codeyourcraft.com">Visit CodeYourCraft</a>

<img src="image.jpg" alt="A description of the image">

HTML Tables 💡

HTML provides the <table> tag for creating tables. Each row is defined using the <tr> tag, and each cell is defined using the <td> tag.

html

<table>
  <tr>
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
  </tr>
  <tr>
    <td>Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
  </tr>
</table>

Quiz 💡

HTML Forms 💡

HTML forms allow users to interact with web pages by submitting information. Forms are created using the <form> tag and include fields such as <input>, <textarea>, and <select>.

html

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">

  <label for="message">Message:</label>
  <textarea id="message" name="message"></textarea>

  <label for="options">Choose an option:</label>
  <select id="options" name="options">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
  </select>

  <input type="submit" value="Submit">
</form>

HTML CSS and JavaScript 💡

HTML can be styled using CSS and made interactive using JavaScript. These languages are essential for creating dynamic and visually appealing web pages.

Conclusion ✅

Congratulations! You now have a solid foundation in HTML. As you continue to explore, remember to focus on creating clean, well-structured code, and to always strive for a balance between form and function. Happy coding! 🚀