HTML basis trainings – Micro2media

Home to training index page > Information Technology (IT) trainings > HTML basis trainings

What is HTML?

Developers and designers use HTML, the standard markup language, to create web pages. HTML structures content and defines appearance through a series of elements. Anyone interested in web development or design can easily start learning HTML, regardless of their prior experience.

Step-by-step guide for HTML trainings

Here’s a step-by-step guide on how to create a simple HTML document, along with examples of common HTML elements:

Create a new file in your preferred text editor, such as Notepad, and save it with a .html extension.
Then, begin by creating the basic structure of an HTML document. This consists of the html, head, and body tags:

phpCopy code<!DOCTYPE html>
<html>
  <head>
    <title>My First HTML Document</title>
  </head>
  <body>
    <!-- content goes here -->
  </body>
</html>

The <!DOCTYPE html> declaration tells the browser that this is an HTML document. The <html> tag marks the beginning of the document, while the <head> and <body> tags define the head and body sections of the page, respectively.

Inside the <head> section, you can add metadata about the page, such as the title, which appears in the browser’s title bar:

phpCopy code<head>
  <title>My First HTML Document</title>
  <meta charset="UTF-8">
</head>

The <meta> tag specifies the character encoding of the document, which should be set to UTF-8 to support all languages.

Inside the <body> section, you can add content to the page using various HTML elements. Here are some examples:

lessCopy code<h1>This is a Heading</h1>
<p>This is a paragraph of text.</p>
<a href="https://www.google.com">This is a link to Google.</a>
<img src="image.jpg" alt="An image">

The <h1> tag defines a heading, while the <p> tag defines a paragraph of text. The <a> tag creates a hyperlink to another webpage or resource, while the <img> tag displays an image. The src attribute specifies the source file of the image, while the alt attribute provides a text description of the image for accessibility purposes.

You can also use HTML to create lists, tables, forms, and more:

phpCopy code<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>30</td>
  </tr>
</table>

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
  <button type="submit">Submit</button>
</form>

The <ul> tag creates an unordered list, while the <li> tag defines each list item. The <table> tag creates a table with columns and rows, while the <tr> tag defines each row and the <th> and <td> tags define the header and

data cells, respectively. The <form> tag creates a form that users can fill out, with various input fields such as text boxes and buttons.

Finally, you can add comments to your HTML code using the  syntax:

phpCopy code<!-- This is a comment -->

Comments are useful for providing notes or explanations about your code that aren’t displayed on the webpage.

Tips for working with HTML

A few additional tips for working with HTML:

Always make sure your code is well-structured and properly indented. This makes it easier to read and debug.
Use meaningful and descriptive tags and attributes to help organize your content and make it accessible to users with disabilities.
Test your code in various web browsers to ensure it displays correctly and functions as expected.

If you need assistance with real-life scenarios or recommendations, please feel free to contact us either HERE or through email at trainings@micro2media.com.

What is HTML?

Step-by-step guide for HTML trainings

Tips for working with HTML

Related Content