Mục tiêu bài học
Kết thúc chương này, bạn có thể:
- Biết cách sử dụng bảng (table).
- Biết cách sử dụng lớp (layer).
- Chèn các đối tượng đa phương tiện “Multimedia” vào tài liệu HTML
Giới thiệu
Chúng ta đã học cách nhóm các dữ liệu có liên quan vào các danh sách, nhưng còn có một cách khác để điều khiển việc hiển thị văn bản trên trang web, bằng cách dùng các bảng. Trong chương này chúng ta sẽ học cách tạo bảng. Chúng ta cũng sẽ thảo luận về các lớp. Phần cuối của chương này sẽ nói về làm thế nào để chèn các điều khiển đa phương tiện “multimedia” vào bên trong tài liệu HTML.
Cách tạo bảng
Chúng ta có thể sử dụng bảng để hiển thị dữ liệu dưới dạng các hàng và các cột. Bảng giúp cho chúng ta điều khiển, xác định và sắp xếp vị trí của văn bản và hình ảnh trên trang web, thay vì giao tất cả các việc đó cho trình duyệt.
Thẻ dùng để tạo bảng
Thẻ được dùng để tạo bảng trong tài liệu HTML. Các thuộc tính của phần tử được áp dụng cho bảng, nhưng không cho dữ liệu hiển thị trên bảng. Đơn vị cơ bản của bảng là một ô và được định nghĩa bằng thẻ
| . |
Using Tables
Data Cell 1
Data Cell 2
Data Cell 3
Một hàng của bảng được định nghĩa bằng thẻ
Using Tables
Data Cell 1
Data Cell 2
Data Cell 3
Data Cell 4
Data Cell 5
Data Cell 6
Các ô tạo thành một hàng. Các hàng tạo thành bảng. Điều này được nói đến trong cú pháp của HTML được sử dụng để tạo bảng. Thẻ TD được lồng trong thẻ TR. Thẻ TR được nằm trong cặp thẻ đóng và mở TABLE.
Thuộc tính BORDER có thể được sử dụng để định nghĩa các ô và cấu trúc của bảng. thuộc tính này chỉ độ rộng của đường viền. Nếu giá trị được đặt là 0 thì đường viền sẽ không hiển thị.
Using Tables
Data Cell 1
Data Cell 2
Data Cell 3
Data Cell 4
Data Cell 5
Data Cell 6
Mỗi cột trong bảng, phần tiêu đề có thể định nghĩa. Thẻ định nghĩa tiêu đề cho cột.
Employee Name
Phần tử CAPTION được dùng để thêm vào một chú thích cho bảng. ở đây bạn sử dụng nó để mô tả bảng.
Creating a Table
Chèn hàng và cột
Những thẻ
Using Tables
Data Cell 1
Data Cell 2
Data Cell 3
New column
Data Cell 4
Data Cell 5
Data Cell 6
New Row
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
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
Using Tables
Creating a Table
NUTS
BOLTS
Hammers
Quarter 1
Jan
2500
1000
1240
Feb
3000
2500
4000
March
3200
1000
2400
Đị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
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
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.
Using Layers
Using Layers
Layer 1
A layer is an element that can be added to a Web page.
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
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
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ẻ có thể được sử dụng.
Inserting a Video file
Inserting Video
Chèn các Java Applets
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
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
- Thẻ được dùng để chèn một file video vào trong một tài liệu HTML
- 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.
Bài đăng
0 nhận xét:
Đăng nhận xét