Training

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>
<html>
<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title></title>
</head>
<body>

</body>
</html>

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.

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.

Forms:

<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.

Tables:

<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

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.

<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.

Internal Links:

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

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="https://www.google.com/">visit google</a>

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

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

<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr>
<td>Jafar</td>
<td>Mohammad Musa</td>
</tr>
</table>

An HTML form is used to collect user input.

HTML form elements

<input>

<label>

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>

Above are the basic way for creating HTML forms.

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