Hướng dẫn lập trình PHP
Mời các bạn cùng tham khảo tài liệu Hướng dẫn lập trình PHP để làm quen với những kiến thức về PHP và cách thức lập trình với PHP. Chúc các bạn thành công!
Hướng dẫn lập trình PHP
1
Hướng dẫn về PHP
Tác giả: Black Art gởi trong diễn đàn hackervn.net
1. Php là gì?
PHP là một ngôn ngữ lập trình kiểu script , chạy trên Server và trả về mã HTML cho trình
duyệt.
VD:
Example
2.
3.
echo ("some editors (like FrontPage) don't
like processing instructions");
4.
Cách 1 chỉ có thể sử dụng nếu những tag ngắn được cho phép sử dụng. Có thể sửa
short_open_tag trong cấu hình của php hoặc biên dịch file php với lựa chọn cho phép dùng
các tag ngắn.
Tương tự như vậy, cách thứ 4 chỉ có tác dụng nếu asp_tag được đặt trong file cáu hình của
PHP
PHP cho phép hỗ trợ các kiểu chú thích của cả C, C++ và Unix shell.
VD:
2. Các kiểu dữ liệu:
2.1Số nguyên : Được khai báo và sử dụng giá trị giiống với C:
VD: $a = 1234; # decimal number
$a = -123; # a negative number
$a = 0123; # octal number (equivalent to 83 decimal)
2
$a = 0x12; # hexadecimal number (equivalent to 18 decimal)
2.2 Số thực:
VD :$a = 1.234; $a = 1.2e3;
Chú ý: Khi sử dụng các số thực để tính toán , có thể sẽ làm mất giá trị của nó. Vì vậy, nên
sử dụng các hàm toán học trong thư viện chuẩn để tính toán.
2.3 Xâu :
Có 2 cách để xác định 1 xâu: Đặt giữa 2 dấu ngoặc kép (") hoặc giữa 2 dấu ngoặc đơn ('.
Chú ý: Các biến giá trị sẽ không được khai triển trong xâu giữa 2 dấu ngoặc đơn.
2.4 : Mảng :
Mảng thực chất là gồm 2 bảng : bảng chỉ số và bảng liên kết.
a. Mảng 1 chiều : Có thể dùng hàm : list() hoặc array() hoặc liệt kê các giá trị của từng phần
iử trong mảng để tạo mảng . Có thể thêm các giá trị vào mảng để tạo thành 1 mảng. -->
Dùng giống trong C
Có thể dùng các hàm asort(), arsort(), ksort(), rsort(), sort(), uasort(), usort(), and uksort() để
sắp xếp mảng. Tuỳ thuộc vào việc bạn định sắp xếp theo kiểu gì.
b. Mảng nhiều chiều: Tương tự C. bạn có thể dùng như VD sau:
$a[1] = $f; # one dimensional examples
$a["foo"] = $f;
$a[1][0] = $f; # two dimensional
$a["foo"][2] = $f; # (you can mix numeric and associative indices)
$a[3]["bar"] = $f; # (you can mix numeric and associative indices)
PHP3 không thể tham chiếu trự tiếp từ một mảng nhiều chièu khi ở bên trong 1 xâu:
VD :
$a[3]['bar'] = 'Bob';
echo "This won't work: $a[3][bar]";
Kết quả trả ra sẽ là: This won't work: Array[bar].
Nhưng với VD sau sẽ chạy đúng:
$a[3]['bar'] = 'Bob';
echo "This will work: " . $a[3][bar];
Với PHP4, vấn đề sẽ được giả quyết bằng cách cho mảng vào giữa 2 dấu ngoặc móc { }
VD : $a[3]['bar'] = 'Bob';
echo "This will work: {$a[3][bar]}";
PHP không yêu cầu phải khai báo trước kiểu dữ liệu cho các biến, Kiểu dữ liệu của biến sẽ
phụ thuộc vào kiểu dữ liệu mà bạn gán cho nó,
VD :
$foo = "0"; // $foo là kí tự ASCII 48
$foo++; // $foo is xâu "1" (ASCII 49)
$foo += 1; // $foo là số nguyên (2)
$foo = $foo + 1.3; // $foo là số thực (3.3)
$foo = 5 + "10 Little Piggies"; // $foo là số nguyên (15)
3. Biến - giá trị:
PHP quy định một biến được biểu diễn bắt đầu bằng dấu $, sau đó là một chữ cái hoặc dấu
gạch dưới.
3.1 Một số biến đã được tạo sẵn :
argv : Mảng tham số truyền cho script. Khi đoạn script chạy bằng dòng lệnh, tham số này sẽ
được dùng giống như C để truy nhập các tham số trên dòng lệnh.
argc : số các tham số đựoc truyền. Dùgn với argv;
PHP_SELF : tên cỷa đoạn mã script đang thực hiện. Nếu PHP đang được chạy từ dòng lệnh
thì tham số này không có giá trj.
HTTP_COOKIE_VARS: một mảng các giá trị được truyền tới script hiện tại bằng HTTP
cookie. Chỉ có tác dụng nếu "track_vars" trong cấu hình được đặt hoặc chỉ dẫn
3
HTTP_GET_VARS: Mảng các giá trị truyền tới script thông qua phương thức HTTP GET.
Chỉ có tác dụng nếu "track_vars" trong cấu hình được đặt hoặc chỉ dẫn
HTTP_POST_VARS:
3.2 Phạm vi giá trị:
PHP coi 1 biến có một giới hạn. Để xác định một biến toàn cục (global) có tác dụng trong
một hàm , ta cần khai báo lại. Nếu không giá trị của biến sẽ được coi như là cục bộ trong
hàm.
VD :
$a = 1;
$b = 2;
Function Sum () {
global $a, $b;
$b = $a + $b;
}
Sum ();
echo $b;
Khi có khai báo global ở trên, $a và $b được cho biết đó là những biến toàn cục. Nếu không
có khai báo global, $a và $b chỉ được coi là các biến bên trong hàm Sum(). Điều này khác
với C
Một cách khác để dùng biến toàn cục trong 1 hàm là ta dung mảng $GLOBAL của PHP
VD ở trên sẽ có thể viết như sau:
$a = 1;
$b = 2;
Function Sum () {
$GLOBALS["b"] = $GLOBALS["a"] + $GLOBALS["b"];
}
Sum ();
echo $b;
Một chú ý khác là khai báo static. Với khai báo này bên trong một hàm với 1 biến cục bộ, giá
trị của biến cục bộ đó sẽ không bị mất đi khi ra khỏi hàm.
VD :
Function Test () {
static $a = 0;
echo $a;
$a++;
}
Với khai báo như trên , $a sẽ không mất đi giá trị sau khi thực hiện lơi gọi hàm Test() mà $a
sẽ được tăng lên 1 sau mỗi lần gọi hàm Test().
3.3 Tên biến:
Một biến có thể gắn với 1 cái tên .
VD:
$a = "hello";
$$a = "world";
==> $hello = "world"
và
echo "$a ${$a}";
echo "$a $hello";
4
Kết quả ra sẽ là : hello world
Chú ý : bạn có thể gặp phải trường hợp không rõ ràng khi sử dụng cách này với mảng . VD :
$$a[1] sẽ hiểu là bạn muốn dùng $a[1] như 1 biến hay dùng $$a như 1 biến với [1] là chỉ
số?
Để tránh trường hợp này , cần có sựu phân biệt rõ bằng dấu { }. VD :${$a[1]} hoặc ${$a}[1].
3.4 Các giá trị bên ngoài phạm vi PHP
HTML Form : khi 1 form gắn với 1 file php qua phương thức POST
VD:
Name:
PHP sẽ tạo 1 biến $name bao gồm mọi giá trị trong truờng Name của Form.
PHP có thể hiểu được một mảng một chiều gồm các giá trị trong 1 form. Vì vậy, bạn có thể
nhóm những giá trị liên quan lại với nhau hoặc sử dụng đặc tính này để nhận các giá trị từ 1
đầu vào tuỳ chọn.(multi select input)
Khi tính chất track_vars được đặt trong cấu hình hoặc có chỉ dẫn . các
giá trị được submit được lấy ra qua phương thức GET và POST có thể lấy từ 2 mảng toàn
cục $HTTP_POST_VARS và $HTTP_GET_VARS
IMAGE SUBMIT:
Khi dùng 1 image để thực hiện submit, có thể dùng tag như sau:
Khi người dùng click chuột trên ảnh, form tương ứng sẽ được gửi tới server kèm theo 2 giá
trị thêm vào : sub_x và sub_y. Những biến này sẽ lưu giữ toạ đọ mà người dùng đã click
chuột trên ảnh. Người lạp trình có kinh nghiệm sẽ thấy rằng trên thực tế, trình duyệt gửi các
giá trị có chu kỳ thời gian nhưng PHP đã tạo cảm giãc gần như việc gửi các giá trị đó là liên
tục.
HTTP Cookies :
PHP hỗ trỡ HTTP cookies theo định dạng của Netscape. Cookies file lưu giữ thông tin của
các trình duyệt từ xa và qua đó có thể theo dõi hay nhận biết người sử dụng. Có thể dùng
Cookies bằng hàm SetCookie(). Hàm này cần được gọi trước khi thông tin được gửi tới trình
duyệt. Bất kỳ cookie nào gửi tới bạn từ máy khách (client) sẽ tự động chuyển thành dữ liệu
của phương thức GET và POST.
Nếu bạn muốn có nhiều giá trị trong 1 cookie, chỉ cần thêm vào dấu [ ] với tên của cookie.
VD :
SetCookie ("MyCookie[]", "Testing", time()+3600);
Chú ý rằng cookie sẽ thay thế cho cookie cùng tên, trừ trườg hợp khác đường dẫn hoặc
miền.
BIẾN MÔI TRƯỜNG:
PHP tự động tạo biến cho các biến môi trường như 1 biến bình thường của PHP
VD :
echo $HOME; /* Shows the HOME environment variable, if set. */
Vì thông tin tới qua các phương thức GET, POST , Cookie cũng tự đông tạo các biến PHP,
thỉnh thoảng bạn nên đọc 1 biến từ môi trường để chắc chắn rằng bạn có đúng version. Hàm
getenv() và putenv() giúp bạn đọc và ghi với các biến môi trường.
DẤU CHẤM TRONG TÊN BIẾN:
Bình thường, PHP không thay đổi tên biến khi biến đó được truyền vào đoạn script. Tuy
nhiên, nên chú ý rằng dáu chấm (.) không phải là một ký hiệu hợp lệ trong tên biến đối với
PHP. Vì vậy, PHP sẽ tự động thay thế các dấu chấm bằng dấu gạch dưới.(_)
5
4. CONSTANTS
PHP định nghĩa sẵn một vài hằng số:
_FILE_ : tên của script file đang được thực hiện.
_LINE_ : số dòng của mã script đang được thực hiện trong script file hiện tại.
_PHP_VERSION_ : version của PHP
_PHP_Ó : tên hệ điều hành mà PHP đang chạy
TRUE
FALSE
E_ERROR : báo hiệu có lỗi
E_PARSE : báo lỗi sai khi biên dịch
E_NOTICE : Một vài sự kiện có thể là lỗi hoặc không.
E_ALL :
Có thể định nghĩa một hằng số bằng hàm define()
VD :
5. BIỂU THỨC
Biểu thức là một phần quan trọng trong PHP. Phần lớn mọi thứ ban viết đều được coi như 1
biểu thức. Điều này có nghĩa là mọi thứ đều có 1 giá trị.
Một dạng cơ bản nhất của biểu thức bao gồmcác biến và hằng số.
PHP hỗ trợ 3 kiểu giá trị cơ bản nhất: số nguyên, số thực, và xâu. Ngoài ra còn có mảng và
đối tượng. Mỗi kiểu giá trị này có thẻ gán cho các biến hay làm giá trị trả ra của các hàm.
Bạn có thể thao tác với các biến trong PHP giống như với trong C.
VD
$b = $a = 5; /* assign the value five into the variable $a and $b */
$c = $a++; /* post-increment, assign original value of $a
(5) to $c */
$e = $d = ++$b; /* pre-increment, assign the incremented value of
$b (6) to $d and $e */
/* at this point, both $d and $e are equal to 6 */
$f = double($d++); /* assign twice the value of $d before
the increment, 2*6 = 12 to $f */
$g = double(++$e); /* assign twice the value of $e after
the increment, 2*7 = 14 to $g */
$h = $g += 10; /* first, $g is incremented by 10 and ends with the
value of 24. the value of the assignment (24) is
then assigned into $h, and $h ends with the value
of 24 as well. */
6.CÁC CẤU TRÚC LỆNH:
6.1 If ....else....else if:
if (điều kiện) { do something; }
elseif ( điều kiện ) { do something;}
else { do something;}
6.2 Vòng lặp :
while ( DK) { ...}
do { .....} white ( DK );
for (bieuthuc1; bieuthuc2; bieu thuc3) {.....}
PHP 4 only :
foreach(array_expression as $value) statement
foreach(array_expression as $key => $value) statement
6.3 break và continue:
6
break : thoát ra khỏi vòng lặp hiện thời
continue : bỏ qua vòng lặp hiện tại, tiếp tục vòng tiếp theo.
6.4 switch
switch (tên biến) {
case trường hợp 1: ..... break;
case trường hợp 2: ..... break;
case trường hợp 3: ..... break;
default :
}
7 HÀM:
Dùng giống với C++. Ngoại trừ bạn không cần phải khai báo kiểu cho tham số của hàm:
7.1 Tham trị :
VD:
function takes_array($input) {
echo "$input[0] + $input[1] = ", $input[0]+$input[1];
}
7.2 Tham biến:
function add_some_extra(&$string) {
$string .= 'and something extra.';
}
7.3 Tham số có giá trị mặc định:
function makecoffee ($type = "cappucino") {
return "Making a cup of $type.\n";
}
Chú ý : khi sử dụng hàm có đối số có giá trị mặc định, các biến này sẽ phải nằm về phía phải
nhát trong danh sách đối số.
VD : Sai
function makeyogurt ($type = "acidophilus", $flavour) {
return "Making a bowl of $type $flavour.\n";
}
Đúng ;
function makeyogurt ($flavour, $type = "acidophilus") {
return "Making a bowl of $type $flavour.\n";
}
7.4 Giá trị trả lại của hàm:
Có thể là bất kỳ giá trị nào, Tuy vây, không thể trả lại nhiều giá trị riêng lẻ nhưng có thể trả
lại một mảng các giá trị.
VD
function small_numbers() {
return array (0, 1, 2);
}
Để trả lại một tham trỏ, bạn cần có dấu & ở cả khai báo của hàm cũng như ở giá trị trả lại.
VD :
function &returns_reference() {
return &$someref;
}
$newref = &returns_reference();
7.5 Hàm biến:
PHP cho phép sử dụng hàm giá trị Nghĩa là khi một biến được goi có kèm theo dấu ngoặc
đơn , PHP sẽ tìm hàm có cùng tên với giá trị biến đó và thực hiện
7
VD
8. CÁC TOÁN TỬ:
PHP có các toán tử cho các phép số học : + - * / %
Các toán tử logic : and or xor ! && ||
Toán tử thao tác với bit : & | ^ ~ >
Toán tử so sánh : ==, != ,< ,> ,=, ==== (bằng va cùng kiểu - PHP4 only), !== (khác
hoặc khác kiểu - PHP4 only)
Toán tử điều khiển lỗi : @ - khi đứng trước 1 biểu thức thì các lỗi của biểu thức sẽ bị bỏ qua
và lưu trong $php_errormsg
VD:
8
Lớp Cart ở đây là một kiểu dữ liệu, vì vậy bạn có thể tạo một biến có kiểu này với toán tử
new
VD:
$cart = new Cart;
$cart->add_item("10", 1);
Lớp có thể được mở rộng bằng những lớp khác. Lớp mới thu được có tất cả những biến và
hàm của cá lớp thành phần. Thực hiện việc thừa kế này bằng từ khoá "extends". Chú ý : kế
thừa nhiều lớp 1 lúc không được chấp nhận.
VD :
class Named_Cart extends Cart {
var $owner;
function set_owner ($name) {
$this->owner = $name;
}
}
Các hàm khởi tạo của lớp được gọi tự động khi bạn gọi toán tử new.
Tuy nhiên, các hàmkhởi tạo của lớp cha sẽ không được gọi khi hàm khởi tạo của lớp con
được gọi. Hàm khởi tạo có thể có đối số hoặc không,
10. THAM CHIẾU:
Tham chiếu trong PHP có nghĩa là lấy cùng 1 giá trị bằng nhiều tên biến khác nhau. Khác
với con trỏ trong C, tham chiếu là một bảng các bí danh. Chú ý : trong PHP, tên biến và nôi
dung của biến là khác nhau. Vì vậy, cùng 1 nội dugn có thể có nhiều tên khác nhau.
Tham chiếu PHP cho phép bạn tạo 2 biến có cùng nôi dung.
VD :
$a = & $b; -- > $a, $b trỏ tới cùng 1 giá trị.
Tham chiếu truỳen giá trị bằng tham chiếu. Thực hiện việc này bằng cách tạo một hàm cục
bộ và truyền giá trị được tham chiếu
VD:
function foo (&$var) {
$var++;
}
$a=5;
foo ($a);
--> Kết quả : $a = 6;
Giá trị trả lại của một hàm bằng tham chiếu rất tiện khi bạn muốn sử dụng hàm để tìm 1 giá
trị trong 1 phạm vi nào đó.
VD :
function &find_var ($param) {
...code...
return $found_var;
}
$foo =& find_var ($bar);
Khi bạn muốn loại bỏ mối liên kết giữa tên biến và giá trị của biến, sử dụng hàm unset()
VD :
$a = 1;
$b =& $a;
unset ($a);
11. THAO TÁC VỚI ẢNH:
PHP không bị giới hạn với mã HTML được trả lại cho trình duyệt. Vì vậy, có thể dùng PHP
để tạo và thao tác với các file ảnh có định dạng khác nhau, bao gồm :gif, png, jpg, wbmp,
9
and xpm. PHP có thể đưa các file ảnh trực tiếp đến các trình duyệt. Bạn sẽ cần biên dịch
PHP với thư viện GD bao gồm các hàm thao tác với ảnh. GD và PHP có thể sẽ cần có thêm
1 số thư viện khác, tuỳ thuộc vào định dạng của file ảnh cần dùng.
VD : Tạo ảnh GIF với PHP
giả sử VD trên trong file button.php . KHi đó, để sử dụng ta dùng tag : . ,
12. MySQL và PHP
Để connect tới 1 CSDL trên MySQL server rất đơn giản. Bạn chỉ cần dùng hàm
mysql_connect(host, user, password) để mở 1 kết nối tới MYSQL server với kết quả là giá trị
trả về của hàm (Giả sử là biến $db).
Sau đó, dùng hàm mysql_select_db(database_name, link_id) để chọn CSDL bạn muốn kết
nối.
Để thực hiện một câu lệnh truy vấn, dùng hàm mysql_query(query, link_ID). Giá trị trả lại của
hàm là kết quả của câu truy vấn. Nếu bỏ qua link_ID thì kết nối cuối cùng tới MySQL server
sẽ được thực hiện.
Bạn có thể xem ví dụ sau sẽ hiểu rõ hơn.
Ngoài cách dùng hàm mysql_result() để lấy kết quả thực hiện , bạn có thể dùng các hàm
khác : mysql_fetch_row(), mysql_fetch_array(), and mysql_fetch_object().
* mysql_fetch_row($result) : trả về một mảng các dữ liệu lấy từ 1 dòng trong CSDL. Nếu đã
ở cuối CSDL, giá trị trả về là false. Bạn phải dùng chỉ số của các trường trong CSDL nếu
muốn lấy dữ liệu,
VD :
10
* mysql_fetch_array (int result [, int result_type]) : trả về một mảng chứa dữ liệu lấy từ 1
dòng trong CSDL. Tương tự như mysql_fetch_row() nhưng bạn có thể lấy trực tiếp tên
trường để lấy dữ liệu.
VD : Cùng một CSDL như trên, bạn có thể thấy sự khác biệt
*mysql_fetch_object : chuyển kết quả thành một đối tượng với các trường là các trường
trong CSDL.
VD :
0. Tiêu chuẩn của HTML
Đối với bất cứ một vấn đề gì, luôn luôn có những luật để tuân theo. Thật may mắn, với
HTML những luật này rất ít và những gì mà HTML cung cấp thì rất là lớn...
Mục đích
Ở đây chỉ là sự giới thiệu về một vài khái niệm liên quan đến HTML. Sau bài học này bạn có
thể:
11
• Diễn tả phần quan trọng của những tiêu chuẩn HTML.
• Nhận biết được sự khác nhau giữa HTML 2.0 và HTML 3.0
Bài học
HTML, hayHyperText Markup Language, là một sự định dạng để Web browser hiển thị
những tài liệu multimedia. Bản thân những tài liệu chỉ là những tập tin văn bản đơn giản
(ASCII) với những tag hoặc những đoạn mã đặc biệt mà một Web browser biết cách thông
dịch và hiển thị nó trên màn hình của bạn.
Giới thiệu về những tiêu chuẩn
World Wide Web thật là thú vị - Nó ở khắp mọi nơi.
Hãy nhớ rằng những thứ tạo ra Web (và Internet nói chung) là phù hợp với những luật được
công nhận để hầu hết loại máy tính có thể giao tiếp và chia xẻ thông tin với nhau.
Ở đâu có thể tìm thấy những tiêu chuẩn HTML được sử dụng ở đây?
Tất cả những gì mà chúng ta sẽ học trong tài liệu này là sự trợ giúp để tạo ra những tài liệu
phù hợp với HTML standards.. Khi sử dụng HTML tiêu chuẩn, các bài làm của bạn sẽ "chia
xẻ được" (share-able) một cách rộng rãi trong sự phát triển nhanh chóng của mạng trong
tương lai. Tiêu chuẩn được sử dụng hiện nay là HTML 2.0 được hỗ trợ bởi hầu hết các Web
browser.
Hiện nay, sau khi NetScape và Microsoft giới thiệu về một vài đặc điểm được coi như là
vượt xa hơn những tiêu chuẩn chung của HTML trước đó, một số đặc điểm phức tạp hơn sẽ
được đưa vào phiên bản HTML 3.2. Những đặc điểm này chỉ có thể được hỗ trợ bởi một số
Web browser nhất định.
Điều này có nghĩa là gì ? Nếu bạn tính đến chuyện làm cho trang Web của bạn trông thấy có
sức thu hút mạnh mẽ trong Netscape hoặc Explorer, thì những trang Web này có thể trở nên
có vẻ rất tồi trong những Web browser khác. Hãy nhớ rằng những người đọc trang Web của
bạn có thể không những đang sử dụng một loại Web browser khác mà kích cỡ màn hình và
phông chữ cũng có thể không giống như trên hệ thống mà bạn sử dụng để thiết kế các trang
web.
Sau cùng, có thể không phải chỉ có một mình bạn xem những trang Web mà bạn đã mất
nhiều thời gian để thiết kế ra! Điều quan trọng ở đây là làm một thứ gì đó để cho mọi người
cùng xem. Vì thế phần đầu tiên của những bài học sẽ đưa bạn lướt qua những đặc điểm của
HTML đã được chấp nhận rộng rãi. Từ đó, bạn có thể quyết định sử dụng những đặc điểm
"tốt nhất".
Những vấn đề cần được xem lại
1. HTML là gì?
2. Tại sao ta phải quan tâm đến sự khác nhau trong những tiêu chuẩn HTML?
Đi đến bài tiếp theo....
Đã đến lúc bắt đầu viết những trang Web đầu tiên! Bạn đã sẵn sàng chưa? Trong bài học kế
tiếp bạn sẽ biết làm thế nào để sử dụng ba cửa sổ để viết những dòng HTML đầu tiên. Hãy
bắt đầu ...
1. Tạo tài liệu HTML đầu tiên
12
Bạn sắp bước vào một cuộc hành trình sẽ biến bạn từ một Internet Surfer trở thành một
Internet Author of Multimedia!
Mục đích
Sau bài học này bạn sẽ có thể:
• Nhận ra ý nghĩa và mục đích của những tag HTML.
• Mở ra một Workspace cho việc tạo những tài liệu HTML.
• Sử dụng một trình soạn thảo văn bản để tạo cấu trúc HTML đơn giản cho bất kỳ
trang Web nào.
• Chèn những lời chú thích không được hiển thị vào trong các tập tin HTML.
• Mở tài liệu của bạn bằng Web browser để thấy nó được hiển thị như thế nào.
Bài học
Bây giờ bạn đã biết HTML là gì, chúng ta hãy bắt đầu sử dụng nó.
Tag HTML là gì ?
Khi một Web browser hiển thị một trang chẳng hạn như trang bạn đang xem ở đây, Web
browser sẽ đọc từ một file văn bản đơn giản và tìm kiếm những đoạn mã đặc biệt hay những
tag được đánh dấu bởi ký hiệu < và > . Dạng chung của một tag HTML là :
string of text
Lấy ví dụ, tiêu đề của phần này sử dụng tag header :
Tag HTML la gi?
Tag này báo cho Web browser hiển thị dòng chữ Tag HTML là gì? ở dạng của mức độ tiêu
đề thứ ba (chúng ta sẽ xét kỹ hơn những tag này ở những bài sau). Những Tag HTML báo
cho Web browser biết khi nào cần in đậm một dòng văn bản, in ngiêng nó, làm cho nó trở
thành một header, hoặc làm cho nó là một Hypertext liên kết tới một trang Web khác. Điều
quan trọng cần nhớ là trong tag kết thúc,
có chứa ký tự "/". Ký tự "/" này báo cho Web browser biết là hiệu ứng của tag được kết thúc
tại đây. Rất nhiều tag HTML được đi theo một cặp như thế này. Nếu bạn quên ký tự "/", Web
browser sẽ tiếp tục thể hiện hiệu ứng của tag trong phần còn lại của văn bản và tạo ra các
kết quả không mong muốn (để có kinh nghiệm, sau này bạn có thể thử xem).
LƯU Ý: một Web Browser không quan tâm tới việc bạn sử dụng chữ hoa hay chữ
thường. Lấy ví dụ : ... thì không khác gì với ...
Không giống như việc lập trình, nếu bạn có một lỗi trong trang HTML, hệ thống của bạn sẽ
không bị "Crash"; trang Web của bạn sẽ vẫn nhìn thấy được, nhưng ... sai. Có thể nhanh
chóng và dễ dàng vào bên trong trang HTML và sữa chữa lại nội dung của nó.
Browser của bạn tuy nhỏ nhưng lại có một bộ từ vựng mở. Thật là thú vị với HTML khi
browser của bạn không biết làm cái gì với tag đã cho, nó sẽ bỏ qua tag đó! Lấy ví dụ, trong
tài liệu mà bạn đang xem đây, tag header cho phần này thật sự được viết như sau :
Tag HTML la gi?
nhưng vì browser của bạn có thể không hỗ trợ tag (do tôi tự đặt ra, có thể trong
tương lai nó sẽ làm cho văn bản có dạng sóng khi thể hiện), nó sẽ bỏ qua và vẫn tiếp tục với
những tag nào mà nó hiểu được. Nếu tôi là người viết ra một web browser mới, tôi sẽ quyết
định thêm tag vào phần mềm của tôi.
Mở ra Workspace của bạn
Để hoàn tất những bài học trong phần hướng dẫn này, bạn sẽ tạo một cửa sổ web thứ hai
(điều này cho phép bạn giữ cửa sổ này với những lời chỉ dẫn của bài học và một cửa sổ như
13
là một vùng làm việc của bạn "Workspace"); và thêm một cửa sổ thứ ba là trình soạn thảo
văn bản.
Lưu ý: Đây là nơi rất tốt để lưu ý với bạn rằng chúng tôi sẽ cung cấp những chỉ dẫn
chẳng hạn như là tên thực đơn và tên tập tin nhưng những tên này có thể khác đi phụ
thuộc vào Web browser mà bạn đang sử dụng.
Vì vậy, bạn hãy cố thích ứng với việc chuyển qua lại giữa các chương trình và cửa sổ trên
máy của bạn. Một cách khác là hãy in ra các lời chỉ dẫn trong bài học (nhưng thật sự chúng
tôi không muốn tổ chức các bài hướng dẫn này theo một cấu trúc cây). Dưới đây là các
bước để tạo ra workspace của bạn :
1. Từ thực đơn File của web browser, chọn New Window hoặc New Web Browser.
Một cửa sổ web thứ hai sẽ xuất hiện. Hãy sử dụng cửa sổ thứ nhất như là một "sách
chỉ dẩn" (textbook) và cửa sổ thứ hai như là vùng làm việc của bạn (workspace) để
hoàn tất những bài học HTML.
Lưu ý: Lý do duy nhất để có hai cửa sổ ở đây là bạn có thể đọc những chỉ dẫn
từ bài học và cũng có thể xem tài liệu mà bạn đang làm việc. Bạn cũng có thể
đưa vào boomark trang web này và trở lại nó vào mọi lúc sử dụng thực đơn Go
hay History.
2. Kế tiếp, bạn cần chuyển ra khỏi web browser và mở một chương trình soạn thảo văn
bản.
Lưu ý: Bạn cần phải chuyển qua lại giữa các cửa sổ để hoàn tất các bài học.
Điều này có thể gây ra khó chịu phụ thuộc vào kích cỡ của màn hình bạn đang
sử dụng. Bạn có thể chỉnh lại kích thước các cửa sổ để chúng cùng được trình
bày trên màn hình để dễ dàng làm việc với chúng.
Nếu bạn sử dụng một chương trình xử lý văn bản để tạo HTML của bạn , hãy
chắc chắn rằng dạng lưu trữ là văn bản (hoặc ASCII).
Nếu bây giờ bạn mới bắt đầu, chúng tôi NHẦN MẠNH lại đề nghị bạn sử dụng một trình xử
lý văn bản đơn giản như - SimpleText hay TeachText của Macintosh hay NotePad của
Windows. Tại sao không nên sử dụng sự trợ giúp điêu luyện của các trình xử lý văn bản
HTML? Thực tế sự thiết kế của tài liệu mong muốn các bạn hiểu được những khái niệm cần
thiết rồi SAU ĐÓ mới sử dụng đến sự trợ giúp mà các trình xử lý văn bản HTML mang lại.
Cũng vì vậy, sẽ giúp cho bạn được nhiều hơn khi bạn tạo ra một directory/folder mới trong
máy của bạn để giữ lại các kết quả bạn tạo ra. Bạn có thể gọi nó là workarea hay myspace
hay bất kỳ từ nào bạn thích; hãy lưu lại tất cả các tập tin mà bạn tạo ra trong vùng này. Điều
này sẽ làm cho cuộc sống của bạn tốt hơn ... ít nhất là trong khi làm việc với tài liệu này!
Tạo tài liệu HTML của bạn
Một tài liệu HTML gồm hai phần riêng biệt, phần đầu (head) và phần thân (body). Phần đầu
chứa đựng những thông tin về tài liệu và không được hiển thị lên màn hình. Phần thân thì
chứa đựng mọi thứ được trình bày lên màn hình như là một phần của trang Web.
Cấu trúc cơ bản của một trang HTML là:
14
: :
: :
: :
Dòng đầu tiên hết:
thì không cần thiết lắm, nhưng là mã để báo cho browser biết phiên bản nào của HTML
được sử dụng trong trang hiện thời. Để có nhiều thông tin hơn, hãy xem trang W3C
Reference Specification.
Toàn bộ công việc để thành lập một trang HTML nằm trong cặp tag ....
Bên trong nó là cặp tag ... và sau đó là .... Trang
Web của bạn có thể được hiển thị tốt trên hầu hết máy tính mà không cần những tag này.
Tuy nhiên bằng cách sử dụng chúng, trang Web của bạn sẽ hoàn toàn tương thích với
chuẩn quốc tế của HTML và chắc chắn rằng sẽ tương thích với những Web browser khác
trong tương lai.
Đây là một thói quen tốt giống như là việc bạn đánh răng hằng ngày vậy.
Cũng lưu ý rằng những tag chú thích được bao bởi . Dòng
văn bản giữa những tag này KHÔNG được hiển thị trong trang Web nhưng để đặt những
thông tin có thể hữu ích cho chính bạn hoặc bất kỳ người nào cần phải xem dạng HTML của
những trang Web. Khi trang Web của bạn trở nên phức tạp (giống như bạn sẽ thấy sau này
khi thêm vào các bảng, frame và những vấn đề khác của hơn 20 bài học), những chú thích
này sẽ trở nên hữu ích khi bạn cần cập nhật một trang Web mà bạn đã tạo ra cách đây khá
lâu.
Sau đây là những bước tiếp theo cho việc tạo file HTML đầu tiên. Bạn vẫn sẵn sàng chứ?
1. Nếu chưa mở, hãy mở trình soạn thảo văn bản của bạn.
2. Chuyển đến trình soạn thảo văn bản.
3. Bạn hãy nhập những dòng văn bản sau (không cần đánh vào phím RETURN cuối
mỗi dòng, web browser sẽ tự động điều chỉnh lại các văn bản):
4.
5.
6.
7.
8. Volcan
2. Điều chỉnh một tài liệu HTML
Bây giờ bạn đã có tài liệu HTML đầu tiên của bạn, bạn sẽ học cách điều chỉnh tài liệu và
nhìn thấy sự cập nhật trong tài liệu của bạn.
Mục đích
Sau bài học này bạn sẽ có thể:
• Mở lại workspace cho trang Web của bạn.
• Thực hiện các thay đổi trong tài liệu HTML bằng cách sử dụng trình soạn thảo.
• Nạp lại tài liệu trong Web browser để thấy được sự thay đổi.
15
Bài học
Mở lại workspace của bạn
Lưu ý: Nếu bạn không có tài liệu từ bài học trước, bạn có thể download lại ngay bây
giờ.
Để hoàn tất bài học này bạn cần tạo nên cửa sổ thứ hai và mở lại cửa sổ soạn thảo văn bản
bạn đã sử dụng trong bài học trước. Sau đây là những bước cần thiết để làm công việc đó:
1. Nếu chưa có, tạo cửa sổ mới bằng cách chọn New Window từ thực đơn File .
2. Sử dụng Open File... từ thực đơn File để tìm và mở lại tập tin HTML bạn đã tạo ra
trong ví dụ trước.
3. Mở lại chương trình soạn thảo văn bản.
4. Trong chương trình soạn thảo, mở tập tin ("Volc.htm") bạn đã tạo ra trong bài học
trước.
Chú ý: Nếu bạn sử dụng Windows, tập tin của bạn nên có tên là "VOLC.HTM".
Từ nay chúng tôi xem như bạn dễ dàng mở được workspace của bạn.
Tạo sự thay đổi trong tài liệu HTML.
1. Chuyển đến cửa sổ trình soạn thảo.
2. Sau đoạn văn bản bạn đã đánh từ bài học trước, nhấn ENTER một vài lần và đánh
thêm đoạn văn sau:
3.
4. A volcano is a location where magma,
5. or hot melted rock from within a planet,
6. reaches the surface. It may happen violently,
7. in a massive supersonic explosion, or more
8. quietly, as a sticky, slow lava flow.
Lưu ý rằng đoạn văn bản này phải ở trên những tag và nằm ở
cuối tập tin HTML.
9. Chọn Save từ thực đơn File để cập nhật sự thay đổi trong tập tin HTML của bạn.
Nạp lại tài liệu trong Web Browser
Trở lại browser workspace của bạn, nơi mà phiên bản trước của tập tin được hiển thị. Lưu ý
rằng những dòng chữ bạn mới nhập vào chưa được nhìn thấy. Để thấy được sự thay đổi ,
sử dụng button Reload hoặc thực đơn có trong web browser của bạn. Yêu cầu này ra lệnh
cho Web browser đọc lại cùng một tập tin HTML và hiển thị lại nó cùng với các sự thay đổi
đã được tạo ra. Bạn sẽ nhìn thấy những dòng chữ bạn mới nhập vào.
Lưu ý rằng Web browser sẽ bỏ qua những dòng trống mà bạn đã nhập. Mặc dầu vậy, có thể
bạn vẫn muốn sử dụng những dòng trắng (blank line), những khoảng trắng, và cả những tag
chú thích mà chúng ta đã thấy trong bài 1 để làm cho tập tin HTML của bạn dễ đọc hơn
trong trình soạn thảo văn bản.
Sử dụng Drag và Drop!
Có thể có một cách dễ dàng hơn để nạp và xem các trang HTML của bạn. Bạn cần phải sắp
xếp lại trong máy của bạn để có thể nhìn thấy icon cho các tập tin HTML của bạn bên ngoài
cửa sổ web browser. Sau đó click và drag icon của tập tin "Volc.htm" hay "Volc.htm"
16
thẳng vào cửa sổ web browser của bạn. Đúng vậy! trang của bạn sẽ được hiển thị nếu máy
tính của bạn có hổ trợ hoạt động drag và drop (Chúng tôi biết chắc rằng Macintosh System
7.5 và Windows 95 có hổ trợ hoạt động này.)
Kiểm tra công việc của bạn
Hãy so sánh tài liệu của bạn với ví dụ mẫu sẵn có. Nếu trang Web của bạn trông khác với
mẫu, hãy xem lại văn bản mà bạn đã đánh vào trong trình soạn thảo văn bản. Hãy chắc
chắn rằng nó phù hợp với những chỉ dẫn trong đoạn Tạo sự thay đổi trong tài liệu của
bạn của bài này.
Xem lại
Xem lại những chủ đề sau:
1. Làm thế nào để mở lại workspace của bạn?
2. Những bước nào được sử dụng để thay đổi nội dung tài liệu HTML của bạn?
3. Làm thế nào hiển thị và nhìn thấy sự thay đổi trong Web browser?
Thực tập tự do
Tương tự như trong bài học, hãy điều chỉnh tài liệu HTML riêng của bạn đã tạo ra trong bài
học vừa rồi. Thêm một vài câu và hãy kiểm tra trong browser của bạn khi nạp lại nó.
Đi đến phần tiếp theo....
Bây giờ bạn đã biết về quá trình soạn thảo, chúng ta sẽ thêm những tiêu đề to và có sức
hấp dẫn hơn vào tài liệu HTML của bạn
3. Sáu mức tiêu đề
Như là bạn đã nhìn thấy trong trang Web này, các phần tiêu đề ("Sáu mức tiêu đề", "Mục
đích", "Mục Lục", ...) xuất hiện ở những kích cỡ khác nhau và, có lẽ ở cả những phông chữ
và màu sắc khác nhau nữa. HTML cung cấp những đoạn mã cho việc thiết kế phần tiêu đề
theo sáu mức độ khác nhau. Browser tự xác định chính xác phông chữ và kích cỡ để hiển
thị.
Mục đích
Sau bài học này bạn có khả năng:
• Nhận dạng được những mức độ khác nhau của các tiêu đề trong HTML và các tag
liên quan tới chúng.
• Đặt những mức tiêu đề khác nhau vào trong tài liệu HTML và nhìn thấy sự thay đổi
của chúng trong browser của bạn.
Bài học
Những tiêu đề của HTML
Những tiêu đề được thực hiện trong HTML bằng cách đặt đoạn văn bản giữa những tag tiêu
đề (heading tag). Dạng các tag tiêu đề của HTML là:
17
Text to Appear in Heading
N là một số có giá trị từ 1 đến 6 chỉ định kích cỡ tiêu đề. Sau đây là một vài ví dụ cho những
kích cỡ khác nhau của tiêu đề :
Heading Level 1
Heading Level 2
Heading Level 3
Heading Level 4
Heading Level 5
Heading Level 6
Các mức độ tiêu đề được sắp xếp từ 1 (quan trọng nhất) đến 6 (ít quan trọng nhất). Các tiêu
đề nên có tính tương đối, đánh số thứ tự và đặt tại các vị trí tương tự nhau.
Đặt những tiêu đề HTML vào tài liệu của bạn
Lưu ý: Nếu bạn không có tài liệu từ bài học trước, bạn có thể download lại ngay bây
giờ.
1. Mở lại workspace của bạn (nếu nó chưa được mở).
2. Đến cửa sổ soạn thảo văn bản.
3. Mở lại tập tin HTML đã tạo trong bài 2, "Volc.htm".
4. Trước hết, chúng ta sử dụng tag để trình bày tiêu đề như là header lớn nhất,
. Nhâp dòng sau vào phần thân của HTML và sau các tag :
5.
6. Volcano Web
7. Bên dưới những dòng văn bản đã nhập, tạo những đề mục khác nhau cho những
phần sau này của trang Volcano Web của bạn.
Nhập những tiêu đề sau trong phần thân của trang Web của bạn (chú ý một số sử
dụng còn một số sử dụng ):
Introduction
Volcano Terminology
Volcanic Places in the USA
Mount St Helens
Long Valley
Volcanic Places on Mars?
Research Project
References
8. Lưu trữ (save) lại sự thay đổi trong trình soạn thảo.
9. Trở lại web browser của bạn, Mở và Nạp lại tập tin HTML.
18
Chú ý rằng trên máy tính bạn đang sử dụng hiện nay, bạn có thể cài đặt cho
browser của bạn phông và/hay kích thước của các tiêu đề. Ví dụ như, bạn có
thể có một browser thể hiện tag h1 theo phông Times có 36 điểm; tag h2 theo
phông Helvetica có 24 điểm, v.v... Các mã HTML chỉ đưa ra các loại của tiêu đề
(từ h1 đến h6); còn việc thể hiện chúng thì được điều khiển bởi người sử dụng
thông qua trình web browser.
Kiểm tra công việc của bạn
So sánh công việc của bạn với ví dụ mẫu sẵn có. Nếu có một vài tiêu đề xuất hiện không
đúng, hãy kiểm tra lại tag bắt đầu và tag kết thúc của mỗi tiêu đề.
Như là một phần bài tập đề nghị, hãy nhìn xem chuyện gì sẽ xảy ra khi bạn có một lỗi đánh
máy sai. Mở lại tài liệu HTML của bạn trong chương trình soạn thảo và xoá đi ký tự "/" trong
tag kết thúc , sau đề mục Volcano Web:
Volcano Web
[missing "/" -----------^^^]
Lưu trữ sự thay đổi và nạp lại trong Web browser. Không có sự kết thúc đúng đắn của tag
h1, browser của bạn sẽ thông dịch phần văn bản tiếp theo như là một phần của tiêu đề! Sau
khi thử xong bạn nên trở lại tài liệu của bạn và thêm lại dấy / như ban đầu.
Xem lại
1. Những mức độ khác nhau của tiêu đề trong HTML là gì?
2. Những tag liên quan đến những mức độ này là gì?
3. Những bước nào được sử dụng trong việc đặt tiêu đề vào trong tài liệu HTML ?
4. Những gì xảy ra nếu bạn quên dấu "/" tại cuối của một tag tiêu đề?
Thực tập tự do
Hãy thêm vào ít nhất ba tiêu đề với các cấp độ khác nhau vào tài liệu WWW của riêng bạn.
4. Chia văn bản ra thành nhiều đoạn
Cho đến bây giờ bạn đã tạo và sửa đổi tài liệu HTML, và chắc bạn đã cảm thấy thoải mái với
việc soạn thảo và nạp lại văn bản trong Web browser. Vì vậy bây giờ bạn sẽ cảm thấy dễ
dàng với bài học nhanh này: thêm vào các dấu chia đoạn văn (paragraph break).
Mục đích
Sau bài học này bạn có thể:
• Nhận dạng những tag chia đoạn trong HTML.
• Chép một đoạn văn bản từ Web page và dán (paste) nó vào một tài liệu khác.
• Chèn các dấu chia đoạn vào trong văn bản HTML và nhìn sự thay đổi trong Web
browser của bạn.
Bài học
Chia đoạn trong HTML
19
Trước đây chúng ta đã biết rằng một Web browser sẽ bỏ qua tất cả ký tự XUỐNG DÒNG
(carriage returns) được đánh trong trình soạn thảo. Nhưng, khi browser nhìn thấy tag chia
đoạn, nó chèn một dòng trống và bắt đầu một đoạn mới. Mã HTML cho công việc chèn một
sự chia đoạn là :
Lưu ý rằng tag này là một đặc biệt vì nó không cần tag kết thúc; vì thế bạn không cần sử
dụng:
Trong bài sau chúng ta sẽ thấy trường hợp tag có sử dụng tag để kết thúc.
Cũng lưu ý rằng tag có sự gắn liền với sự chia đoạn nên không cần thiết đặt tag
trước một tag tiêu đề như ví dụ dưới đây:
Blah Blah Blah Blah
Chèn các dấu chia đoạn
Lưu ý : Nếu bạn không có tài liệu từ bài học trước, bạn có thể download lại ngay bây
giờ.
Hãy theo sự chỉ dẫn dưới đây để chèn và xem lại một sự ngắt đoạn trong tài liệu HTML của
bạn.
1. Mở lại workspace của bạn (nếu nó chưa được mở).
2. Đi đến cửa sổ soạn thảo văn bản.
3. Mở tài liệu làm việc của bạn Volc.htm trong trình soạn thảo văn bản (nếu nó chưa
được mở).
4. Trước hết chúng ta di chuyển câu ("A volcano is ...") đến dưới tiêu đề
Introduction. Hãy sử dụng chuột để cắt và dán đoạn văn bản này vào vị trí thích
hợp.
5. Sau những câu này, chúng ta muốn thêm vào một đoạn nữa. Nhưng thay vì phải
đánh lại nó, từ trang Web này hãy sử dụng chuột để chọn và chép (copy) vào
clipboard các đoạn văn:
6.
7. Volcanoes have been a part of earth's history
8. long before humans. Compare the history of human
9. beings, a few million years in the making, to that of
10. the Earth, over four billion years in the making.
11.
12. Bây giờ, hãy trở lại tài liệu HTML trong trình soạn thảo và dán (paste) nó vào sau
những câu có sẵn bên trong đề mục Introduction.
13. Lưu trữ sự thay đổi trong trình soạn thảo.
14. Trở lại Web browser của bạn.
15. Nếu tài liệu của bạn chưa có, sử dụng lệnh Open Local... từ thực đơn File để mở tài
liệu.
16. Chọn Reload từ thực đơn File. Bây giờ bạn sẽ nhìn thấy hai câu của phần
Introduction. Bây giờ chúng ta muốn đặt một dấu phân đoạn giữa các câu này.
17. Một lần nữa trở lại tài liệu HTML trong trình soạn thảo.
18. Sau câu thứ hai của phần Introduction (tức là câu có kết thúc là " as
a sticky, slow lava flow.") nhấn RETURN (thật ra không cần thiết nhưng điều này làm
cho bản HTML dễ đọc hơn khi bạn làm việc với nó), và bây giờ hãy nhập tag phân
đoạn như sau :
19.
20.
Lúc này đoạn văn bản trông giống như sau:
