HTML for Beginners: Creating a Simple Interactive Website with a Basic Interactive Recipe Display

Written by

webdevelopmentdebugged

in

In the digital age, websites have become indispensable. From simple personal blogs to complex e-commerce platforms, the web is where we connect, share information, and conduct business. But have you ever wondered how these websites are built? The foundation of every website is HTML, the HyperText Markup Language. It’s the language that structures the content, making it readable and understandable by web browsers. In this tutorial, we’ll dive into HTML and create a simple yet interactive website focused on displaying recipes. This project will introduce you to fundamental HTML concepts and provide a practical understanding of how they work together to create a functional webpage.

Why Learn HTML?

HTML is the backbone of the web. Understanding it is crucial if you want to create or customize websites. Even if you plan to use website builders or content management systems (CMS) like WordPress, knowing HTML will allow you to fine-tune your website and troubleshoot issues effectively. Moreover, HTML is relatively easy to learn, making it an excellent starting point for anyone interested in web development.

What We’ll Build: An Interactive Recipe Display

Our project will be a simple recipe display. It will feature:

  • A clear structure for recipe information (title, ingredients, instructions).
  • Proper formatting using HTML tags.
  • Basic interactivity, allowing users to view different recipes.

This project is designed for beginners. We’ll break down each step, explaining the purpose of every tag and attribute. By the end, you’ll have a working recipe display and a solid understanding of HTML fundamentals.

Getting Started: Setting Up Your Environment

Before we begin, you’ll need a text editor. You can use any text editor, such as Notepad (Windows), TextEdit (Mac), Visual Studio Code, Sublime Text, or Atom. These editors allow you to write and save your HTML code. You’ll also need a web browser (Chrome, Firefox, Safari, Edge) to view your webpage.

Here’s how to set up your environment:

  1. Choose a Text Editor: Install your preferred text editor.
  2. Create a Folder: Create a new folder on your computer to store your project files. Name it something like “recipe-website”.
  3. Create an HTML File: Inside the folder, create a new file and save it as “index.html”. Make sure the file extension is “.html”. This file will contain your HTML code.

The Basic HTML Structure

Every HTML document has a basic structure. Let’s start with the fundamental elements:

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

</body>
</html>

Let’s break down each part:

  • <!DOCTYPE html>: This declaration tells the browser that this is an HTML5 document.
  • <html lang="en">: The root element of an HTML page. The lang attribute specifies the language of the document (in this case, English).
  • <head>: Contains meta-information about the HTML document, such as the title, character set, and viewport settings.
  • <meta charset="UTF-8">: Specifies the character encoding for the document. UTF-8 is a widely used character set that supports most characters.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Configures the viewport settings for responsive design, ensuring the page scales correctly on different devices.
  • <title>Recipe Display</title>: Sets the title of the HTML page, which appears in the browser tab.
  • <body>: Contains the visible page content, such as text, images, and links.

Adding Content: Recipe Title and Description

Let’s add our first recipe to the <body> section. We’ll start with the title and a short description.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Recipe Display</title>
</head>
<body>
    <h1>Delicious Chocolate Chip Cookies</h1>
    <p>These classic chocolate chip cookies are soft, chewy, and irresistible. Perfect for any occasion!</p>
</body>
</html>

In this code:

  • <h1>: Defines a level 1 heading (the main title).
  • <p>: Defines a paragraph of text.

Save your “index.html” file and open it in your web browser. You should see the recipe title and description displayed.

Structuring the Recipe: Ingredients and Instructions

Now, let’s add the ingredients and instructions. We’ll use lists to organize this information.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Recipe Display</title>
</head>
<body>
    <h1>Delicious Chocolate Chip Cookies</h1>
    <p>These classic chocolate chip cookies are soft, chewy, and irresistible. Perfect for any occasion!</p>

    <h2>Ingredients:</h2>
    <ul>
        <li>1 cup (2 sticks) unsalted butter, softened</li>
        <li>3/4 cup granulated sugar</li>
        <li>3/4 cup packed brown sugar</li>
        <li>2 teaspoons vanilla extract</li>
        <li>2 large eggs</li>
        <li>2 1/4 cups all-purpose flour</li>
        <li>1 teaspoon baking soda</li>
        <li>1 teaspoon salt</li>
        <li>2 cups chocolate chips</li>
    </ul>

    <h2>Instructions:</h2>
    <ol>
        <li>Preheat oven to 375°F (190°C).</li>
        <li>Cream together butter, granulated sugar, and brown sugar.</li>
        <li>Beat in vanilla extract and eggs.</li>
        <li>In a separate bowl, whisk together flour, baking soda, and salt.</li>
        <li>Gradually add dry ingredients to wet ingredients, mixing until combined.</li>
        <li>Stir in chocolate chips.</li>
        <li>Drop by rounded tablespoons onto ungreased baking sheets.</li>
        <li>Bake for 9-11 minutes, or until golden brown.</li>
    </ol>
