pengenalan html ( bambang sugianto, s.t., m.kom - umnu kebumen )
TRANSCRIPT
![Page 1: Pengenalan HTML ( Bambang Sugianto, S.T., M.Kom - UMNU KEBUMEN )](https://reader034.vdokumen.com/reader034/viewer/2022051300/5872401d1a28ab102f8b7657/html5/thumbnails/1.jpg)
Pengenalan HTML
Dosen : Bambang Sugianto, S.T., M.Kom
Program Studi Teknik InformatikaUniversitas Ma’arif Nahdlatul Ulama Kebumen (UMNU Kebumen)
![Page 2: Pengenalan HTML ( Bambang Sugianto, S.T., M.Kom - UMNU KEBUMEN )](https://reader034.vdokumen.com/reader034/viewer/2022051300/5872401d1a28ab102f8b7657/html5/thumbnails/2.jpg)
Apa itu HTML? Dengan HTML Anda dapat membuat situs Web
Anda sendiri. Tutorial ini mengajarkan Anda segala sesuatu
tentang HTML. HTML mudah dipelajari - Anda akan
menikmatinya.
![Page 3: Pengenalan HTML ( Bambang Sugianto, S.T., M.Kom - UMNU KEBUMEN )](https://reader034.vdokumen.com/reader034/viewer/2022051300/5872401d1a28ab102f8b7657/html5/thumbnails/3.jpg)
Apa itu HTML? HTML adalah
bahasa markup untuk mendeskripsikan dokumen web (halaman web).
HTML singkatan H yper T ext M arkup L anguage
Sebuah bahasa markup adalah seperangkat tag markup
Dokumen HTML dijelaskan oleh tag HTML Setiap tag HTML menjelaskan isi dokumen
yang berbeda
![Page 4: Pengenalan HTML ( Bambang Sugianto, S.T., M.Kom - UMNU KEBUMEN )](https://reader034.vdokumen.com/reader034/viewer/2022051300/5872401d1a28ab102f8b7657/html5/thumbnails/4.jpg)
Memilih Aplikasi Editor HTML
Setelah web browser berhasil diinstal, untuk membuat kode HTML, kita membutuhkan sebuah aplikasi text editor.
Dalam tutorial HTML kali ini kita menggunakan aplikasi text editor Notepad++.
![Page 5: Pengenalan HTML ( Bambang Sugianto, S.T., M.Kom - UMNU KEBUMEN )](https://reader034.vdokumen.com/reader034/viewer/2022051300/5872401d1a28ab102f8b7657/html5/thumbnails/5.jpg)
Contoh
![Page 6: Pengenalan HTML ( Bambang Sugianto, S.T., M.Kom - UMNU KEBUMEN )](https://reader034.vdokumen.com/reader034/viewer/2022051300/5872401d1a28ab102f8b7657/html5/thumbnails/6.jpg)
Penjelasan Teks antara <html> dan </
html> menggambarkan sebuah dokumen HTML Teks antara <head> dan </ head> memberikan
informasi tentang dokumen Teks antara <title> dan </ title> memberikan
judul untuk dokumen Teks antara <body> dan </
body> menggambarkan isi halaman yang terlihat Teks antara <h1> dan </ h1> menggambarkan
judul Teks antara <p> dan </ p> menggambarkan
sebuah paragraf
![Page 7: Pengenalan HTML ( Bambang Sugianto, S.T., M.Kom - UMNU KEBUMEN )](https://reader034.vdokumen.com/reader034/viewer/2022051300/5872401d1a28ab102f8b7657/html5/thumbnails/7.jpg)
Struktur Halaman HTML
![Page 8: Pengenalan HTML ( Bambang Sugianto, S.T., M.Kom - UMNU KEBUMEN )](https://reader034.vdokumen.com/reader034/viewer/2022051300/5872401d1a28ab102f8b7657/html5/thumbnails/8.jpg)
HTML Headings
![Page 9: Pengenalan HTML ( Bambang Sugianto, S.T., M.Kom - UMNU KEBUMEN )](https://reader034.vdokumen.com/reader034/viewer/2022051300/5872401d1a28ab102f8b7657/html5/thumbnails/9.jpg)
HTML Paragraphs
![Page 10: Pengenalan HTML ( Bambang Sugianto, S.T., M.Kom - UMNU KEBUMEN )](https://reader034.vdokumen.com/reader034/viewer/2022051300/5872401d1a28ab102f8b7657/html5/thumbnails/10.jpg)
Link HTML
![Page 11: Pengenalan HTML ( Bambang Sugianto, S.T., M.Kom - UMNU KEBUMEN )](https://reader034.vdokumen.com/reader034/viewer/2022051300/5872401d1a28ab102f8b7657/html5/thumbnails/11.jpg)
Gambar HTML Gambar HTML didefinisikan dengan tag <img>. File sumber (src), alternatif teks (alt), dan
ukuran (lebar dan tinggi) disediakan sebagai atribut:
![Page 12: Pengenalan HTML ( Bambang Sugianto, S.T., M.Kom - UMNU KEBUMEN )](https://reader034.vdokumen.com/reader034/viewer/2022051300/5872401d1a28ab102f8b7657/html5/thumbnails/12.jpg)
HTML Styles Pengaturan gaya elemen HTML, dapat dilakukan dengan atribut style. Atribut style HTML memiliki sintaks berikut:
![Page 13: Pengenalan HTML ( Bambang Sugianto, S.T., M.Kom - UMNU KEBUMEN )](https://reader034.vdokumen.com/reader034/viewer/2022051300/5872401d1a28ab102f8b7657/html5/thumbnails/13.jpg)
HTML Warna Background Properti background-color mendefinisikan warna latar belakang
untuk elemen HTML: Contoh ini menetapkan latar belakang untuk halaman untuk
lightgrey:
![Page 14: Pengenalan HTML ( Bambang Sugianto, S.T., M.Kom - UMNU KEBUMEN )](https://reader034.vdokumen.com/reader034/viewer/2022051300/5872401d1a28ab102f8b7657/html5/thumbnails/14.jpg)
HTML Warna Teks Properti color mendefinisikan warna teks untuk elemen HTML:
![Page 15: Pengenalan HTML ( Bambang Sugianto, S.T., M.Kom - UMNU KEBUMEN )](https://reader034.vdokumen.com/reader034/viewer/2022051300/5872401d1a28ab102f8b7657/html5/thumbnails/15.jpg)
HTML Font Properti font-family mendefinisikan font yang akan
digunakan untuk elemen HTML:
![Page 16: Pengenalan HTML ( Bambang Sugianto, S.T., M.Kom - UMNU KEBUMEN )](https://reader034.vdokumen.com/reader034/viewer/2022051300/5872401d1a28ab102f8b7657/html5/thumbnails/16.jpg)
HTML Formating
![Page 17: Pengenalan HTML ( Bambang Sugianto, S.T., M.Kom - UMNU KEBUMEN )](https://reader034.vdokumen.com/reader034/viewer/2022051300/5872401d1a28ab102f8b7657/html5/thumbnails/17.jpg)
HTML Text Alignment Properti text-align mendefinisikan perataan teks
horisontal untuk elemen HTML:
![Page 18: Pengenalan HTML ( Bambang Sugianto, S.T., M.Kom - UMNU KEBUMEN )](https://reader034.vdokumen.com/reader034/viewer/2022051300/5872401d1a28ab102f8b7657/html5/thumbnails/18.jpg)
HTML Marquees Anda juga dapat menggunakan <marquee> tag untuk membuat
membuat teks / gambar gulir dari kanan ke kiri, kiri ke kanan, atas ke bawah, atau bawah ke atas.
Jika Anda tidak dapat melihat contoh, kemungkinan bahwa browser Anda tidak mendukung <marquee> tag.
![Page 19: Pengenalan HTML ( Bambang Sugianto, S.T., M.Kom - UMNU KEBUMEN )](https://reader034.vdokumen.com/reader034/viewer/2022051300/5872401d1a28ab102f8b7657/html5/thumbnails/19.jpg)
HTML Marquees (Behavior & Direction)
![Page 20: Pengenalan HTML ( Bambang Sugianto, S.T., M.Kom - UMNU KEBUMEN )](https://reader034.vdokumen.com/reader034/viewer/2022051300/5872401d1a28ab102f8b7657/html5/thumbnails/20.jpg)
HTML Marquees (Change the Scrolling Speed)
![Page 21: Pengenalan HTML ( Bambang Sugianto, S.T., M.Kom - UMNU KEBUMEN )](https://reader034.vdokumen.com/reader034/viewer/2022051300/5872401d1a28ab102f8b7657/html5/thumbnails/21.jpg)
Table Menggunakan tag <table></table> untuk membuat tabel Menggunakan tag <tr> </tr> untuk membuat baris Menggunakan tag <td> </td> untuk membuat kolom
![Page 22: Pengenalan HTML ( Bambang Sugianto, S.T., M.Kom - UMNU KEBUMEN )](https://reader034.vdokumen.com/reader034/viewer/2022051300/5872401d1a28ab102f8b7657/html5/thumbnails/22.jpg)
Tabel 1
![Page 23: Pengenalan HTML ( Bambang Sugianto, S.T., M.Kom - UMNU KEBUMEN )](https://reader034.vdokumen.com/reader034/viewer/2022051300/5872401d1a28ab102f8b7657/html5/thumbnails/23.jpg)
Tabel 2 Menggabungkan 2 kolom atau lebih menggunakan colspan
![Page 24: Pengenalan HTML ( Bambang Sugianto, S.T., M.Kom - UMNU KEBUMEN )](https://reader034.vdokumen.com/reader034/viewer/2022051300/5872401d1a28ab102f8b7657/html5/thumbnails/24.jpg)
Tabel 3Menggabungkan 2 baris atau lebih menggunnakan rowspan :
![Page 25: Pengenalan HTML ( Bambang Sugianto, S.T., M.Kom - UMNU KEBUMEN )](https://reader034.vdokumen.com/reader034/viewer/2022051300/5872401d1a28ab102f8b7657/html5/thumbnails/25.jpg)
Unordered HTML Lists Daftar unordered dimulai dengan <ul> tag. Setiap item daftar
dimulai dengan <li> tag. Daftar item akan ditandai dengan peluru (lingkaran hitam kecil):
![Page 26: Pengenalan HTML ( Bambang Sugianto, S.T., M.Kom - UMNU KEBUMEN )](https://reader034.vdokumen.com/reader034/viewer/2022051300/5872401d1a28ab102f8b7657/html5/thumbnails/26.jpg)
Unordered HTML Lists
![Page 27: Pengenalan HTML ( Bambang Sugianto, S.T., M.Kom - UMNU KEBUMEN )](https://reader034.vdokumen.com/reader034/viewer/2022051300/5872401d1a28ab102f8b7657/html5/thumbnails/27.jpg)
Ordered HTML Lists Dimulai dengan <ol> tag. Setiap item daftar dimulai dengan <li> tag. Daftar item akan ditandai dengan nomor:
![Page 28: Pengenalan HTML ( Bambang Sugianto, S.T., M.Kom - UMNU KEBUMEN )](https://reader034.vdokumen.com/reader034/viewer/2022051300/5872401d1a28ab102f8b7657/html5/thumbnails/28.jpg)
Ordered HTML Lists
![Page 29: Pengenalan HTML ( Bambang Sugianto, S.T., M.Kom - UMNU KEBUMEN )](https://reader034.vdokumen.com/reader034/viewer/2022051300/5872401d1a28ab102f8b7657/html5/thumbnails/29.jpg)
HTML YouTube Videos Untuk memutar video Anda pada halaman web, lakukan hal berikut: Mengunggah video ke YouTube Mengambil catatan dari id video yang Mendefinisikan <iframe> elemen dalam halaman web Anda Biarkan titik atribut src untuk URL video Gunakan lebar dan tinggi atribut untuk menentukan dimensi dari pemain Menambahkan parameter lain untuk URL
![Page 30: Pengenalan HTML ( Bambang Sugianto, S.T., M.Kom - UMNU KEBUMEN )](https://reader034.vdokumen.com/reader034/viewer/2022051300/5872401d1a28ab102f8b7657/html5/thumbnails/30.jpg)
Terima kasih