DESAIN DAN PENGEMBANGAN WEB

Sarjana Sains. ILMU KOMPUTER / Sarjana Sains. ILMU KOMPUTER TERAPAN

Web adalah singkatan dari World Wide Web (WWW) adalah ruang informasi di mana
dokumen dan sumber daya web lainnya yang diidentifikasi oleh Uniform Resource Locators (URL),
berinterkoneksi melalui tautan hiperteks, dan dapat diakses melalui Internet. Sumber daya web mencakup
situs web dan aplikasi web. Situs web adalah kumpulan halaman web terkait, termasuk
konten multimedia, biasanya diidentifikasi dengan nama domain yang umum, dan diterbitkan di setidaknya
satu server web. Contoh terkenal adalah [Link], [Link], dan [Link]. Sebuah Web
aplikasi (Aplikasi web) adalah program aplikasi atau perangkat lunak yang disimpan di server jarak jauh dan
disampaikan melalui Internet melalui antarmuka browser. Desain dan pengembangan web karenanya
the discipline concerned with designing and the development of web resources including
situs web dan perangkat lunak web. Dalam kursus ini, kami mempertimbangkan desain dan pengembangan situs web sementara di
ACSC 327: Pemrograman dan Administrasi Web, kita akan melanjutkan ke pengembangan web
aplikasi.
Sebuah situs web adalah kombinasi dari berbagai halaman web yang terhubung bersama dengan cara tertentu sesuai
ke kehendak desainer dan kebutuhan organisasi yang dilayani melalui server nama domain yang sama.
Situs web yang dikembangkan disiapkan dan dikelola oleh seseorang, kelompok, atau organisasi. Situs web adalah
biasanya ditulis dalam teknologi seperti HTML, XHTML, dan DHTML dan dihosting pada satu
server web untuk aksesnya melalui jaringan. Setiap situs web diberikan dengan sebuah uniform yang unik.
penanda sumber daya (URL) dan diakses melalui protokol transfer hipertext (HTTP) yang bertanggung jawab
untuk memungkinkan komunikasi antara mesin klien dan server melalui aplikasi
berbagai browser. Situs web menyediakan sumber daya hiper-media, sebuah sistem yang memungkinkan penyimpanan dan
akses ke teks, grafik, audio, dan video dalam halaman yang saling terhubung sedemikian rupa bahwa
mengintegrasikan berbagai elemen media ini. Ketika pengguna mengklik kata atau gambar yang disorot
(ikon), browser mengubah klik menjadi perintah komputer dan membawa baru yang diminta
informasi dalam bentuk teks, foto, grafik, lagu, atau cuplikan film ke komputer pengguna.
Desain web mengacu pada bagian estetika dari situs web dan kegunaannya.
mempertimbangkan pilihan warna, gambar, tata letak dan tampilan umum situs web terkait dengan
tujuan. Seorang desainer web, misalnya, akan mempertimbangkan situs web pesta dan memilih warna yang cerah
seperti kuning dan oranye daripada hitam dan abu-abu. Pengembang Web di sisi lain, mengambil sebuah
desain situs web dan benar-benar membuat situs web yang berfungsi dari itu. Pengembang web menggunakan HTML,
CSS, JavaScript, PHP dan bahasa pemrograman lainnya untuk mewujudkan file desain.
Pengembang web adalah mereka yang mengubah desain menjadi situs web yang hidup. Pengembang web menggunakan web
bahasa dan alat perangkat lunak untuk mengembangkan desain dan fungsionalitas sebuah situs web. Perhatikan bahwa
Pengembang web dibagi lagi menjadi dua sub-kategori; pengembang front-end, dan back-end
pengembang.
Seorang pengembang front-end adalah orang yang membangun antarmuka, dan menyediakan tata letak sebagai
interaksi antara belakang situs web dan pengguna. Pengembang front-end menggunakan tiga
bahasa utama; Hypertext Markup Language (HTML), Cascading Style Sheets (CSS), dan

Halaman 1 dari 68 DESAIN DAN PENGEMBANGAN WEB

JavaScript (JS). Dengan bahasa-bahasa ini, seorang pengembang dapat membuat situs web yang sepenuhnya berfungsi. Dari
tata letak desain utama, untuk memasukkan gambar, menerapkan berbagai jenis tipografi dan font
keluarga, menerapkan animasi, aliran berbagai halaman, antarmuka formulir, dan lainnya.
Pengembang back-end mirip dengan pemrogram web dan mereka adalah orang-orang yang mengontrol server.
data dan permintaan. Biasanya, sebuah situs web memerlukan layanan belakang jika mengandung data dinamis. Ini
misalnya, pengguna mengirimkan formulir dengan data pribadi (seperti membuat akun), atau
menyimpan artikel untuk halaman blog Anda. Secara umum, jika situs web memerlukan data untuk disimpan, dan
membuatnya dapat diakses di tahap selanjutnya, itu berarti juga perlu koneksi database.
Koneksi basis data dimungkinkan melalui koneksi langsung dari server itu sendiri. Dengan demikian, ...
pengembang back-end kemudian menggunakan bahasa server seperti PHP kueri basis data dengan menggunakan bahasa
seperti SQL atau MySQL. Pengembang backend dalam kasus kami adalah programmer yang membuat web
aplikasi.
Kami mempertimbangkan tiga teknologi yang digunakan dalam pengembangan front end untuk desain web dan
pengembangan. Ini adalah HTML, CSS, dan JavaScript.

HTML

HTML (Bahasa Markup Hiper Teks) adalah bahasa untuk membangun situs web. HTML bukanlah sebuah
bahasa pemrograman tetapi bahasa markup. HTML pertama kali dibuat oleh Tim Berners-Lee,
Robert Cailliau, dan yang lainnya mulai pada tahun 1989. Ini adalah singkatan dari Hyper Text Markup Language.
Hyperteks berarti bahwa dokumen tersebut mengandung tautan yang memungkinkan pembaca untuk melompat ke tempat lain di
dokumen tersebut atau dokumen lainnya sama sekali. Versi terbaru dikenal sebagai HTML5.
Bahasa Markup adalah cara di mana komputer saling berbicara untuk mengontrol bagaimana teks diproses.
dan disajikan. Untuk melakukan ini, HTML menggunakan dua hal: tag dan atribut.

Tag dan atribut adalah dasar dari HTML. Tag digunakan untuk menandai awal dari sebuah HTML
elemen dan biasanya dibungkus dalam tanda kurung sudut. Contoh tag adalah: <h1>. Sebagian besar tag
harus dibuka <h1> dan ditutup </h1> agar berfungsi.

Atribut mengandung informasi tambahan. Atribut berbentuk tag pembuka

dan informasi tambahan ditempatkan di dalamnya. Contoh dari atribut adalah:

<img src="[Link]" alt="Foto anjing saya.">

Dalam hal ini, sumber gambar (src) dan teks alt (alt) adalah atribut dari tag <img>.

Ingat:

Sebagian besar tag harus dibuka (<tag>) dan ditutup (</tag>) dengan elemen
informasi seperti judul atau teks yang terletak di antara tag.
Saat menggunakan beberapa tag, tag tersebut harus ditutup dalam urutan di mana mereka dibuka.
dibuka. Misalnya:

Halaman 2 dari 68 DESAIN DAN PENGEMBANGAN WEB

<strong><em>Ini benar-benar penting!</em></strong>

Editor HTML

Untuk membuat dokumen HTML, Anda memerlukan editor. Contoh editor adalah Notepad, Sublime Text
3, Notepad++, Komodo Edit dan Macromedia Dreamweaver.

Struktur Dasar Dokumen HTML

<!DOCTYPE html>
<html>
<head>
<title>The title of the Webpage</title>
</head>
<body>
Masukkan Konten Halaman Web Di Sini
</body>
</html>

Penjelasan tentang struktur berikut:

<! DOCTYPE...>
Tag ini mendefinisikan jenis dokumen dan versi HTML. Tag deklarasi <! DOCTYPE> adalah
digunakan oleh peramban web untuk memahami versi HTML yang digunakan dalam dokumen. Saat ini
versi HTML adalah 5 dan menggunakan deklarasi berikut −
<! DOCTYPE html>

<html>
Tag ini mengelilingi seluruh dokumen HTML dan terutama terdiri dari header dokumen
yang diwakili oleh <head>...</head> dan tubuh dokumen yang diwakili oleh
<body>...</body> tags.
<head>
Tag ini mewakili header dokumen yang dapat menyimpan tag HTML lainnya seperti <title>, <link>
dll.
<title>
Tag <title> digunakan di dalam tag <head> untuk menyebutkan judul dokumen.
<body>
Tag ini mewakili tubuh dokumen yang menyimpan tag HTML lainnya seperti <h1>, <div>, <p>
dll.
NB: Ada banyak tag lainnya tergantung pada tugas yang harus diselesaikan, dan kami akan melihatnya.
beberapa di antaranya dalam bagian-bagian yang mengikuti.

Halaman 3 dari 68 DESAIN DAN PENGEMBANGAN WEB

Contoh
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Ini adalah judul</h1>
<p>Halo Dunia!</p>
</body>
</html>

Tag Dasar
Tag Judul
Setiap dokumen dimulai dengan judul. Anda dapat menggunakan ukuran yang berbeda untuk judul Anda. HTML juga
memiliki enam tingkat judul, yang menggunakan elemen <h1>, <h2>, <h3>, <h4>, <h5>, dan <h6>.
Saat menampilkan judul apa pun, browser menambahkan satu baris sebelum dan satu baris setelah judul tersebut.

<!DOCTYPE html>
<html>
<kepala>
<title>Heading Example</title>
</head>
<body>
<h1>Ini adalah judul 1</h1>
<h2>Ini adalah judul 2</h2>
<h3>Ini adalah judul 3</h3>
Ini adalah judul 4
<h5>Ini adalah judul 5</h5>
<h6>Ini adalah heading 6</h6>
</body>
</html>
Tag Paragraf

Halaman 4 dari 68 DESAIN DAN PENGEMBANGAN WEB

Tag <p> menawarkan cara untuk menyusun teks Anda ke dalam berbagai paragraf. Setiap paragraf teks
harus berada di antara tag pembuka <p> dan tag penutup </p>
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<p>Ini adalah paragraf pertama dari teks.</p>
<p>Ini adalah paragraf kedua dari teks.</p>
<p>Ini adalah paragraf ketiga teks.</p>
</body>
</html>
Tag Pemisah Baris
Setiap kali Anda menggunakan elemen <br />, apa pun yang mengikutinya dimulai dari baris berikutnya. Tag ini adalah
contoh elemen kosong, di mana Anda tidak memerlukan tag pembuka dan penutup, karena ada
tidak ada yang bisa masuk di antara mereka.

Tag <br /> memiliki spasi antara karakter br dan garis miring. Jika Anda menghilangkan spasi ini,
peramban yang lebih lama akan mengalami kesulitan dalam merender pemisah baris, sementara jika Anda melewatkan garis miring ke depan
character and just use <br> it is not valid in XHTML.
<kepala>
<title>Line Break Example</title>
</head>
<body>
Halo
Ini adalah Tugas HTML.<br />
HTML memungkinkan kita untuk membuat situs web<br />

Saya suka menulis konten HTML

</body>
</html>
Garis Horizontal

Halaman 5 dari 68 DESAIN DAN PENGEMBANGAN WEB

Garis horizontal digunakan untuk memecah bagian-bagian dokumen secara visual. Tag <hr> membuat garis
dari posisi saat ini dalam dokumen ke margin kanan dan memecah baris sesuai kebutuhan.
For example, you may want to give a line between two paragraphs.
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Line Example</title>
</head>
<body>
<p>Ini adalah paragraf satu dan seharusnya di atas</p>

<hr />
<p>Ini adalah paragraf dua dan harus berada di bagian bawah</p>

</body>
Ruang Tanpa Pemutusan
Dalam kasus di mana Anda tidak ingin browser klien memutuskan teks, Anda harus menggunakan nonbreaking
entitas ruang &nbsp; alih-alih ruang normal.
<!DOCTYPE html>
<html>
<head>
<title>Nonbreaking Spaces Example</title>
</head>
<body>
<p>HTML adalah lingkungan pengembangan web yang cukup luar biasa</p>
</body>
</html>
Font
<!DOCTYPE html>
<html>
<head>

Halaman 6 dari 68 DESAIN DAN PENGEMBANGAN WEB

 <title>Font Formatting</title>
