Elemen html

47
Praktikum Tag-Tag HTML By: Yunia Ikawati, S.ST BAB 1 PRAKTIKUM PEMROGRAMAN WEB AKADEMI KOMUNITAS NEGERI LAMONGAN

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

Contoh tampilan web

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

Bentuk format dasar dokumen

HTML:

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

Tag - Tag Dasar HTML

AKADEMI KOMUNITAS NEGERI LAMONGAN

1. Mempraktekkan Dasar Tag-tag

HTML

AKADEMI KOMUNITAS NEGERI LAMONGAN

Tampilan hasilnya

AKADEMI KOMUNITAS NEGERI LAMONGAN

Menampilkan warna pada html

AKADEMI KOMUNITAS NEGERI LAMONGAN

Tag untuk Pemformatan Teks

AKADEMI KOMUNITAS NEGERI LAMONGAN

2. Mempraktekkan Tag untuk

Pengformatan Teks

AKADEMI KOMUNITAS NEGERI LAMONGAN

Tampilan hasilnya

AKADEMI KOMUNITAS NEGERI LAMONGAN

Tag List

AKADEMI KOMUNITAS NEGERI LAMONGAN

3. Mempraktekkan Tag List

AKADEMI KOMUNITAS NEGERI LAMONGAN

Tampilan hasilnya

AKADEMI KOMUNITAS NEGERI LAMONGAN

TAG LINK

AKADEMI KOMUNITAS NEGERI LAMONGAN

4. Mempraktekkan Tag Link

• FileAsal.html • tujuan.html

AKADEMI KOMUNITAS NEGERI LAMONGAN

Hasil tampilannya

•Tampilan FileAsal.html Tampilan tujuan.html

AKADEMI KOMUNITAS NEGERI LAMONGAN

TAG FRAME

AKADEMI 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

Tampilan hasilnya

AKADEMI KOMUNITAS NEGERI LAMONGAN

TAG TABEL

AKADEMI KOMUNITAS NEGERI LAMONGAN

6. Mempraktekkan Tag Tabel

AKADEMI KOMUNITAS NEGERI LAMONGAN

Tampilan hasilnya

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 FORM

Tag FORM

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 IMAGE

• Contoh penggunaan tag <img>:

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>

Tag Layout HTML

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:

Layout HTML

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"

FONT HTML

FONT HTML

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