Cara menghubungkan HTML CSS dan JavaScript

Kembali lagi nih sama mimin, sekarang kita akan melanjutkan project pembuatan website pribadi yaa. Nah sebelumnya kita sudah membuat navbar dengan library Bootstrap 4, sekarang kita edit dengan menggunakan CSS agar tampilannya makin segar dilihat.

Sebelum kita mengedit navbar, langkah sebelumnya adalah menghubungkan file HTML kita dengan file CSS yang akan kita buat nanti.

HTML dan CSS merupakan sebuah hal yang tidak bisa dilepaskan dari sebuah web. Bagi kamu yang baru belajar HTML dan CSS, di tutorial ini akan membahas cara menghubungkan CSS dengan HTML.

Html merupakan sebuah struktur dari sebuah web, dan CSS adalah penghias dari HTML nya. Mulai dari warna, jenis font, letak ,dan lain-lain. Untuk melakukan cara ini, kamu bisa menggunakan software text editor apa saja. Karena apapun text editornya, cara penulisannya tetap sama. Pada tutorial ini menggunakan text editor dari Adobe Dreamweaver.

DAFTAR ISI

3 Metode cara menghubungkan CSS dengan HTML

  • Inline CSS
  • Embed/Internal CSS
  • Eksternal CSS

Video Tutorial

Cara Membuat CSS di HTML Dengan Inline

1. Buat elemen yang akan kamu beri style terlebih dahulu.

Cara menghubungkan HTML CSS dan JavaScript

Pada contoh di sini kita akan membuat elemen heading dengan tag h1.

2. Tambahkan atribut berikut di dalam tag heading tersebut.

<h1 style=””>Inwepo</h1>

Isikan nilai dari atribut style dengan kode CSS yang kamu mau. Berikut ini contohnya:

<h1 style=” color : red ”>Inwepo</h1>

Efeknya adalah heading bertuliskan Inwepo akan berwarna merah.

Metode ini dinamakan inline karena kode CSS dituliskan langsung didalam elemen yang akan diubah.

Cara Membuat CSS di HTML Dengan Embed/Inline CSS

1. Buat tag pembuka dan penutup style di dalam tag head.

2. Isi tag style dengan kode css yang kamu inginkan.

Cara menghubungkan HTML CSS dan JavaScript

Metode ini dinamakan embed / internal karena kode style dituliskan diluar tag body namun masih didalam file html

Cara menghubungkan css dengan html dengan eksternal css

1. Buat file document baru dengan ekstensi css

2. Tuliskan kode css didalam file ini

Cara penulisannya adalah tuliskan tag elemen yang akan kamu beri style, contohnya adalah h1 yaitu heading. Lalu beri kurung buka dan tutup (“{ }”). Tuliskan kode css yang akan kamu berikan kepada elemen h1.

Pada kali ini saya akan membagikan cara menghubungkan Javascript dengan HTML. Hal ini dapat dilakukan dengan dua cara, yang pertama ialah meletakkan script langsung di dalam HTML nya, dan yang kedua membuat file Javascipt nya secara terpisah.

JS sangat berperan penting dalam pembuatan website, karena dengan menggunakan Javascipt website akan menjadi lebih interaktif. Dan sama seperti menghubungkan HTML dengan CSS, membuat website menjadi lebih indah. Sehingga pengunjung akan merasa senang ketika mengunjungi website yang kita buat.

Dan tidak usah berlama-lama lagi, langsung saja kita peraktekkan caranya.

Menghubungkan Javascript di dalam HTML

1. Diantara tag <Head> </Head>

Buatlah sebuah file HTML dengan nama terserah di dalam sebuah folder, sebagai contoh berikut ini.

Cara menghubungkan HTML CSS dan JavaScript

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF-8″>

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

<title>Menghubungkan Javascript dengan HTML</title>

</head>

<body>

</body>

</html>

selanjutnya kita akan mengetikkan scipt Javascript di tag <Head> di dalam file HTMLnya. Kalian dapat mengetikkan <script> </script> dan diantara kode script nya dibuat tambahkan perintah Javascriptnya, contoh sebagai berikut.

