Lý thuyết
Giới thiệu
Một trang web hiển thị trên trình duyệt được cấu thành từ các cặp thẻ HTML (Hyper Text Markup Language) đặc biệt, giúp chỉ dẫn cách trình bày nội dung Chẳng hạn, cặp thẻ chỉ định rằng nội dung bên trong cần được in đậm Các thẻ này đóng vai trò quan trọng trong việc hướng dẫn trình duyệt hiển thị thông tin một cách chính xác.
Đối với lập trình viên web, việc nắm vững các cặp thẻ HTML cơ bản là điều cần thiết trước khi xây dựng ứng dụng web Họ cần hiểu rõ chức năng của từng thẻ và biết cách lập trình để tạo ra chúng.
Danh sách các phần tử HTML thường dùng
Dưới đây là danh sách các phần tử HTML cơ bản và cách tạo ra tương ứng bằng cặp thẻ HTML
STT Phần tử Hình thù hiển thị trên trang web Cách tạo ra bằng thẻ HTML tương ứng
Input
Button
CheckBox
Radio button
Nguyễn Văn A
Nguyễn Văn B
Nguyễn Văn C
Nguyễn Văn A
Nguyễn Văn B
Nguyễn Văn C
Phân cách xuống dòng div
Là một phần tử chứa các phần tử khác Khi ẩn/ hiện/ di chuyển phần tử div thì các phần tử khác cũng ẩn/hiện/di chuyển theo
TR Thẻ TR phải nằm trong một nào đó, không thể tạo riêng
TD Thẻ TD phải nằm trong một nào đó, không thể tạo riêng.
1 2 3
1 23
a www.aptech.utehy.vn www.aptech.utehy.vn img
Chú ý rằng các thuộc tính của phần tử được định nghĩa theo cú pháp: = Giá trị này cần được đặt trong dấu nháy đơn hoặc dấu nháy kép.
Bài tập thực hành
Yêu cầu
Tạo một trang web để hiển thị nội dung như sau:
Giao diện trang web cần tạo
Hướng dẫn
- Sử dụng bảng mô tả các phần tử ở trên để tạo trang theo yêu cầu.
- Vào trình soạn thảo web của Visual Studio 2008 và tạo dự án web, sau đó mở trang Default.aspx và viết các thẻ HTML.
Để chạy trang web vừa tạo, bạn có thể nhấn phím F5 hoặc nhấp chuột phải vào trang soạn thảo (hoặc tệp Default.aspx ở panel bên phải) và chọn "Xem trong trình duyệt".
Minh hoạ mẫu
Bài thực hành số 1 - Hưng Yên Aptech
PHẦN MỀM QUẢN LÝ BÁN HÀNG
NHẬP THÔNG TIN NHÀ CUNG CẤP
Tên nhà cung cấp:
Người đại diện:
Chức vụ: Địa chỉ Nhà CC:
Chọn
Hà nội
TP Hồ Chí Minh
Đà Nẵng
Hải Phòng
Hưng Yên
Hải Dương
Quảng Ninh
Nơi khác
Vùng:
Mã bưu điện:
Việt Nam
Lào
Campuchia
Nơi khác
Số Fax:
P.8 Địa chỉ website:
Danh sách nhà cung cấp hiện có
Công ty FPT
Láng Hạ - Ba Đình
www.fpt.vn
Công ty CMC
Hàn Thuyên - Hai Bà Trưng
www.cmc.vn
Công ty Trần Anh
Giảng võ - Ba Đình
www.trananh.vn
Ghi chú
Để thực hiện xoá (reset về trạng thái đầu) của một form nhập liệu, ta tạo phần tử button nhưng đặt "type" là "reset" (thay vì type = "button).
Để gửi toàn bộ nội dung dữ liệu đã nhập về server xử lý, tạo phần tử button nhưng đặt "type" là "submit" (thay vì type = "button")
Để chọn mặc định một mục trong danh sách (Select) thì đặc thuộc tính là
Để tạo hộp text có nhiều dòng, ta dùng thẻ .
Muốn thay đổi độ rộng của textbox, chỉ cần thay đổi thuộc tính "size".
Có thể bố trí lại trang web trên cho đẹp hơn bằng cách đặt các phần tử trong các ô của bảng (sử dụng thẻ Table).
Tạo trang web động với DHTML và JavaScript
Mục tiêu: Kết thúc bài thực này, người học có thể
Truy xuất các đối tượng trình duyệt và các phần tử HTML bằng JavaScript.
Tạo trang web đăng ký có xử lý tính hợp lệ của dữ liệu nhập vào.
Một trang web tĩnh (Static webpage) là trang có nội dung không thay đổi và hiển thị giống nhau cho tất cả người dùng Tuy nhiên, nhu cầu hiện nay yêu cầu trang web phải có khả năng động (Dynamic webpage), cho phép nội dung hiển thị và tương tác khác nhau tùy theo người sử dụng hoặc tình huống Khả năng "động" này có thể được thực hiện bên phía trình duyệt hoặc server Nếu thay đổi diễn ra bên phía trình duyệt bằng ngôn ngữ kịch bản như JavaScript, trang đó được gọi là DHTML (Dynamic HTML) Ngược lại, nếu xử lý diễn ra bên phía server bằng các ngôn ngữ như C#, PHP, hoặc ASP, thì đó là các trang động phía server (Active Server Page) Trong tài liệu này, chúng ta sẽ khám phá cả hai loại web động, với trọng tâm là trang DHTML sử dụng JavaScript.
Đưa câu lệnh javascript vào trang web
1.1 Đưa câu lệnh javascript vào luồng xử lý ngay khi trang web được mở. Để đưa các câu lệnh Javascript vào trang web và yêu cầu trình duyệt thực thi ngay khi trang web được mở, ta chỉ cần đặt các câu lệnh JS ngay trong các cặp thẻ nhưng không hàm.
Ví dụ: Hiển thị một lời chào và thông báo ngày hiện tại khi trang web được mở.
var d = new Date (); document.write ("Chào bạn ! "); document.write("Hôm nay là: " + d.toDateString());
- Có thể có nhiều đoạn script trong một trang.
- Trong cặp script phải là các CÂU LỆNH JAVASCRIPT
- Những câu lệnh JS nếu không nằm trong các hàm thì sẽ được thực hiện ngay khi trang web được mở.
1.2 Đưa câu lệnh javascript vào các sự kiện (event)
Trong phần 1.1, các câu lệnh JavaScript sẽ được thực thi ngay khi trang web được mở Tuy nhiên, đôi khi chúng ta muốn các lệnh này chỉ thực hiện khi có sự kiện xảy ra, chẳng hạn như khi người dùng click chuột hoặc nhấn phím Để làm điều này, chúng ta chỉ cần đưa câu lệnh vào sự kiện tương ứng theo cú pháp đã quy định.
= "Danh sách câu lệnh JS được cách nhau bởi dấu chấm phảy"
Ví dụ: Hiển thị lời chào và thông báo ngày hiện tại khi người dùng nhấn vào nút "Hello":
