π Introduction to HTML
HTML, or HyperText Markup Language, is the standard markup language for creating web pages. It provides the structure for content displayed in a web browser. Think of it as the skeleton upon which the visual aspects of a website are built with CSS (Cascading Style Sheets) and the interactive elements are powered by JavaScript.
π History and Background
HTML was created by Tim Berners-Lee while at CERN in 1990. He envisioned a way for researchers to easily share information over the internet. Over the years, HTML has evolved through various versions, with HTML5 being the current standard, offering enhanced multimedia support and improved semantic elements.
π Key Principles of HTML
- π·οΈ Markup Language: HTML uses tags to define elements within a document.
- 𧱠Structure: HTML provides the basic structure of webpages, organizing content into headings, paragraphs, lists, and more.
- π Hypertext: HTML enables linking between documents, creating a web of interconnected information.
- π Accessibility: Well-structured HTML is crucial for ensuring web content is accessible to all users, including those with disabilities.
𧱠Basic HTML Structure
Every HTML document follows a basic structure:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Explanation:
- π <!DOCTYPE html>: Declares the document type as HTML5.
- π <html>: The root element of an HTML page.
- π§ <head>: Contains meta-information about the HTML page (title, character set, etc.).
- πͺ§ <title>: Specifies a title for the HTML page (which is shown in the browser's title bar or tab).
- <body>: Defines the document's body, and is a container for all the visible content, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
- ποΈ <h1> to <h6>: Define HTML headings.
- π <p>: Defines an HTML paragraph.
π» Real-World Examples
Example 1: Simple Webpage
<!DOCTYPE html>
<html>
<head>
<title>My Simple Webpage</title>
</head>
<body>
<h1>Welcome!</h1>
<p>This is a basic HTML page.</p>
</body>
</html>
Example 2: Adding a Link
<!DOCTYPE html>
<html>
<head>
<title>Webpage with Link</title>
</head>
<body>
<h1>Visit eokultv!</h1>
<p>Click the link below:</p>
<a href="https://www.eokultv.com">eokultv</a>
</body>
</html>
π§° Common HTML Tags
- ποΈ <h1> to <h6>: Headings (different levels of importance).
- π <p>: Paragraph.
- π <a>: Hyperlink. The `href` attribute specifies the URL for the link.
- πΌοΈ <img>: Image. The `src` attribute specifies the path to the image.
- π <ul>: Unordered list.
- π’ <ol>: Ordered list.
- 𧱠<li>: List item.
- π <div>: Division or section. A generic container for flow content.
- 𧱠<span>: An inline container used to mark up a part of a text, or a part of a document.
- ποΈ <table>, <tr>, <td>: For creating tables.
π‘ Tips for Writing Good HTML
- βοΈ Use Semantic Tags: Use tags like <article>, <nav>, and <aside> to provide meaning to your content.
- π§ Keep Your Code Readable: Indent your code properly to improve readability.
- β
Validate Your HTML: Use a validator to check for errors in your HTML code.
- π± Think Mobile-First: Design your HTML structure with mobile devices in mind.
π§ͺ Practice Quiz
- β What does HTML stand for?
- β Which tag is used to create a hyperlink?
- β How do you create an ordered list in HTML?
- β What is the purpose of the <head> section in an HTML document?
- β Which tag is used to display an image?
π Conclusion
HTML is the cornerstone of web development. By understanding its key principles and common tags, you can start building your own web pages. Keep practicing and exploring new techniques to enhance your skills. Good luck!