Apa hubungan antara html css dan javascript?

Halo sobat dumenity jumpa lagi di tutorial pemrograman WEB Dumetschool Pada tutorial kali ini saya akan membahas tentang hubungan antara HTML, CSS, PHP dan MYSQL. Pembahasan ini saya tampilkan khusus untuk pemula yang sedang belajar pemrograman web, kenapa demikian? . Namun bagi pemula pasti bertanya apa hubungan antara HTML, CSS, PHP dan MYSQL. Oke sekarang teman-teman yang baru belajar pemrograman web jangan bingung disini saya akan membahasnya satu persatu...

Memahami HTML, CSS, PHP dan MYSQL

HTML (Hyper Text Markup Language) adalah bahasa pemrograman yang digunakan untuk membuat kerangka atau tata letak website atau yang biasa disebut script untuk membuat tampilan website. HTML adalah bahasa pemrograman yang bersifat client side scripting, jadi HTML tidak membutuhkan server, hanya membutuhkan web browser untuk menampilkan script HTML nya.

CSS (Cascading Style Sheets) adalah bahasa pemrograman yang digunakan untuk mendesain tampilan website. CSS digunakan untuk mengatur penempatan teks, gambar, warna, ukuran font dan sebagainya di web browser. Inti dari CSS adalah membuat style website agar website kita terlihat lebih menarik dan rapi. HTML dan CSS adalah satu paket yang tidak dapat dipisahkan

PHP ( Hypertext Preprocessor ) bahasa skrip yang diperlihatkan kepada publik, atau sumber terbuka yang umum digunakan yang sangat cocok untuk pengembangan web. Bahasa pemrograman PHP digunakan untuk membuat halaman website menjadi dinamis.

MYSQL adalah software open source yang berfungsi untuk menyimpan atau menampung data. Untuk mengakses mysql kita membutuhkan bahasa SQL (Structured Query Language) seperti. PILIH, MASUKKAN, PERBARUI, HAPUS.

Hubungan antara HTML, CSS, PHP dan MYSQL

Melihat definisi di atas, dapat disimpulkan bahwa HTML dan CSS merupakan paket bahasa pemrograman yang digunakan untuk membuat tampilan website, sedangkan PHP dan MYSQL digunakan untuk membuat halaman website dinamis yang dibuat dengan HTML+CSS. PHP berfungsi sebagai penghubung antara HTML dan MYSQL. Peran PHP MYSQL dalam membangun web dinamis adalah MYSQL sebagai penampung data seperti konten yang dapat berubah dalam web dinamis, kemudian MySQL lah yang menyimpan data tersebut, sedangkan PHP digunakan untuk menghubungkan query di MySQL baik untuk menampilkan data di web atau menyimpan data di mysql

Sebagian besar halaman web yang tersedia di internet diatur dalam 3 bahasa. Ketiga bahasa tersebut adalah HTML, CSS dan Javascript. Pemahaman tentang HTML, CSS dan Javascript sangat penting dalam kegiatan blogging

HTML

HTML (Hyper Text Markup Language) adalah bahasa markup yang digunakan untuk membuat halaman web. HTML adalah markup yang digunakan untuk menentukan struktur halaman web. Ini, misalnya, membuat elemen paragraf, gambar, tautan, dan sebagainya. HTML diatur pada elemen/tag HTML

Sebagian besar halaman web adalah halaman yang dibuat dengan HTML. HTML adalah bentuk utama dari halaman web. CSS dan Javascript terletak di dalam file HTML. Halaman web dapat dibuat hanya menggunakan HTML (Tanpa CSS dan Javascript)

CSS

CSS (Cascading Style Sheet) adalah bahasa yang digunakan untuk mengatur tampilan (style) elemen HTML. Dengan CSS, kita bisa memberi warna background, border, mengatur posisi elemen, ukuran font dan sebagainya

JavaScript

Javascript adalah bahasa pemrograman (berjalan di browser web) yang digunakan untuk membuat halaman web yang lebih interaktif. Dengan javascript, kita dapat membuat banyak fitur pada halaman web. Javascript memungkinkan kita untuk mendeteksi dan menindaklanjuti perilaku pengunjung (peristiwa) di halaman web. Contoh aplikasi javascript seperti menampilkan elemen tertentu hanya pada browser tertentu, membuat fitur yang memungkinkan pengguna mengatur ukuran font pada blog, dll.

Meskipun javascript terkenal sebagai bahasa sisi klien, namun dengan perkembangan saat ini, javascript mampu bekerja di sisi server menggunakan node. js. Kami akan membahas nuansa, insya Allah

Berbicara tentang sisi klien, artinya javascript dijalankan di sisi klien dari web browser, sama seperti HTML dan CSS

Hampir semua website sekarang menggunakan javascript, silahkan cek dengan melihat sumbernya, anda pasti akan menemukan banyak js js di halaman web

