Skip to content

Commit c6fba7c

Browse files
TulyXPlatformTulyXPlatform
committed
This commit creates the HTML and CSS files for the project, includes a header with sidemenu, a footer and all necessary examples of HTML and CSS tags and attributes.
0 parents  commit c6fba7c

35 files changed

Lines changed: 4411 additions & 0 deletions

‎HTML-CSS fav icon.jpg‎

13.5 KB
Loading

‎audio.mp3‎

35.8 KB
Binary file not shown.

‎audio.ogg‎

25.8 KB
Binary file not shown.

‎bg.jpg‎

11.9 KB
Loading

‎book.jpg‎

82.9 KB
Loading

‎chapter1.html‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Chapter 1: GETTING TO KNOW HTML</title>
7+
<link rel="stylesheet" href="style.css">
8+
9+
</head>
10+
<body>
11+
<h2 class="chapter-header">Chapter 1: GETTING TO KNOW HTML</h2>
12+
13+
<div class="tag-section">
14+
<h3>&lt;Tag&gt; </h3>
15+
<p class="tag-description">An HTML element typically has three portions<br>1. Opening tag, <br>2. Content <br>3. Closing tag</p>
16+
17+
</div>
18+
<div class="tag-section">
19+
<h3>&lt;!DOCTYPE&gt; Declaration</h3>
20+
<p class="tag-description">The &lt;!DOCTYPE&gt; declaration defines the document type and version of HTML.</p><p>This tells the browser that this is an HTML5 document.</p>
21+
<div class="tag-demo">
22+
<div class="head-demo">
23+
<p>&lt;!DOCTYPE html&gt;</p>
24+
25+
</div>
26+
</div>
27+
</div>
28+
<div class="tag-section">
29+
<h3>&lt;html&gt; Tag</h3>
30+
<p class="tag-description">The &lt;html&gt; tag represents the root of an HTML document. It is the container for all other HTML elements.</p>
31+
<div class="tag-demo">
32+
<div class="head-demo">
33+
<p> &lt;html&gt;&lt;/html&gt; </p>
34+
</div>
35+
</div>
36+
</div>
37+
38+
<div class="tag-section">
39+
<h3>&lt;head&gt; Tag</h3>
40+
<p class="tag-description">The &lt;head&gt; tag contains meta-information about the HTML document, such as its title, scripts, and styles.</p>
41+
<div class="tag-demo">
42+
<div class="head-demo">
43+
<p> &lt;head&gt;&lt;/head&gt; </p>
44+
</div>
45+
</div>
46+
</div>
47+
48+
<div class="tag-section">
49+
<h3>&lt;body&gt; Tag</h3>
50+
<p class="tag-description">The &lt;body&gt; tag contains the visible content of the HTML document.All the content you're reading right now is inside the &lt;body&gt; tag.</p>
51+
<div class="tag-demo">
52+
<div class="head-demo">
53+
<p>&lt;body&gt;&lt;/body&gt;</p>
54+
</div>
55+
</div>
56+
</div>
57+
58+
59+
60+
<div class="tag-section">
61+
<h3>&lt;title&gt; Tag</h3>
62+
<p class="tag-description">The &lt;title&gt; tag defines the title of the document, shown in the browser's title bar or tab.The browser tab has the title of this page: "Chapter 1: Basic HTML Structure".</p>
63+
<div class="tag-demo">
64+
<div class="head-demo">
65+
<p>&lt;title&gt;&lt;/title&gt;</p>
66+
</div>
67+
</div>
68+
</div>
69+
70+
<div class="tag-section">
71+
<h3>&lt;meta&gt; Tag</h3>
72+
<p class="tag-description">The &lt;meta&gt; tag provides metadata about the HTML document, such as character set, viewport settings, and descriptions.This page uses &lt;meta charset="UTF-8"&gt; to specify character encoding and &lt;meta name="viewport"&gt; for responsive design.</p>
73+
<div class="tag-demo">
74+
<div class="head-demo">
75+
<p>&lt;meta charset="UTF-8"/&gt;</p>
76+
</div>
77+
</div>
78+
</div>
79+
80+
<div class="tag-section">
81+
<h3>&lt;style&gt; Tag</h3>
82+
<p class="tag-description">The &lt;style&gt; tag is used to define CSS styles for the HTML document. We can use inline, internal and external css.</p>
83+
<div class="tag-demo">
84+
<div class="head-demo">
85+
<p>For inline css: "style" Attribute</p>
86+
<p> For internal css: &lt;style&gt; &lt;style&gt;</p>
87+
<p>For external css: &lt;link rel="stylesheet" href="style.css"&gt; </p>
88+
</div>
89+
</div>
90+
</div>
91+
</body>
92+
</html>

