SlideShare une entreprise Scribd logo
1  sur  30
Pengenalan HTML
Dosen : Bambang Sugianto, ST., M.Kom
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.
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
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++.
Contoh
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
Struktur Halaman HTML
HTML Headings
HTML Paragraphs
Link HTML
Gambar HTML
 Gambar HTML didefinisikan dengan tag <img>.
 File sumber (src), alternatif teks (alt), dan ukuran (lebar dan tinggi) disediakan
sebagai atribut:
HTML Styles
 Pengaturan gaya elemen HTML, dapat dilakukan dengan atribut
style.
 Atribut style HTML memiliki sintaks berikut:
HTML Warna Background
 Properti background-color mendefinisikan warna latar belakang
untuk elemen HTML:
 Contoh ini menetapkan latar belakang untuk halaman untuk
lightgrey:
HTML Warna Teks
 Properti color mendefinisikan warna teks untuk elemen
HTML:
HTML Font
 Properti font-family mendefinisikan font yang akan
digunakan untuk elemen HTML:
HTML Formating
HTML Text Alignment
 Properti text-align mendefinisikan perataan teks
horisontal untuk elemen HTML:
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.
HTML Marquees (Behavior & Direction)
HTML Marquees (Change the Scrolling Speed)
Table
 Menggunakan tag <table></table> untuk membuat tabel
 Menggunakan tag <tr> </tr> untuk membuat baris
 Menggunakan tag <td> </td> untuk membuat kolom
Tabel 1
Tabel 2
 Menggabungkan 2 kolom atau lebih menggunakan
colspan
Tabel 3
Menggabungkan 2 baris atau lebih menggunnakan
rowspan :
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):
Unordered HTML Lists
Ordered HTML Lists
 Dimulai dengan <ol> tag. Setiap item daftar dimulai
dengan <li> tag.
 Daftar item akan ditandai dengan nomor:
Ordered HTML Lists
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
Terima kasih

Contenu connexe

Tendances

Tendances (20)

Html dan php
Html dan phpHtml dan php
Html dan php
 
Pemrograman web modul 1 dan 2
Pemrograman web  modul 1 dan 2Pemrograman web  modul 1 dan 2
Pemrograman web modul 1 dan 2
 
Pengenalan struktur elemen html
Pengenalan struktur elemen htmlPengenalan struktur elemen html
Pengenalan struktur elemen html
 
9. b.. . .
9. b.. . .9. b.. . .
9. b.. . .
 
Presentasi konsep dasar html
Presentasi konsep dasar htmlPresentasi konsep dasar html
Presentasi konsep dasar html
 
Modul table html
Modul table htmlModul table html
Modul table html
 
Dasar pemrograman web HTML
Dasar pemrograman web HTMLDasar pemrograman web HTML
Dasar pemrograman web HTML
 
DASAR HTML
DASAR HTMLDASAR HTML
DASAR HTML
 
Modul 2a html
Modul 2a htmlModul 2a html
Modul 2a html
 
Materi ke 4
Materi ke 4Materi ke 4
Materi ke 4
 
Modul web affif
Modul web affifModul web affif
Modul web affif
 
Modul 2-form html-css
Modul 2-form html-cssModul 2-form html-css
Modul 2-form html-css
 
Belajar html
Belajar htmlBelajar html
Belajar html
 
Cara membuat html (desma susanti)
Cara membuat html (desma susanti)Cara membuat html (desma susanti)
Cara membuat html (desma susanti)
 
Jamal's dokumen
Jamal's dokumenJamal's dokumen
Jamal's dokumen
 
Penggunaan html
Penggunaan htmlPenggunaan html
Penggunaan html
 
01 html
01 html01 html
01 html
 
Membuat desain website berbasis html dengan notepad
Membuat desain website berbasis html dengan notepadMembuat desain website berbasis html dengan notepad
Membuat desain website berbasis html dengan notepad
 
Pemrograman Internet - HTML (1)
Pemrograman Internet - HTML (1)Pemrograman Internet - HTML (1)
Pemrograman Internet - HTML (1)
 
