Skip to content

Latest commit

 

History

History
271 lines (233 loc) · 7.75 KB

html.md

File metadata and controls

271 lines (233 loc) · 7.75 KB
Raw

Beginner Level HTML Tutorial

Table of Contents

  1. Introduction to HTML
  2. Basic Structure
  3. Common HTML Elements
  4. Semantic HTML
  5. HTML5 Features
  6. HTML Best Practices
  7. Conclusion

Introduction to HTML

What is HTML?

  • HTML (HyperText Markup Language) is the standard language for creating web pages and web applications.
  • HTML describes the structure of a web page using markup.
  • HTML elements are represented by tags.

Why HTML?

  • HTML is the foundation of web development, used to structure content on the web.
  • It is easy to learn and widely supported across all web browsers.
  • Knowledge of HTML is essential for creating and designing websites.

Installing a Text Editor

Basic Structure

HTML Document Structure

  • An HTML document is made up of various elements that define its structure.
  • Example: 
    <!DOCTYPE html>
<html>
<head>
    <title>My First HTML Page</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is my first HTML page.</p>
</body>
</html>

Doctype Declaration

  • The <!DOCTYPE html> declaration defines the document type and version of HTML.
  • It should be the first line in an HTML document.

HTML Elements

  • HTML elements are defined by a start tag, some content, and an end tag.
  • Example: 
    <p>This is a paragraph.</p>

HTML Attributes

  • HTML elements can have attributes that provide additional information about the element.
  • Attributes are always included in the opening tag and usually come in name/value pairs like name="value".
  • Example: 
    <a href="https://www.example.com">This is a link</a>

Common HTML Elements

Headings

  • Headings are used to define headings of different levels in an HTML document.
  • There are six levels of headings, from <h1> to <h6>.
  • Example: 
    <h1>This is a heading 1</h1>
<h2>This is a heading 2</h2>

Paragraphs

  • The <p> element defines a paragraph.
  • Example: 
    <p>This is a paragraph.</p>

Links

  • The <a> element (anchor) is used to create hyperlinks.
  • Example: 
    <a href="https://www.example.com">Visit Example.com</a>

Images

  • The <img> element is used to embed images.
  • The src attribute specifies the path to the image.
  • Example: 
    <img src="image.jpg" alt="Description of image">

Lists

  • HTML supports ordered lists (<ol>), unordered lists (<ul>), and definition lists (<dl>).

Ordered List

  • Example: 
    <ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>

Unordered List

  • Example: 
    <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

Definition List

  • Example: 
    <dl>
    <dt>Term 1</dt>
    <dd>Definition of Term 1</dd>
    <dt>Term 2</dt>
    <dd>Definition of Term 2</dd>
</dl>

Tables

  • The <table> element is used to create tables.
  • Example: 
    <table>
    <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
    </tr>
    <tr>
        <td>Data 1</td>
        <td>Data 2</td>
    </tr>
</table>

Forms

  • Forms are used to collect user input.
  • Example: 
    <form action="/submit" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name"><br>
    <input type="submit" value="Submit">
</form>

Semantic HTML

Semantic Elements

  • Semantic elements clearly describe their meaning in a human- and machine-readable way.
  • Examples of semantic elements: 
    <header>Header content</header>
<nav>Navigation links</nav>
<section>Section content</section>
<article>Article content</article>
<footer>Footer content</footer>

HTML5 Features

Audio and Video

  • HTML5 introduced <audio> and <video> elements for media playback.

  • Audio example:

    <audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>

  • Video example:

    <video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

Canvas

  • The <canvas> element is used to draw graphics via scripting (usually JavaScript).
  • Example: 
    <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

Geolocation

  • The Geolocation API allows the user to provide their location to web applications.
  • Example: 
    <button onclick="getLocation()">Try It</button>
<p id="demo"></p>

<script>
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else {
        document.getElementById("demo").innerHTML = "Geolocation is not supported by this browser.";
    }
}

function showPosition(position) {
    document.getElementById("demo").innerHTML = "Latitude: " + position.coords.latitude +
    "<br>Longitude: " + position.coords.longitude;
}
</script>

Here is the link to some tutorials you can follow :

HTML Best Practices

Use Semantic Elements

  • Use semantic HTML elements to enhance the readability and accessibility of your web pages.

Keep Code Clean and Readable

  • Write clean, readable code with proper indentation and comments.

Optimize Images

  • Optimize images for faster loading times. Use appropriate file formats and sizes.

Validate HTML

  • Use HTML validators (like the W3C Markup Validation Service) to check your HTML for errors and ensure it adheres to standards.

Conclusion

This tutorial covered the basics of HTML, including document structure, common elements, forms, semantic HTML, and HTML5 features. HTML is a fundamental technology for web development, and understanding it is crucial for creating well-structured, accessible, and functional web pages. Keep practicing and exploring more advanced topics to enhance your HTML skills. Happy coding!