Giáo trình HTML5 và CSS3 full Tiếng Việt

Việc tự học bất cứ một thứ gì cũng là một việc không hề đơn giản, nhất là đối với việc tự học lập trình. Nhằm giúp các bạn có thể tự học lập trình web với HTML và CSS một cách hiệu quả nhất chúng tôi xin cung cấp một số tài liệu học lập trình web với HTML và CSS hay nhất hiện nay.

1. Giới thiệu về HTML  

HTML là ngôn ngữ siêu văn bản thực hành đưa ra nội dung về ý nghĩa và cấu trúc của trang bằng cách sử dụng phần tử thích hợp. Mã HTML mô tả giá trị của nội dung trên một trang, bất kể thiết kế hay kích thước của nội dung đó. Ngoài ra, HTML dễ quản lý web và các hoạt động hơn, vì nó hiển thị rõ ràng nội dung của mỗi phần.

Phiên bản mới nhất và nâng cao là HTML5, các phiên bản mới nhất của các trình duyệt thông như dụng  Safari, Google chrome, Mozial FireFox, Opera, Microsoft Edgg đều hỗ trợ HTML5 . Ngoài ra nhiều tính năng của HTML5 cũng hỗ trợ trên Internet Explorer 9.0.

2. Giới thiệu về CSS

CSS là một ngôn ngữ phức tạp, chữ viết tắt của Cascading Style Sheets, nó là một ngôn ngữ được sử dụng để tìm và định dạng lại các phần tử được tạo ra bởi các ngôn ngữ đánh dấu (ví dụ như HTML) hay còn được biết đến là nền tảng của thiết kế và phát triển web. Nó cho phép chúng ta thêm bố cục và thiết kế vào các trang của chúng ta và nó cho phép chia sẻ từ phần tử của trang này đến phần tử của trang khác.

Đầu tiên, điều quan trọng là phải biết chính xác cách các kiểu được hiển thị. Cụ thể, chúng ta sẽ cần phải biết các loại công cụ hoạt động như thế nào và thứ tự của các bộ chọn đó có thể ảnh hưởng như thế nào đến kiểu được hiển thị.

3. Tài liệu tự học lập trình web với HTML và CSS

Có rất nhiều cách khác nhau bạn có thể sử dụng để học lập trình web với HTML và CSS nhưng tự học hay học online hiện nay có lẽ là phương pháp tiết kiệm và hiệu quả hơn cả (nếu bạn có quyết tâm)

Chúng tôi sẽ giới thiệu với bạn một số tài liệu tự học lập trình web với HTML và CSS cơ bản đến nâng cao, hy vọng sẽ giúp ích được cho các bạn.

Tài liệu tự học html và css Tiếng Việt

- Bộ tài liệu tự học HTML và CSS được cung cấp bởi Devpro Việt Nam  

Link: https://www.devpro.edu.vn/tai-lieu-hoc-html

-  Tổng hợp các tài liệu về HTML – CSS chất lượng, trong bộ tài liệu này bao gồm cả file PDF và video

Link: http://download.giaotrinhcntt.com/?code=3b2b4efbf9a67a14f7b86e50fce70d81

- Tài liệu học HTML5 và CSS3 cơ bản của trường Đại Học FPT dùng để giảng dạy cho sinh viên, tài liệu này mang tính thực tế rất cao, phù hợp với các bạn học để làm thực tế luôn. Có cả video hướng dẫn rất tiện cho việc xem kết quả trước và code theo.

Link:

- Tài liệu Thiết kế web với HTML5 và CSS3 được tổng hợp bao gồm:

Bài 1 : Những khái niệm đầu tiên về HTML5

Bài 2: Khởi tạo và làm việc với html5 – thành phần của FORM

Bài 3 : Làm việc với Javascript và Jquery

Bài 4 : Làm việc với các thẻ HTML5 như video, audio, canvas

Bài 5 : Làm việc với CSS3

Bài 6 : Làm việc với thành phần mở rộng của CSS3

Bài 7 : Làm việc với thành phần mới và phạm vi ứng dụng của HTML5

Link:

Tài liệu tự học html và css Tiếng Anh

- Tài liệu được xây dựng bởi W3schools là chuẩn và phong phú nhất

Link: https://www.w3schools.com/

- Học HTML và CSS bằng video

Link: https://teamtreehouse.com/library/introduction-to-html-and-css

- HTML Cheat Sheet chứa các ví dụ code hữu ích và các công cụ phát triển web, trình tạo đánh dấu. Trang này được tạo ra như một hướng dẫn nhanh cho những người đã biết cách làm việc với HTML và CSS.

Link: https://htmlcheatsheet.com/

- CSS Cheat Sheet là 1 blog dạy học CSS từ những bước cơ bản nhất

Link: https://www.onblastblog.com/css3-cheat-sheet/

- CodePen’s Yearly Top Pens là một website chuyên nghiệp để các bạn theo học với giao diện đơn giản, thân thiết với người dùng và các bài học chuyên sâu luôn là sự lựa chọn hàng đầu cho các bạn lập trình viên.

https://codepen.io/2016/popular/pens/

Trên đây là tài liệu học html và css mà tôi tổng hợp được, mong rằng nó sẽ giúp ích cho việc học lập trình HTML và CSS của bạn, theo dõi những bài viết tiếp theo để cập nhật thông tin công nghệ nhanh và chính xác nhất.

Giáo trình HTML5 và CSS3 Tiếng Việt

