Hỏi – đáp bên lề dành cho tác giả Web (phần 2)

(Tiếp theo Phần 1)

7. Hình ảnh

  1. Làm thế nào để hiển thị hình ảnh lên trang của tôi?
  2. Nên dùng loại định dạng ảnh nào?
  3. Làm thế nào để kết nối (link) hình ảnh đến nội dung nào đó?
  4. Làm thế nào để tạo ảnh nhỏ được kết nối đến hình ảnh nguyên cỡ?
  5. Làm thế nào để kết nối từng phần bức ảnh đến các nội dung khác nhau?
  6. Làm thế nào để loại bỏ viền màu xanh bao quanh các ảnh được kết nối?
  7. Tại sao lại có một tia màu ở phía trái hoặc phải của hình ảnh?
  8. Làm thế nào để loại bỏ các khoảng trống bao quanh/giữa các hình?
  9. Tại sao các hình ảnh lại hiển thị sai hoặc không tải được?
  10. Làm thế nào để tạo nên ảnh GIF động?
  11. Làm thế nào để hiển thị hình ảnh ngẫu nhiên?
  12. Có thể đặt mã lệnh markup vào trong dòng chữ ALT không?
  13. Làm thế nào để căn lề hình ảnh sang phải/trái?
  14. Làm thế nào để chỉ định hình nền?
  15. Làm thế nào để có hình nền cố định (không trượt được)?
  16. Làm thế nào để có hình nền không lặp lại?

8. Các hiệu ứng trình chiếu

  1. Làm thế nào để tạo ra danh sách với dấu hoa thị tùy ý?
  2. Làm thế nào để tạo ra dòng kẻ ngang tùy ý?
  3. Tìm đâu ra một bộ đếm số lần truy cập (“hit counter”)?
  4. Làm thế nào để hiển thị ngày giờ hiện thời trong văn bản?
  5. Làm thế nào để có chữ chạy trên thanh trang thái?
  6. Làm thế nào để căn phải hoặc căn đều lề cho đoạn chữ?
  7. Làm thế nào để thụt đầu dòng cho đoạn văn?
  8. Làm thế nào để thụt vào cả đoạn văn dài?
  9. Làm thế nào để loại bỏ lề bao quanh trang?
  10. Làm thế nào để ngắt hết trang?
  11. Làm thế nào để có một biểu tượng tùy ý khi mọi người đánh dấu website của mình?
  12. Làm thế nào để tự phát ra một file nhạc khi người ta đến trang của mình?

9. Bảng HTML

  1. Có thể lồng bảng bên trong bảng không?
  2. Làm thế nào dùng bảng để cấu trúc nên các form?
  3. Làm thế nào để căn giữa một bảng?
  4. Làm thế nào để căn lề bảng sang phải/trái?
  5. Có thể dùng gía trị phần trăm cho <TD WIDTH=…> không?
  6. Tại sao <TABLE WIDTH=”100%”> không dùng hết toàn bộ bề rộng trình duyệt?
  7. Tại sao có dấu cách dư ra phía trên hoặc dưới bảng?
  8. Có vấn đề gì với việc dùng bảng để trình bày không?

10. Biểu mẫu (form) HTML

  1. Dùng form như thế nào?
  2. Làm thế nào để dữ liệu form chuyển vào email cho tôi?
  3. Làm thế nào để dùng bảng cấu trúc nên form?
  4. Làm thế nào để loại bỏ các khoảng trống sau thẻ </form>?
  5. Làm thế nào để tạo form sao cho nó được gửi bằng cách ấn ENTER?
  6. Làm thế nào để đặt focus vào trường thứ nhất trong form?
  7. Làm thế nào để lập một form với các nút theo ý thích?
  8. Liệu có thể có nhiều nút nộp (Submit) trên cùng một form không?
  9. Liệu có thể có nhiều hoạt động (action) trên cùng một form không?
  10. Làm thế nào để yêu cầu các trường phải được điền vào, hoặc điền vào đúng?
  11. Liệu có thể ngăn không cho form bị nộp lại không?
  12. Làm cách nào để cho phép tải file lên website của tôi?
  13. Làm thế nào để dùng form lập các trình đơn duyệt web dạng kéo xuống (pull-down navigation menu)?

11. Khung HTML

  1. Làm thế nào để tạo ra khung? Bộ khung (frameset) là gì?
  2. Làm thế nào để khiến cho một kết nối hoặc form trong một khung cập nhật được khung khác?
  3. Tại sao đường kết nối của tôi mở ra cửa sổ mới thay vì cập nhật khung sẵn có?
  4. Làm thế nào để cập nhật 2 khung cùng lúc?
  5. Làm thế nào để thoát khỏi một bộ khung?
  6. Làm thế nào để chắc rằng các tài liệu đóng khung được hiển thị bên trong bộ khung của chúng?
  7. Có cách nào tránh việc bị đóng khung không?
  8. Làm thế nào để chỉ định một tổ hợp cụ thể các khung thay vì của tài liệu mặc định?
  9. Làm thế nào để xóa viền xung quanh khung?
  10. Làm thế nào dể tạo ra một khung với thanh trượt đứng nhưng không có thanh trượt ngang?
  11. Làm thế nào để thay đổi tiêu đề của văn bản được đóng khung?
  12. Tại sao khung lại không đúng kích thước như chỉ định?
  13. Có vấn đề gì với việc dùng khung không?
  14. Các máy tìm kiếm có “ghét” khung không?

Mục 7: Hình ảnh

7.1. Làm thế nào để hiển thị hình ảnh trên trang web của tôi?

Hãy dùng phần tử IMG. Thuộc tính SRC chỉ định vị trí hình ảnh này. Thuộc tính ALT cho dòng chữ thay thế trong trường hợp trình duyệt không tải hình ảnh. Chẳng hạn:

<img src="logo.gif" alt="ACME Products">

Xem thêm

7.2. Tôi nên dùng định dạng nào cho hình ảnh?

Sau đây là một quy tắc đơn giản:

Có rất nhiều màu ư? Hãy dùng JPEG.
Có màu tô đặc và các đường nét gãy gọn? Hãy dùng GIF hoặc PNG.

Các định dạng hình ảnh khác nhau thì nén dữ liệu theo cách khác nhau, mỗi loại có những ưu điểm và nhược điểm riêng. Định dạng JPEG hợp với các ảnh mà màu sắc hòa trộn và chuyển dần từ màu này sang màu khác. Ví dụ điển hình là ảnh chụp vì chúng thường có những bóng màu và sự đa dạng màu sắc tinh tế.

Các định dạng GIF và PNG rất hợp với các hình ảnh có tương đối ít màu và không có sự chuyển dần màu sắc. Đa số các hình web nhỏ đều rơi vào mục này. Những định dạng này đều nén tốt hình ảnh, và các đường nét, chữ, mép hình đều còn đảm bảo sắc nét.

Độ trong suốt của PNG thì tốt hơn nhiều so với của GIF, cho phép hiển thị trong suốt từng phần và những hiệu ứng thú vị khác nữa. Tuy nhiên, Internet Explorer trên Windows (ngay cả phiên bản 6) không hỗ trợ gì thêm so với độ trong suốt kiểu GIF.

Lưu ý rằng các bộ lưu cache máy chủ AOL chuyển đổi các hình ảnh thành file định dạng hình được nén mạnh (dạng *.art), và theo mặc định, các trình duyệt AOL được cấu hình hóa để dùng những phiên bản nhỏ, chất lượng thấp này thay vì ảnh gốc.

Xem thêm

7.3. Làm thế nào để liên kết một hình ảnh với cái gì khác?

Chỉ việc dùng hình ảnh làm nội dung liên kết như sau:

<a href=...><img src=... alt=...></a>

7.4. Làm thế nào để tạo ra một hình ảnh thu nhỏ (thumbnail) kết nối với hình ảnh nguyên khổ?

Một hình ảnh nhỏ chính là mọt bản sao của ảnh nguyên khổ mà đã được chỉnh sửa để giảm kích thước file. Nó được liên kết với ảnh nguyên khổ bằng một đường kết nối thông thường:

<a href="full-sized.jpg"><img src="thumbnail.jpg" alt=...></a>

Có vài kĩ thuật để giảm kích thước file lấy làm ảnh thu nhỏ, bao gồm:

  • lấy mẫu lại/co hình ảnh lại để tạo ra hình ảnh nhỏ hơn;
  • xén các cạnh hình ảnh để bỏ đi những phần thừa;
  • giảm chất lượng của ảnh để tăng tỉ lệ nén; và
  • giảm kích cỡ của bảng màu (chẳng hạn chuyển thành thang màu xám).

Bạn sẽ cần các phần mềm đồ họa để tạo ra các ảnh nhỏ. Những công cụ đồ họa miễn phí sẽ thực hiện tất cả các tính năng nêu trên.

Những hình ảnh nhỏ có thể dùng nhiều kĩ thuật đồng thời. Chẳng hạn, Jakob Nielsen đề cao “Relevance-Enhanced Image Reduction“, vốn kết hợp lấy mẫu lại/thu nhỏ và xén ảnh.

