Learn HTML Quickly ➤ HTML Tutorial

 full-width

Welcome to the HTML tutorial. If you want to learn HTML with better understanding in less time then read this tutorial completely.


In this tutorial, basic to advanced knowledge of HTML language is explained in a very good way. Even if you are new to the coding field, you will understand everything very well.


If you want more information about HTML language then read this post first What is HTML ?


HTML Tutorial


So let's get started and take you into the world of coding.


Where Do I Write The Code?

You do not need any special software to write HTML code. You can write HTML code comfortably in Notepad (Windows) and TextEdit (Mac) and see it in the browser. You are just starting to learn the code, so you do not have to use any advance text editor yet.
If you still want to use advance text editor, then I am giving the name and link of some text editor below. You can download and use them.

Following are the names of some popular text editors:


How to See The Output of Written Code?

You have written your code and now want to see its output, then you will need a browser to see the output. For this, you can choose any of your favorite browsers.


First save the file that you have written and then open it in any browser and see the output of the code you have written.


Google Chrome, Mozilla Firefox, Opera, Safari, you can use any of these browsers.


learn HTML Basics

Here we will discuss the basics of HTML. It is very important for you to know these things.


HTML Document : The file in which we write HTML code is called HTML document.


Example of Basic HTML Code

<!DOCTYPE html>
<html>
<title>CodexRadar</title>
<body>
<h1>Heading</h1>
<p>Paragraph.</p>
<a href="https://www.codexradar.com">CodexRadar</a>
<img src="codexradar.jpg" alt="CodexRadar.com" width="100" height="100">
</body>
</html> code-box

Now let's understand this code written above:


<!DOCTYPE>

It is written at the top before you start writing code in HTML. It specifies the type of document and helps the browser to understand the web page better.

Currently almost all browsers understand HTML5 and all web developers also do coding in HTML5. So for HTML5 we use <!DOCTYPE html>.


<html>Your HTML Code</html>

In HTML, we write all the code between the <html> and <html> tags. 


<title>Your Page Title</title>

We write the title of an HTML document and web page between the <title> and </title> tags.


<body>Your Headings, Paragraphs, Images goes here</body>

After the title tag, we use the body tag. Between the <body> and </body> tags, we write the content of the website . Headings, paragraphs, images etc. write inside the body tag.


After the body tag, we close the HTML tag. Thus, we have successfully understood the basic code of HTML. Now you can practice it. Next we will discuss about the elements of HTML.


HTML Elements

Everything from the beginning to the end of any tag is called HTML element.


For Example: <h1>CodexRadar</h1>

In this example, <h1> is the start tag, </h1> is the end tag, and the text between these two tags is called element content and all of them are called elements.

Start Tag ➨ <h1>

Element Content ➨ CodexRadar

End Tag  ➨  </h1>


There are some elements in which no content can be written, such an element is called Empty element. For example <br> tag. alert-warning


Examples of other HTML elements:

<title>Free Codes, Tutorials and News - CodexRadar</title>

<h1>CodexRadar</h1>

<p>Free Codes, Tutorials and News</p>

<a href="#">CodexRadar</a>


👉 Always write the html element in lower case.
 👉 Never forget to write the end tag. alert-info



HTML Attributes

All HTML elements can have HTML Attributes. These attributes provide us additional information about that element. Attributes are always written to the start tag of the element.


Examples of HTML Attributes:

<html lang="en">

<a href="www.google.com">Google</a>

<img src="codexradar.jpg" alt="CodexRadar Image" width="100" height="100">

<h1 style="color:red;">CodexRadar</h1>

<p title="This title for this element">Free Codes, Tutorials and News</p>


In these above examples attributes are highlighted in red color. 


👉 Always write the html attribute in lower case.
 👉 Always use quote with attribute value. alert-info



HTML Headings

Headings are titles that are displayed on the web page. HTML headings range from <h1> to <h6>. In which <h1> is more important and <h6> is less important.
Using headings just to bold and capitalize letters is wrong.
Different search engines index an article based on HTML headings. The context of an article is determined based on headings. Thus headings are quite important.