‎chapter10.html‎

Lines changed: 189 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,189 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Chapter 10: HTML APIs</title>
7+
<link rel="stylesheet" href="style.css">
8+
<style>
9+
/* Drag & Drop Styles */
10+
#div1 {
11+
width: 150px;
12+
height: 50px;
13+
background: #c0f0c0;
14+
text-align: center;
15+
line-height: 50px;
16+
margin-bottom: 10px;
17+
cursor: grab;
18+
}
19+
20+
#div2 {
21+
width: 200px;
22+
height: 60px;
23+
border: 1px solid #000;
24+
text-align: center;
25+
line-height: 60px;
26+
margin-top: 10px;
27+
}
28+
29+
/* Buttons spacing */
30+
.tag-demo button {
31+
margin: 5px 5px 5px 0;
32+
}
33+
34+
/* Worker output styling */
35+
#worker-result {
36+
font-weight: bold;
37+
margin-left: 10px;
38+
}
39+
</style>
40+
</head>
41+
<body>
42+
43+
<h2 class="chapter-header">Chapter 10: HTML APIs</h2>
44+
45+
<!-- Drag and Drop -->
46+
<div class="tag-section">
47+
<h3>Drag and Drop</h3>
48+
<div class="tag-demo">
49+
<div class="head-demo">
50+
<h5>Draggable Div</h5>
51+
<div id="div1" draggable="true">Drag me</div>
52+
<div id="div2">Drop here</div>
53+
<script>
54+
const draggable = document.getElementById("div1");
55+
const dropzone = document.getElementById("div2");
56+
57+
draggable.addEventListener("dragstart", (ev) => {
58+
ev.dataTransfer.setData("text", ev.target.id);
59+
});
60+
61+
dropzone.addEventListener("dragover", (ev) => {
62+
ev.preventDefault();
63+
});
64+
65+
dropzone.addEventListener("drop", (ev) => {
66+
ev.preventDefault();
67+
const data = ev.dataTransfer.getData("text");
68+
const draggedEl = document.getElementById(data);
69+
draggedEl.style.display = "none"; // hide after drop
70+
dropzone.textContent = "Dropped!";
71+
});
72+
</script>
73+
</div>
74+
</div>
75+
</div>
76+
77+
<!-- Geolocation -->
78+
<div class="tag-section">
79+
<h3>Geolocation</h3>
80+
<div class="tag-demo">
81+
<div class="head-demo">
82+
<h5>Get User Coordinates</h5>
83+
<button onclick="getLocation()">Get Location</button>
84+
<p id="geo-out"></p>
85+
<script>
86+
function getLocation() {
87+
const x = document.getElementById("geo-out");
88+
if (navigator.geolocation) {
89+
navigator.geolocation.getCurrentPosition(function(position){
90+
x.innerHTML = "Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude;
91+
}, function(){
92+
x.innerHTML = "Unable to retrieve location.";
93+
});
94+
} else {
95+
x.innerHTML = "Geolocation not supported";
96+
}
97+
}
98+
</script>
99+
</div>
100+
</div>
101+
</div>
102+
103+
<!-- Web Storage -->
104+
<div class="tag-section">
105+
<h3>Web Storage</h3>
106+
<div class="tag-demo">
107+
<div class="head-demo">
108+
<h5>Local Storage Example</h5>
109+
<input type="text" id="name-local" placeholder="Enter name"/>
110+
<button onclick="setLocal()">Set Local Storage</button>
111+
<button onclick="getLocal()">Get Local Storage</button>
112+
<script>
113+
function setLocal() {
114+
localStorage.myName = document.getElementById('name-local').value;
115+
}
116+
function getLocal() {
117+
alert(localStorage.myName || "No value stored");
118+
}
119+
</script>
120+
121+
<h5>Session Storage Example</h5>
122+
<input type="text" id="name-session" placeholder="Enter name"/>
123+
<button onclick="setSession()">Set Session Storage</button>
124+
<button onclick="getSession()">Get Session Storage</button>
125+
<script>
126+
function setSession() {
127+
sessionStorage.myName = document.getElementById('name-session').value;
128+
}
129+
function getSession() {
130+
alert(sessionStorage.myName || "No value stored");
131+
}
132+
</script>
133+
</div>
134+
</div>
135+
</div>
136+
137+
<!-- Web Workers -->
138+
<div class="tag-section">
139+
<h3>Web Workers</h3>
140+
<div class="tag-demo">
141+
<div class="head-demo">
142+
<h5>Web Worker Counter</h5>
143+
<p>Count numbers: <output id="worker-result">0</output></p>
144+
<button onclick="startWorker()">Start Worker</button>
145+
<button onclick="stopWorker()">Stop Worker</button>
146+
<script>
147+
let w;
148+
149+
function startWorker() {
150+
if (typeof Worker !== "undefined") {
151+
if (typeof w === "undefined") {
152+
const workerCode = `
153+
let counter = 0;
154+
const interval = setInterval(() => {
155+
counter++;
156+
postMessage(counter);
157+
}, 1000);
158+
onmessage = function(event) {
159+
if (event.data === 'stop') {
160+
clearInterval(interval);
161+
close();
162+
}
163+
};
164+
`;
165+
const blob = new Blob([workerCode], { type: "application/javascript" });
166+
const blobURL = URL.createObjectURL(blob);
167+
w = new Worker(blobURL);
168+
}
169+
w.onmessage = function(event) {
170+
document.getElementById('worker-result').textContent = event.data;
171+
};
172+
} else {
173+
alert("Web Workers not supported");
174+
}
175+
}
176+
177+
function stopWorker() {
178+
if (w) {
179+
w.terminate();
180+
w = undefined;
181+
}
182+
}
183+
</script>
184+
</div>
185+
</div>
186+
</div>
187+
188+
</body>
189+
</html>

