-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
246 lines (217 loc) · 9.49 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="apple.jpg">
<title>Make a README.md file</title>
</head>
<body>
<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=Open+Sans&display=swap" rel="stylesheet">
<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=PT+Sans&display=swap" rel="stylesheet">
<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=Bebas+Neue&display=swap" rel="stylesheet">
<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=Poppins&display=swap" rel="stylesheet">
<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=Open+Sans:wght@600&display=swap" rel="stylesheet">
<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=Mukta:wght@600&display=swap" rel="stylesheet">
<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&display=swap" rel="stylesheet">
<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=Encode+Sans+Expanded&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<center>
<div>
<p class="mainhead">Make a README.md file</p>
</div>
</center>
<div>
<p class="mainhead">
<p class="heading">Contents</p>
<p class="normaltext">
<a href="#1"><button class="button" id="b1" onmouseover="b1()" onmouseout="b12()">Headings</button></a><a
href="#2"><button class="button" id="b2" onmouseover="b2()" onmouseout="b22()">Normal
Text</button></a><a href="#3"><button class="button" id="b3" onmouseover="b3()"
onmouseout="b32()">Italics</button></a><a href="#4"><button class="button" id="b4"
onmouseover="b4()" onmouseout="b42()">Bold Text</button></a><a href="#5"><button class="button"
id="b5" onmouseover="b5()" onmouseout="b52()">Strikethrough</button></a><a href="#6"><button
class="button" id="b6" onmouseover="b6()" onmouseout="b62()">Hyperlinks</button></a><a
href="#7"><button class="button" id="b7" onmouseover="b7()" onmouseout="b72()">Images</button></a><a
href="#8"><button class="button" id="b8" onmouseover="b8()" onmouseout="b82()">Table</button></a><a
href="#9"><button class="button" id="b9" onmouseover="b9()" onmouseout="b92()">List</button></a><a
href="#10"><button class="button" id="b10" onmouseover="b10()" onmouseout="b102()">Quote</button></a><a
href="#11"><button class="button" id="b11" onmouseover="b11()" onmouseout="b112()">Code</button></a><a
href="#12"><button class="button" id="b12" onmouseover="b121()" onmouseout="b122()">Code
Block</button></a><a href="#13"><button class="button" id="b13" onmouseover="b131()"
onmouseout="b132()">Horizontal Line</button></a>
</p>
</p>
</div>
<center>
<div>
<p class="normaltext">The undoubtedly most popular repository provider; <a href="https://github.com/"
class="link">GitHub</a>(also <a href="https://about.gitlab.com/" class="link">Gitlab</a> and that <a
href="https://bitbucket.org/" class="link">Bitbucket</a>) uses a file README.md as the repository
descriptor. Making the README file good attracts people to use your repository. In this page, I will try
to explain you how to make a README file.</p>
</div>
<div>
<p class="normaltext">I am using an online code editor, you can use VS Code or any other code editor too.
</p>
</div>
<div>
<p class="heading" id="1">Headings</p>
<p class="normaltext">Headings are commonly used, used everywhere. In a README.md file, you can identify a
heading with <code>#</code>(Hashtag). If we put 1-7 <code>#</code>(Hashtag)s, then the file executes a
heading.</p>
</div>
</center>
<center>
<div class="code">
<code class="thc">
<p># Heading</p>
<p>## Heading 2</p>
<p>### Heading 3</p>
<p>#### Heading 4</p>
<p>##### Heading 5</p>
<p>###### Heading 6</p>
<p>####### Heading 7</p>
</code>
</div>
</center>
<center>
<div>
<p><img src="1.JPG" class="img"></p>
</div>
<div>
<p class="heading" id="2">Write a normal text</p>
<p class="normaltext">You need not to write any code for viewing a normal text. Just WRITE it!</p>
<p class="normaltext">For example: <code>I am a great boy</code></p>
<p><img src="2.JPG"></p>
</div>
<div>
<p class="heading" id="3">Italics</p>
<p class="normaltext">For writing in Italics, you need to provide a <code>_</code>(Underscore) at the
starting and end of the text.</p>
<p class="normaltext">Example: <code>_Are the people living in Italy called Italics?_</code></p>
<p><img src="3.JPG"></p>
</div>
<div>
<p class="heading" id="4">Bold text</p>
<p class="normaltext">For writing a bold text, you should put two <code>**</code>(Asterisk) at the beginning
and ending of the text.</p>
<p class="normaltext">For example: <code>**Hi guys, and welcome to this GitHub page.**</code></p>
<p><img src="4.JPG"></p>
</div>
<div>
<p class="heading" id="5">Strikethrough</p>
<p class="normaltext">For striking through a text, you have to put two <code>~</code>(Tilde)</p>
<p><img src="5.JPG"></p>
</div>
<div>
<p class="heading" id="6">Hyperlinks</p>
<p class="normaltext">Hyperlinks are used to connect the WebPage with any other page or a portion of the
same WebPage. To insert a hyperlink in README.md, all you have to do is to write the code in this
format: <code>[Text to display](target URL "title")</code></p>
<p class="normaltext">For Example: <code>[Open Facebook](https://www.facebook.com "Facebook")</code></p>
<p><img src="6.JPG"></p>
</div>
<div>
<p class="heading" id="7">Image</p>
<p class="normaltext">To insert an image into a README.md file, you have to write the code in this format:
<code></code>
</p>
<p><img src="7.JPG"></p>
</div>
<div>
<p class="heading" id="8">Table</p>
<p class="normaltext">To insert a table in a README.md file, you have to write the code in this format:</p>
<div class="code">
<code class="thc">
<p>|Heading 1|Heading 2|</p>
<p>|---------|---------|</p>
<p>|Content 1|Content 2|</p>
</code>
</div>
<p><img src="8.JPG"></p>
</div>
<div>
<p class="heading" id="9">Lists</p>
<p class="normaltext">To insert a list in README.md, you have to write the code in this format:</p>
<div class="code">
<code class="thc">
<p>1. Main component</p>
<p>2. Main component 2</p>
<p> * Sub component</p>
<p> * Sub component 2</p>
</code>
</div>
<p><img src="9.JPG"></p>
</div>
<div>
<p class="heading" id="10">Quote</p>
<p class="normaltext">To insert a quote in README.md file, you have to type the <code>></code>(Right-angled
bracket) at the beginning of the text</p>
<p class="normaltext">For example: <code>> This is a quote</code></p>
<p><img src="10.JPG"></p>
</div>
<div>
<p class="heading" id="11">Code</p>
<p class="normaltext">To insert a code in README.md file, you have to insert a <code>`</code> both and the
beginning and end of the text.</p>
<p class="normaltext">For example:
<code>`console.log('Bruh')` prints 'Bruh' in the console of the Browser.</code>
</p>
<p><img src="11.JPG"></p>
</div>
<div>
<p class="heading" id="12">Code Block</p>
<p class="normaltext">To insert a code block in a README file, you have to type triple <code>`</code> at the
beginning as well as the ending of the text.</p>
<p class="normaltext"><b>Note:</b> You can also define the language of your code by typing the name of the
language just after the first three <code>`</code>s</p>
<p class="normaltext">For example: </p>
<div class="code">
<code class="thc">
<p>```Python</p>
<p>if firstName = 'newton':</p>
<p> print('Have an apple')</p>
<p>```</p>
</code>
</div>
<p><img src="12.JPG"></p>
<p><img src="13.JPG"></p>
</div>
<div>
<p class="heading" id="13">Horizontal line</p>
<p class="normaltext">To insert a horizontal line in README.md file, you have to write the code in this
format:</p>
<div class="code">
<code class="thc">
<p>Three asterisks(*) execute a dark horizontal line</p>
<p>***</p>
<p>Three hyphens(-) execute a light horizontal line</p>
<p>---</p>
</code>
</div>
<p><img src="14.JPG"></p>
</div>
<div class="counter">
<p class="countext">©Ayush Alam 2021</p>
<p class="countman">
</p>
</div>
</center>
</body>
</html>