</kepala>
<badan>
<font color="#993300">Menampilkan Warna Font</font><br />
<font size="12">Ukuran Font 12</font><br />
<font size="+6">Font yang enam kali lebih tinggi dari ukuran font saat ini</font><br />
<font size="-3">Font yang tiga kali lebih besar daripada ukuran font saat ini</font><br />

<font face="Times New Roman, Times, serif">Wajah font</font><br />

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>Setting Basefont Color</title>
</head>
<body>
<basefont face = "arial, verdana, sans-serif" size = "2" color = "#ff0000">
<p>Ini adalah font default halaman.</p>
<h2>Contoh Elemen &lt;basefont&gt;</h2>
<p><font size = "+2" color = "abu-abu tua">
Ini adalah teks abu-abu gelap dengan dua ukuran lebih besar

</font>
</p>
<p><font face = "courier" size = "-1" color = "#000000">
Ini adalah font pengantar, ukuran lebih kecil dan berwarna hitam.

</font>
</p>

Halaman 7 dari 68 DESAIN DAN PENGEMBANGAN WEB

 </body>
</html>
Pemformatan Font
<!DOCTYPE html>
<html>
<kepala>
<title>Font Formatting</title>
</head>
<body>
<b>Teks Tebal</b><br />
<i>Teks Miring</i><br />
<u>Teks Bergaris Bawah</u><br />

2^ndnd<br />
h₂0<br />
<strike>teks dicoret</strike><br />
<big>Teks yang ukurannya satu lebih besar dari yang mengelilinginya</big><br />

<small>Teks yang satu ukuran lebih kecil daripada yang mengelilinginya</small><br />

Di bawah ini adalah garis horizontal

<hr />
</body>
</html>

Daftar
Ada tiga jenis daftar dalam HTML:
i. daftar tidak terurut (titik) —digunakan untuk mengelompokkan serangkaian item terkait tanpa urutan tertentu
ii. daftar terurut (penomoran) — digunakan untuk mengelompokkan sekumpulan item yang terkait dalam urutan tertentu
iii. daftar deskripsi—digunakan untuk menampilkan pasangan nama/nilai seperti istilah dan definisi

Daftar Tidak Terurut

Halaman 8 dari 68 DESAIN DAN PENGEMBANGAN WEB

Daftar tak terurut adalah kumpulan item terkait yang tidak memiliki urutan atau susunan khusus. Daftar ini
dibuat dengan menggunakan tag HTML <ul>. Setiap item dalam daftar ditandai dengan sebuah titik.

Anda dapat menggunakan atribut type untuk tag <ul> untuk menentukan jenis peluru yang Anda suka. Secara default, itu adalah
diskusi. Berikut adalah opsi yang mungkin -
<ul type="square">
<ul type = "disc">
<ul type = "lingkaran">

Daftar Terurut
Jika Anda diharuskan untuk menempatkan item Anda dalam daftar bernomor sebagai ganti poin, maka HTML terurut
daftar akan digunakan. Daftar ini dibuat dengan menggunakan tag <ol>. Penomoran dimulai dari satu dan adalah
ditingkatkan satu untuk setiap elemen daftar terurut berikutnya yang ditandai dengan <li>.

Anda dapat menggunakan atribut type untuk tag <ol> untuk menentukan jenis penomoran yang Anda inginkan. Secara default, itu adalah
sebuah angka. Berikut adalah opsi yang mungkin -
<ol type = "1"> - Angka Kasus Default.
<ol type = "I"> - Angka Huruf Besar.
<ol type = "i"> - Angka Huruf Kecil.
<ol type = "A"> - Upper-Case Letters.
<ol type = "a"> - Huruf Kecil.
Anda dapat menggunakan atribut start untuk tag <ol> untuk menentukan titik awal penomoran yang Anda butuhkan.
Following are the possible options −
<ol type = "1" start = "4"> - Angka dimulai dengan 4.
<ol type = "I" start = "4"> - Angka dimulai dengan IV.
<ol type = "i" start = "4"> - Angka dimulai dengan iv.
<ol type = "a" start = "4"> - Huruf yang dimulai dengan d.

<ol type = "A" start = "4"> - Huruf yang dimulai dengan D.

Daftar Definisi
HTML mendukung gaya daftar yang disebut daftar definisi di mana entri dicantumkan seperti dalam
kamus atau ensiklopedia. Daftar definisi adalah cara yang ideal untuk menyajikan glosarium, daftar istilah,
atau daftar nama/nilai lainnya.

Daftar definisi menggunakan tiga tag berikut.

<dl> − Menentukan awal dari daftar

Halaman 9 dari 68 DESAIN DAN PENGEMBANGAN WEB

− Sebuah istilah

<dd> − Term definition

</dl> − Menentukan akhir dari daftar

Contoh
<html>
<head>
<title>Lists in HTML</title>
</kepala>
<body>
<ul type="square">
<li>roti</li>
<li>biji kopi</li>
<li>susu</li>
<li>mentega</li>
</ul>
<ol type="i" start="5">
<li>Kumpulkan bahan-bahan</li>
<li>Campurkan bahan-bahan bersama</li>

<li>Tempatkan bahan-bahan dalam loyang</li>

<li>Panggang di oven selama satu jam</li>

<li>Angkat dari oven</li>

<li>Biarkan berdiri selama sepuluh menit</li>

<li>Sajikan</li>
</ol>
<dl>
<dt>ACSC 226</dt>
Desain dan Pengembangan Web

Halaman 10 dari 68 DESAIN DAN PENGEMBANGAN WEB

 <dt>Nama</dt>
<dd>Nilai</dd>
COSC 103
<dd>Pengenalan Aplikasi Komputer</dd>
</dl>
</body>
</html>
Tautan
Sebuah halaman web dapat berisi berbagai tautan yang mengarahkan Anda langsung ke halaman lain dan bahkan bagian tertentu.
dari halaman tertentu. Tautan ini dikenal sebagai hyperlink. Hyperlink memungkinkan pengunjung untuk menavigasi
antara situs web dengan mengklik kata, frasa, dan gambar. Dengan demikian Anda dapat membuat tautan
menggunakan teks atau gambar yang tersedia di halaman web.

Sebuah tautan ditentukan menggunakan tag HTML <a>. Tag ini disebut tag jangkar dan apa pun di antara
tag pembuka <a> dan tag penutup </a> menjadi bagian dari tautan dan pengguna dapat mengklik bagian itu
untuk mengakses dokumen yang terhubung.

<! DOCTYPE html>

<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<p>Klik tautan berikut</p>
<a href = "[Link] target = "_self"> Situs Web Universitas Chuka</a>
</body>
</html>
Atribut target digunakan untuk menentukan lokasi di mana dokumen yang terhubung dibuka. Berikut ini
apakah opsi yang mungkin -
_blank (Membuka dokumen terkait di jendela atau tab baru.)
_self (Membuka dokumen yang terhubung di frame yang sama.)

_parent (Membuka dokumen yang terhubung di bingkai utama.)

Halaman 11 dari 68 DESAIN DAN PENGEMBANGAN WEB

_top (Membuka dokumen yang terhubung di seluruh jendela.)
_targetframe (Membuka dokumen yang terhubung dalam targetframe bernama.)

Mahasiswa untuk meneliti cara menghubungkan ke bagian yang berbeda di halaman yang sama. Juga meneliti tentang
tautan email, dan tautan gambar.
Gambar
Gambar juga dikenal sebagai Grafik atau Foto. Gambar meningkatkan penampilan visual situs web.
halaman dengan membuatnya lebih menarik dan berwarna. Tag <img> digunakan untuk menyisipkan gambar di
dokumen HTML. Ini adalah elemen kosong dan hanya mengandung atribut. Sintaks dasar dari
tag <img> dapat diberikan dengan:
<img src="url" alt="some_text">
Setiap gambar harus memiliki setidaknya dua atribut: atribut src, dan atribut alt. Atribut src
atribut memberi tahu browser di mana menemukan gambar. Nilainya adalah URL dari file gambar.
Sedangkan, atribut alt menyediakan teks alternatif untuk gambar, jika gambar tersebut tidak tersedia atau tidak dapat.
be displayed for some reason. Its value should be a meaningful substitute for the image. The
atribut lebar dan tinggi digunakan untuk menentukan lebar dan tinggi gambar. Nilai-nilai dari
atribut ini diinterpretasikan dalam piksel secara default.

<img src="[Link]" alt="logo universitas chuka" width="300" height="300">

Meja
Tabel HTML memungkinkan Anda untuk mengatur data dalam baris dan kolom. Mereka umumnya digunakan untuk
tampilkan data berbentuk tabel seperti daftar produk, detail pelanggan, laporan keuangan, dan lain-lain. Sebuah tabel
juga dapat digunakan untuk mendefinisikan struktur / tata letak dari formulir HTML.

Anda dapat membuat tabel menggunakan elemen <table>. Di dalam elemen <table>, Anda dapat menggunakan
<tr> elemen untuk membuat baris, dan untuk membuat kolom di dalam baris, Anda bisa menggunakan elemen <td>.
Anda juga dapat mendefinisikan sebuah sel sebagai header untuk sekelompok sel tabel menggunakan elemen <th>.
Secara default, judul tabel dicetak tebal dan disusun di tengah.

Jika Anda tidak menentukan batas untuk tabel, itu akan ditampilkan tanpa batas. Sebuah batas diatur
menggunakan properti batas.
Spanning memungkinkan Anda untuk memperluas baris dan kolom tabel di seluruh baris dan kolom lainnya.
Normalnya, sel tabel tidak bisa melampaui ruang di bawah atau di atas sel tabel lain. Tetapi, Anda
dapat menggunakan atribut rowspan atau colspan untuk mencakup beberapa baris atau kolom dalam sebuah tabel.

Padding sel menentukan ruang antara konten sel dan batasnya. Jika Anda tidak menentukan sebuah
padding, sel-sel tabel akan ditampilkan tanpa padding. Untuk mengatur padding, gunakan
properti cellpadding.
Jarak border menentukan ruang antara sel. Untuk mengatur jarak border untuk tabel, gunakan
properti cellspacing.

Halaman 12 dari 68 DESAIN DAN PENGEMBANGAN WEB

Anda dapat menentukan keterangan (atau judul) untuk tabel Anda menggunakan elemen <caption>. Elemen <caption>
elemen harus ditempatkan langsung setelah tag pembuka <table>. Secara default, caption muncul di
atas meja.
<html>
<head>
<title>Tables in HTML</title>
</head>
<body>
<table border align="center" width="70%">
<tr>
<th colspan="2">Universitas Chuka</th>
</tr>
<tr>
<th>Kode Kursus</th>
<th>Course Name</th>
</tr>
<tr>
<td>ACSC 226</td>
<td>Desain dan Pengembangan Web</td>
</tr>
<tr>
<td>ACSC 327</td>
Pemrograman Web dan Administrasi
</tr>
<tr>
<td>COSC 280</td>
<td rowspan="2">&nbsp;</td>
</tr>
<tr>

Halaman 13 dari 68 DESAIN DAN PENGEMBANGAN WEB

<td>&nbsp;</td>
</tr>
</tabel>
</body>
</html>
Formulir HTML

Formulir HTML diperlukan untuk mengumpulkan berbagai jenis masukan pengguna, seperti rincian kontak seperti
nama, alamat email, nomor telepon, atau detail seperti informasi kartu kredit, dll.
Formulir mengandung elemen khusus yang disebut kontrol seperti kotak masukan, kotak centang, tombol radio, pengiriman
tombol, dll. Pengguna umumnya menyelesaikan formulir dengan memodifikasi kontrolnya misalnya memasukkan teks,
memilih item, dll. dan mengirimkan formulir ini ke server web untuk proses lebih lanjut.
Tag HTML <form> digunakan untuk membuat formulir HTML dan memiliki sintaksis berikut −

<form action = "URL Skrip" method = "GET|POST">

form elements like input, textarea etc.
</form>
Selain atribut umum, berikut adalah daftar atribut formulir yang paling sering digunakan −
Aksi - Skrip backend siap untuk memproses data yang Anda berikan.
Metode - Metode yang akan digunakan untuk mengunggah data. Yang paling sering digunakan adalah GET dan POST
metode.
Target - Tentukan jendela atau bingkai target di mana hasil dari skrip akan ditampilkan. Itu
mengambil nilai seperti _blank, _self, _parent, dll.

Enctype - Anda dapat menggunakan atribut enctype untuk menentukan bagaimana browser mengodekan data sebelum
itu mengirimkannya ke server. Nilai yang mungkin adalah

Aplikasi/x-www-form-urlencoded− Ini adalah metode standar yang digunakan sebagian besar formulir dalam sederhana
skenario.
Multipart/form-data − Ini digunakan ketika Anda ingin mengunggah data biner dalam bentuk file seperti
gambar, file kata dll.

