SlideShare a Scribd company logo
1 of 14
B e l a j a r P e m r o g r a m a n H T M L
Zidan Rasyidi Lazuardani
Arsitektur dan Organisasi
Komputer
Coding
Investasi Masa Depan Untuk Millenial
Kita akan berkenalan dengan HTML
Apa itu HTML ?01
Kita akan mengenal komponen dan struktur dasar pemrograman
HTML
Dasar Pemrograman HTML02
Kita akan membuat program sederhana dengan cara mulai
menulis kode
Mulai Membuat Program03
Kita akan menampilkan kode yang kita buat pada halaman
browser
Menampilkan Program04
Pemrograman
HTML
Software Notepad
Komputer / Laptop / PC
Apa yang kita butuhkan ?
Browser
A p a i t u H T M L ?
1
</>
HTML adalah singkatan dari Hypertext Markup Language. HTML
memungkinkan seorang user untuk membuat dan menyusun bagian
paragraf, heading, link atau tautan, dan blockquote untuk halaman web
dan aplikasi.
Fungsi HTML
Membuat halaman web
Menampilkan berbagai informasi
di dalam sebuah browser Internet
Membuat link menuju halaman we
b lain dengan kode tertentu (hype
rtext).
Fungsi
Umum
Secara umum, fungsi HTML
adalah untuk mengelola
serangkaian data dan
informasi sehingga suatu
dokumen dapat diakses dan
ditampilkan di Internet melalui
layanan web.
Contoh
Tampilan
HTML
Tampilan sederhana HTML.
Web Zidastro
Tampilan HTML dengan CSS dan
JavaScript
Web MyCampus
UMSIDA
Dasar – Dasar
Pemorograman HTML2
HTML
Komponen
TAG
Tag, yaitu teks
khusus (markup) berupa dua
karakter "<" dan ">",
contoh <body>
Atribute
Attribute, Attribute
mendefinisikan property dari suatu
element HTML
Element
Element, element terdiri atas tiga
bagian, yaitu tag pembuka, isi,
dan tag penutup.
Element HTML
Element HTML, Menyatakan
pada browser bahwa dokumen
Web yang digunakan adalah
HTML
<html>
<head>
<title> judul dokumen html </title>
</head>
<body>
Content web ditulis disini - struktur dasar
HTML
</body>
</html>
You can simply impress your audience and add
a unique zing and appeal to your Presentations.
Content
Here
Element HEAD
Element HEAD, Menyatakan
kepala dari sebuah dokumen Element TITLE
Element TITLE, Merupakan judul
dari dokumen HTML yang
ditampilkan pada judul jendela
browser
Element BODY
Element BODY, Element ini untuk
menampilkan isi dokumen HTML
Mulai Membuat HTML
Sederhana Sendiri
Buat kalimat sederhana untuk
ditampilkan
Ayo Mulai
Buat kode yang sangat sederhana
untuk memulai belajar.
Apa yang harus dilakukan ?
3
Sangat Mudah
• Buka Notepad
• Ketikkan kode disamping
• Simpan dalam ekstensi .html
Menampilkan Kode ke Browser
Sekarang, tinggal kita
tampilkan kode yang kita
buat
Bagaimana Cara
Menampilkannya ?
4
Hasil Tampilan
• Buka Browser ( Chrome , Explore, dsb )
• Buka file kode yang kita ketikkan tadi
• Drag File tadi ke Browser atau bisa juga kita
buka melalui Browser
• Maka tampilan akan terlihat seperti disamping
Langkah-langkah
TERIMA KASIH
Semoga Berhasil

More Related Content

What's hot (19)

Penggunaan html
Penggunaan htmlPenggunaan html
Penggunaan html
 
3 pemrograman internet html (1)
3 pemrograman internet   html (1)3 pemrograman internet   html (1)
3 pemrograman internet html (1)
 
Presentasi konsep dasar html
Presentasi konsep dasar htmlPresentasi konsep dasar html
Presentasi konsep dasar html
 
Pengenalan struktur elemen html
Pengenalan struktur elemen htmlPengenalan struktur elemen html
Pengenalan struktur elemen html
 
Data
DataData
Data
 
Modul html
Modul htmlModul html
Modul html
 
Dasar html
Dasar htmlDasar html
Dasar html
 
Pengenalan HTML ( Bambang Sugianto, S.T., M.Kom - UMNU KEBUMEN )
Pengenalan HTML ( Bambang Sugianto, S.T., M.Kom - UMNU KEBUMEN )Pengenalan HTML ( Bambang Sugianto, S.T., M.Kom - UMNU KEBUMEN )
Pengenalan HTML ( Bambang Sugianto, S.T., M.Kom - UMNU KEBUMEN )
 
