Complete HTML Tutorial for beginners
If you want to read this in a pdf than you can get this ebook:- Getting started with the html
About This Course
The html is the language for creating web pages. It is used for defining the content with the html you can create very simple web pages with CSS you can make the simple web page stylish and with the Javascript you can add logic to those stylish web pages. if you want to earn money from the web development then it is compulsory for you to learn these three languages. Today in this post you will learn the html completely. so let's begin:-
Introduction to Html
The html is the language for defining the elements of the web page. It stands for hyper text markup language. It is easy to learn. It is the basic language for creating web pages.
Tags and Elements in the HTML
There are two things in the HTML:-Tags - It is the part of the text which is used for creating content. Elements - When we insert content inside a html tag then it is called the html element.Types of tags
There are two types of tags in the HTML:-opening tag - These are used for opening a html element. to define a opening tag you have to write it inside the < and >. Closing tag - These are used for closing a html element. to define a closing tag you have to write it inside the </ and >.
Basic Structure of a web pageThe basic html page looks like this:-
<!doctype html>
<html>
<head><title>hello world</title></head>
<body>
<!-- Content comes here -->
</body>
</html>
Explaination
- The <!doctype html> tells the browser that this is a valid html5 document.
- The html tag is the tag in which whole html is written.
- The head tag is the tag in which the meta information is written.
- The body tag is the tag which contains the content of the web page.
Comments in the HTMLThe comments are used as notes by developers when they wrote very big code. to write comments in the html you have to write it b/w <!-- and -->Editors in HTML
An editor is the software which makes the Coding easy to write. Because it gives suggestions, code snippets, extensions etc which makes our flow of coding very fast and easy to write. In this tutorial we are using are using the code editor from Microsoft. The name of the code editor is Microsoft visual studio code. I am using this software because it can be used for web development as well as writing python, java, ruby etc code.After downloading this software you do not need to download any other type of code editor by the way, these code editors are called IDE(integrated development environment).I like this IDE the most but in case you don’t like this IDE You can download any other IDE you like from the internet. I want to tell you that if someone asks you to pay for an ide you don’t need to pay for it. Because for making files we can also use the IDE which is free. If you are not able to find the free IDE on internet than you don’t need to worry about it because I will list some of the free code editors here:
· Sublime Text Editor
· Brackets
· Notepad ++
· Jupiter notebook
· Pycharm
There are many more IDE on the internet you will get those online.
Types of tags
Now turning back to the topic we will discuss about the types of tags in html:
There are many types of tags in html. you don’t need to learn them all
They will be automatically learnt when you do the practice.Now let’s know that how many tags are there in html language we will also discuss about their functions
Note: I am not listing all the tags here because you can’t learn all the tags. If you are not able to find the tag for doing a particular function you can do a google search for it.
Types of tags and their function:
How to make a HTML document
If you are following me than you have surely downloaded vs code (visual studio code).If yes than go to it and open a folder on your desired location. Now crate a file named index.html.Now, at the starting write <!DOCTYPE html> for telling the browser that this is a valid html5 document. After that you have to define the html tag because it contains the whole html code. Inside the html tag you have to define the head and body tags. Inside the head tag you have to define the title tag and give your desired title inside the title tag. Now, come inside the body tag and define a p tag and write your desired paragraph inside the p tag. I think now your html document is looking like this:
<!DOCTYPE html>
<html>
<head>
<title>CodeAndMan</title>
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>
HTML TUTORIAL #2 (lists and tables)
Lists
There are two types of lists in HTML:
· Ordered lists
· Unordered lists
Ordered lists are made using numbers, alphabets etc and unordered lists are made using plates, circles, triangles etc
How to create a list in HTML
In order to create a unordered list in HTML you have to use the ul tag and In order to create a ordered list you have to use the ol tag in HTML. Inside the both tags you have to use the li tag of html which means list items. I am writing the code for creating the ordered list and unordered list below.
Note: I have listed all these tags in the last post if you never know how to use these tags you can go to my last post.
Creating a unordered list
To create a unordered list in HTML you have to write the following code inside the body tag:
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3 </li>
</ul>
Creating a ordered list
To create a ordered list in html you have to write the following code in the body tag:
<ol>
<li> list item 1</li>
<li> list item 2</li>
<li> list item 3 </li>
</ol>
Tables
How to create a table in HTML
To create a table in html you have to use the table tag for creating a table. Inside the table tag you have to use the tr tag for defining the row in the table. Inside the tr tag you have to use the th tag for defining the headings of the columns and use the td tag for defining the data of the table. The code for creating a table is written below:
Note: You have to use the border attribute for defining the border of the table.
You have to write this code inside the body tag for creating a table:
<table border = “1”>
<tr>
<th>Students</th>
<th>Marks</th>
<th>Semester</th>
</tr>
<tr>
<td>Ram</td>
<td>70</td>
<td>1st</td>
</tr>
</table>
Navbars and Forms in HTML
HELLO GUYS:
Today in this tutorial I will tell you how to create navbars and forms in the html I am sure that you are excited so without wasting time let’s begin:
Navbars in the HTML
The horizontal bar on the top of the websites you visit is called the navbar if you want to create a navbar you can use the nav tag of the html 5 Inside the body tag. Now inside the nav tag you can use the anchor tag or the list tags if you want to go with the list tags you have to use the anchor tags inside the list tags.
Note: If you want to create a good looking navbar you have to wait because in this tutorial the navbar we create is not good looking in fact, It is very bad looking. So now we are going to start the code to create a simplest navbar in the html so let’s begin:
<!- - The code starts from here - - >
At first you have to use the doctype of html5 so that you can tell the browser that this is the valid html5 document
<!DOCTYPE html>
<! - -After that you have to use the html tag because whole html is written inside this tag - ->
<html>
<! - - Now inside the html tag you have to use the head and body tags - - >
<head>
<!- - Now you can use the title tag for defining the title of the webpage - ->
<title>Welcome to the html tutorial</title>
</head>
<body>
<! - - Now you have to use the nav tag inside the body tag for defining the navbar - - >
<nav>
<!- - Here inside the nav tag you can use both the list and anchor or only anchor tags for defining the nav items but in this case I am using only anchor tags- ->
<a href=”#”>Home</a>
<a href=”#”>Contact Us</a>
<a href=”#”>Services</a>
<a href=”#”>Blog</a>
<a href=”#”>Portfolio</a>
</nav>
</body>
</html>
<! - - The code ends - ->
Note: writing comments is a good practice when you are creating a website or a blog. Because the comments increase the readability of your code.
So now you can write this code in your desired IDE and check the output in the browser.
Forms in HTML
Form is the most important section of the website because users can contact you with the help of forms. So now we will learn how to create a form in the html so let’s begin:
The form and input tags are used to create a form in the HTML.if you want to create a form you can write the following code inside the body tag:
<form>
<input type = “email” placeholder = “Enter your Email”>
<input type = “password” placeholder=”Enter your password”>
<input type = “submit” >
</form>
Type: The type attribute of the input tags specify that which type of data will the input contain like emails, passwords, text etc.
Placeholder: The placeholder is used to cover the input if you never enter any type of data in the input.
Note: - This post is not completed yet! This post is updated everyday come everyday and read this post.
- The <!doctype html> tells the browser that this is a valid html5 document.
- The html tag is the tag in which whole html is written.
- The head tag is the tag in which the meta information is written.
- The body tag is the tag which contains the content of the web page.
HTML TUTORIAL #2 (lists and tables)
Lists
There are two types of lists in HTML:
· Ordered lists
· Unordered lists
Ordered lists are made using numbers, alphabets etc and unordered lists are made using plates, circles, triangles etc
How to create a list in HTML
In order to create a unordered list in HTML you have to use the ul tag and In order to create a ordered list you have to use the ol tag in HTML. Inside the both tags you have to use the li tag of html which means list items. I am writing the code for creating the ordered list and unordered list below.
Note: I have listed all these tags in the last post if you never know how to use these tags you can go to my last post.
Creating a unordered list
To create a unordered list in HTML you have to write the following code inside the body tag:
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3 </li>
</ul>
Creating a ordered list
To create a ordered list in html you have to write the following code in the body tag:
<ol>
<li> list item 1</li>
<li> list item 2</li>
<li> list item 3 </li>
</ol>
Tables
How to create a table in HTML
To create a table in html you have to use the table tag for creating a table. Inside the table tag you have to use the tr tag for defining the row in the table. Inside the tr tag you have to use the th tag for defining the headings of the columns and use the td tag for defining the data of the table. The code for creating a table is written below:
Note: You have to use the border attribute for defining the border of the table.
You have to write this code inside the body tag for creating a table:
<table border = “1”>
<tr>
<th>Students</th>
<th>Marks</th>
<th>Semester</th>
</tr>
<tr>
<td>Ram</td>
<td>70</td>
<td>1st</td>
</tr>
</table>
Navbars and Forms in HTML
HELLO GUYS:
Today in this tutorial I will tell you how to create navbars and forms in the html I am sure that you are excited so without wasting time let’s begin:
Navbars in the HTML
The horizontal bar on the top of the websites you visit is called the navbar if you want to create a navbar you can use the nav tag of the html 5 Inside the body tag. Now inside the nav tag you can use the anchor tag or the list tags if you want to go with the list tags you have to use the anchor tags inside the list tags.
Note: If you want to create a good looking navbar you have to wait because in this tutorial the navbar we create is not good looking in fact, It is very bad looking. So now we are going to start the code to create a simplest navbar in the html so let’s begin:
<!- - The code starts from here - - >
At first you have to use the doctype of html5 so that you can tell the browser that this is the valid html5 document
<!DOCTYPE html>
<! - -After that you have to use the html tag because whole html is written inside this tag - ->
<html>
<! - - Now inside the html tag you have to use the head and body tags - - >
<head>
<!- - Now you can use the title tag for defining the title of the webpage - ->
<title>Welcome to the html tutorial</title>
</head>
<body>
<! - - Now you have to use the nav tag inside the body tag for defining the navbar - - >
<nav>
<!- - Here inside the nav tag you can use both the list and anchor or only anchor tags for defining the nav items but in this case I am using only anchor tags- ->
<a href=”#”>Home</a>
<a href=”#”>Contact Us</a>
<a href=”#”>Services</a>
<a href=”#”>Blog</a>
<a href=”#”>Portfolio</a>
</nav>
</body>
</html>
<! - - The code ends - ->
Note: writing comments is a good practice when you are creating a website or a blog. Because the comments increase the readability of your code.
So now you can write this code in your desired IDE and check the output in the browser.
Forms in HTML
Form is the most important section of the website because users can contact you with the help of forms. So now we will learn how to create a form in the html so let’s begin:
The form and input tags are used to create a form in the HTML.if you want to create a form you can write the following code inside the body tag:
<form>
<input type = “email” placeholder = “Enter your Email”>
<input type = “password” placeholder=”Enter your password”>
<input type = “submit” >
</form>
Type: The type attribute of the input tags specify that which type of data will the input contain like emails, passwords, text etc.
Placeholder: The placeholder is used to cover the input if you never enter any type of data in the input.
Note: - This post is not completed yet! This post is updated everyday come everyday and read this post.
Comments
Post a Comment