• fans
  • 1036 reader
  • followers
HTML Cơ bản – Phần 1
  • 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

HTML là thành phần cơ bản nhất để xây dựng lên trang web. Cho dù trang web của bạn có được thiết kế bằng PHP, ASP hay CGI, nhưng nếu muốn hiển thị nội dung lên trình duyệt. Bao giờ output cuối cùng vẫn sẽ là HTML, đây chính là định dạng mà trình duyệt web của bạn có thể đọc được và hiển thị nội dung theo nó.

Thậm chí bạn có sử dụng những CMS (Content Management System) thì output cuối cùng vẫn sẽ là HTML. Cho nên hiểu và biết cách vận hành HTML vẫn rất cần thiết cho bất cứ ai muốn xây dựng trang web. Trong Video tutorial này, tôi sẽ giới thiệu đến các bạn những thẻ HTML cơ bản nhất và cách sử dụng chúng. Đây là tutorial dành cho người hoàn toàn chưa biết gì về HTML.

Xem tiếp phần 2

HTML là gì?
  • HTML là chữ viết tắt của Hyper Text Markup Language hay tiếng Việt gọi là Ngôn ngữ hiển thị siêu văn bản.
  • Một file HTML chứa những thẻ HTML
  • Những thẻ HTML sẽ hướng dẫn trình duyệt web trình bày thành phần của một trang web
  • Một file HTML phải có phần mở rộng là .html hoặc .htm
  • Một file HTML có thể được tạo ra bởi trình soạn thảo văn bản đơn giản như Notepad
Phần mở rộng là .htm hay .html

Cả 2 phần mở rộng này đều đúng. Trước đây khi các máy tính cũ không cho phép phần mở rộng vượt quá 3 ký tự, do vậy người ta phải sử dụng .htm. Nhưng hiện nay chúng ta có thể sử dụng .html cũng được. Tuy nhiên bạn hãy tạo thói quen sử dụng chỉ một loại hoặc là .htm hoặc là .html. Đừng khi thì .htm khi thì lại .html.

Tại sao bạn lại phải học HTML

Đến đây bạn có thể tự hỏi rằng “tại sao tôi cần phải học HTML khi mà có rất nhiều những phần mềm giúp tạo trang web nhanh mà đơn giản?”. Đúng vậy, bạn hoàn toàn có thể sử dụng những phần mềm WYSIWYG để tạo trang web bằng HTML như là Dreamweaver hoặc Frontpage thay vì phải viết từng dòng code trong Notepad. Tuy nhiên, nếu bạn chỉ dựa vào những phần mềm này, bạn sẽ không hiểu được cấu trúc mã nguồn của trang web. Cũng giống như khi bạn chỉ biết lái xe mà không hiểu chút gì về máy móc. Nếu bạn thực sự muốn đi sâu vào lĩnh vực thiết kế web, bạn không nên sử dụng những phần mềm có sẵn mà hãy tự học HTML và tự viết code cho trang web của mình. Bởi vì cách này được cho là cách hiệu quả nhất để tạo ra một trang web.

