Forem: Renato Junior

Understand Tables: HTML in 180 Seconds - Episode 5

Renato Junior — Tue, 17 Sep 2024 00:43:55 +0000

Hello, I'm Renato Junior, and you're here to learn HTML in 180-second videos. In this article, you'll learn the basics of creating tables in HTML.

To understand how tables work, you first need to know how a table is structured.

A table is made up of rows, and each row contains multiple pieces of data.

In the following image, you'll see Row 1 and Row 2.

Inside Row 1, we have two data points: Data 1 and Data 2. Similarly, in Row 2, we have two more data points: Data 3 and Data 4.

Ready to build a table in HTML?

We’ll start by using the "table" tag to indicate that we’re creating a table. Now that we’re inside the table, we’ll create the first row, Row 1, using the "tr" tag, which stands for "table row." Inside Row 1, we’ll create the first data cell using the "td" tag, which stands for "table data," and then the second data cell using the same "td" tag.

<!DOCTYPE html>
<html>
    <head>
        <title> Page title </title>
    </head>
    <body>
        <table border="1">
            <tr>
                <td> Data 1 </td>
                <td> Data 2 </td>
            </tr>

        </table>
    </body>
</html>

At this point, your table will look like this.

To create a new row, just add another "tr" tag and insert two more "td" tags for the data cells.

<!DOCTYPE html>
<html>
    <head>
        <title> Page title </title>
    </head>
    <body>
        <table border="1">
            <tr>
                <td> Data 1 </td>
                <td> Data 2 </td>
            </tr>
            <tr>
                <td> Data 3 </td>
                <td> Data 4 </td>
            </tr>
        </table>
    </body>
</html>

Your table will now look like this.

Now it’s time for your exercise. Look at Image 1 and Image 2, and try to replicate them in HTML. It’s important that you attempt this challenge because that’s the best way to reinforce what you've learned so far. The solution to this challenge will be revealed at the end of this article.

HTML Table Exercise 1
HTML Table Exercise 2

In the next video, you’ll learn what attributes are and how they work with HTML tags.

Homework Answer

HTML Table Exercise 1 - Using TR and TD tags

<!DOCTYPE html>
<html>
    <head>
        <title>Exercise 1</title>
    </head>
    <body>
        <table border="1">
        <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>
        <tr>
            <td>Row 3, Column 1</td>
            <td>Row 3, Column 2</td>
        </tr>
    </table>
    </body>
</html>

HTML Table Exercise 2 - Using TR and TD tags

<!DOCTYPE html>
<html>
    <head>
        <title>Exercise 2</title>
    </head>
    <body>
        <h2>Tic-Tac-Toe Game Board</h2>
        <table border="1">
            <tr>
                <td>X</td>
                <td>O</td>
                <td>X</td>
            </tr>
            <tr>
                <td>O</td>
                <td>X</td>
                <td>O</td>
            </tr>
            <tr>
                <td>O</td>
                <td>X</td>
                <td></td>
            </tr>
        </table>
    </body>
</html

Text Formatting: HTML in 180 Seconds - Episode 4

Renato Junior — Mon, 16 Sep 2024 14:25:29 +0000

Hello, I’m Renato Junior, and you’re here to learn HTML in 180-second videos! In this video, you’re going to learn some basic text formatting in HTML. But first, a quick reminder: in the previous lesson, you learned the basic structure of HTML, so make sure you have that handy for today's class!

As I mentioned before, HTML is a markup language for text, which means there are so many cool ways to style your content! You can add italics, make text bold, create paragraphs, or even build headings. Let’s dive in!

Today’s example is all about headings. With the H tag followed by a number (1 to 6), you can define up to six levels of headings! You’ll see this in action with h1, h2, h3, h4, h5, and h6. Easy, right?

Now, for paragraphs! You’ll use the P tag to mark a paragraph. Simple enough! Check out how, with the STRONG tag, your text appears bold, and with the I tag, your text will be italicized. Pretty neat, huh?

<!DOCTYPE html>
<html>
    <head>
        <title> The page title </title>
    </head>
    <body>
        <h1>Here it is a Header 1</h1>
        <h2>Here it is a Header 2</h2>
        <h3>Here it is a Header 3</h3>
        <h4>Here it is a Header 4</h4>
        <h5>Here it is a Header 5</h5>
        <h6>Here it is a Header 6</h6>

        <p> This is a simple paragraph with <strong>strong</strong> text in <i>Italic</i></p>
    </body>