Belajar html dan css tutorial fundamental dalam mempelajari html dan css
Belajar html dan css   tutorial fundamental dalam mempelajari html dan cssBelajar html dan css   tutorial fundamental dalam mempelajari html dan css
Belajar html dan css tutorial fundamental dalam mempelajari html dan css
 
DASAR HTML
DASAR HTMLDASAR HTML
DASAR HTML
 
Html power point
Html power pointHtml power point
Html power point
 
HTML+CSS
HTML+CSSHTML+CSS
HTML+CSS
 
HTML (HYPER TEXT MARKUP LANGUAGE)
HTML (HYPER TEXT MARKUP LANGUAGE)HTML (HYPER TEXT MARKUP LANGUAGE)
HTML (HYPER TEXT MARKUP LANGUAGE)
 
Belajar dasar html
Belajar dasar htmlBelajar dasar html
Belajar dasar html
 
CSS
CSSCSS
CSS
 
Html 5
Html 5Html 5
Html 5
 
Jamal's dokumen
Jamal's dokumenJamal's dokumen
Jamal's dokumen
 
Modul 2a html
Modul 2a htmlModul 2a html
Modul 2a html
 
Belajar HTML
Belajar HTMLBelajar HTML
Belajar HTML
 

Similar to Tugas ppt pak izza html

MEDIA BELAJAR PENGANTAR HTML.pptx
MEDIA BELAJAR PENGANTAR HTML.pptxMEDIA BELAJAR PENGANTAR HTML.pptx
MEDIA BELAJAR PENGANTAR HTML.pptxssuser71d74a
 
Caramembuat website sederhana
Caramembuat website sederhanaCaramembuat website sederhana
Caramembuat website sederhanaHamdani Nurdin
 
fdokumen.com_pengantar-html-56a0e352ed109.ppt
fdokumen.com_pengantar-html-56a0e352ed109.pptfdokumen.com_pengantar-html-56a0e352ed109.ppt
fdokumen.com_pengantar-html-56a0e352ed109.pptRizkyRamdan2
 
2.struktur dasar html (ok)
2.struktur dasar html (ok)2.struktur dasar html (ok)
2.struktur dasar html (ok)Nacha Evangelion
 
Cara membuat html (desma susanti)
Cara membuat html (desma susanti)Cara membuat html (desma susanti)
Cara membuat html (desma susanti)Desma_susanti
 
Modul web programing
Modul web programingModul web programing
Modul web programingFitra Sani
 
Homepage untuk informasi dan komunikasi
Homepage untuk informasi dan komunikasiHomepage untuk informasi dan komunikasi
Homepage untuk informasi dan komunikasiResa Firmansyah
 
pemrograman internet
pemrograman internetpemrograman internet
pemrograman internetmafailmi
 
Ilmuwebsite.com html css-dari_akar_ke_daun
Ilmuwebsite.com html css-dari_akar_ke_daunIlmuwebsite.com html css-dari_akar_ke_daun
Ilmuwebsite.com html css-dari_akar_ke_daunHendi Alfiandi
 

Similar to Tugas ppt pak izza html (20)

Makalah html5
Makalah html5Makalah html5
Makalah html5
 
Makalah html5
Makalah html5Makalah html5
Makalah html5
 
Makalah html5
Makalah html5Makalah html5
Makalah html5
 
Makalah html5
Makalah html5Makalah html5
Makalah html5
 
MEDIA BELAJAR PENGANTAR HTML.pptx
MEDIA BELAJAR PENGANTAR HTML.pptxMEDIA BELAJAR PENGANTAR HTML.pptx
MEDIA BELAJAR PENGANTAR HTML.pptx
 
Caramembuat website sederhana
Caramembuat website sederhanaCaramembuat website sederhana
Caramembuat website sederhana
 
fdokumen.com_pengantar-html-56a0e352ed109.ppt
fdokumen.com_pengantar-html-56a0e352ed109.pptfdokumen.com_pengantar-html-56a0e352ed109.ppt
fdokumen.com_pengantar-html-56a0e352ed109.ppt
 
2.struktur dasar html (ok)
2.struktur dasar html (ok)2.struktur dasar html (ok)
2.struktur dasar html (ok)
 
Proyek web
Proyek webProyek web
Proyek web
 
