Rangkuman Materi Pemrograman Web Kelas X Semester Genap

Materi Pemrograman Web Kelas X Semester Genap
Kegiatan Belajar 1
Menyajikan Komponen Entri Teks
1)             Komponen text area multiline
Komponen text area merupakan area tempat untuk menyimpan text atau tulisan baru, atau bisa dikatakan sebuah komponen HTML yang digunakan untuk menampilkan text dalam bentuk dan format text.
Untuk menampung input teks yang panjang dan mungkin tersusun atas lebih dari 1 baris, maka digunakan komponen input ‘textarea’. TEXTAREA dapat digabungkan dengan tag FORM untuk menjadi inputan yang akan diolah oleh file pemroses sebagaimana seperti yang telah dijelaskan pada tag FORM tersebut.
Format umum penulisan text area multiline
<textarea atribute=”atribute”>
Ada beberapa atribut textarea :
·      Name
Digunakan untuk memberikan nama dari TEXTAREA. Atribut ini akan sangat berguna jika tag TEXTAREA digabungkan dengan tag FORM.
Contoh penulisan :
<html>
<head>
<title>cek form </title>
</head>
<body>
<p> Silahkan diisi pada teks area yang tersedia</p>
<p><textarea NAME=”papantulis” COLS=40 ROWS=6> </textarea></p>
</body>
</html>
·      Cols
Digunakan untuk menentukan lebar dari Textarea
Contoh syntax :
<html>
<head>
<title>cek form </title>
</head>
<body>
<p> Silahkan diisi pada teks area yang tersedia</p>
<TEXTAREA NAME="rendah" COLS=30 ROWS=5></TEXTAREA>
<TEXTAREA NAME="sedang" COLS=30 ROWS=10></TEXTAREA>
<TEXTAREA NAME="tinggi" COLS=30 ROWS=20></TEXTAREA>
</body>
</html>
·      Read Only
Digunakan agar tulisan yang terdapat didalam TEXT AREA hanya dapat dibaca dan disalin tapi tidak dapat diubah.
Contoh syntax :
<html>
<head>
<title>cek form </title>
</head>
<body>
<TEXTAREA NAME=”untukdibaca” COLS=40 ROWS=6 READONLY> Tulisan ini tidak dapat diubah tapi bisa disalin. </TEXTAREA>
</body>
</html>
·       Disabled
Atribut ini digunakan agar tulisan yang terdapat didalam TEXTAREA tidak dapat disalin dan diubah.
Contoh :
<html>
<head>
<title>cek form </title>
</head>
<body>
<TEXTAREA NAME=”terlarang” COLS=40 ROWS=6 DISABLED> Tulisan ini tidak dapat disalin maupun diubah. </TEXTAREA>
</body>
</html>
2)      Komponen input text password
Komponen input text password bertanggung jawab untuk memasukan data password. Disamping tipe text, terdapat pula tipe input teks yang lain, yakni ‘password’. Input tpe ‘password’ ini akan menghasilkan input dengan notasi ’●’. Biasanya input tipe ‘password’ digunakan dalam form untuk masukan kata kunci atau password dari pengguna di dalam form login.Format dari elemen input text password HTML-nya adalah sebagai berikut :
<input type=password name=name>
<input type=password name=name maxlength=length>
<input type=password name=name size=size>
<input type=password name=name value=value>
Contoh :
<!doctype html>
<html>
<head>
<title>penulisan password </title>
</head>
<body>
<form >
Password: <input type="password" name="pwd" maxlength="6">
</form>
</body>
</html>
Kegiatan Belajar 3
Memahami Anatomi dan Cara Kerja Cascading Style Sheet
1)      Definisi dan Fungsi CSS
CSS bukanlah sebuah bahasa pemrograman, melainkan sebuah aturan untuk mengendalikan beberapa komponen pada web sehingga akan lebih terstruktur, seragam dan mudah dalam pengaturan saat pendesain sebuah halaman web.
CSS merupakan sekitar pembuatan dan pengaturan style font, warna, jarak, bentuk, dan lain-lain yang tidak dapat dilakukan dengan elemen - elemen HTML.
Adanya CSS memudahkan kita untuk mengatur dan memilih sebuah website dan tampilannya karena CSS memisahkan antara bagian presentasi dan isi dari web yang dibuat.
Selain itu dengan penggunaan dari CSS dalam pembuatan web akan memberikan beberapa manfaat seperti berikut ini :
·      Kode HTML menjadi lebih sederhana dan lebih mudah diatur.
·      Ukuran file menjadi lebih kecil sehingga load file lebih cepat.
·      Mudah untuk mengubah tampilan, hanya dengan mengubah file CSS saja.
·      Dapat berkolaborasi dengan JavaScript dan merupakan pasangan setia HTML.
·      Dapat digunakan dalam hampir semua jenis web browser.
Kegiatan Belajar 5
Menyajikan Cascading Style Sheet untuk Memformat Tampilan Multimedia
1.       CSS Pada Tampilan Gambar
CSS berperan penting dalam menyajikan informasi dengan visual yang lebih baik, lebih optimal dari sisi penulisan serta lebih disenangi oleh mesin pencari. CSS dapat diterapkan hampir pada semua objek yang disisipkan dalam tag html baik itu tulisan, tabel dan gambar maupun objek lainya. Untuk mengatur gambar dapat dituliskan secara inline seperti contoh berikut :
Kegiatan Belajar 7
Menyajikan Cascading Style Sheet untuk Memformat Tampilan Form
1.     Cascading style sheet pada elemen form
Agar form terlihat lebih indah menarik serta mudah dalam pengontrolan desain salah satunya memberikan style CSS. Dibawah ini adalah style yang bisa diberikan pada elemen form diantaranya pengaturan besar dan jenis border, warna border, lebar form, batas form dari sisi layout, dan warna background dari form. Sebenarnya masih banyak style lain yang bisa diberikan ke form
Kegiatan Belajar 9
Memahami Dasar Pemrograman Web Klien
VARIABEL
 Variable adalah suatu obyek yang berisi data data, yang mana dapat dimodifikasi selama eksekusi program. Di Javascript terdapat beberapa kriteria untuk penamaan variabel, seperti ditunjukkan berikut ini. - Nama variabel harus dimulai oleh satu huruf (huruf besar maupun huruf kecil) atau satu karakter _ (garis bawah). - Nama variabel bisa terdiri dari kombinasi huruf, angka atau karakter _ dan $ (spasi kosong tidak diperbolehkan). - Nama variabel tidak boleh memakai nama-nama yang termasuk ke dalam kata kunci bahasa Javascript.
