pti_b_kelompok 1_hanarno febriansyah_141910201018_html.pptx

20
1 DI SUSUN OLEH : HANARNO FEBRIANSYAH (141910201018)

Upload: hanarno-febriansyah

Post on 18-Dec-2015

213 views

Category:

Documents


0 download

TRANSCRIPT

Slide 1

1hyper text markup language (html)

DI SUSUN OLEH :HANARNO FEBRIANSYAH(141910201018)PENGERTIANHTML kepanjangan dari Hyper Text Markup Language adalah sebuah bahasa Markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah webInternet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML(Standard Generalized Markup Language),HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web.CARA PEMBUATAN DOKUMEN HTMLKlik START Pilih All Program Accesories Pilih notepad.Setelah notepad terbuka ketikkan struktur dasar dokumen HTML yang ingin anda buat.Setelah itu simpan file tersebut dengan extension *.HTML atau *.htmKlik save Pilih save Simpan dengan nama (nama folder).htmlSimpanlah semua file HTML menjadi 1 folder dengan file- file yang digunakan dalam html.FRAMESET : perintah untuk membuat frame, dan umumnya berpasangan dengan perintah Sintak :

FRAMEFRAME SRC : perintah untuk memasukkan suatu halaman atau gambar ke dalamjendelaSintak :

FRAME

FRAMESintak HTMLFRAMESimpan semua file yang yang berhubungan dengan HTML ke dalam satu folder.

FRAMEHasil HTML

Cara membuat tampilan web seperti tampilan jejaring sosial yang dilengkapi photo profil dan photo backgroundIMAGE

Hal yang perlu di perhatikan :Nama file gambar yang kita masukan harus benar benar sama dengan nama file gambar yang anda miliki (perhatikan kapital huruf maupun spasinya)File html dengan file gambar usahakan berada dalam tempat yang sama untuk menghindari kesalahan / tidak munculnya gambar karena alamat gambar yang salah akan menyebabkan gambar tidak muncul. Jika file gambar dan file html berada di tempat yang sama maka anda cukup menuliskan nama file gambarnya saja tidak perlu pakai lokasi.IMAGE IMAGEHasil Tampilan

Sering kita temukan daftar pilihan (bidang pilih) pada web yang kita kunjungi. Biasanya berformat dropdown list ketika kotak di klik, tujuannya adalah untuk memudahkan dan memungkinkan pengunjung di dalam menentukan pilihan dari serangkaian daftar yang telah disediakan.DROPDOWN LISTSintak HTMLDROPDOWN LIST

Hasil HTMLDROPDOWN LIST

Sintak Drop Caps huruf yang dijadikan drop cap

DROPCAPSKeterangan Sintak :Color: black; menunjukkan warna dari huruf drop caps, dalam hal ini warna huruf tersebut adalah black atau hitam. Anda dapat menggantinya dengan warna lain, misalnya red untuk merah, blue untuk biru, green untuk hijau, dan lain-lain.Float: left; ini menunjukkan kode agar tulisan awal diletakkan pada posisi kiri (left) alias mepet ke kiri.Font-family: Times New Roman; ini adalah jenis huruf drop caps, Anda dapat menggantinya dengan yang lain, misalnya Verdana.Font-size: 50px; ini adalah kode untuk besarnya huruf, bila ingin diganti dengan ukuran yang lain, silakan ubah nilainya saja.

DROPCAPSKeterangan Sintak :Line-height: 40px; ini merupakan kode untuk jarak baris.Padding-right: 3px; ini adalah kode untuk jarak sela antara tulisan awal dengan tulisan selanjutnya sebesar 3 pixel, jika Anda ingin mengganti jaraknya, silakan diubah nilainya.Padding-top: 1px; ini adalah kode untuk jarak sela antara tulisan dengan bagian atasnya

DROPCAPSSintak HTMLDROPCAPS

Hasil TampilanDROPCAPS

TERIMA KASIH