7.5. Làm thế nào để kết nối các phần khác nhau của ảnh với các nội dung khác nhau?

Hãy dùng cách ánh xạ hình ảnh. Những ánh xạ hình ảnh phía máy khách thì không cần đến khâu xử lý phía máy chủ, nhờ vậy mà thời gian phản hồi sẽ ngắn hơn. Mặt khác, ánh xạ hình phía máy chủ thì ẩn giấu các định nghĩa kết nối khỏi trình duyệt, và và có thể đóng vai trò lưu trữ các ánh xạ hình phía máy khách, chỉ trong một số ít các trình duyệt cũ có hỗ trợ  ánh xạ hình phía máy chủ nhưng không hỗ trợ ánh xạ hình máy khách.

Chi tiết cấu hình hóa ánh xạ hình máy chủ thì khác nhau giữa các máy chủ. Hãy tham khảo tài liệu máy chủ để có thông tin chi tiết.

Ánh xạ ảnh phía máy khách được thực hiện bằng HTML. Phần tử MAP định nghĩa một ánh xạ ảnh riêng lẻ và phần tử AREA định nghĩa các vùng liên kết cụ thể với phép ánh xạ ảnh đó. Thuộc tính USEMAP của phần tử IMG sẽ gắn một ánh xạ ảnh với một ảnh cụ thể.

Xem thêm

7.6. Làm thế nào để xóa viền xanh lam bao quanh hình ảnh được kết nối?

Trong mã HTML của bạn, có thể chỉ định thuộc tính BORDER cho hình đó:

<a href=...><img src=... alt=... border="0"></a>

Trong mã CSS của bạn, có thể chỉ định thuộc tính viền cho các hình ảnh được kết nối:

a img { border: none ; }

Tuy nhiên, lưu ý rằng việc bỏ viền hình ảnh khiến cho khó khăn hơn khi xác định nhanh xem những hình ảnh nào có thể click vào được.

7.7. Tại sao tôi thấy tia màu ở bên trái hoặc phải hình ảnh trên bài của tôi?

Đây là kết qủa của việc để lại dấu trống “white space” (dấu cách và dấu xuống dòng) trước hoặc sau một thẻ IMG bên trong một neo. Chẳng hạn:

<a href=...> <img src=...> </a>
 

có thể gồm dấu trống bên trái và bên phải hình ảnh. Vì nhiều trình duyệt mặc định hiển thị các neo là những dấu gạch ngang thấp ( _ ) có màu, nên chúng sẽ hiển thị dấu trống cạnh hình bằng những tia màu như vậy.

Giải pháp: đừng để lại bất kì dấu trống nào giữa các thẻ neo và thẻ IMG. Nếu dòng qúa dài thì hãy ngắt ra ở vị trí bên trong thẻ thay vì ở ngoài, như thế này:

<a href=...
 ><img src=...></a>

Các bộ kiểm tra phong cách trang web như Weblint sẽ xem xét vấn đề này trong mã nguồn HTML của bạn.

7.8. Làm thế nào để xóa bỏ khoảng trống bao quanh hình ảnh của tôi?

Nếu hình ảnh nằm trong một bảng, hãy đảm bảo chắc rằng bạn đặt các thuộc tính BORDER, CELLSPACING, và CELLPADDING về gía trị 0.

Các khoảng cách thừa giữa các hình thường được tạo ra bởi các dấu trống bao quanh thẻ <IMG> trong mã markup. Có thể an toàn dùng các dấu xuống dòng bên trong một thẻ (giữa các thuộc tính) chứ không phải giữa hai thẻ. Chẳng hạn, thay các dòng này:

<td ...>
 <img src=... alt=...>
 <img src=... alt=...>
 </td>

bằng dòng này:

<td ...><img src=... alt=...><img src=... alt=...></td>

The tài liệu quy định mới nhất về HTML, hai cách viết trên là tương đương nhau. Tuy vậy, các trình duyệt thông dụng đều không tuân theo quy định trong trường hợp này.

Cuối cùng, các khoảng cách thừa giữa các hình ảnh có thể xuất hiện trong những tài liệu vốn kích hoạt chế độ hiển thị “tiêu chuẩn” của các trình duyệt trên nền Gecko, như Mozilla và Firefox.

Xem thêm

7.9. Tại sao các hình ảnh trong bài tôi lại hiển thị không đúng hoặc không tải được?

