và có thể được dùng để chèn theo thứ tự các hàng và các cột vào trong bảng. Ví dụ được mô tả bên dưới. Using Tables Data Cell 1 | Data Cell 2 | Data Cell 3 | New column | Data Cell 4 | Data Cell 5 | Data Cell 6 | New Row | Kết quả của ví dụ 6 Xóa hàng và cột Để xóa một hàng, xóa thẻ tương ứng cùng với tất cả các thẻ bên trong nó từ một file mã nguồn HTML. Tương tự, để xóa các cột Hãy xem hình 5.4. Để xóa dòng thứ hai, chúng ta cần xóa thẻ | cho ô dữ liệu 4, 5 và 6 cùng với thẻ | mà nó kèm theo những thẻ này từ file HTML nguồn. Để xóa cột cuối cùng, đó là New column, chúng ta cần xóa thẻ | lập nên ô này Using Tables Data Cell 1 | Data Cell 2 | Data Cell 3 | New Row | Kết quả của ví dụ 7 Trộn ô: Kết hợp các cột hay dòng Đôi khi chúng ta muốn nối các dòng và các cột vào trong một ô. Như vậy, chúng ta tạo một cột để kéo rộng ra cho hơn một dòng, hay tạo ra một dòng để kéo rộng ra cho hơn một cột. Thuộc tính COLSPAN và ROWSPAN được sử dụng để tạo ra những ô mà chúng có thể kéo rộng ra cho hơn một dòng hay cột. Thuộc tính COLSPAN được sử dụng với thẻ , trong khi đó thuộc tính ROWSPAN được sử dụng với thẻ | . Using Tables Creating a Table Quarter 1 | Quarter 2 | Jan | Feb | March | April | May | June | 1000 | 550 | 240 | 1500 | 2765 | 1240 | 3000 | 2430 | 2500 | 1250 | 900 | 3400 | Kết quả của ví dụ 8 Using Tables Creating a Table | | NUTS | BOLTS | Hammers | Quarter 1 | Jan | 2500 | 1000 | 1240 | Feb | 3000 | 2500 | 4000 | March | 3200 | 1000 | 2400 | Kết quả của ví dụ 9 Định dạng cho ô Có thể chỉ định được vị trí của văn bản bên trong mỗi ô của bảng. Những thuộc tính canh lề ngang (ALIGN) và canh lề dọc (VALIGN) được sử dụng để điều khiển việc canh lề trong các ô của bảng. Thuộc tính ALIGN có thể có các giá trị: trái, phải, giữa, đều hai bên. Thuộc tính VALIGN có thể có các giá trị: trên, giữa và dưới Ngoài việc xác định vị trí nội dụng của các ô trong bảng, chúng ta cũng có thể thay đổi kích thước, màu sắc của bảng. Chúng ta có thể xác định chiều rộng của bảng. Đó là vùng trên màn hình mà bảng sẽ mở rộng ra. Thuộc tính WIDTH của thẻ TABLE sẽ thật sự cần thiết. Giá trị của thuộc tính WIDTH có thể là một định dạng phần trăm hay thậm chí là các điểm. Chẳng hạn, Điều này sẽ kéo rộng bảng đến 50% của màn hình Nếu chúng ta muốn thêm một vài màu sắc cho bảng, chúng ta sử dụng thuộc tính BGCOLOR. Giá trị này có thể là tên của một màu hay là giá trị ở hệ thập lục phân. Using Tables Data Cell 1 | Data Cell 2 | Data Cell 3 | Data Cell 4 | Data Cell 5 | Data Cell 6 | Kết quả của ví dụ 10 Nếu nội dung của văn bản trong ô nhỏ hơn không gian trong ô đó thì sẽ có không gian trống là khoảng cách giữa văn bản và đường viền của ô. CELLSPACING là không gian giữa các ô và CELLPADDING là không gian giữa đường viền ô của bảng với nội dung văn bản được đặt trong ô. Như đã mô tả ở trên, thuộc tính CELLSPACING định nghĩa không gian giữa các ô, tính theo điểm (pixel). Thuộc tính CELLPADDING định nghĩa những không gian bên trong ô của bảng Using Tables Data Cell 1 | Data Cell 2 | Data Cell 3 | Data Cell 4 | Data Cell 5 | Data Cell 6 | Kết quả của ví dụ 11 Lớp (Layer) Khi đặt vị trí cho một phần tử trên trang Web, chúng ta xác định tọa độ x và y. Tuy nhiên, chúng ta cũng có thể xác định tọa độ z. Như thế, trục tọa độ z là một đường ảo từ phía trước đến phía sau màn hình. Vì vậy, một phần tử có thể được đặt ở trên hay dưới phần tử khác trong lớp. Tọa độ z xác định thứ tự trong đó các phần tử được hiển thị Khái niệm về lớp có thể được đưa ra đối với một tài liệu HTML. Một lớp giống như một frame mà nó có thể chứa nội dung và được chỉ định vị trí ở nơi được yêu cầu. Trong phần tiếp theo sẽ thảo luận kỹ hơn về lớp. Lớp là gì? Lớp là một phần tử có thể được thêm vào một trang Web. Chúng ta có thể xác định chính xác vị trí của một lớp trong trang Web. Netscape cung cấp một phần tử mà nó có thể được sử dụng để xác định vị trí nội dung trên trang Web. Lớp có tập thuộc tính riêng của nó có thể được truy xuất và lập trình. Các lớp có thể được lập trình thông qua script (tức là đoạn mã của một chương trình nhỏ) để tạo ra những trang động hay những trang có khả năng tương tác với nhau. Vì vậy, chúng ta có thể xác định vị trí các phần tử trên trang mà ta muốn thay vì phải di chuyển nó đến phần chức năng(functionality) được yêu cầu bởi mỗi trình duyệt. Thêm vào đó, chúng ta có thể kết nối các văn bản và hình ảnh lại với nhau để tạo ra một trang web sinh động và dễ đọc. Các hiệu ứng đặc biệt có thể được thêm vào trên một trang web mà không cần phải tăng kích thước của file lên nhiều lắm. Chúng ta có thể thay đổi các phần của trang mà khô ng phải thay đổi lại, thiết kế lại trang chủ, như thế, chúng ta có thể thay những nội dung của một tầng đặc biệt mà không phải hiệu chỉnh trang chủ. Cả Internet Explorer và Netscape Navigator đều cung cấp công nghệ lớp và mỗi nhà cung cấp đều có một cách riêng. Đối với Internet Explorer hỗ trợ mô hình CSS (Cascading Style Sheet – Mô hình thác nước). Khi chúng sử dụng những kiểu Bảng kiểu như thế này thì chúng ta có thể nhóm các thành phần của trang lại với nhau trong một Bảng kiểu hình thác nước. Bảng kiểu loại này có thể được đưa ra để chọn một hay tất cả các phần tử trong một tài liệu HTML. Những phần tử có thể được điều khiển thông qua VBScirpt hay JavaScript. Để tạo ra một tầng tài liệu chúng ta sẽ phải thay đổi thuộc tính của kiểu Bảng kiểu này. Netscape Navigator cũng hổ trợ việc sử dụng CSS, nhưng theo một cách khác. Chúng ta phải sử dụng thẻ do Netscape hỗ trợ. Sử dụng các lớp Lớp được bàn ở đây như là một thực thể đơn của nội dung. Nó cũng được chỉ ra giống như bất kỳ một kiểu nào khác mà nó chỉ đến những phần tử bên trong một trang HTML. Vì vậy, nếu chúng ta muốn ứng dụng kiểu lớp cho tất cả những phần tử bên trong lớp, chúng ta có thể sử dụng những phần tử như DIV hay SPAN. Grouping elements Layer 1 This is a paragraph element within division 1 Content for layer 1. Outside the division Division 2 This is a paragraph element within division 2 Content for layer 1. Kết quả của ví dụ 12 Using Layers Using Layers Layer 1 A layer is an element that can be added to a Web page. Kết quả của ví dụ 13 Chèn Multimedia vào tài liệu HTML Một trong những nhân tố lớn nhất trong sự phát triển của web đó là sự tích hợp của các đa phương tiện(multimedia) bên trong những tài liệu HTML. Khi những phiên bản đầu tiên của HTML ra đời, nó cũng đã bao gồm các đối tượng liên quan đến hình ảnh vào trong một tài liệu để cho phép nhúng hình ảnh nội tuyến vào nội dung tài liệu. Sau đó, HTML được mở rộng để cho phép nhúng không chỉ là những ảnh tĩnh mà còn là âm thanh và video. Hiện nay, tất cả những tính năng đó được phép sử dụng để làm phong phú thêm cho các trang web. Chèn ảnh động vào (.GIF) vào tài liệu HTML Trong chương 3, chúng ta vừa mới thảo luận thế nào là file GIF và chúng được đưa vào một tài liệu HTML bằng cách nào. Nhớ rằng thẻ được dùng để chèn một ảnh vào trong trang web. Inserting an animated .GIF File Inserting an Image Kết quả của ví dụ 14 Trong ví dụ trên, cofeecup.gì là một ảnh động là file .gif khi hiển thị trong trình duyệt thì nó hiển thị một luồng khói phía trê cốc cà phê. File này được đặt vào cùng một thư mục với file HTML nguồn. Tuy nhiên, nó có thể được thay thế bởi các hình ảnh động khác Chèn âm thanh vào tài liệu HTML Tính hấp dẫn của một trang Web tương tác đó là thường sử dụng tiếng “bip” khi người dùng kích hoạt đến một trang web khác. Một cách tùy chọn, một trang web sẽ yêu cầu kết hợp tiếng nhạc bên trong nó để làm cho trang web đó có tính hấp dẫn hơn. MIDI là một định dạng chuẩn của các file nhạc mà chúng được dùng trong tài liệu HTML. Các file MIDI chứa những nốt nhạc và các loại nhạc cụ cho các bản nhạc. Nhạc cụ điện tử trong card âm thanh mô phỏng tiếng nhạc. Nói cách khác, các file .wav và .au dùng để lưu âm thanh Để thêm vào âm thanh cho trang web, chúng ta phải sử dụng các file âm thanh (.wav hay .midi) trên hệ thống của chúng ta. Nếu chúng ta không xác định được đường dẫn thì trình duyệt sẽ tìm file mà ở đó trang web đang được định vị. Thuộc tính loop xác định số lần mà âm thanh sẽ được bật lên. Chú ý rằng phần tử BGSOUND không được hỗ trợ bởi Netscape. Nhạc MIDI như đã đề cập ở phần trước, chỉ là một tiếng nhạc tổng hợp. Tuy nhiên, nếu muốn thêm vào file nhạc của mình, chẳng hạn như giọng nói hay một bài hát đặc biệt khi trang web được chuyển đến, thì chúng ta cần phải sử dụng những file âm thanh đã được số hóa. Một file âm thanh được số hóa chứa những thông tin để sao chép lại một bản sao âm thanh đúng như file gốc của nó. Tần số tại những tâm thanh được đưa ra làm ví dụ chuẩn xác định được chất lượng của file âm thanh đó, tần suất cao hơn, chất lượng âm thanh tốt hơn. Điểm hạn chế đó là nó cũng sẽ làm gia tăng kích thước của file. Những file âm thanh được số hóa có thể được lưu trong hai định dạng, đó là file .au hay .wav Định dạng file .wav bắt đầu với hệ điều hành Windows. Nó có tỉ lệ nén thấp và kích thước file lại rất lớn. Còn định dạng file .au được tổ chức với những máy cài hệ điều hành Unix. Có vẽ sẽ tốt hơn cho việc lưu trữ các file âm thanh được và nó có một tỉ lện nén cao hơn so với những file .wav Inserting Sound Inserting sound Kết quả của ví dụ 16 Trong ví dụ trên, khi hiển thị trang web trong trình duyệt file nhạc đăngnhập Windows sẽ chạy. File windowLogonSound.wav được đặt trong cùng thư mục với file HTML nguồ. Tuy nhiên , nó có thể được thay thế bởi các file nhạc khác Chèn Video vào tài liệu HTML Một file video có thể có phần mở rộng là: .avi, .asf, .ram hay là .ra. Để chèn một file video vào tài liệu HTML, thẻ Chèn các Java Applets 5cb0 Bản thân trang HTML rất thụ động. Điều này có nghĩa là nội dung của chúng ít nhiều là tĩnh và không thay đổi trong một khoảng thời gian. Có một vài cách để tạo các chương trình tương tác trên Web, nhưng một trong những cách đáng chú ý nhất là sử dụng applet. Một applet là một chương trình được viết trong một ngôn ngữ giống như Java, đặc biệt là được thiết kế để làm việc trên Internet thông qua một trình duyệt Web. Một applet có thể được sử dụng cho các mục đích khác nhau chính từ những phương tiện giao tiếp dựa trên Web cho đến những việc thiết kế các giao diện đồ họa người dùng cho các ứng dụng back-end. Với việc sử dụng applet chúng ta có thể tạo ra các trò chơi đa phương tiện (multimedia game), các cuộc thi, và các chương trình tương tác kiểu như vậy cho Web. Một applet có thể được nhúng trong một trang HTML và được thực thi trên một trình duyệt Web có hỗ trợ Java. Các trình duyệt Web có hỗ trợ Java là Internet Explorer 3.0 hoặc Netscape Navigator 3.0 Để hiển thị một applet, chúng ta cần tạo một trang HTML mà nó có thể nạp các file applet vào trong một trình duyệt. File HTML sử dụng thẻ Applet. Thẻ applet lần lượt trỏ đến đường dẫn của file applet như tham số đầu tiên của nó. Thẻ applet cũng có hai thuộc tính, đó là chiều rộng và chiều cao. Hai thuộc tính này sẽ xác định hướng của applet trên màn hình của trình duyệt Cũng có thể thông qua các tham số để đến được một applet bằng cách sử dụng thẻ trong file HTML. Tên của tham số được xác định bằng cách sử dụng thẻ và giá trị của nó được xác định bằng cách sử dụng thuộc tính giá trị trong bên trong thẻ. Ví dụ sau đây chỉ ra rằng làm cách nào để file ảnh có thể được chuyển qua như là một tham số thông qua một file HTML đến một Applet Inserting Applet in HTML Kết quả của ví dụ 21 Trong ví dụ trên, AppletDemo là một file Java Applet. File này có thể được thay thế bởi các file java applet khác Tóm tắt bài học - Bảng cho chúng ta điều khiển vị trí của văn bản hay hình ảnh trên trang Web, thay vì để tùy ý trên trình duyệt
- Thẻ
được sử dụng để tạo một bảng trên tài liệu HTML - Thành phần cơ bản của một bảng là ô và được định nghĩa với thẻ
- Một dòng của bảng được định nghĩa dùng thẻ
- Thuộc tính BORDER có thể dùng để định nghĩa các ô và cấu trúc của bảng. Thuộc tính này xác định chiều rộng của đường viền
- Phần tử CAPTION được sử dụng để thêm vào tiêu đề cho bảng. Phần mô tả của bảng có thể được đặt ở đây
- Thẻ
được sử dụng xác định phần tiêu đề cho mỗi cột - Những thuộc tính COLSPAN và ROWSPAN được sử dụng tạo các ô để kéo rộng ra hơn một dòng hay một cột
- Thuộc tính COLSPAN được sử dụng với thẻ
, trong khi đó thuộc tính ROWSPAN được sử dụng với thẻ | - Những thuộc tính canh lề ngang (ALIGN) và canh lề dọc(VALIGN) được sử dụng để điều khiển việc canh lề bên trong các ô của bảng.
- Thuộc tính WIDTH của thẻ TABLE được dùng để xác định độ rộng của bảng
- Nếu muốn thêm vào màu nào đó cho bảng, chúng ta sử dụng thuộc tính BGCOLOR
- Cellspacing chỉ đến khoảng cách giữa các ô, Cellpadding chỉ đến khoảng cách giữa các đường viền của ô trong bảng và đoạn văn bản được định vị trong ô đó.
- Lớp giống như frame, có thể chứa nội dung và được định vị ở nơi được yêu cầu
- Netscape hỗ trợ phần tử mà nó có thể dùng để định vị nội dung trên trang Web
- Một trong những nhân tố lớn nhất trong sự phát triển của Web đó là sự tích hợp các thuộc tính đa phương tiện bên trong tài liệu HTML
- Phần tử được sử dụng để thêm vào âm thanh cho trang web
- Một applet có thể được chèn vào trong một trang HTML và được xử lý trên trình duyệt có hỗ trợ Java
Ôn tập- Điền vào chỗ trống
- Phần tử___CAPTION_____ được dùng để cung cấp phần mô tả của một bảng.
- Thẻ_____TD_____được dùng để định nghĩa một ô của bảng
- Thuộc tính _________dùng để xác định vị trí nội dung của một ô trong bảng ở phía trên của ô đó
- Thuộc tính _WIDTH____xác định diện tích mà bảng sẽ chiếm giữ trên trang
- Những file_____ chứa đựng các nốt nhạc và các loại nhạc cụ cho bảng hòa âm
- Kiểm tra đúng hay sai:
- Thẻ TH được dùng để xác đinh tiêu đề cột cho một bảng.dung
- Để ẩn đường viền giữa các ô bạn phải gán cho thuộc tính BORDER bằng 0 dung
- Chúng ta có thể xác định nhiều hơn một thuộc tính canh lề giữa các ô dung
- “Cellspacing” được xác định khoảng cách giữa các lề và nội dung của ô trong bảúngai
- Thuộc tính COLSPAN được dùng trong thẻ TH. dung
- Tần số mẫu âm thanh quyết định chất lượng của file âm thanh. sai
Tự thực hành - Tạo bảng như dưới:
Using Tables Employee Name | Designation | Salary | John | Manager | 4000 | David | Officer | 2500 | Graham | Executive | 3000 | - Tạo một bảng để thống kê quá trình bán hàng hàng năm của công ty “My Company Limited”. Hiển thị các số liệu hằng tháng được nhóm theo quí. Các sản phẩm là: kẹp giấy, đinh kẹp và bút
- Viết một đoạn script để hiển thị bốn tầng khác nhau trên một trang. Mỗi tầng nên có một màu khác nhau.
|
|
|
|
|
|
|
|