Tạo trang web nhanh chóng với HTML5 Boilerplate

Khi xây dựng một trang web mới, bạn cần nó tương thích với HTML5 nhưng không muốn mất thời gian học những thứ phức tạp của HTML5 từ đầu, bạn có thể sử dụng mẫu HTML5 Boilerplate. Đây là một mẫu giao diện người dùng đơn giản để tạo một trang web HTML5 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 cho một trang web phức tạp, đầy đủ tính năng. Bài viết này sẽ hướng dẫn bạn cách sử dụng HTML5 Boilerplate và một số tài nguyên để phát triển mẫu này.

Xem thêm: 12 mẫu HTML5 đẹp thiết kế web không nên bỏ lỡ

Mẫu bảng soạn thảo HTML5

Khi bạn tải xuống mẫu từ HTML5boilerplate.com, 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 — nhà cung cấp — jquery.min.js — modernizr.min.js.editorconfig .htaccess 404.html browserconfig.xml favicon.ico people.txt icon.png index.html robots.txt site.webmanifest tile.png tile-wide.png

Chúng tôi không xem xét tất cả các yếu tố trong mẫu, chỉ đi vào những điều cơ bản. Để đảm bảo 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 các tài liệu trợ giúp được lưu trữ trong GitHub. Đây là nơi để trợ giúp khi bạn có thắc mắc về kỹ thuật hoặc thiết kế.

Hầu hết mọi thứ trong tài liệu đều nằm trong thư mục doc của mẫu. Bạn sẽ thấy một số tệp Markdown (.md), đây là các hướng dẫn để giúp bạn tìm ra cách xây dựng trang Boilerplate.

Nếu bạn muốn đọc mọi thứ, hãy bắt đầu với TOC.md và sau đó là các liên kết đến các tệp Markdown. Nếu bạn muốn được trợ giúp về một vấn đề cụ thể, hãy tìm một tệp có vẻ liên quan và phải bắt đầu bằng use.md

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 cách nhất quán. Để 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 được sử dụng để đặt mã định dạng trang web bằng CSS. CSS chuẩn đi kèm với mẫu này là kết quả nghiên cứu được thực hiện bởi cộng đồng và nhà phát triển HTML5 Boilerplate. Nó có thể được đọc và hiển thị 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ả. Ví dụ dưới đây thêm một chút kiểu liên kết vào trang.

Ngoài ra còn có một số lớp trợ giúp hữu ích trong CSS cơ bản. Một số lớp ẩn các mục khỏi trình duyệt tiêu chuẩn và trình đọc màn hình. Trong main.css, bạn sẽ tìm thấy hỗ trợ cho các thiết kế đáp ứng và cài đặt in hữu ích. Tất cả các mục đều được giải thích rõ ràng bằng nhận xét trong CSS:

Nói chung, bạn có thể bắt đầu với CSS cơ sở.

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 được sử dụng để tạo trang chủ (hoặc trang duy nhất cho trang một trang đơn giản). Nếu bạn mở trang chỉ mục trong trình duyệt của mình, bạn sẽ thấy một dòng văn bản. Nhưng nhìn vào HTML, bạn sẽ thấy nhiều thứ ẩn trong mã. Những gì bạn thực sự cần quan tâm là mã Google Analytics (tìm văn bản UA-XXXXX-Y và thay thế bằng mã theo dõi của bạn).

Phần còn lại của HTML trên trang chỉ mục bao gồm thông tin ứng dụng web, thông báo trình duyệt kế thừa và JavaScript hữu ích. Khi bắt đầu, bạn không nên chạm vào bất kỳ thứ gì trong số chúng.

Để 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. Dưới đây là một số thông tin cơ bản để giới thiệu về bản thân:

Để tạo nhiều trang hơn, bạn sao chép tệp này và đổi tên chúng để không phải sao chép và dán tất cả các HTML ở trên, sau đó thêm nội dung của bạn. Nếu bạn muốn tùy chỉnh trang 404, chỉ cần chỉnh sửa tệp HTML.

Thêm biểu tượng yêu thích (và các biểu tượng khác)

Nếu bạn muốn sử dụng favicon của mình, hãy thay thế tệp favicon.ico. Nếu bạn chưa có biểu tượng yêu thích, bạn cần tạo một biểu tượng yêu thích. Bạn có thể sử dụng trình tạo favicon trực tuyến hoặc thiết kế của riêng bạn, nhưng hãy đảm bảo rằng nó là 16 x 16 pixel và loại tệp là .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. Cái gì đây?

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 “pin” của Windows và sẽ hiển thị trong Windows 10.

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ư CSS), trang web của bạn đã sẵn sàng để xuất bản. Bạn chỉ cần tải nó lên máy chủ là xong.

Đây là một trang web ví dụ:

Như bạn thấy, chỉ cần một vài dòng văn bản sẽ tạo ra một trang web đầy đủ chức năng. Nó không có nhiều việc phải làm nhưng chỉ mất vài phút để tạo một trang web như vậy. Và nó rất có thể mở rộng với HTML5, đây là sức mạnh của mẫu Boilerplate.

Hy vọng bạn đang thành công.

Xem thêm: