Jurnal Perkuliahan 3 Pemrograman Web

HTML, CCS dan Javascript

1. HTML

HTML untuk membuat struktur dan konten dokumen

HTML (HyperText Markup Language). HTML memungkinkan kita untuk menentukan struktur dokumen atau sebuah situs web. HTML BUKAN bahasa pemrograman, ini adalah bahasa markup, yang berarti tujuannya adalah untuk memberikan struktur pada konten situs web, bukan untuk mendefinisikan algoritma. Ini adalah serangkaian tag bersarang (ini adalah bagian dari XML) yang berisi semua informasi situs web (seperti teks, gambar, dan video). Berikut adalah contoh tag: 

<title>ini adalah judul</title>

HTML mendefinisikan struktur halaman. Sebuah situs web dapat memiliki beberapa HTML ke halaman berbeda. 

Aturan Dasar

Beberapa aturan tentang HTML:

• Beberapa aturan tentang HTML
• Menggunakan sintaks XML (tag dengan atribut, dapat berisi tag lain).                     <tag_name atribut="value">konten</tag_name> 
•  Menyimpan semua informasi yang harus ditampilkan kepada pengguna. 
• Terdapat elemen HTML yang berbeda untuk jenis informasi dan perilaku yang berbeda.
• Informasi disimpan dalam struktur seperti pohon (node yang berisi node di dalamnya) yang disebut DOM (Model Objek Dokumen).
• Memberikan struktur semantik pada dokumen (misalnya, ini adalah judul, ini adalah formulir) yang berguna bagi komputer untuk memahami konten situs web.
• Tidak boleh berisi informasi terkait cara menampilkannya (informasi tersebut milik CSS ), jadi tidak boleh ada informasi warna, ukuran font, posisi, dll.

Contoh Sintaksis

DOM

Interface pemrograman yang dapat membuat semua komponen dari halaman website dapat diakses dan dimanipulasi menggunakan bahasa pemrograman, sehingga dapat menampilkan website yang dinamis, menarik, dan interaktif.

Tag Utama

Meskipun ada banyak tag dalam spesifikasi HTML, 99% web menggunakan subset dari Tag HTML dengan kurang dari 10 tag, yang terpenting adalah:

• <div>: sebuah wadah, biasanya mewakili area persegi panjang dengan informasi di dalamnya. 
• <img/>: gambar 
• <a>: tautan yang dapat diklik untuk menuju ke URL lain 
• <p>: paragraf teks 
• <h1>: judul (h2,h3,h4 adalah judul yang kurang penting) 
• < input>: widget yang memungkinkan pengguna memasukkan informasi • 
• <style>: untuk memasukkan aturan CSS 
• <script>: untuk mengeksekusi Javascript 
• <span>: tag null (tidak melakukan apa pun)

Tag Menarik Lainnya 

Ada beberapa tag yang terkadang berguna: 

• <button>: untuk membuat tombol
• <audio>: untuk memutar audio 
• <video>: untuk memutar video 
• <canvas>: untuk menggambar grafik dari javascript 
• <iframe>: untuk memasukkan situs web lain ke dalam situs kami

Membungkus Info 

Menggunakan tag HTML untuk membungkus berbagai informasi di situs kami. Semakin banyak struktur informasi yang dimiliki, semakin mudah untuk mengakses dan menyajikannya. Kita dapat mengubah cara informasi ditampilkan di layar tergantung pada tag yang memuatnya, jadi kita tidak perlu khawatir menggunakan terlalu banyak tag.

2. CSS

CSS memungkinkan kita menentukan cara menyajikan (render) info dokumen yang disimpan dalam HTML. Berkat CSS kita dapat mengontrol semuanya aspek visualisasi dan beberapa fitur lainnya:

• Warna: konten, latar belakang, batas
• Margin: margin interior, margin eksterior
• Posisi: di mana meletakkannya 
• Ukuran: lebar, tinggi  
• Perilaku: perubahan saat mouse di atas

Contoh CSS

*{ 

        Warna biru; /*komentar */

        margin: 10 piksel; 

        jenis huruf: 14px Tahoma;

} 

Ini akan mengubah semua tag di web saya ( '*' artinya semua) menjadi biru dengan font Tahoma berukuran 14px, dan menyisakan margin sekitar 10px . 

bidang CSS 

Berikut adalah daftar kolom CSS yang paling umum dan contohnya: 

• color: #FF0000; merah; 
• warna rgba(255,00,100,1.0); //berbagai cara untuk menentukan warna latar belakang: merah; 
• gambar latar belakang: url('file.png'); 
• jenis huruf: 18 piksel 'Tahoma'; 
• batas: 2 piksel hitam pekat; 
• batas atas: 2px merah solid; 
• radius batas: 2px; //untuk menghilangkan sudut dan membuatnya lebih bulat 
• margin: 10px; //jarak dari batas ke elemen luar 
• padding: 2px; //jarak dari batas ke elemen dalam 
• lebar: 100%; 
• tinggi: 200 piksel; 
• perataan teks: tengah; 
• bayangan kotak: 3px 3px 5px hitam; 
• kursor: penunjuk; 
• tampilan: blok sebaris; 
• meluap: tersembunyi

CSS cara menambahkannya

Ada empat cara untuk menambahkan aturan CSS ke situs web Anda:

• Memasukkan kode ke dalam tag gaya <style> p

        { color:

                    blue } </style>

• Mereferensikan file CSS eksternal 

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

• Menggunakan atribut style pada tag <p style="color: blue; margin:

        10px">

• Menggunakan Javascript (kita akan melihatnya nanti). 

\

3. Javascript

JavaScript adalah bahasa pemrograman yang sering digunakan untuk membuat aplikasi web interaktif, animasi, dan fitur-fitur dinamis lainnya. Ini adalah salah satu bahasa pemrograman yang paling populer dan banyak digunakan di seluruh dunia., mudah untuk memulai, sulit untuk dikuasai. Memungkinkan untuk memberikan interaktivitas pada elemen di web. Sintaksnya mirip dengan C atau Java tetapi tanpa tipe. Dapat mengubah konten HTML atau CSS yang diterapkan pada suatu elemen. Bahkan dapat mengirim atau mengambil informasi dari internet untuk memperbarui konten web tanpa memuat ulang halaman.

Masukkan Kode

Ada tiga cara untuk mengeksekusi kode javascript di situs web

1. Sematkan kode dalam HTML menggunakan tag <script>

        <script> /* some code */ </script>

2. Impor file Javascript menggunakan tag <script>:

       <script src="file.js"/>

3. Menyuntikkan kode pada peristiwa di dalam tag: 

        <button onclick="javascript: /*code*/">press me</button>

Sintaks Javascript

Sangat mirip dengan C++ atau Java tetapi lebih sederhana

Contoh Javascript

    <html>

        <body>

            <h1>This is a title</h1>

            <script>

                var title = document.querySelector("h1");

                title.innerHTML = "This is another title";

            </script>

        </body>

    </html>