Showing posts with label HTML. Show all posts
Showing posts with label HTML. Show all posts

Sunday, October 17, 2010

Cách tạo bảng có viền bằng HTML với khoảng trắng văn bản

Nếu không sử dụng nơi chưa văn bản (placeholder) trong các ô bảng HTML trống thì các đường viền ô bảng trống sẽ không hiển thị. Bằng cách thêm vào chuỗi mã ký tự   trong cấu trúc HTML thỉ ô bảng sẽ hiển thị.
Dưới đây là đoạn code không có placeholder.

<table border cellpadding="4">
<tr>
<td>văn bản của bạn</td>
<td></td>
<td>văn bản của bạn</td>
</tr>
<tr>
<td></td>
<td>văn bản của bạn</td>
<td></td>
</tr>
</table>

Và đây là kết quả trên công cụ trình duyệt khi không sử dụng placeholder.

văn bản của bạnvăn bản của bạn
văn bản của bạn

Tiếp đến là ví dụ đoạn code có sử dụng placeholder.
<table border cellpadding="4">
<tr>
<td>văn bản của bạn</td>
<td>&nbsp;</td>
<td>văn bản của bạn</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>văn bản của bạn</td>
<td>&nbsp;</td>
</tr>
</table>

Và đây là kết quả hiển thị trên công cụ trình duyệt khi sử dụng placeholder.

văn bản của bạnvăn bản của bạn
văn bản của bạn

Liên kết đến một vị trí đặc biệt trong một trang web

Khi thiết kế trang web, nhiều khi bạn cần tạo một liên kết từ một phần của trang web đến một phần khác, lấy ví dụ khi tạo liên kết đến giữa bài viết hoặc đầu bài viết hoặc có thể đến cuối trang.
Ví dụ minh họa: Đến cuối bài viết
Bằng một số cú pháp HTML đơn giản thì bạn có thể thực hiện được công việc này.

Bước 1: Chọn vùng văn bản bạn cần liên kết dẫn đến khi được kích chuột vào liên kết. Ở ví dụ trên, văn bản được liên kết đến là HTML, được đặt trong câu "Xem tất cả bài viết trong chuyên mục Thủ thuật HTML" nằm ở cuối bài viết này.

Sau khi chọn từ bạn muốn liên kết đến thì bạn phải tạo một liên kết neo như thế này:

<a name="Text">Text</a>

Văn bản in đậm sẽ là văn bản được chọn, theo như ví dụ trong trang này là HTML. Dù bạn có thể thay đổi văn bản màu đỏ thành văn bản bạn thích song sẽ dễ dàng để nhớ hơn nếu bạn chỉ sử dụng cùng nội dung văn bản với văn bản bạn chọn làm neo liên kết. Theo như ví dụ trong trang này sau khi tạo neo thì nó trông như thế này:

Xem tất cả bài viết trong chuyên mục Thủ thuật <a name="HTML">HTML</a>

Bước 2: Bước cuối cùng là bạn phải tạo liên kết thực mà khi kích chuột vào thì sẽ đưa bạn đến văn bản neo.

<a href="#Text">Click Here</a>

Ở ví dụ trong trang này, tôi chọn HTML làm văn bản neo và “Đến cuối bài viết” được sử dụng để tạo liên kết. Khi kích chuột vào thì trang web sẽ nhảy đến văn bản neo HTML đã chọn.
Khi tạo liên kết, bạn phải sử dụng cùng tên trong liên kết với phần neo liên kết. Trong ví dụ tôi đã sử dụng HTML trong thẻ neo và HTML trong liên kết thực. Khi tạo liên kết, tôi đã sử dụng đoạn code này:

<a href="#HTML">Đến cuối bài viết</a>

Xem tất cả bài viết trong chuyên mục Thủ thuật HTML.

Mô tả liên kết sử dụng cửa sổ pop-up

Bạn có thể khiến cho một số công cụ trình duyệt mở cửa số pop-up khi chuột dừng lại qua một hình ảnh bằng cách thêm tham số ALT cho các thẻ IMG. Đối với các liên kết văn bản thì bạn đã quen với việc hiển thị địa chỉ trên thanh trạng thái. Tuy nhiên cách này không phải là cách hiệu quả nhất bởi vì thanh trạng thái không chỉ giới hạn về khoảng trống mà còn vì người lướt web có thể không sẳn sàng chú ý đến.

Chúng ta có thể tạo mô tả trong cửa sổ pop-up mà không sử dụng JavaScript.

Thông thường thẻ neo cho một liên kết trông như thế này:

<a href="http://www.websitecuaban.com/">

Bạn cần thêm tham số TITLE để tạo cửa sổ pop-up mô tả liên kết:

<a href="http://www.websitecuaban.com/" TITLE="Mo ta lien ket cua ban">

Ví dụ: Bạn hãy rê chuột vào Websitecuaban để xem kết quả hiệu ứng mô tả liên kết.

Nếu bạn muốn tạo cửa sổ mô tả có nhiều dòng thì chỉ cần sử dụng đoạn mã &#10;&#13; ở cuối mỗi dòng trừ dòng cuối cùng:

<a href="http://www.websitecuaban.com/" TITLE="Mo ta lien ket cua ban, dong 1&#10;&#13;Mo ta lien ket cua ban, dong 2&#10;&#13;Mo ta lien ket cua ban, dong 3&#10;&#13;Mo ta lien ket cua ban, dong 4">

Ví dụ: Bạn hãy rê chuột vào Websitecuaban để xem kết quả hiệu ứng mô tả liên kết.