Langkah demi langkah menguasai html 5 (versi alpha)
Langkah demi langkah menguasai html 5 (versi alpha)Langkah demi langkah menguasai html 5 (versi alpha)
Langkah demi langkah menguasai html 5 (versi alpha)
 

En vedette

Tata cara terhubung ke internet
Tata cara terhubung ke internetTata cara terhubung ke internet
Tata cara terhubung ke internetRidwan Firmansyah
 
Panduan menggunakan laptop bagi pemula
Panduan menggunakan laptop bagi pemulaPanduan menggunakan laptop bagi pemula
Panduan menggunakan laptop bagi pemulaSahman Kaelani
 
Executive Interview2 (Foto)
Executive Interview2 (Foto)Executive Interview2 (Foto)
Executive Interview2 (Foto)dxdon
 
Alam nasyrah laka shadrak
Alam nasyrah laka shadrakAlam nasyrah laka shadrak
Alam nasyrah laka shadrakBukalapak
 
Tugas aplikasi komputer
Tugas aplikasi komputerTugas aplikasi komputer
Tugas aplikasi komputeradhindayuli
 
tugas aplikasi komputer
tugas aplikasi komputertugas aplikasi komputer
tugas aplikasi komputeranggraini03
 
La star uml class diagram
La star uml class diagramLa star uml class diagram
La star uml class diagramYoseph Purba
 
Harbolnas 2015 part 01
Harbolnas 2015 part 01Harbolnas 2015 part 01
Harbolnas 2015 part 01JAKPATAPP
 
Panduan menggunakan laptop bagi pemula
Panduan menggunakan laptop bagi pemulaPanduan menggunakan laptop bagi pemula
Panduan menggunakan laptop bagi pemulaSahman Kaelani
 
RPL_UML_toko online
RPL_UML_toko onlineRPL_UML_toko online
RPL_UML_toko onlinefaqih_id
 
Statistik 5th anniversary tokopedia di Ecommerce Indonesia
Statistik 5th anniversary tokopedia di Ecommerce IndonesiaStatistik 5th anniversary tokopedia di Ecommerce Indonesia
Statistik 5th anniversary tokopedia di Ecommerce Indonesiastartupbisnis
 
Kuliah elektronik bisnis (e-business) IT-UHO (pert2-3)
Kuliah elektronik bisnis (e-business) IT-UHO (pert2-3)Kuliah elektronik bisnis (e-business) IT-UHO (pert2-3)
Kuliah elektronik bisnis (e-business) IT-UHO (pert2-3)Mutmainnah Muchtar
 
Tugas aplikasi komputer ana
Tugas aplikasi komputer anaTugas aplikasi komputer ana
Tugas aplikasi komputer anaist1ana
 
Panduan Pemrograman Berbasis Web dengan HTML, PHP, dan Database MySQL Part 2 ...
Panduan Pemrograman Berbasis Web dengan HTML, PHP, dan Database MySQL Part 2 ...Panduan Pemrograman Berbasis Web dengan HTML, PHP, dan Database MySQL Part 2 ...
Panduan Pemrograman Berbasis Web dengan HTML, PHP, dan Database MySQL Part 2 ...Doni Tobing
 
Pembuatan uml pada toko belanja online
Pembuatan uml pada toko belanja onlinePembuatan uml pada toko belanja online
Pembuatan uml pada toko belanja onlineandiseprianto
 
Kopi Chat with William Tanuwijaya founder of Tokopedia
Kopi Chat with William Tanuwijaya founder of TokopediaKopi Chat with William Tanuwijaya founder of Tokopedia
Kopi Chat with William Tanuwijaya founder of TokopediaBLOCK71 Singapore
 
Tokopedia - How Tokopedia Became one of Indonesia’s Most Promising Startups
Tokopedia - How Tokopedia Became one of Indonesia’s Most Promising StartupsTokopedia - How Tokopedia Became one of Indonesia’s Most Promising Startups
Tokopedia - How Tokopedia Became one of Indonesia’s Most Promising Startupse27
 

En vedette (20)

Tata cara terhubung ke internet
Tata cara terhubung ke internetTata cara terhubung ke internet
Tata cara terhubung ke internet
 
