Home-theater-designers
Khi bạn đang xây dựng một trang web mới, ngày nay bạn sẽ muốn nó tương thích với HTML5. Nhưng bạn cũng không muốn dành thời gian không cần thiết để học những điều phức tạp của HTML5 từ đầu, phải không?
May mắn thay, Mẫu bảng soạn sẵn HTML5 có thể giúp đỡ. Đó là một mẫu giao diện người dùng đơn giản mà bạn có thể sử dụng để tạo một trang web HTML5 chỉ trong vài phút. Nhưng nó cũng đủ mạnh để bạn có thể sử dụng nó làm nền tảng của một trang web phức tạp, đầy đủ tính năng.
truyền hình trực tuyến miễn phí không cần đăng ký
Hướng dẫn HTML5 Boilerplate này sẽ trình bày về những gì có trong mẫu, những điều cơ bản bạn cần biết về cách sử dụng nó và một số tài nguyên để tìm hiểu thêm. Tôi cũng sẽ chỉ cho bạn cách tôi đã sử dụng mẫu để tạo một trang web rất cơ bản chỉ với vài dòng HTML.
Mẫu bảng soạn thảo HTML5
Khi bạn tải xuống mẫu từ HTML5 Boilerplate, bạn sẽ nhận được một số thư mục và tệp. Đây là nội dung của tệp ZIP:
css
---main.css
---normalize.css
doc
img
js
---main.js
---plugins.js
---vendor
---jquery.min.js
---modernizr.min.js
.editorconfig
.htaccess
404.html
browserconfig.xml
favicon.ico
humans.txt
icon.png
index.html
robots.txt
site.webmanifest
tile.png
tile-wide.pngChúng tôi sẽ không xem xét mọi yếu tố trong mẫu ở đây, chỉ những điều cơ bản. Tuy nhiên, để đảm bảo rằng bạn có tài nguyên để sử dụng tất cả các tệp, chúng tôi sẽ bắt đầu với các tài liệu trợ giúp.
Tài liệu trợ giúp về HTML5 Boilerplate
Boilerplate có một bộ sưu tập tài liệu trợ giúp được lưu trữ trong GitHub . Đây là một trợ giúp lớn khi bạn có thắc mắc về kỹ thuật hoặc tự hỏi tại sao một thứ gì đó lại được thiết kế theo cách của nó.
Hầu hết mọi thứ trong tài liệu cũng được bao gồm trong thư mục doc của mẫu. Bạn sẽ thấy một số tệp Markdown (.md) giúp ích rất nhiều trong việc tìm ra cách xây dựng trang Boilerplate của bạn.
Nếu bạn muốn đọc qua mọi thứ, hãy bắt đầu với TOC.md và theo các liên kết từ đó đến các tệp Markdown khác. Nếu bạn đang tìm kiếm trợ giúp về một vấn đề cụ thể, hãy tìm tệp có vẻ như nó có thể liên quan; use.md là một nơi tốt để bắt đầu.
Bắt đầu với CSS của HTML5 Boilerplate
Mẫu HTML5 Boilerplate đi kèm với hai tệp CSS: main.css và normalize.css.
Tệp thứ hai, normalize.css, giúp các trình duyệt khác nhau hiển thị các phần tử theo những cách nhất quán. Để tìm hiểu thêm về cách nó hoạt động, hãy xem dự án normalize.css tại GitHub .
Trong khi đó, main.css là nơi bạn sẽ nhập bất kỳ mã nào bạn cần định dạng trang web của bạn bằng CSS . CSS tiêu chuẩn đi kèm với mẫu là kết quả nghiên cứu được thực hiện bởi các nhà phát triển và cộng đồng HTML5 Boilerplate. Nó có thể đọc được và hiển thị độc đáo trên các trình duyệt khác nhau.
Nếu bạn muốn thêm CSS của riêng mình, bạn có thể thêm nó vào phần Kiểu tùy chỉnh của tác giả. Tôi sẽ thêm một chút kiểu liên kết cho trang mẫu của chúng tôi:
Ngoài ra còn có một số lớp trợ giúp hữu ích được bao gồm trong CSS cơ sở. Một số người trong số họ ẩn các mục khỏi trình duyệt tiêu chuẩn và trình đọc màn hình (hoặc một số kết hợp).
Cũng trong main.css, bạn sẽ tìm thấy hỗ trợ cho thiết kế đáp ứng và cài đặt in hữu ích.
Tất cả các mục này đều được giải thích rõ ràng bằng các nhận xét trong CSS:
Nói chung, bạn có thể bắt đầu với CSS cơ bản.
Thêm HTML của riêng bạn vào mẫu
Boilerplate bao gồm hai tệp HTML: 404.html và index.html.
Trang chỉ mục là nơi bạn sẽ tạo trang chủ của mình (hoặc trang duy nhất của bạn, nếu bạn đang sử dụng một máy nhắn tin đơn giản).
Nếu bạn mở trang chỉ mục trong trình duyệt, bạn sẽ thấy một dòng văn bản. Nhưng nhìn vào HTML cho thấy nhiều ẩn trong mã hơn. Điều duy nhất bạn thực sự cần lo lắng về việc thay đổi là mã Google Analytics (tìm văn bản 'UA-XXXXX-Y' và thay thế bằng mã theo dõi của riêng bạn).
Phần còn lại của HTML trên trang chỉ mục bao gồm thông tin về ứng dụng web, thông báo cho trình duyệt cũ và JavaScripts hữu ích. Khi bắt đầu, bạn không cần phải lo lắng về bất kỳ điều gì trong số này.
Tuy nhiên, có chúng đã được điền sẵn là một cách tốt để đảm bảo rằng trang web của bạn được chuẩn bị để tận dụng tối đa HTML5.
Để tạo trang của bạn, hãy chèn HTML của bạn vào giữa các thẻ trong tệp. Đây là một số thông tin cơ bản mà tôi sẽ thêm về bản thân mình:
Bạn muốn tạo nhiều trang hơn? Tạo các bản sao của tệp này và đổi tên chúng để bạn không phải sao chép và dán tất cả HTML lên. Sau đó, thêm nội dung của bạn.
Nếu bạn muốn tùy chỉnh trang 404 của mình, chỉ cần sửa đổi tệp HTML. Bạn không chắc chắn nên đặt gì trên trang 404 của mình? Kiểm tra các ví dụ thiết kế trang 404 tuyệt vời này.
Thêm một biểu tượng yêu thích (và các biểu tượng khác)
Muốn thay thế biểu tượng yêu thích của bạn? Sau đó, favicon.ico là tệp bạn cần thay thế.
Nếu bạn chưa có, bạn sẽ cần tạo một tài khoản. Bạn có thể sử dụng một trình tạo biểu tượng yêu thích trực tuyến hoặc thiết kế của riêng bạn. Chỉ cần đảm bảo rằng đó là 16 x 16 pixel và có loại tệp .ico.
làm thế nào để gửi một văn bản nhóm
Bạn nên đưa một số suy nghĩ vào biểu tượng yêu thích của mình. Sử dụng các biểu tượng yêu thích nổi tiếng này để hướng dẫn bạn động não. Đảm bảo rằng khi bạn thêm favicon mới, nó được gọi là favicon.ico.
Bạn có thể nhận thấy rằng có ba hình ảnh khác trong thư mục gốc của trang web của bạn: icon.png, ngói.png và ngói-wide.png. Những cái này để làm gì?
- icon.png được sử dụng cho các biểu tượng cảm ứng của Apple. Nếu bạn xây dựng một ứng dụng web, biểu tượng này sẽ được sử dụng khi người dùng iPhone hoặc iPad thêm ứng dụng vào màn hình chính của họ.
- ngói.png và ngói-wide.png dành cho chức năng '' ghim '' của Windows và sẽ hiển thị trong Windows 10.
Bạn nên cung cấp các biểu tượng cho tất cả những trường hợp này --- nhưng nếu bạn không xây dựng một ứng dụng web, nó có thể được ưu tiên thấp hơn.
Thêm nhiều chức năng hơn
Khi bạn đã thêm HTML và biểu tượng yêu thích (cũng như bất kỳ CSS nào bạn có thể muốn đưa vào), trang web của bạn đã sẵn sàng để được xuất bản. Đó là cách dễ dàng để sử dụng HTML5 Boilerplate. Tải nó lên máy chủ của bạn và bạn đã hoàn tất!
Đây là trang của chúng tôi trông như thế nào:
Như bạn có thể thấy, chỉ một vài dòng văn bản đã tạo ra một trang web đầy đủ chức năng (nếu hơi nhạt nhẽo). Nó không nhiều, nhưng nó chỉ mất một vài phút. Và nó rất có thể mở rộng với HTML5. Đó là sức mạnh của mẫu Boilerplate.
Nhưng bạn có thể làm nhiều hơn thế với mẫu Boilerplate nếu muốn. Nếu có điều gì đó cụ thể mà bạn đang tìm kiếm, rất có thể bạn sẽ tìm thấy nó trong tài liệu trợ giúp.
Nếu bạn không chắc mình có thể làm gì với HTML5, nhưng bạn muốn tìm hiểu, có rất nhiều hướng dẫn thiết kế web có sẵn để giúp bạn.
Đăng lại Đăng lại tiếng riu ríu E-mail Cài đặt Windows 11 trên PC không tương thích có được không?Giờ đây, bạn có thể cài đặt Windows 11 trên các PC cũ hơn bằng tệp ISO chính thức ... nhưng bạn có nên làm như vậy không?
Đọc tiếp Chủ đề liên quan- Lập trình
- HTML5
- Hướng dẫn viết mã
Dann là một nhà tư vấn chiến lược nội dung và tiếp thị, người giúp các công ty tạo ra nhu cầu và khách hàng tiềm năng. Anh ấy cũng viết blog về chiến lược và tiếp thị nội dung tại dannalbright.com.
Xem thêm từ Dann AlbrightTheo dõi bản tin của chúng tôi
Tham gia bản tin của chúng tôi để biết các mẹo công nghệ, đánh giá, sách điện tử miễn phí và các ưu đãi độc quyền!
Bấm vào đây để đăng ký