#51 menghubungkan html dengan javasript dan css
pada tutorial ini kita akan menghubungkan html dengan javasript dan css.
walaupun javascript dan css dapat di tulis ke dalam html secara langsung atau mencampurnya menjadi satu halaman.
cara yang baik dan lebih rapi adalah memisahkan antara file javascript dan css dalam file tersendiri dan memanggilnya ke dalam html.
Atribut untuk menghubungkan html
| Atribut | Detail | |
| charset | : | Menentukan pengkodean karakter dari dokumen terkait |
| crossorigin | : | Menentukan bagaimana elemen menangani permintaan dari sumber lain |
| href | : | Menentukan lokasi dokumen. |
| hreflang | : | Menentukan bahasa teks dokumen lain |
| media | : | Menentukan pada perangkat apa dokumen yang ditautkan akan ditampilkan, sering digunakan dengan memilih stylesheet berdasarkan perangkat yang dimaksud |
| rel | : | menentukan hubungan antara dokumen saat ini dengan dokumen lain |
| rev | : | Menentukan hubungan antara dokumen lain dan dokumen saat ini |
| target | : | Menentukan di mana dokumen terkait akan dimuat |
| type | : | Menentukan jenis media dari dokumen terkait |
| integrity | : | Menentukan hash berenkode base64 (sha256, sha384, atau sha512) dari sumber daya tertaut yang memungkinkan browser memverifikasi keabsahannya. |
Menghubungkan html dengan javascript
beberapa atribut dalam menghubungkan javascript dengan html
baca juga : tag meta pada HTML
Synchronous
synchronus adalah eksekusi yang dilakukan secara berurutan dari atas kebawah, menunggu satu baris selesai dahulu baru baris selanjutnya yang akan dieksekusi.
kadang banyak yang menyebutnya dengan istilah blocking.
<script src="folder/file.js"></script>Code language: HTML, XML (xml)pemanggilan javascript standar nya dengan menempatkan tag <script> sebelum tag penutup </body>.
file javascript akan di muat terakhir, setelah script diatasnya di jalankan oleh browser, sehingga situs web menjadi lebih cepat diakses dan mencegah javascript berinteraksi dengan elemen html yang belum dimuat oleh browser.
proses pemuatan halaman HTML di urai , memanggil script dan jalankan script.
Asynchronous
Asynchronous adalah proses yang dilakukan secara bersamaan tanpa harus menunggu proses antrian sebelumnya
<script async src="folder/file.js"></script>Code language: HTML, XML (xml)async merupakan atribut boolean, atribut async pada script diatas sebaiknya digunakan jika ada atribut src.
prosesnya html di urai dan menunggu script dipanggil dan dijalankan, setelah javascript selesai penguraian HTML dilanjutkan.
async bagus ketika mengintegrasikan script pihak ketiga yang independen ke dalam halaman, seperti menghitung jumlah pengunjung, iklan dan sebagainya, karena tidak bergantung pada script yang kita buat dan script tidak menunggu.
<script async src="https://google-analytics.com/analytics.js"></script>Code language: HTML, XML (xml)contoh penggunaan async pada Google Analytic
Deferred
deferred adalah atribut yang memberitahu browser untuk tidak menunggu script.
defer hampir sama seperti async tetapi defer akan di jalankan ketika penguraian HTML selesai.
<script defer src="folder/file.js"></script>Code language: HTML, XML (xml)
async akan memblokir penguraian html sementara dan mengeksekusinya, sedangkan defer tidak.
defer akan dieksekusi ketika script sudah siap semua.
contoh penggunaan defer, besar.js artinya file js nya panjang berisi banyak script dan ukurannya juga besar, sedangkan kecil.js artinya file javascriptnya sedikit .
<script defer src="folder/besar.js"></script>
<script defer src="folder/kecil.js"></script>Code language: HTML, XML (xml)browser akan memindai halaman untuk mencari script dan mendownloadnya secara paralel, untuk meningkatkan performa.
Jadi pada contoh di atas, kedua skrip diunduh secara paralel. Yang kecil.js mungkin selesai lebih dulu.
defer memastikan bahwa urutan relatif disimpan, jadi meskipun kecil.js dimuat lebih dulu, itu masih menunggu dan berjalan setelah besar.js dieksekusi
noscript
<noscript>JavaScript disabled</noscript>Code language: HTML, XML (xml)tag <noscript> digunakan jika pengguna browser yang tidak mendukung script atau memilih script disabled atau dinonaktifkan.
elemen yang ada di dalam tag <noscript> akan ditampilkan jika script di nonaktifkan.
menghubungkan html dengan css
menghubungan css ke dalam file html
Eksternal CSS
<link rel="stylesheet" href="folder/style.css">Code language: HTML, XML (xml)pengembang web biasanya menempatkan tag <link> CSS ke dalam tag <head> dibagian atas halaman HTML.
Dengan cara tersebut CSS akan dimuat terlebih dahulu dan akan diterapkan ke halaman HTML saat dimuat, cara tersebut lebih baik, daripada hanya menampilkan HTML tanpa CSS sampai menunggu CSS dimuat.
sebelum HTML5 atribut type digunakan untuk memberitahu browser bahwa script tersebut tipe dokumen text/css
<link rel="stylesheet" href="folder/css.css" type="text/css">Code language: HTML, XML (xml)sekarang atribut type tidak perlu digunakan lagi karena HTML5 mendukung CSS, cukup memanggil css seperti kode dibawah ini.
<link rel="stylesheet" href="folder/css.css">Code language: HTML, XML (xml)pemanggilan css lain bisa menggunakan @import seperti dibawah ini, walaupun kurang umum digunakan
<style type="text/css">
@import("folder/css.css")
</style>
<style>
@import("folder/css.css")
</style>Code language: HTML, XML (xml)Alternatif CSS
secara default browser akan memanggil css yang sudah kita hubungkan pertama kali, namun kita juga bisa mengganti css yang pertama di panggil dengan css lain, ini sama seperti tema website yang bisa diganti.
<link rel="alternatif stylesheet" href="folder/css/default.css" title="Tema Default">Code language: HTML, XML (xml)untuk mengubah tema halaman biasanya dapat diubah melalui pengaturan browser
kamu bisa mencobanya langsung dengan klik disini
coba buka link tersebut menggunakan firefox, jika di windows tekan tombol Alt, maka akan muncul tampilan dibawah ini.
klik Tampilan -> Gaya Laman maka akan tampil default Style
pada halaman tersebut terdapat 3 tema website , default style, sample dan insane, coba kita pilih insane maka akan tampil tema seperti dibawah ini.
pada internet explorer juga mendukung fitur alternatif css ini ( dimulai dengan versi IE 8), juga bisa diakses sama seperti firefox dengan pencet tombol Alt di windows
chrome bisa menggunakan alternatif CSS mulai versi 48 tetapi memerlukan ektensi tambahan.
kita sbenernya bisa menyediakan antarmuka tombol agar pengguna bisa beralih ke tema CSS yang telah kita buat.
Demikian tutorial menghubungkan html dengan javasript dan css, semoga bermanfaat
Pencarian di thohirdev:
- bagaimana cara menghubungkan html dengan css
- cara menghubungkan javascript dengan html
- perbedaan synchronous dan asynchronous