HTML5 và CSS3 là các version mới hơn của HTML và CSS. Nó được bổ sung thêm các đặc tính mới để giúp cho việc thiết kế web dễ dàng hơn, đồng thời làm cho trang web hiển thị sinh động hơn với người xem.
Đây sẽ là bộ tài liệu, giáo trình, ebook hướng dẫn học HTML5, CSS3 thực sự hữu ích cho những người mới bắt đầu học.
Tải về

Có liên quan:

HTML và CSS là 2 thành phần không thể thiếu của bất cứ website nào chính vì vậy để bắt đầu học thiết kế web thì việc bắt đầu tìm hiểu về html và css là điều cực kỳ cần thiết hôm nay mình sẽ chia sẻ cho các bạn trọn bộ tài liệu học làm web bằng HTML5 và CSS3 từ A-Z.

Cấu trúc một tài liệu web bằng HTML5

Một tài liệu hay tập tin HTML để được gọi là một tài liệu web thì sẽ được bao gồm bốn yếu tố chính đó là:

• Có thẻ khai báo loại tập tin/tài liệu.
• Có thẻ đóng và mở tài liệu HTML.
• Có thẻ đóng và mở phần thông tin website.
• Có thẻ đóng và mở phần nội dung website.

Và trong bài này, chúng ta sẽ đi tìm hiểu qua 4 phần đó để tạo ra một tài liệu website bằng HTML đúng chuẩn.

Trước khi mình giải thích rõ các thành phần đó thì bạn hãy tạo ra một tập tin HTML với nội dung sau và lưu lại.

Thẻ khai báo loại tập tin

Ngay tại đoạn đầu tiên của tài liệu, chúng ta phải có một thẻ khai báo loại tập tin cho nó như thế này, cụ thể là ta sẽ khai báo rằng đây là tập tin HTML.

Xem thêm:  Thiết kế web bán túi xách thời trang online

01

DOCTYPE html>

Với thẻ ở trên, ta có thêm một tham số đó là html. Tham số html này nghĩa là chúng ta khai báo với trình duyệt rằng đây là tài liệu HTML5 (HTML phiên bản 5), dù rằng chúng ta có thể không sử dụng HTML5 nhưng hiện tại khi khai báo tập tin HTML thì bạn cứ sử dụng tham số này vừa ngắn gọn lại vừa dễ dàng sử dụng thêm HTML5 nếu thích.

Có một điều thú vị là thẻ không phải là một thẻ của HTML, mà nó chỉ là một thẻ khai báo thông tin trên tài liệu để trình duyệt hiểu phiên bản HTML mà bạn sử dụng trên website mà thôi.

 Thẻ đóng mở tài liệu HTML

Kế tiếp, ở tầng tiếp theo sẽ là thẻ có nhiệm vụ khai báo cho trình duyệt biết rằng những nội dung bên trong cặp thẻ này là HTML. Tuy nhiên, bên trong thẻ này mình có thêm một thuộc tính tên là lang với giá trị là vi (). Thuộc tính này nghĩa là chúng ta khai báo cho trình duyệt biết mã ngôn ngữ mà ta sử dụng trên website, mã vi nghĩa là Vietnamese – tiếng Việt

Bạn nên nhớ một điều là thẻ phải bao bọc toàn bộ nội dung website, không bao gồm thẻ.

Thẻ đóng và mở phần thông tin website

Phần khai báo thông tin của website sẽ được đặt vào bên trong cặp thẻ gọi là DOCTYPE0. Nội dung bên trong thẻ này là các thẻ chuyên cho khai báo thông tin website (meta), tên website (title), khai báo CSS (style), khai báo các đoạn Javascript (script) và một số thông tin khác. Thường là các thông tin được khai báo trong đây sẽ không hiển thị trực tiếp thành siêu văn bản trên web nhưng nó sẽ có nhiệm vụ chứa các thông tin quan trọng về website.

Xem thêm:  Merch by Amazon là gì? Cách đăng ký merch Amazon nhanh chóng nhất mà bạn nên biết

Có thẻ đóng và mở phần nội dung website

Đây là cặp thẻ mà bạn sẽ tiến hành viết nội dung vào, đó là cặp thẻ DOCTYPE1. Cặp thẻ này là để trình duyệt xác định đây là phần thân của website, nó sẽ chứa toàn bộ các nội dung siêu văn bản hoặc media mà bạn muốn nó hiển thị lên trang web của bạn. Phần này chúng ta sẽ làm việc nhiều hơn ở các bài sau.

Bây giờ nếu bạn mở tài liệu HTML ở trên lên bằng trình duyệt thì chỉ sẽ thấy nó có mỗi đoạn nội dung nằm bên trong thẻ DOCTYPE1 mà thôi.

Cấu trúc của CSS3

Trong css thì cấu trúc đơn giản hơn chỉ có 1 cặp thẻ khi viết trực tiếp trong 1 file html nào đó là  tuy nhiên do nếu viết trong 1 file thì nó sẽ rất rối nên người ta thường tách ra các file riêng và có đuôi mở rộng là .css và được liên kết với file HTML bằng câu lệnh rel=”stylesheet” href=”đường dẫn file.css” type=”text/css”>.

Lời kết

Vậy là bây giờ bạn đã có thể tự tạo ra một tài liệu website đơn giản bằng HTML rồi đó, chỉ cần áp dụng cấu trúc tài liệu theo thứ tự mà mình đã giải thích và có ví dụ ở trên.

Còn nhiều bài học hay để bạn có thể vận dụng thiết kế web. Các bạn nhớ theo dõi nhé.

Xem thêm:  10 trang web cho kiểm tra mã code trực tuyến

Các bạn có thể download bộ tài liệu tại đây nếu các bạn muốn chi tiết hơn có thể học qua video thì đây là một Serie toàn tập của tác giả Thạch Phạm chia sẻ