• fans
  • 1036 reader
  • followers
HTML cơ bản – Phần 2
  • Tutorial Details
  • Độ khó: Căn bản
  • Thời gian: 15m9s
  • Yêu cầu: Phù hợp cho tất cả các đối tượng lập trình viên

Có lẽ liên kết trong HTML và sử dụng hình ảnh là phần mạnh nhất và cũng là thú vị nhất của HTML. Bởi vì trang web là một phức hợp các tài liệu khác nhau được liên hệ với nhau bằng các đường liên kết và được trang trí bằng hình ảnh, màu sắc. Hơn nữa, bằng cách liên kết mà chúng ta có thể liên kết nhiều trang web với nhau và từ đó tạo ra mạng internet. Cũng chính bởi vì tầm quan trọng này của nó mà thẻ link được tách ra trong một video tutorial mới.

Xem phần 1 của series này

Cấu trúc của thẻ link như sau
<a href="http://www.izwebz.com"> Trang chủ </a>

Trong ví dụ này thì ở trình duyệt người đọc chỉ thấy chữ Trang Chủ và theo mặc định nó sẽ là chữ xanh và gạch chân. Khi nhấn vào nó bạn sẽ được chuyển tới trang www.abcdef.com. Nếu bạn muốn thay đổi đích đến của nó, thì bạn chỉ việc thay đổi abcdef thành trang mà bạn muốn link tới.

Cũng giống như hầu hết các thẻ HTML khác, thẻ link cũng bắt đầu bằng một thẻ mở a href=”…” và kết thúc bằng một thẻ đóng

Địa chỉ URL tuyệt đôi và tương đối

Khái niệm này có thể dễ gây hiểu nhầm lúc đầu, nhưng khi đã quen rồi thì nó lại trở nên rất hiển nhiên. Lấy một ví dụ gần với thức tế để bạn dễ cảm nhận hơn. Ví dụ có ai đó hỏi bạn bưu điện thành phố ở đâu, nếu bạn biết chính xác địa chỉ bạn có thể nói là 234 Thái Hà, Quận Ba Đình, Hà Nội, Việt Nam (tổi chỉ giả sử thôi). Nhưng nếu bạn không biết chính xác địa chỉ bạn có thể chỉ là “đi thẳng và quẹo phải ở ngôi nhà màu trắng là đến Bưu Điện thành phố”. Tất nhiên cả 2 cách đều đến nơi, nhưng cách thứ nhất thì “tuyệt đối” hơn và bất cứ ai đứng ở bất kỳ đâu cũng có thể dùng thông tin đó để kiếm ra bưu điện. Còn cách thứ 2 thì chỉ “tương đối” và cho người hỏi đủ thông tin đề tìm ra bưu điện tại ví trí họ đang đứng hỏi bạn.

Giống như trên với địa chỉ URL. Khi bạn liên kết từ tài liệu nay sang tài liệu khang ở cùng chung một thư mục hoặc ngang hàng nhau, bạn chỉ cần tên của tài liệu thứ hai là đủ. Ví dụ

<a href="about.html"> Xem trang About</a>

Giả sử đoạn text đó nằm trong trang index.htm và nó được đặt chung một thư mục hoặc ngang hàng nhau.

Hoặc bạn có thể liên kết đến một tài liệu khác không cùng chung thư mục bằng cách

Liên kết đến một tài liệu nằm trong thư mục có vị trí cao hơn thư mục hiện tại

Thường thì bạn nên liên kết tương đối cho các tài liệu trong trang web của bạn, bởi vì nó dễ viết và cho phép bạn di chuyển các tệp tin từ chỗ này sang chỗ khác mà không phải chỉnh sửa lại đường liên kết.

HTML Basic

Ở hình trên nếu bạn đang ở file homepate.html và muốn link đến contact.html thì câu lệnh sẽ như sau:

<a href="contact.html"> Contact Me</a>

Bởi vì 2 file này nằm ngang hàng với nhau do vậy bạn có thể liên kết trực tiếp đến nó.

Còn nếu bạn muốn link đến một file bất kỳ nằm trong thư mục text từ file contact.html bạn sẽ có lệnh như sau:

<a href="text/cache.php">Cache</a>

Demon Warlock Website facebook twitter user_email

