Course Content
AI Powered Coding
1. Foundation of Web Technology
AI Powered Coding
HTML (Hypertext Markup Language)
We will use the analogy of building a house to help you understand the concepts.
A general overview will be sufficient as all the code will be generated using ChatGPT.
HTML, the foundation of web pages, defines their structure and content. Think of it like a house's foundation, walls, door, and roof.
At its core, HTML consists of elements enclosed within angle brackets (<>
) and typically come in pairs - an opening tag and a closing tag. These elements form a hierarchical structure, with some elements nested within others to create a meaningful layout.
Example:
Please click the Run Code button to see the website in action.
index.html
index.css
index.js
Adding Different Tags in HTML
In HTML, we can use various tags to add different types of content to the web page. Here's how we can add text, images, links, and more:
Adding Text
To add text to the web page, we can use the <p>
tag for paragraphs, <h1>
to <h6>
for headings of different levels.
index.html
index.css
index.js
Adding Images
To add images, we can use the <img>
tag. Specify the image's source (src
attribute) and optionally include attributes like alt
for alternative text and width
and height
for dimensions.
Adding Links
To add hyperlinks to other web pages or resources, we can use the <a>
tag. Specify the URL of the destination page using the href
attribute.
index.html
index.css
index.js
Adding Lists
To create ordered (numbered) or unordered (bulleted) lists, we can use the <ol>
and <ul>
tags, respectively. Inside these tags, use the <li>
tag for each list item.
index.html
index.css
index.js
Adding Forms
To create forms for user input, we can use various form-related tags like <form>
, <input>
, and <button>
.
index.html
index.css
index.js
We can add a wide range of content to the web page using these HTML tags, from simple text and images to interactive forms. Below, you can find the website with considered tags.
index.html
index.css
index.js
Video Tutorial
Everything was clear?
Course Content
AI Powered Coding
1. Foundation of Web Technology
AI Powered Coding
HTML (Hypertext Markup Language)
We will use the analogy of building a house to help you understand the concepts.
A general overview will be sufficient as all the code will be generated using ChatGPT.
HTML, the foundation of web pages, defines their structure and content. Think of it like a house's foundation, walls, door, and roof.
At its core, HTML consists of elements enclosed within angle brackets (<>
) and typically come in pairs - an opening tag and a closing tag. These elements form a hierarchical structure, with some elements nested within others to create a meaningful layout.
Example:
Please click the Run Code button to see the website in action.
index.html
index.css
index.js
Adding Different Tags in HTML
In HTML, we can use various tags to add different types of content to the web page. Here's how we can add text, images, links, and more:
Adding Text
To add text to the web page, we can use the <p>
tag for paragraphs, <h1>
to <h6>
for headings of different levels.
index.html
index.css
index.js
Adding Images
To add images, we can use the <img>
tag. Specify the image's source (src
attribute) and optionally include attributes like alt
for alternative text and width
and height
for dimensions.
Adding Links
To add hyperlinks to other web pages or resources, we can use the <a>
tag. Specify the URL of the destination page using the href
attribute.
index.html
index.css
index.js
Adding Lists
To create ordered (numbered) or unordered (bulleted) lists, we can use the <ol>
and <ul>
tags, respectively. Inside these tags, use the <li>
tag for each list item.
index.html
index.css
index.js
Adding Forms
To create forms for user input, we can use various form-related tags like <form>
, <input>
, and <button>
.
index.html
index.css
index.js
We can add a wide range of content to the web page using these HTML tags, from simple text and images to interactive forms. Below, you can find the website with considered tags.
index.html
index.css
index.js
Video Tutorial
Everything was clear?