Web Development Essentials
Professional Tools:
- Text Editors (VS Code, Sublime Text)
- Browsers (Chrome, Firefox for testing)
- Version Control (Git/GitHub)
- Graphic Software (Figma, Photoshop)
HTML Evolution Timeline
1991: HTML first published
1999: HTML 4.01 standard
2000: XHTML 1.0
2012: HTML5 published
HTML5 Key Features:
- Simplified doctype: <!DOCTYPE html>
- Built-in multimedia (<audio>, <video>)
- Semantic elements (<header>, <footer>)
- Canvas API for drawing
- Improved form controls
HTML5 Semantic Elements
<header> <nav> <section> <article>
<aside> <footer> <figure> <figcaption>
Example Usage:
<article>
<header>
<h1>Article Title</h1>
</header>
<p>Article content...</p>
<footer>
<p>Posted by: Author</p>
</footer>
</article>
Text Formatting Elements
Basic Text Controls:
- <b> Bold vs <strong> Strong importance
- <i> Italic vs <em> Emphasized
- <mark> Highlighted text
- <del> Deleted text
- <sup> Superscripttext
- <sub> Subscripttext
Special Characters:
- Non-breaking space
< - Less than (<)
> - Greater than (>)
© - Copyright symbol (©)
HTML Document Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Page Title</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Main Heading</h1>
<p>Paragraph content.</p>
</body>
</html>
Key Concepts:
1. Elements: Building blocks of HTML (<p>content</p>)
2. Attributes: Modify elements (<img src="image.jpg">)
3. Nesting: Proper element hierarchy
4. Semantics: Meaningful element selection