Kontrol Formulir HTML

Ada berbagai jenis kontrol formulir yang dapat Anda gunakan untuk mengumpulkan data menggunakan formulir HTML:

Kontrol Input Teks

Kontrol Checkbox
Halaman 14 dari 68 DESAIN DAN PENGEMBANGAN WEB
 Kontrol Kotak Radio
Kontrol Kotak Pilihan
Kotak Pilih Berkas
Kontrol Tersembunyi
Tombol yang Dapat Diklik
Tombol Kirim dan Reset

Kontrol Input Teks

Ada tiga jenis input teks yang digunakan pada formulir -

Kontrol input teks satu baris− Kontrol ini digunakan untuk item yang hanya memerlukan satu baris
input pengguna, seperti kotak pencarian atau nama. Mereka dibuat menggunakan tag HTML <input>.
Kontrol masukan kata sandi − Ini juga merupakan masukan teks satu baris tetapi menyembunyikan karakter.
segera setelah pengguna memasukkannya. Mereka juga dibuat menggunakan tag HTMl <input>.

Kontrol input teks multi-baris− Ini digunakan ketika pengguna diminta untuk memberikan rincian yang
mungkin lebih panjang dari satu kalimat. Kontrol input multi-baris dibuat menggunakan
HTML<textarea>tag.

Kontrol masukan teks satu baris

Kontrol ini digunakan untuk item yang hanya memerlukan satu baris input dari pengguna, seperti kotak pencarian atau
nama. Mereka dibuat menggunakan tag HTML <input>.

Kontrol input kata sandi

Ini juga merupakan masukan teks satu baris tetapi akan menyembunyikan karakter segera setelah pengguna memasukkannya. Mereka adalah
juga dibuat menggunakan tag HTML <input> tetapi atribut tipe diatur ke password.
Berikut adalah daftar atribut untuk tag <input> untuk membuat bidang teks.
tipe - Menunjukkan jenis kontrol input dan untuk kontrol input teks itu akan diatur ke teks.
name - Used to give a name to the control which is sent to the server to be recognized and get the
nilai.
value - This can be used to provide an initial value inside the control.
ukuran - Memungkinkan untuk menentukan lebar kontrol input teks dalam hal karakter.
maxlength - Memungkinkan untuk menentukan jumlah karakter maksimum yang dapat dimasukkan pengguna ke dalam teks
kotak.

Kontrol Input Teks Beberapa Baris

Halaman 15 dari 68 DESAIN DAN PENGEMBANGAN WEB

Ini digunakan ketika pengguna diminta untuk memberikan rincian yang mungkin lebih panjang dari satu kalimat.
Kontrol input multi-baris dibuat menggunakan tag HTML <textarea>.

nama - Digunakan untuk memberikan nama pada kontrol yang dikirim ke server untuk dikenali dan mendapatkan
nilai.

rows- Menunjukkan jumlah baris pada kotak teks area.

cols- Menunjukkan jumlah kolom dari area teks

<html>
<head>
<title>Text Form Controls</title>
</kepala>
<body>
<form action=" " method="post">
UserName:
<input type="text" name="txtUserName" /><br />
Password:
<input type="password" name="txtPassword"/><br />
Description : <br />
<textarea rows = "5" cols = "50" name = "description">
Masukkan deskripsi di sini...

</textarea>
</form>
</body>
</html>
Kontrol Checkbox
Kotak centang digunakan ketika lebih dari satu opsi perlu dipilih. Mereka juga dibuat
menggunakan tag HTML <input> tetapi atribut tipe diatur ke checkbox.

Berikut adalah daftar atribut untuk tag <checkbox>.

tipe- Menunjukkan jenis kontrol input dan untuk kontrol input kotak centang akan diatur ke
kotak centang..

Page 16 of 68 DESAIN DAN PENGEMBANGAN WEB

nama- Digunakan untuk memberikan nama pada kontrol yang dikirim ke server untuk dikenali dan mendapatkan
nilai.
value- The value that will be used if the checkbox is selected.
checked- Set to checked if you want to select it by default.
<!DOCTYPE html>
<html>
<kepala>
<title>Checkbox Control</title>
</head>

<body>
<form method="post" action="">
<input type = "checkbox" name = "chkmaths" value = "on"> Maths
<input type = "checkbox" name = "chkphysics" value = "on"> Fisika
</form>
</body>
</html>
Kontrol Tombol Radio
Tombol radio digunakan ketika dari banyak pilihan, hanya satu pilihan yang perlu dipilih.
Mereka juga dibuat menggunakan tag HTML <input> tetapi atribut tipe diatur ke radio.
Berikut adalah daftar atribut untuk tombol radio.
tipe - Menunjukkan jenis kontrol input dan untuk kontrol input checkbox akan diatur ke radio.
nama- Digunakan untuk memberi nama pada kontrol yang dikirim ke server untuk dikenali dan mendapatkan
nilai.
value- The value that will be used if the radio box is selected.
checked- Set to checked if you want to select it by default.
<!DOCTYPE html>
<html>
<head>

Halaman 17 dari 68 PERANCANGAN DAN PENGEMBANGAN WEB

 <title>Radio Box Control</title>
</head>
<body>
<form method="post" action="">
<input type = "radio" name = "subject" value = "radiomaths"> Maths
<input type = "radio" name = "subject" value = "radiophysics"> Physics
</form>
</body>
</html>

Kontrol Kotak Pilihan

Kotak pilih, juga disebut kotak jatuh, yang memberikan opsi untuk mencantumkan berbagai opsi dalam
bentuk daftar drop down, dari mana pengguna dapat memilih satu atau lebih opsi.
Berikut adalah daftar atribut penting untuk tag <select>:
nama - Digunakan untuk memberikan nama pada kontrol yang dikirim ke server untuk dikenali dan mendapatkan
nilai.
ukuran - Ini dapat digunakan untuk menampilkan kotak daftar yang dapat digulir.

multiple - Jika diatur ke 'multiple', maka memungkinkan pengguna untuk memilih beberapa item dari menu.

The following is the list of important attributes for the <option> tag:
value- The value that will be used if an option in the select box box is selected.
selected- Specifies that this option should be the initially selected value when the page loads.
label- An alternative way of labeling options

<!DOCTYPE html>
<html>
<kepala>
<title>Select Box Control</title>
</head>

Halaman 18 dari 68 DESAIN DAN PENGEMBANGAN WEB

 <body>
<form method="post" action="">
<select name = "seldropdown">
<option value = "Maths" selected>Maths</option>
<option value = "Physics">Physics</option>
</select>
</form>
</body>
</html>
Kotak Unggah File
Jika Anda ingin mengizinkan pengguna untuk mengunggah berkas ke situs web Anda, Anda perlu menggunakan unggahan berkas
kotak, juga dikenal sebagai kotak pemilih file. Ini juga dibuat menggunakan elemen <input> tetapi tipe
atribut diatur ke file.
Berikut adalah daftar atribut penting dari kotak unggah file −
nama - Digunakan untuk memberi nama pada kontrol yang dikirim ke server untuk dikenali dan mendapatkan
nilai.
accept- Menentukan jenis file yang diterima oleh server.

<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form method="post" action="">
<input type = "file" name = "fileupload" accept = "image/*" />
</form>
</body>

Halaman 19 dari 68 DESAIN DAN PENGEMBANGAN WEB

</html>
Kontrol Tombol
Ada berbagai jenis tombol yang dapat diklik dalam formulir HTML. Ini termasuk:
kirim - Ini membuat tombol yang secara otomatis mengirimkan formulir.
reset - Ini membuat sebuah tombol yang secara otomatis mengatur ulang kontrol formulir ke nilai awalnya.

button- This creates a button that is used to trigger a client-side script when the user clicks that
tombol.
gambar - Ini membuat tombol yang dapat diklik tetapi kita bisa menggunakan gambar sebagai latar belakang tombol

<html>
<kepala>
<title>Buttons in HTML Forms</title>
</kepala>
<body>
<form method="post" action="">
<input type = "submit" name = "btnsubmit" value = "Submit" />
<input type = "reset" name = "btnreset" value = "Reset" />
<input type = "button" name = "btnok" value = "OK" />
<input type = "image" name = "btnimagebutton" src = "[Link]" />
</form>
</body>
</html>
Hidden Form Controls
Kontrol formulir tersembunyi digunakan untuk menyembunyikan data di dalam halaman yang kemudian dapat didorong ke
server. Kontrol ini tersembunyi di dalam kode dan tidak muncul di halaman sebenarnya. Misalnya,
formulir tersembunyi berikut digunakan untuk menyimpan nomor halaman saat ini. Ketika seorang pengguna mengklik berikutnya
halaman kemudian nilai kontrol tersembunyi akan dikirim ke server web dan di sana akan memutuskan yang mana
halaman akan ditampilkan berikutnya berdasarkan halaman saat ini yang diteruskan.

<html>
<kepala>
<title>File Upload Box</title>

Halaman 20 dari 68 DESAIN DAN PENGEMBANGAN WEB

 </head>
<body>
<form method="post" action="">
Ini adalah halaman 10
<input type = "hidden" name = "pagename" value = "10" />
<input type = "submit" name = "btnsubmit" value = "Submit" />
<input type = "reset" name = "btnreset" value = "Reset" />
</form>
</body>
</html>.

CSS
CSS adalah singkatan dari Cascading Style Sheets. CSS bekerja dengan HTML dan Markup lainnya.
Bahasa (seperti XHTML dan XML) untuk mengatur cara penyajian konten. Cascading
Style Sheets memungkinkan untuk memisahkan penampilan sebuah halaman web dari konten sebuah halaman web.
CSS adalah rekomendasi dari World Wide Web Consortium (W3C) untuk mendefinisikan
presentasi dan tampilan sebuah situs web. Untuk mencapai ini, CSS menggunakan gaya yang disajikan
dalam lembar gaya.
Keuntungan CSS dalam Desain dan Pengembangan Web
Meningkatkan kecepatan unduh - Dalam sebuah halaman web yang tidak menggunakan CSS, penataan dicapai
menggunakan tag format yang pada dasarnya membebani konten HTML. HTML adalah
ditujukan untuk konten bukan untuk tampilan. Penggunaan CSS di website mengurangi 'kekacauan' HTML
oleh karena itu mengompresi file-file tersebut,

Mengurangi waktu yang dihabiskan untuk memelihara situs web

Situs web yang lebih seragam

Sebuah lembar gaya terdiri dari satu atau lebih aturan yang menggambarkan bagaimana elemen dokumen harus
ditampilkan. Setiap aturan dalam CSS memiliki dua bagian: pemilih dan deklarasi; dan deklarasi
juga memiliki dua bagian, properti dan nilai. Pemilih mendefinisikan elemen HTML mana pun untuk mana
perubahan dianggap perlu misalnya badan, p, tabel, th, hr, dll. Deklarasi berisi properti
dan nilai untuk pemilih. Properti adalah atribut yang ingin Anda ubah dan setiap properti dapat
take a value. The property and value are separated by a colon and surrounded by curly braces:
Contoh aturan dan bagian komponen dari lembar gaya CSS ditunjukkan di bawah ini:

Halaman 21 dari 68 WEB DESIGN AND DEVELOPMENT

Contoh
body { background-color: hitam }
Jika nilai suatu properti lebih dari satu kata, beri tanda kutip di sekitar nilai tersebut:

body { font-family: "sans serif"; }

If you wish to specify more than one property, you must use a semi-colon to separate each
properti. Aturan ini mendefinisikan paragraf yang akan memiliki teks berwarna biru yang terpusat.

p { text-align: center; color: blue }

Anda dapat mengelompokkan pemilih. Pisahkan setiap pemilih dengan koma. Contoh di bawah ini mengelompokkan
header 1, 2, dan 3 dan membuat semuanya berwarna kuning.

h1, h2, h3 { color: yellow}

Contoh Lain
Contoh 1
h1, h2, h3 {
font-weight : tebal;
font-family : arial;
color : #000000;
warna-latar : #FFFFFF;

Halaman 22 dari 68 DESAIN DAN PENGEMBANGAN WEB

}
Example 2
tubuh {
warna:#000000;
warna latar belakang : #ffffff;

font-family : arial, verdana, sans-serif;

}
Contoh 3
h1 {
ukuran-font : 18px;
}
p{
ukuran-font : 12px;
}
Contoh 4
table {
background-color : #efefef;
border-style : solid;
lebar-batas : 1px;
border-color : #999999;
}
Contoh 5
th {
warna-latar belakang : #cccccc;

font-weight : tebal;
padding : 5px;
}
Contoh 6

