Scribd
Upload
7 views22 pages

HTML (1)

Uploaded by

727722euit027
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
7 views22 pages

HTML (1)

Uploaded by

727722euit027
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 22

1 Date:24/01/20023

2 WEB TECHNOLOGY:
3 Web technology is a technique to communicate through internet.

4 H-T-M-L=Hyper Text Markup Language.


5 Front end tech(client site)
6 Back end tech(server site)

7 basic structure;
8 <html>
9 <head>
10 <!—Loads First
11 </head>
12 <body>

13 <!—Browser Display
14 </body>
15 </body>
16 <html>
17 <head>
18 <title>
19 imp doc
20 </title>
21 </head>
22 <body>
23 <h1>HTML-BASICS</h1>
24 <p>
25 * format tags<br>
26 1 <b>bold text</b><br>
27 2 <i>italic text</i><br>
28 3 <u>underline</u><br>
29 4 <small>small text</small><br>
30 5 <strong>cap text</strong><br>
31 6 <em>my emphasize tag</em><br>
32 7 <sub>subscript</sub><br>
33 8 <sup>supersubscript</sup><br>
34 9 <ins>inserted text</ins><br>
35 10 <del>delete text</del><br>
36 11 <mark>highlight backgroung</mark><br>
37 12 <strike>strike out text</strike><br>
38
39 *self closing tags<br>
40 1 breaks the line<br>
41 2 <hr><br>
42 3 <pre>
43 dont change the format:<br>
44 4 block quote</blockquote>
45 5 <q>short quotation</q>
46 6 <abbr title="hyper text markup language">HTML</abbr>
47 7 <address>
48 81/4,Ashok nagar east,
49 Kaundam Palayam,
50 coimbatore-641030.</address>
51
52 *comments<br>
53 1.<!-single line comment-><br>
54 2.<!--this is
55 multi line
56 commentcomment--!><br>
57
58 </p>
59
60 </body>
61 </html>
62 Example;
63 <html>
64 <head></head>
65 <body>
66 <h1>CPU</h1>
67 <p>
68 <u><b>CPU</b> stands for Central Processing Unit.</u><br>
69 It is portion of a <u>computer</u> system that carries<br>
70 out the instructions of a <u>computer</u> program.<br>
71 It carries out each instruction of the program in sequence,<br>
72 to perform the basic arithmetical, logical, and input/ouput operations of the system
73 </p>
74 </body>
75 </html>
76

77 Date:25/01/20023
78 Tables:
79 <table></table>-To define the table in html.
80 <tr></tr>-to define the rows of the table in html.
81 <td></td>-to define the table data (or)cell(or)columns of the table in html.
82 <th></th>-to define the headings of the table .
83 Rowspan=is to merge the rows int the table.
84 Colspan=is to merge the columns in the table.
85 Bgcolor=background colour.
86 Cell spacing=space in cell.
87 Cell padding= space in between cell.
88 Border=border of the table.
89
90
91 EXAMPLE;
92 <html>
93 <head>
94 <title>Table</table>
95 </head>
96 </html>
97
98 <body>
99 <table border="1" width="200" height="150" bgcolor="white" cellspacing="20"
100 cellpadding="20">
101 <thead>
102 <th>Title 1</th>
103 <th>Title 2</th>
104 <th>Title 3</th>
105 <th>Title 4</th>
106 </thead>
107 <tbody>
108 <tr style="color:red">
109 <td rowspan="2">Row1 col1</td>
110 <td colspan="2">Row1 col2</td>
111 <!--?<td>Row1 col3</td>-->
112 <td>Row1 col4</td>
113 </tr>
114 <tr style="color:darkblue">
115 <!--<td>Row2 col1</td>-->
116 <td>Row2 col2</td>
117 <td>Row2 col3</td>
118 <td>Row2 col4</td>
119 </tr>
120 <tr style="color:orange">
121 <td>Row3 col1</td>
122 <td>Row3 col2</td>
123 <td>Row3 col3</td>
124 <td>Row3 col4</td>
125 </tr>
126 </tbody>
127 </table>
128 </body>
129 </html>
130
131 List Tags
132 <ol></ol> - ordered list.
133 <ul></ul> - unordered list.
134 <dl></dl> - description list.
135 <li></li> - list items.
136 <dd></dd> - description in description list.
137 EXAMPLE;
138 <html>
139 <head>
140 <title>List</title>
141 <body>
142 <ul type="circle">//unordered list
143 <li>One</li>
144 <li>Two</li>
145 <li>Three</li>
146 </ul>
147 <ol type="1">//ordered list
148 <li>One</li>
149 <li>Two</li>
150 <li>Three</li>
151 </ol>
152 <ol type="I">
153 <li>One</li>
154 <li>Two</li>
155 <li>Three</li>
156 </ol>
157 <ul type="1">//nested list
158 <li>One</li>
159 <ul>
160 <li>One</li>
161 <li>Two</li>
162 </ul>
163 <li>Two</li>
164 <ul>
165 <li>One</li>
166 <li>Two</li>
167 </ul>
168 <li>Three</li>
169 <ul>
170 <li>One</li>
171 <li>Two</li>
172 </ul>
173 </ul>
174 <dl>
175 <dt>Define HTML?</dt> //description list.
176 <dd>Hyper Text Markup Language</dd>
177 <dt>Define who?</dt>
178 <dd>World Health Organisation</dd>
179 <dt>Define inheritance?</dt>
180 <dd>inheritance is a function </dd>
181 </dl>
182 </body>
183 </html>
184
185

