Huong dan tao web tinh ppsx

– Các thẻ định dạng hiển thị: Văn bản, hình ảnh, … – Các thẻ tạo đối tượng điều khiển: Input text, text area, radio button, check box, list box, button, submit, hidden, hyperlink... Tạo

Lê Đình Thanh

Bộ môn Các Hệ thống Thông tin

Chuyên đề

LẬP TRÌNH ỨNG DỤNG WEB

Tạo trang web tĩnh

Bài 3

Kiến trúc & Hoạt động của Web

tĩnh

*.htm, *.htmlCác trang web tĩnh (tệp *.htm, *.html) được lưu sẵn trên server

và được gửi sang client mỗi khi được yêu cầu

HTML : H yper T ext M arkup L anguage

ngữ lập trình Web cơ sở.

• Dù web tĩnh hay động, nội dung cuối cùng Web

Server truyền cho Web Client là trang HTML Web Browser đọc nội dung HTML để hiển thị lên màn

hình.

– Các thẻ định dạng hiển thị: Văn bản, hình ảnh, …

– Các thẻ tạo đối tượng điều khiển: Input text, text area,

radio button, check box, list box, button, submit, hidden, hyperlink

Các thẻ HTML

• 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.

• Ví dụ:

– <font size="4" color="#009999" face="Arial, Helvetica, sans-serif"> </font>

– <img src=“anhdep.jif" border="0" alt=“Kích chuột vào đây"

height="30" width="20“ id = “anh1”>

</html>

Các thẻ định dạng văn bản

• Tạo đầu mục (heading)

• Làm đậm, nghiêng, gạch chân, gạch ngang

• Thay đổi font chữ

• Xuống dòng

• Ngắt đoạn

• Mũ trên, mũ dưới

• Dấu cách

Tạo đầu mục: <hi> </hi>, i = 1, 2, …

Làm đậm: <b> </b>

Làm đậm: <strong> </strong>

Làm nghiêng: <i> </i>

Kết hợp nhiều thẻ: Thẻ lồng nhau

Gạch chân: <u> </u>

Gạch ngang: <s> </s>

Mũ trên 

Mũ dưới: 

Thay đổi font: <font> </font>

<font face = “Tên font” size = “Kích thước font” color = “Màu chữ”>

Văn bản chịu tác động <font>

Kích thước font: -7, …, 7 Màu chữ theo tên: red, green, blue, yellow, …

Màu chữ theo RGB: #rrggbb

Ngắt dòng: <br>

Tạo đoạn văn: <p> </p>

Tạo đường kẻ ngang: <hr>

Dấu cách: &nbsp;

Ví dụ trang văn bản

Hiển thị ảnh: <img src = …>

Hiển thị ảnh: Định kích thước

Hiển thị ảnh: Định viền

Hiển thị ảnh: Căn dòng với chữ

Hiển thị ảnh: Căn dòng với chữ

Hiển thị audio/video: <embed>

Tạo siêu liên kết: <a href = …></a>

<a href = "Default.htm"> Về trang đầu </a>

Tạo siêu liên kết: <a href = …></a>

Tạo siêu liên kết: <a href = …></a>

<a href = "Default.htm" style = "text-decoration: none">

Về trang đầu </a>

Tạo bảng: <table>…</table>

Tạo bảng: Đường viền

Tạo bảng: Đường viền 1 nét

Tạo bảng: Tô màu

Tạo bảng: Căn lề chữ

Tạo bảng: Trộn cột

Tạo bảng: Trộn cột

Tạo bảng: Trộn cột

Tạo bảng: Trộn hàng

Tạo bảng: Bảng hoàn chỉnh

Tạo bảng: Cách chữ

Tạo điều khiển nút bấm

Tạo điều khiển nút kiểm

Tạo điều khiển radio

Tạo điều khiển ô chữ

Tạo điều khiển ô văn bản

Tạo điều khiển danh sách (đơn chọn)

Tạo điều khiển danh sách (đa chọn)

Tạo điều khiển ẩn

Tạo Form

• Một Form là một phân đoạn của trang web được sử

dụng để quản lý các điều khiển web.

• Client muốn gửi các giá trị do người dùng nhập vào

các điều khiển phải để các điều khiển này vào Form

và đệ trình (submit) Form lên Server.

• Khi một Form được đệ trình lên Server, tất cả các

điều khiển trên Form đó đều được đệ trình.

• Một trang web có thể có nhiều form khác nhau

(thông thường chỉ cần sử dụng 1 form/trang)

– (:- Form giống như một con thuyền chở khách qua sông, bên bờ này là client, bên bờ kia là server Các điều khiển

là hành khách, muốn sang sông phải lên thuyền Tất cả hành khách trên cùng chuyến thuyền sẽ được chở sang bờ server cùng lúc)

Tạo Form

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

Tạo Form

Tạo Form

Tạo Form

file:///D:/Web_Vidu/

Default.htm?hoten=Ho%C3%A0ng+B%C3%A1+Th

%C3%A0nh&ngaysinh=12%2F10%2F1984&gt=on

Tạo Form

Tạo Form

Nhắc lại: Với phương thức POST, các tham số + giá trị

được đệ trình nhưng được giấu và không được nối vào URL

Tạo Frame

• Frames (khung) được sử dụng để chia màn hình client thành nhiều vùng

