-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathhtml-images.html
More file actions
134 lines (127 loc) · 3.79 KB
/
html-images.html
File metadata and controls
134 lines (127 loc) · 3.79 KB
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
131
132
133
134
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-D0ENCWPZL9"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-D0ENCWPZL9');
</script>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>7. HTML Images Explained</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
background-color: #1cc9be;
padding: 20px;
}
.section {
background: rgba(255, 255, 255, 0.3);
padding: 20px;
border-radius: 15px;
max-width: 1000px;
margin: auto;
box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}
h2, h3 {
color: #349;
margin-bottom: 15px;
}
p {
font-size: 18px;
margin-bottom: 15px;
line-height: 1.6;
}
textarea, iframe {
width: 100%;
height: 160px;
font-size: 16px;
padding: 10px;
margin: 10px 0 20px;
border-radius: 10px;
border: 2px solid white;
background: rgba(255,248,240,0.4);
font-family: monospace;
}
iframe {
margin-top: 10px;
}
button {
background: #007bff;
color: #fff;
border: none;
padding: 8px 20px;
font-size: 15px;
font-weight: 500;
border-radius: 8px;
cursor: pointer;
margin-bottom: 20px;
transition: all 0.3s ease-in-out;
position: relative;
overflow: hidden;
}
button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(120deg, #00bcd4, #2196f3);
transition: all 0.4s ease;
z-index: -1;
}
button:hover::before {
left: 0;
}
button:hover {
color: #fff;
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
transform: translateY(-1px);
}
button:active {
transform: scale(0.95);
box-shadow: none;
}
</style>
</head>
<body>
<div class="section">
<h2>7. HTML Images</h2>
<h3>I. Adding an Image</h3>
<p><strong>Explanation:</strong> Kisi image ko HTML page mein dikhane ke liye <code><img></code> tag ka use hota hai. Iska <code>src</code> attribute image ka URL batata hai ya fir tum image ka name extension ke sath likhar image ko same folder mai jisme code files hai usme rakhte ho to aise bhi image ko HTML page par dikhaya ja skta hai, aur <code>alt</code> attribute image na load hone par dikhne wala text hota hai ki yeh image kis chiz ki hai taki agr image load na ho to user aasani se samj sake ki yaha image kiski thi.</p>
<textarea id="code1">
<img src="https://via.placeholder.com/200" alt="Sample Image">
</textarea>
<button onclick="runCode('code1', 'output1')">Run Code</button>
<iframe id="output1"></iframe>
<h3>II. Image with Link</h3>
<p><strong>Explanation:</strong> Agar aap chahte ho ki image pe click karne se kisi dusre page par user chala jaye, toh image ko <code><a></code> tag ke andar rakhte hain.</p>
<textarea id="code2">
<a href="https://www.example.com" target="_blank">
<img src="https://via.placeholder.com/200" alt="Clickable Image">
</a>
</textarea>
<button onclick="runCode('code2', 'output2')">Run Code</button>
<iframe id="output2"></iframe>
</div>
<script>
function runCode(textareaId, iframeId) {
const code = document.getElementById(textareaId).value;
const iframe = document.getElementById(iframeId);
const doc = iframe.contentDocument || iframe.contentWindow.document;
doc.open();
doc.write(code);
doc.close();
}
</script>
</body>
</html>