Introduction to HTML

Are you ready to take your first step in building websites? In this tutorial, we’ll introduce you to the basics of HTML and guide you through creating your first web page step by step.

What is HTML?

HTML, which stands for HyperText Markup Language, is the foundation of every website you visit. It’s responsible for structuring web pages by defining elements like text, images, videos, and links.

Think of HTML as the building blocks of a webpage, with each block representing different types of content. If you’ve ever wondered how the internet works behind the scenes, learning HTML is the perfect starting point. Once you master HTML, you can start exploring other web development technologies like CSS and JavaScript, which add design and interactivity.

Why Should You Learn HTML?

Whether you’re aiming for a tech career or just want to create a personal website, HTML is an essential skill for many reasons:

Build and Structure Websites: Every webpage starts with HTML. By learning it, you’ll have the tools to structure content online.
In-Demand Skill: Employers in web design, digital marketing, and software development often require a solid understanding of HTML.
Foundational for Learning Other Languages: HTML is easy to pick up, making it an excellent entry point for learning CSS, JavaScript, and more advanced programming languages.

Getting Started: Your First HTML Document

Now, let’s create a simple HTML document. All you need is a text editor (like Notepad or VS Code) and a web browser (like Chrome). Save your file with a .html extension (e.g., index.html). Then, type the following code:

<!DOCTYPE html> <html lang="en"> <head> <title>Welcome to My First Webpage</title> </head> <body> <h1>#No.1 Best Software Training Institute</h1> <h2>Welcome to HTML</h2> <p>HTML is the standard language for creating webpages. It is easy to learn and fun to use!</p> </body> </html>

Explaining the Code:

<!DOCTYPE html>: This declares the document as an HTML5 document, which is the current standard. <html>: This is the root element, and all other HTML elements will go inside this tag. <head>: The head contains meta-information about the webpage, such as character encoding () and the page title (<title>), which appears in the browser tab. <body>: This is where the visible content of the webpage goes. It contains headings (<h1>, <h2>) and a paragraph (<p>), which displays text on the screen.

The Basic Structure of an HTML Page

HTML uses tags to mark up text and images. Tags are enclosed in angle brackets (< and >). Most tags come in pairs – a start tag like

and an end tag like p – with content placed between them.

Some important HTML tags

1. Headings:

HTML offers six levels of headings, from h1 (the most important) to h6 (the least important). The h1 tag should generally be used for your main heading, like a title or key message.

2. Paragraphs:

The p tag is used to create paragraphs. Text inside the

tag will be separated from other text on the page, making it easier to read.

3. Images:

To add an image to your webpage, use the img tag. You’ll need to provide the src attribute with the image’s URL.

Example:

4. Links:

Use the a tag to create clickable links. You’ll need to specify the destination using the href attribute.

Example:

<a href="https://www.credosystemz.com/">Visit CredoSystemz Website</a>

5. Lists:

HTML allows you to create both ordered and unordered lists.

Unordered List:

<ul> <li>HTML Basics</li> <li>CSS Styling</li> <li>JavaScript for Interactivity</li> </ul>

Ordered List:

<ol> <li>Learn HTML</li> <li>Practice CSS</li> <li>Master JavaScript</li> </ol>

Creating Tables in HTML

Tables are useful for displaying data in rows and columns, making it easy to present information in a structured way. HTML uses the table tag to define a table, and inside the table, we use tr (table row), th (table header), and td (table data) to organize the content.

Example of a simple table:

<table> <tr> <th>Course</th> <th>Duration</th> </tr> <tr> <td>HTML Basics</td> <td>2 Weeks</td> </tr> <tr> <td>JavaScript Essentials</td> <td>4 Weeks</td> </tr> </table>

Explanation:

● <table>: Creates the table. ● <tr>: Defines a row in the table. ● <th>: Represents a header cell that is bold and centered by default. ● <td>: Defines a standard data cell.

Tables are commonly used to display tabular data, making your webpage organized and easy to navigate.

The Versatile div Tag

The div tag is a widely used element in HTML. It is a block-level element used to group and organize content, allowing you to structure different sections of your page.

Example:

<div> <h2>About CredoSystemz</h2> <p>At CredoSystemz, the #No.1 Best Software Training Institute, we offer comprehensive courses in web development.</p> </div>

div tag wraps the content (heading and paragraph), making it easy to apply styling or scripts to the entire block.

Understanding Class and ID Attributes

While the div tag is useful for grouping content, we often need a way to identify specific elements to apply styles or functionality. This is where the class and id attributes come in.

Class: A class can be used to target multiple elements with the same style or behavior.
ID: An id is unique and can be applied to only one element per page.

Example showing the difference between the two:

<div class="section"> <h2>Our Courses</h2> <p>We offer a variety of courses in web development, data science, and more.</p> </div> <div id="contact-info"> <h2>Contact Us</h2> <p>Email: info@credosystemz.com</p> </div>

Conclusion

In this tutorial, we covered the basics of HTML, learned how to create a simple webpage, and explored some essential HTML tags like headings, paragraphs, and links. Remember, this is just the beginning! In the next part of this blog series, we’ll go further into more advanced topics like forms, APIs, and multimedia elements, which will give you the power to create more complex web pages.

Request more information

Introduction to HTML

Watch our video tutorial

Share This To