Elemen html
-
Upload
yunia-ikawati -
Category
Education
-
view
98 -
download
9
Transcript of Elemen html
Praktikum Tag-Tag
HTML
By: Yunia Ikawati, S.ST
BAB 1
PRAKTIKUM PEMROGRAMAN
WEB
AKADEMI KOMUNITAS NEGERI LAMONGAN
TUJUAN pembelajaran :
• Mahasiswa dapat Mempraktekkan Dasar Tag-tag HTML
• Mahasiswa dapat Mempraktekkan Tag untuk Pengformatan Teks
• Mahasiswa dapat Mempraktekkan Tag List
• Mahasiswa dapat Mempraktekkan Tag Link
• Mahasiswa dapat Mempraktekkan Tag Frame
• Mahasiswa dapat Mempraktekkan Tag Tabel
• Mahasiswa dapat Mempraktekkan Tag Form
• Mahasiswa dapat Mempraktekkan Tag Image
• Mahasiswa dapat Mempraktekkan Tag Background
• Mahasiswa dapat Mempraktekkan Tag Layout
• Mahasiswa dapat Mempraktekkan Tag FontAKADEMI KOMUNITAS NEGERI LAMONGAN
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
Pengertian html
Hypertext Markup Language (HTML)
merupakan standard bahasa yang di gunakan untuk
menampilkan document web, biasanya digunakan untuk
membuat document yang bisa di akses melalui web.
AKADEMI KOMUNITAS NEGERI LAMONGAN
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
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 browserAKADEMI KOMUNITAS NEGERI LAMONGAN
5. Mempraktekkan Tag Frame
•Buatlah file HTML berikut, simpan dengan nama logo.html
AKADEMI KOMUNITAS NEGERI LAMONGAN
5. Mempraktekkan Tag Frame•Selanjutnya, buatlah file yang kedua, simpan dengan nama menu.html
AKADEMI KOMUNITAS NEGERI LAMONGAN
5. Mempraktekkan Tag Frame•Buatlah file yang ketiga, simpan dengan nama welcome.html
AKADEMI KOMUNITAS NEGERI LAMONGAN
5. Mempraktekkan Tag Frame•Yang terakhir adalah kita membuat file pendefinisi frame, simpan dengan nama index.html
AKADEMI KOMUNITAS NEGERI LAMONGAN
Tag FORM
• Form biasanya 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
berupa interface yang disediakan untuk mengumpulkan
data dari user, dan akan diproses dengan bahasa
pemograman web seperti JavaScript atau PHP, dan
disimpan di dalam tabel MySQL.
• Sebuah form dalam HTML harus berada di dalam tag
form, yang diawali dengan <form> dan diakhiri
dengan </form>.
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 get ini biasanya digunakan untuk query pencarian. Method post biasanya
digunakan untuk data yang lebih sensitif seperti yang berisi password, atau registrasi user.
Data hasil form tidak akan terlihatpada browser.
contoh:
Tag IMAGE
• Tag Image digunakan untuk menampilkan gambar
kedalam halaman web, menggunakan <img>.
• Atribut src dalam tag <img>
• Atribut src adalah singkatan dari source, merupakan atribut
yang berisi alamat dari gambar yang akan ditampilkan.
• Untuk contoh kode HTML tentang image ini, sediakan
sebuah gambar yang akan digunakan sebagai tampilan, dan
tempatkan gambar tersebut ke dalam satu folder dengan
halaman contoh. Gambar dapat berupa JPEG, PNG,
maupun GIF.
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”>
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,
Tag Background HTML
• 3. Background Sound / Music (latar belakang suara)
• 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
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>
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:
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"
Tugas praktikum
• Dengan menggunakan HTML Buat halaman web sederhana, yaitu halamantentang kesukaan kalian masing-masing menggunakan perintah tag layout
• Keterangan :
• Tema web mengenai kesukaan masing-masing
• Gunakan Tag-Tag yang telah diajarkan, dan pakailah imajinasi anda untukmemperindah tampilan, semisal font-nya memakai warna yang berbeda-beda .
• Kumpulkan Tugas Ini Minggu depan berupa softfile, dikumpulkan di ketua kelas masing-masing. Selamat Mengerjakan
AKADEMI KOMUNITAS NEGERI LAMONGAN