Getting Started with HTML: The Building Blocks of the Web

Overview

HTML (HyperText Markup Language) is the standard language used to create and design documents on the web. It serves as the foundational building block of web development, allowing developers to structure content and create web pages that are accessible and interactive. In this tutorial, we will cover the basics of HTML, explore common HTML tags, and guide you through creating your first web page.

Key Points

Basic HTML Structure
Common HTML Tags
Creating Your First Web Page

1. Basic HTML Structure

HTML documents have a standardized structure that includes several key elements. Below is an example of a basic HTML document structure:

<!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 on my web page.</p>
</body>
</html>

Explanation of the Structure:

<!DOCTYPE html>:
- This declaration defines the document type and version of HTML. It ensures that the browser interprets the document correctly.
<html lang=”en”>:
- The <html> tag is the root element of an HTML document. The lang attribute specifies the language of the document.
<head>:
- The <head> element contains meta-information about the document, such as its title, character set, and links to stylesheets or scripts.
<meta charset=”UTF-8″>:
- This meta tag sets the character encoding for the document, ensuring that it can display a wide range of characters correctly.
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>:
- This meta tag ensures the web page is responsive, adjusting its layout to fit the width of the device’s viewport.
<title>My First Web Page</title>:
- The <title> element defines the title of the document, which is displayed in the browser’s title bar or tab.
<body>:
- The <body> element contains the content of the web page, including text, images, links, and other elements.

2. Common HTML Tags

HTML uses various tags to structure and format content. Here are some common HTML tags:

Headings:
- <h1> to <h6>: These tags define headings, with <h1> being the highest level and <h6> the lowest.
<h1>This is an H1 heading</h1> <h2>This is an H2 heading</h2>
Paragraphs:
- <p>: This tag defines a paragraph of text.
<p>This is a paragraph of text.</p>
Links:
- <a>: This tag defines a hyperlink. The href attribute specifies the URL of the link’s destination.
<a href="https://www.example.com">Visit Example</a>
Images:
- <img>: This tag embeds an image in the web page. The src attribute specifies the path to the image file, and the alt attribute provides alternative text.
<img src="image.jpg" alt="Description of image">
Lists:
- Ordered lists (<ol>) and unordered lists (<ul>) contain list items (<li>).
<ul> <li>Item 1</li> <li>Item 2</li> </ul> <ol> <li>First item</li> <li>Second item</li> </ol>
Tables:
- <table>: This tag defines a table. It contains table rows (<tr>) and table data (<td>).
<table> <tr> <td>Row 1, Cell 1</td> <td>Row 1, Cell 2</td> </tr> <tr> <td>Row 2, Cell 1</td> <td>Row 2, Cell 2</td> </tr> </table>

3. Creating Your First Web Page

Now that we have covered the basics of HTML structure and common tags, let’s create your first web page step-by-step.

Step 1: Setting Up the Document

Open a text editor (such as Visual Studio Code, Sublime Text, or Notepad++).
Create a new file and save it as index.html.

Step 2: Adding the Basic HTML Structure

Copy and paste the following code into your index.html file:

<!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 on my web page.</p>
</body>
</html>

Step 3: Adding More Content

Expand your web page by adding more HTML elements. For example:

<!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 on my web page.</p>
    
    <h2>About Me</h2>
    <p>Hi, I'm [Your Name]. I'm learning web development!</p>
    
    <h2>My Favorite Websites</h2>
    <ul>
        <li><a href="https://www.google.com">Google</a></li>
        <li><a href="https://www.wikipedia.org">Wikipedia</a></li>
    </ul>
    
    <h2>My Favorite Image</h2>
    <img src="https://via.placeholder.com/150" alt="Placeholder Image">
</body>
</html>

Step 4: Viewing Your Web Page

Save your index.html file.
Open your web browser (such as Chrome, Firefox, or Edge).
Open the file you just saved by selecting File > Open and navigating to your index.html file, or simply drag and drop the file into the browser window.

You should now see your first web page with the content you added!

Books

“HTML and CSS: Design and Build Websites” by Jon Duckett
A visually appealing book that explains HTML and CSS in a simple and understandable way.
“Learning Web Design: A Beginner’s Guide to HTML, CSS, JavaScript, and Web Graphics” by Jennifer Niederst Robbins
A comprehensive guide for beginners that covers the basics of web design and development.
“HTML5: The Missing Manual” by Matthew MacDonald
This book provides a detailed look at HTML5, including new elements and attributes, multimedia, and more.

Online Tutorials and Courses

W3Schools
A popular and beginner-friendly website offering tutorials on HTML, CSS, JavaScript, and other web technologies.
Mozilla Developer Network (MDN) Web Docs
A comprehensive resource for web developers, offering detailed documentation and tutorials on HTML and other web technologies.
freeCodeCamp
A free online coding bootcamp that offers a well-structured curriculum on web development, including HTML and CSS.
Codecademy
An interactive learning platform that provides hands-on tutorials on HTML, CSS, JavaScript, and more.
Coursera – Web Design for Everybody: Basics of Web Development & Coding Specialization
A series of courses from the University of Michigan that cover HTML, CSS, and JavaScript, aimed at beginners.

Blogs and Websites

BrickServers NG Blog
Our very own in house blog that covers everything tech and yet has informative articles on web development and programming.
CSS-Tricks
A blog and reference site that covers CSS, HTML, JavaScript, and other web development topics.
Smashing Magazine
An online magazine that publishes articles on web design and development, including HTML tutorials and best practices.
A List Apart
A website that explores the design, development, and meaning of web content, with in-depth articles on HTML and other web technologies.

YouTube Channels

Traversy Media
A YouTube channel offering tutorials on web development, including HTML, CSS, JavaScript, and more.
The Net Ninja
A channel that provides comprehensive tutorials on web development, covering HTML, CSS, JavaScript, and various frameworks.
freeCodeCamp.org
The official YouTube channel of freeCodeCamp, featuring full-length courses and tutorials on web development.

Additional Resources

HTML5 Rocks
A resource for learning about HTML5 and modern web development techniques.
HTML.com
A website dedicated to providing HTML tutorials, examples, and references.

These resources should provide a solid foundation for your journey into web development and help you master HTML and related technologies.

Conclusion

Congratulations! You’ve just created your first web page using HTML. This tutorial covered the basic HTML structure, common HTML tags, and the steps to create and view a simple web page. HTML is the foundation of web development, and mastering it is the first step towards becoming a skilled web developer. Continue experimenting with HTML, adding more elements and learning new tags, and you’ll be well on your way to creating more complex and interactive web pages. Happy coding!