Halaman 23 dari 68 DESAIN DAN PENGEMBANGAN WEB

 p{
font-family: "Times New Roman", Times, serif;
}
Properti font-style sebagian besar digunakan untuk menentukan teks miring

h1 {
ukuran-font: 40px;
}

h2 {
ukuran-font: 30px;
}

p{
ukuran-font: 14px;
}

Contoh 7
[Link] {
font-weight: normal;
}

[Link] {
font-weight: tebal;
}
Contoh 8
body {
warna: biru;
}

h1 {
warna: hijau;
}
Contoh 9
h1 {
tulisan-ajar: tengah;
}

h2 {

Halaman 24 dari 68 DESAIN DAN PENGEMBANGAN WEB

 tegak teks: kiri;
}

h3 {
penyelarasan-teks: kanan;
}
Contoh 10
h1 {
garis hiasan: di atas;
}

h2 {
garis-garis: coret;
}

h3 {
teks-hiasan: garis bawah;
}
a{
gaya-teks: tidak ada;
}
Contoh 11
[Link] {
teks-transform: huruf besar;
}

[Link] {
ubah-teks: huruf-kecil;
}

[Link] {
text-transform: kapitalisasi;
}
Melampirkan Gaya CSS ke Pengembangan Web
Ada tiga cara untuk mengaitkan gaya dengan dokumen HTML.
First, styles can be placed inline in a document. Second, a style sheet can be embedded in the
kepala dokumen HTML. Cara ketiga untuk mengasosiasikan halaman web dengan lembar gaya adalah dengan menempatkan
tautan di bagian kepala file HTML ke lembar gaya eksternal. Dengan tautan ini, ketika browser

Halaman 25 dari 68 DESAIN DAN PENGEMBANGAN WEB

mulai membaca halaman, ia melihat tautan lembar gaya, dan mengunduh lembar gaya, kemudian menggunakan
lembar gaya untuk menggambar halaman.

Gaya CSS Inline

Aturan gaya dapat ditentukan langsung dalam tag HTML, dengan style="aturan gaya". Sebagai contoh:

<p style="font-family: trebuchet, times, serif; font-size: 20px; font-weight: 600; color:
#7C3030; warna latar belakang: #B5D6A9
Aturan gaya di atas terlihat seperti ini!

</p>
Menentukan gaya inline berguna ketika Anda hanya ingin menerapkan gaya tersebut pada elemen tertentu,
seperti yang terjadi di atas. Misalnya, jika Anda ingin menekankan sepotong teks dalam kalimat Anda,
Anda bisa menentukan gaya lokal "color: red" pada elemen <span> agar terlihat seperti ini
<span style="color: red;">sepertinya seperti ini</span>

CSS Style Sheets Internal (Tertanam)

Lembar gaya dapat disematkan ke dalam elemen <head> dokumen HTML. Untuk melakukan ini,
lembar gaya itu sendiri ditempatkan di dalam tag <style> di dalam bagian <head></head>. Gaya-gaya
yang didefinisikan dalam CSS internal berlaku untuk konten seluruh halaman web di mana itu berada
didefinisikan.
Contoh gaya CSS internal:
<head>
<style type="text/css">
hr
{
color: brown
}
p
{
font-family: Arial, verdana, "sans-serif";
}
tubuh
{

Halaman 26 dari 68 DESAIN DAN PENGEMBANGAN WEB

warna-latar: #ffffff
}
</style>
</head>
Lembar Gaya CSS Eksternal
Sebuah lembar gaya eksternal hanyalah sebuah file teks, yang berisi aturan gaya property: value. Satu-satunya
perbedaan antara isi lembar gaya eksternal dan memiliki aturan gaya Anda di
dokumen itu sendiri adalah bahwa Anda tidak menyertakan tag <style> </style>, atau tag HTML lainnya. Untuk
untuk menghubungkan dokumen HTML ke lembar gaya, Anda menempatkan tautan ke lembar gaya di bagian kepala dokumen.
Dokumen. Menghubungkan ke lembar gaya eksternal adalah ideal saat menerapkan gaya ke banyak halaman. Dengan
dengan lembar gaya eksternal, Anda dapat mengubah tampilan seluruh situs web hanya dengan mengubah satu file. Setiap
halaman harus menghubungkan ke lembar gaya menggunakan tag <link>. Tag <link> berada di dalam kepala
section:

Step 1: Create a .css file by opening Macromedia Dreamweaver Baru Halaman Dasar CSS

Step2: Call the .css external file in your webpage as needed

Halaman 27 dari 68 DESAIN DAN PENGEMBANGAN WEB

 Jenis-jenis pemilih CSS
Pemilih Tipe
<html>
<kepala>
<title>Untitled Document</title>
<style type="text/css">
h4
{
color:#6600FF
}
</style>
</head>
<body>
<h4>Judul 4</h4>
</body>
</html>
Pemilih Universal
Alih-alih memilih elemen dari jenis tertentu, pemilih universal mencocokkan nama dari sembarang
element type. This rule renders the content of every element in our document in green.
<html>
<head>
{"text":"Halaman 28 dari 68"} DESAIN DAN PENGEMBANGAN WEB
<title>Untitled Document</title>
<style type="text/css">
*
{
color: green;
}
</style>
</head>
<body>
<p>Halo</p>
<br />
<h2>Saya H2</h2>
<br />
<h4>Judul 4</h4>
</body>
</html>

Pemilih Turunan
Ini digunakan untuk menerapkan aturan gaya pada suatu elemen hanya ketika elemen tersebut berada di dalam elemen tertentu. Seperti
diberikan dalam contoh berikut, aturan gaya akan diterapkan hanya pada elemen <em> ketika berada
di dalam tag <ul>.
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
ul em
{
color: maroon;
}
</style>
</head>
<body>
<ul>
<li>
<em>Jeruk</em>
</li>
<li><em>Mangga</em></li>
</ul>
<em>Halo, saya untuk penekanan</em>

Halaman 29 dari 68 DESAIN DAN PENGEMBANGAN WEB

</body>
</html>
Pemilih Kelas
Anda dapat mendefinisikan aturan gaya berdasarkan atribut kelas dari elemen. Semua elemen yang memiliki
kelas itu akan diformat sesuai dengan aturan yang ditetapkan.
<html>
<head>
<title>Class Selectors</title>
<style type="text/css">
.merah
{
color: red;
}
</style>
</head>
<body>
<h1 class="merah">Judul 1 yang merujuk pada pemilih kelas bernama hitam</h1>
<br />
<h1> Judul 1 TIDAK merujuk pada kelas pemilih mana pun</h1>
<p class="red">Paragraf yang merujuk pada pemilih kelas</p>
</body>
</html>
Aturan ini menjadikan konten berwarna merah untuk setiap elemen dengan atribut kelas yang disetel ke merah dalam kita
dokumen
Ini bisa dibuat sedikit lebih spesifik.
<html>
<kepala>
<style type="text/css">
[Link] {
warna: biru;
}
</style>
</head>
<body>
<h1 class="blue">H1 mewarisi aturan kelas CSS tertentu</h1>
<p class="blue">Paragraph referencing the specific class. No change visible</p>
</body>
</html>
Aturan ini menghasilkan konten dalam warna biru hanya untuk elemen <h1> dengan atribut kelas yang diatur ke biru.

Halaman 30 dari 68 DESAIN DAN PENGEMBANGAN WEB

Anda dapat menerapkan lebih dari satu pemilih kelas pada elemen tertentu

<html>
<head>
<title>Many Class Selectors</title>
<style type="text/css">
.size36
{
ukuran-font:36px;
}
.decoration
{
text-decoration:garis-lewat;
}
.magenta
{
warna:magenta;
}
</style>
</head>
<body>
<p class="decoration size36 magenta">Paragraf yang merujuk pada banyak pemilih kelas css</p>
<p>paragraf tanpa gaya</p>
</body>
</html>
ID CSS
Astyle ID adalah seperangkat spesifikasi pemformatan kustom yang dapat diterapkan hanya pada satu elemen di
sebuah halaman web. Anda dapat menggunakan ID di seluruh kumpulan halaman tetapi hanya sekali per waktu di setiap halaman. Untuk
contoh, anggaplah Anda memiliki judul di dalam isi semua halaman Anda. Setiap halaman hanya memiliki satu judul,
tetapi semua halaman itu sendiri menyertakan satu contoh dari judul itu. Berikut adalah contoh dari sebuah
pemilih dengan ID yang ditunjukkan, ditambah properti dan nilai:

