HTML Tutorial


Hypertext Markup Language (HTML) is the standard markup language that is used to create and design documents on the World Wide Web.


HTML: is the code that is used to create the structure of a web page and its content.





To start HTML you need to follow the below steps: 


1. Set Up Your Environment first:


 All you need to write and test HTML is a  text editor like Sublime Text , Notepa++ or any code editor like Visual Studio Code, or Atom.


Sublime Text: Download Sublime Text/


Notepad++: Download Notepad++/




2. Create an HTML Document:


 Open your text editor and create a new file.
Start your HTML document by adding the HTML code.



A HTML Text editor is a program used for writing and editing HTML code for the markup of a web pages.

There are several text editors for writing HTML code, download your choice.


<!DOCTYPE html>: This declaration defines the document type and version of HTML.
<html lang="en">: The root element of the HTML document. 
<head>: Contains meta-information about the HTML document, such as character set, viewport settings, and the page title.
<meta charset="UTF-8">: Specifies the character encoding for the document (UTF-8 is widely used for web pages).
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Helps to ensure proper rendering and scaling on various devices.
<title> Page Title</title>: Sets the title of the web page (displayed in the browser's title bar or tab).
<body>: Contains the content of the HTML document, such as text, images, links, and other elements.


<!DOCTYPE html>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">




HTML consists of saveral elements that structure the content of a web page. 


Below are the list of some commonly used of HTML elements:


<!DOCTYPE html>: Defines the document type and version of HTML.
<html>: Root element of an HTML page.
<head>: Contains meta-information about the HTML document.
<title>: Sets the title of the HTML document.
<body>: Contains the content of the HTML document.


Text Formatting:


<h1> to <h6>: Headings, where <h1> is the largest and <h6> is the smallest.
<p>: Paragraph.
<strong> or <b>: Bold text.
<em> or <i>: Italicized text.
<u>: Underlined text.
<s>: Strikethrough text.
<mark>: Highlighted or marked text.
<sub>: Subscript text.
<sup>: Superscript text.
<abbr>: Defines an abbreviation or acronym.
<blockquote>: Defines a block of text that is a quotation.
<code>: Represents a single line of code.

Links and Navigation:


<a>: Anchor element for creating hyperlinks.
<nav>: Defines navigation links.
<ul>: Unordered list.
<ol>: Ordered list.
<li>: List item.
<dl>: Definition list.
<dt>: Definition term.
<dd>: Definition description.


Images and Media:


<img>: Embeds an image.
<audio>: Embeds audio content.
<video>: Embeds video content.
<figure>: Represents any content that is referenced from the main content, such as images or videos.
<figcaption>: Provides a caption for a <figure> element.



<form>: Creates an HTML form for user input.
<input>: Defines an input field.
<textarea>: Defines a multiline text input control.
<select>: Creates a dropdown list.
<option>: Defines an option in a dropdown list.
<button>: Defines a clickable button.
<label>: Defines a label for an <input>, <select>, or <textarea> element.




<table>: Defines a table.
<tr>: Defines a table row.
<th>: Defines a table header cell.
<td>: Defines a table data cell.
<thead>, <tbody>, <tfoot>: Group table header, body, and footer content, respectively.
<col>: Specifies column properties for each column within a <colgroup> element.


Semantic HTML:


<header>, <footer>, <main>, <article>, <section>: Semantic elements to define different parts of a web page.
<aside>: Represents content aside from the content it is placed in.
<details>: Represents a disclosure widget from which the user can obtain additional information.
<summary>: Defines a summary or a caption for the content of a <details> element.


Meta Information:


<meta>: Provides metadata about the HTML document.


Interactive Elements:


<button>: Represents a clickable button.
<a>: Anchor element for creating hyperlinks.
<input>: Defines an input field.

This is not an exhaustive list, and there are many more HTML elements and attributes. 


To display an image in HTML, you can use the <img> element.


<img> element is used to embed an image. 
src attribute specifies the path of image 
alt attribute provides description of the image

 <img src="image_path/image_name.jpg" alt="Description of the image">




To embed a video in HTML, you can use the <video> element.


<video> this element is used to embed the video.
width: width attributes is use to set the dimensions of the video player.
controls: this attribute adds playback controls (play, pause, stop, volume, etc.).
<source> this element is used to specify the video path and video type. 


<video height="300" width="300" controls>
  <source src="" type="video/mp4">


 <audio> this element is use ot wraps the audio content.
 controls: this attribute is use to adds playback controls (play, pause, stop, volume, e.t.c).
 <source> this element is use to specifies the audio path and type.


<audio controls>
  <source src=" jeena sirf mereliye.mp3" type="audio/mp3">



Internal Links:

Internal links are used to connect different pages within the same website.

<a href="page2.html">Go to Page 2</a>

from page one to page two in the same website.


External Links:

External links are used to connect pages or resources that are located outside of the current website. 

<a href="">visit google</a>


An iframe is an HTML element that allows you to embed another HTML document within the current document. 


<iframe src="page2.html" height="500" width="700" title="My Iframe"></iframe>


src: This attribute is use to specifies the URL of the document to be embedded. 
width and height: These attributes are use to define the width and height of the iframe. 
frameborder: This attribute determines whether or not to display a border around the iframe. 
allowfullscreen: This attribute is used to display fullscreen mode.


Hypertext  Markup Language (HTML) table is a structured way to display data in rows and columns. 


HTML Table elements


<th>Table Header</th>

<tr> Table row</tr>

<td>Table data</td>

colspan=" ......."       Allow a cell to span across the columns

rowspan".........."  Allow a cell to span across the rows

      <th>First Name</th>
       <th>Last Name</th>
      <td>Mohammad Musa</td>


An HTML form is used to collect user input.

HTML form elements








Common input types:

text: Single-line text input.
password: Password input.
checkbox: Checkboxes for multiple selections.
radio: Radio buttons for single selections.
submit: Submit button.
reset: Reset button.
file: File upload control.
hidden: Hidden input.
<textarea>: Used to create a multiline text input area.


Simple HTML Form


<form method="" action="">

       <input type="text" placeholder="Enter your email">

       <input type="password" placeholder="Enter your password">

      <input type="submit" value="Login"> <input type="reset" value="Reset">



Above are the basic way for creating HTML forms.

You can  customize this design forms that suit your application's requirements. 

Test your skills