Learn HTML

HTML5 is the latest version of HTML (Hyper Text Markup Language). It is a core language to make the front-end of a website.

If you are looking for a quick or detailed study of HTML, this is the right place for you. Because web4college offers free tutorials to learn HTML in either way.


HTML Course

Every learner that comes to this website has its own priority to learn HTML depending upon the time and requirement. Therefore, It has been categorized into three categories and each one is chosen according to the requirement and time of a learner.

Quick learning (within hours)

If you want to learn quickly, then enroll yourself in this learning process. This is one page tutorial (with examples) that covers the basic topics used to make a website.

Get started →

Deep learning (within days)

This learning process involves the detailed study of each and every topic. Every topic includes the examples related to every tag.

Get started →

Always click on the 'Try' button to practice and download the relevant example in your pc.

What will you learn?

You will learn the following topics in all of the above categories. Every topic related to HTML is discussed in web4college. These topics give an idea of what will you learn? You can skip it and move to the next tutorial.

Introduction to HTML

The syntax of HTML has been presented with the detailed description of every tag. It represents

  • What is HTML?

  • Where to code and how to code?

  • What are tags?..more

<!DOCTYPE html>
<html>
<head>
  <title>title of page</title>
</head>
<body>
  <h1>Heading of the page</h1>
  <p>This is a simple paragraph.</p>
</body>
</html>

What are elements?

An element usually consists of an opening tag, closing tag and the content between them. This tutorial includes

  • element (opening-closing tags)

  • element (self-closing tag)

  • case sensitivity of elements...more

<tag_name> Here content is present </tag_name>
<p> Here content is present </p>
<br/>
<CODE>This is in uppercase form.</CODE>




What are Attributes in an element?

HTML Attributes make the html elements more useable. An attribute consists of the name-value. This tutorial includes

  • Boolean attribute

  • Unquoted attribute

  • Double-quoted attribute

  • Single-quoted attribute...more

<p attribute-name="attribute-value"> some text </p>

<p contenteditable> Here the content is editable.</p>

<p title=demo>The unquoted attribute.</p>

<p title="This paragraph">Double quoted attribute.</p>


Headings

h1 to h6 tags are used to define different types of headings (<h1>-</h6>). This tutorial includes

  • Why are Headings so important?

  • Headings order...more

Heading1

Heading2

Heading3

Heading4.

Heading5.
Heading6.

How to add images

HTML img element adds an image in a page. Firstly we write an image tag. Then, we add the 'src' attribute in the <img> tag. This tutorial includes

  • Image

  • alt, height and width attributes

  • Image alignment...more

<img src="/images/codingb-96x96.png" alt="web4college logo"/>


codingb logo is present here

How to connect different web pages

HTML links connect the current page to the destination resources. These resources may be the other pages of the same website or the external web resources. This tutorial includes

  • <a>

  • <base>

  • <link>...more

<a href="http://www.web4college.com">Go to web4college</a>

<base href="http://www.google.com">

<link rel="stylesheet" href="test.css">

Role of lists

Lists are used to write the instructions with a manner, the terms or the definitions of terms. There are three types of lists.

  • <ul>

  • <ol>

  • <dl>...more

<ul>
<li>list item1</li>
<li>list item2</li>
</ul>

<ol>
<li>list item1</li>
<li>list item2</li>
</ol>

<dl>
<dt>term</dt>
<dd>definition</dd>
</dl>

Tables to organize the data

HTML table represents data in the form of rows and columns of a table (i.e. in 2-D form). We use the tables to organize the data in a manner.

  • <table>

  • <tr>

  • <td>...more

Name Salary
john $20,000
david $30,000
marry $40,000

Text formatting

HTML formatting includes many elements which give different styles to the text. These elements can format a simple text in different styles.

  • bold

  • italic

  • underline...more

<i>italic text</i>
<b>bold text</b>
<mark>mark text</mark>
<u>underlined text</u>
<strong>strong text</strong>



Codes

HTML codes represent the text in different forms for the special purposes. This includes

  • blockquote

  • kbd

  • pre

  • cite...more


<kbd>kbd tag</kbd>
<code>code tag</code>
<cite>cite tag</cite>
<address>address tag</address>




Comments

Comment is used to provide the information why this code has been written especially in complex coding. This tutorial includes

  • Why comments?

  • Comment in HTML

  • Comment in CSS...more


<!--This is a single-line comment --->
<!--This is a multi-line 
comment --->

Colors

The color may be a represented in one of the three ways. It may be named color, rgb in decimal, rgb in hexadecimal. The following are the converters

  • Hexadecimal to decimal convertor

  • RGB value to color convertor

  • Color to RGB value convertor...more


color:red;
color:rgb(255,0,0);
color:rgba(255,0,0,1);
color:#ff0000;




How to add video

video element can embed video in a web page. The media can be controlled using attributes in video tag.

  • Video element

  • Source element

  • File path problems...more


<video src="files/Hummingbird.mp4" controls>
</video>

How to add an audio

video element can embed video in a web page. The media can be controlled using attributes in video tag.

  • Video element

  • Source element

  • File path problems...more


<audio src="sample.mp3" controls style="width:200px;"></audio>

Was this article helpful?

 

Email:

Message:

Get the newsletter