Nội dung chính
Nên học gì tiếp theo?
Google ClassroomChúc mừng bạn đã hoàn thành những nội dung kiến thức cơ bản về HTML và CSS! Hy vọng bạn đã hiểu rõ phần lớn những "viên gạch" làm nên các trang web mà bạn gặp trên Internet. Tiếp tục kiên trì học hỏi sẽ giúp bạn có đủ khả năng nhận ra thẻ HTML cũng như thuộc tính CSS nào đang được sử dụng chỉ từ việc quan sát các trang web.
Dĩ nhiên, vẫn còn nhiều điều để học về HTML và CSS. Hãy cùng tìm hiểu thông qua bài đọc này!
Một số thẻ HTML khác
- Thẻ tạo biểu mẫu: Có một số thẻ được sử dụng để tạo biểu mẫu trên web, ví dụ như
<button>và<input>. Đây là hai thẻ điển hình được sử dụng để truyền dữ liệu về một máy chủ và do vậy không thể sử dụng trên Khan Academy. Ta có thể sử dụng kết hợp hai thẻ này với JS để thiết kế trò chơi điện tử, một ứng dụng mà bạn sẽ được thực hành trong chương về HTML/JS. Bạn có thể tìm hiểu thêm về thẻ tạo biểu mẫu qua slide hướng dẫn cũng như học các ngôn ngữ lập trình dành cho máy chủ như PHP, Python, Ruby trên Codecademy. - Thẻ Iframe: Thẻ
<iframe>được sử dụng để hiển thị nội dung của một trang web khác bên trong trang web của bạn. Đây là một thẻ rất hữu ích khi bạn cần nhúng nội dung từ Youtube, Google Maps, v.v. vào trang web. Thẻ này hiện đang bị vô hiệu hóa trên Khan Academy vì lí do bảo mật và kiểm duyệt nhưng vẫn có thể được sử dụng trên các trình soạn thảo mã khác. Bạn có thể tìm hiểu thêm qua slide tại đây. - Thẻ đa phương tiện: Thẻ
<audio>và<video>được hỗ trợ bởi các trình duyệt web hiện đại nhằm cho phép mở tập tin âm thanh và video trực tiếp trên trang web. Tương tự như thẻ<iframe>, hai thẻ này hiện đều bị vô hiệu hóa trên Khan Academy nhưng vẫn có thể được sử dụng trên các nền tảng khác. Bạn có thể tìm hiểu thêm qua slide hướng dẫn tại đây. - Thẻ ngữ nghĩa mới: Vài năm trước, như một phần của phiên bản "HTML5", các trình duyệt web đã bổ sung một vài thẻ ngữ nghĩa mới để sử dụng thay cho thẻ
<div>như<article>,<aside>hay<nav>. Bạn có thể tham khảo bài đọc về các thẻ này tại đây, bao gồm sơ đồ quy trình hữu ích để đưa ra quyết định có sử dụng chúng hay không.
Một số bộ chọn và thuộc tính CSS khác
Bạn có thể thử trải nghiệm các bộ chọn và thuộc tính CSS sau đây trên Khan Academy:
- CSS3: Trong nhiều năm, Khan Academy đã tích hợp các tính năng CSS được hỗ trợ bởi trình duyệt. Tuy nhiên, hiện tại đã có thêm nhiều thuộc tính và bộ chọn CSS mới thuộc phiên bản "CSS3". Các trình duyệt hiện vẫn tiếp tục hỗ trợ bằng cách ra mắt phiên bản mới. Bạn có thể tìm hiểu thêm qua các slide hướng dẫn về bộ chọn CSS3 và thuộc tính CSS3. Bạn cũng có thể truy cập trang caniuse.com để tìm hiểu những tính năng được hỗ trợ bởi mỗi trình duyệt.
- Truy vấn phương tiện: Đây là một kỹ thuật cho phép bạn cụ thể hóa các dòng lệnh CSS khác nhau cho các tình huống khác nhau, ví dụ như khi trang web của bạn phải hiển thị ở màn hình nhỏ hơn hoặc in ra. Bạn có thể tìm hiểu thêm về truy vấn phương tiện tại W3C.
- Bộ khung CSS: Bộ khung là một tập hợp các quy tắc và lớp CSS. Nhiều lập trình viên sử dụng các bộ khung này để tăng tốc độ lập trình. Bộ khung CSS phổ biến nhất là Twitter Bootstrap, ngoài ra còn có ZURB foundation, Pure CSS, Topcoat và nhiều hơn nữa.
Sử dụng JS để lập trình web
Các lập trình viên sử dụng JavaScript để tạo tính năng tương tác cho trang web, phản hồi lại thao tác của người dùng và lấy dữ liệu động từ máy chủ. Để làm được điều này, họ cần nhúng thẻ
<script> trong HTML và lập trình bằng JavaScript trong thẻ đó. Sau đó, với mã lập trình JS, họ sử dụng "DOM API". Đây là một tập hợp các hàm được trình duyệt tích hợp sẵn trên mỗi trang web, cho phép lập trình viên thực hiện truy vấn và kiểm soát trang web đó.Điều này nghĩa là nếu bạn muốn học cách tạo tính năng tương tác cho trang web, bạn cần học cả lý thuyết cơ bản của ngôn ngữ lập trình JavaScript (có thể học trên Khan Academy) và DOM API (có thể học trong khóa học này).
Lập trình web bằng trình soạn thảo mã nằm ngoài Khan Academy
Chúng tôi rất vui khi thấy bạn có thể xây dựng nên những trang web tuyệt vời bằng trình soạn thảo mã của Khan Academy và chia sẻ những gì đã học được cùng cộng đồng. Tuy nhiên, sẽ thật tuyệt nếu bạn có thể trải nghiệm các môi trường lập trình đa dạng và thử sức với những tính năng không có sẵn trên Khan Academy. Nếu bạn muốn tiếp tục lập trình ngay trên trình duyệt (đặc biệt là nếu bạn đang sử dụng máy tính ChromeBook), bạn có thể thử sử dụng JSBin.com, JSFiddle.net hoặc Cloud9 IDE.
Nếu muốn lập trình bên ngoài trình duyệt, bạn có thể tải xuống IDE và lưu các trang web của bạn với đuôi ".html". Các IDE phổ biến có thể kể đến như Notepad++ (chỉ dành cho Windows), Visual Studio Code, SublimeText, Adobe Brackets, Coda và BBEdit.
Lưu trữ trang web trên một máy chủ
Chúng tôi lưu trữ những trang web mà bạn tạo ra trên Khan Academy trong máy chủ của chúng tôi, nhưng trong trường hợp bạn muốn có một nơi chốn của riêng mình trên World Wide Web thì sao?
Việc đầu tiên bạn cần làm là tìm một công ty cung cấp dịch vụ lưu trữ trang web. Có rất nhiều nhà cung cấp dịch vụ lưu trữ với giá cả và mức độ linh hoạt khác nhau để bạn lựa chọn.
Sau đó, bạn cần tạo một tên miền, chẳng hạn như "tencuaban.com". Khi đó, trang web bạn tạo ra có thể trở thành một phần danh tính của bạn. Nhà cung cấp dịch vụ lưu trữ đôi khi có thể cung cấp luôn dịch vụ này. Tuy nhiên, thông thường bạn sẽ cần một đơn vị khác chuyên cung cấp tên miền. Bạn có thể tìm hiểu thêm qua các slide tại đây.
Khi đã có máy chủ, bạn có thể chuyển các tập tin sang máy chủ bằng một phần mềm FTP client như FileZilla. Đây là một phần mềm kết nối trực tiếp tới máy chủ và cho phép bạn duyệt, tải xuống và tải lên các tập tin vào máy chủ hoặc từ máy chủ. Thông qua giao thức SSH, bạn còn có thể truy cập vào máy chủ và trực tiếp chỉnh sửa các tập tin trên đó từ xa.
Không ngừng học tập
Giữa một cộng đồng lập trình viên năng nổ và sự ra mắt thường xuyên của các phiên bản trình duyệt web nâng cao hơn, HTML và CSS cũng vì thế mà không ngừng cải tiến. Vậy làm thế nào để luôn cập nhật những thông tin mới nhất? Bạn có thể đăng ký Frontend Focus để nhận các bản tin qua email cung cấp cho người dùng liên kết dẫn tới những bài báo và bản thử nghiệm. Đương nhiên, mỗi khi tiếp thu kiến thức mới, bạn đừng quên thực hành để nắm chắc kiến thức hơn.
Hãy luôn ghi nhớ học đi đôi với hành nhé!
Tham gia cuộc thảo luận?
Chưa có bài đăng nào.