Cara menghubungkan HTML CSS dan JavaScript

Kemudian isilah perintah Javascript diantara tag <script>, contoh seperti ini.

<script>

        alert(‘Selamat datang di Blog Computer Natic’);

    </script>

Dan secara keseluruhan akan seperti ini.

<!DOCTYPE html>

<html lang=“en”>

<head>

    <meta charset=“UTF-8”>

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

    <title>Menghubungkan Javascript dengan HTML</title>

    <script>

        alert(‘Selamat datang di Blog Computer Natic’);

    </script>

</head>

<body>

</body>

</html>

Jika dijalankan maka akan mengasilkan output seperti ini.

Cara menghubungkan HTML CSS dan JavaScript

2. Diantara tag <body> </body>

Caranya sama dengan cara diatas, hanya saja meletakkan sintaks Javascript nya berada di tag body, sebagai berikut.

Cara menghubungkan HTML CSS dan JavaScript

Maka hasilnya juga sama seperti berikut ini. Terdapat perbedaan dalam peletakkan tag script jika diletakkan di tag head dan tag body. Yaitu kecepatan loadnya, lebih cepat jika diletakkan di tag body dari pada di tag head, karena jika di tag head akan memakan banyak memori sehingga berpengaruh terhadap kecepatannya.

Cara menghubungkan HTML CSS dan JavaScript

Menghubungkan melalui Eksternal Javascript

Kali ini kita menghubungkan Javascript dengan HTML dengan berbeda file, yang pertama file HTML dan yang kedua file Javascript, dan berikut caranya.

Buatlah file HTML nya dengan nama tersesah.

<!DOCTYPE html>

<html lang=“en”>

<head>

    <meta charset=“UTF-8”>

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

    <title>Menghubungkan Javascript dengan HTML</title>

</head>

<body>

</body>

</html>

Kemudian buat juga file Javascriptnya dengan nama terserah juga, maka sebagai contoh saya buat serperti berikut

Cara menghubungkan HTML CSS dan JavaScript

Selanjutnya buatlah script pada HTML dan arahkan ke sumber Javascipt nya, pastikan file HTML dan Javascript nya dalam satu folder yang sama.

<script src=“eksternal.js”></script>

Makan jika dilihat secara keselurahan HTML nya sebagai berikut.

Cara menghubungkan HTML CSS dan JavaScript

Selanjutnya pada file Javascriptnya (eksternal.js), tuliskan perintah yang ingin dibuat.

alert(‘Selamat Datang di Blog Computer Natic’);

Dan simpan, kemudian jalankan HTMl nya menggunakan browser, maka hasilnya tetap sama seperti diatas.

Cara menghubungkan HTML CSS dan JavaScript

Selesai.

Dan itulah cara menghubungkan Javascript dengan HTML yang dapat dilakukan melalui internal ataupun eksternal, semoga bermanfaat. Apabila ada yang ingin ditanyakan dapat menuliskannya di kolom komentar. Terima kasih!

Apa perintah untuk menghubungkan file HTML dengan file CSS?

gunakan tag <link> untuk menghubungkan html dengan css.

Bagaimana menghubungkan HTML dengan CSS?

Ada 3 cara menghubungkan HTML dan CSS 1. css diletakkan sebagai atribut pada tag html / inline. 2. css diletakkan dalam dokumen html/internal (Tag, ID, Class). 3. css diletakkan di file terpisan sebagai file.css.

Apa hubungan JavaScript dengan HTML?

JavaScript adalah skrip pemrogramannya, HTML berfungsi untuk menyusun struktur website, dan CSS untuk mendesain serta mengatur layout halaman website. JavaScript digunakan pada web, aplikasi seluler, dan game development sehingga menjadi salah satu yang layak Anda pelajari.

Dalam elemen HTML apa kita meletakkan JavaScript?

Anda bisa langsung menambahkan JavaScript di HTML dengan menggunakan tag <script></script> yang mencakup semua kode JS yang Anda tulis. Kode JS yang bisa ditambahkan: di antara tag <head> di antara <body>