Giáo trình thiết kế Webside bằng Visual Studio 2008 Bài 3: Thiết kế Web tĩnh HTML

HTML (Ngôn ngữ đánh dấu siêu văn bản) là ngôn ngữ lập trình web cơ sở Được web servers và các trình duyệt sử dụng để “mô tả” một trang web HTML sử dụng các thẻ để bố cục nội dung, cho phép tạo các siêu văn bản. Được hiểu bởi các trình duyệt internet (IE, Firefox, Netscape…)

BỘ GIÁO DỤC VÀ ĐÀO TẠO Bài dự thi thiết kế bài giảng E – Learning

Bài giảng: Thiết kế trang Website tĩnh ( HTML)

Thuộc môn Tin học văn phòng Người soạn: Vũ Văn Tuấn

Đơn vị: Phòng Giáo dục và Đào tạo Nga Sơn

Lập trình Web

• Thẻ đôi: Một thẻ mở <tenThe> và một thẻ đóng

</tenThe> Thẻ đóng giống thẻ mở trừ dấu / Thẻ mở đi trước thẻ đóng Dữ liệu nằm giữa thẻ mở và thẻ đóng chịu tác động của thẻ.

• Thẻ đơn: <tenThe> Thẻ đơn có tác động ngay vị trí nó xuất hiện.

• Các thẻ (cả đơn và đôi) có thể được định danh hoặc không

Có thể có thuộc tính trong thẻ Xác định giá trị thuộc tính theo mẫu thuoctinh = giatri.

Tên thẻ

Thuộc tính

Giá trị thuộc tính

9 Sử dụng thẻ <s></s> để gạch ngang chữ

10 Sử dụng các thẻ <P> </P> , <DIV> </DIV> để phân đoạn văn bản

11 Tạo bảng:

Sau khi trộn hàng,

cột

Các thuộc tính của Form:

- id: Định danh của form

- Request method: GET/POST

- Action: Trang được yêu cầu

khi đệ trình form

- Các điều khiển trên form.

Sử dụng nút submit để đệ trình form

BOTTOM – thông tin bản quyền

LeftMenu Phần hiển thị nội dung trang

web

• CSS là bảng định dạng cho phép chúng ta bóc tách việc định dạng hiển thị của văn bản, hình ảnh

và các đối tượng điều khiển trên trang HTML

• Việc định dạng hiển thị được thực hiện với

nhiều đối tượng dữ liệu trong trang web.

• Nhiều đối tượng (nhóm đối tượng) cần được

định dạng theo một kiểu thống nhất Ví dụ, tất cả các bảng có cùng một kiểu, tất cả các siêu liên kết

có cùng một kiểu (nguyên lý Nhất quán trong thiết

kế giao diện)

• Kiểu định dạng cần được định nghĩa một lần và

sử dụng nhiều lần, nhiều nơi

Ví dụ:

Định nghĩa một Style cho thẻ mọi thẻ DIV có mặt trong FORM:

• Bộ chọn phần tử (element selector)/thẻ (tag selector) :

• Bộ chọn phân giải thuộc tính (Attribute-selector) :

• Lớp giả (psuedo classes)

• Cú pháp:

tên_phần_tử: hover/link/visited/active {

thuộc_tính : giá_trị; [1 n] }

• Ví dụ:

Nội dung

Vị trí của nội dung với

Container

• HTML:

• Cung cấp các thẻ tạo đối tượng điều khiển

nhưng không cung cấp khả năng xử lý các sự kiện trên chúng

• Hiển thị tĩnh (dạng hiển thị của một đối tượng

• Được sử dụng rộng rãi.

• Tựa C.

• Khác C ở các điểm: Các biến, hàm không định kiểu;

khai báo biến bằng từ khóa var; định nghĩa hàm

bằng từ khóa function

• Sử dụng cùng HTML:

• Viết lệnh JavaScript trong cặp thẻ <script language

= “javascript”> </script> - phân đoạn Javascript.

• Có thể đặt (nhiều) phân đoạn javascript tại bất kỳ đâu trong trang HTML.

• Gọi hàm JavaScript trong các thuộc tính sự kiện

của các đối tượng điều khiển viết bằng HTML

• Cũng có thể liên kết một tệp javascript (.js) vào trang HTML theo cú pháp sau:

•Khai báo sử dụng biến

• Mở một cửa sổ mới:

window.open( [sURL] [, sName] [, sFeatures] [, bReplace]) Trong đó:

• sURL: là một chuỗi URL của tài nguyên cần mở

• sName: là tên của cửa sổ, tên này được sử dụng trong thuộc tính TARGET của một số thẻ.

• sFeatures: là một chuỗi bao gồm các cặp thuộc_tính=giá_trị, các cặp này cách nhau bằng dấu phẩy (,):

• Đóng một cửa sổ:

window.close()

sFeatures string

height=giá_trị_số chiều cao của cửa sổwidth= giá_tr_số chiều rộng của cửa sổstatus=yes/no/1/0 quy định có hiển thị thanh status bar hay khôngmenubar=yes/no/1/0 quy định có hiển thị thanh menu bar hay khôngtitlebar=yes/no/1/0 quy định có hiển thị thanh titlebar của window khôngresizeable=yes/no/1/0 có cho phép thay đổi kích thước của cửa sổ hay khôngscrollbars=yes/no/1/0 có hiển thị các thanh cuộn hay không

Ví dụ:

Event Đối tượng chịu tác động của sự kiện Hoạt động

Khi có sự ngắt quãng quá trình nạp ảnh (ví dụ: người

sử dụng nhấn chuột vào đường link khác hoặc dừng trình duyệt)

onchange FileUpload, Select, Text, Textarea Thay đổi dữ liệu trên đối

Lỗi trong đoạn mã kịch bản hoặc trong quá trình nạp ảnh (ví dụ: không tìm thấy ảnh)

onfocus Button, Checkbox, FileUpload, Frame, Layer, Password, Radio, Reset, Select, Submit,

Text, Textarea, Window

Khi đối tượng được focus (đang được xử lý trên đối tượng) – đối ngược với sự kiện onblur

onselect Textarea Khi lựa chọn nội dung text

onunload Frame, Window Đang thoát khỏi trang (đang rời khỏi trang hoặc đóng cửa sổ window)