# Html course shaji
## About HTML and CSS🍕
So basically HTML is **Hypertext Markup Language.....** I know it seems boring but let's make it creative....😀
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1670745343645/3gBHTe8DZ.png?auto=compress,format&format=webp align="left")
So basically, 👆 **HTML5** is the **latest** version that we use nowadays, and **CSS3** is also the latest one!
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1670745477617/dMm3-8ivI.png?auto=compress,format&format=webp align="left")
So, you need to read this out and let me explain it in just one line: Basically, HTML is the **Structure** of the website and CSS is the **Presentation** of the website...
**But you don't need to worry about CSS right now😉**
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1670745710505/dnS0l7xeT.png?auto=compress,format&format=webp align="left")
Now I think by seeing this image,👆 you are done about the basic things about HTML...😎
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1670745824113/656w_mmav.png?auto=compress,format&format=webp align="left")
**And finally, this is 👆 something that can help you with HTML and CSS!!**
Meme on HTML and CSS 😅
Okay, let's have a small meme on HTML and CSS 👇
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1670746016371/VzT-lk29B.png?auto=compress,format&format=webp align="left")
**So now I think you are completely done with HTML and CSS knowledge!! 😂**
**Now we're gonna learn about <h1> to <h6> tags and <p> tag**
Basic things about VS code🏈
> ***So, I am using VS code which is the easiest way to write your code!!***
**In HTML we are having a boilerplate which is the most important thing and gives a professional vibe! 😉**
So, I will start by making an HTML file called "index.html"
In VS code we're having a special thing for having a boilerplate if we just hit `!` then we'll be having our boilerplate ready!! 😎
```xml
!
```
Result 👇
```xml
Document
```
And BOOM💥!
*Our Boiler Plate is ready!!*
## Basic Syntax of HTML🏉
In HTML we will be writing our code in the `` tag!
So let's begin!!
To have a `Heading` on our website we use the `
` tag... Now you might wonder what is `
` tag is.
It's just `heading 1`
**Let me show you an example of it:**
```xml
Practice makes Perfect
```
Output:
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1670747794447/bwuCMsFUp.png?auto=compress,format&format=webp align="left")
BOOM💥
**And make sure you need to write this code in your** ` tag`.
## Images in HTML 🥪
So, for **putting images** on our website we need the `` tag which does not have a **closing tag** like `
`.
So, let me show you the syntax of the `` tag!
* Take an image via google and **copy the image link.**
Like I have taken of **Pizza**
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1670749488099/wgVAPwqiL.png?auto=compress,format&format=webp align="left")
**And let's come to the point that how to upload the image...**
And we are having the `source` attribute and the short we'll use is `scr=""`.
```xml
```
In the `scr=""` the attribute we need to paste the image link and we will be having on our site!! 😉
**Hope you understand about images!**
*LET'S MAKE IT MORE CREATIVE BY ADDING HEADINGS AND PARAGRAPHS!*
```xml
Let's eat Pizza!🍕🍕🍕
From La'Pinoz pizza
We'll eat the margherita pizza with some toppings and extra cheese!
```
Output:
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1670756879455/4snRPAn2f.png?auto=compress,format&format=webp align="left")
**Here I have added a width attribute too.**
## Nesting🧵
So now, it's time to learn about Nesting which is the last thing in Part 2!!
Like if we want to group all of the HTML elements!
For that, we would use `
` tag which is the `divider` but I don't like this name so we can tell this is a container!!
Let me show you by example!!
```xml
Let's eat Pizza!🍕🍕🍕
From La'Pinoz pizza
We'll eat the margherita pizza with some topings and extra cheese!
```
Here I have wrapped all of the HTML in a `
` tag and also I have wrapped the `` tag for readability purposes!!
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1670840043620/YukgQ-m2O.png?auto=compress,format&format=webp align="left")
This is an example from scrimba and this will make it easy for you!
## **Basic Tags in HTML ✨**
### <br> tag ❤️🔥
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1677063939756/a886a29f-0414-40b5-b12f-d346b62444b5.png?auto=compress,format&format=webp align="left")
```xml
```
**OUTPUT:**
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1677065052873/07a522c6-d194-4800-87ac-579accc51c49.png?auto=compress,format&format=webp align="left")
**Hopefully, you're cleared with it! 🏏**
### <nav> tag! ✨
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1677065107273/0ba7568a-5594-4aa1-a143-6c597b82c40d.png?auto=compress,format&format=webp align="left")
What is a nav tag? It's just like a <div> tag but with a different name!
In the eg. shown above, when we see such options above our screen this is a nav tag, We can div tag also but **recommended is a nav tag**! 🔥
## **Anchor Tags (LINKS in HTML)**
Okay, now we'll talk about "<a>" tags means Anchor tags are LINKS!
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1672737619018/b322b3c9-1e8b-4b24-83e3-fee14b90b074.png?auto=compress,format&format=webp align="left")
**Example:**
```xml
Click here
```
* So, here we have created an **"Anchor Tag"** and in it, I have written **"href"** which is used to connect the links and I have linked it to YouTube!!
* Let me show the OUTPUT...
**OUTPUT of this code: 👇**
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1672738104014/7e30e056-0fea-4264-81c4-10e906a9a2ba.png?auto=compress,format&format=webp align="left")
If we click here then we'll be on YouTube isn't it amazing! 😍
**Let's do something fun:**
```xml
I want to eat PIZZA let me find the Recipe! 😉
Let's search in YouTube!! 🙌
Click here
```
**OUTPUT:**
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1672738373099/cc5ef8fd-fd1c-4192-b222-0341dbf46f57.png?auto=compress,format&format=webp align="left")
Hopefully, you understood the concept of creating links!
*I want you to write these things and understand!*
### Open the link in the new tab
```xml
Click here
```
> ***If you want to open this link in the new tab you can use "target\_blank"***
>
> ***I know it's weird but it is what it is...***
## Proper Structure in HTML
As you all know nowadays we use HTML5 which is the latest version of HTML.
So, the proper structure will be:
```xml
Document
```
> ***If you use VS code so you can just hit "!" then you will see this whole thing because professionals do like this...***
## Lists In HTML
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1675339286646/119e9b50-dbb3-4c13-8ab2-334163569be6.png?auto=compress,format&format=webp align="left")
**So, there are two types of lists: 1. ordered list & 2. unordered list.**
The short for the ordered list is: ***<ol> tag***
The short for the unordered list is: ***<ul> tag***
Inside these lists, there are LIST ITEMS: ***<li> tag***
### Ordered Lists
```xml
Ludo
Chess
Monopoly
Game of Life
```
**Output: 👇**
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1675340798632/884686b5-44e2-4240-bf99-bf33438eeb6a.png?auto=compress,format&format=webp align="left")
* The code I have written is so ***simple*** *and* ***normal***\*...\*
Basically, In the Ordered list, there is a condition and in that condition, it automatically provides the numbers like **1.....**.**2.....3.....so on!**
### Unordered Lists
```xml
Ludo
Chess
Monopoly
Game of Life
```
In this code, there is the condition that if we write an **Unordered list ** It will Output like this! 👇
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1675341002495/2abb3171-68ee-4f65-9bb2-9ed9583c86c6.png?auto=compress,format&format=webp align="left")
**Hopefully, You understood Lists in HTML...**
## HTML <input> Tag
The `` element is an HTML tag that is used to create various types of form controls on a web page.
Different input types:
[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input\_types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types)
```xml
```
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1681579535678/56b3d716-4cd0-41f1-a3ab-f5763ba39f41.png align="center")
**Input tag types!**
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1672496000491/fe54a5c8-75b4-4a98-ba3d-87340e291df7.png?auto=compress,format&format=webp align="left")
### <input type="range">
%[https://codepen.io/shajahanshaik/pen/zYmqWax]
### <input type="radio">
%[https://codepen.io/shajahanshaik/pen/rNqedrB]
**name should be same for every input element otherwise two options can be selected.**
## **Form element:**
The <form> element is a container for different types of input elements, such as: text fields, checkboxes, radio buttons, submit buttons, etc. The purpose of a form is to collect data from users, such as their name, email address, and other information
The most common attributes of the **<form>** element are:
* **action**: specifies the URL of the script or program that will process the form data when it is submitted.
* **method**: specifies the HTTP method to be used when submitting the form data, which is usually either "get" or "post".
* **name**: specifies a name for the form, which can be used to identify it in JavaScript code or on the server.
```xml
```
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1681579655724/bf3bd6d7-3958-4f1d-8e5d-ffcba11b1e97.png align="center")
## **Button:**
In HTML, the `
```
In the `scr=""` the attribute we need to paste the image link and we will be having on our site!! 😉
**Hope you understand about images!**
*LET'S MAKE IT MORE CREATIVE BY ADDING HEADINGS AND PARAGRAPHS!*
```xml