khác nhau, mỗi vùng cho hiển thị một trang riêng.

• Ví dụ: Chia màn hình thành 2 frames theo chiều ngang

<frameset rows="80,*" frameborder="NO" border="0" framespacing="0">

<frame src=“Defaut.htm" name="topFrame"

scrolling="NO" noresize >

<frame src=“Trang2.htm" name="mainFrame">

</frameset>

Tạo Frame

Ví dụ: Sử dụng frames để xây dựng cấu trúc trang

Banner trang web

Nội dung bản quyền

Các mục

chọn

(menu)

Trang nội dung

Một cấu trúc trang điển hình

Ví dụ: Sử dụng frames để xây dựng cấu trúc trang

Banner trang web

Nội dung bản quyền

Các mục

chọn

(menu)

Trang nội dung

Trước hết, chia màn hình thành 3 frames theo chiều ngang

<frameset rows="80,*, 60" frameborder="NO" border="1" framespacing="0">

<frame src="" name="topFrame" scrolling="NO" noresize>

<frame src="" name="mainFrame">

<frame src="" name=“bottomFrame">

</frameset>

Ví dụ: Sử dụng frames để xây dựng

cấu trúc trang

Banner trang web

Nội dung bản quyền

Các mục

chọn

(menu)

Trang nội dung

Tiếp theo, chia frame thứ 2 (giữa) thành hai frames theo chiều dọc

<frameset rows="80,*, 60" frameborder="NO" border="1" framespacing="0">

<frame src="" name="topFrame" scrolling="NO" noresize>

<frameset cols = “200, *” border = “0”>

<frame src = “” name = “menu”>

<frame scr = “” name = “noidung”>

</frameset>

<frame src="" name=“bottomFrame">

</frameset>

Ví dụ: Sử dụng frames để xây dựng

cấu trúc trang

Banner trang web

Nội dung bản quyền

Các mục

chọn

(menu)

Trang nội dung

Cuối cùng, đặt các trang vào các frames (thuộc tính src của frame)

<frameset rows="80,*, 60" frameborder="NO" border="1" framespacing="0">

<frame src=“Top.htm" name="topFrame" scrolling="NO" noresize>

<frameset cols = “200, *” border = “0”>

<frame src = “Menu.htm” name = “menu”>

<frame scr = “Noidung.htm” name = “noidung”>

</frameset>

<frame src=“Bottom.htm" name=“bottomFrame">

</frameset>

Bảng định dạng

CSS: Cascade Style Sheet

• => 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 ( W 1 U n ).

Sử dụng CSS

• Các kiểu định dạng được định nghĩa và lưu trong tệp có đuôi css một

cách nối tiếp nhau (cascade).

• Bao hàm tệp css và gọi tên định dạng mỗi khi cần sử dụng định dạng.

Tạo CSS: style css

Sử dụng CSS

JavaScript

Tại sao sử dụng JavaScript?

– 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

• Ví dụ: thẻ <input type = “button” …> tạo một nút bấm nhưng

HTML không xử lý sự kiện khi nút được bấm (onclick).

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

• JavaScript (Scripts):

– Xử lý các sự kiện trên các đối tượng điều khiển

– Hiển thị động (dạng hiển thị của các đối tượng có thể thay đổi)

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

– 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

– 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

JavaScript: Khai báo, sử dụng biến

JavaScript: Khai báo, sử dụng biến

JavaScript: Khai báo, sử dụng hàm

JavaScript: Truy cập điều khiển

JavaScript: Hiển thị thông báo

Onload: Sự kiện được phát sinh khi tải trang lênOnUnload: Sự kiện được phát sinh khi tắt trang

JavaScript: Thông báo hỏi sự đồng ý

JavaScript: Hiển thị động

Trong các ví dụ minh họa

Bài tập 1

• Chọn và thực hiện một trong hai ứng dụng sau:

– Tạo một website tĩnh để giới thiệu về gia đình bạn/lớp bạn/ hoặc một nhóm bạn mà bạn tham gia Website này bao gồm một trang giới thiệu chung về gia đình/lớp/nhóm, danh sách các thành viên và một số trang khác, mỗi trang giới thiệu một thành viên Từ trang danh sách thành viên, người dùng có thể kích chuột vào tên thành viên để sang trang giới thiệu về thành viên đó Từ trang giới thiệu một thành viên, người dùng kích chuột vào liên kết Quay lại để về trang danh sách thành

viên.

– Tạo một website tĩnh để giới thiệu về các mặt hàng được bày bán ở một cửa hàng.Website này bao gồm một trang giới thiệu cửa hàng, một trang danh sách các mặt hàng Từ trang danh sách các mặt hàng, người dùng kích chuột vào tên mặt hàng hoặc hình ảnh của hàng để vào trang xem mô tả chi tiết mặt hàng.

• Yêu cầu chung: Tạo các trang tĩnh có đuôi là .htm Tất cả các định dạng phải được

định nghĩa và sử dụng theo css Sử dụng frames để hiển thị nhiều trang.

Thực hành

– Macromedia Dreamweaver MX 2004 hoặc

Microsoft Visual Studio NET.

• Yêu cầu

– Kết hợp HTML, CSS và JavaScript để tạo ra Websites tĩnh có giao diện được mô tả trước – Chia nhóm 3 người, mỗi nhóm nhận thực hiện một trang.