• 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á.

  • worldclass

    bài giảng rất thú vị. thêm bài 3 luôn đi anh. lâu quá rồi

  • tuấn

    a ơi cho em hỏi,khi em sửa cái template thì chương trình báo yêu cầu update,lúc em mở ra thì mất hết trang con.vậy làm sao để lấy lại được hả a?giúp em với

  • Pingback: HTML Cơ bản – Phần 1 | Amon's blog

  • Pingback: HTML cơ bản – Phần 2 « Learning ICT

    • http://kunlovemeo.kis tran tuan dat

      hach au chon nhac hach cf

  • Pingback: HTML Cơ bản – Phần 1 « Learning ICT

  • http://www.beat.vn linhguno1

    Thanks you ………………. ^^

  • HàQuang

    Nghe chừng ông Admin hay đi vắng quá
    ko thấy trả lời a, e nhỉ ? :D

  • thampham

    cám ơn anh nhiều! a giảng rất kĩ và hay

  • http://www.tivinhanh.com Xem Tivi Nhanh

    Bạn hướng dẫn rất thú vị. thanks nhiều nhé

  • http://vieclamsinhvien.com Son nguyen

    anh có phải là con cháu nhà MC Nguyễn Ngọc Ngạn ko nhỉ. Học video của anh giống học với bác Nguyễn Ngọc Ngạn thật đấy

  • http://!!! Hưng Phạm

    tks anh rất nhiều nhé!
    mong anh tiếp tục chia sẻ những hiểu biết để tụi em học hỏi thêm được nhiều hơn!

    • my na

      em rất vui khi biết đến trang web này…em muốn học được thiết kế web nhuwg không biết phải học sao,đọc tài liệu nhưng lại ko hiểu và chán nữa…em cảm ơn anh.

  • TearofBoy

    Mình tháy rất thất vọng về admin
    Mail mình đã gửi
    nay comment nốt ở đây để xem admin có cập nhật lại lịnk ko
    chắc ko bận quá bỏ cái blog này rùi hay sao ấy chả thấy có thông tin gì cả

  • Tiep

    Cháu chào chú, chú ơi chú upload videos ở mediafire, Cháu thấy hầu hết mọi người thích cái đó. Down dễ dàng mà tốc độ cao. Các host file khác chậm lắm chú à, còn bị limit bandwidth nữa. Cám ơn chú, trang web chú rất rất hay, bổ ích.

  • tuệ mẫn

    link bài 2 trùng bài 1 rồi anh ơi, anh up lại dùm mọi người đi. Cám ơn anh

  • Hoàng Ngọc Trí

    Cảm ơn a nhiều!

  • hympert

    bạn muốn học làm website thì mình có 1 trang tiếng anh rất nổi tiếng http://w3schools.com/ có gì bạn vào tham khảo

  • http://no thanh251290

    anh oi cho bai 3 di em la nguoi chua biet gi ve html mong anh post nhieu bai hon nhe chuc anh sức khỏe

  • Tiến

    Link tải megaupload của HTMl 2 này là file của bài HTML 1 rồi anh ơi ^^ !

  • Viet Hung

    cảm ơn bác nhé. rất bổ ích. em nghe bác giảng còn hay hơn mấy thầy giáo ở trường nữa ấy. Merry Christmas

  • http://izwebz.com Phạm Xuân Tường

    Anh ơi anh có thể làm một video nói về các thẻ table ,frame được không anh.

  • http://izwebz.com Phạm Xuân Tường

    Anh ơi links này là của bài 1 không phải của bài 2.
    Anh có thể làm thêm vài topic về html không em đang học html nên chưa biết nhiều lắm.

  • bình

    hey bạn ơi bạn up file video thì đúng là basic 2 rồi nhưng
    file video download thì vẫn là clip basic 1 fix lại giúp anh em nhé không là phải đao phai FLV về đấy :D

  • http://gamesnaos.blogspot.com/ hai_plc

    A ơi! những bài viết của a rất hay. A làm thêm một bài nữa về HTML đi,làm sao để đưa banner vào web…chúc a luôn mạnh khỏe và có nhiều bài viết hay hơn nữa.!!!

  • tuân anh

    anh ơi 2 phần này chưa đủ mà. anh DW ra nốt phần còn lại của HTML đi. em đang tập làm nên muốn làm quen HTML trước. thấy bài hữu ích mà ngắn quá hà..! làm sao để đưa banner vào web. có phải đưa vào thẻ body vậy ạ.

  • KennyP

    WL ơi sửa link đi bác :)

  • ngoclinh

    hic!! em thấy bài này tốn quá nhiều thời gian mà thu lai kiến thức ít quá >.<

  • Trần Huy

    anh oi link sai rồi … cái video trên là của phần 1 anh sửa lại giùm em được không ????

  • http://www.izwebz.com Demon Warlock

    Cảm ơn em, đã sửa lại link. Srry.

    • Trần

      Vẫn sai anh ơi, link đó là của bài 1 :D

      Đây em leech bài 2 về MGS luôn : http://megashare.vn/dl.php/472271

    • tuệ mẫn

      link bài 2 trùng bài 1 rồi anh ơi, up lại dùm đi.

  • Trần

    Anh ơi, cái clip anh đưa link nhầm rồi, link down clip này là cho bài Contextual Position : http://www.izwebz.com/css/contextual-position/

    Chứ có phải HTML cơ bản đâu :D

  • http://danglam an tran

    mình muốn làm 1 trang wed quảng cáo mà không biết bắt đầu từ đâu ? không biết chổ nào dạy thiết kế wed tốt để đi học ? ?????

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