</html>

Time for some homework! Take a look at the following picture and try to recreate it in HTML. It’s super important to give this challenge a shot—practice makes perfect, after all!

In the next video, you’ll learn all about tables in HTML! Can’t wait to see you there!

Homework Answer

Basic HTML Structure: HTML in 180 Seconds - Episode 3

Renato Junior — Fri, 13 Sep 2024 01:46:38 +0000

Hello, I'm Renato Junior, and you're here to learn HTML in 180-second videos. In this video, you will learn the basic structure of HTML.

By convention, the homepage of a website in HTML should be named "index.html". To create this file, open Notepad++, click on “File,” and then on “Save As.” In the window that opens, choose the folder where you want to save the file and set the name as "index.html". Make sure the file is saved with this exact name to ensure the homepage functions correctly.

Once the file is saved with the correct name, you can now add the basic HTML structure.

You'll notice that every HTML page begins with a document type declaration, followed by the opening of the HTML tags. Inside the HTML tags, you will find two main sections: the head and the body.

Conventionally, inside the <head> tag, you'll find only metadata, such as information, settings, and other elements that generally do not appear as visible content on the page. The <body> section, on the other hand, contains everything that is visible to users, like text, images, links, and other elements that make up the page's interface.

In this example, within the <head>, we configure the page title, which will appear to the user outside of the main content.

Inside the <body> is where the main content visible to the user will be displayed. To see if your changes have worked, simply click the save button. Go to the folder where you saved the file and double-click to open it in your browser.

And there you have it, you just created your first HTML code.

<!DOCTYPE html>
<html>
    <head>
        <title> The page title </title>
    </head>
    <body>
        Here it is the web page content
    </body>
</html>

In the next lesson, you'll learn some new tags for text formatting.

What is HTML? HTML in 180 Seconds - Episode 2

Renato Junior — Fri, 13 Sep 2024 01:40:01 +0000

Hello, I'm Renato Junior, and you're here to learn HTML in 180-second videos. In this video, you'll learn what HTML is and how you can code in HTML.

You've probably visited Google's, YouTube's, or Amazon's websites at some point in your life. These amazing sites you see on the internet are built using various technologies, and HTML is one of them.

HTML stands for HyperText Markup Language. It's like a big instruction book that tells the computer how to display things on the screen. For example, it tells where to place text, images, videos, and everything else you see when you open a website.

HTML uses special words called tags. Think of tags like Lego pieces. Each tag has a specific function, such as creating a title, a paragraph, or even inserting an image. And you'll combine all these pieces to build a website.

If you're still a bit confused about what you can do with HTML, don't worry. Once you start practicing, you'll definitely understand.

So, how do you start coding in HTML? It's very simple, all you need is a text editor.

You can use Notepad++, VS Code, or even your computer's basic Notepad to write HTML.

We'll start with Notepad++. If you want to know how to download it or another text editor, check this out:

How install Notepad++? https://notepad-plus-plus.org/downloads/
How Install VSCode? https://code.visualstudio.com/download

In the next video, you'll write your first HTML file.

Get Started with HTML in 180 Seconds - Episode 1

Renato Junior — Fri, 13 Sep 2024 01:28:19 +0000

Hello, my name is Renato Junior and you are here to learn HTML in 180 seconds. I’ve been in the tech industry since 2016. Over the years, I’ve worked with a wide range of technologies, and I currently identify as a full stack or full cycle developer.

I’ve contributed to projects for companies in Brazil, the United States, Canada, and Europe, using a variety of tools and languages. Some of the key technologies I’ve worked with include PHP, NodeJS, TypeScript, PostgreSQL, MySQL, HTML, Python, Kubernetes, React, and many others that would take more than 180 seconds to list.

My goal is to teach HTML in a straightforward and practical way, with short videos of around 180 seconds, so you can learn the essentials without wasting time.

Creating, editing, and delivering high-quality content in this format requires dedication. Therefore, it’s possible that not all the content is available yet. So, be sure to subscribe to the channel to keep up with all the new videos coming your way!

Additionally, I’d like to explain why I chose to use Artificial Intelligence to generate the voices in my videos. This decision helps me optimize production time without compromising the clarity of the message. I assure you that you’ll be able to understand everything perfectly.

So, let’s dive into the content!