Examples of HTML Headings:


CodexRadar

CodexRadar

CodexRadar

CodexRadar

CodexRadar
CodexRadar

HTML Paragraphs

In HTML, the <p> </p> tag is used to write paragraphs. The paragraph always starts on the new line. It is used when writing a large amount of text.

Example of HTML Paragraphs:

<p>Paragraph Exmaple Text</p> code-box


The <hr> (Horizontal) Tag

It is an empty tag, there is no end tag in it. This tag is used when we have to separate any two similar things.

<p>Example Paragraph 1</p>
<hr>
<p>Example Paragraph 2</p> code-box


The <br> (Line Break) Tag

It is an empty tag, there is no end tag in it. This tag is used when we want line break without starting a new paragraph.

<p>Example Paragraph <br> After line break paragraph</p> code-box


HTML Style Attribute

When we have to change the style of an element, then we use the style attribute. Using this, we can change the size, color etc. of the element.

Example of  HTML style attribute:

<h1 style="color:red;">CodexRadar</h1>
<p style="font-size:20px">Example Paragraph Text</p>
<p style="font-family:verdana;">Example Font Family</p>
<p style="text-align:center;">Centered Align Text</p> code-box


HTML Text Formatting

There are many elements for formatting text in HTML which are as follows:

Example of HTML formatting Elements:

<b>Bold Text Example</b>
<strong>Strong Text Example (important text)</strong>
<i>Italic Text Example</i>
<em> Emphasized Text Example</em>
<mark>Marked Text Example</mark>
<small> Small Text Example</small>
<del> Deleted Text Example </del>
<ins> Inserted Text Example </ins>
<sub> Subscript Text Example </sub>
<sup> Superscript Text Example </sup> code-box


HTML Quotations

We use <blockquote> element for Quotations in HTML.

Example of HTML <blockquote> :

<blockquote>
Life is like a box of chocolates. You never know what you're gonna get.
</blockquote> code-box


HTML Contact Information

In HTML for contact information we use <address> tag. 

<address>
Send By CodexRadar<br>
Visit Us: <br>
CodexRadar.com<br>
Box 777, California<br>
USA
</address> code-box


HTML Comments

HTML comments are not visible in the browser. But they can help to understand the HTML source code.

<!-- This is Example of HTML Comments -->
<!-- This is Example of HTML Comment 1
This is Example of HTML Comment 2
--> code-box


HTML CSS

CSS means Cascading Style Sheets. For more information about CSS read this post: What is CSS?

CSS can be added to HTML document in three ways:

1. Inline CSS

<h1 style="color:red;">CodexRadar</h1> code-box

2. Internal CSS

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
}
p {
color: red;
}
</style>
</head>
<body>

<h1>CodexRadar</h1>
<p>Free Codes, Tutorials and News</p>

</body>
</html> code-box

3. External CSS

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>CodexRadar</h1>
<p>Free Codes, Tutorials and News</p>

</body>
</html> code-box

styles.css looks like this:

h1 {
color: red;
}

p {
color: green;
} code-box

Link External CSS URL

<link rel="stylesheet" href="https://www.CodexRadar.com/css/styles.css"> code-box


HTML Links (Hyperlinks) 

For HTML links we use <a> (anchor) tag.

<a href="codexradar.com">CodexRadar</a> code-box

Link to an Email Address

<a href="mailto:codexradar@gmail.com">Send Email</a> code-box

Button as a Link

<button onclick="document.location='default.html'">CodexRadar</button> code-box


HTML Images

For HTML images we use <img> tag:

<img src="codexradar.jpg" alt="CodexRadar Image" width="100" height="100"> code-box

Always use style attribute to style the image instead of width and height attribute.

<img src="codexradar.jpg" alt="CodexRadar Image" style="width:100px; height:100px;"> code-box


HTML Tables

In HTML for tables we use <table> tag. In table for row we use <tr> tag. For table header we use <th> tag. Table cell is defined with <td> tag. 

Example of HTML Tables:

<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Deo</td>
<td>50</td>
</tr>
<tr>
<td>Neot</td>
<td>34</td>
</tr>
</table> code-box


HTML Lists

There are two types of list in HTML :

1. Unordered List:

<ul>
<li>Buffalo</li>
<li>Cow</li>
<li>Goat</li>
</ul> code-box

2. Ordered List:

<ol>
<li>Buffalo</li>
<li>Cow</li>
<li>Goat</li>
</ol> code-box


HTML Block and Inline Elements

Block Elements

Block elements are always starts from a new line. Block element takes full width and has a top and a bottom margin.

<div>Codex</div>
<div>Radar</div> code-box

Other Block Elements : <table>, <form>, <header>, <article>, <nav>, <p>, <section>, <hr>, <footer> etc.

Inline Elements

Inline elements do not start with a new line. They take the width as per their requirement. They also do not take any margin at the top and bottom.

<span>Codex</span>
<span>Radar</span> code-box

Other Inline Elements : <a>, <img>, <lable>, <small>, <textarea>, <button> etc.


HTML class Attribute

In HTML, we assign one or more class names to an element using the class attribute. We can select an element using these classes by CSS and JavaScript. Class name is case sensitive. We can apply multiple classes on the same element and use the same class on many elements.

<!-- Single Class Exmaple -->
<h1 class="heading">CodexRadar</h1>


<!-- Multiple Class Example -->
<h1 class="heading bigText">CodexRadar</h1> code-box

Style for these classes

.heading {
color:red;
}
.bigText {
font-size: 50px
} code-box

To select a class in CSS, we use (.) and in JavaScript we use getElementsByClassName() method. alert-success
 

HTML id Attribute

We use the id attribute to give a unique id to an element in HTML. More than one element in an HTML document cannot use the same id.

<h1 id="heading">CodexRadar</h1> code-box

Style this id in CSS

#heading {
color: red;
} code-box

To select an id in CSS, we use (#) and in JavaScript we use getElementById() method. alert-success


HTML iframe

Using HTML iframe, we can display another web page in a web page.

<iframe src="codexradar.com" style="border:2px solid red;" title="CodexRadar"></iframe> code-box


HTML JavaScript

With the help of JavaScript, HTML pages can be made more dynamic and attractive. We can use JavaScript using the <script> tag in an HTML document or web page.

<!DOCTYPE html>
<html>
<body>
<p>Use JavaScript to insert text in <p> tag </p>

<p id="insertText"></p>

<script>
document.getElementById("insertText").innerHTML = "Hurray! JavaScript";
</script>

</body>
</html> code-box

HTML <noscript> Tag

If a user has disabled JavaScript in the browser, then with the help of this tag, we can give a message to the user and ask him to enable JavaScript.

<noscript>Sorry ! You have JavaScript disabled. Enable it Now !</noscript> code-box


HTML Head Element

These elements are included in the head element of html : 
<meta>, <base>, <title>, <link>, <style>, <script>

Example of Head Element:

<!DOCTYPE html>
<html>
<head>
<title>CodexRadar</title>
<base href="https://www.codexradar.com/" target="_blank">
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>

<h1>HTML Head Element</h1>

</body>
</html> code-box


HTML Forms

In HTML, we use <form> element to create an HTML form. The <form> element contains following elements: <label>,<input> etc.

<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form> code-box

There are various types of <input> element:

input Types Description
<input type="text">For input text
<input type="radio">For radio button
<input type="checkbox">For checkbox
<input type="submit">For submit button
<input type="button">For clickable button


HTML Video

To insert video in HTML, we use <video> element.

<video controls autoplay width="500" height="500" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video> code-box


HTML Audio

To insert audio in HTML, we use <audio> element.

<audio controls autoplay>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio> code-box


HTML YouTube 

To insert YouTube video in HTML, we use this code:

<iframe width="500" height="500"
src="YouTube Video URL">
</iframe> code-box


Summary

In this tutorial, we have taught you HTML language. Hope you understand this well. Practice every element of HTML well. If you have any suggestion or complaint, you can contact us anytime.

Post a Comment