HTML-Introduction
{{richtext}:HTML}
HTML- Introduction
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a simple example of an HTML document.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<meta name="description" content="A simple website.">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is some text.</p>
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="An image" data-lazy-src="image.jpg"><noscript><img decoding="async" src="image.jpg" alt="An image"></noscript>
<a href="http://www.example.com" target="_blank" rel="noopener">Link to example.com</a>
</body>
</html>
HTML, or Hypertext Markup Language, is the backbone of web development, serving as the standard markup language for creating and structuring content on the World Wide Web. It uses a system of tags to define different elements within a document, allowing browsers to interpret and display content in a user-friendly manner. In this introduction, we’ll explore key HTML concepts with examples to help you grasp the basics.
1. Document Structure:
Every HTML document starts with a declaration and contains a hierarchical structure. Here’s a minimal HTML document:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First HTML Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a simple HTML page.</p>
</body>
</html><!DOCTYPE html>: Declares the HTML5 document type.<html lang="en">: The root element, indicating the document’s language (English in this case).<head>: Contains metadata, like character set and viewport settings.<meta charset="UTF-8">: Specifies the character encoding.<meta name="viewport" content="width=device-width, initial-scale=1.0">: Ensures proper scaling on different devices.<title>: Sets the document title.<body>: Contains the visible content of the document.<h1>and<p>: Headings and paragraphs.2. Headings and Paragraphs:
HTML provides heading tags (
<h1>to<h6>) and paragraph tags (<p>) to structure text:- <h1>Main Heading</h1> <h2>Subheading</h2> <p>This is a paragraph of text. It can contain <strong>strong</strong> or <em>emphasized</em> text.</p>
<strong>: Represents strong importance, typically displayed as bold.<em>: Represents emphasized text, typically displayed as italic.
3. Lists:
HTML supports ordered (<ol>) and unordered (<ul>) lists, along with list items (<li>):
<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> <ol> <li>First</li> <li>Second</li> <li>Third</li> </ol>
4. Links:
Create hyperlinks using the <a> (anchor) tag:
<a href="https://www.example.com" target="_blank">Visit Example.com</a>href: Specifies the URL.target="_blank": Opens the link in a new tab or window.
5. Images:
Embed images using the <img> tag:
src: Specifies the image source.alt: Provides alternative text for accessibility.
6. Forms:
Forms are used for user input. Here’s a simple example:
<form action="/submit" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<br>
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<br>
<input type="submit" value="Submit">
</form>action: Specifies where the form data should be sent.method: Defines the HTTP method (e.g., “post” or “get”).
HTML, or Hypertext Markup Language, is the foundation of web development, providing a standardized way to structure and present content on the internet. It utilizes a system of tags to define elements within a document, such as headings, paragraphs, lists, links, and images. Each tag carries a specific purpose, contributing to the overall organization and visual layout of a webpage.
HTML documents begin with a declaration (<!DOCTYPE html>) followed by the root element (<html>), containing sections like <head> for metadata and <body> for visible content. Tags like <h1> to <h6> denote headings, while <p> signifies paragraphs. Lists are created with <ul> (unordered) and <ol> (ordered) paired with <li> for list items. Links are established with the <a> tag, and images are embedded using <img>.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.