Cho dù bạn có ý định sử dụng những phần mềm quản lý nội dung CMS để tạo ra trang web, thì bạn cũng phải có kiến thức cơ bản về HTML để chỉnh sửa và sửa lỗi khi có sự cố xảy ra. Nếu mở code lên mà ngay cả những thẻ cơ bản như <li>, <img>, <a href> … bạn đều không biết thì lúc đó sẽ rất khó khăn cho bạn quản lý trang web của mình.

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

  • jack

    chao cac ban minh ten la nhat minh hien dang la sinh vien dai hoc bach khoa ha noi.hien tai minh dang co y dinh mo cong ty lam mot trang thuong mai dien tu voi chuc nang giong nhu vatgia va rongbay de kinh doanh.nen minh dang can tim nhung nguoi co cung dam me lap trinh web va dam me thuong mai dien tu co kien thuc ve seo ve cac ngon ngu lap trinh wen nhu html css javascript php jquery ajax de lam cung.khong biet trong cong dong co ai muon tham gia khong?neu muon thi co the lien lac voi minh theo so:0986041490 hoac so 01214035001 hoac chat voi minh qua nick:silicon_vl

  • giang nam

    Cảm ơn anh!
    Bài học rất hay và giọng đọc rất chuẩn

  • http://198.com.vn Sua chua dien nuoc

    Anh ơi em đang học PHP . nhưng xem video không được là sao vậy

  • http://phamvanduit.blogspot.com Phạm Văn Dũ

    Video Tutorials của anh rất hay, giúp em hiểu thế nào là html, thể nào là các thẻ trong html …
    Àh thẻ em chỉ center được image, paragraph, … nhưng em không center được list giống anh, phần chữ thì nó center, riêng phần số hoặc dấu chấm thì nó lại left ^^!

    • Mạnh Cường

      mình cũng bị như bạn, mà không biết làm sao ???

    • http://www.facebook.com/hieu.acoustic Hieu Acoustic

      Mình cũng bị trường hợp y như bạn :D

    • Mọt Nét

      Mình cũng bị như thế, đặt thẻ center mấy chỗ rồi vẫn không được, tác giả xem chỉnh sửa thế nào ?

    • tumap90tvt

      Nguyên nhân của “lỗi” trên vì các bạn chạy trên Chrome còn tác giả chạy trên FF :))
      Xảy ra hiện tượng này vì mỗi trình duyệt nó lại có cách hiển thị mặc định với các thẻ khác nhau (user agent stylesheet), tức là cách hiển thị của thẻ hoặc phần tử khi bạn ko định dạng gì cho nó. Sau này làm nhiều các bạn sẽ quen thôi :D

      Để khắc phục hiện tượng trên bạn định dạng lại một chút cho thẻ ul như sau là được.

      dong 1
      dong 2
      dong 3

      Con số kia tùy bạn nhé :)

      • Vo Danh

        Hay quá

        • Vo Danh

          Anh chỉ cho em một số về cách dùng iframe luôn nghe!

          • test

            test sdfa dfadf dfadf adfasdfa fasdfasdf asdfasdf adfasdfasf adfadfaf asdfadf adfa f adf sd f adfadfa asdf asdf a asdfadfadf adfadfafadfa dfad f

          • test2

            test them z zzz oik men test them cai nua tes tes fdsfa d adfadfa ad a

  • Doanh

    đây là video 3? xin hỏi admin là 2 video trước là bài nào thế ạ?mong admin giải đáp giúp

    • phạm thị hòa

      video series để biết thêm

      • Doanh

        Bạn có thể nói chi tiết giúp mình với.Rất cảm ơn bạn :)

  • http://www.izwebz.com Hoàng Gia

    Thanks thanks bạn….

  • Tâm trô

    video rất bổ ích,tks

  • an cư

    ho em hỏi cách dơnload và cài đăt texter vào clipboard

  • Toàn Nguyễn

    Chào anh.
    Anh ơi em đang theo dõi website của anh để tự học html và css.
    2 video đầu thì em đã clear nhưng đến video tạo trang web đầu tiên thì có thẻ div. Thẻ này mời mà anh chưa nói tới. Rất mong anh hướng dẫn chi tiết về thẻ này.
    Cảm ơn anh

  • Mr.Unkown

    Video khá bổ ích cho người mới học. Cám ơn bạn rất nhiều :D

  • http://izwebz.com nguyen van hoanh

    Em muon hoc de co the thiet ke duoc mot trang web thi em phai bat dau tu bai nao den bai nao.
    Nhung bai cua anh viet rat hay. Anh co the giu cho em danh sach cac bai hoc theo thu tu duoc kO?
    Em tim no linh tinh pheo ca len ko biet hoc tu dau nua

  • http://aconma.tk Degic Mackey

    anh nào có link về tài liệu cơ bản của html ko? cho em xin cái
    mailto:nvt_hkpro_1997@gmail.con
    tkss nhiều

  • thangdt

    Chào anh! bài viết của a hay tuyệt, rất dễ hiểu và lôi cuốn.
    Cho em hỏi chút: em copy 1 đoạn văn bản vào trong Notepad nhưng nó không hiển thị xuống dòng như văn bản gốc mà nó cứ kéo thành hàng dài tít tắp. A có thể chỉ giúp e chỗ này được không. Thank a!

    • dfsdf

      asd asd

      • dfsdf

        ádasd

        • dfsdf

          á ád

          • dfsdf

            á đá

          • dfsdf

            á đásss

          • dfsdf

          • dfsdf

            fffff

          • dfsdf

            asdad agf

          • dfsdf

            Lỗi, hết trả lời đc rầu :))

  • Micky

    Lần đầu tiên học HTML, lên Google search cả đống tài liêu đọc hết cả mấy tháng trời cũng chỉ nhớ được có mấy thẻ. Hên là hôm nay được coi clip của anh chứ nếu không thì chắc 2-3 năm nữa mới biết làm web căn bản. Thanks anh nhiều.

  • http://www.bta.name.vn Bùi Trường Anh

    Bài viết hay và xúc tích quá ! Cảm ơn rất nhiều! Mình xin trích dẫn qua blog mình.:D thanks!

  • nam nguyen

    Thân chào Deamon!
    Thấy bạn chỉnh trong notepad trang web thay đổi theo.
    Mình cũng chỉnh trong file notepad.text nhưng không thấy
    web thay đổi là tại sao?vì chỉnh trong file homepage.html kg được
    mà chỉnh trong notepad.txt rồi lưu lại bằng…html thì trang web thay đổi.
    Nhưng làm vậy thì lâu . thấy bạn làm nhanh và gọn quá! kg biết tại sao? Mong
    bạn chỉ giúp! thanks nhiều

    • http://baycaouocmovn.tk Trần Thủy Lực

      Bạn nên dùng Notepad++ thì chỉnh dễ hơn đó.

  • trần ân

    cách diễn đạt của anh tự nhiên mà cuốn hút quá.

  • http://giaro1961.blogspot.com/ QUỐC HÙNG

    Xin chào anh bạn trẻ , tôi là một ông lảo nay được 52t Nick Giaro , ở sài gòn – rất mê vi tính ( ngoài thời gian làm việc) và mới làm quen với blogspot từ vài tháng nay ! Lò mò trên mạng để tìm tài liệu học , ngẩu nhiên “sụp bẩy” vào đây và thử nếm cái HTML của bạn ( nếu bạn là người nói tiếng bắc trong video) Anh bạn chỉ dẩn rất có nghề , rất dễ nghe và dể hiểu ( vì tôi mới học nên phải nghe nhiều mới thắm) thú vị ở chổ khi làm sai thì bạn nhận mình sai và sửa lại cho đúng Y như chương trình trực tiếp – hay lắm ! giọng nói thật là tuyệt , tiếng anh củng hết sẩy ( dù không hiểu gì cả – nhưng nghe thấy đả ) . Nếu video nầy mà ra đỉa thì tôi sẻ mua ngay.! Tôi ủng hộ bạn và mong có nhiều bài học hay cho mọi người – trong đó có lảo giaro nầy. Cảm ơn bạn thật nhiều . (Nếu có thời gian bạn mail cho tôi 1 ít chử là tôi vui lắm). GR.

  • ngoclx

    cảm ơn các bạn!

  • Nguyễn Lâm

    Chào Anh, thật tình cờ tôi được phân công phụ trách để tìm đối tác thiết kế trang web cho cơ quan. Để phục vụ cho công việc tôi tìm hiểu kiến thức và thật ấn tượng với cách giao tiếp của Anh. Tôi đã đề xuất tự thiết kế trang web của cơ quan dựa trên kiến thức mà video của Anh. Cám ơn nhiều!

  • http://www.talkgoldvn.info/ Quốc Việt

    Website của bạn là thứ mình cần tìm mấy tháng nay! Cảm ơn admin nhé!

  • minh nhật

    anh ơi cho em hỏi là nếu mình muốn link hay lấy ảnh từ 1 cái nguồn nào nó nằm ngoài cả cái thư mục mà chứa trang thì lam ntn, kiểu như file homepage của em nằm trong D:\newfolder1 mà muốn link đến 1 cái ở D:\newfolder2 thì có làm đc ko ?

    • http://thuthuatcode.blogspot.com/ Nguyễn Doãn Đức

      Hoàn toàn được thôi bạn,miễn là bạn copy đầy đủ link nơi lưu trữ ảnh trên máy của bạn là được.

  • Lenanghai

    Cảm ơn anh rất nhiều ạ . Nếu anh có tài liệu dạng văn bản thì cho em xin được không ạ.

  • 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
    Tôi xin phép đăng ký tài khoản mang tên bạn trên laptrinh.tv để post video này.
    Khi bạn có nhu cầu được sử dụng tài khoản này của bạn trên laptrinh.tv, tôi rất vui lòng cung cấp lại cho bạn.

  • Ashley

    Cảm ơn anh Demon rất nhiều vì bài học bổ ích này! Tôi sẽ tiếp tục theo dõi những hướng dẫn của anh. Chúc vui vẻ ^^.

  • vuxuan

    em mới bắt đầu học về html, thật vui khi tìm đwowcj video này, nó dạy rất dễ hiểu.Em cảm ơn anh rất nhiều!!!

  • http://www.nguyentra.net/ NguyenTra

    Bài giảng của bạn dễ hiểu, rất thú vị. ^^! Thanks for sharing!

  • Truc Hoang

    “tuyệt vời ” mình chỉ biết noí thế về bài của bạn

  • linh bode

    chao anh. e bay gio moi bat dau hoc html. em tim dc video cua a. cam on anh nhieu na.

  • duong

    chào a bài hướng dẫn của a hay quá e mún sưu tầm hết tất cả những bài hướng dẫn bằng video về html của a a có thể dành chút time send cho e mấy cái link đầy đủ về các bài hướng dẫn đc ko zj?

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