HTML Basic

HTML Basic Examples

HTML, or Hyper Text Markup Language, is the foundation of web development. Let's explore some fundamental concepts:

HTML Documents

An HTML document is a standard file with a .html extension. It consists of elements that define the structure and content of a web page.

Example:

<!DOCTYPE html>
<html>
  <head>
    <title>My First HTML Page</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is a simple HTML document.</p>
  </body>
</html>

Practice: Create a basic HTML document with a title, heading, and paragraph.

HTML Headings

Headings define the structure of your content. They range from <h1> (the largest) to <h6> (the smallest).

Example:

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>

Practice: Use different heading tags to organize your content.

HTML Paragraphs

Paragraphs are created with the <p> tag. They provide a way to structure and separate content.

Example:

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

Practice: Add paragraphs to your HTML document.

HTML Links

Links are created with the <a> (anchor) tag. They can point to other web pages, files, or locations within the same page.

Example:

<a href="https://www.example.com">Visit our website</a>

Practice: Add a link to an external website in your document.

HTML Images

Images are displayed with the <img> tag. Provide the image source using the src attribute.

Example:

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

Practice: Insert an image into your HTML document.

How to View HTML Source

Have you ever wondered how a web page was built? You can view the HTML source code in your browser.

To view HTML source:

  • Press CTRL + U in an HTML page.
  • Right-click on the page and select "View Page Source."

Inspect an HTML Element:

  • Right-click on an element and choose "Inspect" to see its HTML and CSS.
  • You can edit the HTML or CSS on-the-fly in the Elements or Styles panel.

Practice code

Continue your web development journey with HTML. It's an exciting learning experience!

© 2023 Your Website. All rights reserved.