HTML basics

This tutorial represents all of the HTML tags that are mostly used to make a web page. The following topics enable you to make a web page and they cover most of the material of HTML.

HTML syntax

Every language has its own syntax. The syntax is an arrangement of words according to the rules of language. Similarly, there is also basic syntax to write HTML.

<!DOCTYPE html>
<html>

<head></head>

<body>
  <p>This is a new paragraph.</p>
</body>

</html>

The basic syntax of HTML has been given above. Its structure is very simple and resembles a human being. Like a human being, it consists of a head (serves as the brain of the page) and body (serves as the visible portion of a page).

<!DOCTYPE> represents the type of document. It means that this document is of HTML.

Elements

An element usually consists of opening and closing tags. For example, <h1> is opening and </h1> is closing tag.

<tag_name>Content</tag_name>
<code>This is code element.</code>
<p>This is a paragraph element.</p>

Tags

There are three kind of tags. Opening, closing and self-closing tags.Opening and closing tags alway come in pair(<p>-</p>).

And self-closing tag is always single with the optional forward slash after tag name. (<br/>)

<h1>Heading1</h1> <!--opening and closing tags -->
<br/> <!--Self closing tag -->

Attributes

An attribute provides the additional information about the tag and make it more useable. For example, title, contenteditable, readonly, width, height etc.

<p title="new paragraph">This is a paragraph</p>
<p contenteditable> content is editable.</p>

The attribute is always written in opening tag with the name-value pair.

Headings

<h1> to <h6> tags are used for headings. The purpose of these headings is to represent the topic. The headings are ranked from h1 to h6.

<h1>The heading1</h1>
<h2>The heading2</h2>
<h3>Third level heading</h3>
<h4>The heading4</h4>
<h5>The heading5</h5>
<h6>Least important heading</h6>

<p> tag represents the paragraph.

Images

<img> element adds an image on the page. The 'src' attribute contains the address of the image.

<img src="directory/name of image" alt="alternate text">
<img src="/images/codingb-32x32.png" alt="image logo">

width and height attributes set the dimension of the image.

Links

The anchor link (<a>) connects the current document to the other pages or resources.

<a href="address of the external" target="_blank">anchor text</a>
<a href="https://web4college.com/" target="_blank">web4college</a>

href attribute contains the address of external page or resource.

target="_blank" means the link opens in new window.

Lists

These lists may be used , to wirte components in an unordered form and represent the term-definition pairs.

<style>
table, td, th{
	border:1px solid rgba(220,220,220,1);
	border-collapse:collapse;
	padding:5px;
}
</style>

<h3>Ordered list</h3>
<ol>
  <li>Mix both solutions</li>
  <li>Stir them well.</li>
  <li>Add a few drops of the sulphuric acid.</li>
 </ol>
<h3>Unordered list</h3> 
<ul>
  <li>Sulphuric Acid</li>
  <li>Temperature</li>
  <li>Solution1</li>
</ul>
<h3>Definition lists</h3> 
<dl>
 <dt>String</dt>
 <dd>The string is the group of characters in the double quotation marks.</dd>
 <dt>Operators</dt>
 <dd>The operators perform operations on operands and do calculations.</dd>
</dl>

Unordered list

Unordered lists are used where the order of items is not necessary. For example, it may be used to write the components of a recipe.

Ordered list

Ordered lists are used where order of items is necessary. For example, it is used to instruct someone for a specific task (recipe).

Definition list

It is used for the terms and their definitions.

Tables

Tables are used to represent the data in the form of columns or rows. The basic data cells contain the data.

<style>
table, td, th{
	border:1px solid rgba(220,220,220,1);
	border-collapse:collapse;
	padding:5px;
}
</style>

<table>
 <tr>
  <td>Name</td>
  <td>Salary</td>
 <tr>
  <td>john</td>
  <td>$20,000</td>
 </tr>
 <tr>
  <td>david</td>
  <td>$30,000</td>
 </tr>
 <tr>
  <td>marry</td>
  <td>$40,000</td>
 </tr>
</table>

tr represents table row. td is for table data. th is an abbreviation of table head.

Text formatting

There are many elements that format the text.

<style>
table, td, th{
	border:1px solid rgba(220,220,220,1);
	border-collapse:collapse;
	padding:5px;
}
</style>

<p><b>bold text</b></p>
<p><i>italic text</i></p>
<p><u>underline text</u></p>
<p><mark>marked text</mark></p>
<p><var>variable</var></p>

<b>, <i>, <strong>, <em>, <u>, <mark>, <del>, <insert>, <sub>, <sup>, <var> elements format the text.

Comments

Comment is used to provide the information why this code has been written especially in complex coding. Comments are not visible in the web page. It may be a single line or multi-line comment.

<!---This is the syntax to write a comment ---->
<!---This is multi-line 
comment ---->

Colors

The colors may be represented in decimal notation or hexadecimal notation. The named colors may also be used.

color:green; <!--- name color -->
color:rgb(255,0,0); <!--- decimal notation -->
color:#ff0000; <!--- hexadecimal notation --->

Head

Head element contains the meta data, the addresses of external resources such as <link> tag to import css file and <script> tag to import script file.

<title>title of page</title>
<link href="test.css" rel="stylesheet"> <!--- imports external css file --->
<base href="https://web4college.com/"> <!--- The default url of the page --->
<meta name="keywords" value="html basics, html codes, html page">

Click on the head to learn more.

Video

<video> tag adds a video on the page. We write the address of the video in the 'src' attribute of video tag.

<style>
table, td, th{
	border:1px solid rgba(220,220,220,1);
	border-collapse:collapse;
	padding:5px;
}
</style>

<video src="files/Hummingbird.mp4" style="width:200px; height:200px;" controls>
</video>

controls attribute adds controls on the video.

Audio

<audio> tag adds an audio on the page. We write the address of audio in the 'src' attribute.

<style>
table, td, th{
	border:1px solid rgba(220,220,220,1);
	border-collapse:collapse;
	padding:5px;
}
</style>

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

Iframe

HTML iframe is used to browse the other HTML files or other browsing content in a specified frame. It is an inline element.

 <iframe src="files/value.html" ></iframe>
iframe can embed website
 <iframe src="https://web4college.com" ></iframe>

Form

HTML form is used to collect the data from the user. It consists of normal content, other input controls (text, number, buttons, checkbox etc.) and context menus (select, option, optgroup etc).

<style>
table, td, th{
	border:1px solid rgba(220,220,220,1);
	border-collapse:collapse;
	padding:5px;
}
</style>

 <form>
 <p>First name: <input type="text" name="firstName"></p>
 <p>Last name: <input type="text" name="lastName"></p>
 <p>Gender: <br>Male<input type="radio" name="gender" value="male"> &nbsp; Female <input type="radio" name="gender" value="femal"></p>
 <p>Subject: <br>Calculus-I: <input type="checkbox" name="subjects" value="Calculus-I"> &nbsp; Calculus-II: <input type="checkbox" name="subjects" value="Calculus-II"></p>
 <p><input type="submit" name="submit" value="Send"></p>
 </form>