Trở về
Tham gia nhóm m Autoit đ đưc hưng dn và gii đáp trc tiếp : http://fb.com/groups/autoitscript
Tin tức công nghệ  -  Thủ thuật lập trình

Saturday, September 28, 2013

HTML cơ bản - Phần 19


Toàn màn hìnhIn bài viết

Danh thiếp Địa chỉ và Liên kết E-Mail


Trong bài này bạn sẽõ tạo ra một trang web đúng mốt -- tóm lược bằng một đoạn cuối! Hãy để cho mọi người gởi đến bạn một e-mail ngay từ trong trang Web của bạn!


Mục đích

Sau bài học này bạn có thể:
  • Thêm một đoạn cuối (stylized footer) vào cuối trang Web.
  • Tạo một liên kết siêu văn bản để gởi e-mail

Bài học

Lưu ý: Nếu bạn không có tài liệu từ những bài học trước bạn có thể download ngay bây giờ. Một đặc điểm đáng giá của những trang Web là "footer" ở cuối của một trang để cung cấp thông tin về tác giả và tài liệu, có thể là ngày được cập nhật cuối cùng, cũng như là để gởi tới tác giả một thông báo bằng e-mail.

Đây chính là nơi để đặt tag address mà trong đó khối văn bản được in trong dòng mới dưới kiểu chữ nghiêng.

Thật là một ý tưởng hay để trong footer có một mô tả ngắn gọn, thông tin và quan hệ giữa những trang Web của bạn. Môt vài thông tin hữu ích là:
  • Tiêu đề hay chủ đề của trang hiện thời.
  • Ngày nó được tạo ra và cập nhật.
  • Chủ quyền thích đáng.
  • Tên và e-mail cho tác giả của trang Web.
  • Tên và liên kết siêu văn bản tới nguồn gốc/tổ chức.
Như là một ví dụ, bạn hãy nhìn footer ở cuối mỗi trang Web của tài liệu hướng dẫn này. Trong quá trình sáng tạo ra những kiểu riêng của bạn, hãy nhìn thử những trang Web khác để thu thập thêm những ý kiến. Bắt chước vẫn là cách tốt nhất để tiến bộ!
Dạng HTML của tag address trông giống như sau :

    <address>
      text text text text text text text text text 
      text text text text text text text text text 
    </address> 
 
Lưu ý rằng tất cả những HTML khác bên trong tag address đều hợp lệ, vì thế chúng ta có thể sửa đổi nó với những tag in đậm, ngắt dòng và một tag liên kết siêu văn bản:
HTML Kết quả
<address>
<b>Page Title</b><br>
Last Updated February 31, 1999<br>
Web Page by Alan Levine 
(levine@maricopa.edu) <br>
<a href="http://www.mcli.dist.maricopa.edu/">
Maricopa Community Colleges</a><br>
</address>    
Page Title
Last Updated February 31, 1999
Web Page by Alan Levine (levine@maricopa.edu)
Maricopa Community Colleges
Bây giờ, giả sử một người nào đó đang đọc trang Web của bạn và muốn gởi cho bạn một lời phê bình về trang Web của bạn. Họ sẽ phải viết ra địa chỉ e-mail, nạp một chương trình khác, và gởi cho bạn một thông báo. Có thể gởi e-mail từ trong web browser của bạn được không? Được chứ, hầu hết các web browser hiện nay đều có thể làm điều này!
Cách để làm điều này là tạo một liên kết siêu văn bản với loại là mailto trong URL (hãy xem lại bài 8b). Tạo một liên kết siêu văn bản như sau:

  <a href="mailto:levine@maricopa.edu">send an e-mail to alan</a>
 
Khi nhấn vào dòng chữ send an e-mail to alan, Web browser sẽ mở ra một màn hình để bạn có thể soạn một thông báo và gởi nó đến cho tôi. Hơn nữa, bạn còn có thể thêm một dòng chủ đề mặc nhiên (subject) cho thông báo e-mail:

  <a href="mailto:levine@maricopa.edu? subject=hi from lesson 12">
        send an e-mail to alan</a>
 
