HTML Introduction

HTML (HyperText Markup Language) is the standard language used to create and structure web pages. It uses a system of tags to define the elements on a webpage, such as headings, paragraphs, links, images, and more. HTML forms the backbone of a webpage's structure, while CSS (Cascading Style Sheets) and JavaScript are used for styling and interactivity.

Key Components of HTML:

  1. Elements: The fundamental building blocks of HTML, represented by tags like <html>, <head>, <body>, etc.
  2. Tags: Tags define elements. They usually come in pairs, with an opening tag and a closing tag, like <p> (opening) and </p> (closing).
  3. Attributes: Tags can have attributes that provide additional information. For example, <img src="image.jpg" alt="An image"> includes the src (source) and alt (alternative text) attributes.
  4. Document Structure:
    • <!DOCTYPE html>: Declares the document type and version of HTML.
    • <html>: The root element of an HTML document.
    • <head>: Contains meta-information, such as the title and links to external files.
    • <body>: Contains the content of the webpage that is visible to users.

Example of Basic HTML Structure:

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Web Page</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is a paragraph of text on my webpage.</p>
    <a href="https://www.example.com">Click here to visit another page</a>
</body>
</html>

Common HTML Tags:

  • Headings: <h1> to <h6> define headings, with <h1> being the largest and most important.
  • Paragraphs: <p> is used to define a paragraph of text.
  • Links: <a> defines hyperlinks. Example: <a href="https://www.example.com">Click Here</a>.
  • Images: <img> embeds an image on the page, with attributes like src for the image source and alt for alternative text.
  • Lists:
    • Unordered lists: <ul> for a list with bullet points.
    • Ordered lists: <ol> for a numbered list.
    • List items: <li> are used to define individual list items.

Conclusion:

HTML is essential for building websites. By combining it with CSS for styling and JavaScript for interactivity, you can create dynamic and visually appealing web pages.

Comments

Post a Comment

Popular posts from this blog

HTML Elements

  HTML Elements In HTML, elements are the building blocks of a webpage. Each element is typically defined by a pair of opening and closing tags , with the content placed between them. Some elements, like images, may be self-closing, meaning they don’t require a closing tag. Here's an overview of HTML elements and their roles: 1. Basic Structure of an HTML Element An HTML element consists of: Opening tag : Indicates the start of the element, like <tagname> . Content : The content that the element contains (text, images, links, etc.). Closing tag : Indicates the end of the element, like </tagname> . For example: <p>This is a paragraph.</p> Here: <p> is the opening tag (for the paragraph element). This is a paragraph. is the content. </p> is the closing tag. 2. Common HTML Elements 1. Text Elements Headings : HTML provides six levels of headings. The <h1> tag is the most important, and <h6> is the least. <...
Read more

HTML Basic

  HTML Basics HTML (HyperText Markup Language) is the foundational language for creating web pages. It structures content by using a system of tags . Here are some key concepts and examples to help you understand the basics of HTML. 1. HTML Document Structure An HTML document has a specific structure that includes a doctype declaration , <html> tag, <head> , and <body> sections. Here's an example of a basic HTML structure: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My First Web Page</title> </head> <body> <h1>Welcome to My Website</h1> <p>This is a basic HTML page.</p> </body> </html> Explanation of Key Elements: <!DOCTYPE html> : Declares the document type (HTML5 in this case). <html> : The root el...
Read more