Join our Telegram group to get instant answers to all your questions, stay updated with the latest posts, and receive regular updates: Join Now!.

Basic Knowledge About HTML (HyperText Markup Language)

Learn the basics of HTML, the standard language for creating web pages. Understand structure, elements, attributes, and more with simple examples.

HTML (HyperText Markup Language) is the standard language used to create web pages. It's the foundation of all websites and is used to structure content. Let's go over the basics:

Basic Knowledge About HTML (HyperText Markup Language)

HTML Structure

An HTML document has a basic structure with several key parts:

  1. <!DOCTYPE html>: This tells the browser what type of document it is.
  2. <html>: This is the root element that contains all other HTML elements.
  3. <head>: This section contains meta-information about the document, like the title and links to scripts and stylesheets.
  4. <title>: This sets the title of the page, which appears in the browser tab.
  5. <body>: This is where all the content of the page goes.

Basic HTML Elements

Here are some fundamental HTML elements you'll use:

Headings: Use <h1> to <h6> for headings, with <h1> being the most important and <h6> the least.

<h1>This is a heading</h1>
<h2>This is a subheading</h2>

Paragraphs: Use the <p> tag for paragraphs.

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

Links: Use the <a> tag to create links.

<a href="https://www.example.com">This is a link</a>

Images: Use the <img> tag to add images. You need the src attribute for the image path and the alt attribute for alternative text.

<img src="image.jpg" alt="Description of image">

Lists: Use <ol> for ordered lists and <ul> for unordered lists, with list items inside <li> tags.

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

Tables: Use the <table> tag for tables, <tr> for rows, <th> for headers, and <td> for data cells.

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

Attributes

HTML elements can have attributes to provide more information about them. Attributes are added in the opening tag and usually come in name/value pairs like name="value".

Common attributes:

  • id: Gives an element a unique id.
  • class: Assigns one or more class names to an element.
  • style: Adds inline CSS styles to an element.
  • src: Specifies the source of an image or script.
  • href: Specifies the URL of a link.

Example of a Simple HTML Document

Here's what a simple HTML page looks like:

<!DOCTYPE html>
<html>
<head>
  <title>My First HTML Page</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>Welcome to my first HTML page.</p>
  <a href="https://www.example.com">Visit Example.com</a>
  <img src="image.jpg" alt="A beautiful scenery">
  <ul>
    <li>First item</li>
    <li>Second item</li>
  </ul>
</body>
</html>

Advanced HTML Elements

Forms are used to collect user input. Here's a basic form with input fields for text, email, and a submit button:

<form action="/submit_form" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name"><br><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="Submit">
</form>

Multimedia Elements

HTML5 introduced elements for handling multimedia:

Audio: Embed audio files using the <audio> tag.

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

Video: Embed video files using the <video> tag.

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

Semantic HTML

Semantic elements provide meaning to the content they enclose, making it easier to understand for both developers and search engines:

  • <header>: Defines a header for a document or section.
  • <nav>: Defines a set of navigation links.
  • <main>: Specifies the main content of a document.
  • <section>: Defines a section in a document.
  • <article>: Defines an independent piece of content.
  • <aside>: Defines content aside from the main content.
  • <footer>: Defines a footer for a document or section.

Here's an example using some of these semantic elements:

<!DOCTYPE html>
<html>
<head>
  <title>Semantic HTML Example</title>
</head>
<body>
  <header>
    <h1>My Website</h1>
    <nav>
      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <section id="home">
      <h2>Home</h2>
      <p>Welcome to my website!</p>
    </section>
    <section id="about">
      <h2>About</h2>
      <p>This is a little bit about me.</p>
    </section>
    <section id="contact">
      <h2>Contact</h2>
      <p>Here’s how you can get in touch with me.</p>
    </section>
  </main>
  <aside>
    <h2>Related Links</h2>
    <ul>
      <li><a href="#link1">Link 1</a></li>
      <li><a href="#link2">Link 2</a></li>
    </ul>
  </aside>
  <footer>
    <p>© 2024 My Website</p>
  </footer>
</body>
</html>

Inline vs. Block Elements

HTML elements are either inline or block-level:

Inline Elements: Do not start on a new line and only take up as much width as necessary. Examples include <a>, <img>, <span>, <strong>, and <em>.

<p>This is an <a href="#">inline link</a>.</p>

Block Elements: Start on a new line and take up the full width available. Examples include <div>, <h1> to <h6>, <p>, <ul>, <ol>, <li>, and <table>.

<div>
  <h1>Block Element</h1>
  <p>This is a block paragraph.</p>
</div>

HTML Entities

HTML entities are used to display reserved characters or characters that are not available on the keyboard:

  • &lt;: <
  • &gt;: >
  • &amp;: &
  • &quot;: "
  • &apos;: '

For example:

<p>Use &lt; and &gt; to display less than and greater than signs.</p>

Responsive Design

Responsive design ensures that your web pages look good on all devices. Use the tag for viewport settings and CSS media queries:

<!DOCTYPE html>
<html>
<head>
  <title>Responsive Design</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      font-family: Arial, sans-serif;
    }
    .container {
      width: 100%;
      padding: 20px;
      box-sizing: border-box;
    }
    @media (min-width: 600px) {
      .container {
        width: 80%;
        margin: 0 auto;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Responsive Design Example</h1>
    <p>This container adjusts its width based on the viewport size.</p>
  </div>
</body>
</html>

Additional Topics

As you get more comfortable with HTML, you can explore more advanced topics like forms, multimedia elements (like video and audio), semantic HTML (elements that add meaning to the content), and HTML5 features.

Conclusion

HTML is a versatile and powerful language that forms the backbone of web development. By mastering HTML, you'll be well-equipped to create structured, semantic, and responsive web pages.

If you have any specific questions or need more detailed information, feel free to ask!

Success isn't an endpoint, nor is failure a definitive outcome. It's the bravery to persist that truly matters in the journey of life.

You may like these posts

Post a Comment

Enter Image URL / Code Snippets / Quotes / name tag, then click parse button accordingly that you have entered. then copy the parse result and paste it into the comment field.


Cookie Consent

We use cookies on our website to analyze traffic, enhance your browsing experience, and remember your preferences. By continuing to use our site, you consent to our use of cookies. You can manage your cookie preferences in your browser settings. For more information, please read our Privacy Policy.

Google Translate
Bookmark Post