HTML Basics

Welcome to the HTML Basics section of Coder Nova! Here, we'll explore the fundamental concepts of HTML, the backbone of web development. HTML (HyperText Markup Language) is the standard markup language used to create web pages. Let's dive into the basics together!

Structure of an HTML Document

The HTML Skeleton

To start, every HTML document has a standard structure known as the HTML skeleton. It's the foundation upon which we build our web pages. Here's what it looks like:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Webpage</title>
</head>
<body>
    <h1>Welcome to Coder Nova!</h1>
    <p>This is my first webpage.</p>
</body>
</html>

Let’s break it down:

<!DOCTYPE html>: This line tells the browser that we are using HTML5.
<html lang="en">: The <html> tag is the root element of an HTML page, and the lang attribute specifies the language.
<head>: Contains meta-information about the HTML document, like the character encoding and the title.
<meta charset="UTF-8">: Sets the character encoding to UTF-8.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Ensures proper rendering and touch zooming on mobile devices.
<title>: Sets the title of the webpage, which appears in the browser tab.
<body>: Contains the content of the webpage, such as headings, paragraphs, links, images, and more.

Common HTML Tags and Attributes

HTML uses tags to define the position, and function of elements within a document. Here is a list of HTML tags along with a brief description of their functions and use cases:

Document Structure

<!DOCTYPE>: Defines the document type and version of HTML.
<html>: Root element of an HTML document.
<head>: Contains metadata, links to scripts and stylesheets.
<title>: Sets the title of the webpage (shown in the browser tab).
<body>: Contains the content of the HTML document.

Metadata

<meta>: Provides metadata such as character set, description, keywords.
<link>: Links to external resources like stylesheets.
<style>: Embeds CSS styles within an HTML document.
<script>: Embeds or references JavaScript code.

Content Sectioning

<header>: Defines a header for a section or page.
<nav>: Defines navigation links.
<main>: Specifies the main content of the document.
<section>: Defines a section in a document.
<article>: Specifies independent, self-contained content.
<aside>: Defines content aside from the main content.
<footer>: Defines a footer for a section or page.

Text Content

<h1> to <h6>: Define headings from level 1 to 6.
<p>: Defines a paragraph.
<a>: Defines a hyperlink.
<ul>: Defines an unordered list.
<ol>: Defines an ordered list.
<li>: Defines a list item.
<dl>: Defines a description list.
<dt>: Defines a term/name in a description list.
<dd>: Describes a term/name in a description list.
<div>: Defines a division or section.
<span>: Defines a span of text.

Inline Text Semantics

<b>: Defines bold text.
<i>: Defines italic text.
<strong>: Defines important text.
<em>: Defines emphasized text.
<mark>: Defines marked/highlighted text.
<small>: Defines smaller text.
<del>: Defines deleted text.
<ins>: Defines inserted text.
<sub>: Defines subscripted text.
<sup>: Defines superscripted text.
<br>: Inserts a line break.
<hr>: Defines a thematic change or break in the content.

Media Content

<img>: Embeds an image.
<audio>: Embeds audio content.
<video>: Embeds video content.
<source>: Specifies multiple media resources.
<track>: Defines text tracks for <video> and <audio> elements.
<picture>: Contains multiple <source> elements for different media types.

Embedded Content

<iframe>: Embeds another HTML page within the current page.
<embed>: Embeds external content or application.
<object>: Embeds an external resource.
<param>: Defines parameters for <object>.

Form Elements

<form>: Defines an HTML form for user input.
<input>: Defines an input control.
<textarea>: Defines a multiline text input control.
<button>: Defines a clickable button.
<select>: Defines a drop-down list.
<option>: Defines an option in a drop-down list.
<label>: Defines a label for an input element.
<fieldset>: Groups related elements in a form.
<legend>: Defines a caption for a <fieldset>.
<datalist>: Specifies a list of pre-defined options for an <input> element.
<output>: Represents the result of a calculation.

Table Content

<table>: Defines a table.
<caption>: Defines a table caption.
<tr>: Defines a table row.
<th>: Defines a header cell in a table.
<td>: Defines a standard cell in a table.
<thead>: Groups the header content in a table.
<tbody>: Groups the body content in a table.
<tfoot>: Groups the footer content in a table.
<col>: Specifies column properties for each column within a <colgroup>.
<colgroup>: Specifies a group of one or more columns in a table for formatting.

Scripting

<script>: Embeds or references executable code.
<noscript>: Defines alternate content for users who do not support client-side scripting.

Interactive Elements

<details>: Specifies additional details the user can view or hide.
<summary>: Defines a visible heading for the <details> element.
<dialog>: Defines a dialog box or window.
<menu>: Defines a list/menu of commands.

Deprecated/Obsolete Elements (Not recommended for use)

