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