Course Content
AI Powered Coding
1. Foundation of Web Technology
AI Powered Coding
HTML Document Structure
Goal
First, let's create the basic document structure of our website. We would like to have three articles. In each article, we would like to specify the article heading, some article content, and an image.
Possible Prompt
Create an HTML document structure for a blog website that allows for the publication of 3 articles. Each article should consist of:
- A title (heading);
- Several paragraphs of text;
- An image;
- A topic or category.
The HTML structure should be organized clearly and logically, using HTML tags and semantic meaning properly.
Result
index.html
index.css
index.js
If you are interested in delving deep into the code and understanding its functionality, please use the Code Description button below. If you are okay with it, skip this step and move on to the next chapter.
Code Description
index.html
Line 1: This line declares the document type and version of HTML (HTML5 in this case).Line 2:
- The
<html>tag encloses the entire HTML document. -
The
lang="en"attribute specifies that the language of the document is English.
-
The
<head>section contains metadata and other information for the document. -
<meta charset="UTF-8" />: Specifies the character encoding for the document. -
<meta name="viewport" content="width=device-width, initial-scale=1.0" />: Ensures proper scaling and rendering on different devices. -
<title>My Blog</title>: Sets the title of the webpage, which appears in the browser tab.
<body> tag encloses the content of the HTML document
that is visible to users. Lines 9-11:
- The
<header>tag contains introductory content. <h1>: A heading that serves as the main title for the blog.
<main> tag represents the dominant content of the
document. Lines 14-24, 26-35, 37-46:
- The
<article>tag encloses a self-contained composition. <h2>: A subheading for the article.<p>: Paragraph containing article content.-
<img src="..." alt="..." />: An image related to the article with a description. -
A final
<p>tag indicating the category of the article.
- The
<footer>tag contains footer information. <p>: Paragraph with a copyright notice.
Website State
Video Tutorial
Everything was clear?
Course Content
AI Powered Coding
1. Foundation of Web Technology
AI Powered Coding
HTML Document Structure
Goal
First, let's create the basic document structure of our website. We would like to have three articles. In each article, we would like to specify the article heading, some article content, and an image.
Possible Prompt
Create an HTML document structure for a blog website that allows for the publication of 3 articles. Each article should consist of:
- A title (heading);
- Several paragraphs of text;
- An image;
- A topic or category.
The HTML structure should be organized clearly and logically, using HTML tags and semantic meaning properly.
Result
index.html
index.css
index.js
If you are interested in delving deep into the code and understanding its functionality, please use the Code Description button below. If you are okay with it, skip this step and move on to the next chapter.
Code Description
index.html
Line 1: This line declares the document type and version of HTML (HTML5 in this case).Line 2:
- The
<html>tag encloses the entire HTML document. -
The
lang="en"attribute specifies that the language of the document is English.
-
The
<head>section contains metadata and other information for the document. -
<meta charset="UTF-8" />: Specifies the character encoding for the document. -
<meta name="viewport" content="width=device-width, initial-scale=1.0" />: Ensures proper scaling and rendering on different devices. -
<title>My Blog</title>: Sets the title of the webpage, which appears in the browser tab.
<body> tag encloses the content of the HTML document
that is visible to users. Lines 9-11:
- The
<header>tag contains introductory content. <h1>: A heading that serves as the main title for the blog.
<main> tag represents the dominant content of the
document. Lines 14-24, 26-35, 37-46:
- The
<article>tag encloses a self-contained composition. <h2>: A subheading for the article.<p>: Paragraph containing article content.-
<img src="..." alt="..." />: An image related to the article with a description. -
A final
<p>tag indicating the category of the article.
- The
<footer>tag contains footer information. <p>: Paragraph with a copyright notice.
Website State
Video Tutorial
Everything was clear?