Ada banyak fungsi javascript di website tersebut, diantaranya adalah
- Validasi formulir
– Menjadikan web lebih interaktif
– Memodifikasi HTML secara dinamis
- Muat konten eksternal dengan ajax tanpa memuat ulang halaman

Sama seperti CSS, ada 3 cara untuk menautkan HTML dan Javascript
1. Javascript ditempatkan sebagai atribut pada tag html/inline
2. Javascript ditempatkan di html/dokumen internal
3. Javascript ditempatkan di file tertipis sebagai file. js

Mari kita mempraktikkannya

Silahkan ketik kode html dan javascript di bawah ini

- Buat file html-javascript. html di folder "belajar-javascript".
Lokasi filenya seperti di bawah ini
C:\xampp\htdocs\belajar\belajar-javascript\html-javascript.html

<!DOCTYPE html> <html> <head> <title>Menghubungkan HTML dan Javascript - webku.com</title> <!-- javascript external, ditulis sebagai file terpisah --> <script type="text/javascript" src="script.js"></script> <script type="text/javascript"> //on document ready (function() { //dijalankan setelah halaman di load alert("Halaman diload"); })(); //fungsi alert function alertTest() { alert("Halo Guys!"); } //fungsi confirm function confirmTest() { var cfm = confirm("Apakah kamu yakin?"); if (cfm) { alert("Kamu yakin."); } else { alert("Kamu tidak yakin."); } } //prompt function promptTest() { var prm = prompt("Berapa umur kamu?", 20); alert("Umur kamu "+prm+" Tahun"); } </script> </head> <body> <div class="header"> <h1>HTML dan Javascript ternyata hubungannya mudah dipahami</h1> </div> <div class="content_block"> <h4>1. Javascript diletakkan sebagai atribut pada tag HTML / inline</h4> <!-- contoh Javascript inline didalam tag html --> <!-- harus dimulai dengan javascript: --> <p title="javascript:alert('Selamat pagi siang sore malam!');"> Saya ingin menyapamu, klik disini. </p> </div> <div class="content_block"> <h4>2. Javascript diletakkan dalam dokumen html/internal</h4> <!-- langsung dituliskan nama fungsinya --> <p> Mencoba fungsi alert, <span title="alertTest()">klik disini</span>. </p> <p> Mencoba fungsi confirm, <span title="confirmTest()">klik disini</span>. </p> <p> Mencoba fungsi prompt, <span title="promptTest()">klik disini</span>. </p> </div> <div class="content_block"> <h4>3. Javascript diletakkan di file terpisan sebagai file.js</h4> <!-- javascript external, ditulis di script.js --> <p> <b>Contoh untuk mengganti konten.</b> <br /> Namaku <span id="konten_dinamis">Ridho</span>. </p> <input type="button" name="gantikonten" value="Ganti Konten" title="gantiKonten()" /> <p> <b>Contoh untuk menambah konten.</b> <br /> <div id="tanggal"> </div> </p> <input type="button" name="tambahkonten" value="Tambah Konten" title="tambahKonten()" /> <p> <b>Contoh untuk mengganti CSS.</b> <br /> <div id="ganticss">Halo, javascript itu mudah.</div> </p> <input type="button" name="ganticss" value="Ganti CSS" title="gantiCSS()" /> </div> </body> </html>

 

Baca Juga. Mulai belajar web programming secara otodidak (part 1)

- Buat file skrip. js di folder "belajar-javascript".
Lokasi filenya seperti di bawah ini
C:\xampp\htdocs\belajar\belajar-javascript\script.js

//mengganti konten function gantiKonten() { var konten_dinamis = document.getElementById("konten_dinamis"); if (konten_dinamis.innerHTML=='Ridho') { konten_dinamis.innerHTML = "Budi"; } else { konten_dinamis.innerHTML = "Ridho"; } } //menambah konten function tambahKonten() { var tanggal = document.getElementById("tanggal"); var m = new Date(); var dateString = m.getUTCFullYear() +"/"+ (m.getUTCMonth()+1) +"/"+ m.getUTCDate() + " " + m.getUTCHours() + ":" + m.getUTCMinutes() + ":" + m.getUTCSeconds(); tanggal.innerHTML += m+"<br />"; } //mengganti CSS function gantiCSS() { var ganticss = document.getElementById("ganticss"); ganticss.style.fontSize = "25px"; ganticss.style.color = "#ff0000"; } //validasi form _

Jalankan kode di atas dengan membuka browser dan ketikkan //localhost/belajar/belajar-javascript/html-javascript.html

Hasil

html-javascript. html

Penjelasan kode-kode di atas sudah tertulis di dalamnya, tidak perlu dijelaskan lagi

Jika ada pertanyaan atau ada yang ingin disampaikan, silahkan ketik di kolom komentar di bawah

Apa hubungan antara HTML dan CSS?

Apa perbedaan antara HTML, CSS, dan JavaScript?

Apakah JavaScript dan HTML sama?

Apa hubungan antara HTML dan PHP dalam membuat website?