186 HYPERLINK
187 HYPERLINK is used for open a html page from the html page by using <a href=” ”></a>.
188 Anchor tag<a>
189  href (hyperlink reference) attribute in<a> indicates the links derinations.
190 INTERNAL REFERNCE: from one page to another .one section of page to another section.
191 EXTERNAL REFERENCE: Home
192 About
193 Contact

194

195 Colors of the links


196 Not visited-blue
197 Active-red
198 After visited-purple(or)violet
199

200
201
202 Multiple paragraph -giving name and id,using id starting with’#’will open that particular paragraph.

203
204
205
206
207 For image<img>

208
209
210

211 DATE:27/01/2023
212 FORMS:
213 <form></form> - to define the form for the feedback website.
214 <label></label – to define the labels like first name,or last name..
215 <input> - input Is for
216 <body>
217 <form>
218 <lable for="fname">First Name</lable>
219 <input type="text" id="fname" name="first_name" placeholder="First Name"><br>
220 <!--<input type="submit" value="submit"><br>-->
221 <label for="lname">Last name</label>
222 <input type="text" id="lname" name="last_name" required>
223 <input type="submit" value="submit">
224 </form>

225 </body>
226
227
228

229 DATE:28/01/2023
230 Table as link
231 <html>
232 <head>
233 <h1>Tables</h1></head>
234 <body>
235 <table border="1" cellspacing="0">
236 <tbody>
237 <tr>
238 <td><a href=#>row1</a></td>
239 <td><a href=#>col1</a></td>
240
241 </tr>
242 <tr>
243 <td><a href=#>row2</a></td>
244 <td><a href=#>col2</a></td>
245 </tr>
246 </tbody>
247 </table>
248 </body>
249 </html>

250
251
252

253 Css-Cascading Style Sheets


254 Resuability and time saving.
255 pages load faster
256 easy amintanances.
257 superior styles to HTML.
258 Multiple devices compatibility.(to create & properties & values & selectors)
259 Css and its types;
260 selectors
261 borders
262 Algorith-With properties and values which perform some basic work with some set of rules.
263 Syntax:
264 Selector
265 {
266 Property:value
267 }
268 Types of CSS in HTML document:
269 =>INLINE CSS.
270 =>INTERNAL CSS
271 =>EXTERNAL CSS.
272
273 Types of selectors in css;
274 =>Element selectors.
275 =>Id selector. FIRST FOUR ARE WIDELY USED AND PREFFERED
276 =>clas selectors.
277 => Universal selectors.
278 =>attribute selectors
279 => pseudo-class selectors
280 =>pseudo-element selectors
281 => Group selectors
282 INLINE CSS
283 <h1 style=”color:blue; background-color:aqua;”>
284

285 Css basics

286
287
288
289
290
291

292 ID selectors;
293 Use # in the style and id=”name” in the div tag.
294 It is not used in other pages
295 Only used in the page.

296 <html>
297 <head>
298 <title>imp.doc</title>
299 <style>
300 #first{
301 height: 100px;
302 width:100px;
303 background-color:deepskyblue;
304 }
305 #second{
306 height: 200px;
307 width:200px;
308 background-color:cornsilk;
309 }
310 #third{
311 height: 300px;
312 width:300px;
313 background-color:deeppink;
314 }
315 #fourth{
316 height: 400px;
317 width:400px;
318 background-color:cyan;
319 }
320 span{
321 color:lawngreen;
322 font-style: italic;
323 }
324 </style>
325 </head>
326 <body>
327 <div id="first">
328 </div>
329 <div id="second">
330 <span>H</span>ello
331 </div>
332 </div>
333 <div id="third">
334 </div>
335 </div>
336
337
338
339
340
341

342 Class selectors;


343 Starting with . in the style and class=”name” in the div.
344 Can be used in next pages too

345
346

347

348

349

350

351

352

353

354

355 Universe selector;


356 Starting with * in the style and class=”name” in the div.
357 It is for all the elements in the html page

358
359
SIZE FOR EVERYTHING
360
*EM= the case of the typographical properties
*EX=x-height of the element is font.
*CH=limit the width of text elements by character count
*REM=Font size of the root element
*LH=Line height of the elemnt
*R/H=line-height properties of the ro SIZE FOR EVERYTHING
*EM= the case of the typographical properties
361 Creating a blocks using id selector;
362 Use # for id selector

363
364
365 TEXT FORMATTING PROPERTIES;
366

367
Text Alignment:
368
text-align:center;
369
Text color:
370 Color:gray;

371 Text decoration:


Text-decoration:overline|line-through|
372
underline|none
373 Text-decoration: underline red double 5px;

374 Text Transformation:


text-transform: capitalize|uppercase
375
|lowercase;
376 Text indentation:

377
text-indent:20px|5cm|30pt;
Letter spacing:
378
letter-spacing:5px;
379
Line height:
380 Line-height:40px;
Text direction:
Direction:rtl|ltr;
Text shadow:
text-shadow:left position|top postion|size of
the blur|color;
text-position:3opx 20px 10px blue;
Word spacing:
Word-spacing:15px;
381

382

383

384

385

386

387

388

389 creating a chessboard using class selector;


390 use ‘ . ’ for class selector.

391
392

393 adding a back ground images in the block using id selector


394
395
396
397 Adding border and background image and paragraph in the block using id selector.

398
399
400 Creating multiple blocks adding images,title,and paragraphs using class selector.hn

401

402 Creating a navigation bar using nav bar tag<nav>

403
404

405 Bootstarp
406 welcome to bootstrap.
407 verify (getbootstrap.com)

408

You might also like