Cara menggunakan template html5

Question

Saat Anda membangun situs web baru, penting untuk memiliki fondasi awal yang baik. Pada artikel ini, saya akan menjelaskan apa itu boilerplate HTML 5 dan cara membuat template dasar untuk digunakan dalam proyek Anda

Table of Contents Show

Apa itu boilerplate HTML 5?
Contoh boilerplate HTML 5
Apa itu doctype dalam HTML?
Apa itu elemen root HTML?
Apa itu tag kepala dalam HTML?
Apa itu pengkodean karakter UTF-8?
Apa tag meta viewport dalam HTML?
Apa yang dimaksud dengan Kompatibel dengan X-UA?
Apa itu tag judul HTML?
lembar gaya CSS
Tag skrip dalam HTML
Bagaimana cara menggunakan file template HTML?
Bagaimana cara mengimpor template HTML?
Bagaimana cara menggunakan templat situs web?
Bagaimana cara membuka template HTML?

Apa itu boilerplate HTML 5?

Berdasarkan ,

kode boilerplate atau hanya boilerplate adalah bagian dari kode yang diulang di banyak tempat dengan sedikit atau tanpa variasi

Boilerplate dalam HTML adalah template yang akan Anda tambahkan di awal proyek Anda. Anda harus menambahkan boilerplate ini ke semua halaman HTML Anda

Contoh boilerplate HTML 5

Mari kita lihat contoh dasar

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML 5 Boilerplate</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
	<script src="index.js"></script>
  </body>
</html>

Apa itu doctype dalam HTML?

Baris pertama dalam kode HTML Anda harus berupa deklarasi doctype. Sebuah doctype memberi tahu browser versi HTML apa halaman itu ditulis

<!DOCTYPE html>

_

Jika Anda lupa menyertakan baris kode ini di file Anda, maka beberapa tag HTML 5 seperti

<!DOCTYPE html>

0,

<!DOCTYPE html>

1, dan

<!DOCTYPE html>

2 mungkin tidak didukung oleh browser

Apa itu elemen root HTML?

Tag

<!DOCTYPE html>

3 adalah elemen tingkat atas dari file HTML. Anda akan menumpuk tag

<!DOCTYPE html>

4 dan

<!DOCTYPE html>

5 di dalamnya

<!DOCTYPE html>
<html lang="en">
  <head></head>
  <body></body>
</html>

_

Atribut

<!DOCTYPE html>

6 di dalam tag pembuka

<!DOCTYPE html>

3 menetapkan bahasa untuk halaman. Sebaiknya sertakan juga untuk alasan aksesibilitas, karena pembaca layar akan tahu cara melafalkan teks dengan benar

Apa itu tag kepala dalam HTML?

Tag

<!DOCTYPE html>

4 berisi informasi yang diproses oleh mesin. Di dalam tag

<!DOCTYPE html>

_4, Anda akan menyarangkan metadata yang merupakan data yang menjelaskan dokumen ke mesin

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML 5 Boilerplate</title>
    <link rel="stylesheet" href="style.css">
</head>

Apa itu pengkodean karakter UTF-8?

UTF-8 adalah pengkodean karakter standar yang harus Anda gunakan di halaman web Anda. Ini biasanya akan menjadi tag

<!DOCTYPE html>
<html lang="en">
  <head></head>
  <body></body>
</html>

_0 pertama yang ditampilkan di elemen

<!DOCTYPE html>

4

 <meta charset="UTF-8">

Menurut Konsorsium World Wide Web,

Pengkodean berbasis Unicode seperti UTF-8 dapat mendukung banyak bahasa dan dapat menampung halaman dan formulir dalam campuran apa pun dari bahasa tersebut. Penggunaannya juga meniadakan kebutuhan akan logika sisi server untuk secara individual menentukan pengkodean karakter untuk setiap halaman yang disajikan atau setiap pengiriman formulir yang masuk

Apa tag meta viewport dalam HTML?

Tag ini merender lebar halaman menjadi lebar ukuran layar perangkat. Jika Anda memiliki perangkat seluler dengan lebar 600px, jendela browser juga akan memiliki lebar 600px

Skala awal mengontrol tingkat zoom. Nilai 1 untuk skala awal mencegah zoom default oleh browser

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

Apa yang dimaksud dengan Kompatibel dengan X-UA?

Tag

<!DOCTYPE html>
<html lang="en">
  <head></head>
  <body></body>
</html>

_0 ini menentukan mode dokumen untuk Internet Explorer.

<!DOCTYPE html>
<html lang="en">
  <head></head>
  <body></body>
</html>

3 adalah mode tertinggi yang didukung

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

Apa itu tag judul HTML?

Tag

<!DOCTYPE html>
<html lang="en">
  <head></head>
  <body></body>
</html>

4 adalah judul halaman web. Teks ini ditampilkan di bilah judul browser

    <title>HTML 5 Boilerplate</title>

lembar gaya CSS

Kode ini akan menautkan CSS khusus Anda ke halaman HTML.

<!DOCTYPE html>
<html lang="en">
  <head></head>
  <body></body>
</html>

5 mendefinisikan hubungan antara file HTML dan stylesheet eksternal.

    <link rel="stylesheet" href="style.css">

Tag skrip dalam HTML

Tag skrip eksternal akan ditempatkan tepat sebelum tag body penutup. Di sinilah Anda dapat menautkan kode JavaScript eksternal Anda

	<script src="index.js"></script>

Kesimpulan

Anda harus menambahkan boilerplate HTML 5 ke setiap halaman HTML Anda. Kode awal ini berisi informasi penting seperti doctype, metadata, stylesheet eksternal, dan tag skrip

Jessica Wilkins

Saya seorang musisi dan programmer

Jika Anda membaca sejauh ini, tweet ke penulis untuk menunjukkan bahwa Anda peduli. Tweet terima kasih

Belajar kode secara gratis. Kurikulum open source freeCodeCamp telah membantu lebih dari 40.000 orang mendapatkan pekerjaan sebagai pengembang. Memulai

Bagaimana cara menggunakan file template HTML?

Tag . Konten di dalam

Bagaimana cara mengimpor template HTML?

Tempel di kode HTML. Jika Anda telah menyalin kode, klik Tempel dalam kode → Tambahkan nama Template Anda → tempelkan HTML Template yang telah Anda salin → klik Impor . Anda dapat mengakses template HTML kustom Anda di halaman Template tersimpan dan sebagai template tersimpan di kampanye dan otomatisasi Anda.

Bagaimana cara menggunakan templat situs web?

Templat situs web terdiri dari tata letak halaman pra-desain yang menyederhanakan pembuatan situs web bisnis Anda. Anda telah menambahkan elemen di halaman. Anda dapat menyeret dan melepas gambar, teks, tombol, dan lainnya untuk menyesuaikan halaman sesuai kebutuhan . Anda juga dapat mengatur ulang elemen untuk membuat situs web menjadi unik.

Bagaimana cara membuka template HTML?

Untuk membuka file HTML dengan editor HTML, Anda harus memilih “File/Buka” dari menu atas dan jelajahi lokasi file HTML Anda. Another way to open file is just drag and drop it from file browser to your HTML editor window.

kode html