Cara membuat html (desma susanti)
Cara membuat html (desma susanti)Cara membuat html (desma susanti)
Cara membuat html (desma susanti)
 
Training HTML
Training HTMLTraining HTML
Training HTML
 
Modul web programing
Modul web programingModul web programing
Modul web programing
 
Modul webdesign
Modul webdesignModul webdesign
Modul webdesign
 
Modul web affif
Modul web affifModul web affif
Modul web affif
 
Homepage untuk informasi dan komunikasi
Homepage untuk informasi dan komunikasiHomepage untuk informasi dan komunikasi
Homepage untuk informasi dan komunikasi
 
Laporan pratikum 1
Laporan pratikum 1Laporan pratikum 1
Laporan pratikum 1
 
Modul web programing
Modul web programingModul web programing
Modul web programing
 
3947109.ppt
3947109.ppt3947109.ppt
3947109.ppt
 
pemrograman internet
pemrograman internetpemrograman internet
pemrograman internet
 
Ilmuwebsite.com html css-dari_akar_ke_daun
Ilmuwebsite.com html css-dari_akar_ke_daunIlmuwebsite.com html css-dari_akar_ke_daun
Ilmuwebsite.com html css-dari_akar_ke_daun
 

Tugas ppt pak izza html

  • 1. B e l a j a r P e m r o g r a m a n H T M L Zidan Rasyidi Lazuardani Arsitektur dan Organisasi Komputer
  • 2. Coding Investasi Masa Depan Untuk Millenial
  • 3. Kita akan berkenalan dengan HTML Apa itu HTML ?01 Kita akan mengenal komponen dan struktur dasar pemrograman HTML Dasar Pemrograman HTML02 Kita akan membuat program sederhana dengan cara mulai menulis kode Mulai Membuat Program03 Kita akan menampilkan kode yang kita buat pada halaman browser Menampilkan Program04 Pemrograman HTML
  • 4. Software Notepad Komputer / Laptop / PC Apa yang kita butuhkan ? Browser
  • 5. A p a i t u H T M L ? 1 </> HTML adalah singkatan dari Hypertext Markup Language. HTML memungkinkan seorang user untuk membuat dan menyusun bagian paragraf, heading, link atau tautan, dan blockquote untuk halaman web dan aplikasi.
  • 6. Fungsi HTML Membuat halaman web Menampilkan berbagai informasi di dalam sebuah browser Internet Membuat link menuju halaman we b lain dengan kode tertentu (hype rtext). Fungsi Umum Secara umum, fungsi HTML adalah untuk mengelola serangkaian data dan informasi sehingga suatu dokumen dapat diakses dan ditampilkan di Internet melalui layanan web.
  • 7. Contoh Tampilan HTML Tampilan sederhana HTML. Web Zidastro Tampilan HTML dengan CSS dan JavaScript Web MyCampus UMSIDA
  • 9. HTML Komponen TAG Tag, yaitu teks khusus (markup) berupa dua karakter "<" dan ">", contoh <body> Atribute Attribute, Attribute mendefinisikan property dari suatu element HTML Element Element, element terdiri atas tiga bagian, yaitu tag pembuka, isi, dan tag penutup. Element HTML Element HTML, Menyatakan pada browser bahwa dokumen Web yang digunakan adalah HTML <html> <head> <title> judul dokumen html </title> </head> <body> Content web ditulis disini - struktur dasar HTML </body> </html> You can simply impress your audience and add a unique zing and appeal to your Presentations. Content Here Element HEAD Element HEAD, Menyatakan kepala dari sebuah dokumen Element TITLE Element TITLE, Merupakan judul dari dokumen HTML yang ditampilkan pada judul jendela browser Element BODY Element BODY, Element ini untuk menampilkan isi dokumen HTML
  • 10. Mulai Membuat HTML Sederhana Sendiri Buat kalimat sederhana untuk ditampilkan Ayo Mulai Buat kode yang sangat sederhana untuk memulai belajar. Apa yang harus dilakukan ? 3
  • 11. Sangat Mudah • Buka Notepad • Ketikkan kode disamping • Simpan dalam ekstensi .html
  • 12. Menampilkan Kode ke Browser Sekarang, tinggal kita tampilkan kode yang kita buat Bagaimana Cara Menampilkannya ? 4
  • 13. Hasil Tampilan • Buka Browser ( Chrome , Explore, dsb ) • Buka file kode yang kita ketikkan tadi • Drag File tadi ke Browser atau bisa juga kita buka melalui Browser • Maka tampilan akan terlihat seperti disamping Langkah-langkah