Home-theater-designers
Saat Anda membuat situs web baru, hari ini Anda pasti menginginkannya agar kompatibel dengan HTML5 . Tetapi Anda juga tidak ingin menghabiskan waktu yang tidak perlu untuk mempelajari seluk-beluk HTML5 dari awal, bukan?
Untungnya, Template Boilerplate HTML5 bisa membantu. Ini adalah template front-end sederhana yang dapat Anda gunakan untuk membuat situs web HTML5 hanya dalam beberapa menit. Tapi itu juga cukup kuat sehingga Anda dapat menggunakannya sebagai fondasi situs yang kompleks dan berfitur lengkap.
cara mendownload video youtube ke iphone
Tutorial Boilerplate HTML5 ini akan membahas apa yang ada dalam template, dasar-dasar yang perlu Anda ketahui tentang cara menggunakannya, dan beberapa sumber daya untuk pembelajaran lebih lanjut. Saya juga akan menunjukkan kepada Anda bagaimana saya menggunakan template untuk membuat situs yang sangat mendasar dengan hanya beberapa baris HTML.
Template Boilerplate HTML5
Saat Anda mengunduh template dari HTML5 Boilerplate, Anda mendapatkan sejumlah folder dan file. Berikut adalah isi dari file 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.pngKami tidak akan membahas setiap elemen dalam template di sini, hanya dasar-dasarnya. Untuk memastikan Anda memiliki sumber daya untuk menggunakan semua file, kami akan mulai dengan dokumen bantuan.
Dokumentasi Bantuan Boilerplate HTML5
Boilerplate memiliki koleksi dokumen bantuan yang dihosting di GitHub . Ini sangat membantu ketika Anda memiliki pertanyaan teknis atau bertanya-tanya mengapa sesuatu dirancang seperti itu.
Hampir semua yang ada di dokumentasi juga disertakan dalam folder doc template. Anda akan melihat sejumlah file penurunan harga (.md) yang sangat membantu dalam mencari tahu cara membangun situs Boilerplate Anda.
Jika Anda ingin membaca semuanya, mulailah dengan TOC.md dan ikuti tautan dari sana ke file penurunan harga lainnya. Jika Anda mencari bantuan tentang masalah tertentu, temukan file yang sepertinya terkait; penggunaan.md adalah tempat yang baik untuk memulai.
Dimulai Dengan CSS HTML5 Boilerplate
Template Boilerplate HTML5 dilengkapi dengan dua file CSS: main.css dan normalize.css.
File kedua, normalize.css, membantu browser yang berbeda merender elemen dengan cara yang konsisten. Untuk mempelajari lebih lanjut tentang cara kerjanya, lihat proyek normalize.css di GitHub .
Sementara itu, main.css adalah tempat Anda memasukkan kode apa pun yang Anda perlukan format situs Anda dengan CSS . CSS standar yang disertakan dengan template adalah hasil penelitian yang dilakukan oleh pengembang dan komunitas HTML5 Boilerplate. Ini dapat dibaca dan ditampilkan dengan baik di berbagai browser.
Jika Anda ingin menambahkan CSS Anda sendiri, Anda dapat menambahkannya ke bagian Gaya Kustom Penulis. Saya akan menambahkan sedikit gaya tautan untuk halaman contoh kami:
Ada juga sejumlah kelas pembantu yang berguna yang disertakan dalam CSS dasar. Beberapa dari mereka menyembunyikan item dari browser standar dan pembaca layar (atau beberapa kombinasi).
Juga di main.css Anda akan menemukan dukungan untuk desain responsif dan pengaturan cetak yang membantu.
Semua item ini dijelaskan dengan jelas oleh komentar di CSS:
Secara umum, Anda dapat memulai dengan CSS dasar.
Menambahkan HTML Anda Sendiri ke Template
Boilerplate menyertakan dua file HTML: 404.html dan index.html.
Halaman indeks adalah tempat Anda akan membuat beranda (atau satu-satunya halaman Anda, jika Anda ingin satu halaman sederhana).
Jika Anda membuka halaman indeks di browser, Anda akan melihat satu baris teks. Tetapi melihat ke dalam HTML mengungkapkan lebih banyak persembunyian dalam kode. Satu-satunya hal yang benar-benar perlu Anda khawatirkan tentang perubahan adalah kode Google Analytics (temukan teks 'UA-XXXXX-Y' dan ganti dengan kode pelacakan Anda sendiri).
Sisa HTML pada halaman indeks mencakup informasi untuk aplikasi web, pemberitahuan untuk browser lama, dan JavaScript yang berguna. Saat Anda memulai, Anda tidak perlu mengacaukan semua ini.
Namun, memilikinya sudah terisi sebelumnya adalah cara yang baik untuk memastikan bahwa situs Anda siap untuk mendapatkan hasil maksimal dari HTML5.
Untuk membuat halaman Anda, masukkan HTML Anda di antara tag dalam file. Berikut beberapa informasi dasar yang akan saya tambahkan tentang diri saya:
Ingin membuat lebih banyak halaman? Buat salinan file ini dan ganti namanya sehingga Anda tidak perlu menyalin dan menempelkan semua HTML. Kemudian tambahkan konten Anda.
Jika Anda ingin menyesuaikan halaman 404, cukup modifikasi file HTML. Tidak yakin apa yang harus diletakkan di halaman 404 Anda? Lihat contoh desain halaman 404 yang bagus ini.
Menambahkan Favicon (dan Ikon Lainnya)
Ingin mengganti favicon Anda? Kemudian favicon.ico adalah file yang harus Anda ganti.
Jika Anda belum memilikinya, Anda harus membuatnya. Anda dapat menggunakan generator favicon online atau mendesain sendiri. Pastikan ukurannya 16 x 16 piksel dan memiliki jenis file .ico.
penggunaan disk selalu pada 100 windows 10
Merupakan ide bagus untuk memikirkan favicon Anda. Gunakan favicon terkenal ini untuk memandu brainstorming Anda. Pastikan bahwa ketika Anda menambahkan favicon baru itu disebut favicon.ico.
Anda mungkin memperhatikan bahwa ada tiga gambar lain di direktori root situs Anda: icon.png, tile.png, dan tile-wide.png. Untuk apa ini?
- icon.png digunakan untuk ikon sentuh Apple. Jika Anda membuat aplikasi web, ikon ini akan digunakan saat pengguna iPhone atau iPad menambahkan aplikasi ke layar beranda mereka.
- tile.png dan tile-wide.png adalah untuk fungsionalitas 'pin' Windows, dan akan muncul di Windows 10.
Sebaiknya sediakan ikon untuk semua kasus ini---tetapi jika Anda tidak membuat aplikasi web, itu bisa menjadi prioritas yang lebih rendah.
Menambahkan Lebih Banyak Fungsi
Setelah Anda menambahkan HTML dan favicon (serta CSS apa pun yang mungkin ingin Anda sertakan), situs Anda siap dipublikasikan. Begitulah cara mudah menggunakan Boilerplate HTML5. Unggah ke server Anda, dan selesai!
Berikut tampilan halaman kami:
Seperti yang Anda lihat, hanya beberapa baris teks yang telah membuat situs web yang berfungsi penuh (jika agak hambar). Tidak banyak, tetapi hanya butuh beberapa menit. Dan itu sangat dapat dikembangkan dengan HTML5. Itulah kekuatan template Boilerplate.
Tetapi masih banyak lagi yang dapat Anda lakukan dengan template Boilerplate jika Anda mau. Jika ada sesuatu yang spesifik yang Anda cari, kemungkinan besar Anda akan menemukannya di dokumentasi bantuan.
Jika Anda tidak yakin apa yang dapat Anda lakukan dengan HTML5, tetapi Anda ingin mengetahuinya, ada banyak tutorial desain web di luar sana untuk membantu Anda.
Membagikan Membagikan Menciak Surel Apakah Boleh Menginstal Windows 11 pada PC yang Tidak Kompatibel?Anda sekarang dapat menginstal Windows 11 pada PC lama dengan file ISO resmi... tetapi apakah itu ide yang baik untuk melakukannya?
Baca Selanjutnya Topik-topik yang berkaitan- Pemrograman
- HTML5
- Tutorial Pengkodean
Dann adalah konsultan strategi konten dan pemasaran yang membantu perusahaan menghasilkan permintaan dan prospek. Dia juga menulis blog tentang strategi dan pemasaran konten di dannalbright.com.
More From Dann AlbrightBerlangganan newsletter kami
Bergabunglah dengan buletin kami untuk kiat teknologi, ulasan, ebook gratis, dan penawaran eksklusif!
Klik di sini untuk berlangganan