p#title
{
font: 24pt Verdana, Geneva, Arial, tanpa-serif
}
Perhatikan bahwa pemilih ini mencakup tanda pagar, atau tanda nomor (#), setelah p, diikuti oleh
nama ID deskriptif. Saat merujuk pada ID gaya dalam kode HTML, cukup tentukan nama ID di
atribut id dari elemen, seperti ini:
<p id=”title”>Some Title Goes Here</p>

Halaman 31 dari 68 DESAIN DAN PENGEMBANGAN WEB

Semuanya antara tag <p> pembuka dan penutup akan muncul dalam teks Verdana ukuran 24 poin—tetapi
hanya sekali di halaman yang diberikan. Anda akan sering melihat ID gaya digunakan untuk mendefinisikan bagian tertentu dari halaman
untuk tujuan tata letak, seperti area header, area footer, area tubuh utama, dan sebagainya. Jenis-jenis ini
area di halaman akan muncul hanya sekali per halaman, jadi menggunakan ID daripada kelas adalah
appropriate choice. An ID attribute identifies one element on a page. An ID selector is a name
didahului oleh karakter hash (#).
Contoh 2:
#kelas { warna: navy; border: 1px hitam solid; }
HTML ini ditulis:
<p id="class">#class { warna: laut; batas: 1px hitam padat; }</p>
Using CSS on different elements
Latar Belakang
Anda dapat mengatur properti latar belakang berikut dari sebuah elemen:

Properti background-color digunakan untuk mengatur warna latar belakang elemen.

Properti background-image digunakan untuk mengatur gambar latar dari sebuah elemen.

Properti background-repeat digunakan untuk mengontrol pengulangan gambar di dalam

latar belakang.
Properti background-position digunakan untuk mengontrol posisi gambar dalam
latar belakang.
Properti background-attachment digunakan untuk mengontrol penggulangan gambar dalam
latar belakang.
Thebackgroundproperty is used as a shorthand to specify a number of other background
properti.
Contoh
<p style="background-color:yellow;">
Teks ini memiliki warna latar belakang kuning.

</p>
<table style="background-image:url(/images/[Link]);">
<tr><td>
Tabel ini memiliki gambar latar belakang yang diatur.

</td></tr>

Halaman 32 dari 68 DESAIN DAN PENGEMBANGAN WEB

</tabel>
Contoh berikut menunjukkan cara mengatur posisi gambar latar 100 piksel jauhnya
dari sisi kiri dan 200 piksel ke bawah dari atas.
<table style="background-image:url(/images/[Link]);
background-position:100px 200px;
<tr><td>
Tabel ini memiliki gambar latar yang diposisikan 100 piksel dari kiri dan 200 piksel dari
puncak.
</td></tr>
</table>
Lampiran latar belakang menentukan apakah gambar latar belakang tetap atau menggulir bersama yang lainnya
dari halaman. Contoh berikut menunjukkan cara mengatur gambar latar belakang tetap.
<p style="background-image:url(/images/[Link]);

background-attachment:fixed;
Paragraf ini memiliki gambar latar belakang tetap.

</p>
Contoh berikut menunjukkan cara mengatur gambar latar belakang yang menggulung.
<p style="background-image:url(/images/[Link]);
background-attachment:scroll;
Paragraf ini memiliki gambar latar belakang yang menggulir.

</p>
Anda dapat menggunakan properti background untuk mengatur semua properti latar belakang sekaligus. Misalnya:

<p style="background:url(/images/[Link]) repeat fixed;"></p>

Paragraf ini memiliki gambar latar belakang yang tetap dan diulang.

</p>
Font
Properti font-family digunakan untuk mengubah wajah font.
Properti font-style digunakan untuk membuat font menjadi miring atau condong.

Properti font-variant digunakan untuk menciptakan efek huruf kecil.

Halaman 33 dari 68 DESAIN DAN PENGEMBANGAN WEB

Properti font-weight digunakan untuk meningkatkan atau mengurangi seberapa tebal atau ringan tampilan font.

Properti ukuran-font digunakan untuk meningkatkan atau mengurangi ukuran font.

Properti font digunakan sebagai singkatan untuk menentukan sejumlah properti font lainnya.

Contoh
<p style="font-family:georgia,garamond,serif;">
Teks ini ditampilkan dalam huruf georgia, garamond, atau font serif default tergantung pada yang mana
font yang Anda miliki di sistem Anda.

</p>
Contoh berikut menunjukkan bagaimana cara mengatur gaya font dari sebuah elemen. Nilai yang mungkin adalah
normal, miring dan miring.
<p style="font-style:italic;">
Contoh berikut menunjukkan cara mengatur varian font dari sebuah elemen. Nilai yang mungkin
normal dan huruf kecil.
<p style="font-variant:small-caps;">
teks ini akan ditampilkan dengan huruf kecil

</p>
Contoh berikut menunjukkan cara mengatur ketebalan font dari sebuah elemen. Ketebalan font
properti memberikan fungsionalitas untuk menentukan seberapa tebal sebuah font. Nilai-nilai yang mungkin bisa berupa
normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900.
<p style="font-weight:bold;">
Font ini tebal.
</p>
<p style="font-weight:bolder;">
Font ini lebih tebal.
</p>
<p style="font-weight:900;">
Font ini memiliki berat 900.

</p>
Contoh berikut menunjukkan cara mengatur ukuran font dari suatu elemen. Ukuran font
properti digunakan untuk mengontrol ukuran font. Nilai yang mungkin bisa adalah xx-kecil, x-kecil, kecil,
medium, large, x-large, xx-large, smaller, larger, size in pixels or in %.

Halaman 34 dari 68 DESAIN DAN PENGEMBANGAN WEB

<p style="font-size:20px;">
Ukuran font ini adalah 20 piksel

</p>
<p style="font-size:small;">
Ukuran font ini kecil
</p>
<p style="font-size:large;">
Ukuran font ini besar
</p>
Anda dapat menggunakan properti font untuk mengatur semua properti font sekaligus. Misalnya:

<p style="font:italic small-caps bold 15px georgia;">

Menerapkan semua sifat pada teks sekaligus.
</p>
Teks
Teks juga dapat dimanipulasi menggunakan properti CSS. Anda dapat mengatur properti teks berikut dari
sebuah elemen
Thecolorproperty is used to set the color of a text.
Properti direction digunakan untuk mengatur arah teks.
Properti jarak huruf digunakan untuk menambah atau mengurangi ruang antara huruf yang membentuk sebuah
kata.
Properti word-spacing digunakan untuk menambahkan atau mengurangi jarak antara kata-kata dalam sebuah kalimat.

Properti text-indent digunakan untuk mengindentasi teks dalam sebuah paragraf.

Thetext-alignproperty is used to align the text of a document.

Properti text-decoration digunakan untuk memberi garis bawah, garis atas, dan coretan pada teks.

Properti text-transform digunakan untuk mengubah huruf menjadi kapital atau mengubah teks menjadi huruf besar atau huruf kecil
surat.
Properti white-space digunakan untuk mengatur aliran dan format teks.
Properti text-shadow digunakan untuk mengatur bayangan teks di sekitar teks.

Contoh

Halaman 35 dari 68 DESAIN DAN PENGEMBANGAN WEB

Contoh berikut menunjukkan bagaimana cara mengatur warna teks. Nilai yang mungkin bisa berupa warna apa pun
nama dalam format yang valid.

<p style="color:red;">
Teks ini akan ditulis dengan warna merah.

</p>
Contoh berikut menunjukkan cara mengatur arah teks. Nilai yang mungkin adalah ltr atau
rtl.
<p style="direction:rtl;">
Teks ini akan ditampilkan dari kanan ke kiri
</p>
Contoh berikut menunjukkan cara mengatur jarak antara karakter. Nilai yang mungkin
normal atau angka yang menentukan ruang.
<p style="letter-spacing:5px;"> </p>
Textinimenganspaseantarahuf.

</p>
Contoh berikut menunjukkan cara mengatur jarak antara kata. Nilai yang mungkin adalah
normal atau angka yang menentukan ruang.

<p style="word-spacing:5px;">
Teks ini memiliki spasi di antara kata-kata.

</p>
Contoh berikut menunjukkan cara menyisipkan garis pertama dari sebuah paragraf. Nilai yang mungkin
adalah % atau angka yang menentukan ruang indentasi.

<p style="text-indent:1cm;">
Teks ini akan memiliki baris pertama yang terjepit sejauh 1cm dan baris ini akan tetap pada posisinya yang sebenarnya.
dilakukan oleh properti text-indent CSS.

</p>
Contoh berikut menunjukkan cara menyelaraskan teks. Nilai yang mungkin adalah kiri, kanan, tengah,
membenarkan.
<p style="text-align:right;">
Ini akan diratakan ke kanan.
</p>

Halaman 36 dari 68 DESAIN DAN PENGEMBANGAN WEB

<p style="text-align:center;">
Ini akan sejajar di tengah.
</p>
<p style="text-align:left;">
Ini akan rata kiri.
</p>
Contoh berikut menunjukkan bagaimana cara menghias teks. Nilai yang mungkin adalah tidak ada, garis bawah,
garis atas, garis melalui, berkedip.

<p style="text-decoration:underline;">
Ini akan digarisbawahi
</p>
<p style="text-decoration:line-through;"> </p>

Ini akan dicoret.

</p>
<p style="text-decoration:overline;">
Ini akan memiliki garis di atas.

</p>
<p style="text-decoration:blink;">
Teks ini akan memiliki efek berkedip
</p>
Contoh berikut menunjukkan cara menetapkan kasus untuk sebuah teks. Nilai yang mungkin adalah tidak ada,
kapitalisasi, huruf besar, huruf kecil.

<p style="text-transform:capitalize;">
Ini akan dituliskan dengan huruf kapital

</p>
<p style="text-transform:uppercase;">
INI AKAN DI DALAM HURUF BESAR

</p>
<p style="text-transform:lowercase;">

Halaman 37 dari 68 DESAIN DAN PENGEMBANGAN WEB

ini akan ditulis dalam huruf kecil

</p>
Contoh berikut menunjukkan cara mengatur bayangan di sekitar teks. Ini mungkin tidak
didukung oleh semua browser.
<p style="text-shadow: 4px 4px 8px biru ;">
Jika browser Anda mendukung properti teks bayangan CSS, teks ini akan memiliki bayangan biru.
Gambar
Gambar memainkan peran penting dalam halaman web mana pun. Meskipun tidak disarankan untuk menyertakan banyak
gambar, tetapi masih penting untuk menggunakan gambar yang baik di mana pun diperlukan. CSS berperan baik untuk
kontrol tampilan gambar. Anda dapat mengatur properti gambar berikut menggunakan CSS.

Properti border digunakan untuk mengatur lebar batas gambar.

Properti tinggi digunakan untuk mengatur tinggi gambar.
Properti width digunakan untuk mengatur lebar gambar.
Properti -moz-opacity digunakan untuk mengatur opasitas gambar.

Properti border dari sebuah gambar digunakan untuk mengatur lebar batas gambar. Properti ini dapat
memiliki nilai dalam panjang atau dalam %.

Lebar nol piksel berarti tidak ada batas.

<img style="border:0px;" src="/images/[Link]" />
<br />
<img style="border:3px dashed red;" src="/images/[Link]" />
Properti tinggi dari gambar digunakan untuk mengatur tinggi gambar. Properti ini dapat memiliki sebuah
nilai dalam panjang atau dalam %. Saat memberikan nilai dalam %, ini diterapkan sehubungan dengan kotak di mana sebuah
gambar tersedia.
<img style="border:1px solid red; height:100px;"
src="/images/[Link]" />
<br />
<img style="border:1px solid red; height:50%;">
src="/images/[Link]" />

Halaman 38 dari 68 DESAIN DAN PENGEMBANGAN WEB

Properti lebar dari sebuah gambar digunakan untuk mengatur lebar gambar. Properti ini dapat memiliki sebuah
nilai dalam panjang atau dalam %. Saat memberikan nilai dalam %, itu diterapkan sehubungan dengan kotak di mana sebuah
image is available.
<img style="border:1px solid red; width:100px;">
src="/images/[Link]" />
<br />
<img style="border:1px solid red; width:100%;">
src="/images/[Link]" />
Properti -moz-opacity dari sebuah gambar digunakan untuk mengatur opasitas dari gambar. Properti ini adalah
digunakan untuk membuat gambar transparan di Mozilla. IE menggunakan filter:alpha(opacity=x) untuk membuat
gambar transparan.
In Mozilla (-moz-opacity:x), x can be a value from 0.0 - 1.0. A lower value makes the element
lebih transparan (Hal yang sama berlaku untuk sintaks CSS3-valid opacity:x).
Dalam IE (filter:alpha(opacity=x)), x dapat bernilai dari 0 - 100. Nilai yang lebih rendah membuat elemen
lebih transparan.
<img style="border:1px solid red;-moz-opacity:0.4;filter:alpha(opacity=40);"
src="/images/[Link]" />
Tautan
Ada berbagai properti dari hyperlink yang dapat diatur menggunakan CSS. Misalnya, Anda dapat mengatur
sifat-sifat berikut dari hyperlink:
The:linkmenandakan hyperlink yang belum dikunjungi.

The:visitedmenunjukkan hyperlink yang telah dikunjungi.

The:hover menunjukkan elemen yang saat ini memiliki kursor mouse pengguna mengarah di atasnya.
The:aktif menunjukkan elemen yang saat ini sedang diklik oleh pengguna.
Biasanya, semua properti ini disimpan di bagian header dokumen HTML.
Ingat a:hover HARUS datang setelah a:link dan a:visited dalam definisi CSS agar bisa
efektif. Juga, a:active HARUS datang setelah a:hover dalam definisi CSS sebagai berikut:

<style type="text/css">
a:link {color: #000000}
a:visited {color: #006600}
a:hover {color: #FFCC00}

Halaman 39 dari 68 DESAIN DAN PENGEMBANGAN WEB

a:aktif {warna: #FF00CC}
</style>
<style type="text/css">
a:aktif {warna: #FF00CC}
</gaya>
<a href="/html/[Link]">Klik Tautan Ini</a>
Tabel
Border-collapse menentukan apakah browser harus mengontrol penampilan dari elemen yang berdekatan.
batas yang saling bersentuhan atau apakah setiap sel harus mempertahankan gayanya.

Jarak batas menentukan lebar yang harus muncul antara sel tabel.
Teks judul ditampilkan dalam elemen <caption>. Secara default, ini akan dirender
di atas tabel dalam dokumen. Anda menggunakan properti caption-side untuk mengontrol penempatan
judul tabel.
Sel-kosong-memastikan apakah border harus ditampilkan jika sebuah sel kosong.
Pengaturan-tabel memungkinkan peramban untuk mempercepat tata letak sebuah tabel dengan menggunakan lebar pertama
sifat yang muncul untuk sisa kolom daripada harus memuat seluruh tabel
sebelum merendernya.
Properti ini dapat memiliki dua nilai collapse dan separate. Contoh berikut menggunakan keduanya.
values:
<style type="text/css">
[Link] {border-collapse:collapse;}
[Link] {border-collapse:terpisah;}
td.a {
gaya-batas: titik;
lebar-batas:3px;
warna-batas:#000000;
padding: 10px;
}
td.b {border-style:solid;
border-lebar:3px;

Halaman 40 dari 68 DESAIN DAN PENGEMBANGAN WEB

warna-batas:#333333;
padding:10px;
}
</style>
<table class="one">
<caption>Collapse Border Example</caption>
<tr><td class="a"> Cell A Collapse Example</td></tr>
<tr><td class="b"> Contoh Keruntuhan Sel B</td></tr>
</tabel>
<br />
<table class="two">
<caption>Separate Border Example</caption>
<tr><td class="a"> Contoh Terpisah Sel A</td></tr>
<tr><td class="b"> Contoh Terpisah Sel B</td></tr>
</table>
Properti border-spacing menentukan jarak yang memisahkan batas sel-sel yang berdekatan.
dapat mengambil satu atau dua nilai; ini harus merupakan satuan panjang.
Jika Anda memberikan satu nilai, itu berlaku untuk batas vertikal dan horizontal. Atau Anda bisa menentukan
dua nilai, di mana yang pertama mengacu pada jarak horizontal dan yang kedua pada vertikal
spacing:
<style type="text/css">
/* Jika Anda memberikan satu nilai */

[Link] {border-spacing:10px;}
/* Ini adalah cara Anda dapat memberikan dua nilai */

[Link] {spasi-batas: 10px; 15px;}

</style>
Properti caption-side memungkinkan Anda untuk menentukan di mana konten elemen <caption> harus
ditempatkan dalam hubungan dengan meja. Tabel yang mengikuti mencantumkan kemungkinan nilai.
Properti ini dapat memiliki salah satu dari empat nilai: atas, bawah, kiri, atau kanan. Contoh berikut
menggunakan setiap nilai.

Halaman 41 dari 68 DESAIN DAN PENGEMBANGAN WEB

<style type="text/css">
[Link] {caption-side:atas}
[Link] {caption-side:bottom}
[Link] {caption-side:left}
Perbatasan
Properti border memungkinkan Anda untuk menentukan bagaimana batas kotak yang mewakili suatu elemen
seharusnya terlihat. Ada tiga properti dari sebuah border yang bisa Anda ubah:

Warna-batas menentukan warna dari batas.

Gaya batas menentukan apakah batas harus berupa garis padat, garis putus-putus, garis ganda, atau salah satu dari
the other possible values.
Lebar batas menentukan lebar suatu batas.

Properti border-color memungkinkan Anda untuk mengubah warna border yang mengelilingi sebuah elemen.
Anda dapat mengubah warna secara individu pada sisi bawah, kiri, atas, dan kanan dari sebuah elemen.
border menggunakan properti:
border-bottom-color mengubah warna batas bawah.
border-top-color mengubah warna batas atas.
border-left-color mengubah warna batas kiri.
border-right-colorchanges the color of right border.
<style type="text/css">
p.contoh1{
border:1px solid;
border-bottom-color:#009900; /* Hijau */
warna-batas-atas:#FF0000; /* Merah */
warna-batas-kiri:#330000; /* Hitam */
warna-tepi-kanan:#0000CC; /* Biru */
}
p.contoh2{
border:1px padat;
warna-batas:#009900; /* Hijau */

Halaman 42 dari 68 DESAIN DAN PENGEMBANGAN WEB

}
</style>
<p class="example1">
This example is showing all borders in different colors.
</p>
<p class="example2"> </p>

Contoh ini menunjukkan semua batas dengan warna hijau saja.

</p>
Properti border-style memungkinkan Anda untuk memilih salah satu dari gaya border berikut:

none:No border. (Equivalent of border-width:0;)

solid:Border adalah garis tunggal padat.
bergaris-putus: Border adalah serangkaian titik.

Garis putus-putus: Border adalah serangkaian garis pendek.

ganda: Border adalah dua garis padat.

garis: Border terlihat seolah-olah diukir ke dalam halaman.

ridge: Batas terlihat kebalikan dari alur.
inset: Border membuat kotak terlihat seolah-olah tertanam di halaman.

awal: Batas membuat kotak terlihat seolah-olah keluar dari kanvas.

hidden:Same as none, except in terms of border-conflict resolution for table elements.
Anda dapat secara individu mengubah gaya batas bawah, kiri, atas, dan kanan dari suatu elemen
menggunakan sifat-sifat berikut:
border-bottom-style mengubah gaya garis bawah.
border-top-style mengubah gaya batas atas.
border-left-style mengubah gaya batas kiri.
border-right-style mengubah gaya batas kanan.
<p style="border-width:4px; border-style:none;">
Ini adalah batas tanpa lebar.
</p>
<p style="border-width:4px; border-style:solid;">
Halaman 43 dari 68 DESAIN DAN PENGEMBANGAN WEB
Ini adalah batas yang solid.

</p>
<p style="border-width:4px; border-style:dashed;">
Ini adalah batas putus-putus.

</p>
<p style="border-width:4px; border-style:double;">
Ini adalah batas ganda.
</p>
<p style="border-width:4px; border-style:groove;"></p>

Ini adalah batas groove.

</p>
<p style="border-width:4px; border-style:ridge">
Ini adalah batas tepi.
</p>
<p style="border-width:4px; border-style:inset;">
Ini adalah batas inset.
</p>
<p style="border-width:4px; border-style:outset;">
Ini adalah batas luar.
</p>
<p style="border-width:4px; border-style:hidden;">
Ini adalah perbatasan yang tersembunyi.

</p>
<p style="border-width:4px;
border-top-style:padat;
gaya-border-bawah:putus-putus;
gaya-batas-kiri: groove;
gaya-border-kanan:ganda;'>

Halaman 44 dari 68 PENDEKATAN DAN PENGEMBANGAN WEB

Ini adalah batas dengan empat gaya berbeda.
</p>
Properti border-width memungkinkan Anda untuk mengatur lebar batas elemen. Nilai dari ini
properti dapat berupa panjang dalam px, pt, atau cm, atau harus diatur menjadi tipis, sedang, atau tebal.

Anda dapat mengubah lebar batas bawah, atas, kiri, dan kanan dari sebuah elemen secara individu
menggunakan properti berikut:
border-bottom-width mengubah lebar batas bawah.
border-top-width mengubah lebar batas atas.
border-left-width mengubah lebar batas kiri.
border-right-width mengubah lebar batas sebelah kanan.
<p style="border-width:4px; border-style:solid;">
Ini adalah batas padat yang lebarya 4px.
</p>
<p style="border-width:4pt; border-style:solid;">
Ini adalah batas padat yang lebarannya 4pt.
</p>
<p style="border-width:tipis; border-style:solid;">
Ini adalah batas padat yang lebarnya tipis.
</p>
<p style="border-width:medium; border-style:solid;">
Ini adalah batas solid dengan lebar sedang;
</p>
<p style="border-width:tebal; border-style:padat;">
Ini adalah batas padat yang lebar.
</p>
<p style="border-bottom-width:4px;
border-top-width:10px;
lebar-tepi-kiri: 2px;
border-kanan-lebar:15px;

Halaman 45 dari 68 DESAIN DAN PENGEMBANGAN WEB

border-style:solid;'>
Ini adalah batas dengan empat lebar yang berbeda.

</p>
Properti border memungkinkan Anda untuk menentukan warna, gaya, dan lebar garis dalam satu properti:

The following example shows how to use all the three properties into a single property. This is
properti yang paling sering digunakan untuk mengatur batas di sekitar elemen mana pun.

<p style="border:4px solid red;">

Contoh ini menunjukkan properti singkat untuk border.
</p>

Margin
Properti margin mendefinisikan ruang di sekitar elemen HTML. Adalah mungkin untuk menggunakan negatif
nilai untuk tumpang tindih konten. Nilai dari properti margin tidak diwariskan oleh anak
elements. Remember that the adjacent vertical margins (top and bottom margins) will collapse
saling satu sama lain sehingga jarak antara blok bukanlah jumlah dari margin, tetapi hanya
margin yang lebih besar dari dua margin atau ukuran yang sama dengan satu margin jika keduanya sama.

Kami memiliki properti berikut untuk mengatur margin elemen.

· Margin menetapkan properti singkat untuk mengatur properti margin dalam satu deklarasi.
Margin-bawah menentukan margin bawah suatu elemen.
· Themargin-topspecifies the top margin of an element.
· Margin kiri menentukan margin kiri suatu elemen.
· Themargin-rightspecifies the right margin of an element.

Halaman 46 dari 68 DESAIN DAN PENGEMBANGAN WEB

 JAVASCRIPT
JavaScript adalah bahasa skrip yang digunakan untuk skrip sisi klien untuk memberikan dinamika pada sebuah situs web.
Ini tidak terkait dengan Java. Itu dikembangkan oleh Netscape 2.0 pada tahun 1995 dan awalnya diberi nama
LiveScript. Kemudian Netscape mengubah namanya menjadi JavaScript, mungkin karena keterujaan
dihasilkan oleh Java. JavaScript adalah bahasa umum dan inti dari bahasa tersebut
telah disematkan di Netscape, Internet Explorer, dan browser web lainnya.
There are many reasons why a Web Developer may benefit from by inclusion of JavaScript as a
alat pengembangan web. Alasan-alasan ini termasuk:

a) Kurang interaksi server: -Ketika pengguna memberikan data melalui formulir, validasi data
adalah perlu. Misalnya, ketika pengguna memasukkan alamat email mereka, kami ingin
pastikan bahwa alamat email berada dalam format yang benar dari alamat email yang valid. Tanpa
JavaScript, validasi ini dilakukan oleh server. Namun melalui JavaScript Anda dapat
validasi input pengguna sebelum mengirim halaman ke server. Ini menghemat lalu lintas server,
yang berarti beban lebih sedikit di server Anda.

b)Immediate feedback to the visitors:JavaScript enables one to define object level

validasi sehingga data tertentu diperlukan, pengguna harus mengisi data ini sebelum
bergerak maju. Pengguna tidak perlu menunggu pemuatan halaman untuk melihat apakah mereka telah lupa
untuk memasukkan sesuatu.

c) Interaktivitas yang meningkat: JavaScript memperkenalkan dinamika dan interaktivitas ke sebuah web
sistem. Sebagai contoh, Anda dapat membuat antarmuka yang bereaksi ketika pengguna mengarahkan kursor ke atasnya
dengan mouse atau mengaktifkannya melalui papan ketik.

Halaman 47 dari 68 DESAIN DAN PENGEMBANGAN WEB

 d) Antarmuka yang lebih kaya: Anda dapat menggunakan JavaScript untuk membuat antarmuka pengguna yang lebih kaya. Melalui
Seorang pengembang JavaScript dapat menyertakan item seperti komponen drag-and-drop dan penggeser.
untuk memberikan Antarmuka Kaya kepada pengunjung situs Anda.

JavaScript dapat ditempatkan di banyak bagian halaman web tergantung pada tugas yang dibutuhkan.
penempatan termasuk:
i. JavaScript di bagian <head>...</head>.
ii. JavaScript di bagian <body>...</body>.
iii. JavaScript di kedua bagian <body>...</body> dan <head>...</head>.
iv. JavaScript sebagai file eksternal dan kemudian dipanggil ke dalam halaman web dengan menyertakan panggilan di
<head>...</head> bagian.
JavaScript di Bagian Kepala
Ketika JavaScript dijalankan sebagai respons terhadap suatu peristiwa, seperti ketika seorang pengguna mengklik
di suatu tempat, kemudian Anda akan menempatkan skrip itu di bagian kepala. Berikut adalah contoh seperti itu
fungsi JavaScript yang dijalankan ketika tombol yang bertuliskan Katakan Halo diklik.
<Html>
<head>
<script type="text/javascript">
fungsi sayHello ()
{
peringatan("Halo Dunia");
}
</script>
</head>
<body>
Klik di sini untuk hasilnya
<input type="button" onClick="sayHello( )" value="Say Hello" />
</body>
</Html>
Javascript di Bagian Body
Jika Anda membutuhkan skrip yang dijalankan saat halaman dimuat sehingga skrip menghasilkan konten di halaman, maka
skrip ini masuk ke bagian <body> dari dokumen. Ini dapat dilakukan tanpa fungsi apapun
didefinisikan menggunakan JavaScript. Pada contoh berikut, sebuah string Hello World ditulis di
halaman web menggunakan dokumen. Tulis fungsi bawaan ketika halaman web dimuat di browser.

<Html>
<kepala>
</head>
<body>

Halaman 48 dari 68 DESAIN DAN PENGEMBANGAN WEB

<script type="text/javascript">
[Link] ("Halo Dunia")
</script>
<p>Ini adalah isi halaman web</p>
</body>
</Html>
Javascript di Kedua Bagian Head dan Body
Contoh berikut menunjukkan penggunaan JavaScript di bagian kepala dan tubuh
<Html>
<head>
<script type="text/javascript">
fungsi ucapkanHalo ( )
{
peringatan("Halo Dunia")
}
</script>
</head>
<body>
<script type="text/javascript">
[Link]("Halo Dunia")
</script>
<input type="button" onclick="sayHello()" value="Say Hello" />
</body>
</html>
Javascript sebagai Berkas Eksternal

Untuk proyek besar di mana pengembang menggunakan kembali kode JavaScript yang identik di beberapa halaman
kode JavaScript dapat ditempatkan di file terpisah yang disimpan dengan ekstensi .js
ekstensi, dan untuk setiap halaman web yang memerlukan kode JavaScript, file .js dipanggil di
<head> </head> bagian. Berkas .js dapat dipanggil oleh sebanyak mungkin halaman dalam proyek sesuai kebutuhan.
buat file .js, buka Macromedia Dreamweaver, klik File Baru Halaman Dasar JavaScript

Halaman 49 dari 68 DESAIN DAN PENGEMBANGAN WEB

Kemudian masukkan kode JavaScript Anda dan simpan file sebagai [Link]

[Link]
fungsi ucapkanHalo()

Halaman 50 dari 68 DESAIN DAN PENGEMBANGAN WEB

{
peringatan("Halo Dunia")

}
Setelah membuat file .js, panggil file tersebut ke dalam halaman web dengan merujuknya di bagian kepala

[Link]
<Html>
<head>
<script type="text/javascript" src="[Link]" >
</script>
</head>
<body>
.......
</body>
</Html>

Sintaksis Javascript
•Tanda titik koma bersifat opsional-Pernyataan sederhana dalam JavaScript umumnya diikuti oleh
karakter titik koma, sama seperti yang ada di C, C++, dan Java. Namun, JavaScript memungkinkan Anda untuk
hilangkan titik koma ini jika setiap pernyataan Anda ditempatkan pada baris terpisah.
•JavaScript adalah bahasa yang sensitif terhadap huruf besar-kecil - Ini berarti bahwa kata kunci bahasa, variabel,
nama fungsi, dan pengidentifikasi lainnya harus selalu diketik dengan konsisten
kapitalisasi huruf.
•Komentar-JavaScript mendukung komentar gaya C dan gaya C++. Jadi:
Komentar satu baris:
// Komentar baris tunggal

Atau
<!--. Komentar satu baris //-->
Komentar banyak baris

/* komentar multiline */
Variabel Javascript

Halaman 51 dari 68 DESAIN DAN PENGEMBANGAN WEB

Dalam JavaScript, sebelum Anda menggunakan variabel, Anda harus mendeklarasikannya. Variabel dideklarasikan dengan var
kata kunci. Contoh berikut menjelaskan hal ini:
<body>
<script type="text/javascript">
var firstname="judy";
var lastname="cheruto";
[Link](firstname);
</script>
</body>
Banyak variabel dapat dideklarasikan dengan kata kunci var yang sama sesuai dengan contoh yang berikut:

<body>
<script type="text/javascript">
var nama_depan, nama_belakang;
firstname="judy";
lastname="cheruto";
[Link](firstname);
</script>
</body>

Tipe Data Javascript

JavaScript memungkinkan Anda untuk bekerja dengan tiga tipe data primitif dan ini adalah:

•Angka, misalnya 123, 120,50 dll.

•Rangkaian teks, misalnya "hello world" dll.
•Boolean, misalnya benar atau salah, Ya atau Tidak, dll.

JavaScript juga mendefinisikan dua jenis data sepele, null dan undefined, masing-masing dari yang hanya mendefinisikan sebuah
nilai tunggal. Selain dari tipe data primitif ini, JavaScript mendukung tipe data komposit
dikenal sebagai objek.

JavaScript adalah bahasa yang tidak terikat tipe, yang berarti bahwa sebuah variabel JavaScript dapat menyimpan nilai dari
tipe data apapun dan karenanya seorang pengembang tidak perlu memberi tahu JavaScript selama deklarasi variabel
jenis nilai apa yang akan dipegang oleh variabel. Tipe nilai sebuah variabel dapat berubah selama
pelaksanaan program dan JavaScript menanganinya secara otomatis.
Operator Javascript
JavaScript mendukung jenis operator berikut.
•Operator Aritmatika (+, -, *, /, %, ++, --) Operator Perbandingan
== (Sama)

Halaman 52 dari 68 DESAIN DAN PENGEMBANGAN WEB

 != (Tidak Sama Dengan)

lebih besar dari

< (Kurang dari)
>= (Lebih besar dari atau sama dengan)

≤ (Kurang dari atau Sama dengan)

•Operator Logika
&& (Dan Logis)
|| (Atau Logis)
! (Tidak Logis)
•Operator Penugasan
(Penugasan Sederhana)
Menetapkan nilai dari operand sisi kanan ke operand sisi kiri
Contoh: C = A + B akan menetapkan nilai A + B ke dalam C
+= (Tambah dan Penugasan)
Ini menambahkan operand kanan ke operand kiri dan menetapkan hasilnya ke operand kiri
operand.
Contoh: C += A setara dengan C = C + A
-= (Pengurangan dan Penugasan)
Ini mengurangkan operand kanan dari operand kiri dan menetapkan hasilnya ke
operan kiri.
Contoh: C -= A setara dengan C = C - A
*= (Kali dan Penugasan)
Ini mengalikan operan kanan dengan operan kiri dan menetapkan hasilnya ke
operand kiri.
Contoh: C *= A setara dengan C = C * A
/= (Pembagian dan Penugasan)
Ini membagi operand kiri dengan operand kanan dan menetapkan hasilnya ke
operand kiri.
Contoh: C /= A setara dengan C = C / A
(Modul dan Tugas)

Halaman 53 dari 68 DESAIN DAN PENGEMBANGAN WEB

 Ini mengambil modulus menggunakan dua operand dan menetapkan hasilnya ke operand kiri.

Contoh: C %= A setara dengan C = C % A

Javascript Functions
Sebuah fungsi adalah sekumpulan kode yang dapat digunakan kembali yang dapat dipanggil di mana saja dalam program Anda. Ini
menghilangkan kebutuhan untuk menulis kode yang sama berulang kali. Fungsi membantu programmer dalam
menulis kode modular dan memungkinkan seorang programmer untuk membagi program besar menjadi sejumlah kecil
dan fungsi yang dapat dikelola.

Before we use a function, we need to define it. To define a function in JavaScript is by using the:
Kata kunci fungsi, diikuti oleh nama fungsi yang unik, daftar parameter (yang mungkin
kosong), dan blok pernyataan yang dikelilingi oleh kurung kurawal seperti dalam format di bawah ini:

<script type="text/javascript">
Fungsi functionname (daftar-parameter)
{
Statements;
}
</script
Untuk memanggil fungsi di suatu tempat kemudian dalam skrip, Anda hanya perlu menulis nama dari
fungsi yang ditunjukkan dalam Contoh Fungsi JavaScript berikut.
Contoh 1
<Html>
<head>
<script type="text/javascript">
fungsi salam ( )
{
[Link] ("Halo di sana!");
}
</script>
</head> <body>
<p>Klik tombol berikut untuk memanggil fungsi</p>
<form>
<input type="button" onclick=“greetungs()" value=“Greet someone">
</form>
</body>
</Html>
Contoh 2

Halaman 54 dari 68 DESAIN DAN PENGEMBANGAN WEB

<Html>
<head>
<title>Untitled Document</title>
<script type="text/javascript">
fungsi bukaJendela ( )
{
[Link]("[Link]
}
</script>
</head>
<body>
<form>
<input type="button" value="open window" onclick="openwindow ( )" />
</form>
</body>
</Html>
Contoh 3
<Html>
<head>
<script type="text/javascript">
fungsi sapaHalo(nama, usia)
{
[Link] (name + " adalah " + age + " tahun.");
}
</script>
</head>
<body>
<p>Klik tombol berikut untuk memanggil fungsi</p>
<form>
<input type="button" onclick="sayHello('Zara', 7)" value="Say Hello">
</form>
</body>
</html>
Contoh 4
<Html>
<kepala>
<script type="text/javascript">
fungsi menggabungkan (pertama, terakhir)
{
var penuh;
penuh = pertama + terakhir;

Halaman 55 dari 68 DESAIN DAN PENGEMBANGAN WEB

kembali penuh;
}
fungsi secondFunction ( )
{
var hasil;
result = concatenate('Zara', 'Ali');
[Link] (hasil );
}
</script>
</head>
<body>
<form>
<input type="button" onclick="secondFunction()" value="Panggil Fungsi">
</form>
</body>
</html>
Kotak Pop Up Javascript
JavaScript memiliki tiga jenis kotak popup: Kotak Peringatan, Kotak Konfirmasi, dan Kotak Prompt.

Kotak Pop-up Peringatan

Kotak peringatan sering digunakan jika Anda ingin memberi tahu pengguna tentang sesuatu. Ketika kotak peringatan muncul
pengguna harus mengklik "OK" untuk melanjutkan. Berikut adalah contoh yang menunjukkan sebuah
JavaScript Alert pop up box.
<Html>
<head>
<title>JavaScript Alert Pop Up Box</title>
</head>
<body>
<script type="text/javascript">
[Link]("Anda telah mengklik tombol tutup");
</script>
</body>
</Html>
ATAU
<Html>
<head>
<title>JavaScript Alert Pop up Box</title>
</head>
<body>
<script type="text/javascript">

Halaman 56 dari 68 DESAIN DAN PENGEMBANGAN WEB

peringatan("Anda telah mengklik tombol tutup");
</script>
</body>
</Html>
Konfirmasi Kotak Pop up

JavaScript menggunakan kotak konfirmasi jika Anda ingin pengguna memverifikasi atau menerima sesuatu. Ketika sebuah
kotak konfirmasi muncul, pengguna harus mengklik 'OK' atau 'Batal' untuk melanjutkan.
Dua contoh berikut menunjukkan penggunaan tombol konfirmasi dalam JavaScript.
Contoh 1
<Html>
<kepala>
<title>JavaScript Confirm Pop up Box</title>
</head>
<body>
<script type="text/javascript">
var response;
jika(confirm("tekan tombol!"))
{
response="you pressed OK!";
}
lainnya
{
response="You pressed Cancel!";
}
[Link](respons);
</script>
</body>
</Html>
Contoh 2
<Html>
<head>
<title>JavaScript Confirm Pop up Box</title>
</head>
<tubuh>
<script type="text/javascript">
var name=confirm("tekan tombol")
jika (nama==benar)
{
anda menekan ok
}

Halaman 57 dari 68 DESAIN DAN PENGEMBANGAN WEB

lainnya
{
anda menekan batal
}
</script>
</body>
</Html>
Kotak Pop Up
Kotak prompt JavaScript sering digunakan jika Anda ingin pengguna memasukkan nilai sebelum masuk
Halaman. Ketika kotak prompt muncul, pengguna harus mengklik 'OK' atau 'Batal' untuk melanjutkan.
setelah memasukkan nilai input. Contoh berikut menunjukkan penggunaan Pop JavaScript
kotak atas.

Contoh 1
<Html>
<Kepala>
<Title>JavaScript Prompt Pop up Box</title>
</kepala>
<badan>
<script type="text/javascript">
var person = prompt ("Please enter your name", "Enter Name");
jika (orang == null || orang == "")
{
var response = "User cancelled the prompt.";
}
lainnya
{
var response = "Hello " + person + "! How are you today?";
}
[Link](response);
</script>
</body>
</Html>
Contoh 2
<Html>
<kepala>
<title>JavaScript Prompt Pop up Box</title>
</head>
<body>
<script type="text/javascript">
var name=prompt("silakan masukkan nama anda", " ")

Halaman 58 dari 68 DESAIN DAN PENGEMBANGAN WEB

if(name!=null && name!=" ")
{
[Link]("Halo"+" "+nama)
}
</script>
</body>
</Html>
Tombol Radio Javascript
<Html>
<head>
<title>JavaScript Radio Button</title>
</head>
<body>
<form>
browser mana yang menjadi favoritmu
<input type="radio" name="browser" onclick="check([Link])"
nilai="Penjelajah" />Microsoft Internet Explorer<br />
<input type="radio" name="browser" onclick="check([Link])"
value="Firefox" />Mozilla Firefox<br />
<input type="text" name="jawaban" />
</form>
</body>
</html>
Checkboxes Javascript
<Html>
<head>
<title>JavaScript Checkboxes</title>
<script type="text/javascript">
function check ( )
{
coffee=[Link][0].coffee
answer=[Link][0].answer

untuk(i=0;i<[Link];i++)
{
jika(coffee[i].checked)
{
txt=txt+coffee[i].value+" "
}
}
anda memesan kopi dengan

Halaman 59 dari 68 DESAIN DAN PENGEMBANGAN WEB

}
</script>>
</head>
<body>
<form>
Bagaimana Anda ingin kopi Anda?
<input type="checkbox" name="coffee" value="cream" />dengan krim<br />
<input type="checkbox" name="coffee" value="sugar" />Dengan gula<br />
<input type="text" name="jawaban" size="30" />
<input type="button" name="test" onclick="check()" value="Order" />
</form>
</body>
</html>
Peristiwa dan Penanganan Peristiwa Javascript

Peristiwa adalah hal-hal yang terjadi. Misalnya, matahari terbit adalah sebuah peristiwa. Matahari terbenam adalah sebuah
acara. Anda dapat memilih untuk bereaksi terhadap acara tersebut. Misalnya, ketika matahari terbit, Anda mungkin akan mendapatkan
keluar dari tempat tidur atau mungkin tidak. Ketika matahari terbenam, kamu mungkin menyalakan lampu atau mungkin pergi tidur.

Dalam desain dan pengembangan web, peristiwa adalah hal-hal yang terjadi di halaman web. Sebagai contoh, sebuah
pengguna mungkin menggerakkan mouse di atas tombol, mengklik tombol, atau mengirimkan formulir. Seperti contoh dari
matahari terbit, Anda dapat memilih untuk bereaksi terhadap peristiwa tersebut atau Anda dapat mengabaikannya. Interaksi JavaScript
dengan HTML ditangani melalui peristiwa yang terjadi ketika pengguna atau browser memanipulasi sebuah
halaman. Berikut adalah contoh peristiwa umum yang ditemui di halaman web:
i. Page Loading
ii. Klik Tombol
iii. Tekan Kunci
iv. Menutup Jendela
v. Mengubah Ukuran Jendela

Pengembang dapat menggunakan acara ini untuk mengeksekusi respons yang dikodekan dalam JavaScript, yang menyebabkan tombol untuk
tutup jendela, pesan yang akan ditampilkan kepada pengguna, data yang perlu divalidasi, dan hampir semua lainnya
jenis respons yang bisa dibayangkan.

Secara umum, ada empat jenis acara:

•Peristiwa formulir: Termasuk hal-hal seperti memilih kotak centang atau mengirimkan formulir itu sendiri.
Menanggapi peristiwa formulir adalah salah satu hal yang paling umum dilakukan oleh programmer JavaScript.

•Acara mouse:Ini bisa berupa apa saja mulai dari klik mouse hingga gerakan mouse di halaman.
Itu benar; Anda sebenarnya dapat melacak di mana mouse berada di halaman dan meresponsnya.

•Peristiwa keyboard: Hal-hal yang terjadi melalui keyboard, seperti penekanan tombol, dianggap
peristiwa keyboard.
•Peristiwa halaman: Hal-hal seperti halaman yang dimuat atau dibongkar dianggap sebagai peristiwa halaman.

Halaman 60 dari 68 DESAIN DAN PENGEMBANGAN WEB

Response to events is handled through event handlers. The following are examples of event
penangkap yang tersedia di JavaScript:

•padaBlur
•saatMouseOver
•onChange
•padaKlik
•padaFokus
•padaMuat
•padaKirim
•onUnload
•padaPilih
Di bawah ini kita melihat beberapa pengendali acara ini dan contoh-contoh dalam JavaScript.

onClick Event Type

Ini adalah jenis acara yang paling sering digunakan yang terjadi ketika pengguna mengklik tombol kiri dari
mouse. Anda dapat menempatkan validasi, peringatan, dll., terhadap jenis acara ini. Instances ketika sebuah
penangan acara onClick dipanggil termasuk ketika:

•Sebuah objek dalam tombol (biasa, radio, reset, dan kirim) diklik,
•Sebuah tautan didorong

•Kotak centang dicentang atau

Area peta gambar dipilih.

Berikut adalah contoh kode JavaScript untuk acara onClick:
<Html>
<kepala>
<script type="text/javascript">
function sayHello ( )
{
[Link] ("Halo Dunia") ;
}
</script>
</head>

Halaman 61 dari 68 DESAIN DAN PENGEMBANGAN WEB

<body>
<p> Klik tombol berikut dan lihat hasilnya</p>
<input type="button" onclick="sayHello()" value="Say Hello" />
</body>
</html>
Jenis Acara onChange
Peristiwa perubahan terjadi ketika teks yang dipilih atau bidang area teks kehilangan fokus dan nilainya telah
modified. The onChange event handler executes JavaScript code when a change event occurs.
Penangan acara onChange digunakan untuk memvalidasi data setelah dimodifikasi oleh pengguna. Berikut ini
adalah contoh dari onChange dalam aksi:

<Html>
<title>example of onChange event handler</title> <head>
<script type="text/javascript">
fungsi perubahanvalid (form)
{
var input;
input=[Link];
peringatan("Anda telah mengubah Biaya dari menjadi 45000 " + input );
}
</script>
</kepala>
<body>
Cobalah mengubah nilainya dari 45000 ke sesuatu yang lain:<br>
<form name="frmChuka">
<input type="text" name="txtFees" value="45000" size=10
onChange="validchange([Link])">
</form>
</body>
</html>
Tipe Event onFocus
Penangan acara onFocus menjalankan kode JavaScript ketika fokus input memasuki bidang baik melalui
tabbing masuk atau dengan mengklik tetapi tidak memilih input dari bidang. Untuk windows, bingkai dan
framesets pengendali acara menjalankan kode JavaScript ketika jendela mendapatkan fokus. Yang
berikut adalah contoh dari acara ini dalam kode JavaScript:
<html>
<title>example of onFocus event handler</title>
<kepala>
</kepala>
<body>
<h3>example of onFocus event handler</h3>

Halaman 62 dari 68 DESAIN DAN PENGEMBANGAN WEB

klik mouse Anda di kotak teks :<br/>
<form name="myform">
<input type="text" name="data" value="" size=10 onFocus='alert("anda memfokuskan pada
textbox!!")'> </form>
</body>
</html>
Jenis Acara onLoad
An onLoad event occurs when a window or image finishes loading. For windows, this event
penangan ditentukan dalam atribut body dari jendela. Dalam sebuah gambar, penangan acara akan
eksekusi teks pengolah saat gambar dimuat.
<Html>
<title>Example of onLoad Event Handler</title>
<head>
<Script type="text/javascript">
fungsi halo()
{
peringatan("Halo di sana...\nIni adalah contoh onLoad.");
}
</script>
</head>
<body onLoad="hello()"> <H3>Contoh Penangan Acara onLoad</H3>
</body>
</html>
Jenis Acara onSubmit
Pengendali acara onSubmit memanggil kode JavaScript saat formulir dikirimkan. Misalnya setelah
mengisi formulir dan mengklik tombol Kirim, acara onSubmit dipanggil. Berikut adalah contoh
untuk menunjukkan ini:
<Html>
<title> Example of onSubmit Event Handler </title>
<head> </head>
<body>
<Script type="text/javascript">
<h3>Contoh Penanganan Event onSubmit</h3>
Ketik nama Anda dan tekan tombol
<form name="myform" onSubmit="alert('Terima kasih ' + [Link] +'!')">
<input type="text" name="data">
<input type="submit" name="submit" value="Kirim formulir ini">
</form>
</Scipt>

Halaman 63 dari 68 DESAIN DAN PENGEMBANGAN WEB

</body>
</Html>
onUnLoad Event Type
An onUnload event handler calls JavaScript code when a document is exited. For example when
halaman web ditutup. Berikut adalah contoh untuk penangan acara ini:
<Html>
<head>
<Script type="text/JavaScript">
fungsi selamat tinggal()
{
peringatan("Terima kasih telah berkunjung!");

}
</script>
</head>
<body onUnLoad="selamat tinggal()">

<h3>Contoh pengendali acara onUnload</h3>

Lihat apa yang terjadi ketika Anda mencoba meninggalkan halaman ini...

</body>
</Html>
Jenis Event onBlur
Ketika sebuah komponen web menjadi titik fokus, ia dikatakan memiliki fokus dan ketika itu tidak lagi menjadi
komponen fokus, dikatakan telah kehilangan fokus. Suatu acara blur terjadi ketika sebuah pilihan, teks atau teks
area pada formulir kehilangan fokus. Penangan acara onBlur mengeksekusi kode JavaScript ketika terjadi peristiwa blur
terjadi. Sebuah contoh menyentuh pada kolom teks di mana pengguna diharapkan untuk mengetik nama pengguna mereka. Kami mungkin
ingin menggunakan JavaScript untuk memastikan bahwa pengguna tidak pernah meninggalkan komponen teks jika
nama pengguna belum dimasukkan atau nama pengguna yang dimasukkan tidak sesuai dengan format yang diperlukan. Ketika a
user attempts to leave the textfield, the onBlur event handler calls the required () function to
konfirmasi bahwa nama pengguna memiliki nilai yang sah

<Html>
<title>Example of onBlur Event Handler</title>
<head>
<Script type= “text/JavaScript">
fungsi valid(form)
{
var input=0;
input=[Link];
jika (input<0)
Halaman 64 dari 68 DESAIN DAN PENGEMBANGAN WEB
{
peringatan("Silakan masukkan nilai yang kurang dari 0");
}
}
</Script>
</head>
<body>
<h3> Contoh Pengendali Acara onBlur </h3>
Cobalah memasukkan nilai kurang dari nol:<br>
<form name="myform">
<input type="text" name="data" value="" size=10 onBlur="valid([Link])">
</form>
</body>
</Html>

Contoh JavaScript Lainnya

Contoh 1: Gambar Rollover

<html>
<head>
<title>Rollover with a Mouse Events</title>
<script type="text/javascript">
jika([Link])
{
var image1 = new Image(); // Memuat gambar sebelumnya
[Link]="100_2440.jpg";
var image2 = new Image(); // Memuat gambar kedua sebelumnya
[Link] = "100_2408.jpg";
}
</script>
</head>
<body>
<p>Gerakkan mouse Anda ke atas gambar untuk melihat hasilnya</p>
<a href="#" onMouseOver="[Link]=[Link];">
onMouseOut="[Link]=[Link];">
<img name="myImage" src="100_2440.JPG" />
</a>

Halaman 65 dari 68 DESAIN DAN PENGEMBANGAN WEB

</body>
</html>
Contoh 2: Tambahkan Dua Bilangan Bulat

<Html>
<head>
<title>Obtaining inputs via JavaScript</title>
</head>
<body>
Masukkan Angka Pertama : <br>
<input type="text" id="num1" name="num1"> <br>
Masukkan Angka Kedua : <br>
<input type="text" id="num2" name="num2"> <br>
Result : <br>
<input type="text" id="result" name="result"><br>
<input type="button" name="clickbtn" value="Display Result" onclick="add_number()">
<script type="text/javascript">
fungsi tambah_nomor()
{
var first_number = parseInt([Link]("num1").value);
var second_number = parseInt([Link]("num2").value);
var result = first_number + second_number;
[Link]("result").value = hasil;
}
</script>
</body>
</html>
Contoh 3: Validasi Formulir JavaScript
<html>
<head>
<title>Form Validation</title>
<script type="text/javascript">
// Kode validasi formulir akan ditempatkan di sini
fungsi validasi()
{
jika( [Link] == "" )
{
harap berikan nama Anda!
[Link]();
kembalikan false;
}
jika( [Link] == "" )

Halaman 66 dari 68 DESAIN DAN PENGEMBANGAN WEB

{
Peringatan( "Silakan berikan Email Anda!" );
[Link]();
kembali salah;
}
jika( [Link] == "" ||
isNaN( [Link] ) ||
[Link] != 3
{
peringatan( "Silakan masukkan Kode Negara dalam format ###." );
[Link]();
kembali salah;
}
jika ( [Link] == "-1" )
{
alert( "Silakan berikan negara Anda!" );
kembali salah;
}
kembali( benar );
}
</script>
</head>
<body>
<form action=" " name="myForm"
onsubmit="return(validate());">
<table cellspacing="2" cellpadding="2" border="1" align="center">
<tr>
<td align="right">Nama</td>
<td><input type="text" name="Nama" /></td>
</tr>
<tr>
<td align="right">Email</td>
<td><input type="text" name="EMail" /></td>
</tr>
<tr>
<td align="right">Kode Negara</td>
<td><input type="text" name="kode" /></td>
</tr>
<tr>
<td align="right">Negara</td>
<td>
<select name="Negara">
<option value="-1" selected>[pilih milikmu]</option>

Page 67 of 68 DESAIN DAN PENGEMBANGAN WEB

<option value="1">KENYA</option>
<option value="2">UGANDA</option>
<option value="3">TANZANIA</option>
</select>
</td>
</tr>
<tr>
<td align="kanan"></td>
<td><input type="submit" value="Submit" /></td>
</tr>
</tabel>
</form>
</body>
</html>
95551
NB:
Untuk landasan yang kuat dalam desain dan pengembangan web, terutama ketiga
teknologi yang dipertimbangkan dalam kelas ini, situs web[Link]
direkomendasikan.
Sekarang Anda dapat membuat situs web menggunakan HTML, CSS, dan Joomla; lanjutkan ke
Kerangka kerja seperti Bootstrap dan WordPress. Saya merekomendasikan untuk menjelajahi Bootstrap bahkan saat
kami beralih ke pemrograman web.

Halaman 68 dari 68 DESAIN DAN PENGEMBANGAN WEB