-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathhtml5.html
130 lines (117 loc) · 5.71 KB
/
html5.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Complete HTML5 and CSS Course</title>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/layout.css">
<link rel="stylesheet" href="css/responsive.css">
<link rel="stylesheet" href="css/form.css">
<link rel="stylesheet" href="css/motion-blur.css">
<link rel="stylesheet" href="css/back-to-top.css">
<link rel="stylesheet" href="css/hover.css">
</head>
<body>
<script src="js/hover.js async"></script> <!-- Use async for scripts that operate independently of the DOM or other scripts. -->
<script src="js/clickme.js" defer></script> <!-- Use defer for scripts that need to interact with the DOM or rely on the entire HTML being parsed. -->
<header id="top" class="main-header">
<h1>Welcome to My Complete HTML5 and CSS Course</h1>
<p>Learn everything from basic HTML to advanced CSS with practical examples.</p>
</header>
<nav class="main-nav">
<ul>
<li><a href="#lesson1">Lesson 1</a></li>
<li><a href="#lesson2">Lesson 2</a></li>
<li><a href="#lesson3">Lesson 3</a></li>
<li><a href="#lesson4">Lesson 4</a></li>
<li><a href="#lesson5">Lesson 5</a></li>
<li><a href="#lesson6">Lesson 6</a></li>
<li><a href="#lesson7">Lesson 7</a></li>
</ul>
</nav>
<section id="lesson1">
<h2>Lesson 1: HTML5 Semantic Elements</h2>
<p>Introduction to semantic markup including <header>, <footer>, and <article>.</p>
<pre><code><header>Header Content</header>\n<footer>Footer Content</footer></code></pre>
<button onclick="displayMessage('I am the Baroness!!!')">Welcome Message</button>
<a href="#top">Back to Top</a>
</section>
<section id="lesson2">
<h2>Lesson 2: HTML5 Form Enhancements</h2>
<p>Exploring new form capabilities in HTML5 such as new input types email and date.</p>
<pre><code><input type="email" placeholder="Enter your email">\n<input type="date"></code></pre>
<div>
<form class="styled-form">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<button type="submit" class="button-blur">Submit</button> <!-- Applied motion blur class -->
</form>
</div>
<a href="#top" id="back-to-top">Back to Top</a> <!--Applied Back-to-top class-->
</section>
<section id="lesson3">
<h2>Lesson 3: Multimedia Handling in HTML5</h2>
<p>Embedding video and audio in web pages using HTML5's multimedia elements.</p>
<pre><code><video src="video.mp4" controls></video>\n<audio src="audio.mp3" controls></audio></code></pre>
<input type="text" onkeydown="alert('Key pressed!')" placeholder="Press any key..."> <!---->
<a href="#top">Back to Top</a>
</section>
<section id="lesson4">
<h2>Lesson 4: Advanced Event Handling</h2>
<p>Detailed JavaScript integration for handling user interactions with HTML5.</p>
<button onclick="displayMessage('Hello World!')">Click me!</button>
<a href="#top">Back to Top</a>
</section>
<section id="lesson5">
<h2>Lesson 5: Custom Multimedia Controls</h2>
<p>Creating and styling custom controls for multimedia content to enhance interactivity and user experience.</p>
<video id="myVideo" controls aria-label="Educational Video">
<source src="media/AZNFARMER.mp4" type="video/mp4">
<track kind="captions" src="captions_en.vtt" srclang="en" label="English captions">
Your browser does not support the video tag.
</video>
<button onclick="document.getElementById('myVideo').play()">Play</button>
<button onclick="document.getElementById('myVideo').pause()">Pause</button>
<a href="#top">Back to Top</a>
</section>
<section id="lesson6">
<h2>Lesson 6: HTML5 Advanced Event Handling</h2>
<p>Applying CSS to HTML structures to improve layout, design responsiveness, and interactivity.</p>
<pre><code>.container {
display: flex;
justify-content: space-around;
}\n.nav-item {
padding: 10px;
background-color: #eee;
}</code></pre>
<a href="#top">Back to Top</a>
</section>
<section id="lesson7">
<h2>Lesson 7: Integrating CSS with HTML5</h2>
<p>Applying CSS to HTML structures to improve layout, design responsiveness, and interactivity.</p>
<pre><code>.container {
display: flex;
justify-content: space-around;
}\n.nav-item {
padding: 10px;
background-color: #eee;
}</code></pre>
<div class="hover-box" onmouseover="changeColor(this, 'yellow')" onmouseout="changeColor(this, 'white')"> <!-- hover.css interaction -->
Hover over me!
</div>
<a href="#top" id="back-to-top" aria-label="Back to top of the page">Back to Top</a> <!-- adding accessibility-->
</section>
<aside>
<h2>Additional Resources</h2>
<p>Check out more resources to deepen your understanding of HTML5 and CSS.</p>
</aside>
<footer>
<p>Copyright © 2024 All rights reserved.</p>
</footer>
</body>
</html>