Có nhiều khả năng khác nhau:

  • Bạn có thể đặt sai URL cho ảnh. Lưu ý rằng các URL phân biệt chữ in-thường, nên example1.gif, Example1.Gif, và EXAMPLE1.GIF là khác nhau. Hơn nữa, URL dùng các gạch xuôi thay vì gạch ngược, vì vậy images\example2.gif là sai, và cần được chuyển về images/example2.gif.
  • Mã lệnh markup của bạn có thể có lỗi cú pháp, chẳng hạn thiếu mất dấu đóng nháy kép trong thuộc tính SRC:<img src="example3.jpg alt=...>
  • Việc dùng kí tự “>” trong thuộc tính ALT có thể sẽ gây khó dễ những trình duyệt rất cũ, vốn đóng thẻ ngay tại dấu  “>” đầu tiên mà chúng bắt gặp: <img alt="2 + 2 > 3" src="example4.png">
  • Dùng cách chú thích HTML để vô hiệu hóa mã markup với các thẻ HTML có thể gây khó dễ những trình duyệt rất cũ, vốn đóng thẻ ngay tại dấu  “>” đầu tiên mà chúng bắt gặp.
  • Phần mềm viết web bạn dùng có thể đã sử dụng các URL file (như file:///c:/path/example5.gif). Nếu vậy thì bạn phải thay chúng bằng các URL tương đối (như example5.gif) hay URL http (như http://server.example/path/example5.gif). Hình ảnh của bạn có thể thuộc định dạng không được hỗ trợ rộng rãi như BMP của Microsoft hay ART của AOL. Hãy chắc rằng bạn đã lưu hình ảnh dưới dạng được hỗ trợ tốt như GIF, JPEG, hay PNG. (Lưu ý rằng bạn phải chuyển định dạng dữ liệu ảnh chứ không thể đơn thuần đổi tên file là được. Các ứng dụng đồ họa miễn phí sẽ thực hiện việc chuyển định dạng đồ họa như vậy.)

Xem thêm

7.10. Làm thế nào để tạo các ảnh hoạt họa GIF?

Hãy xem các tài liệu sau:

7.11. Làm thế nào để hiển thị các hình ảnh ngẫu nhiên?

Có hai cách làm cơ bản. Một cách làm rất tốt cho bộ lưu trữ cache là dùng một thẻ IMG bình thường để tham chiếu tới một mã lệnh CGI nhằm điều hướng trình duyệt đến một trong số vài hình ảnh một cách ngẫu nhiên.

Cách thứ hai là phát sinh mã HTML theo cách động bằng cơ chế kiểu như Server Side Includes (SSI) hay CGI. Cách này kém thân thiện với bộ lưu trữ cache, nhưng cho phép mã lệnh bên cạnh (như các thuộc tính HEIGHT và WIDTH, hay các URL của kết nối/ảnh được ánh xạ) thay đổi cùng với hình ảnh. Nếu máy chủ của bạn cho phép SSI, các thông tin chi tiết có thể tìm được trên tài liệu máy chủ của bạn.

Xem thêm

7.12. Liệu tôi có thể viết mã vào dòng chữ ALT?

Không. Dù vậy thì các kí tự (&copy;, &#nnn; và tương tự) thì vẫn được phép.

Xem thêm

7.13. Làm thế nào để căn hình ảnh lệch trái (hoặc phải)?

Bạn có thể dùng <img align="right"> để dồn hình về phía phải.  (Dùng align="left" để dồn về trái.) Bất cứ nội dung nào đi theo sau thẻ <img> sẽ tràn quanh hình này. Dùng <br clear="right"> hoặc <br clear="all"> để đánh dấu điểm kết thúc của chữ chạy quanh hình, như ví dụ sau đây:

The image in this example will float to the right.

<img align="right" src=... alt=...>

Dòng chữ này sẽ được bó để chèn vào khoảng trống bên trái hình ảnh. (Và nếu chữ còn dài thì nó tiếp tục tràn xuống phía dưới hình nữa.)

<br clear="right">

Dòng chữ này sẽ xuất hiện bên dưới hình, ngay cả khi vẫn còn chỗ trống bên trái.

Thuộc tính CSS float (trôi) cũng có thể được dùng đến.

Xem thêm

7.14. Làm thế nào để chỉ định hình nền?

Bằng CSS, bạn có thể đề xuất một hình nền (và một màu nền nếu trình duyệt không hiện hình đó) bằng thuộc tính background. Sau đây là một ví dụ:

body {
    background: white url(example.gif) ;
    color: black ;
}

Bằng HTML, bạn có thể đề xuất một hình nền với thuộc tính BACKGROUND của phần tử BODY. Sau đây là một ví dụ:

<body background="imagefile.gif" bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#000080">

Nếu chỉ định một hình nền, bạn cũng nên chỉ định luôn dòng chữ, đường liên kết và màu nền vì các màu mặc định trên mày người đọc có thể không đủ độ tương phản với hình nền được chọn. Màu nền có thể được dùng ở những trình duyệt không dùng hình nền đó. Tác gỉa web không nên lệ thuộc vào hình nền vì các trình duyệt cho phép người đọc vô hiệu hóa việc tải các hình hoặc ghi đề lên các nền quy định cho tài liệu.

Xem thêm

7.15. Làm thế nào để có được một hình nền cố định (không bị cuộn)?

Bằng CSS, bạn có thể dùng thuộc tính background-attachment. Phần đính kèm trên nền này có thể được ghi tắt trong thuộc tính nền background, như ví dụ sau:

body {
    background: white url(example.gif) fixed ;
    color: black ;
}

Lưu ý rằng CSS này được hỗ trợ bởi Internet Explorer, Mozilla, Firefox Opera, Safari, và các trình duyệt khác. Trái lại, thuộc tính riêng BGPROPERTIES của Microsoft thì chỉ được hỗ trợ trên Internet Explorer.

Xem thêm

7.16. Làm thế nào để có một hình ảnh nền không bị trải lặp lại?

Với CSS, bạn có thể dùng thuộc tính background-repeat (lặp nền). Việc lặp ảnh nền có thể được bao gồm trong thuộc tính nền viết tắt như sau:

body {
    background: white url(example.gif) no-repeat ;
    color: black ;
}

Xem thêm

Mục 8: Hiệu ứng thuyết trình

8.1. Làm thế nào để lập danh sách với các dấu hoa thị tùy chọn?

Có vài phương pháp khác nhau, không có cách nào là hoàn hảo:

  • Dùng thuộc tính kiểu danh sách (list-style) trong CSS. Đây là cách được ưa chuộng để tạo các hoa thị theo ý thích, song không may là nó không được hỗ trợ phổ biến bởi các trình duyệt. Tuy nhiên, các trình duyệt nào không hỗ trợ sẽ hiện ra một dấu hoa thị thường, nên hiện giờ bạn dùng cách này sẽ không có vấn đề gì.
  • Dùng một thẻ <dl> cùng <dd> với các hình đi trước (nhớ align và có dòng chữ alt phù hợp) mà không có <dt>; cách này chẳng đẹp như một danh sách thực thụ.
  • Dùng một bảng có hai cột, với dấu hoa thị ở cột trái và chữ trên cột phải. Vì các trình duyệt phải tải xong cả bảng trước khi hiển thị nó lên, nên cách này có thể sẽ hơi chậm với các danh sách dài.
  • Tạo ra dấu hoa thị với thụt đầu dòng sẵn cùng nó. Chẳng hạn, nếu bạn dùng một hoa thị có bề ngang 10 pixel (điểm ảnh) thì bạn có thể làm cho hình nền rộng 25 pixel (trong suốt) và đặt dấu hoa thi sát về phía phải của nó. Bằng cách này sẽ tạo ra một đoạn thụt đầu dòng rộng 15 pixel bên trái dấu hoa thị. Nó sẽ tăng thêm một chút dung lượng của hifnh đồ thị nhưng vì là thuần một màu nên không tăng nhiều lắm. Cách này không phù hợp khi các mục kéo dài hơn một dòng (mà bạn cũng cần nhớ rằng chẳng thể biết trước là màn hình người đọc sẽ được đặt để hiển thị dòng dài bao nhiêu).

Xem thêm

8.2. Làm thế nào để tạo một đường gạch ngang theo ý mình?

Lựa chọn tốt nhất của bạn có lẽ là một IMG căn giữa với dòng chữ thay thế (ALT) là “–” :

<P ALIGN=center><IMG SRC="custom-line.gif" ALT="--------------------"></P>

Xem thêm

8.3. Tôi có thể lấy một “hit counter” (đếm số lần truy cập) ở đâu?

Hit counter là một đoạn mã lệnh hoặc chương trình nhỏ để đếm mỗi khi tài liệu được truy cập từ máy chủ.

Tại sao cần có hit counter? Nếu bạn tin rằng nó sẽ cho bạn biết có bao nhiêu lần tài liệu của bạn được truy cập đến thì bạn đã lầm. Không có bộ đếm nào có thể theo dõi được những lần truy cập từ các kho lưu trình duyệt hoặc proxy. Một số bộ đếm phụ thuộc vào số lượt tải hình ảnh để tăng lần đếm; nhưng đếm như vậy sẽ bỏ qua những lần truy cập từ các trình duyệt chữ, hay trình duyệt được chọn để không tải hình, hoặc những trường hợp người dùng ngắt việc truyền dữ liệu. Một số bộ đếm thậm chí còn yêu cầu truy cập đến một website khác; mà những website này có thể bị hỏng hoặc qúa tải, tất cả đều gây chậm trễ trong việc hiển thị các tài liệu của bạn.

Đa số các máy chủ web đều ghi lại những lượt truy cập cho các văn bản lưu vào trong máy chủ. Những trang ghi này có thể được xử lý để lấy thông tin về số lần truy cập tương đối trong một qúa trình dài. Không có lý do gì để hiển thị con số này cho độc gỉa xem, vì họ sẽ không biết là số lần truy cập tính theo mốc nào. Không phải tất cả nhà cung cấp dịch vụ đều cho phép truy cập đến các bản ghi server, nhưng nhiều nhà cung cấp có các đoạn mã lệnh để xuất ra thông tin về những lần truy cập đến một tài liệu cụ thể. Để biết thêm thông tin, hãy hỏi người quản trị hệ thống hoặc nhà cung cấp dịch vụ.

Xem thêm

8.4. Làm thế nào để hiện thị ngày hoặc giờ trong tài liệu của tôi?

Bằng server-side includes. Hãy hỏi người quản trị web xem liệu SSI có được hỗ trơ không, và cú pháp chính xác với server của bạn là gì. Nhưng cách này sẽ hiển thị giờ địa phương trên server (hoặc GMT/UTC), chứ không phải giờ địa phương ở máy khách. Và nếu tài liệu được lưu cache, thì dĩ nhiên thời gian sẽ kém chính xác dần đi. Có thể dùng JavaScript để hiển thị thời gian địa phương cho máy khách, nhưng hầu hết độc gỉa đều quen nhìn đồng hồ trên màn hình máy họ rồi thì còn cần gì phải báo thời gian nữa?

Nếu bạn muốn đặt ngày hoặc giờ hiện tại lên các trang web của mình bằng CGI, JavaScript hoặc VBScript, thì hãy tạm dừng lại suy nghĩ để thấy được việc này sẽ tốn thêm tài nguyên máy, làm tăng thời gian tải trang, và ngăn cản việc lưu cache hiệu qủa. Nếu bạn thấy rằng bạn thực sự phải dùng đến nó, chẳng hạn để báo người đọc thời gian hoạt động liên tục của một máy chủ FTP, thì bằng mọi cách hãy thực hiện. Nhưng nếu mục đích chỉ là ‘làm vậy sẽ hay’ thì hãy nghĩ lại.

8.5. Làm thế nào để có hàng chữ chạy trên thanh trạng thái?

Đây không phải là câu hỏi dành cho HTML; việc đó được thực hiện bằng JavaScript. Tìm xem trang web nào có tính năng trên và sao chép đoạn lệnh từ mã nguồn của nó.

Đoạn lệnh này có hai vấn đề lớn. Một là nó thường dùng dấu toán tử giảm (c--) ở chỗ nào đó. Nhưng dấu “--” đứng trong lời chú thích lại kết thúc chính chú thích này, một số trnifh duyệt hiểu như vậy. Do đó mã lệnh sẽ  bị hỏng trên một số trình duyệt. Điều tương tự xảy ra với “>“.

Thứ hai, hãy nhớ rằng nhiều người còn coi chữ chạy tệ hơn cả chữ nhấp nháy <BLINK>, và nó còn che khuất cả những thông tin trạng thái lẽ ra được hiển thị ở đó. Nó ngăn không cho người ta biết một đường link chỉ đến đâu.

8.6. Làm thế nào để căn lề chữ trái hoặc phải?

Giải pháp HTML là dùng thuộc tính ALIGN=”right” đối với các đoạn, các phần chia, các đề mục, v.v. Cách này sẽ căn lề bên phải (còn để bên trái nhấp nhô). Lưu ý rằng thuộc tính ALIGN bị lạc hậu ở HTML 4 trong đa số các trường hợp.

Cơ chế của CSS là dùng thuộc tính text-align: right trong bộ quy tắc (ruleset). Ví dụ sau đây căn lề phải tất cả những đoạn nào có thuộc tính class=”note”:

p.note {text-align: right}

Có lẽ điều bạn thực sự muốn là căn đều cả lề trái lẫn phải. Điều này được gơi ý trong HTML bằng thuộc tính ALIGN=”justify”. Ví dụ CSS sau căn đều tất cả các đoạn có thuộc tính class=”adcopy”:

p.adcopy {text-align: justify}

Trước khi căn chữ, có một số tiểu tiết cần lưu ý. Dù đoạn chữ được căn lề đều trông có đẹp nhưng những phân tích tâm lý cho thấy thực ra đoạn chữ căn lề trái thì dễ đọc và dễ hiểu hơn. Ngoài ra, những lỗi trình duyệt có thể làm đoạn chữ căn đều trở nên khó đọc.

Xem thêm

8.7. Làm thế nào để thụt dòng đầu tiên trong mỗi đoạn?

Hãy dùng một style sheet với bộ quy tắc sau:

P { text-indent: 5% }

Xem thêm

8.8. Làm thế nào thụt đầu dòng phần văn bản rất dài?

Hãy dùng một style sheet để đặt lề trái cho cả văn bản hoặc một phần văn bản:

  /* Cả văn bản */
  BODY { margin-left: 20% }
/* Một phần văn bản có CLASS="foo" */
 .foo { margin-left: 15% }

Xem thêm

8.9. Làm thế nào để bỏ phần lề bao quanh trang của tôi?

Cách thích hợp nhất là dùng một style sheet để chỉ định các thuộc tính marginpadding.

Với các phần mở rộng HTML dành cho thương mại, bạn có thể đặt lề cho một số trình duyệt nhất định. Internet Explorer 3+ hỗ trợ các thuộc tính TOPMARGINLEFTMARGIN. Internet Explorer 4+ hỗ trợ thêm các thuộc tính BOTTOMMARGINRIGHTMARGIN. Navigator 4+ hỗ trợ các thuộc tính MARGINWIDTHMARGINHEIGHT. Đa số các trình duyệt khác đều bỏ qua những tính năng mở rộng này.

CSS có thể kết hơp với HTML thương mại. Đoạn lệnh sau phát huy hiệu qủa trong đa số trình duyệt:

<body marginheight="0" topmargin="0" marginwidth="0" leftmargin="0" style="margin:0;padding:0">

Cũng lưu ý rằng Navigator luôn luôn dành ra khoảng trống cho thanh cuộn bên phía phải, nhưng chỉ hiện thanh cuộn khi tài liệu dài đến mực phải cuộn. Nếu tài liệu ngắn không cần cuộn thì sẽ chừa ra một khoảng “lề” phải mà không thể bỏ đi được.

Xem thêm

8.10. Ngắt trang như thế nào?

Bạn có thể dùng style sheet để chỉ định cách ngắt trang. Tuy nhiên, trong khi page-break-before được các trình duyệt hiện thời hỗ trợ tương đối tốt thì những thuộc tính ngắt trang khác (cùng các gía trị cho page-break-before ngoài gía trị always) thì được hỗ trợ rất kém.

Hãy cẩn thận khi chỉ định chỗ ngắt trang trên Web. Sự khác biệt giữa các môi trường in ấn (phông chữ, cỡ chữ, cỡ giấy, lề trang in, v.v.) sẽ thay đổi vị trí lý tưởng của ngắt trang.

Nếu cần tạo ra một bản in được định dạng đẹp từ tài liệu HTML của bạn, hãy cân nhắc sử dụng một công cụ chuyên cho in ấn thay vì dùng tính năng Print của trình duyệt. Chẳng hạn, html2ps tạo ra các bản PostScript đẹp từ tài liệu HTML, và HTML Scissor dùng các chú thích HTML đặc biệt để gợi ý chỗ ngắt trang.

Xem thêm

8.11. Làm thế nào để có một biểu tượng túy thính khi mọi người đánh dấu website của tôi?

Đây là một đặc điểm được giới thiệu ở Internet Explorer 5.x. Theo mặc định, trình duyệt sẽ yêu cầu một file có tên “favicon.ico” ở cùng  URL cơ sở với tài liệu được đánh dấu (bookmark). Nếu nó không tìm thấy file này thì nó sẽ thử tìm lại ở thư mục gốc website của bạn. Các tác gỉa Web có thể chỉ định một đường dẫn khác đến file biểu tượng với một phần tử như sau:

<link rel="SHORTCUT ICON" href="/pathname/filename.ico">

Hình ảnh cần có kích thước 16×16 pixel, và dưới dạng Windows icon.

Xem thêm

8.12. Làm thế nào để đặt file nhạc tự phát lên mỗi khi độc gỉa truy cập đến website?

Đa số các tình duyệt đều hỗ trợ phần tử EMBED cho việc này, miễn là người dùng có một plug-in để phát nhạc. Bạn có thể có thêm lượng độc gỉa nếu như bạn dùng cả BGSOUND. Để tránh trục trặc với trình duyệt hỗ trợ đồng thời hai thứ này, hãy đặt BGSOUND vào trong NOEMBED:

http://your_sound_file
 <noembed><bgsound src="your_sound_file"></noembed>

Lưu ý rằng các phần tử này đều có tính thượng mại chứ không có trong chuẩn HTML nào. (Cách làm bằng HTML tiêu chuẩn thì vẫn chưa được hỗ trợ tốt.)

Cần nhận thấy rằng có người dùng khó chịu khi nhạc được tự phát lên. Có thể họ chưa chỉnh mức âm lượng trên loa, hay họ đang mải nghe cái khác. Cho nên để lịch sự, có thể bạn cần phải gợi ý file nhạc dưới dạng đường link:

<a href="your_sound_file">Listen to my sound! (5 kB MIDI)</a>

Xem thêm

Mục 9: Bảng HTML

9.1. Tôi có thể lồng bảng trong bảng được không?

Được, một bảng có thể được đặt vào trong một ô của bảng khác. Sau đây là một ví dụ đơn giản:

    <table>
    <tr>
        <td>this is the first cell of the outer table</td>
        <td>this is the second cell of the outer table,
            with the inner table embedded in it<br>
        <table>
            <tr>
            <td>this is the first cell of the inner table</td>
            <td>this is the second cell of the inner table</td>
            </tr>
        </table>
        </td>
    </tr>
    </table>

Vấn đề chủ yếu đối với các bảng lồng là những phiên bản cũ của Netscape Navigator sẽ trục trặc nếu bạn không đóng các phần tử  TR, TD, và TH một cách tường minh. Để tránh phiền phức, hãy viết đủ thẻ  </tr>, </td>, and </th>, dù rằng quy cách HTML không yêu cầu phải có chúng.Hơn nữa, các phiên bản cũ của Netscape Navigator còn gặp vấn đề với các bảng được ghép rất sâu (chảng hạn như lồng ở tầng thứ mười). Để tránh trục trặc, chỉ nên lồng bảng ở một vài tầng thôi. Bạn cũng có thể dùng các thuộc tính ROWSPANCOLSPAN để giảm thiểu việc lồng bảng.

Sau cùng, nhất thiết phải đảm bảo kiểm tra mã của bạn mỗi khi dùng bảng lồng.

Xem thêm

9.2. Làm cách nào sử dụng bảng để tạo cấu trúc cho các mẫu (form)?

Các mẫu nhỏ đôi khi được đặt trong một phần tử TD bên trong bảng. Cách này có thể hữu ích để chỉnh vị trí tương đối của mẫu so với nội dung khác, song không thể giusp chỉnh vị trí của từng phần tử trong mẫu với nhau. Để làm việc này, cả bảng phải nằm trong mẫu. Bạn không thể bắt đầu một mẫu với phần tử TH hoặc TD này mà lại kết thúc mẫu ở phần tử khác. Bạn không thể đặt mẫu bên trong bảng mà không đưa nó vào trong phần tử TH hoặc TD nào. Bạn có thể đặt bảng bên trong mẫu, rồi dùng bảng này để chỉnh vị trí các phần tử INPUT, TEXTAREA, SELECT, v.v. như trong ví dụ sau:

<FORM ACTION="[URL]">
   <TABLE BORDER="0">
      <TR>
         <TH>Account:</TH>
         <TD><INPUT TYPE="text" NAME="account"></TD>
      </TR>
      <TR>
         <TH>Password:</TH>
         <TD><INPUT TYPE="password" NAME="password"></TD>
      </TR>
      <TR>
         <TD> </TD>
         <TD><INPUT TYPE="submit" NAME="Log On"></TD>
      </TR>
   </TABLE>
</FORM>

9.3. Làm thế nào để căn giữa một bảng?

Trong mã lệnh HTML bạn viết, dùng

 

Trong CSS,dùng

div.center {
    text-align: center;
}

div.center table {
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

Xem thêm

9.4. Làm thế nào để căn phải (hoặc trái) một bảng?

Bạn có thể dùng <TABLE ALIGN="right"> để đẩy một bảng trôi về bên phải. (Dùng ALIGN="left" để trôi về bên trái.) Bất kì nội dung nào đi sau </TABLE> sẽ chạy quanh bảng. Hãy dùng <BR CLEAR="right"> hay <BR CLEAR="all"> để đánh dấu kết thúc chữ chạy quanh bảng, như trong ví dụ sau:

Bảng ở ví dụ này sẽ trôi về phía bên phải 
<table align="right">...</table>
Chữ này sẽ được dàn để lấp đầy khoảng trống bên tái (và nếu chữ đủ dài, thì cả phía dưới) của bảng.
<br clear="right">

Dòng chữ này sẽ xuất hiện bên dưới bảng, ngay cả khi còn chỗ bên trái của nó.

9.5. Liệu tôi có dùng được gía trị phần trăm cho <TD WIDTH=…>?

Các quy định HTML 3.2 và HTML 4.0 chỉ cho phép dùng gía trị số nguyên (biểu thị số điểm ảnh) làm thuộc tính WIDTH của phần tử TD. Tuy nhiên, HTML 4.0 DTD cho phép dùng số phần trăm (và các gía trị không nguyên khác), bởi vậy trình thẩm định HTML sẽ không phàn nàn về <TD WIDTH="xx%">.

Cần lưu ý rằng Netscape và các trình duyệt của Microsoft sẽ hiểu khác nhau về gía trị phần trăm cho <TD WIDTH=…>. Song cách hiểu của chúng (và của những trình duyệt khác hiểu được bảng) thì lại tình cờ giống nhau khi có thêm <TABLE WIDTH=”100%”>. Với trường hợp này, các gía trị phần trăm có thể được dùng tương đối an toàn, ngay cả khi chúng bị cấm bởi những quy tắc chung.

9.6. Tại sao <TABLE WIDTH="100%"> không tận dụng được hết bề rộng trình duyệt?

Các trình duyệt đồ họa đều chừa một khoảng trống giữa viền của diện tích hiển thị và phần nội dung.

Cũng lưu ý rằng Navigator luôn để chừa chỗ cho một thanh cuộn bên phải, song chỉ hiện thanh cuộn này khi tài liệu qúa dài và cần phải cuộn. Nếu tài liệu không cần phải cuộn thì nó sẽ hình thành một khoảng “lề” bên phải không bỏ đi được.

Xem thêm

9.7. Tại sao có khoảng trống bên trên và phía dưới bảng?

Điều này thường là do cú pháp HTML không hợp lệ. Cụ thể, nó thường là do những nội dung rời trong bảng (tức là phần nội dung không được đặt trong phần tử TD hay TH). Không có cách làm chuẩn nào để xử lý các nội dung rời bên trong một bảng. Một số trình duyệt hiển thị tất cả những nội dung rời phía trên hoặc dưới bảng. Khi nội dung rời này có chứa nhiều dấu ngắt dòng hoặc những đoạn văn trống, thì các trình duyệt sẽ hiển thị tất cả những chỗ bỏ trắng này ngay trên hoặc dưới bảng.

Giải pháp là đi sửa các lỗi cú pháp HTML. Tất cả nội dung bên trong một bảng phải nằm trong các phần tử TD hoặc TH.

9.8. Có vấn đề gì với việc dùng bảng để trình bày không?

Với các trình duyệt hiện tại, toàn bộ cả bảng phải được tải về và kích thước mọi thứ cần được biết đến trước khi hiển thị bảng. Như vậy sẽ làm việc hiển thị nội dung chậm lại, đặc biệt nếu bảng của bạn có chứa các hình mà không có thuộc tính HEIGHT hay WIDTH.

Nếu bất kì phần nội dung nào trong bảng của bạn qúa rộng để hiển thị lên vùng sẵn có, thì bảng tự dãn ra để vừa những nội dung qúa khổ. Phần còn lại của bảng sau đó sẽ tự điểu chỉnh để vừa cái bảng qúa khổ thay vì chỉ vừa khu vực hiển thị hiện có. Cách này có thể buộc độc gỉa phải dùng thanh trượt ngang để xem hết nội dung, hoặc làm cho các bản in bị cắt mất.

Với các độc gỉa mà màn hình máy tính hẹp hơn dự kiến của tác gỉa, thì các bảng có bề rộng cố định lại gặp những vấn đề giống như với bảng qúa khổ. Còn với độc gỉa có màn hình máy tính rộng hơn dự kiến thì các bảng bề rộng cố định lại tạo nên các lề rất rộng, phí mất nhiều diện tích hiển thị. Với các độc gỉa cần phông chữ lớn hơn, các bảng bề rộng cố định có thể khiến cho nội dung được hiển thị thành những dfong cụt lủn, mỗi dòng có vài chữ.

Nhiều trình duyệt rất nhạy với cú pháp sai khi có mặt các bảng. Việc viết đúng cú pháp rất quan trọng. Ngay cả đúng cú pháp đi nữa, các bảng lồng có thể còn không hiển thị đúng trên những phiên bản cũ của Netscape Navigator.

Một số trình duyệt bỏ qua các bảng, hoặc được cấu hình hóa để bỏ qua các bảng. Các trình duyệt này sẽ lờ đi bất kì cách bài trí nào bạn dùng với bảng.

Hơn nữa, các máy tìm kiếm bỏ qua bảng. Một số máy tìm kiếm dùng các chữ ở đầu văn bản để tóm tắt văn bản đó khi được xuất hiện trong kết qủa tìm kiếm, và một số trình duyệt chỉ đánh mục những thông tin ở n byte khởi đầu của văn bản. Khi bảng được dùng để bài trí, phần đầu cảu văn bản thường gồm rất nhiều đường link xuất hiện phía trên nội dung thực sự.

Nhiều phiên bản Navigator có vấn đề liên kết đến các neo được đặt tên khi chúng nằm trong một bảng có dùng thuộc tính ALIGN. Các trình duyệt này dường như gắn tên của neo được đặt tên với đầu bảng, thay vì là với nội dung được neo. Bạn có thể tránh được vấn đề này bằng cách không dùng thuộc tính ALIGN trong bảng.

Nếu sử dụng các bảng để bài trí, bạn vãn có thể giảm thiểu những vấn đề liên quan bằng cách viết mã (markup) cẩn thận. Hãy tránh đặt các hình rộng, các phần tử PRE với những dòng URL dài, hay các nội dung rộng khác bên trong bảng. Thay vì một bảng to cả trang, hãy dùng vài bảng độc lập nhau. Chẳng hạn, bạn có thể dùng một bảng để xếp đặt thanh điều hướng ở đầu/cuối trang web, và đặt nội dung chính bên ngoài bất kì bảng nào.

Xem thêm

Mục 10: Form (mẫu) HTML

10.1. Tôi dùng các form thế nào?

Cú pháp cơ bản của một form là:
<FORM ACTION="[URL]">...</FORM>

Khi form được gửi (submit), dữ liệu form được đưa đến URL chỉ định bởi thuộc tính ACTION. URL này cần tham chiếu đến một chương trình phía máy chủ (chẳng hạn CGI) để xử lý nội dung form. Bản thận form phải chứa

  • ít nhất là một nút gửi (tức là một phần tử <INPUT TYPE="submit" ...>),
  • các phần tử dữ liệu form (chẳng hạn <INPUT>, <TEXTAREA>, và <SELECT>) nếu cần, và
  • mã lệnh thêm (chẳng hạn nhận diện các phần tử dữ liệu, đưa chỉ đẫn) nếu cần.

Xem thêm

10.2. Làm thế nào để lấy dữ liệu form gửi vào email cho tôi?

Cách tin cậy duy nhất để xử lý các dữ liệu gửi form là bằng một chương trình phía máy chủ (như CGI). Để  gửi dữ liệu form đến chính email của bạn, cần phải dùng một chương trình phía máy chủ để xử lý việc gửi form và đưa dữ liệu tới địa chỉ email.

Một số nhà cung cấp dịch vụ web tạo ra các chương trình chuẩn hóa việc chuyển từ form đến email, dành cho khách hàng của họ. Hãy xem nhà cung cấp dịch vụ cho bạn có không.

Nếu bạn có thể cài đặt chương trình CGI lên máy chủ của riêng bạn, hãy xem câu trả lời cho câu hỏi trước để biết một danh sách các nguồn tham khảo gía trị.

Nếu không thể chạy chương trình CGI trên máy chủ của riêng, bạn có thể dùng dịch vụ form-đến-email được đăng tải trên web. Lưu ý rằng nhà cung cấp của một dịch vụ kiểu này sẽ có quyền truy cập đến bất cứ thông tin nào gửi qua dịch vụ.

Các form có dùng action="mailto:..." đều không đáng tin cậy. Theo quy định HTML, các ứng xử của form rõ ràng chưa được định nghĩa với các  URI dạng mailto (hay bất kì thứ gì khác URI dạng HTTP). Chúng có thể hoạt động một đằng với cấu hình phần mềm này, song cũng có thể hoạt động một nẻo với các cấu hình phần mềm khác, và có thể hoàn toàn hỏng với một số cấu hình phần mềm.

Xem thêm

10.3. Làm thế nào để dùng bảng tổ chức các form?

Các form nhỏ đôi khi được đặt bên trong một phần tử TD của một bảng. Điều này có thể giúp ích cho việc đặt form ở vị trí tương đối so với các nội dung khác, song chẳng giúp cho việc định vị các phần tử trong form với nhau.

Để đặt vị trí các phần tử trong form với nhau thì cả bảng phải nằm trong form. Bạn không thể bắt đầu một form bằng một phần tử TH hay TD và kết thúc form với một phần tử khác. Bạn không thể đặt cả form bên trong bảng mà không đưa nó vào trong một phần tử TH hay TD. Bạn có thể đặt bảng vào trong form, và sau đó dùng bảng để định vị INPUT, TEXTAREA, SELECT, và các phần tử khác liên quan đến form, như trong ví dụ sau.

<form action="[URL]">
   <table border="0">
      <tr>
         <th scope="row">
            <label for="account">Tài khoản:</label>
         </th>
         <td>
            <input type="text" name="account" id="account">
         </td>
      </tr>
      <tr>
         <th scope="row">
            <label for="password">Mật khẩu:</label>
         </th>
         <td>
            <input type="password" name="password" id="password">
         </td>
      </tr>
      <tr>
         <td> </td>
         <td><input type="submit" name="Log On"></td>
      </tr>
   </table>
</form>

10.4. Làm thế nào để xóa bỏ dấu trống thừa ra sau một thẻ </form>?

HTML không có cách nào điều khiển việc này. Tuy nhiên, bằng CSS, bạn chó thể đặt margin-bottom của form về 0. Chẳng hạn:

<form style="margin-bottom:0;" action=...>

Bạn cũng có thể dùng một CSS style sheet để ảnh hưởng đến tất cả các form trên một trang:

form { margin-bottom: 0 ; }

Xem thêm

10.5. Làm thế nào để tạo một form chỉ cần ấn ENTER để gửi?

Câu trả lời gọn là form chỉ được có một <INPUT TYPE=TEXT> và không có TEXTAREA, dù rằng nó có thể chứa những phần tử form khác như hộp chọn hoặc nút chọn.

Xem thêm

10.6. Làm thế nào để đặt focus [nhảy con trỏ đến] trường đầu tiên của form?

Bạn không thể làm điều này bằng HTML. Tuy nhiên, bạn có thể đặt một đoạn mã lệnh bên dưới form để đặt con trỏ đến trường phù hợp:

<form id="myform" name="myform" action=...>
    <input type="text" id="myinput" name="myinput" ...>
</form>

document.myform.myinput.focus();

Một cách làm tương tự dùng đến  <body onload=...> để đặt focus, nhưng một số trình duyệt dường như xử lý sự kiện ONLOAD trước khi toàn bộ văn bản (tức là phần có form) được tải.

10.7. Làm thế nào tạo được form với các nút theo ý thích?

Thay vì dùng một nút gửi thông thường (<input type="submit" ...>), bạn có thể dùng kiểu nút input có hình  (<input type="image" ...>). Loại nút này chỉ định một nút gửi có hình ảnh vốn hoạt động như một ánh xạ hình ảnh phía máy chủ.

Không giống như những nút gửi thường (vốn trả lại một cặp gía trị name=value), loại nút hình ảnh trả lại tọa độ x-y của vị trí nơi người dùng kích chuột trên ảnh. Trình duyệt sẽ trả lại các tọa độ x-y này dưới dạng một cặp tên.x=000 và tên.y=000.

Để tương thích với nhiều môi trường duyệt không có đồ họa, các thuộc tính VALUEALT cần được đặt cùng gía trị với thuộc tính NAME. Chẳng hạn:

<input type="image" name="Send" alt="Send" value="Send" src="send-button.gif">

Với nút reset, bạn có thể dùng <button type="reset" ...>, JavaScript, và/hoặc các style sheet, dù chẳng có cách nào trong số này luôn hoạt động thông suốt.

Xem thêm

10.8. Liệu tôi được phép có hai hay nhiều nút gửi trong cùng một form không?

Có. Đây là một phần của hỗ trợ HTML 2.0 Form (một số trình duyệt cũ thì không hỗ trợ, nhưng nay khả năng quán xuyến của các trình duyệt đều rất tốt).

Các nút gửi phải có một thuộc tính NAME. Thuộc tính tùy chọn VALUE có thể được dùng để quy định các dòng chữ khác nhau cho từng nút gửi.

Để xác định xem nút gửi nào đã được bấm, bạn cần dùng những gía trị riêng cho thuộc tính NAME và/hoặc VALUE. Các trình duyệt sẽ gửi đến server cặp name=value của nút gửi đã được bấm. Sau đây là một ví dụ:

 

<input type="submit" name="Tham gia" value="Tôi muốn tham gia bây giờ">

<input type="submit" name="Thông tin" value="Hãy gửi đầy đủ thông tin">

Lưu ý rằng nếu bạn đang dùng các nút gửi có hình ảnh, thì cũng cần phải đặt thuộc tính NAME riêng cho chúng. Ngoài ra, biểu hiện của trình duyệt có thể không thống nhất khi form được gửi mà không có nút gửi (chẳng hạn, bằng cách ấn ENTER).

Nếu bạn không chắc chắn rằng kết qủa là gì khi bạn gửi form, thì TipJar có một đoạn mã lệnh chuẩn mà bạn có thể dùng. Hãy viết đoạn lệnh sau chẳng hạn (với phương thức “post”):

<form method="post"
 action="http://www.tipjar.com/cgi-bin/test">

và rồi đi qua qúa trình gửi form. Máy chủ của TipJar sẽ giải mã dữ liệu nhập vào form và hiển thị kết qủa cho bạn.

Xem thêm

10.9. Liệu tôi có thể có nhiều hành động (action) trên cùng một form?

Không. Mỗi form chỉ được phép có đúng một hành động. Tuy nhiên, chương trình phía máy chủ (chẳng hạn, CGI) để xử lý việc gửi form của bạn lại có thể thực hiện bao nhiêu tác vụ cũng được (chẳng hạn cập nhật cơ sở dữ liệu, gửi email, ghi lại chuyển khoản) để phản hồi lại một việc gửi form.

10.10. Làm thế nào để tôi yêu cầu các trường được điền vào, hay được điền vào đúng?

Muốn vậy, hãy giao cho một chương trình phía máy chủ (chẳng hạn, CGI) chuyên xử lý việc gửi form nhiệm vụ gửi đi thông báo lỗi nếu trường đó không được điền vào đúng. Lý tưởng nhất là thông báo lỗi này nên kèo theo một bản sao của form ban đầu với những dữ liệu trước đó (điền chưa đủ hoặc chưa đúng) làm gía trị mặc định của các trường trong form. Module có tên Perl CGI.pm cho ta cơ chế rất hữu ích để trả lại form được điền dở cho người dùng.

Ngoài ra, bạn có thể dùng JavaScript trong thuộc tính ONSUBMIT của form để kiểm tra dữ liệu. Nếu bật hỗ trợ JavaScript thì hàm giữ sự kiện ONSUBMIT có thể báo cho người dùng biết vấn đề và trả lại gía trị false để ngăn không cho form được gửi.

Lưu ý rằng các chương trình phía máy chủ không nên dựa vào việc kiểm tra do mã lệnh phía máy khách thực hiện.

10.11. Tôi có thể ngăn việc một form được gửi lặp lại không?

Không. Chương trình phía máy chủ (chẳng hạn, CGI) chuyên xử lý việc gửi form phải xử lý việc gửi lặp một cách thuần thục.

Bạn có thể phát sinh một form bằng một chương trình phía máy chủ (chẳng hạn, CGI) để bổ sung một trường ẩn với một ID phiên duy nhất. Khi đó chương trình phiá máy chủ chuyên xử lý form có thể so sánh ID phiên này với một danh sách các ID phiên đã dùng trước đó. Nếu ID phiên bị trùng lặp (trước đó đã dùng) thì có thể thực hiện hành động thích hợp (chẳng hạn từ chối việc gửi hoặc cập nhật các thông tin đã gửi trước đó).

Như vậy, rốt cục là chương trình phía máy chủ của bạn phải đủ thông minh để xử lý dữ liệu được gửi lại. Nhưng bạn có thể tránh nhận dữ liệu gửi lại bằng cách không cho hết hạn trang xác nhận với việc gửi form. Vì bạn muốn cho hết hạn nhanh chóng những trang chứa dữ liệu tạm, nên có lẽ bạn muốn tránh việc đặt dữ liệu tạm lên trang xác nhận. Dù vậy, bạn có thể cho một đường link đến truy vấn cơ sở dữ liệu cho thông tin tạm này.

10.12. Làm thế nào tôi cho phép tải file trên trang web của mình?

Những thứ sau cần thiết cho việc tải lên bằng web:

  • Một máy chủ HTTP chấp nhận upload.
  • Quyền truy cập đến /cgi-bin/ để đặt mã lệnh nhận. Người ta đã viết sẵn những đoạn mã lệnh CGI để upload file.
  • Một form thực hiện kiểu như sau:
    <form method="post" enctype="multipart/form-data" action="fup.cgi">
    File cần upload: <input type=file name=upfile><br>
    Lưu ý về file: <input type=text name=note><br>
    <input type=submit value=Ấn> để tải file lên!
    </form>

Không phải trình duyệt nào cũng hỗ trợ tải file lên bằng form, bởi vậy khi cần thì bạn phải dùng cách khác.

Module Perl có tên CGI.pm hỗ trợ tải file lên. Những phiên bản mới nhất của thư viện cgi-lib.pl cũng hỗ trợ tải file lên. Hơn nữa, nếu bạn muốn tải file lên kết hợp với chuyển form-thành-email, thì gói Perl có tên MIME::Lite có hỗ trợ gửi kèm các file trong thư.

Xem thêm

10.13. Làm thế nào để sử dụng form cho các menu điều hướng?

Không có cách nào làm điều này chỉ bằng HTML; cần có cơ chế khác để xử lý form. Việc xử lý bằng JavaScript chỉ có hiệu lực với độc gỉa dùng trình duyệt bật JavaScript. CGI và những cách xử lý phía máy chủ khác thì đáng tin cậy với người đọc, nhưng máy tìm kiếm sẽ gặp vấn đề khi di chuyển trong các form.

Xem thêm

  • Jukka Korpela, bài Navigational pulldown menus in HTML (giải thích cách tạo menu kéo xuống, cũng như một số cách khác hay hơn để di chuyển trên web)

Mục 12: Khung HTML

11.1. Làm thế nào để tạo ra khung? Một bộ khung (frameset) là gì?

Các khung cho phép tác gỉa chia cửa sổ trình duyệt thành nhiều vùng (chữ nhật) nhỏ hơn. Nhiều tài liệu có thể được hiển thị trong cùng một cửa sổ, mỗi tài liệu trong một khung riêng. Các trình duyệt đồ họa cho phép trượt từng khung và không lệ thuộc vào các khung khác; và đường link có thể cập nhật được tài liệu trong mỗi khung mà không ảnh hưởng đến khung khác.

Bạn không thể đơn giản là “thêm khung” vào tài liệu có sẵn mà được. Mà trước hết, cần tạo ra một tài liệu bộ khung trong đó định nghĩa một tổ hợp cụ thể gồm các khung, sau đó hiển thị các tài liệu nội dung bên trong các khung đó. Những tài liệu bộ khung này cũng cần bao gồm nội dung thay thế khi không hiện khung; nội dung này đặt trong phần tử NOFRAMES.

Mô hình các khung HTML 4 có khiếm khuyết thiết kế gây vấn đề cho người dùng web khi thao tác với nó. Các khung chỉ nên được sử dụng cẩn thận hết mức.

Xem thêm

  • WDG, bài Guide to Frames (hướng dẫn cách sử dụng phù hợp cho các khung và một mô tả cú pháp HTML liên quan).

11.2. Làm thế nào để tạo một đường link hoặc form trong khung này nhưng cập nhật khung khác?

Trong tài liệu bộ khung (tài liệu HTML có chứa các thẻ <frameset> <frame>), hãy đảm bảo chắc rằng từng khung thành phần có thuộc tính NAME. Ví dụ sau tạo nên một khung trên cao có tên “navigation” và khung dưới nhất có tên “content”:

<frameset rows="*,3*">
    <frame name="navigation" src="navigation.html">
    <frame name="content" src="content.html">
    <noframes><body>
        <!-- Alternative non-framed version -->
    </body></noframes>
</frameset>

Khi đó, trong tài liệu có đường link, dùng thuộc tính TARGET để chỉ định khung nào cần được dùng để hiển thị đường link. (Gía trị thuộc tính TARGET phải khớp với gía trị thuộc tính NAME trong khung mục tiêu.) Chẳng hạn:

<a target="content" href=...>

Để hướng mục tiêu đến gửi form, hãy dùng thuộc tính TARGET của phần tử FORM như thế này:

<form target="content" action=...>

Lưu ý rằng khi các form được hoàn toàn xử lý bởi JavaScript, khung mục tiêu phải được chỉ định trong JavaScript. Gía trị của thuộc tính TARGET không liên quan ở đây.

Thông thường, khung mục tiêu mặc định là khung hiện thời (“_self”). Để thay đổi mục tiêu mặc định cho mọi link/form trên trang web, hãy dùng thuộc tính TARGET của phần tử BASE, như thế này:

<base target="content">

11.3. Tại sao các link của tôi lại mở ra cửa sổ mới thay vì cập nhật khung sẵn có?

Nếu như không tồn tại sẵn khung nào với tên gọi mà bạn dùng cho thuộc tính TARGET, thì một cửa sổ trình duyệt mới sẽ được mở ra, và cửa sổ này được gán tên mà bạn đã dùng. Hơn nữa, TARGET="_blank" sẽ mở ra một cửa sổ trình duyệt mới, trống trơn.

Trong HTML 4, thuộc tính TARGET không phân biệt chữ hoa/thường, do vậy abcABC đều chỉ đến cùng một khung/cửa sổ, cũng như _top_TOP đều có cùng ý nghĩa. Song đa số các trình duyệt đều coi gía trị thuộc tính TARGET phải được phân biệt chữ hoa/thường và không nhận ra ABC như là abc, hay _TOP có ý nghĩa đặc biệt như _top.

Hơn nữa, một số trình duyệt bao gồm một tính năng bảo mật để tránh việc tài liệu bị tấn công bởi các bộ khung tạo bởi các bên thứ ba. Trong những trình duyệt này, nếu một đường link của tài liệu hướng đến một khung định nghĩa bởi tài liệu bộ khung được đặt khác server với bản thân tài liệu, thì đường link sẽ mở ra một cửa sổ mới.

11.4. Làm thế nào để cập nhật nhiều khung lập tức?

Có hai cách cập nhật nhiều khung chỉ với một đường link: cách dựa trên HTML thì kết nối đến một tài liệu bộ khung mới trong đó quy định tổ hợp các khung. Còn cách dùng JavaScript thì sử dụng thuộc tính onClick của link để cập nhật (các) khung phụ thêm.

Cách làm theo HTML có thể kết nối đến một tài liệu bộ khung mới bằng thuộc tính TARGET=”_top” (thay thế toàn bộ khung). Tuy  nhiên, có một cách làm khác nếu như các khung cần cập nhật là một phần của bộ khung lồng ghép. Trong tài liệu bộ khung ban đầu, hãy dùng một tài liệu bộ khung thứ hai để định nghĩa bộ khung được lồng. Chẳng hạn:

<frameset cols="*,3*">
    <frame src="contents.html" name="Contents">
    <frame src="frameset2.html" name="Display">
    <noframes><body>
        <!-- Alternative non-framed version -->
    </body></noframes>
</frameset>

Bây giờ một đường link có thể dùng thuộc tính TARGET=”Display” để đồng thời thay thế tất cả các khung định nghĩa bởi tài liệu frameset2.html.

Cách làm JavaScript thì dùng thuộc tính onClick của đường link để thực hiện cập nhật thứ cấp. Chẳng hạn:

<a href="URL1" target="Frame1" onClick="top.Frame2.location='URL2';">Update frames</a>

Link này sẽ cập nhật Frame1 bằng URL1 một cách bình thường. Nếu trình duyệt của độc gỉa hỗ trợ JavaScript (và được bật lên), thì Frame2 cũng sẽ được cập nhật (bằng URL2).

11.5. Làm thế nào để thoát khỏi một bộ khung?

Nếu bạn là tác gỉa, thì điều này thật dễ. Bạn chỉ cần thêm thuộc tính TARGET đến đường link để đưa người đọc đến tài liệu ‘bên ngoài’ theo dự kiến. Hãy cho nó gía trị là _top.

Trong nhiều trình duyệt hiện nay, không thể hiển thị một khung trong toàn cửa sổ, hay ít nhất là điều này không dễ dàng. Độc gỉa cần phải copy URL của khung cần xem và tự tay yêu cầu đến URL đó.

Theo tôi, tác gỉa nào muốn cho độc gỉa tùy chọn này, thì có thể thêm một link đến tài liệu bản thân trong tài liệu đó, với thuộc tính TARGET đặt bằng _top, nhờ vậy tài liệu sẽ được phóng to toàn cửa sổ nếu độc gỉa theo link đó.

11.6. Làm thế nào để chắc rằng các tài liệu được đóng khung sẽ hiển thị bên trong bộ khung của chúng?

Khi các tài liệu con của một bộ khung được truy cập trực tiếp, thì chúng sẽ xuất hiện mà không phụ thuộc bối cảnh của bộ khung bao lấy nó.

Nếu trình duyệt của độc gỉa có bật hỗ trợ JavaScript thì đoạn mã lệnh sau đây sẽ hồi phục bộ khung:

if (parent.location.href == self.location.href) {
    if (window.location.href.replace)
        window.location.replace('frameset.html');
    else
        // sẽ gây ra vấn đề với nút quay trở lại, nhưng cũng hoạt động được 
        window.location.href = 'frameset.html';
}

Một cách tổng quát hơn là dùng đường link “hồi phục khung”:

<A HREF="frameset.html" TARGET="_top">Hồi phục khung</A>

Lưu ý rằng theo bất kì cách nào trong số đó, bạn đều phải có một tài liệu bộ khung riêng cho mỗi tài liệu nội dung. Nếu bạn kết nối đến tài liệu bộ khung mặc định, thì độc gỉa bạn sẽ nhận được tài liệu nội dung mặc định chứ không phải tài liệu nội dung mà họ cố gắng truy cập. Các tài liệu bộ khung cần được phát sinh một cách tự động, để tránh sự nhàm chán và sai sót có thể trong qúa trình tạo thủ công.

Lưu ý ràng bạn có thể khắc phục vấn đề với đánh dấu các trạng thái bằng việc kết nối đến những tài liệu bộ khung riêng bằng TARGET="_top", thay vì kết nối đến từng tài liệu nội dung riêng lẻ.

11.7. Có cách nào phòng ngừa việc đóng khung không?

“Bị đóng khung” là từ để chỉ việc tài liệu của bạn được hiển thị bên trong bộ khung của ai đó mà họ không xin phép bạn. Điều này có thể xảy ra tình cờ (tác gỉa bộ khung quên không dùng TARGET="_top" khi kết nối đến tài liệu của bạn) hoặc cố ý (tác gỉa bộ khung muốn hiển thị nội dung của bạn bằng chính công cụ định hướng của họ).

Để tránh “bị đóng khung” những tài liệu của người khác, bạn phải thêm TARGET="_top" đến tất cả các đường link dẫn đến những tài liệu bên ngoài phạm vi mà bạn dự liệu.

Không may là chẳng có cách nào đáng tin cậy để chỉ định rằng một tài liệu cụ thể cần được hiển thị trên toàn bộ cửa sổ trình duyệt thay vì trong khung hiện thời. Một cách khắc phục là dùng <BASE TARGET="_top"> trong tài liệu, nhưng cách này mới chỉ định khung mục tiêu mặc định cho các link trong tài liệu hiện thời, chứ không phải cho bản thân tài liệu đang xét.

Nếu trình duyệt của độc gỉa đã bật JavaScript, thì đoạn mã sau sẽ tự động bỏ tất cả những bộ khung hiện có:

if (top.frames.length!=0) {
    if (window.location.href.replace)
        top.location.replace(self.location.href);
    else
        top.location.href=self.document.href;
}

Một mã lệnh khác là

function breakOut() {
    if (self != top)
        window.open("my URL","_top","");
}
</HEAD>
<BODY onLoad="breakOut()">

11.8. Làm thế nào để chỉ định một tổ hợp cụ thể các khung thay vì chọn văn bản định sẵn?

Không may là điều này bất khả thi. Khi lướt qua những trang web có khung thì URL vẫn sẽ không đổi trong lúc nội dung văn bản trong từng khung thay đổi. Bởi vậy không có cách nào chỉ thị được tổ hợp các văn bản hợp thành trạng thái hiện thời của bộ khung.

Tác gỉa có thể cung cấp nhiều văn bản trong bộ khung, mỗi cái cho từng tổ hợp của nội dung khung. Những văn bản đặt khung này có thể được phát sinh một cách tự động, có thể là được tạo thành “tại trận” bằng một chương trình CGI. Thay vì kết nối đến từng văn bản nội dung đơn lẻ, tác gỉa có thể kết nối đến những văn bản đóng khung riêng rẽ này bằng cách dùng TARGET="_top". Như vậy, URL của văn bản đóng khung hiện thời sẽ luôn chỉ định tổ hợp của các khung được hiển thị, và điều này cho phép các đường kết nối, đánh dấu trang (bookmark), v.v. hoạt động bình thường.

11.9. Làm thế nào để xóa bỏ các viền xung quan khung?

Việc xóa bỏ viền xung quan khung bao gồm cả 2 việc: không vẽ các viền này và loại bỏ khoảng cách giữa các khung. Cách được hỗ trợ phổ biến nhất để hiển thị các khung không viền là <FRAMESET ... BORDER=0 FRAMEBORDER=0 FRAMESPACING=0>.

Lưu ý rằng những thuộc tính này đều là của riêng chứ không phải thuộc về quy định HTML 4.01. (HTML 4.01 có định nghĩa thuộc tính FRAMEBORDER cho phần tử FRAME, nhưng không phải cho phần tử FRAMESET.) Hơn nữa, việc loại bỏ viền quanh khung làm khó việc thu phóng khung, vì chính cái viền này cũng được dùng trong hầu hết các giao diện đồ họa để thay đổi kích thước của khung này.

11.10. Làm thế nào để tạo một khung có thanh trượt đứng nhưng không có thanh trượt ngang?

Cách duy nhất để có được một cái khung với thanh cuộn đứng mà không có thanh cuộn ngang là định nghĩa khung với SCROLLING="auto" (gía trị mặc định), và đặt nội dung phù hợp không cần phải cuộn ngang. Không có cách nào để quy định một cái khung có một thanh cuộn này mà không có thanh cuộn kia. Viết SCROLLING="yes" sẽ buộc có cả hai thanh cuộn theo hai phương (kể cả khi có cần chúng hay không), và viết SCROLLING="no" sẽ tắt hết thanh cuộn (kể cả khi cần thanh cuộn để xem hết nội dung trong khung). Không còn gía trị nào khác cho thuộc tính SCROLLING.

11.11. Làm thế nào để thay đổi tiêu đề của văn bản đóng khung?

Tiêu đề hiển thị chính là tiêu đề của văn bản trong bộ khung thay vì các tiêu đề của bất kì trang nào bên trong các khung. Để thay đổi tiêu đề được hiển thị, hãy kết nối đến một văn bản đóng khung khác bằng cách viết TARGET="_top" (thay thế hoàn toàn bộ khung).

11.12. Tại sao các khung tôi lập nên không đúng kích thước đã quy định?

Các phiên bản trước của Netscape Navigator dường như  quy đổi kích thước khung theo pixel sang phần trăm làm tròn, và dùng các kích thước phần trăm đó để sắp đặt các khung. Do vậy, các khung với kích thước theo pixel sẽ được hiển thị với kích thước hơi khác chút so với được quy định trong văn bản đặt khung. Sai số làm tròn sẽ khác nhau tùy theo kích thước đúng của cửa sổ trình duyệt.

Hơn nữa, Navigator dường như lưu trữ các kích thước phần trăm bên trong chương trình, thay vì các kích thước tính theo pixel. Bởi vậy khi cửa sổ bị thay đổi kích thước, các khung được vẽ lại dựa trên kích thước cửa sổ mới và các kích thước theo phần trăm cũ.

Không có cách nào ngăn điều này. Để thích ứng với nó, bạn cần thiết kế website của mình để phù hợp với những thay đổi trong kích thước khung. Cũng có một tình huống khác, trong đó nên thích ứng với các thay đổi trong cách trình bày của trình duyệt.

11.13. Có vấn đề gì khi dùng các khung?

Vấn đề căn bản với việc thiết kế khung là các bộ khung sẽ tạo ra những trạng thái trên trình duyệt; các trạng thái này không thể gắn địa chỉ được. Một khi bất kì khung nào trong bộ khung thay đổi nội dung mặc định của nó, thì không còn cách nào đặt địa chỉ cho trạng thái bộ khung hiện thời. Rất khó để đánh dấu – và không thể kết nối hoặc đánh chỉ mục – cho trạng thái bộ khung như vậy.

Không thể tham chiếu đến một trạng thái bội khung trong phương tiện khác. Khi các tài liệu con trong trạng thái bộ khung như vậy được trực tiếp truy cập, chúng sẽ xuất hiện mà không có bối cảnh của bội khung bao quanh. Các tính năng trình duyệt cơ bản (như in ấn, di chuyển tiến/lui trong lịch sử trình duyệt) sẽ biểu hiện rất khác nhau với các bội khung. Mặt khác, trình duyệt sẽ không thể nhận biết được khung nào cần được theo dõi (focus), điều này ảnh hưởng đến việc lăn trượt, tìm kiếm và dùng phím tắt nói chung.

Hơn nữa, các khung đều chú trọng vào hình thức bố trí thay vì cấu trúc thông tin, và nhiều tác gỉa của website đóng khung thì lờ đi không cung cấp thông tin hữu ích trong phần tử NOFRAMES. Cả hai điều này gây ra vấn đề truy cập với các trình duyệt mà tác gỉa có thể không lường đến, và đối với các máy tìm kiếm.

Xem thêm

11.14. Các máy tìm kiếm có ghét các khung không?

Máy tìm kiếm có thể liên kết trực tiếp đến những văn bản có nội dung đóng khung, nhưng chúng không thể kết nối đến tổ hợp các khung mà văn bản đó được thiết kế. Đây là kết qủa của một khiếm khuyết cơ bản khi khung được thiết kế.

Các máy tìm kiếm cố gắng cung cấp cho người dùng những đường liên kết tới văn bản hữu ích. Nhiều văn bản đóng khung rất khó sử dụng khi được truy cập trực tiếp (bên ngoài bộ khung định sẵn cho văn bản đó), bởi vậy nếu máy tìm kiếm có đưa link đến chúng thì cũng chẳng có ích gì nhiều. Bời vậy, nhiều máy tìm kiếm hoàn toàn bỏ qua các khung và thay vào đó là định chỉ mục (index) cho những văn bản (không đóng khung) có ích hơn.

Các máy tìm kiếm sẽ định chỉ mục cho nội dung <NOFRAMES> của bạn, và mọi nội dung nào truy cập được qua nội dung <NOFRAMES> của bạn. Những nội dung đó sẽ có ích khi được truy cập trực tiếp từ một đường kết nối máy tìm kiếm.

Xem thêm

Để lại bình luận

Filed under Tin học, web

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s