Panduan menggunakan laptop bagi pemula
Panduan menggunakan laptop bagi pemulaPanduan menggunakan laptop bagi pemula
Panduan menggunakan laptop bagi pemula
 
Executive Interview2 (Foto)
Executive Interview2 (Foto)Executive Interview2 (Foto)
Executive Interview2 (Foto)
 
Alam nasyrah laka shadrak
Alam nasyrah laka shadrakAlam nasyrah laka shadrak
Alam nasyrah laka shadrak
 
Tugas aplikasi komputer
Tugas aplikasi komputerTugas aplikasi komputer
Tugas aplikasi komputer
 
tugas aplikasi komputer
tugas aplikasi komputertugas aplikasi komputer
tugas aplikasi komputer
 
La star uml class diagram
La star uml class diagramLa star uml class diagram
La star uml class diagram
 
Harbolnas 2015 part 01
Harbolnas 2015 part 01Harbolnas 2015 part 01
Harbolnas 2015 part 01
 
Bukalapak
BukalapakBukalapak
Bukalapak
 
Panduan menggunakan laptop bagi pemula
Panduan menggunakan laptop bagi pemulaPanduan menggunakan laptop bagi pemula
Panduan menggunakan laptop bagi pemula
 
RPL_UML_toko online
RPL_UML_toko onlineRPL_UML_toko online
RPL_UML_toko online
 
Ppt
PptPpt
Ppt
 
Statistik 5th anniversary tokopedia di Ecommerce Indonesia
Statistik 5th anniversary tokopedia di Ecommerce IndonesiaStatistik 5th anniversary tokopedia di Ecommerce Indonesia
Statistik 5th anniversary tokopedia di Ecommerce Indonesia
 
Kuliah elektronik bisnis (e-business) IT-UHO (pert2-3)
Kuliah elektronik bisnis (e-business) IT-UHO (pert2-3)Kuliah elektronik bisnis (e-business) IT-UHO (pert2-3)
Kuliah elektronik bisnis (e-business) IT-UHO (pert2-3)
 
Tugas aplikasi komputer ana
Tugas aplikasi komputer anaTugas aplikasi komputer ana
Tugas aplikasi komputer ana
 
Panduan Pemrograman Berbasis Web dengan HTML, PHP, dan Database MySQL Part 2 ...
Panduan Pemrograman Berbasis Web dengan HTML, PHP, dan Database MySQL Part 2 ...Panduan Pemrograman Berbasis Web dengan HTML, PHP, dan Database MySQL Part 2 ...
Panduan Pemrograman Berbasis Web dengan HTML, PHP, dan Database MySQL Part 2 ...
 
Pembuatan uml pada toko belanja online
Pembuatan uml pada toko belanja onlinePembuatan uml pada toko belanja online
Pembuatan uml pada toko belanja online
 
Kopi Chat with William Tanuwijaya founder of Tokopedia
Kopi Chat with William Tanuwijaya founder of TokopediaKopi Chat with William Tanuwijaya founder of Tokopedia
Kopi Chat with William Tanuwijaya founder of Tokopedia
 
Tokopedia - How Tokopedia Became one of Indonesia’s Most Promising Startups
Tokopedia - How Tokopedia Became one of Indonesia’s Most Promising StartupsTokopedia - How Tokopedia Became one of Indonesia’s Most Promising Startups
Tokopedia - How Tokopedia Became one of Indonesia’s Most Promising Startups
 
Buku Ajar Pemrograman Web
Buku Ajar Pemrograman WebBuku Ajar Pemrograman Web
Buku Ajar Pemrograman Web
 

Similaire à Pengenalan html (Bambang Sugianto)

Similaire à Pengenalan html (Bambang Sugianto) (20)

Praktek
PraktekPraktek
Praktek
 
Html
HtmlHtml
Html
 
Desain web 1
Desain web 1Desain web 1
Desain web 1
 
Materi_8_-_Pengenalan_HTML_-_Revisi1.ppt
Materi_8_-_Pengenalan_HTML_-_Revisi1.pptMateri_8_-_Pengenalan_HTML_-_Revisi1.ppt
Materi_8_-_Pengenalan_HTML_-_Revisi1.ppt
 
Modul HTML5
Modul HTML5Modul HTML5
Modul HTML5
 