</body>
</html>

In this code:

  • <h2>: Defines a level 2 heading (for “Ingredients” and “Instructions”).
  • <ul>: Defines an unordered (bulleted) list.
  • <li>: Defines a list item.
  • <ol>: Defines an ordered (numbered) list.

Save and refresh your browser. You’ll now see the ingredients and instructions nicely formatted in lists.

Adding Images

Images make your recipe display more appealing. Let’s add an image of the chocolate chip cookies.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Recipe Display</title>
</head>
<body>
    <h1>Delicious Chocolate Chip Cookies</h1>
    <p>These classic chocolate chip cookies are soft, chewy, and irresistible. Perfect for any occasion!</p>

    <img src="chocolate-chip-cookies.jpg" alt="Chocolate Chip Cookies">

    <h2>Ingredients:</h2>
    <ul>
        <li>1 cup (2 sticks) unsalted butter, softened</li>
        <li>3/4 cup granulated sugar</li>
        <li>3/4 cup packed brown sugar</li>
        <li>2 teaspoons vanilla extract</li>
        <li>2 large eggs</li>
        <li>2 1/4 cups all-purpose flour</li>
        <li>1 teaspoon baking soda</li>
        <li>1 teaspoon salt</li>
        <li>2 cups chocolate chips</li>
    </ul>

    <h2>Instructions:</h2>
    <ol>
        <li>Preheat oven to 375°F (190°C).</li>
        <li>Cream together butter, granulated sugar, and brown sugar.</li>
        <li>Beat in vanilla extract and eggs.</li>
        <li>In a separate bowl, whisk together flour, baking soda, and salt.</li>
        <li>Gradually add dry ingredients to wet ingredients, mixing until combined.</li>
        <li>Stir in chocolate chips.</li>
        <li>Drop by rounded tablespoons onto ungreased baking sheets.</li>
        <li>Bake for 9-11 minutes, or until golden brown.</li>
    </ol>
</body>
</html>

In this code:

  • <img src="chocolate-chip-cookies.jpg" alt="Chocolate Chip Cookies">: Inserts an image.
  • src: Specifies the path to the image file. Make sure the image file (“chocolate-chip-cookies.jpg”) is in the same folder as your “index.html” file, or provide the correct path.
  • alt: Provides alternative text for the image, which is displayed if the image cannot be loaded. It’s also important for accessibility and SEO.

Download an image of chocolate chip cookies and save it in your project folder. Then, refresh your browser. You should see the image displayed above the ingredients.

Adding More Recipes: Basic Interactivity

To make our recipe display interactive, let’s add a second recipe and use some basic HTML to switch between them. We’ll use a simple approach with links.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Recipe Display</title>
</head>
<body>
    <div id="recipe1">
        <h1>Delicious Chocolate Chip Cookies</h1>
        <p>These classic chocolate chip cookies are soft, chewy, and irresistible. Perfect for any occasion!</p>
        <img src="chocolate-chip-cookies.jpg" alt="Chocolate Chip Cookies">

        <h2>Ingredients:</h2>
        <ul>
            <li>1 cup (2 sticks) unsalted butter, softened</li>
            <li>3/4 cup granulated sugar</li>
            <li>3/4 cup packed brown sugar</li>
            <li>2 teaspoons vanilla extract</li>
            <li>2 large eggs</li>
            <li>2 1/4 cups all-purpose flour</li>
            <li>1 teaspoon baking soda</li>
            <li>1 teaspoon salt</li>
            <li>2 cups chocolate chips</li>
        </ul>

        <h2>Instructions:</h2>
        <ol>
            <li>Preheat oven to 375°F (190°C).</li>
            <li>Cream together butter, granulated sugar, and brown sugar.</li>
            <li>Beat in vanilla extract and eggs.</li>
            <li>In a separate bowl, whisk together flour, baking soda, and salt.</li>
            <li>Gradually add dry ingredients to wet ingredients, mixing until combined.</li>
            <li>Stir in chocolate chips.</li>
            <li>Drop by rounded tablespoons onto ungreased baking sheets.</li>
            <li>Bake for 9-11 minutes, or until golden brown.</li>
        </ol>
    </div>

    <div id="recipe2" style="display:none;">
        <h1>Classic Spaghetti Carbonara</h1>
        <p>A creamy and delicious Italian pasta dish.</p>
        <img src="carbonara.jpg" alt="Spaghetti Carbonara">

        <h2>Ingredients:</h2>
        <ul>
            <li>8 ounces spaghetti</li>
            <li>4 ounces pancetta or guanciale, diced</li>
            <li>2 large eggs</li>
            <li>1 cup grated Pecorino Romano cheese</li>
            <li>Freshly ground black pepper</li>
        </ul>

        <h2>Instructions:</h2>
        <ol>
            <li>Cook spaghetti according to package directions.</li>
            <li>Cook pancetta or guanciale until crispy.</li>
            <li>In a bowl, whisk together eggs, cheese, and pepper.</li>
            <li>Drain spaghetti and add to the pan with pancetta.</li>
            <li>Remove pan from heat and add egg mixture, tossing quickly.</li>
            <li>Serve immediately.</li>
        </ol>
    </div>

    <p><a href="#recipe1">Chocolate Chip Cookies</a> | <a href="#recipe2">Spaghetti Carbonara</a></p>
