-
Notifications
You must be signed in to change notification settings - Fork 0
/
notepad.html
444 lines (424 loc) · 20.4 KB
/
notepad.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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>E-Learning-Notepad</title>
<!-- stylesheet -->
<!-- <link rel="stylesheet" href="style.css"> -->
<link rel="stylesheet" href="notepad.css">
<!-- stylesheet -->
<!-- google font link -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Acme&family=Courgette&family=Pacifico&family=Permanent+Marker&family=Special+Elite&family=Stick+No+Bills:wght@200;300&display=swap" rel="stylesheet">
<!-- google font link -->
</head>
<body>
<header>
<h1 id="top">E-Learning Portal</h1>
</header>
<!-- Navbar -->
<section id="navbar">
<div class="dropdown">
<a id="home" href="index.html"><img src="Primary/home-page.png" alt=""></a>
</div>
<div class="dropdown">
<h3>Computational Tools</h3>
<div class="dropdown-content">
<p><a href="msword.html">MS Word</a></p>
<p><a href="msexcel.html">MS Excel</a></p>
<p><a href="mspp.html">MS PowerPoint</a></p>
<p><a href="notepad.html">NotePad</a></p>
<p><a href="mspaint.html">Paint</a></p>
</div>
</div>
<div class="dropdown">
<h3>Programming Languages</h3>
<div class="dropdown-content">
<p><a href="google.com" target="blank">Python</a></p>
<p><a href="google.com">C</a></p>
<p><a href="google.com">C++</a></p>
<p><a href="google.com">Java</a></p>
</div>
</div>
<div class="dropdown">
<h3>System Software</h3>
<div class="dropdown-content">
<p><a href="google.com" target="blank">DBMS</a></p>
<p><a href="google.com">OS</a></p>
</div>
</div>
<div class="dropdown">
<h3>Career Opportunities</h3>
<div class="dropdown-content">
<p><a href="google.com" target="blank">public sector</a></p>
<p><a href="google.com">private sector</a></p>
<p><a href="google.com">Higher studies</a></p>
<p><a href="google.com">Reservation</a></p>
</div>
</div>
<div class="dropdown">
<h3>Communication Skils</h3>
<div class="dropdown-content">
<p><a href="google.com" target="blank">basic english</a></p>
<p><a href="google.com">advanced english</a></p>
</div>
</div>
</section>
<!-- Navbar -->
<!-- Paint -->
<img src="Notepad img/Learn notepad.png" alt="Welcome Photo" class="center">
<!-- Overview -->
<section class="container">
<div id="mspaint" class="paint"style="height: 550px; overflow-y:auto; ">
<h2 style="color: rebeccapurple; text-align: center;">Notepad</h2>
<hr style="height:2px;border-width:0;color:rgb(0, 0, 0);background-color: rebeccapurple">
<h3 style="text-align: left;"> <a href="#basic">Basics</a> </h3>
<ul style="list-style: none; padding: 0%;">
<li><a href="#0">Open Paint</a></li>
<li><a href="#1">Creating Paint</a></li>
<li><a href="#2">Saving Paint</a></li>
</ul>
<h3 style="text-align: left;"> <a href="#paintbasic">Paint Basics</a> </h3>
<ul style="list-style: none; padding: 0%;">
<li> <a href="#3">Title bar</a></li>
<li> <a href="#4">Menu bar</a></li>
<li> <a href="#5">Tool box</a></li>
<li> <a href="#6">Scroll bar</a></li>
<li> <a href="#7">Minimize button</a></li>
<li> <a href="#8">Maximize/Restore button</a></li>
<li> <a href="#9">Close button</a></li>
</ul>
<h3 style="text-align: left;"> <a href="#mbar">Menu bar</a></h3>
<ul style="list-style: none; padding: 0%;">
<li><a href="#10">File menu</a></li>
<li><a href="#11">Home menu</a></li>
<li><a href="#12">View menu</a></li>
</ul>
<h3 style="text-align: left;"> <a href="#scuts">Shortcuts</a></h3>
<ul style="list-style: none; padding: 0%;">
<li><a href="#13">Important shortcuts</a></li>
</ul>
<h3 style="text-align: left;"> <a href="#notes">Download Notes</a> </h3>
<br>
</div>
<!-- Overview -->
<!-- content -->
<div id="content" class="cont">
<!-- basics -->
<h2 id="basic">Basics</h2>
<!-- open paint -->
<br>
<h3 id="0">Open Paint</h3>
<br>
<h5 style="color: blue;">START->Search->Paint</h5>
<p style="color: red;">Step 1:</p>
<p>Click on Search bar and type Paint.</p>
<img src="Paint Images/1.PNG" style="width: 50%;" alt="1">
<br>
<p style="color: red;">Step 2:</p>
<p>Select Paint and Click on Open button.</p>
<img src="Paint Images/2.PNG" style="width: 60%;" alt="2">
<br><br>
<p style="color: red; font-weight: bold;">OR</p>
<h5 style="color: blue;">START->Windows Accessories->Paint</h5>
<p style="color: red;">Step 1:</p>
<p>Click on START button.</p>
<img src="Paint Images/3.PNG" style="width: 40%;" alt="3">
<br>
<p style="color: red;">Step 2:</p>
<p>Move the mouse cursor and click on Windows Accessories button.</p>
<img src="Paint Images/4.PNG" style="width: 40%;" alt="4">
<p style="color: red;">Step 3:</p>
<p>Then Move the mouse over paint button and click on it.</p>
<img src="Paint Images/5.PNG" style="width: 40%;" alt="5">
<p>The Paint window will open and look like this.</p>
<img src="Paint Images/6.PNG" style="width: 60%;" alt="6">
<br><br><br>
<hr style="height:2px;border-width:0;color:rgb(0, 0, 0);background-color:rgb(102, 51, 153)">
<!-- open paint -->
<!-- Creating Paint -->
<br><br>
<h3 id="1">Creating Paint</h3>
<br>
<p style="color: blue;">Creating a <strong>New Paint file</strong></p>
<p style="color: red;">Step 1:</p>
<p>Click on <strong>File</strong> menu.</p>
<img src="Paint Images/12.PNG" style="width: 50%;" alt="12">
<br>
<p style="color: red;">Step 2:</p>
<p>Click on <strong>New</strong> button and a new file is opened.</p>
<img src="Paint Images/13.PNG" style="width: 60%;" alt="13">
<br><br>
<p style="color: blue;">Opening an <strong>Existing Paint file</strong></p>
<p style="color: red;">Step 1:</p>
<p>Click on <strong>File</strong> menu.</p>
<img src="Paint Images/14.PNG" style="width: 50%;" alt="14">
<br>
<p style="color: red;">Step 2:</p>
<p>Click on the <strong>Open</strong> button.</p>
<img src="Paint Images/15.PNG" style="width: 60%;" alt="15">
<p style="color: red;">Step 3:</p>
<p>Select the file from the indicated rectangular window or type the name of opening file in file name
section and click on <strong>open</strong> button.</p>
<img src="Paint Images/16.PNG" style="width: 60%;" alt="16">
<br><br><br>
<hr style="height:2px;border-width:0;color:rgb(0, 0, 0);background-color:rgb(102, 51, 153)">
<!-- Creating Paint -->
<!-- Savind Paint -->
<br><br>
<h3 id="2">Saving Paint</h3>
<br>
<p style="color: red;">Step 1:</p>
<p>Click on <strong>File</strong> menu on the top left of the word window.</p>
<img src="Paint Images/17.PNG" style="width: 60%;" alt="save 17">
<br><br>
<p style="color: red;">Step 2:</p>
<p>Click on <strong>save or save as</strong> button.</p>
<img src="Paint Images/18.PNG" style="width: 60%;" alt="save 18">
<br><br>
<p style="color: red;">Step 3:</p>
<ul>
<li>Select the location from the first rectangular window for the word file to be saved. </li>
<li>Type the word file name in second rectangular window. </li>
<li>Finally Click on <strong>save button</strong>.</li>
</ul>
<img src="Paint Images/19.PNG" style="width: 60%;" alt="save 19">
<br><br><br>
<hr style="height:2px;border-width:0;color:rgb(0, 0, 0);background-color:rgb(102, 51, 153)">
<!-- Savind Paint -->
<!-- basics -->
<!-- Paint basics -->
<br><br><br>
<h2 id="paintbasic">Paint basics</h2>
<br><br>
<h3 id="3">Title bar</h3>
<p>It is positioned top of windows. It shows the name of the application, document or File name.</p> <br>
<img src="Paint Images/7.PNG" style="width: 50%;" alt="7">
<br><br>
<h3 id="4">Menu bar</h3>
<p>It is positioned below the title bar. It contains File, Edit, View, Image, Options, and Help etc.</p>
<img src="Paint Images/menu.PNG" style="width: 50%;" alt="menu">
<br><br>
<h3 id="5">Tool box</h3>
<p>
It has 16 Tools like Pencil, Eraser, and Line Etc. We can use these tools for Drawing Something.
<ul>
<li>Color box <p>It has many Colours. You can you these Colours for your painting.</p>
<img src="Paint Images/color.PNG" style="width: 60%;" alt="color">
</li>
<li>Status bar <p>It shows the status of our Mouse Pointer and other options.</p>
</li>
</ul>
</p>
<br><br>
<h3 id="6">Scroll bar</h3>
<p>We used this option when the document does not fit in the window or zoomed.</p>
<p><strong>Two types</strong>- Horizontal or vertical scroll bar</p>
<img src="Paint Images/scrollbar.PNG" style="width: 50%;" alt="scrollbar">
<br><br>
<h3 id="7">Minimize button</h3>
<p>With the help of this option, you can reduce the window to an icon and arranges it on the desktop. This
option does not quit the application.</p>
<br><br>
<h3 id="8">Maximize/Restore button</h3>
<p>With the help of this option, you can enlarge the active window so that it files the entire desktop.</p>
<br><br>
<h3 id="9">Close button</h3>
<p>This icon is used to close your current application windows.</p>
<img src="Paint Images/8.PNG" style="width: 60%;" alt="8">
<br><br><br>
<hr style="height:2px;border-width:0;color:rgb(0, 0, 0);background-color:rgb(102, 51, 153)">
<!-- Paint basics -->
<!-- Menu bar -->
<br><br><br>
<h2 id="mbar">Menu bar</h2>
<br><br>
<!-- File menu -->
<h3 id="10">File Menu</h3>
<img src="Paint Images/9.PNG" style="width: 40%; float: right;" alt="9">
<ul style=" width: 57%; float: left;">
<li>New <p>The new command is used to create a new file document.</p>
</li>
<li>Open <p>The open command is used to opens an existing document.</p>
</li>
<li>Save <p>The save command is used to save the active document or the changes in the existing file.
</p>
</li>
<li>Save As <p>The Save As command is used to save the active document with a New name.</p>
</li>
<li>Print Preview <p>The Print Preview command is used to Display the full pages.</p>
</li>
</ul>
<ul style=" width: 98%; float: left;">
<li>Page Setup <p>The page setup command is used to change the page layout left, Right, Top and Bottom
margins.</p>
</li>
<li>Print <p>The print command is used to print the active document and sets printing options.</p>
</li>
<li>Send <p>The send command is used to send a picture by using mailer box.</p>
</li>
<li>Set As wallpaper [Tiled]<p>To set the active File on the desktop wallpaper as a tilled.</p>
</li>
<li>Set As wallpaper [Centred]<p>To set the active File on the desktop wallpaper in the Centre.</p>
</li>
<li>Exit <p>To Close the paint.</p>
</li>
</ul>
<br><br><br>
<hr style="height:2px;border-width:0;color:rgb(0, 0, 0);background-color:rgb(102, 51, 153); clear: both;">
<!-- File menu -->
<!-- Home menu -->
<br><br>
<h3 id="11">Home Menu</h3>
<img src="Paint Images/10.PNG" style="width: 100%; " alt="10">
<ul>
<li>Undo <p>To undo the last action or step.</p>
</li>
<li>Redo <p>To redo the previously undone action.</p>
</li>
<li>Cut <p>To cut the selection from the active document and places it on the clipboard.</p>
</li>
<li>Copy <p>To copy the selection and puts it on the clipboard.</p>
</li>
<li>Paste <p>To Paste the cut or copied contents from clipboard.</p>
</li>
<li>Clear Selection <p>To deletes the selection but it cannot be paste.</p>
</li>
<li>Select All <p>To select the all text and graphics in the selected object.</p>
</li>
<li>Paste from <p>This option is used to paste another file into the active file.</p>
</li>
<li>Free from select <p>It is used to selects a free from part of the picture to move, copy or edit.</p>
</li>
<li>Select <p>It is used to selects a rectangular part of the picture to move, copy or edit.</p>
</li>
<li>Eraser/Color eraser <p>It is used to erase a portion of the picture using the selected eraser shape.
</p>
</li>
<li>Fill with Color <p>It is used to fills an area with the current drawing color.</p>
</li>
<li>Pick Color <p>It is use to pick up a color from the picture for drawing.</p>
</li>
<li>Magnifier <p>It is used to the magnified the drawing.</p>
</li>
<li>Pencil <p>It is used to draw a free hand drawing from line one pixel wide.</p>
</li>
<li>Brush <p>It is used to draw drawings using a brush with the selected shape and size.</p>
</li>
<li>Airbrush <p>It is used to draw airbrush drawings of the selected size.</p>
</li>
<li>Text <p>It is used to inserts text into the picture.</p>
</li>
<li>Line <p>It is used to draw a line with the selected line width.</p>
</li>
<li>Curve <p>It is used to draw a curved line with the selected line width.</p>
</li>
<li>Rectangle <p>It is used to draw a rectangle with the selected fill style.</p>
</li>
<li>Polygon <p>It is used to draw a polygon with the selected fill style.</p>
</li>
<li>Ellipse/Circle <p>It is used to draw an ellipse with the selected fill style.</p>
</li>
<li>Rounded Rectangle <p>It is used to draw a rounded rectangle with the selected fill style.</p>
</li>
</ul>
<br><br><br>
<hr style="height:2px;border-width:0;color:rgb(0, 0, 0);background-color:rgb(102, 51, 153); clear: both;">
<!-- Home menu -->
<!-- View menu -->
<br><br>
<h3 id="12">View Menu</h3>
<img src="Paint Images/11.PNG" style="width: 100%; " alt="11">
<ul>
<li>Zoom
<ul>
<li>Normal size <p>To Zoom the picture to 100%.</p>
</li>
<li>Large size <p>To Zoom the picture to 400%.</p>
</li>
<li>Custom <p>To Display the zooms size Like 100% to 800%.</p>
</li>
</ul>
</li>
<li>Show Grid <p>Shows or hides the grid lines on large size zoom.</p>
</li>
</ul>
<br><br><br>
<hr style="height:2px;border-width:0;color:rgb(0, 0, 0);background-color:rgb(102, 51, 153); clear: both;">
<!-- View menu -->
<!-- Menu bar -->
<!-- Shortcuts -->
<br><br><br>
<h2 id="scuts">Shortcuts Keys</h2>
<br><br>
<h3 id="13">Some important Shortcut Keys:</h3>
<ul>
<li>Ctrl + N : New</li>
<li>Ctrl + O : Open</li>
<li>Ctrl + S : Save</li>
<li>Ctrl + P : Print</li>
<li>Ctrl + Z : Undo</li>
<li>Ctrl + Y : Repeat/Redo</li>
<li>Ctrl + X : Cut</li>
<li>Ctrl + C : Copy</li>
<li>Ctrl + V : Paste</li>
<li>Ctrl + A : Select All</li>
<li>Ctrl + T : Tool Box</li>
<li>Ctrl + L : Color Box</li>
<li>Ctrl + F : View Bitmap</li>
<li>Ctrl + R : Flip/ Rotate</li>
<li>Ctrl + W : Stretch/Skew</li>
<li>Ctrl + I : Invert Colors</li>
<li>Ctrl + E : Attributes</li>
<li>Ctrl + Shift + N : Clear Image</li>
<li>Alt + F4 : Exit</li>
<li>Ctrl + Page Up : Normal Size</li>
<li>Ctrl + Page Down : Large Size</li>
<li>Alt + Space + R : Restore</li>
<li>Alt + Space + M : Move</li>
<li>Alt + Space + S : Size</li>
<li>Alt + Space + N : Minimize</li>
<li>Alt + Space + X : Maximize</li>
<li>Alt + Space + C : Close</li>
</ul>
<br><br><br>
<br>
<!-- Sortcuts -->
<br>
<hr style="height:2px;border-width:0;color:rgb(0, 0, 0);background-color:rgb(102, 51, 153)">
<div>
<p style="text-align: center;">Click the <strong>Download Notes</strong> button to download the study material for Notepad.</p>
<button id="notes" class="button-34" type="submit" onclick="window.open('notes/notepad.pdf')">Download Notes</button>
</div>
</div>
<!-- content -->
<!-- footer -->
<div id="footer">
<footer class="fcont">
<div id="contact">
<p id="q">Any Queries</p>
<a class="button" role="button" href="mailto:[email protected]" style="text-decoration: none; color: white;">Contact us</a>
</div>
<div id="members">
<p style="text-align: left; font-size: 1rem; font-weight: bold;">Team Members</p>
<p>Rohit Ranjan - [email protected]</p>
<p>Vineesh Reddy - [email protected]</p>
<p>Suraj Prakash - [email protected]</p>
<p>Kushal Bansal - [email protected]</p>
<p>Logesh S - [email protected]</p>
<p>Jayanth T - [email protected]</p>
</div>
<div id="copyrights">
<p>© 2021 E-Learning — All Rights Reserved</p>
</div>
</footer>
</div>
<!-- footer -->
<a class="box" href="#top">▲</a>
</section>
</body>
</html>