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”;
good artikel
BalasHapusMy blog
terima kasih sangat membantu dalam pemrograman
BalasHapusterimakasih
BalasHapustrimakasi karna sangat membantu
BalasHapusBetway Casino Resort & Spa - Mapyro
BalasHapusFind your way around the casino, find where everything is located with 전주 출장샵 these 순천 출장마사지 helpful 밀양 출장안마 guides. 성남 출장샵 Betway casino resort and spa in Atlantic City 속초 출장마사지 is located near the Boardwalk.