Prov.Jabar_1504_Pengumuman Seleksi Tahap 2_CGP A11 (2).pdf
Elemen html
1. Praktikum Tag-Tag HTML
By: Yunia Ikawati, S.ST
BAB 1
PRAKTIKUM PEMROGRAMAN WEB
AKADEMI KOMUNITAS NEGERI LAMONGAN
2. TUJUANpembelajaran:
•Mahasiswa dapat MempraktekkanDasarTag-tag HTML
•Mahasiswa dapat Mempraktekkan Tag untuk Pengformatan Teks
•Mahasiswa dapat MempraktekkanTag List
•Mahasiswa dapat MempraktekkanTag Link
•Mahasiswa dapat MempraktekkanTag Frame
•Mahasiswa dapat MempraktekkanTag Tabel
•Mahasiswa dapat MempraktekkanTag Form
•Mahasiswa dapat MempraktekkanTag Image
•Mahasiswa dapat MempraktekkanTag Background
•Mahasiswa dapat MempraktekkanTag Layout
•Mahasiswa dapat MempraktekkanTag Font
AKADEMI KOMUNITAS NEGERI LAMONGAN
3. Pemrograman web
•Diambil dari 2 suku kata yaitu pemrograman dan web
•Pemrograman diartikan proses, caRa, perbuatan program
•Web diartikan jaringan komputer yang terdiri dari kumpulan situs internet yang menawarkan teks ,grafik ,suara , animasi melalui protokol transfer hypertext
AKADEMI KOMUNITAS NEGERI LAMONGAN
5. Pengertian html
Hypertext Markup Language (HTML)
merupakanstandard bahasayang di gunakanuntukmenampilkandocument web, biasanya digunakan untuk membuat document yang bisa di akses melalui web.
AKADEMI KOMUNITAS NEGERI LAMONGAN
6. Syarat penulisan html
• Tag HTML diapit dengan dua karakter kurung sudut ( < dan > ) • Tag HTML secara normal selalu berpasangan • Tag pertama dalam suatu pasangan adalah tag awal, dan tag yang kedua merupakan tag akhir.
• Tag html tidak case sensitive. Ini artinya <b> sama dengan <B> • Jika dalam suatu tag terdapat tag lain, maka penulisan tag akhir tidak boleh bersilang dan harus berurutan. Misalnya <b><I>..Tebal dan Miring..</I></b>
AKADEMI KOMUNITAS NEGERI LAMONGAN
8. PRAKTIKUM
•PERALATAN dan software PRAKTIKUM :
•Laptop / komputer, browser, notepad
•Langkah-langkah praktikum:
•Buka notepad, ketikkan tampilan berikut dan simpan file tersebut dengan nama sesuai praktikum dengan menggunakan format .html
•Setelah selesai maka buka hasil notepad tersebut menggunakan browser
AKADEMI KOMUNITAS NEGERI LAMONGAN
31. Tag FORM
•Formbiasanya digunakan untuk mengumpulkan data dari pengunjung web kita. Mulai dari form untuk login, form kontak, form untuk pendaftaran user, bahkan untuk mengirimkan data antar halaman web.
•Penggunaan form hanya menggunakan HTML saja tidak akan terlalu berguna. Form biasanya hanya berupainterfaceyang disediakan untuk mengumpulkan data dari user, dan akan diproses dengan bahasa pemograman web sepertiJavaScriptatauPHP, dan disimpan di dalam tabelMySQL.
•Sebuahformdalam HTML harus berada di dalamtag form, yang diawali dengan<form>dan diakhiri dengan</form>.
32. Tag FORM
•Tag<form>berfungsi sebagai obyek penampung (container) bagi obyek-obyek lainnya. Atribut-atribut yang dimiliki FORM adalah sebagai berikut:
•NAME, berfungsi untuk mendefinisikan nama obyek form.
•METHOD, dipergunakan untuk menentukan cara pengolahan data yang
inputkan dalam form.
•ACTION, digunakan untuk menentukan lokasi/alamat file (program server)
yang akan mengolah data isian form. Nilai yang dapat diisikan meliputi :POST dan GET.
Method getini biasanya digunakan untukquerypencarian.Method postbiasanya digunakan untuk data yang lebih sensitif seperti yang berisipassword, atauregistrasi user. Data hasil formtidak akan terlihatpada browser.
contoh:
35. Tag IMAGE
•Tag Imagedigunakan untuk menampilkan gambar kedalam halaman web, menggunakan<img>.
•Atributsrcdalam tag<img>
•Atributsrcadalah singkatan darisource, merupakan atribut yang berisi alamat dari gambar yang akan ditampilkan.
•Untuk contoh kodeHTMLtentang image ini, sediakan sebuah gambar yang akan digunakan sebagai tampilan, dan tempatkan gambar tersebut ke dalamsatu folderdengan halaman contoh. Gambar dapat berupa JPEG, PNG, maupun GIF.
37. Tag Background HTML
•Beberapa contoh kode html menyisipkan background:
1. Background Warna
Menggunakan atribut bg color yang ditempatkan di tag <body>
Misal ingin membuat background warna merah maka:
<body bgcolor=“00ff00”>
38. Tag Background HTML
2. Background image (latar belakang gambar)
background image dapat memperbesar volume pada halaman website Anda hingga dapat memperlambat dalam memuatnya, jadi disarankan agar tidak memasang gambar yang berukuran besar sebagai latar belakang,
39. Tag Background HTML
•3. BackgroundSound / Music (latarbelakangsuara)
•pertama pastinya Kita harus punya file musik yang disimpan di akun internet dan kita ambil URLnya, Agar menghindari loading yang lama maka disarankan sebaiknya Kita gunakan file musik yang berjenis MIDI atau WAV karena pada umumnya jenis file musik ini berukuran rendah, lalu 'Copy' URL file musik yang akan dipakai lalu 'Paste' diantara <head> dan <title> kemudian setelah di save kita coba buka dengan internet explorer karena mozilla firefox belum mendukung backgroud suara
40. Tag Layout HTML
•Layout pada halaman web sangat penting untuk membuat website sobat terlihat lebih bagus.
1. Layout enggunakan tag Tabel
Contoh pembuatan Layout dengan menggunakan tag <table>
42. Layout HTML
•Contoh pembuatan Layout dengan menggunakan elemen <div>
elemen div adalah elemenblock level yang digunakan untuk mengelompokan elemen-elemen HTML. Perhatikan contoh penggunaan elemen <div> dibawah ini:
44. Tag FONT HTML
•Tag HTML untuk font adalah <font>…</font>, dengan tag ini kita bisa menentukan jenis font (face), warna (color), dan ukuran (size)
•Atribut tag FONT: face="Jenis font yang digunakan", contoh: face="Tahoma" size="Ukuran dari font (1-7)", contoh: size="3" size="Memperbesar ukuran font", contoh: size="+1" size="Memperkecil ukuran font", contoh: size="-1" color="Warna dari font", contoh: color="blue" color="Warna dari font", contoh: color="#FF0000"
47. Tugas praktikum
•DenganmenggunakanHTML Buathalamanweb sederhana, yaituhalamantentang kesukaan kalian masing-masing menggunakan perintah tag layout
•Keterangan:
•Tema web mengenai kesukaan masing-masing
•GunakanTag-Tag yang telahdiajarkan, danpakailahimajinasiandauntukmemperindahtampilan, semisalfont-nyamemakaiwarnayang berbeda-beda.
•KumpulkanTugasIniMinggudepanberupa softfile, dikumpulkan di ketua kelas masing-masing. SelamatMengerjakan
AKADEMI KOMUNITAS NEGERI LAMONGAN