Tôi được sinh ra ở Việt Nam, nhưng hiện tại đang sống và làm việc tại Mỹ. Ngành tôi học không có liên quan gì đến thiết kế web. Nhưng đây là sở thích từ ngày còn là sinh viên du học, do vậy bây giờ dù cho đang đi làm nhưng tôi vẫn thích dùng thời gian rảnh rỗi của mình để học về thiết kế web. Như các bạn, tôi cũng việc mày mò tự học và khám phá.

  • linh dan

    Cảm ơn Demon Warlock! Bài giảng của bạn rất hay dễ hiểu và bổ ích, đặc biệt những người mới như tôi. Mong những tutorial về HTML tiếp theo của bạn.

  • Jerry nguyễn

    a giảng hay quá.có thể ra thêm clip giới thiệu thêm về HTML nữa được không ạ.

  • truong

    giang bai hay vay. Thanks nhieu nhe

  • tùng

    video hay , mình mới tìm hiểu về html, rất mong bạn ra nhiều phần nữa, thaks :D

  • http://www.facebook.com/ Đoàn Văn Kha

    Phần 3 đâu nhỉ…sao mình ko thấy????

  • http://hvnonline.com Hoàng Nam

    Bài viết hết sức bổ ích, cám ơn anh nhiều

  • hai_te

    bác ơi cho lại link đi. megaupload có còn đâu.

  • Tất Đạt

    die rồi bạn ơi bạn up lại đc ko????????????

  • Đỗ Thanh Thủy

    Cảm ơn anh nhé .Anh ra tiếp phần HTML phần 3 anh nhé :|

  • quy

    cám ơn anh nhiều!

  • Đoàn khôi nguyên

    Cám ơn anh!

  • http://thanhbkid.co.cc thanhbkid

    bài viết hay lắm cảm ơn a nha . mà khi nào thì có phần tiếp theo vậy a ???

  • nguyen van nam

    bài giảng của anh hay quá. anh phù hợp lam giáo viên đây!

  • roningle2k12

    Anh ơi Video rất hay. Anh rất vui tính dễ thương. Mong sớm nghe giọng nói của anh ở clip kế nhe!!! Iu anh mất òi hi’hi’

  • vukien

    anh làm thêm tut nữa về HTML nữa đi anh

  • vukien

    video hay lắm anh. em cung mới bắt đầu học web. anh làm thêm đi

  • abyo

    hay quá đang trong quá trình tìm hiểu về web…. thank!

  • Mr.Unkown

    Upload lên mediafire cho người cần :D. Cám ơn vì video bổ ích :D
    http://www.mediafire.com/?2eavieetyait0dv

    • tritri0808

      thanks bạn nhiều.

  • Luan

    video hay! Mong sẽ có thêm nhiều bài hướng dẫn như vậy!

  • Pingback: Làm 1 trang web đẹp, cần biết những gì? | Duy Tue's Blog

  • http://izwebz.com thehoanh

    xem het ban nay roi xem tiep bai nao vay admin
    bai sap linh tinh wa minh ko biet xem tiep the nao

    • minhdang

      html co ban 1 and html co ban 2

  • Thành Nam

    Anh ơi! bao giờ có video tut thứ 3 ấy nhỉ? cuối bài 2 anh nói là “trong tut kỳ tới tôi sẽ giới thiệu những thẻ còn lại…”

  • Dũng Phạm

    Anh ơi caí download video về link ở megaupload bị hỏng rồi. Anh có thể up lại cho e ở mediafire được không ạ

  • http://baycaouocmovn.tk ☼♥NeverGiveUp♥☼

    Theo mình thấy thì không cần dùng lệnh CSS đâu
    chỉ cần thêm border=”0″ vào thẻ img là được rồi.

  • Pingback: HTML Cơ bản – Phần 1 | IT-VNSOFT | Cuộc sống số

  • haidsf

    Anh có thể sửa lại link của html căn bản 2 không,nó bị trùng với phần 1.Thanks

  • thinvv

    anh ơi em không thấyy link của phần 2 của HTML căn bản .download ở đó về toàn là phần 1 thôii. cả tạo trang web đầu tiên thì thiếu phần 1 anh à. mong sớm nhận được những phần đó từ anh và mọi người.Em xin cảm ơn

  • Tune

    bạn ơi làm phần 3 đi bạn hay lắm bạn :D

  • http://uocvongthanhcong.blogspot.com Lê Quang Việt

    cảm ơn anh Demon Warlock với những video tut rất bổ ích và dễ tiếp thu.em thấy giá mà ở kèm sau mỗi video anh có thêm file code anh làm trong bài hướng dẫn, để tiện cho người học tham khảo thêm thì sẽ rất hay và dễ theo dõi.đây chỉ là ý kiến cá nhân của riêng em,có gì k0 phải thì anh bỏ qua nhé:)

  • http://laptrinh.tv anhdiepmmk

    Video của bạn đăng rất hữu ích.
    Tôi xin phép bạn được sử dụng video của bạn để post lên laptrinh.tv có gì thắc mắc vui lòng liên hệ với tôi n08ni.dieppn@gmail.com 01658815514
    .

Newbie

Các series nên xem trên izwebz cho newbie

Khi vào izwebz chắc nhiều bạn cho rằng các bài viết trên izwebz đều không có hệ thống gì cả? Thực chất, các bài biết đều đi theo một series của riêng nó, ví dụ như PHP, HTML & CSS, PSD2HTML, Photoshop, illustrator,… Trong bài viết này, mình sẽ tổng hợp lại các series bài viết cần thiết cho một newbie.

Izwebz facebook group

Social connect

Recent Comments

Archives