Hãy thử đi! Hãy gởi cho tôi một thông báo! send an e-mail to alan Lưu ý rằng bạn có thể làm cho bất kỳ một dòng chữ (hay hình ảnh) nào hoạt động như là một liên kết siêu văn bản. Vì vậy trong ví dụ vừa rồi, chúng ta sẽ sửa đổi HTML để có một địa chỉ internet tạo liên kết cho việc gởi e-mail.
HTML Kết quả
<address>
<b>Page Title</b><br>
Last Updated February 31, 1999<br>
Web Page by Alan Levine 
<A HREF="mailto:levine@maricopa.edu">
(levine@maricopa.edu)</A> <br>
<a href="http://www.mcli.dist.maricopa.edu/">
Maricopa Community Colleges</a><br>
</address>   
Page Title
Last Updated February 31, 1999
Web Page by Alan Levine (levine@maricopa.edu)
Maricopa Community Colleges
Và cuối cùng chúng tôi đề nghị rằng bạn cũng nên đặt URL của trang vào trong footer. Tại sao vậy? Khi một ai đó in ra trang Web của bạn nhưng chưa viết lại hoặc lưu lại URL trong bookmark, có URL trên trang giấy cho phép một sự tham khảo bằng tay. Chỉ việc điều chỉnh ví dụ trên một chút (hãy chú ý đoạn HTML này ở dưới tag <address>...</address>):
<address>
<b>Page Title</b><br>
Last Updated February 31, 1999<br>
Web Page by Alan Levine 
<A HREF="mailto:levine@maricopa.edu">
(levine@maricopa.edu)</A> <br>
<a href="http://www.mcli.dist.maricopa.edu/">
Maricopa Community Colleges</a><br>
</address>
<p>
<tt>
URL: http://www.mcli.dist.maricopa.edu/tut/
</tt>
Page Title
Last Updated February 31, 1999
Web Page by Alan Levine (levine@maricopa.edu)
Maricopa Community Colleges
URL: http://www.mcli.dist.maricopa.edu/tut/
Bây giờ đã đến lúc thêm một footer vào trang file HTML của bạn. Đối với ví dụ này, chúng tôi giả sử rằng bạn là "Lorrie Lava" một Nhà nghiên cứu núi lửa tại Big University (hoàn toàn tự do nếu bạn muốn đưa thông tin của bạn vào vị trí dưới đây):
  1. Mở tập tin HTML index.htm trong trình soạn thảo của bạn.
  2. Tại cuối trang Web (nhưng trên những tag </body></html>), thêm:
    
    <HR>
    <address><B>Volcano Web</B> <br>
    created by Lorrie Lava, 
    <A HREF="mailto:lava@pele.bigu.edu">
    lava@pele.bigu.edu</A><br>
    Volcanic Studies, 
    <A HREF="http://www.bigu.edu/">Big University</A><p>
    <TT>last modified: April 1, 1995</TT>
    </address>
    <p>
    <tt>URL: http://www.bigu.edu/web/index.htm</tt>
    
    Lưu ý: Chúng ta đã sử dụng một vài tag HTML mà đã được xét đến trong các bài trước. Cũng nên lưu ý đến tag <p> ở cuối trang; điều này chắc chắn rằng dòng cuối của văn bản luôn luôn được thấy rõ.
  3. Lưu trữReload tập tin HTML.

Kiểm tra lại công việc của bạn

So sánh tài liệu của bạn với ví dụ mẫu. Nếu tài liệu của bạn trông khác với mẫu, hãy xem lại văn bản bạn đã nhập trong trình soạn thảo.

Xem lại

Xem lại những chủ đề sau:
  1. Tag address dùng để làm gì?
  2. Tag address phải ở cuối một trang phải không?
  3. Làm thế nào bạn tạo một tag để gởi e-mail đến bạn? hoặc đến một người khác? hoặc cùng với dòng chủ đề?

Thực tập tự do

Thêm một danh thiếp địa chỉ cùng với liên kết e-mail vào tài liệu HTML của riêng bạn.

Đến bài tiếp theo....

Vẫn còn một cách khác để chia đoạn những phần văn bản dài! Đó là BLOCKQUOTE.