Skip to content
This repository was archived by the owner on Dec 4, 2022. It is now read-only.

Commit b280fcb

Browse files
sharilssharils
committed
Add web development
1 parent a4f7220 commit b280fcb

File tree

7 files changed

+11450
-0
lines changed

7 files changed

+11450
-0
lines changed

‎README.md

+24
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,30 @@ git clone --depth=1 --recursive https://github.com/sharils/slides.git /tmp/slide
9494
xdg-open /tmp/slides/github/index.html
9595
```
9696

97+
web development
98+
---------------
99+
100+
### html ###
101+
102+
```sh
103+
git clone --depth=1 --recursive https://github.com/sharils/slides.git /tmp/slides/
104+
xdg-open /tmp/slides/web-development-html/html.markdown
105+
```
106+
107+
### php ###
108+
109+
```sh
110+
git clone --depth=1 --recursive https://github.com/sharils/slides.git /tmp/slides/
111+
xdg-open /tmp/slides/web-development-php/index.html
112+
```
113+
114+
### js ###
115+
116+
```sh
117+
git clone --depth=1 --recursive https://github.com/sharils/slides.git /tmp/slides/
118+
xdg-open /tmp/slides/web-development-js/index.html
119+
```
120+
97121
javascript.tw
98122
-------------
99123

‎web-development-html/html.markdown

+227
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,227 @@
1+
html document
2+
=============
3+
4+
html vs xhtml
5+
-------------
6+
| html vs xhtml | html | xhtml |
7+
| closing tag | optional | required |
8+
| attribute value | optional | required |
9+
| single or double quotes | optional | required |
10+
| case sensitivity | insensitive | lower case |
11+
12+
comment
13+
-------
14+
<!-- todo -->
15+
16+
element
17+
-------
18+
19+
### usage ###
20+
- <element />
21+
- <element></element>
22+
23+
### example ###
24+
- <br />
25+
- <p></p>
26+
27+
### all elements ###
28+
- [Index of Elements] (http://www.w3.org/TR/REC-html40/index/elements.html)
29+
- E means <element/>.
30+
- D, F means do not use it.
31+
- You do not need to care about O, E.
32+
33+
attribute
34+
---------
35+
36+
### usage ###
37+
- attribute-name="attribute-value"
38+
- id attribute's value must be unique in the document.
39+
40+
### example ###
41+
<br id="example" />
42+
43+
### all attributes ###
44+
- [Index of Attributes] (http://www.w3.org/TR/REC-html40/index/attributes.html)
45+
- Related Elements means the attribute can only be used with these element.
46+
e.g. only td and th can have abbr attribute.
47+
- D means do not used it.
48+
- F means only use it with iframe.
49+
- #REQUIRED means the related elements require this attribute.
50+
e.g. form requires action
51+
52+
block and inline
53+
----------------
54+
- an element is either a block element or an inline elemenet.
55+
- block element can have block and inline elements.
56+
- inline elements can have only inline elements.
57+
58+
### block element ###
59+
- [definition] (http://www.w3.org/TR/REC-html40/sgml/dtd.html#block)
60+
- address, blockquote, div, dl, fieldset, form, hr, noscript, p, table,
61+
h1, h2, h3, h4, h5, h6, ul, ol, pre
62+
63+
### inline element ###
64+
- [definition] (http://www.w3.org/TR/REC-html40/sgml/dtd.html#inline)
65+
66+
document structure
67+
------------------
68+
- [content model definitions] (http://www.w3.org/TR/html401/intro/sgmltut.html#h-3.3.3.1)
69+
- [body] (http://www.w3.org/TR/html401/struct/global.html#edef-BODY)
70+
71+
markup validation service
72+
-------------------------
73+
- [Markup Validation Service] (http://validator.w3.org/#validate_by_input+with_options)
74+
- Validate HTML fragment
75+
76+
head
77+
----
78+
<head>
79+
<meta content="application/xhtml+xml; charset=UTF-8" http-equiv="Content-Type" />
80+
<title>example title</title>
81+
</head>
82+
83+
image
84+
-----
85+
<img alt="example" src="http://example.com/image.png" />
86+
87+
table
88+
-----
89+
<table>
90+
<caption>Example</caption>
91+
<thead>
92+
<tr>
93+
<th>year</th>
94+
<th>month</th>
95+
</tr>
96+
</thead>
97+
<tfoot>
98+
<tr>
99+
<th>year</th>
100+
<th>month</th>
101+
</tr>
102+
</tfoot>
103+
<tbody>
104+
<tr>
105+
<td>January</td>
106+
<td>1</td>
107+
</tr>
108+
<tr>
109+
<td>February</td>
110+
<td>2</td>
111+
</tr>
112+
</tbody>
113+
<tbody>
114+
<tr>
115+
<td>March</td>
116+
<td>3</td>
117+
</tr>
118+
</tbody>
119+
</table>
120+
121+
form
122+
----
123+
<form action="#">
124+
<fieldset>
125+
<legend>text fields</legend>
126+
<label>
127+
<span>subject</span>
128+
<input type="text" value="type your subject here" />
129+
</label>
130+
<label>
131+
<span>notes</span>
132+
<textarea cols="80" rows="24">type your notes here</textarea>
133+
</label>
134+
</fieldset>
135+
<fieldset>
136+
<legend>radio buttons</legend>
137+
<label>
138+
<span>January</span>
139+
<input name="month" type="radio" value="1" />
140+
</label>
141+
<label>
142+
<span>February</span>
143+
<input name="month" type="radio" value="2" />
144+
</label>
145+
</fieldset>
146+
<fieldset>
147+
<legend>checkboxes</legend>
148+
<label>
149+
<span>Monday</span>
150+
<input name="day" type="checkbox" value="1" />
151+
</label>
152+
<label>
153+
<span>Tuesday</span>
154+
<input name="day" type="checkbox" value="2" />
155+
</label>
156+
</fieldset>
157+
<fieldset>
158+
<legend>buttons</legend>
159+
<button type="button">do nothing</button>
160+
<button type="reset">cancel</button>
161+
<button type="submit">ok</button>
162+
</fieldset>
163+
<fieldset>
164+
<legend>disabled and readonly</legend>
165+
<label>
166+
<span>disabled</span>
167+
<input disabled="disabled" type="text" value="type your subject here" />
168+
</label>
169+
<label>
170+
<span>readonly</span>
171+
<input readonly="readonly" type="text" value="type your subject here" />
172+
</label>
173+
</fieldset>
174+
<fieldset>
175+
<legend>menus</legend>
176+
<label>
177+
<span>single select</span>
178+
<select>
179+
<optgroup label="Red Fruit">
180+
<option value="apple">Apple</option>
181+
<option value="strawberry">Strawberry</option>
182+
</optgroup>
183+
<optgroup label="Yellow Fruit">
184+
<option value="banana">Banana</option>
185+
<option value="mango">Mango</option>
186+
</optgroup>
187+
</select>
188+
</label>
189+
<label>
190+
<span>multiple select</span>
191+
<select multiple="multiple">
192+
<optgroup label="Red Fruit">
193+
<option value="apple">Apple</option>
194+
<option value="strawberry">Strawberry</option>
195+
</optgroup>
196+
<optgroup label="Yellow Fruit">
197+
<option value="banana">Banana</option>
198+
<option value="mango">Mango</option>
199+
</optgroup>
200+
</select>
201+
</label>
202+
</fieldset>
203+
</form>
204+
205+
bad practices
206+
-------------
207+
208+
### document and style separation ###
209+
- Do not use the style attribute.
210+
- Do not use br element to layout elements or style your document.
211+
- Do not use &nbsp; to layout elements or style your document.
212+
- Do not use table to layout your page elements.
213+
- Do not use style element to embed CSS.
214+
- Do not use tt, i, b, big, small, strike, s, u, font and basefont elements.
215+
216+
### document and behaviour separation ###
217+
- Do not use the event attributes, e.g. onclick, onsubmit, etc.
218+
- Do not use script element to embed JavaScript.
219+
220+
style suggestion
221+
----------------
222+
- Sort your attributes in alphabet. Less conflict.
223+
- Connect multiple words using dashes. Because css uses dash.
224+
225+
resources
226+
---------
227+
- [HTML 4.01 Specification] (http://www.w3.org/TR/REC-html40/)

‎web-development-js/index.css

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
.tank
2+
{
3+
width: 14em;
4+
}
5+
6+
.tank .container,
7+
.tank .level-input,
8+
.tank .level-max,
9+
.tank .level-min,
10+
.tank .set
11+
{
12+
width: 100%;
13+
}
14+
15+
.tank .container
16+
{
17+
border: black solid 2px;
18+
height: 22.6em;
19+
position: relative;
20+
}
21+
22+
.tank .container .level
23+
{
24+
background: cyan;
25+
border-top: black solid thin;
26+
bottom: 0;
27+
height: 50%;
28+
position: absolute;
29+
width: 100%;
30+
}
31+
32+
.tank .level .value
33+
{
34+
text-align: center;
35+
}
36+
37+
.tank .set
38+
{
39+
display: block;
40+
margin: auto;
41+
}

‎web-development-js/index.html

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>Tank</title>
5+
<meta charset="utf-8">
6+
<link href="index.css" rel="stylesheet" type="text/css">
7+
</head>
8+
<body>
9+
<h1>Tank</h1>
10+
<div class="tank">
11+
<div class="container">
12+
<div class="level">
13+
<div class="value">
14+
50%
15+
</div>
16+
</div>
17+
</div>
18+
<input class="level-max" step="0.1" type="number" value="0">
19+
<input class="level-input" step="0.1" type="number" value="0">
20+
<input class="level-min" step="0.1" type="number" value="0">
21+
<button class="set" type="submit">
22+
Set
23+
</button>
24+
</div>
25+
<script src="jquery-2.0.3.js" type="text/javascript"></script>
26+
<script src="index.js" type="text/javascript"></script>
27+
</body>
28+
</html>

‎web-development-js/index.js

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
(function(global, undefined) {
2+
"use strict";
3+
4+
var levelInput = $(".level-input"),
5+
levelMax = $(".level-max"),
6+
levelMin = $(".level-min");
7+
8+
levelInput.change(function() {
9+
var level = $(".level"),
10+
levelValue = $(".value"),
11+
percent,
12+
value = this.value,
13+
valueMax = levelMax.val(),
14+
valueMin = levelMin.val();
15+
16+
percent = (value - valueMin) / (valueMax - valueMin);
17+
percent = Math.round(percent * 100) / 100;
18+
percent *= 100;
19+
percent += "%";
20+
level.css("height", percent);
21+
levelValue.text(value);
22+
});
23+
})(this);

0 commit comments

Comments
 (0)