</body>
</html>

Here’s what’s new:

  • We’ve wrapped each recipe in a <div> element with a unique id attribute (e.g., id="recipe1"). This will allow us to target each recipe individually.
  • The second recipe (Spaghetti Carbonara) has style="display:none;". This initially hides the recipe.
  • We’ve added links using the <a> tag (anchor tag). The href attribute points to the id of the recipe we want to show.

Save this and open it in your browser. You’ll see links for the recipes. Currently, clicking the links won’t do anything because we haven’t added any JavaScript or CSS to handle the display. We will address this in the next section.

Adding Basic Interactivity with CSS

To make the links actually work, we’ll use a little bit of CSS. We’ll hide the first recipe and then use CSS to show the correct recipe when the corresponding link is clicked.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Recipe Display</title>
    <style>
        #recipe2 {display: none;}
        #recipe1:target, #recipe2:target {display: block;}
    </style>
</head>
<body>
    <div id="recipe1">
        <h1>Delicious Chocolate Chip Cookies</h1>
        <p>These classic chocolate chip cookies are soft, chewy, and irresistible. Perfect for any occasion!</p>
        <img src="chocolate-chip-cookies.jpg" alt="Chocolate Chip Cookies">

        <h2>Ingredients:</h2>
        <ul>
            <li>1 cup (2 sticks) unsalted butter, softened</li>
            <li>3/4 cup granulated sugar</li>
            <li>3/4 cup packed brown sugar</li>
            <li>2 teaspoons vanilla extract</li>
            <li>2 large eggs</li>
            <li>2 1/4 cups all-purpose flour</li>
            <li>1 teaspoon baking soda</li>
            <li>1 teaspoon salt</li>
            <li>2 cups chocolate chips</li>
        </ul>

        <h2>Instructions:</h2>
        <ol>
            <li>Preheat oven to 375°F (190°C).</li>
            <li>Cream together butter, granulated sugar, and brown sugar.</li>
            <li>Beat in vanilla extract and eggs.</li>
            <li>In a separate bowl, whisk together flour, baking soda, and salt.</li>
            <li>Gradually add dry ingredients to wet ingredients, mixing until combined.</li>
            <li>Stir in chocolate chips.</li>
            <li>Drop by rounded tablespoons onto ungreased baking sheets.</li>
            <li>Bake for 9-11 minutes, or until golden brown.</li>
        </ol>
    </div>

    <div id="recipe2" style="display:none;">
        <h1>Classic Spaghetti Carbonara</h1>
        <p>A creamy and delicious Italian pasta dish.</p>
        <img src="carbonara.jpg" alt="Spaghetti Carbonara">

        <h2>Ingredients:</h2>
        <ul>
            <li>8 ounces spaghetti</li>
            <li>4 ounces pancetta or guanciale, diced</li>
            <li>2 large eggs</li>
            <li>1 cup grated Pecorino Romano cheese</li>
            <li>Freshly ground black pepper</li>
        </ul>

        <h2>Instructions:</h2>
        <ol>
            <li>Cook spaghetti according to package directions.</li>
            <li>Cook pancetta or guanciale until crispy.</li>
            <li>In a bowl, whisk together eggs, cheese, and pepper.</li>
            <li>Drain spaghetti and add to the pan with pancetta.</li>
            <li>Remove pan from heat and add egg mixture, tossing quickly.</li>
            <li>Serve immediately.</li>
        </ol>
    </div>

    <p><a href="#recipe1">Chocolate Chip Cookies</a> | <a href="#recipe2">Spaghetti Carbonara</a></p>
</body>
</html>

