-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
243 lines (239 loc) · 13.9 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
<!DOCTYPE html>
<html>
<title>Walk through your first HTML page</title>
<head> </head>
<body>
<a href=" blog.codingninjas.in">
<img
src=" https://ninjasfiles.s3.amazonaws.com/0000000000001394.png"
alt=" coding ninjas logo"
/>
</a>
<a href=" blog.codingninjas.in">
<p>blog.codingninjas.in</p>
</a>
<p>Coding Ninjas Official Blog</p>
<img
src="https://ninjasfiles.s3.amazonaws.com/0000000000001395.png"
alt="codingninjas"
/>
<h1>A step-by-step walk through of your first HTML page</h1>
<img
src="https://ninjasfiles.s3.amazonaws.com/0000000000001491.png"
alt=" A step-by-step walk through of your first HTML page "
/>
<p>
HTML is short for HyperText Markup Language Basically, it’s the "code"
behind every webpage-even this one. If you're just beginning to learn
HTML, let us tell you that it’sa fairly easy task HTML,without styling,
can’t do anything more than settinga layout, drawing a table,or creating
frames-but it is handy as it helps you structure the content correctly,
which is important whenyo sit down to add style to your HTML.
</p>
<img
src=" https://ninjasfiles.s3.amazonaws.com/0000000000001486.jpeg "
alt="HTML structure"
/>
<p>
However simple this might seem, it is a mighty useful tool when it comes
to full fledged web development. Various tools easily eliminate the HTML
coding from your work process - but if you want to be in full control of
your web-page , you will need to have some command over HTML. <br />
</p>
<p>
Through this article, we aim to give you the essential HTML building
blocks that’ll help you get up and running Reading this, you’ll be able to
understand an HTML source code and even modify it for your own good!
</p>
<h3>Step One - TAGS</h3>
<img
src="https://ninjasfiles.s3.amazonaws.com/0000000000001485.png"
alt=" step-one tag"
/>
<p>
Tags are what you’ll see the most when you look at my HTML source code. A
tag can ideally be seen as a wrapper to any item on your HTML document.
Tags tell what magic is to be done on the content enclosed by them.
</p>
<p>Let’s look at two types of tags:</p>
<ol type="1">
<li>I need a closing Tag.</li>
<li>I do not need a Coding Tag.</li>
</ol>
<p>
In the first example, the sentence is wrapped by two tags. The first one
is called the opening tag and the second one is called the closing tag.
Everything in between is affected by the properties of the tag. Very
commonly used examples of such tags are html, head,body, strong,etc.
<br />
The second example tags about loner tags - as in, they do not need a
closing tag to function. Although it is not required, these type of tags
are often written and tags/> to make thye debugging of code easier. Common
examples of such tags are hr/> - use for horizontal line , br/> - to break
line, etc.
</p>
<h2>Step Two - HTML, HEAD, and BODY: The three pillars of your document</h2>
<img
src="https://ninjasfiles.s3.amazonaws.com/0000000000001488.jpg"
alt="head body "
/>
<p>
these tags are essential for any HTML document. They parcel out the
significant parts of your HTML code. <br />
</p>
<ul>
<li>
BODY>/BODY> is placed below your HEAD> tag, and everything that you want
to be displayed on your screen comes under this tag. Text, images,
links, and pretty much anything you can see in your browser live inside
this tag.
</li>
<li>
HTML> tag wraps your entire code. Everything else in your HTML document
needs to come inside these tags.
</li>
<li>
HEAD> tags includes things like title, style, and scripts. Head is
usually present at the top (hah!), just inside the htmml/> tag.
</li>
</ul>
<h2>Step three - A few tags that'll make your page pretty</h2>
<p>
Now that you know how to set up the skelton of your document, Let’s
proceed with the things that will go inside your BODE/> tag and do some
magic! <br />
</p>
<p>Some basic text formatting tags:</p>
<ul>
<li>< b> make your text look < /b> <b> bold</b></li>
<li>< i> make your text <i> < /i> cursive/ Italic</i></li>
<li>< u> gave <u>Underline < /u> </u> on your text</li>
</ul>
<p>for example, this piece of code</p>
<u>
</u>
< html> <br />
< head> < /head > < body > <br />
<br />
<p>< li > I am Italics < /i></p>
<p>< b > I am bold! < /b></p>
<p>< u> and me, well, I m underlined < /u></p>
< /body> < /html >
<u>
</u>
<br />
<br />
<p>
Should produce something like this on your browser: Do not fret too much
about the < br/> tag. Its just for breaking the line so that you can start
from the next line. Enter key does little when it comes to changing lines
in your HTML document.
</p>
<img
src="https://ninjasfiles.s3.amazonaws.com/0000000000001490.png "
alt=" this is html page"
/>
<h2>tags to help you structure your content:</h2>
<ul type="disc">
<li>< br/> breaks the line, making you continue to next line .</li>
<li>
< p > staands for paragraph. It divides your content into paragraphs.
</li>
</ul>
<p>
NOTE: You need to use this tags as space and enter keys do very little
when it comes to formatting content inside an HTML document.
</p>
<h2>Heading Tags:</h2>
<p>
HTML provides you with six tags, from < H1 > < /H1> to < H6 > < /H6> to
help you create diffrent sized headers quickly.
</p>
<img
src="https://ninjasfiles.s3.amazonaws.com/0000000000001487.png"
alt=" heading tag photo"
/>
<h2>Inserting an Image:</h2>
<p>
All thats good, but whatfun without images on the web-page? Dont worry, <
IMG> to the rescue! The image tag has a mandatory attribute called
"Source" . Basically its tell the browser where it Should look for the
image. The Syntax goes something like: <br />
< img src = "link/ path of img"/> <br />
Furthermore, it also has attribute like height and width that let you
specify tyhe height and widthyou want your image to take.
</p>
<h2>List:</h2>
<p>
HTML has two types of lists- Orderd and Unorderd, Each item of your list
has to be enclosed in a tag. The Syntax for creating a list is fairly
simple.
</p>
<p>Suppose you want to create a list like :</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<p>The following code will easily do the job for you:</p>
<br />
< ul> <br />
< li> < /li> <br />
< li> < /li> <br />
< li> < /li> <br />
< /ul>
<br />
<p>
This, by the way, was an example of an Unorderd list. For qn Orderdlist ,
all you need to do replace < ul> with < ol> and < /ul> with < /ol>.
</p>
<p>Let’s see what the following code does:</p>
<br />
<p>< html></p>
<p> < head> < /head></p>
< body> <br />
<br />
< ul> <br />
< li> I am Unorderd list item 1 < /li> <br />
< li> I am Unorderd list item 2< /li> <br />
< li> I am Unorderd list item 3< /li> <br />
< li> I am Unorderd list item 4< /li> <br />
< /ul> <br />
<br />
< ol> <br />
< li> I am Orderd list item 1 < /li> <br />
< li> I am Orderd list item 2< /li> <br />
< li> I am Orderd list item 3< /li> <br />
< li> I am Orderd list item 4< /li> <br />
< /ol> <br />
< /body> <br />
< /html> <br />
<br />
<img
src="https://ninjasfiles.s3.amazonaws.com/0000000000001489.png"
alt=" Orderdlistand Unorderd list Tags"
/>
<p>
All of these tags, when arranged coherently, will provide you with a
simple webpage consisting of images, headings, and lists. Further, there
are Various tags that HTML supports, and we throughly recommend you to
check them out and play with them!
</p>
<br />
<h2>In Conclusion</h2>
<p>
Youknow now enough to skim through and understand any part of an HTML
code. We request you to go ahead and try skimming through the source code
of an website (you will find some tags you dont know, but thats how you
learn !). Oh, and welcome to the worldof Web development with HTML
underyour belt, your next stop should be making your page look beautifull
using CSS.
</p>
<p>
Lets know if you had any problem in the article, and dont forget to have a
look at a source code or two !
</p>
</body>
</html>