How to Go About Learning HTML Using ChatGPT
|
You can engage ChatGPT as a learning aid. This demonstrates using ChatGPT for learning HTML, the markup language for tagging the content you see on web pages. I used the GPT-4 model.
I guided the AI to provide an example and exercise.
I taught HTML and developed online courses and videos on HTML so I was able to add a perspective as a teacher to guide the AI to what I thought was too much in an example and exercises. If you were a student and did not know what was too much or too little, you could ask the AI to revise the example an exercise to your desire for either.
Here is a partial of the chat session.
Prompt: Create a basic example and exercise to as a starter learning lesson about HTML.
Response:
Let’s create a simple HTML page with a heading, a paragraph, and an image.
<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>Welcome to My HTML Page</h1>
<p>This is a simple paragraph of text.</p>
<img src="https://example.com/image.jpg" alt="A beautiful scenery" width="300" height="200">
</body>
</html>
This code represents a basic HTML structure with a head and a body. Inside the body, we have an <h1> element for a heading, a <p> element for a paragraph, and an <img> element for an image. The image source, width, and height are defined using attributes.
Exercise:
Now, it’s your turn to create an HTML page with the following elements:
- A title in the head: “Learning HTML”
- An
<h1>element containing the text: “My First HTML Exercise” - A paragraph (
<p>) with the text: “HTML is the standard markup language for creating web pages.” - Another paragraph containing the text: “I am learning HTML to build my own website.”
- An image with the source “https://example.com/cat.jpg” and an alternative text “A cute cat”. Set the width to 400 and the height to 300.
Remember to use the appropriate opening and closing tags, as well as attributes for each element.
This response could be to advanced or too basic for you or whoever is learning HTML. So the next steps would be to ask questions to help clarify and learn. For example ask to explain the lines in the code example, an example, an attribute or anything you needed to learn if you did not understand it.
Prompt: What is an element?
Response:
An HTML element refers to a component or building block of a web page that represents a specific type of content or structure. HTML elements are created using opening and closing tags, which surround the content of the element. Some elements, known as empty or self-closing elements, do not have a closing tag or content. Elements can also have attributes that provide additional information or modify the behavior or appearance of the element.
<h1>: Represents a top-level heading. The content between the opening<h1>and closing</h1>tags will be displayed as a large, bold text.
<h1>This is a Heading</h1><p>: Represents a paragraph. The content between the opening<p>and closing</p>tags will be displayed as a block of text.
<p>This is a paragraph of text.</p><img>: Represents an image. This is an empty element, and its source, alternative text, and dimensions are defined using attributes.
<img src="https://example.com/image.jpg" alt="A description of the image" width="300" height="200">HTML elements can be nested within other elements to create a more complex web page structure. The combination of various elements and their attributes defines the content and layout of a web page.
You could go on to things such as entering your exercise example and getting an evaluation. Here is the result of a rather terrible job at completing the exercise.
Prompt: Can you check my exercise for the last assignment:
Add the code to the prompt as follows:
<!DOCTYPE html>
<html>
<head>
<title>My first HTML exercise</title>
</head>
<body>
<h1>My HTML Exercise Example<h1>
<p>This is a simple paragraph of text.</p>
<img src="https://mysite.com/image.jpg alt="Banner image" wid="300" height="200">
</body>
</html>If you have an HTML skill perhaps you can spot some of the errors.
Response:
You did a great job, but there are a few minor issues that need to be corrected. Here’s the corrected version of your exercise:
<!DOCTYPE html>
<html>
<head>
<title>Learning HTML</title>
</head>
<body>
<h1>My First HTML Exercise</h1>
<p>HTML is the standard markup language for creating web pages.</p>
<p>I am learning HTML to build my own website.</p>
<img src="https://example.com/cat.jpg" alt="A cute cat" width="400" height="300">
</body>
</html>- The title should be “Learning HTML” instead of “My first HTML exercise”.
- The text inside the
<h1>tag should be “My First HTML Exercise” instead of “My HTML Exercise Example”. - You need to add another paragraph element
<p>with the text “I am learning HTML to build my own website.” - The image source should be “https://example.com/cat.jpg” instead of “https://mysite.com/image.jpg“.
- The alternative text for the image should be “A cute cat” instead of “Banner image”.
- The width attribute should be spelled correctly as “width” instead of “wid”.
- The width and height of the image should be set to 400 and 300 respectively, instead of 300 and 200.
Additionally, make sure to close the <h1> tag properly. In your original code, the closing tag is missing a forward slash: </h1>
The bottom line is that a chat AI can be thought of as an assistant or tool versus just a query tool. You can get code answers and then ask questions about the provided answer to learn more. This makes the response more of a dynamic experience over a static web page response.
Another possibility is to follow a static tutorial or course and use the AI to help you with the lessons either by clarifying or expanding depending on your learning desire.