-
Notifications
You must be signed in to change notification settings - Fork 0
/
theory.txt
306 lines (226 loc) · 8.32 KB
/
theory.txt
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
this is a theory file
HTML - Hypertext markup Language
- used to create webpages
- widely used in web
- Just a markup language not a programming language
Hypertext - Text with in text
- Way to link two or more pages
- Click a link takes to new page
Doctype - This tag specifies the language we write on the page
HTML - This tag signals that from here we are going to write HTML code
HEAD - Here we write meta data for the pages mostly meant for search engines
Body - This is where content of the page goes (headings, images, hyperlinks)
Only content inside the body section will be displayed in the browser
Title- Title of the webpage
HTML Element - Defined by a start tag and we write some content in between and end tag
Some of the elements will have no content and no end tag
<hr> - Horizontal line with no content and no end tag
<br> - Line break which is an Empty element
Features of HTML
----------------
1. simple and easy to use
2. Platform independent (Windows, Mac, Linux)
3. case insensitive language
Note: Write all the tags in lower-case for consistency and for the better readability
Building Blocks of HTML
-----------------------
Tags - Surrounds the content and apply meaning to it, write using < and > brackets
attribute - Provides extra information about the element
<tag attribute-name="attribute-value">
Tags in HTML
--------------
1. Heading Tags - <h1>,<h2>,<h3>,<h4>,<h5>,<h6>
- <b></b> - bold
- <i></i> - italic
- <u></u> - underline
2. Meta Tags - Doctype, title, link, meta, style
style - <style>
.website {
color: teal;
}
</style>
link - <link href="./styles.css" rel="stylesheet">
3. Text Tags - <p>,<h1>..<h6>, <strong><em>
4. Link tags - <a>
5. Image and Area - <img><area>
6. List Tags - <ul>,<ol>,<li>
7. Table tags - table, tr, td . th, thead, tbody
8. Form tags - <form>, <input>, <textarea>, <select>
9. Scrit tags - Script and no-Script
HTML Text Tags
----------------
<b> - bold
<i> - italic
<u> - underline
<strong>
<em> - display content in italic
<mark> - to highlight the text that is of relevance
code - Defines a fragment of computer code
<small> - Defines smaller text e.g. copyright or other side-comments
<sup> - Super Script
<sub> - subscript
<del> - is used to identify text that has been deleted from a document
but retained to show the history of modification to the document
<ins> - is used when a text that has been inserted into a document
<cite> - Defines title of some creative work
<q> - Quotation
<abbr> - abbreviation
<address> - To display Address
- used to add space
Link Tags
----------
<a> - achor tag , defines a hyperlink which is used to provide link from one page
to other page
href - Most import attribute of element
target - _blank - opens link in a new table_parent, _self, _top
Image Tags
----------
<img> - Will help us to display images
src - which is source
alt - Alternate text
List Tags
---------
UL - Unordered List -> No order is required
OL - Ordered List - Use it when you are listing steps which needs be in order
HTML CSS
---------
CSS - Cascading Stylesheet to format the layout of our webpage
- with CSS you can control the color, font, size of text, element position,
background images and background-color
CSS - can be added to HTML document in 3 ways
Inline - by using style attribute inside HTML element
Internal - by using <style> element in <head> section
External - by using <link> element to link external CSS
Javascript execution engines
----------------------------
Chrome - v8
IE - Chakra
Firefox - SpiderMonkey
HTML FORMS
----------
Required when you want to collect some data from the user.
<form> - used to create HTML form
1. Text Input controls - Single
- Password
- Multiline
2. Checkbox control
3. Radio Box control
4. Select Box control
5. File Select control
6. Hidden Control
7. clickable button
8. Submit and Reset button
Block-level & Inline elements
---------------------------------------
Every element has default display value depending on what type it is
There are two major display values : block and inline
Block-level elements
---------------------
Block level element occupies the entire space of the parent
Always starts on new line and takes up the full width available
Inline elements
----------------
It doesn't start on a new line and only takes up as much width as neccessary
can not add block level elements to inline elements
Block Level Elements Inline Elements
--------------------- ------------------
H1-H6 <span>
table <a>
p <button>
div <sup>
form <sub>
video <textarea>
hr <label>
address <b>
Header <strong>
footer <img>
span - An inline element used to mark up a part of a text or part of a document
Label - This is used when we have form or input elements
div - is Always used as a container for other elements
- defines divison or section in HTML document
- any sort of content can be put inside <div> tag
- this is know an DIVISON tag
HTML DOM ( Document Object Model)
---------------------------------
When a page is loaded broswer creates a document object model of the page
Usage : with HTMl DOM javascript can access all the elements of an HTML document, it gets all the power it needs.
Javascript can add, remove, change all the HTML elements, HTMl attributes, css, styles in the page
Javascript can react to HTML events and can create new HTML events in the page
Video and Audio Tags
-----------------------
<Video controls autoplay muted>
<Audio controls autoplay muted>
controls - The browser will ofer controls to allow the user to control
audio playback, volume , pause/resume
autoplay - This audio will automatically begin playback as soon as it can
without waiting for the entire audio file to finish downloading
muted - will mute the audio
HTML Class
----------
HTML class attribute is used to specify a class for an element
multiple HTML elements can share the same class
Padding & margin
-----------------
Padding - is the space between the text and border
margin - is the space between the elements
HTML Responsive Webdesign
---------------------------
Responsive webdesign is about creating webpages that look good in all devices
Will automatically adjust for different screen sizes and viewports
to crete responsive website we need <meta> tag
<meta name="viewport" content="width=device-width, Initial-scale=1.0">
meta - This will set the viewport of our page which will give instructions to browser
on how to control page's deminesion and scaling
viewport - This is user's vivisible are of the webpage.
This varies with device.
This will be smaller on mobile phone and larger on computer screen
Initial-scale - Governs the zoom level when page is loaded for the first time.
Semantic Elements
-----------------
Elements with meaning
Semantic
---------
<article> - specifies independent, self-contained content
<aside> - defines some content aside from the content it is placed in
<details> - specifies additional details that the user can
open and close on demand
<figure>
<header>
<footer>
<main>
<mark>
<nav>
<section>
<summary>
<time>
Non Semantic Eelemnts
-----------------------
<div>
<span>
<p>
CSS3
-----
1. Bring Superior styling to HTML
2. Multiple Device Compatibility
3. Follows Global WebStandrads
4. Easy maintainance
New Features
------------
new selectors - Better selection of HTML elements
Shadow Effects - Box-shadow, text shadow
Rounded Corners - Easily Round the corners of images and block level elements
Opacity - Trasaprency
Gradients - Using Multiple colors at the same times
COLORS
--------
Standard COLORS
HTML5 Colors
Hexadecimal
RGB - RED GREEN BLUE
Combinator Selectors
--------------------
Which explains the relationship between Selectors
1. descendent selector (space)
2. child selector (>)
3. adjacent selector +
4. general sibling selctor (~)