<applet>: Embeds a Java applet.
<basefont>: Sets default font size, color, and face.
<center>: Centers text.
<font>: Specifies the font face, size, and color of text.
<frame>: Defines a window (a frame) in a frameset.
<frameset>: Defines a set of frames.
<noframes>: Provides alternative content for browsers that do not support frames.

This list covers the most common HTML tags and their functions. Each tag serves a specific purpose, allowing web developers to structure and present web content effectively. But don't be overwhelmed just yet... Like Bruce Lee said.

I fear not the man who has practiced 10,000 kicks once, but I fear the man who has practiced one kick 10,000 times.

You only need to choose your weapons and master them efficiently. Let’s go through some of the most commonly used tags and their attributes.

Headings

Headings are used to define the titles and subtitles in your content. HTML provides six levels of headings, from <h1> to <h6>, where <h1> is the highest level.

<h1>Welcome to my website!</h1>
<h2>Welcome to my website!</h2>
<h3>Welcome to my website!</h3>
<h4>Welcome to my website!</h4>
<h5>Welcome to my website!</h5>
<h6>Welcome to my website!</h6>

Paragraphs and Text

Paragraphs are used to define blocks of text. Additionally, HTML provides tags to emphasize text.

<p>This is a paragraph.</p>
<strong>Bold text</strong>
<em>Italic text</em>

<p>: Defines a paragraph.
<strong>: Makes text bold.
<em>: Makes text italic.

Links and Images

Links and images are essential for creating interactive and visually appealing web pages.

<a href="https://www.example.com">Visit Example</a>
<img src="image.jpg" alt="Description of image">

<a>: Defines a hyperlink. The href attribute specifies the URL.
<img>: Embeds an image. The src attribute specifies the image source, and alt provides alternative text for the image.

Lists

Lists are used to group related items. There are two types of lists: unordered lists and ordered lists.

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>
    
<ol>
    <li>First item</li>
    <li>Second item</li>
</ol>

<ul>: Defines an unordered (bulleted) list.
<ol>: Defines an ordered (numbered) list.
<li>: Defines a list item

Tables

Tables are used to display data in a tabular format.

<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
    </tr>

</table>

<table>: Defines a table.
<tr>: Defines a table row.
<th>: Defines a table header cell.
<td>: Defines a table data cell.

Creating a Simple Webpage

Now that we've covered the basics, let's create a simple webpage together. Follow these steps:

Step-by-Step Guide

1. Set Up the Document Structure

Start with the HTML skeleton:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Simple Webpage</title>
</head>
<body>

</body>
</html>

2. Add Content to the Body

Add a heading and a paragraph:

<body>
    <h1>Welcome to My Simple Webpage</h1>
    <p>This is a paragraph describing my webpage.</p>
</body>

3. Insert a Link and an Image

Add a hyperlink and an image:

<body>
    <h1>Welcome to My Simple Webpage</h1>
    <p>This is a paragraph describing my webpage.</p>
    <a href="https://www.example.com">Visit Example</a>
    <img src="image.jpg" alt="Example image">
</body>

4. Create a List

Add an unordered list:

<body>
    <h1>Welcome to My Simple Webpage</h1>
    <p>This is a paragraph describing my webpage.</p>
    <a href="https://www.example.com">Visit Example</a>
    <img src="image.jpg" alt="Example image">
    <ul>
        <li>First item</li>
        <li>Second item</li>
        <li>Third item</li>
    </ul>
</body>

5. Add a Table

Insert a simple table:

<body>
    <h1>Welcome to My Simple Webpage</h1>
    <p>This is a paragraph describing my webpage.</p>
    <a href="https://www.example.com">Visit Example</a>
    <img src="image.jpg" alt="Example image">
    <ul>
        <li>First item</li>
        <li>Second item</li>
        <li>Third item</li>
    </ul>
    <table>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
        <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
        </tr>
    </table>
</body>

Final Code

Here's the complete HTML code for our simple webpage:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Simple Webpage</title>
</head>
<body>
    <h1>Welcome to My Simple Webpage</h1>
    <p>This is a paragraph describing my webpage.</p>
    <a href="https://www.example.com">Visit Example</a>
    <img src="image.jpg" height="200" alt="Example image">
    <ul>
        <li>First item</li>
        <li>Second item</li>
        <li>Third item</li>
    </ul>
    <table>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
        <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
        </tr>
    </table>
</body>
</html>

Conclusion

In this section, we've covered the basics of HTML, including the structure of an HTML document, common tags and attributes, and how to create a simple webpage. With this foundation, you're ready to move on to CSS Basics, where we'll learn how to style our webpage and make it visually appealing. Stay tuned!

Feel free to experiment with different tags and attributes to see how they change your webpage!