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.