HTML - Learn Index

Introduction to HTML

HTML, or Hypertext Markup Language, is a programming language used for creating and designing web pages. In this lesson, we will explore the basic concepts of HTML, its history, and its role in web development.

Syntax of HTML HTML uses tags to define the structure and content of a web page. Tags are enclosed in angle brackets and consist of the tag name, such as <html>, with optional attributes like class and id. These tags define the content and layout of web pages.

History of HTML

HTML was first developed in the late 1980s by Tim Berners-Lee, a British computer scientist. The first version of HTML, known as HTML 1.0, was released in 1993, and subsequent versions were developed to include new features and functionality.

Role of HTML in Web Development

HTML is the backbone of web development, providing the essential structure and content for web pages. It is used alongside CSS for styling and JavaScript for interactive elements, contributing to the overall user experience on the internet.

HTML Elements and Tags

HTML elements are the core components of any web page, defined by tags that indicate different types of content and structure, such as headings (<h1> to <h6>), paragraphs (<p>), links (<a>), images (<img>), and many more.

Some commonly used HTML tags include:

<head>: Defines the metadata and title of a web page
<body>: Defines the main content of a web page
<h1> to <h6>: Defines headings of varying sizes and importance
<p>: Defines a paragraph of text
<a>: Defines a hyperlink to another web page or resource
<img>: Defines an image to be displayed on a web page

Hello World Script in HTML

To start coding in HTML, you’ll need a simple text editor like Notepad (Windows) or TextEdit (Mac), or you can opt for more advanced IDEs (Integrated Development Environments) like Visual Studio Code, Sublime Text, or Atom. These tools offer more features for coding, such as syntax highlighting and code suggestions.

Choose Your Editor: Download and install an editor if you haven’t already. Visual Studio Code is a popular, free option that works on Windows, Mac, and Linux. You can download it from Visual Studio Code’s official website. Visual Studio Code’s official website.
Create Your First HTML File: Open your text editor or IDE, and create a new file. Save it as hello_world.html to your preferred location.
Write Your First HTML Code: Copy the following HTML code into your hello_world.html file. This is the basic structure of an HTML document with a “Hello World” message.

<!DOCTYPE html>
<html>
<head>
<title>Hello World Example</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first HTML page.</p>
</body>
</html>

View Your Web Page: Open the hello_world.html file in a web browser like Chrome, Firefox, or Edge. You should see a web page displaying the “Hello World!” heading and a short paragraph.

This simple exercise introduces you to the basic workflow of web development using HTML. By creating, editing, and viewing an HTML file, you learn the fundamental process of coding and displaying content on the web.

Conclusion

HTML is an important language in web development, providing the structure and content of web pages. By understanding the syntax, history, and role of HTML, we can create engaging and interactive web pages that deliver content to users across the globe.

Here is a list of commonly used HTML tags:

<!DOCTYPE> – declares the document type and version of HTML
<html> – represents the root element of an HTML document
<head> – contains the metadata of the HTML document, such as the title, styles, and scripts
<title> – specifies the title of the HTML document that appears in the browser’s title bar
<body> – contains the visible content of the HTML document
<h1> to <h6> – defines headings of various sizes and importance
<p> – defines a paragraph of text
<a> – creates a hyperlink to another web page or resource
<img> – inserts an image into the HTML document
<ul> – creates an unordered list of items
<ol> – creates an ordered list of items
<li> – defines an item in a list
<table> – creates a table with rows and columns
<tr> – defines a row in a table
<td> – defines a cell in a table
<form> – creates a form for user input
<input> – creates an input field for user input
<select> – creates a drop-down list for user input
<option> – defines an option in a drop-down list
<button> – creates a clickable button
<div> – defines a section of the HTML document for styling and organization
<span> – defines a small section of the HTML document for styling and organization
<style> – contains CSS styling rules for the HTML document
<script> – contains JavaScript code for the HTML document.