HTML.pptx
HTML.pptxHTML.pptx
HTML.pptx
 
materi html xii mm.ppt
materi html xii mm.pptmateri html xii mm.ppt
materi html xii mm.ppt
 
Materi_Pengenalan_HTML_Revisi.ppt
Materi_Pengenalan_HTML_Revisi.pptMateri_Pengenalan_HTML_Revisi.ppt
Materi_Pengenalan_HTML_Revisi.ppt
 
Web dasar i
Web dasar iWeb dasar i
Web dasar i
 
Materi_8_-_Pengenalan_HTML_-_Revisi.ppt
Materi_8_-_Pengenalan_HTML_-_Revisi.pptMateri_8_-_Pengenalan_HTML_-_Revisi.ppt
Materi_8_-_Pengenalan_HTML_-_Revisi.ppt
 
Materi_8_-_Pengenalan_HTML_-_Revisi.ppt
Materi_8_-_Pengenalan_HTML_-_Revisi.pptMateri_8_-_Pengenalan_HTML_-_Revisi.ppt
Materi_8_-_Pengenalan_HTML_-_Revisi.ppt
 
Training HTML
Training HTMLTraining HTML
Training HTML
 
Pengantar html
Pengantar htmlPengantar html
Pengantar html
 
01. pengenalan tabel
01. pengenalan tabel01. pengenalan tabel
01. pengenalan tabel
 
Dasar html taufan_riyadi
Dasar html taufan_riyadiDasar html taufan_riyadi
Dasar html taufan_riyadi
 
Ppt materi
Ppt materiPpt materi
Ppt materi
 
Dasar html
Dasar htmlDasar html
Dasar html
 
Tutorial html + my sql + php
Tutorial html + my sql + phpTutorial html + my sql + php
Tutorial html + my sql + php
 
Praktikum_Pengenalan_HTML
Praktikum_Pengenalan_HTML Praktikum_Pengenalan_HTML
Praktikum_Pengenalan_HTML
 
Mengenal Struktur Web dan Bahasa Pemerograman HTML
Mengenal Struktur Web dan Bahasa Pemerograman HTMLMengenal Struktur Web dan Bahasa Pemerograman HTML
Mengenal Struktur Web dan Bahasa Pemerograman HTML
 

Pengenalan html (Bambang Sugianto)

  • 1. Pengenalan HTML Dosen : Bambang Sugianto, ST., M.Kom
  • 2. 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.
  • 3. 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
  • 4. 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++.
  • 6. 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
  • 11. Gambar HTML  Gambar HTML didefinisikan dengan tag <img>.  File sumber (src), alternatif teks (alt), dan ukuran (lebar dan tinggi) disediakan sebagai atribut:
  • 12. HTML Styles  Pengaturan gaya elemen HTML, dapat dilakukan dengan atribut style.  Atribut style HTML memiliki sintaks berikut:
  • 13. HTML Warna Background  Properti background-color mendefinisikan warna latar belakang untuk elemen HTML:  Contoh ini menetapkan latar belakang untuk halaman untuk lightgrey:
  • 14. HTML Warna Teks  Properti color mendefinisikan warna teks untuk elemen HTML:
  • 15. HTML Font  Properti font-family mendefinisikan font yang akan digunakan untuk elemen HTML:
  • 17. HTML Text Alignment  Properti text-align mendefinisikan perataan teks horisontal untuk elemen HTML:
  • 18. 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.
  • 19. HTML Marquees (Behavior & Direction)
  • 20. HTML Marquees (Change the Scrolling Speed)
  • 21. Table  Menggunakan tag <table></table> untuk membuat tabel  Menggunakan tag <tr> </tr> untuk membuat baris  Menggunakan tag <td> </td> untuk membuat kolom
  • 23. Tabel 2  Menggabungkan 2 kolom atau lebih menggunakan colspan
  • 24. Tabel 3 Menggabungkan 2 baris atau lebih menggunnakan rowspan :
  • 25. 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):
  • 27. Ordered HTML Lists  Dimulai dengan <ol> tag. Setiap item daftar dimulai dengan <li> tag.  Daftar item akan ditandai dengan nomor:
  • 29. 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