Chương 3: PHP và HTML, CSS, JavaScript

PHP The Third Lesson Hanoi University of Science and Technology (hust.vn) Chương 3: PHP và HTML, CSS, JavaScript
PHP và HTML
HTML và CSS (tạo giao diện)
HTML và JavaScript PHP và HTML HTML Form <form name="myform" method="post" action="process.php"> Name <input type="text" name="txtname“ /> Job <input type="text" name="txtjob“ /> Giới tính <input type="radio" name="rdbsex“ value="Nam”/>Nam <input type="radio“ name="rdbsex“ value="Nữ" tabindex="4" />Nữ (tiếp) Quê quán <option value="Hà Nội" selected="selected">Hà Nội Huế Hồ Chí Minh (tiếp) Học vị <input type="checkbox" name="ckb[]" value="Thạc sĩ” />Thạc sĩ <input type="checkbox" name="ckb[]" value="Tiến sĩ” />Tiến sĩ <input type="checkbox" name="ckb[]" value="Tiến sĩ khoa học” />Tiến sĩ khoa học (tiếp) Mô tả thêm về bản thân <textarea name="txtdetail" cols="45" rows="5" tabindex="9"> <input type="submit" value="Cập nhật" tabindex="10" /> PHP và HTML Form $name = $_POST["txtname"]; $job = $_POST["txtjob"]; $sex = $_POST["rdbsex"]; $homeland = $_POST["selhomeland"]; $level = ""; foreach ($_POST["ckb"] as $value) { $level .= $value.""; } $detail = $_POST["txtdetail"]; HTML File Browse <form action="upload.php" method="post" enctype="multipart/form-data“> File <input name="myfile” type="file" size="30" /> upload.php <?php $destination_path = getcwd().DIRECTORY_SEPARATOR; $target_path = $destination_path . basename( $_FILES['myfile']['name']); if (($_FILES["myfile"]["type"] == "image/gif") || ($_FILES["myfile"]["type"] == "image/jpeg") && ($_FILES["myfile"]["size"] < 5120000) ) { if(move_uploaded_file($_FILES['myfile']['tmp_name' ], $target_path)) $result = 1; } ?> (tiếp)
Ngoài ra PHP còn có thể chèn vào bất kỳ vị trí nào trong file HTML <?php if (ñiều kiện) { ?> <?php } ?> HTML và CSS HTML
HTML – Hyper Text Markup Language sử dụng các thẻ (tag) ñể ñịnh dạng dữ liệu
HTML không phân biệt chữ hoa hay chữ thường và không ñược trình duyệt báo lỗi cú pháp
Cấu trúc cơ bản của 1 file html thường có dạng: ... ... Thẻ (tag)
Có nhiều thẻ, mỗi thẻ có 1 tên và mang ý nghĩa khác nhau.
Có 2 loại thẻ: thẻ ñóng và thẻ mở
Cách viết thẻ: – Thẻ mở: Ví dụ: , , … – Thẻ ñóng tương ứng: Ví dụ: , Chú ý: luôn có thẻ mở nhưng có thể không có thẻ ñóng tương ứng. Ví dụ: không có thẻ ñóng Thuộc tính của thẻ
Một thẻ có thể có các thuộc tính nhằm bổ sung tác dụng cho thẻ
Mỗi thuộc tính có tên thuộc tính (tên_TT)
Viết thẻ có thuộc tính:
Chú ý: – Có thể thay ñổi thứ tự, số lượng các thuộc tính mà không gây ra lỗi cú pháp – Sự hỗ trợ các thẻ, thuộc tính ở mỗi trình duyệt là khác nhau. Chỉ giống nhau ở các thẻ, thuộc tính cơ bản. – Thẻ ñóng của thẻ có thuộc tính vẫn viết bình thường () Soạn thảo văn bản
Văn bản ñược soạn thảo như bình thường trong các file HTML
Lưu ý: – Mọi khoảng trống, dấu xuống dòng trong HTML ñược thể hiện trên trang web là 1 khoảng trống duy nhất – Để gõ một số ký tự ñặc biệt ta phải sử dụng mã: • Khoảng trống (trong trường hợp muốn có nhiều hơn 1 ký tự trống):   • Dấu nhỏ hơn (): < > • Dấu ngoặc kép (“): " • Ký hiệu : © • …
Ghi chú trong HTML: (tiếp)
: là phần ñầu của 1 văn bản html, ñịnh nghĩa các thông tin về tài liệu, bao gồm các thẻ như ,,, v.v...
: là phần thân của văn bản html, dữ liệu trong phần này sẽ hiển thị lên browser của người dùng Các thẻ thông dụng
: dùng ñể tạo bảng
: dùng ñể tạo form
: dùng ñể chèn ảnh
: dùng ñể chèn liên kết
... CSS
CSS - Cascading Style Sheet: Mẫu quy ñịnh cách thức thể hiện các thẻ HTML
Các ñặc ñiểm kỹ thuật của CSS ñược duy trì bởi W3C
Giúp tiết kiệm ñược rất nhiều thời gian và công sức cho việc thiết kế web.
Có thể ñịnh nghĩa nhiều style vào một thẻ HTML (Cascading) Các loại style
Có 4 loại style: – Inline Style (Style ñược qui ñịnh trong 1 thẻ HTML cụ thể) – Internal Style (Style ñược qui ñịnh trong phần của 1 trang HTML ) – External Style (style ñược qui ñịnh trong file .CSS ngoài) – Browser Default (thiết lập mặc ñịnh của trình duyệt)
Thứ tự ưu tiên: Mức ưu tiên giảm dần từ trên xuống Cách chèn CSS
Đặt trong …
Với Internal style: <!-- Nội dung ñịnh nghĩa style --> Cách chèn CSS (tt)
Với External style: – Định nghĩa style trong file riêng (thường có ñuôi .CSS) – Nhúng file CSS ñã ñịnh nghĩa vào trang web: <link href=“ñịa chỉ file" rel="stylesheet" type="text/css">
Với Inline style: Chú ý
CSS phân biệt chữ hoa chữ thường
Để ghi chú trong style chúng ta sử dụng /* ñoạn ghi chú */ Khai báo CSS selector { Property1: Value1; Property2: Value2; } Áp dụng cho thẻ cụ thể
Trường hợp 1 thẻ p { color: red; }
Trường hợp nhiều thẻ h1,h2,h3,h4,h5,h6{ font-family:arial; } Tạo lớp
Gắn với thẻ cụ thể: Đặt selector là tên_thẻ.tên_lớp p.loai1{ color:red; } p.loai2{ color:blue; }
Không gắn với thẻ cụ thể: bỏ phần tên_thẻ ñi, giữ lại dấu chấm: .loai3{ color:green; } Sử dụng lớp
Đặt thuộc tính class của thẻ = “tên_lớp”
Ví dụ: Đoạn này màu ñỏ Style không có hiệu lực Tiêu ñề màu xanh Tạo định danh
Tương tự như class. Thay dấu chấm (.) thành dấu thăng (#).
Cho thẻ cụ thể: tên_thẻ#ñịnh_danh{…}
Tổng quát: #ñịnh_danh{…} p#doan1{ color:red; } #loai2{ color:blue; } Sử dụng định danh
Mỗi ñịnh danh là duy nhất trên trang
Đặt thuộc tính id của thẻ = ñịnh_danh Đoạn này màu ñỏ Tiêu ñề xanh HTML và JavaScript JavaScript
JS là ngôn ngữ kịch bản, ñược nhúng hoặc tích hợp vào tệp tin HTML
Nếu ñược trình duyệt hỗ trợ, JS sẽ ñược thực thi
JS ñược thông dịch trong trang HTML sau khi toàn bộ trang ñược load nhưng trước khi trang ñược hiển thị
JavaScript ñược hãng Sun Microsystems phát triển từ Livescript của Netscape Chèn Javascript vào HTML
Sử dụng thẻ SCRIPT: <!-- JavaScript statements; //-->
Sử dụng một file JavaScript ở ngoài
Sử dụng các biểu thức JavaScript trong các giá trị thuộc tính của thẻ Các sự kiện JS hỗ trợ trong HTML • onClick • onChange • onFocus • onBlur • onMouseOut • onLoad • onSubmit • onMouseDown
Đặt bộ lắng nghe sự kiện • onMouseOver • onMouseUp Các đối tượng trong trình duyệt
Trình duyệt ñưa ra một số ñối tượng có thể ñược truy xuất bởi JavaScript HTML DOM
Là một chuẩn ñược ñưa ra bởi W3C, ñịnh nghĩa các truy xuất ñến các văn bản như HTML
Tài liệu tra cứu về HTML DOM có thể xem rất chi tiết tại ñịa chỉ sau: dom.asp Website hỗ trợ CSS, HMTL và PHP





THE END