‎chapter11.html‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Chapter 11: Getting to Know CSS</title>
6+
<link rel="stylesheet" href="style.css">
7+
<style>
8+
.demo-box { width:120px; height:50px; margin:5px; display:inline-block; }
9+
</style>
10+
</head>
11+
<body>
12+
<h2 class="chapter-header" id="heading">Chapter 11: GETTING TO KNOW CSS</h2>
13+
14+
<div class="tag-section">
15+
<h3>CSS Syntax</h3>
16+
<div class="tag-demo">
17+
<p style="color:red; font-size:20px;">This is styled with inline CSS.</p>
18+
</div>
19+
</div>
20+
21+
<div class="tag-section">
22+
<h3>Comments</h3>
23+
<div class="tag-demo">
24+
<p>Open the source code to see <code>/* CSS Comment */</code>.</p>
25+
</div>
26+
</div>
27+
28+
<div class="tag-section">
29+
<h3>Units</h3>
30+
<div class="tag-demo">
31+
<div class="demo-box" style="background:lightblue; width:5cm;">5cm wide</div>
32+
<div class="demo-box" style="background:lightgreen; width:100px;">100px wide</div>
33+
<div class="demo-box" style="background:lightcoral; width:10em;">10em wide</div>
34+
<div class="demo-box" style="background:khaki; width:20rem;">20rem wide</div>
35+
</div>
36+
</div>
37+
38+
<div class="tag-section">
39+
<h3>Shorthand Properties</h3>
40+
<div class="tag-demo">
41+
<p style="margin:10px 20px; border:2px solid blue; padding:5px;">
42+
This uses shorthand margin & border.
43+
</p>
44+
</div>
45+
</div>
46+
47+
<div class="tag-section">
48+
<h3>Where to put CSS</h3>
49+
<div class="tag-demo">
50+
<p style="color:purple;">This is Inline CSS.</p>
51+
<p class="internal">This is Internal CSS.</p>
52+
</div>
53+
<style>
54+
.internal { color: teal; }
55+
</style>
56+
</div>
57+
</body>
58+
</html>

0 commit comments

Comments
 (0)