Kegiatan Belajar 11
Memahami Penerapan Struktur Kontrol Percabangan
Struktur Kontrol
Struktur kontrol merupakan konsep pemrograman dikembangkan sedemikian rupa sehingga dapat digunakan untuk menghasilkan keluaran tertentu sesuai nilai-nilai dari variabel-variabel yang ada. Struktur kontrol dapat juga diartikan sebagai rangkaian perintah yang dapat digunakan untuk mengendalikan alur dari program. Secara alur, program memiliki tiga jenis alur, yakni berurutan, berulang, dan bercabang.
Kegiatan Belajar 13
Memahami Penerapan Fungsi
Fungsi dalam pemrograman merupakan suatu mekanisme yang digunakan untuk mengelompokkan program dalam menyelesaikan suatu kasus, proses atau rumus aritmatika tertentu. Dengan pengertian yang sama pengelompokkan kode ini juga sering disebut subprogram (program bagian), prosedur ataupun metode. Dalam javascript semuanya itu disebut fungsi, karena Javascript hanya menyediakan satu kata kunci untuk membuat fungsi ini, yaitu function.
Kegiatan Belajar 15
Mengolah Interaksi User
Adanya interaktifitas dalam aplikasi akan membantu menarik minat pengguna untuk menggunakan aplikasi yang dikembangkan. Di banyak bahasa pemrograman pengolahan interaksi ini dikenal sebagai teknik penanganan event. Event dalam Javascript adalah sebuah kejadian interaksi antara user dengan halaman web. Bentuk interaksi ini dapat digambarkan seperti pada saat user melakukan klik pada tombol ataupun link, mengetik username dan password dan sebagainya.
Kegiatan Belajar 17
Format Dinamis Halaman Web
Format Dinamis Dengan Javascript
Selain karena adanya interaksi aplikasi web juga dapat lebih menarik apabila dilengkap dengan kemampuan untuk visualisasi setiap interaksi yang terjadi. Penerapan visualisasi interaksi ini dapat dilakukan dengan menggunakan CSS. Selain dapat digunakan untuk memodifikasi elemen HTML, Javascript juga dapat digunakan untuk mengubah style dari suatu elemen HTML. Pengubahan style ini dilakukan dengan menerapkan metode :
obyectHTML.style.properti = “style baru”;

Komentar

Postingan populer dari blog ini

Tutorial Cara Install Kali Linux 2.0 Dual Boot dengan Windows - Lengkap dengan Gambar

MATERI PEMROGRAMAN DASAR KELAS X TKJ