Học Làm Web

Tự học thiết kế trang web – bài 6

Trước khi qua bài 6, bạn cần tham khảo đoạn trích sau để bổ sung chút ít kiến thức về thiết kế web:

Tuần tin Echip đã viết:Cần biết khi tạo website
Đối với những người thiết kế website rồi đưa lên internet, điều đầu tiên nên biết là quy ước đặt tên file trên internet như thế nào, để tránh trường hợp các liên kết bị mất hiệu lực khi chuyển file lên server hay chuyển từ server nầy sang server khác.

Lỗi mất liên kết thường xảy ra khi tạo website trên máy Windows hay Macintosh rồi gởi nó đến server Unix vì Windows và Macintos là hai hệ điều hành phổ biến nhất cho máy cá nhân còn Unix lại là hệ điều hành phổ biến nhất cho máy server.

Có vài quy ước cần phải theo để phù hợp với cả Windows, Macintosh và Unix:

* Đặt tên file theo quy ước Dos 8.3: An toàn nhất là dùng tên file theo quy ước 8+3 (tên file 8 ký tự, phần mở rộng 3 ký tự) và không dùng ký tự đặc biệt nào trừ dấu gạch dưới (thí dụ: image_1.htm). Đây là tên file được nhận diện bởi mọi hệ điều hành đang có.

* index.html: Tên file chính hay file đầu tiên của website nên được đặt là index.html vì server Unix đòi hỏi file nầy phải có phần mở rộng là html thay vì htm như các trang khác. Các Server Windows và Macintosh cũng chấp nhận tên file như vậy làm file chính. Khi bạn gõ URL là địa chỉ website không kèm tên file (thí dụ: ktlehoan.com), tất cả các Server sẽ tự động đi tìm trang web chính có tên index.html nạp cho bạn xem.

* Chữ hoa và chữ thường: Windows và Macintosh không quan tâm tới việc phân biệt chữ hoa và chữ thường trong tên file cũng như trong mã liên kết html. Khi bạn sao chép file, những file có tên giống nhau nhưng khác chữ hoa và chữ thường sẽ được coi là cùng một file và sẽ đè chồng (thay thế) lên nhau.

Nhưng Unix lại phân biệt chính xác chữ hoa, chữ thường trong tên file và đòi hỏi các liên kết mã html phải chính xác như vậy. Bạn chỉ cần gõ sai một từ thôi thì cả liên kết coi như hỏng. Khi bạn sao chép file, những file trùng tên nhưng khác các ký tự hoa, thường là những file khác nhau và tồn tại độc lập với nhau.

* Dấu cách (khoảng trắng) trong tên file: Windows và Macintosh cho phép trong tên file có khoảng trắng nhưng Unix thì lại không cho phép nên để tương thích nhiều hệ điều hành, bạn nên đặt tên file không có khoảng trắng (thay bằng các dấu gạch dưới để dể phân biệt). Thí dụ: Nên đặt tên file là “thi_nghiem.htm” thay vì “thi nghiem.htm”.

* Tải file: Khi dùng các chương trình để tải file lên internet, bạn cần chú ý là: Có chương trình cho phép bạn chuyển đổi toàn bộ tên file tải lên thành chữ thường hay thành chữ hoa. Trong quá trình tải file, bạn nên chú ý thông báo tên file trong hộp thoại kết quả, nếu thấy tên file hiển thị khác đi thì cần kiểm tra lại tên file gốc và mã liên kết trên ổ đĩa cục bộ.

* Link: Một thói quen tốt nên có khi tạo link là dùng toàn bộ chữ thường trong mã liên kết nội bộ (tương đối). Thí dụ: /andi/ndc.htm. Và tất cả tên file nên đặt theo kiểu chữ thường để dễ kiểm tra sửa chữa khi có sai lạc.

Liên kết tuyệt đối dùng để nối kết sang các website khác, mã liên kết của nó sẽ bao gồm địa chỉ website (URL) và tên file (hay tên file mặc định là index.html). Thí dụ: <a href= “http://www.yourname.com/index.html”>Trang chủ</a>

Liên kết tương đối sử dụng khi nối kết các file trong cùng một website và việc định địa chỉ link tương đối tùy thuộc vào việc theo dõi thư mục và file ở đâu trong mối tương quan với nhau. Nếu dùng liên kết tương đối cho toàn bộ website, bạn có thể khai thác chúng trên đĩa cứng nội bộ, di chuyển website của bạn qua bất kỳ máy nào hay vật trữ tin nào cũng được (các liên kết vẫn có giá trị tiếp tục).

Ở bài 5, các bạn đã học được cách tạo liên kết để dẫn đến một trang web khác trên mạng Internet, để liên kết đến một điểm neo trong cùng một trang. Bài 6 này chúng ta sẽ tiến hơn một bước, tạo liên kết không phải chỉ là dòng chữ mà là bằng một hình ảnh.

Ví dụ:

MÃ: CHỌN TẤT CẢ
<a href="http://www.nguyenkim.com/qut-lng-senko-l838-cm.html"><img src="http://www.nguyenkim.com/images/product/Untitled-12.jpg" /></a>

Thì bạn sẽ được hình một cái quạt, khi click chuột vào hình cái quạt này sẽ xem được giá tiền của nó. Bạn thử bấm vào ảnh bên dưới đây:

Hình ảnh
Hình dự phòng

Nếu bạn thực hiện đúng dòng ở ví dụ trong trang web của bạn, bạn sẽ thấy hệt như ảnh trên khi xem trang của bạn bằng trình duyệt.

Như vậy cú pháp tổng quát của liên kết dạng này là:

MÃ: CHỌN TẤT CẢ
<a href="địa chỉ trang web cần link đến><img src="địa chỉ URL của ảnh" /></a>

Khi bạn đặt ảnh vào trong thư mục cùng trang web của bạn, thì lúc này địa chỉ URL sẽ còn thu gọn là tên file ảnh.

Bạn hãy tự thực hiện với ví dụ ở bài thơ “Hai sắc hoa tigôn” đã từng học ở bài 2 cho loại liên kết này.

Chú ý quan trọng: với trình duyệt Internet Explorer, bạn cần xác định thuộc tính border=”0″ cho hình ảnh để khi tạo liên kết với nó thì không để lại khung bọc quanh ảnh màu xanh.

Ví dụ:

MÃ: CHỌN TẤT CẢ
<a href="http://khoancatbetong.com/forum/viewtopic.php?f=53&t=1668"><img src="http://img86.imageshack.us/img86/6510/tigonvt1.png" border="0" />

Vì thẻ img là thẻ không có thẻ đóng, nên để viết đúng chuẩn, cuối thẻ bạn nên có ký hiệu /> thay vì chỉ> như những thẻ có thẻ đóng khác.

 

<< Quay Lại – Tiếp Theo>>

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

%d bloggers like this: