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.
Related Content
- HTML For Beginners The Easy Way: Start Learning HTML & CSS Today
- Churn prediction using multimodality of text and tabular features with Amazon SageMaker Jumpstart
- HTML Tutorial
- VMware adds Apple Silicon support for its desktop hypervisors
- This startup wants to use generative AI to write your marketing copy