Introduction To Html | Beginner

Introduction to the basics of HTML and its role in web development

HTML (HyperText Markup Language) is the standard language for creating web pages. It describes the structure of a webpage and its content. HTML consists of a series of elements that define different parts of the content, such as headings, paragraphs, links, images, and more. This tutorial provides an introduction to the basics of HTML and its role in web development.

Key Points:

HTML is the standard language for creating web pages.
HTML elements define the structure and content of a webpage.
HTML is essential for web development and is used alongside CSS and JavaScript.

HTML Basics

HTML documents are plain text files with a .html extension. They contain HTML elements that define the structure and content of the webpage. Each HTML element is enclosed in angle brackets (<>), with a start tag and an end tag. Here is an example of a simple HTML document:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First HTML Page</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is a paragraph of text on my first HTML page.</p>
</body>
</html>

In this example, the HTML document contains the basic structure of an HTML page, including the <html>, <head>, and <body> elements.

Common HTML Elements

HTML provides a variety of elements to define different parts of the content. Here are some common HTML elements:

<h1> to <h6>: Heading elements, with <h1> being the highest level and <h6> the lowest.
<p>: Paragraph element.
<a>: Anchor element, used to create hyperlinks.
<img>: Image element, used to embed images.
<ul>, <ol>, <li>: List elements, used to create unordered (bulleted) and ordered (numbered) lists.
<div>: Division element, used to group content.
<span>: Span element, used to apply styles to a part of the text.

Here is an example of using some of these elements:


<h1>About Me</h1>
<p>Hello! My name is John Doe, and I am a web developer.</p>
<a href="https://example.com">Visit my website</a>
<img src="profile.jpg" alt="Profile Picture">
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

Attributes

HTML elements can have attributes that provide additional information about the element. Attributes are placed inside the start tag and consist of a name and a value. Here are some common attributes:

href: Specifies the URL of the link (used with <a>).
src: Specifies the path to the image (used with <img>).
alt: Provides alternative text for the image (used with <img>).
id: Specifies a unique identifier for the element.
class: Specifies one or more class names for the element.
style: Specifies inline CSS styles for the element.

Here is an example of using attributes:


<a href="https://example.com" target="_blank">Visit Example.com</a>
<img src="logo.png" alt="Website Logo" width="200">
<p id="intro" class="swf-lsn-text-large" style="color: blue;">Welcome to my website!</p>

HTML Document Structure

An HTML document has a well-defined structure that consists of the following parts:

<!DOCTYPE html>: Declares the document type and version of HTML.
<html>: The root element that contains all other elements.
<head>: Contains meta-information about the document, such as the title, character set, and links to stylesheets.
<body>: Contains the content of the document, such as text, images, links, and other elements.

Here is an example of a complete HTML document:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First HTML Page</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is a paragraph of text on my first HTML page.</p>
    <a href="https://example.com">Visit my website</a>
    <img src="profile.jpg" alt="Profile Picture">
</body>
</html>

Summary

In this tutorial, you learned about the basics of HTML and its role in web development. HTML is the standard language for creating web pages and consists of elements that define the structure and content of the webpage. You also explored common HTML elements, attributes, and the structure of an HTML document. Understanding HTML is essential for web development and is the foundation for learning CSS and JavaScript.