HTML BASICS
Welcome to HTML Learning
Your gateway to understanding the essentials of HTML!
What is an HTML Element?
In HTML, an element is a fundamental building block that defines the structure and content of a web page. Elements are represented by tags, such as <p> for paragraphs or <h1> for headings. Each element can have attributes that provide additional information or modify its behavior.
Web Browsers
Web browsers are applications that allow users to access and navigate the internet. Browsers interpret HTML documents and render them as visual web pages. Popular browsers include Google Chrome, Mozilla Firefox, Safari, and Microsoft Edge. Understanding how browsers interpret HTML is crucial for web developers to ensure cross-browser compatibility.
HTML Page Structure
HTML documents follow a hierarchical structure. The basic structure includes an opening <!DOCTYPE html> declaration, an <html> root element, a <head> section for metadata, and a <body> section for the page content. Within the body, various elements organize and present information, such as headings (<h1> to <h6>), paragraphs (<p>), lists, images, and more.
HTML History
HTML, which stands for HyperText Markup Language, has a rich history. Developed by Sir Tim Berners-Lee in 1991, HTML laid the foundation for the World Wide Web. Over the years, HTML has evolved through different versions, with HTML5 being the latest and most robust version. HTML5 introduces new features, multimedia support, and improved semantics, making it the standard for modern web development.
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.rankesplus.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.
Post a Comment