This repository has been archived by the owner on Aug 11, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
2407-Html.txt
116 lines (64 loc) · 3.38 KB
/
2407-Html.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
<meta/>
-------------------------------------------------------------
You can add following entries into <head>
<meta charset="utf-8"/> <----- If you wish to create multi-lingual page.
UTF - Universal Text Format is character encoding scheme to represent charset / alphabets of different languages.
<meta name="author" content="Mr. ABC"/>
<meta name="description" content="3 to 4 lines of page descirption"/>
<meta name="keywords" content="Help, Sale, India, (comma seperated value)"/>
<script>
-------------------------------------------------------------
To embed "JavaScript" code into document:
<script> or <script type="text/javascript">
//statements
</script>
[Note: script element also used to create HTML templates and in that case value of "type" attribute may different then "text/javascript"]
To insert JavaScript code from external source
-------------------------------------------------
<script type="text/javascript"
src="js/app.js"></script>
In above statement, content from app.js will be inserted into
<script></script> if there isn't any content placed inside the start and end <script>. It will failed to add the .js content if you've added content or whitespace inside <script> and </script>
This is illegal : <script src="js/app.js">
var t = 10;
</script>
<link>
--------------------------------------------------------------
To "glue" the CSS and other resources.
<link/> has number of usage but following syntax is to "glue" the CSS resource:
<link rel="stylesheet"
type="text/css"
href="url"/>
<link rel="stylesheet"
href="sample.php"/> <-- dynamic css
<link rel="stylesheet"
href="css/style.css"/> <--- static css resource
HTML elements category
====================================================================
All HTML elements falls into two categories:
1. Inline elements
2. Block elements
Further "Inline" and "Block" elements forms mixed categories including -- Inline-block, table, inline-table and so on.
Inline elements -- Elements height & width will be determined by their content and we cannot set height/width explicitly.
--- <label>, <span>, <b>, <u> etc are example of inline
Block elements --- They share width from parent element. i.e width of block element will be the width of it "parent". Height of block element is depends upon the content it holds.
We can change "height/width" via CSS attributes.
---- html, body, div, p, header, footer, section, article are example of block elements.
(form tag is also block)
<input/> elements are "inline-block" --- we can change height/width manually but till they uses browser's default value.
Developer Tool
====================================================================
It helps the developer to examine DOM structure, elements attributes, style attributes, reference documents, glue documents, requests headers, responses headers, JavaScript console and many more.
Ex:
<!doctype html>
<script>
var no = 10;
var name;
console.log(no,name); //this will be displayed at console of
//developer tool (not at on document)
</script>
<div>
<span>This is <code>JavaScript</code> and <code>HTML</code></span>
<div></div>
</div>
<script> console.log("End of doc."); </script>