Continuity to HTML
Coding is a journey from rookie to master!
Lesson #1
HTML Editors
To write HTML, you need an editor. Popular choices include Visual Studio Code, Sublime Text, and even the built-in editors in browsers like Edge or Chrome's DevTools.
<p>This is a paragraph in Visual Studio Code.</p>HTML Basic
HTML uses elements enclosed in angle brackets (< >). Every webpage starts with the <!DOCTYPE html> declaration to ensure proper rendering in modern browsers.
<!DOCTYPE html>
<html>
<head>
<title>HTML Basics</title>
</head>
<body>
<p>This is a basic HTML structure.</p>
</body>
</html>HTML Elements
Elements consist of a start tag, content, and an end tag, such as <p>This is a paragraph.</p>.
<h1>My Title</h1>
<p>This is a paragraph.</p>HTML Attributes
Attributes provide additional information about an element, like id, class, src, and alt. They make your content more interactive and functional.
<img src="image.jpg" alt="Sample Image" width="300" height="200">HTML Headings
HTML offers six levels of headings, <h1> being the most important, down to <h6>. Use headings to structure content hierarchically.
<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Another Subheading</h3>HTML Paragraphs
Paragraphs are defined with the <p> tag and are used to display blocks of text.
<p>This is a paragraph of text on a webpage.</p>HTML Styles
You can style HTML elements using CSS. Inline styles are applied directly to elements, but external or internal CSS is recommended for better control.
<p style="color:blue;">This paragraph is blue.</p>HTML Formatting
Formatting tags like <strong>, <em>, <b>, and <i> help emphasize content. Modern usage favors <strong> and <em> for better semantic meaning.
<p>This is <strong>bold</strong> and <em>italicized</em> text.</p>HTML Quotations
Use <blockquote> for longer quotations and <q> for inline quotes.
<blockquote>
"This is a block quote from a famous person."
</blockquote>
<p>He said, <q>This is an inline quote.</q></p>HTML Comments
HTML comments, written as <!-- Comment -->, allow you to leave notes in the code without affecting the page.
<!-- This is a comment and will not appear on the page -->HTML Colors
HTML supports named colors (like red), hex codes (like #ff0000), RGB, HSL, and even the modern CSS currentColor for dynamic theming.
<p style="color:#ff0000;">This text is red.</p>HTML CSS
CSS (Cascading Style Sheets) is used for styling HTML. Link an external stylesheet using the <link> tag or use <style> within the HTML file.
<head>
<link rel="stylesheet" href="styles.css">
</head>HTML Links
Create hyperlinks using the <a> tag. The href attribute specifies the link destination, and you can also use target attributes like _blank to open links in a new tab.
<a href="https://www.example.com" target="_blank">Visit Example</a>HTML Images
Images are added using the <img> tag, with the src attribute pointing to the image source and alt for accessibility.
<img src="image.jpg" alt="Description of image">HTML Favicon
Favicons are small icons that appear next to the page title in the browser. Add one using the <link rel="icon"> tag.
<link rel="icon" href="favicon.ico" type="image/x-icon">HTML Page Title
The title of the page is set in the <title> tag, and it appears in the browser tab and search engine results.
<title>My HTML Page</title>HTML Tables
Tables are created using the <table>, <tr>, <th>, and <td> tags to organize data in rows and columns.
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>30</td>
</tr>
</table>HTML Lists
HTML supports ordered (<ol>) and unordered (<ul>) lists, with list items inside <li> tags.
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>HTML Block & Inline
Block elements take up the full width (like <div>) while inline elements only take up the space they need (like <span>).
<div>This is a block element</div>
<span>This is an inline element</span>HTML Div
The <div> tag is a versatile block element used to group content and apply styles or JavaScript functions.
<div class="container">
<p>This is inside a div.</p>
</div>HTML Classes
Classes are used to style or manipulate multiple elements with the same class name.
<div class="example">This is styled with a class.</div>HTML Id
The id attribute uniquely identifies an element, making it useful for styling or scripting.
<div id="uniqueElement">This has a unique id.</div>HTML Iframes
An <iframe> allows you to embed another HTML page within the current page.
<iframe src="https://www.example.com" width="300" height="200"></iframe>HTML JavaScript
JavaScript can be embedded in HTML using the <script> tag, enabling dynamic and interactive functionality.
<script>
alert("Hello, World!");
</script>HTML File Paths
File paths are used to link external files such as images or scripts.
<img src="images/logo.png" alt="Logo">HTML Head
The <head> section contains metadata like the title, character set, and links to stylesheets or scripts.
<head>
<title>My Webpage</title>
<meta charset="UTF-8">
</head>HTML Layout
HTML5 introduced new layout elements like <header>, <footer>, <section>, and <article> to make page structure more meaningful.
<header>
<h1>Welcome to My Site</h1>
</header>HTML Responsive
Responsive design is critical in 2024. Use the <meta name="viewport" content="width=device-width, initial-scale=1"> tag and responsive CSS to ensure your site looks great on all devices.
<meta name="viewport" content="width=device-width, initial-scale=1">HTML Computercode
Use tags like <code>, <pre>, and <kbd> to display code snippets or keyboard input on a webpage.
<code>let x = 5;</code>HTML Semantics
Semantic HTML tags, such as <header>, <article>, and <aside>, make your pages more meaningful and accessible.
<article>
<h2>Article Title</h2>
<p>This is an article.</p>
</article>HTML Style Guide
Follow a consistent style guide when writing HTML for cleaner, more maintainable code.
<!-- Use semantic tags for better structure -->
<section>
<h2>Section Title</h2>
<p>This is a section.</p>
</section>
``