Skip to content

HTML.md

Latest commit

 

History

History
282 lines (190 loc) · 5.1 KB

HTML.md

File metadata and controls

282 lines (190 loc) · 5.1 KB

Alt Text

HTML Tutorial

HTML (HyperText Markup Language) is the standard language for creating web pages. It provides the structure of a webpage, allowing you to format text, embed media, and create links.


Table of Contents


Overview

HTML is the backbone of all websites. It is used to define the structure and layout of a webpage, ensuring that content is organized and displayed properly in web browsers.


HTML Basics

HTML Structure

Every HTML document has a basic structure consisting of elements enclosed in tags:

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <h1>Welcome to HTML</h1>
    <p>This is a paragraph.</p>
</body>
</html>
  • <!DOCTYPE html>: Declares the document type.
  • <html>: Root element of the HTML document.
  • <head>: Contains metadata and links to external resources.
  • <body>: Contains the content displayed on the webpage.

Common HTML Tags

  • <h1> to <h6>: Headings.
  • <p>: Paragraphs.
  • <a>: Links.
  • <img>: Images.
  • <ul> / <ol>: Lists.
  • <table>: Tables.

Formatting Text in HTML

Headings

Headings define the structure of your webpage and range from <h1> (largest) to <h6> (smallest):

<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Smaller Subheading</h3>

Paragraphs and Line Breaks

  • Paragraphs:

    <p>This is a paragraph.</p>

  • Line Breaks:

    This is a line.<br>This is another line.

Text Styling

  • Bold: <strong> or <b>

    <strong>Important Text</strong>

  • Italic: <em> or <i>

    <em>Emphasized Text</em>

  • Underline: <u>

    <u>Underlined Text</u>

Links and Images

Hyperlinks

Create clickable links using the <a> tag:

<a href="https://www.example.com">Visit Example</a>
  • href: Specifies the URL of the link.

Images

Embed images using the <img> tag:

<img src="image.jpg" alt="Description of Image">
  • src: Path to the image file.
  • alt: Alternative text for the image.

Lists in HTML

Ordered Lists

Use <ol> for numbered lists:

<ol>
    <li>First item</li>
    <li>Second item</li>
</ol>

Unordered Lists

Use <ul> for bullet-point lists:

<ul>
    <li>Item one</li>
    <li>Item two</li>
</ul>

Tables in HTML

Basic Table Structure

Create tables using the <table> tag:

<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Data 1</td>
        <td>Data 2</td>
    </tr>
</table>
  • <tr>: Table row.
  • <th>: Table header.
  • <td>: Table data.

Forms in HTML

Input Elements

Forms collect user input using <form> and various input elements:

<form action="submit.php" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    <input type="submit" value="Submit">
</form>
  • action: URL to send the form data to.
  • method: HTTP method (GET or POST).

Form Attributes

  • placeholder: Text displayed inside an input field before input.
  • required: Ensures the field must be filled before submission.

Resources


Contribution

Your contributions can improve this guide:

  • Fork the repository.

  • Create a new branch:

    git checkout -b improve-mysql-guide

  • Make your updates.

  • Commit your changes:

    git commit -am 'Enhanced MySQL tutorial'

  • Push to the branch:

    git push origin improve-mysql-guide

  • Create a Pull Request targeting the Notes directory.


Date of Latest Revision

  • 12/10/2024

License

  • This guide is provided as-is without warranties. Use it responsibly and ensure you comply with legal and ethical guidelines.

  • This project is licensed under the MIT License. See the LICENSE file for details.