-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathhtml_tutorial.html
More file actions
261 lines (245 loc) · 12.3 KB
/
html_tutorial.html
File metadata and controls
261 lines (245 loc) · 12.3 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
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
<!doctype html>
<html lang="en">
<head>
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap" rel="stylesheet">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- NavBar -->
<ul class="navbar navbar-light bg-white mb-0 " id="navId">
<li class="navbar-brand px-5 ">
<a href="#" class="navbar-brand"><img src="download.png" alt="iiitbbsr" width="40px" class="align-middle"></i> HTML Tutorial</a>
</li>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</ul>
<div class="jumbotron p-3 mb-0 custom-jumbotron">
<div class="container mx-4">
<h1 class="display-4">A Guide To Learning HTML!</h1>
</div>
</div>
<div class="learn-html container-fluid">
<a href="index.html" class="learn-html">Already know HTML ? Let's learn CSS</a>
</div>
<div class="sidenav" style="height: 325px;">
<h3>Menu</h3>
<a href="#intro_head">Introduction</a>
<a href="#tags_attribs_head">Tags & Attributes</a>
<a href="#anchor_head">Anchor Tag</a>
<a href="#list_head">List in HTML</a>
<a href="#table_head">Table in HTML</a>
</div>
<div class="container mt-4" style="margin-left: 15%;">
<h2 class="heading" id="intro_head">HTML</h2>
<p>HTML stands for Hyper Text Markup Language, which is the most widely used language on Web to develop web pages.
HTML was created by Berners-Lee in late 1991 but "HTML 2.0" was the first
standard HTML specification which was published in 1995. HTML 4.01 was a major version of HTML and it was
published in late 1999. Though HTML 4.01 version is widely used but currently we are having HTML-5 version which
is an extension to HTML 4.01, and this version was published in 2012.</p>
<h3 class="heading">Hello World using HTML</h3>
<p>To get a familiarity on HTML syntax try these code in your browser which will distinguish paragraphs
and headers..</p>
<pre>
<code><!DOCTYPE HTML>
<html>
<head>
<title>This is a sample piece.</title>
</head>
<body>
<h1>This shows a heading.</h1>
<p>Hello World!</p>
</body>
</html></code></pre>
<h3 class="heading" id="tags_attribs_head">Tags and attributes in HTML</h3>
<p>Tags and attributes are the basis of HTML.</p>
<p>Tags are used to mark up the start of an HTML element and they are usually enclosed in angle brackets. An example
of a tag is: <h1>. Most tags must be opened <h1> and closed </h1> in order to function.</p>
<p>Attributes contain additional pieces of information. Attributes take the form of an opening tag and additional
info is placed inside. An example of an attribute is:
<pre><code><img src="sieve.jpg" alt="Excitement"></code></pre>
</p>
<h3 class="heading">Basic Construction of an HTML Page</h3>
<p>These tags should be placed underneath each other at the top of every HTML page that you create.</p>
<p><!DOCTYPE html> - This tag specifies the language you will write on the page. In this case, the language is
HTML 5.</p>
<p><html> - This tag signals that from here on we are going to write in HTML code.</p>
<p><head> - This is where all the metadata for the page goes — stuff mostly meant for search engines and other
computer programs.</p>
<p><body> - This is where the content of the page goes.</p>
<h3 class="heading">Further Tags</h3>
<p>Inside the <head> tag, there is one tag that is always included: <title>, but there are others that
are just as important:</p>
<p><title><br>This is where we insert the page name as it will appear at the top of the browser window or tab.
</p>
<p><meta><br>This is where information about the document is stored: character encoding, name (page context),
description.</p>
<h3 class="heading">Adding content</h3>
<p>Next, we will make <body> tag.</p>
<p>The HTML <body> is where we add the content which is designed for viewing by human eyes.</p>
<p>This includes text, images, tables, forms and everything else that we see on the internet each day.</p>
<h3 class="heading">Other Key Elements</h3>
<p>They are as follows:</p>
<table class="table table-bordered">
<tr>
<th>Element</th>
<th>Meaning</th>
<th>Purpose</th>
</tr>
<tr>
<td><b></td>
<td>Bold</td>
<td>Highlight important information</td>
</tr>
<tr>
<td><strong></td>
<td>Strong</td>
<td>Similarly to bold, to highlight key text</td>
</tr>
<tr>
<td><i></td>
<td>Italic</td>
<td>To denote text</td>
</tr>
<tr>
<td><em></td>
<td>Emphasised Text</td>
<td>Usually used as image captions</td>
</tr>
<tr>
<td><mark></td>
<td>Marked Text</td>
<td>Highlight the background of the text</td>
</tr>
<tr>
<td><small></td>
<td>Small text</td>
<td>To shrink the text</td>
</tr>
<tr>
<td><strike></td>
<td>Striked Out Text</td>
<td>To place a horizontal line across the text</td>
</tr>
<tr>
<td><u></td>
<td>Underlined Text</td>
<td>Used for links or text highlights</td>
</tr>
<tr>
<td><ins></td>
<td>Inserted Text</td>
<td>Displayed with an underline to show an inserted text</td>
</tr>
<tr>
<td><sub></td>
<td>Subscript Text</td>
<td>Typographical stylistic choice</td>
</tr>
<tr>
<td><sup></td>
<td>Superscript Text</td>
<td>Another typographical presentation style</td>
</tr>
</table>
<h3 class="heading" id="anchor_head">The Anchor Tag</h3>
<p>The <a> (or anchor) opening tag is written in the format:</p>
<pre><code><a href="https://www.google.com/"></code></pre>
<p>The first part of the attribute points to the page that will open once the link is clicked.</p>
<p>Meanwhile, the second part of the attribute contains the text which will be displayed to a visitor in order to
entice them to click on that link.</p>
<h3>How To Add Images In HTML To Your Website</h3>
<p>In today’s modern digital world, images are everything. The <img> tag has everything you need to display
images on your site. Much like the <a> anchor element, <img> also contains an attribute.</p>
<p>The attribute features information for your computer regarding the <strong>source</strong>,
<strong>height</strong>, <strong>width</strong> and <strong>alt text</strong> of the image.</p>
<p>The <img> tag normally is written as follows:</p>
<pre><code><img src="yourimage.jpg" alt="Describe the image" height="X" width="X"></code></pre>
<h3 class="heading" id="list_head">How To Make an HTML List</h3>
<p>In web design, there are 3 different types of lists which you may wish to add to your site.</p>
<h4>Ordered List</h4>
<p>The first is an <ol>: This is an ordered list of contents. For example:<br>1.An item<br>2.Another
item<br>3.Another goes here</p>
<p>Inside the <ol> tag we list each item on the list inside <li> </li> tags.</p>
<p>For example:</p>
<pre><code> <ol>
<li>An item</li>
<li>Another item</li>
<li>Another goes here</li>
</ol></code></pre>
<h4>Unordered List</h4>
<p>The second type of list that you may wish to include is an <ul> unordered list. This is better known as a
bullet point list and contains no numbers.</p>
<p>For example:</p>
<pre><code> <ul>
<li>This is</li>
<li>An unordered</li>
<li>List</li>
</ul></code></pre>
<h4>Definition List</h4>
<p>Finally, you may wish to include a definition list
<dl> on your page. An example of a <dl> list is as follows:</p>
<p>The code used for the above is as follows:</p>
<pre><code><dl><br><dt>Item</dt><br><dd>The definition goes here</dd><br></dl></code></pre>
<p>Let’s try it out. Open index.html and on a new line, enter the following HTML:</p>
<pre><code><p>This website will have the following benefits for my business:</p><br><ul><br><li>Increased traffic </li><br><li>Global Reach</li><br><li>Promotional Opportunities>/li<<br></ul></code></pre>
<p>Now hit save and check out the results in your browser. If everything worked out then it will display a
bullet-pointed table displaying the information above.</p>
<h3 class="heading" id="table_head">How To Add Tables In HTML</h3>
<p>Another way to keep your website looking neat and orderly is through the use of a table.</p>
<p>This is definitely the most complicated part of this tutorial, however, learning it will certainly pay off in
the long-run.</p>
<p>With this in mind, tables can still be a useful way to present content on your page.</p>
<h4>What Does a Table Consist Of?</h4>
<p>When drawing a table we must open an element with the <table> opening tag. Inside this tag, we
structure the table using the table rows, <tr>, and cells, <td>.</p>
<p>An example of an HTML table is as follows:</p>
<pre><code><table><br><tr><br><td>Row 1 - Column 1</td><br><td>Row 1 - Colunm 2 </td><br><td>Row 1 - Column 3 </td><br></tr><br><tr><br><td>Row 2 - Column 1</td><br><td>Row 2 - Column 2</td><br><td>Row 2 - Column 3</td><br></tr><br></table></code></pre>
<p>This will produce a 2-row table with 3 cells in each row.</p>
</div>
<div class="learn-html container-fluid">
<a href="index.html" class="learn-html">Now that you have learnt HTML, now learn CSS</a>
</div>
<br>
<!-- Footer -->
<footer class="footer text-center">
<div class="container ">
<span class="text-muted">
Made in collaboration of<br>
<div class="row">
<div class="col-4">Anurag Dash</div>
<div class="col-4">Dibyanshu Anand</div>
<div class="col-4">Yajnesh Mohanty</div>
</div>
</span>
<br>
</div>
<!-- Copyright -->
<div class="footer-copyright custom-footer text-center py-3">© 2020 IIIT
</div>
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
</body>
</html>