Hướng dẫn công tắc trong html
|
Toggle Switch là một button có thể chuyển đổi giá trị giống như một công tắc, Chúng ta có thể sử dụng Toggle Switch trong các form để đại diện cho một nội dung nào đó gồm hai giá trị yes và no. Các bạn hãy xem hình ảnh dưới đây: Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.  Trong bài này mình sẽ hướng dẫn các bạn tạo các Toggle Switch, Cùng tiến hành nhé! 1. Xây dựng giao diệnBước đầu tiên là xây dựng phần giao diện, các bạn tạo file
OK giờ chúng ta sẽ chuyển đến bước tiếp theo. 2. Thêm CSS để định dạng các thành phầnTrong bước này chúng ta sử dụng CSS để định dạng cho các thành phần dễ nhìn hơn, các bạn thêm đoạn mã CSS dưới đây vào bên trong thẻ style nhé: Bài viết này được đăng tại [free tuts .net] .container {
width: 500px;
margin: auto;
text-align: center;
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
margin: 20px;
}
.switch input {display:none;}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}Thuật toán ở đây như sau:
Code input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}Vậy là ta đã có một công tắc được bật. Giờ các bạn chạy thử file 3. Lời kếtQua bài viết này, mình đã hướng dẫn các bạn tạo một Toggle Switch, hi vọng nó sẽ giúp các bạn có thêm sự lựa chọn khi xây dựng website. Nếu có bất cứ thắc mắc gì các bạn hãy để lại ở phần bình luận, hẹn gặp lại trong các bài viết tiếp theo trên freetuts.net Tham khảo: w3schools.com bởi Nguyễn Văn Hợi vào 08/07/2019. Lượt xem: 2,701 Quy ước cách viết HTML5 Các lập trình viên thường cảm thấy không chắc chắn về phong cách viết và cú pháp được sử dụng trong HTML. Từ năm 2000 đến 2010, rất nhiều lập trình viên đã chuyển cách viết từ HTML sang XHTML. Với XHTML, các lập trình viên buộc phải viết code theo đúng định dạng và có “cấu trúc tốt” HTML5 có cách viết tự do hơn nên bạn phải tự xây dựng và rèn cho mình một phong cách viết mã theo đúng chuẩn. Viết code một cách thông minh Một phong cách viết thích hợp giúp các lập trình viên khác (và cả các bộ máy tìm kiếm) có thể hiểu đc code HTML của bạn Trong tương lai, các chương trình như trình đọc XML có thể sẽ muốn đọc trang HTML của bạn. Sử dụng cú pháp gần với chuẩn XHTML sẽ là một lựa chọn thông minh. Luôn luôn giữ cho phong cách viết code của bạn thông minh, gọn gàng, sạch sẽ và đúng định dạng. Sử dụng đúng DOCTYPE Luôn khai báo doctype ở dòng đầu tiên của trang: Nếu bạn muốn đồng nhất với các thẻ khác trong trang, bạn có thể viết: Viết thường tên các thẻ HTML5 cho phép bạn có thể kết hợp cả viết thường và viết hoa tên các thẻ. Chúng tôi khuyến khích bạn viết thường tên các thẻ, bởi vì:
Cách viết tệ: Cách viết rất tệ Cách viết TỐT Luôn sử dụng thẻ đóng Trong HTML5, bạn không cần sử dụng thẻ đóng cho tất cả các thẻ (ví dụ thẻ ). Nhưng, chúng tôi khuyến khích bạn nên sử dụng thẻ đóng: Cách viết tệ: Cách viết TỐT: Đóng thẻ rỗng Trong HTML5, bạn có thể tùy ý đóng những thẻ rỗng (thẻ rỗng là những thẻ không có thẻ đóng). Bạn được phép viết: và cũng được phép viết như thế này: Tuy nhiên, dấu gạch chéo (/) là bắt buộc trong XHTML và XML. Nếu bạn muốn những phần mềm đọc XML có thể truy cập trang của bạn, tốt nhất là hãy sử dụng dấu gạch chéo để đóng thẻ. Viết thường tên các thuộc tính HTML5 cho phép bạn có thể kết hợp cả viết thường và viết hoa tên các thuộc tính. Chúng tôi khuyến khích bạn viết thường tên các thuộc tính, bởi vì:
Cách viết tệ: Cách viết tốt: Trích dẫn giá trị thuộc tính HTML5 cho phép bạn viết giá trị thuộc tính mà không cần trích dẫn. Chúng tôi khuyến khích bạn nên trích dẫn giá trị thuộc tính vì:
Trong ví dụ dưới đây, thuộc tính class sẽ không hoạt động như mong muốn do giá trị có chứa dấu cách Cách viết tệ: Cách viết tốt: Thuộc tính trong thẻ Dấu cách và dấu bằng Bạn có thể sử dụng dấu cách quanh dấu bằng. Nhưng nếu không sử dụng dấu cách sẽ làm cho mã nguồn dễ dọc hơn và các thuộc
tính trở nên tách bạch, rõ ràng hơn: Cách viết tệ: Cách viết tốt: Tránh code dài trên một dòng Khi bạn sử dụng một công trình soạn thảo HTML, nếu có một dòng code quá dài bạn sẽ phải trượt thanh cuốn sang phải hoặc sang trái để xem hết. Điều này rất bất tiện. Hãy cố gắng tránh những dòng code dài hơn 80 ký tự. Lùi đầu dòng và cách dòng Không thêm dòng trống vào mã nguồn nếu không cần thiết. Để dễ đọc, chỉ thêm dòng trống để tách các khối code lớn hoặc phân cách hợp lý giữa các thẻ. Để dễ đọc, bạn có thể sử dụng 2 dấu cách để lùi đầu dòng. Không cần thêm dòng trống và thụt lề cho mọi phần tử. Ví dụ Không cần thiết: Cách viết tốt hơn: Đối với bảng: Đối với danh sách: Bỏ qua thẻ và ? Trong chuẩn HTML5, bạn có thể không cần dung thẻ và thẻ . Đoạn mã nguồn dưới đây hoàn toàn hợp lệ trong HTML5: Tuy nhiên, chúng không không khuyến khích bạn bỏ thẻ và thẻ . Thẻ là thẻ gốc của trang, bạn có thể sử dụng để khai báo ngôn ngữ trang đang dung: Việc khai báo ngôn ngữ rất quan trọng đối với các bộ máy tìm kiếm và các ứng dụng khi truy cập website của bạn. Việc bỏ thẻ và có thể thể làm treo DOM và phần mềm XML. Thiếu thẻ có thể gây ra lỗi trong những trình duyệt cũ (như IE9). Thiếu thẻ ? Trong chuẩn HTML5, bạn có thể bỏ qua thẻ . Mặc định, trình duyệt sẽ tự động thêm thẻ trước thẻ . Bạn có thể bỏ thẻ để giảm sự phức tạp khi viết mã HTML: Tuy nhiên, không khuyến khích bỏ qua thẻ . Việc bỏ thẻ dường như không mấy quen thuộc với các lập trình viên. Chúng ta cần thời gian để làm quen với việc này. Thẻ bổ trợ Để đảm bảo các bộ máy tìm kiếm hiểu trang của bạn một cách chuẩn xác, hãy thiết lập ngôn ngữ và bộ mã hóa ký tự mà trang sử dụng ở ngay những dòng đầu tiên của trang: Đặt khung nhìn (chế độ xem) HTML5 cung cấp một phương thức giúp nhà thiết kế web có thể
điều khiển chế độ xem, thông qua thẻ . Khung nhìn là vùng hiển thị trang web trên thiết bị của người dùng. Và nó có thể khác biệt tùy vào thiết bị (điện thoại di động, laptop, máy để bàn,v.v…) Bạn nên thêm phần tử viewport vào mọi trang web: Một phần tử viewport cung cấp cho trình duyệt cách xử lý kích thước và tỷ lệ của trang. Phần width=device-width đặt độ rộng trang tùy
theo độ rộng thiết bị. Phần initial-scale=1.0 đặt mức zoom ban đầu, khi trang được tải lần đầu tiên. Ghi chú trong HTML Với những ghi chú ngắn chỉ trên một dòng: Với những ghi chú dài, được viết trên nhiều dòng nên được viết như sau: Những ghi chú dài sẽ dễ nhìn hơn nếu bạn thụt lùi đầu dòng bằng 2 dấu cách. CSS Bạn có thể sử dụng cú pháp đơn giản để liên kết với tệp tin CSS (không cần thiết phải sử dụng thuộc tính type): Với quy tắc rút gọn, có thể được viết như sau: Với cách viết thường thì nên viết trên nhiều dòng:
Liên kết JavaScript trong HTML Bạn có thể sử dụng cú pháp đơn giản để liên kết với tệp tin JavaScript (không cần thiết phải sử dụng thuộc tính type): Truy cập vào các thành phần HTML bằng JavaScript Hậu quả của việc sử dụng những kiểu HTML “bừa bãi” có thể dẫn đến các lỗi khi sử dụng JavaScript. Ở ví dụ dưới đây cho thấy, cách đặt tên khác nhau sẽ có cách truy cập khác nhau trong JavaScript: Viết thường tên các tệp tin Hầu hết các máy chủ web (Apache, Unix) phân biệt viết hoa, viết thường khi truy cập tên tệp tin: Một ảnh là london.jpg không thể truy cập được với tên là London.jpg. Những máy chủ web khác (Microsoft, IIS) không phân biệt viết hoa, viết thường: london.jpg có thể truy cập bằng tên London.jpg hoặc london.jpg. Nếu bạn chuyển website từ một máy chủ không phân biệt viết hoa-viết thường sang một máy chủ phân biệt viết hoa-viết thường, có thể dẫn tới một vài lỗi nhỏ khiến cho website của bạn bị hỏng. Để tránh dẫn tới những lỗi này, hãy luôn sử dụng viết thường cho tên tệp tin (nếu có thể). Phần mở rộng của tệp tin Các tệp tin HTML nên có phần mở rộng là .html (hoặc .htm). Các tệp tin CSS nên có phần mở rộng là .css Các tệp tin JavaScript nên có phần mở rộng là .js Sự khác biệt giữa .htm và .html Không có sự khác biệt nào giữa hai phần mở rộng .htm và .html. Trình duyệt và máy chủ sẽ làm việc với cả 2 phần mở rộng như là một trang HTML. .htm là do “di truyền” từ hệ điều hành DOS đời đầu, khi mà phần mở rộng bị giới hạn là 3 ký tự. .html là do “di truyền” của hệ điều hành Unix không bị giới hạn 3 ký tự. Khác biệt về mặt kỹ thuật Khi bạn truy cập vào một địa chỉ mà không có tên tệp tin (ví dụ https://tedu.com.vn/), website sẽ tự động hiển thị tệp tin mặc định. Tệp tin mặc định phổ biến là index.html, index.htm, default.html và default.htm. Nếu website của bạn đã được cấu hình tên tệp tin mặc định là “index.html”, bạn phải đặt tên tệp tin là “index.html”, không được đặt là “index.htm.” Tuy nhiên, thông thường các website sẽ được cấu hình nhiều tệp tin mặc định thay vì một, thậm chí bạn có thể tự cấu hình bao nhiêu tệp tin mặc định mình muốn. Dù vậy, phần mở rộng đầy đủ của một tệp tin HTML là .html và không có lý do gì để bạn không sử dụng phần mở rộng này. Trích nguồn từ: (html5,style,guide,phong cách viết,quy ước) |
