• fans
  • 1036 reader
  • followers

Code HTML chính là nền móng của bất cứ trang web nào. Cho dù trang web có giao diện đẹp lung linh đến mức nào nhưng code HTML được viết cẩu thả không theo quy luật thì trang web đó vẫn không được cho là đẹp toàn diện. Có rất nhiều trang web nếu khi view source bạn thấy không biết đường nào mà lần. Trong bài này tôi sẽ chỉ ra những cách giúp bạn viết code HTML gọn gàng hơn và dễ quản lý hơn

Thời lượng:17:05
Link Download định dạng .avi chất lượng cao: MegaUpload, MediaFire
File Size: 28.4MB

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

  • phonglinh

    cho em duong link facebook cua anh voi

  • Shin Hâm

    like a đó

  • http://bandattragop.com sang tran

    mình đang học mà không biết bắt đầu từ đau

  • Tùng

    ban DW cho minh hoi software ban dug viet code la gi vay?

  • Hiếu

    Cảm ơn về bài giảng, thực tế, hữu ích cho mọi người làm web. Tuy nhiên, khi giảng bạn nên tránh một số chỗ “âm, à” để bài giảng mạch lạc hơn.

  • http://maytinhphunhuan.com Duy Han

    bài viết khá hay và ý nghĩa, thanks.

  • http://aladanh.com aladanh

    sao có một số trang web khi view source lên ở đoạn đầu của code thấy xuất hiện một khoảng trắng có khi lên tới một hàng chục dòng trắng vậy nhỉ

  • http://google.com catxike

    anh DW mail cua anh la gi dE? bon em lien hệ với

  • ngô văn bằng

    rất hay,thank so much anh

  • http://huyvoit.co.cc văn huy

    anh có video nào rõ hơn không? úp lên đi ? hinh như video này kém chât lượng rùi anh. thanks you!

  • ĐẠi BÀNG ĐEN

    em sử dụng phpdesigned khi lưu bài nó lại trở về căn lại hết sang bên trái anh ah,huhu,pro jup em với,

  • nguyễn bá thi

    cám ơn anh DW và mọi người rất nhiều em đã học được những bài học rất bổ ích từ trang web của anh và những ý kiến góp ý của mọi người . Chúc anh thành công trong cuộc sông !

  • nicotine

    anh ơi cho e hỏi cái tool để Validate code là gì vậy?

  • http://www.vn360plus.yahoo.vn ta thanh son

    áddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd

  • HuyDN

    Anh ơi. Sao video nó cứ nhập nháy thế ạ. Khó xem quá anh có thể upload lại đc ko ạ? Tks anh nhìu!

  • kuthien

    cho mình hỏi cách viết code cho demo thuật toán sắp xếp là như thế nào vậy các bác?các bác giúp dùm mình được không?

  • http://bearsharks.com Clackken Smith

    Nó là Addons – Web Developer của firefox. Bạn có thể kiếm nó trên trang addons của firefox nhé.

  • http://www.tuanva.info tuanva

    Bài hướng dẫn rất hay và chi tiết bác DW à. Nhưng mình xin mạn phép hỏi thêm là cái toolbar để validate css hay xhtml là toolbar gì vậy bác, mình cũng muốn cài nó để tiện cho công việc. Cám ơn bác nhiều.

  • The-CapsLock

    thanks for sharing!!!! Hy vọng bác CS và DW típ tục post nhìu bài hay hơn nữa

  • duocvang9999

    Hi ! Em học IT, hiện tại đang design web. Những kiến thức như thế này rất quan trọng đối với những người mới học như em. Bài rất hay, dễ hiểu, thanks Anh đã share. Chúc A thành công trong sự nghiệp.

  • http://troikyniem.net trịnh thế thạo

    hôm nay mới biết đến trang này!
    thank!

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

    Sorry NickB nhé! chưa nói là bạn phải wrap code vào 2 cái `backtick` (dấu nằm trên phím Tab đó)

    Sorry :(

  • Thien

    Cám ơn bác NickB đã giải thích thêm. Newbie như Em mới hiểu được. Thanks

  • NickB

    Comment là mấy cái thẻ mất hết :(…
    Mình lưu ý thêm 1 điểm
    -CSS sử dụng div thay thế cho bảng. Nhưng không có nghĩa là bảng bị bỏ đi, bạn vẫn phải hiểu chức năng của bảng là để thể hiện nội dung nên bạn vẫn thể dùng bảng để thực hiện các chức năng thể hiện dữ liệu vd như bảng mặt hàng , bảng nhân viên. Chỉ chú ý là không dùng bảng để trình bày bố cục !

  • NickB

    Nói tóm lại việc đạt chuẩn không phải là quá khó. Nhưng yêu cầu bạn tuân thủ theo nhiều nguyên tắc dù là nhỏ nhất.Bạn cũng nên tìm hiểu về các tag của HTML, cũng nên tự tìm hiểu từng thành phần có trong mã HTML và cả CSS, và tôi nghĩ nơi tham khảo tốt nhất là tại http://www.w3schools.com.
    Trong việc sử dụng HTML/CSS để trình bày trang web bạn nên chú ý :”Việc trình bày không làm ảnh hưởng đến nội dung và nội dung phải tách biệt với trình bày” đó là một nguyên tắc rất quan trọng.
    Cũng là lý do tại sao không sử dụng các thành phần định dạng trình bày như font,align,.. không sử dụng bảng trong code HTML.
    Trong CSS, chúng ta có 3 cách để áp dụng các thuộc tính :
    -Áp dụng trực tiếp cho từng thành phần = style=”"
    - Sử dụng khai báo “…. ngay trong trang HTML
    -Sử dụng khai báo ngoài “”
    Nhưng tại sao nên dùng cách thứ 3, cũng chính vì muốn tách biệt phần nội dung và trình bày -làm như vậy sẽ đúng với mục đích của CSS hơn.
    Việc sử dụng CSS để tách biệt nội dung và hình thức còn hướng đến mục đích trang web vẫn thể hiển thị nội dung tốt nếu ko có CSS và hình ảnh.
    Bạn thử mở 1 trang có sử dụng HTML/CSS đạt chuẩn nội dung và trình bày hoàn toàn tách biệt.
    Rồi mở 1 trang khác sử dụng HTML/CSS 1 cách bừa bãi.
    Tắt CSS và hiển thị hình ảnh bên phía trình duyệt , rồi bạn sẽ thấy rõ hơn tại sao phải tách biệt như vậy .
    Rõ rành trang web đạt chuẩn vẫn hiển thị tốt nội dung từ trái sang phải trên xuống , và người dùng vẫn nắm dc nội dung truyền tải .Việc này dẫn tới trang web vẫn hoạt động tốt trên các thiết bị di dộng (nơi mà trình duyệt có thể không hổ trợ CSS và hiển thị không tốt khi dùng bảng)

  • NickB

    Như D.Warlock đã nói đây là các quy tắc viết về phần code.Nhưng nó là những điểm rất đáng chú ý, và là những thói quen nên có của coder cần có.Tôi sẽ giải thích nhiều hơn để bổ sung cho tutorial của DW.
    Thứ nhất là <!DOCTYPE html:
    DOCTYPE là thành phần không bắt buộc trong HTML nhưng là 1 thành phần nên có nó giúp cho trình duyệt hiểu và hiển thị tốt nội dung của trang web của bạn .
    -Theo W3c có 12 loại doctype nhưng tôi sẽ giới thiệu cho bạn 6 loại phổ biến nhất
    - HTML 4.1 Strict/Transitional/Frameset
    -XHTML 1.0 Strict/Transitional/Frameset
    + Strict : yêu cầu phần nội dung tách biệt hoàn toàn với trình bày, không được sử dụng các thẻ font, align…và không có các thành phần framset.Phần trình bày hoàn toàn bằng CSS
    +Transition: không chấp nhận các thành phần frameset.
    +Frameset: có thể sử dụng Frameset.
    Tiếp theo là phân biệt giữa HTML và XHTML.
    Thực tế các tag trong HTML đều có trong XHTML nhưng sự khác biệt chính là ở cách viết code.
    -Trong HTML 2 thẻ và là như nhau, nhưng với XHTML nó hoàn toàn khác nhau do XHTML là ngôn ngữ mở rộng của HTML – và W3C khuyến cáo bạn sử dụng các tag ở dạng viết thường.
    -Tương tự với giá trị và thuộc tính đều phải viết thường ở XHTML như alt=”".
    -Mọi tag đều phải dc đóng vd ,
    -Các thành phần phải được nest đúng cách vd .
    -Mọi thành phần phải có phần tử gốc .

  • Tran

    Bài rất tuyệt, mong anh cố gắng ra các bài tiếp theo.

    Cảm ơn anh!

    • http://www.hoangnguyen.come.vn Hoang

      Bài viết của anh rất tuyệt ước gì em viết được như anh thì hay biết mấy

      ah anh có thể giúp em cho em xin cái code phân trang được không? em viết hoài mà nó vẫn cứ bị báo lỗi không dùng được.

      em mới tạo 1 cái trang web xong vẫn còn thiếu nhiều lắm nhưng em muốn có cái code phân trang trước rồi mới pót bài lên.

      cảm ơn anh.

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

        Code phân trang phụ thuộc vào cấu trúc csdl của em chứ có phải cho em code là làm được đâu? mỗi cái một khác à.

        • Quangvo

          anh cá lóc ơi…nhiều thẻ div co tác động tới tốc độ load trang ko anh

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