Here, we’ve added a <style> block within the <head> section to include our CSS. Let’s break down the CSS:

  • #recipe2 { display: none; }: This hides the second recipe initially.
  • #recipe1:target, #recipe2:target { display: block; }: This is the key to the interactivity. The :target pseudo-class selects the element that is the target of the current URL fragment (the part after the #). When you click a link like #recipe2, the browser scrolls to the element with the ID “recipe2”, and this CSS rule makes it visible.

Save and refresh your browser. Now, when you click the links, the corresponding recipe should appear.

Common Mistakes and How to Fix Them

Here are some common mistakes beginners make when working with HTML, and how to avoid them:

  • Missing Closing Tags: Every opening tag should have a corresponding closing tag (e.g., <p>...</p>). Missing closing tags can cause unexpected behavior and layout issues. Always double-check that you’ve closed all your tags correctly.
  • Incorrect Attribute Values: Attributes provide additional information about HTML elements (e.g., src="image.jpg"). Make sure you use the correct syntax for attribute values, and that you enclose them in quotes.
  • File Paths: When linking to images or other files (like CSS and JavaScript), ensure the file paths are correct. Incorrect paths are a common cause of broken images or missing styles. Double-check the file names and the relative or absolute paths.
  • Case Sensitivity: HTML tags are generally not case-sensitive (e.g., <p> is the same as <P>). However, it’s good practice to use lowercase for consistency. Attribute values are often case-sensitive.
  • Forgetting the <!DOCTYPE html> Declaration: This declaration is crucial for telling the browser which version of HTML you’re using. Make sure it’s the very first line of your HTML document.

SEO Best Practices for HTML

Even for a simple recipe display, you can optimize your HTML for search engines (SEO). Here are some basic tips:

  • Use Descriptive Titles: The <title> tag is very important for SEO. Make sure it accurately describes the content of your page and includes relevant keywords (e.g., “Delicious Chocolate Chip Cookies Recipe”).
  • Use Heading Tags (<h1> to <h6>) Effectively: Use heading tags to structure your content logically. Use <h1> for the main heading, and then <h2>, <h3>, etc., for subheadings. This helps search engines understand the content and improves readability.
  • Use the <meta description> Tag: The meta description provides a brief summary of your page’s content, which can appear in search engine results. Write a compelling description that includes relevant keywords.
  • Use Alt Attributes for Images: The alt attribute provides alternative text for images. Use descriptive alt text that includes keywords. This helps search engines understand the image content.
  • Optimize Content for Readability: Use short paragraphs, bullet points, and headings to break up the text and make it easy to read. This improves user experience, which is a ranking factor for search engines.

Summary / Key Takeaways

In this tutorial, we’ve covered the basics of HTML and built a simple interactive recipe display. We’ve learned about the fundamental structure of an HTML document, how to add content using headings, paragraphs, lists, and images, and how to create basic interactivity using links and CSS. You now have a foundational understanding of HTML and can begin to create your own web pages. Remember that this is just the beginning. The web is constantly evolving, so keep learning, experimenting, and exploring new possibilities. With each project, you will deepen your understanding and become more proficient in HTML. Consider expanding this project by adding more recipes, using CSS for styling, or even adding a search functionality with JavaScript.

FAQ

Here are some frequently asked questions about HTML:

  1. What is the difference between HTML and CSS? HTML (HyperText Markup Language) is used to structure the content of a webpage (text, images, links, etc.). CSS (Cascading Style Sheets) is used to style the content (colors, fonts, layout, etc.). They work together to create the look and feel of a website.
  2. What is the purpose of the <head> section? The <head> section contains meta-information about the HTML document, such as the title, character set, viewport settings, and links to external resources (like CSS files and JavaScript files). This information is not displayed directly on the webpage but is essential for the browser and search engines.
  3. How do I add comments to my HTML code? You can add comments using the following syntax: <!-- This is a comment -->. Comments are not displayed in the browser and are used to explain the code or provide notes for yourself or other developers.
  4. What are the benefits of using lists (<ul> and <ol>)? Lists help to organize content in a clear and readable manner. Unordered lists (<ul>) are used for bulleted lists, while ordered lists (<ol>) are used for numbered lists. Lists make it easier for users to scan and understand the information.
  5. How do I link to another webpage? You can create a link using the <a> (anchor) tag and the href attribute. For example: <a href="https://www.example.com">Visit Example.com</a>. The text between the opening and closing <a> tags is the visible link text.

Building on the foundation laid here, you can start exploring more advanced HTML features, integrate CSS for styling, and add JavaScript for dynamic behavior. The world of web development is vast and always evolving, with new technologies and frameworks emerging regularly. By continuing to learn and experiment, you’ll be well-equipped to create engaging and functional websites.

More posts