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 element of an HTML document.
  • <head>: Contains meta-information, such as the title and character set.
  • <body>: Contains the visible content of the webpage, like text, images, and links.

2. HTML Tags

HTML uses tags to define elements. Tags are written in angle brackets, such as <tagname>. Tags can be paired (open and close tags) or self-closing.

Common Tags:

  • <h1> to <h6>: Headings, with <h1> being the largest and most important, and <h6> being the smallest.
  • <p>: Defines a paragraph.
  • <a href="url">: Creates a hyperlink.
  • <img src="image.jpg" alt="Description">: Embeds an image.
  • <ul>: Defines an unordered (bulleted) list.
  • <ol>: Defines an ordered (numbered) list.
  • <li>: Defines a list item.
  • <div>: A container for grouping content (often used for layout purposes).
  • <span>: A container for inline content.

3. Basic HTML Example

Here’s a simple webpage example that includes text, a link, and an image:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Simple Web Page</title>
</head>
<body>
    <h1>Welcome to My Web Page</h1>
    <p>This is a simple webpage built using HTML.</p>
    
    <h2>About Me</h2>
    <p>My name is John Doe, and I love coding!</p>
    
    <h3>My Favorite Websites:</h3>
    <ul>
        <li><a href="https://www.example.com">Example Website</a></li>
        <li><a href="https://www.anotherexample.com">Another Example</a></li>
    </ul>
    
    <h3>Check out this image:</h3>
    <img src="image.jpg" alt="A beautiful scenery">
</body>
</html>

Explanation:

  • <h1>, <h2>, <h3>: Define headings of various sizes.
  • <p>: Defines paragraphs.
  • <ul>: Creates an unordered list.
  • <li>: Creates a list item.
  • <a href="...">: Defines a clickable link.
  • <img src="...">: Displays an image (you need to replace "image.jpg" with the actual image file).

4. HTML Attributes

Attributes provide additional information about an HTML element. They are placed within the opening tag and consist of a name and a value (e.g., src="image.jpg", href="https://example.com").

Examples of Common Attributes:

  • href: Specifies the destination of a link (<a> tag).
  • src: Specifies the source of an image (<img> tag).
  • alt: Provides alternative text for an image if it cannot be displayed (<img> tag).
  • style: Used for inline CSS to style an element.
  • id: Assigns a unique identifier to an element.

Example with attributes:

<a href="https://www.example.com" target="_blank">Visit Example Website</a>
<img src="logo.png" alt="Website Logo" width="100" height="100">
  • The <a> tag uses the href attribute to link to a URL and the target="_blank" attribute to open the link in a new tab.
  • The <img> tag uses the src attribute to specify the image file, alt for alternative text, and width and height to define the size.

5. Formatting Text

HTML provides tags to format text, like making it bold, italic, or underlined.

Examples:

  • Bold: <b> or <strong>
  • Italic: <i> or <em>
  • Underlined: <u>
  • Line Break: <br>
  • Horizontal Rule: <hr>

Example:

<p>This is <b>bold</b> text and this is <i>italic</i> text.</p>
<p>This is <u>underlined</u> text.</p>
<p>Here is a line break:<br>Next line.</p>
<hr>

Conclusion:

HTML is the foundation of web development. By understanding the basic structure, tags, and attributes, you can create simple webpages. As you get more comfortable, you can combine HTML with CSS (for styling) and JavaScript (for interactivity) to build more complex websites.

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 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: Elements : The fundamental building blocks of HTML, represented by tags like <html> , <head> , <body> , etc. Tags : Tags define elements. They usually come in pairs, with an opening tag and a closing tag, like <p> (opening) and </p> (closing). 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. Document Structure : <!DOCTYPE html> : Declares the document type and version of HTML. <html> : The root eleme...
Read more