-
Notifications
You must be signed in to change notification settings - Fork 0
/
Web-Development-Technologies.html
69 lines (63 loc) · 3.06 KB
/
Web-Development-Technologies.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Development Technologies</title>
<style>
/* CSS styles */
body {
background-color: #f0f0f0; /* (a) Set the background color of the body */
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.container {
width: 100vw; /* Ensure container covers entire viewport */
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center; /* Center all text */
}
.container p {
margin: 10px 0;
}
.container ul {
list-style-type: none;
padding-left: 0;
}
</style>
</head>
<body>
<div class="container">
<h1>Web Development Technologies</h1>
<p>HTML is the foundational language used to create and structure content on the web. In your examples,
HTML is used to define the structure of the webpage, including elements like div, img, and video tags.
HTML is responsible for organizing content in a meaningful way, such as placing a video or GIF within a container.</p>
<p>CSS is used to style HTML content and control the layout and appearance of elements. In your examples, CSS is used to:</p>
<ul>
<li>(a) Set the background color of the body.</li>
<li>(b) Style the container and the video/GIF elements to ensure they cover the entire viewport.</li>
<li>(c) Apply animations using @keyframes and other properties to create visual effects.</li>
</ul>
<p>While HTML and CSS form the core of web development, additional technologies can further enhance web pages:</p>
<ul>
<li>JavaScript</li>
<li>Web APIs</li>
<li>SVG (Scalable Vector Graphics)</li>
<li>WebAssembly</li>
</ul>
<p>Here's a summary of the technologies used in your HTML examples and their purposes:</p>
<ul>
<li>✅ HTML: Structures web content and defines the placement of elements like videos and GIFs.</li>
<li>✅ CSS: Styles HTML content, controls layout, and applies animations for visual effects.</li>
<li>❌ JavaScript (not used in your examples but commonly used): Adds interactivity, dynamic behavior, and event handling.</li>
<li>❌ Web APIs (not used in your examples but commonly used with JavaScript): Interact with browser features and fetch resources.</li>
<li>❌ SVG (not used in your examples but useful for scalable graphics): Defines vector-based graphics and animations.</li>
<li>❌ WebAssembly (not used in your examples but useful for performance): Enables high-performance applications in the browser.</li>
</ul>
</div>
</body>
</html>