SlideShare a Scribd company logo
HTML 
Pengembangan Web 
Edwin Lunando 
edwin@kuliahkita.com
Pendahuluan 
HTML - Hypertext Markup Language 
HTML ini adalah bahasa markup yang digunakan untuk 
membangun web pages atau halaman dari situs yang 
biasa dibuka di browser 
HTML ini didefinisikan sebagai aplikasi dari Standard 
Generalized Markup Language (SGML)
Kaitan SGML dan HTML
Penulisan HTML 
Penulisan HTML dilakukan dengan susunan konten yang 
dibungkus Markup Tag (< >) 
Contoh: <p> Saya ingin belajar di KuliahKita </p> 
Markup yang didefinisikan mendeskripsikan: 
● Appearance 
● Layout 
● Content
Penyusun (Element) HTML 
Beberapa penyusun dari HTML: 
● DTD (Doctype) 
● Tag HTML 
● Head 
○ title (wajib) 
○ base, meta, bgsound, script, noscript, style, link 
● Body
Doctype (DTD) 
Doctype atau document type definition berfungsi sebagai 
definisi sintaks konstruksi markup 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN”” "http://www. 
w3.org/TR/html4/strict.dtd"> 
DTD ini diletakkan di awal sebuah file HTML dan digunakan 
untuk memvalidasi dokumen berdasarkan versi yang digunakan
Meta (<meta></meta>) 
Elemen meta digunakan untuk mendefinisikan properti dokumen, 
memberikan informasi pada browser, dan menspesifikasikan HTTP 
Header. 
Selain itu Elemen meta yang rapi juga digunakan untuk meningkatkan 
rank pada search engine result page (SERP) dari hasil optimasi mesin 
pencari (SEO atau Search Engine Optimization). 
<meta name="description" content="Ambil kelas tanpa harus di dalam kelas"> 
<meta name="copyright" content="2014 Kuliah Kita. All rights reserved."> 
<meta property="og:title" content="Tempat Belajar Bersama - KuliahKita" /> 
<meta property="og:image" content="http://oi62.tinypic.com/20j4xt5.jpg" /> 
<meta property="og:description" content="Mari belajar online bersama dengan teman-teman 
dari seluruh Indonesia!" />
Style (<style></style>) 
Style digunakan untuk mendefinisikan cara menampilkan body markup 
dengan meng-override kelakuan standar browser dalam menampilkan 
body markup (atau user-agent stylesheet) 
Mendefinisikan dapat dilakukan di dalam HTML (inline style), tetapi 
tidak disarankan karena akan membuat HTML menjadi “kotor”: 
1. Tidak memisahkan konten dan desain 
2. Mempersulit maintenance 
3. Tidak acessible dalam beberapa kasus 
4. Membuat ukuran halaman lebih besar (menambah beban 
bandwidth, lag, dll)
HTML Body (<body></body>) 
HTML body adalah tempat mendefinisikan konten dari halaman 
situs atau web. Di dalam tag body inilah tag-tag lain dari HTML 
dapat digunakan dan ditampilkan pada situs melalui browser. 
Dalam tag Body sendiri, biasanya konten diapit oleh 
● header : sebuah div atau section yang biasa berupa judul 
halaman dan deskripsi singkat 
● footer : sebuah div atau section yang biasa berupa 
deskripsi tambahan dari halaman atau situs

More Related Content

What's hot

Laporan pbw css
Laporan pbw cssLaporan pbw css
Laporan pbw css
Oppie Rezalina
 
Pertemuan java script 2
Pertemuan java script 2Pertemuan java script 2
Pertemuan java script 2
zaenald i
 
Pemrograman Web - Pengenalan CSS
Pemrograman Web - Pengenalan CSSPemrograman Web - Pengenalan CSS
Pemrograman Web - Pengenalan CSS
KuliahKita
 
HTML dan CSS
HTML dan CSSHTML dan CSS
HTML dan CSS
Vicky Nitinegoro
 
7 pemrograman internet javascript
7 pemrograman internet  javascript7 pemrograman internet  javascript
7 pemrograman internet javascript
Toni Tegar Sahidi
 
Pemrograman Berbasis Web - CSS
Pemrograman Berbasis Web - CSSPemrograman Berbasis Web - CSS
Pemrograman Berbasis Web - CSS
Ahmad Afandi
 
Laporan pemrograman berbasis web
Laporan pemrograman berbasis webLaporan pemrograman berbasis web
Laporan pemrograman berbasis webIlham Yahya
 
CSS Dasar #7 : Selector
CSS Dasar #7 : SelectorCSS Dasar #7 : Selector
CSS Dasar #7 : Selector
Sandhika Galih
 
CSS Dasar #2 : Anatomy CSS
CSS Dasar #2 : Anatomy CSSCSS Dasar #2 : Anatomy CSS
CSS Dasar #2 : Anatomy CSS
Sandhika Galih
 
1. Pengantar HTML
1. Pengantar HTML1. Pengantar HTML
1. Pengantar HTMLRatzman III
 
Tugas9 ku-0316-dody alfad-1511510669
Tugas9 ku-0316-dody alfad-1511510669Tugas9 ku-0316-dody alfad-1511510669
Tugas9 ku-0316-dody alfad-1511510669
dodyalfad
 
CSS Dasar #1 : Intro
CSS Dasar #1 : IntroCSS Dasar #1 : Intro
CSS Dasar #1 : Intro
Sandhika Galih
 

What's hot (18)

Laporan pbw css
Laporan pbw cssLaporan pbw css
Laporan pbw css
 
Pertemuan java script 2
Pertemuan java script 2Pertemuan java script 2
Pertemuan java script 2
 
Tutorial
TutorialTutorial
Tutorial
 
Pemrograman Web - Pengenalan CSS
Pemrograman Web - Pengenalan CSSPemrograman Web - Pengenalan CSS
Pemrograman Web - Pengenalan CSS
 
HTML dan CSS
HTML dan CSSHTML dan CSS
HTML dan CSS
 
7 pemrograman internet javascript
7 pemrograman internet  javascript7 pemrograman internet  javascript
7 pemrograman internet javascript
 
Pemrograman Berbasis Web - CSS
Pemrograman Berbasis Web - CSSPemrograman Berbasis Web - CSS
Pemrograman Berbasis Web - CSS
 
CSS
CSSCSS
CSS
 
Laporan pemrograman berbasis web
Laporan pemrograman berbasis webLaporan pemrograman berbasis web
Laporan pemrograman berbasis web
 
Tugaspbw
TugaspbwTugaspbw
Tugaspbw
 
CSS Dasar #7 : Selector
CSS Dasar #7 : SelectorCSS Dasar #7 : Selector
CSS Dasar #7 : Selector
 
1
11
1
 
CSS Dasar #2 : Anatomy CSS
CSS Dasar #2 : Anatomy CSSCSS Dasar #2 : Anatomy CSS
CSS Dasar #2 : Anatomy CSS
 
01 html
01 html01 html
01 html
 
1. Pengantar HTML
1. Pengantar HTML1. Pengantar HTML
1. Pengantar HTML
 
Tugas9 ku-0316-dody alfad-1511510669
Tugas9 ku-0316-dody alfad-1511510669Tugas9 ku-0316-dody alfad-1511510669
Tugas9 ku-0316-dody alfad-1511510669
 
CSS Dasar #1 : Intro
CSS Dasar #1 : IntroCSS Dasar #1 : Intro
CSS Dasar #1 : Intro
 
Css
CssCss
Css
 

Similar to Pemrograman Web - Pengenalan HTML

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)
T Ghazali
 
Mpw
MpwMpw
Praktikum_Pengenalan_HTML
Praktikum_Pengenalan_HTML Praktikum_Pengenalan_HTML
Praktikum_Pengenalan_HTML
fikrinurfahmi1
 
Modul 2a html
Modul 2a htmlModul 2a html
Modul 2a html
Siigit Aziz
 
Praktikum_Pengenalan_HTML oleh STMIK AMIKOM Yogyakarta.ppt
Praktikum_Pengenalan_HTML oleh STMIK AMIKOM Yogyakarta.pptPraktikum_Pengenalan_HTML oleh STMIK AMIKOM Yogyakarta.ppt
Praktikum_Pengenalan_HTML oleh STMIK AMIKOM Yogyakarta.ppt
NansyeDeboraLitaay
 
Proyek web html menggunakan notepad
Proyek web html menggunakan notepadProyek web html menggunakan notepad
Proyek web html menggunakan notepad
Samsuri14
 
Bab i. html
Bab i. htmlBab i. html
Bab i. html
Dewa Dwi Antara
 
Tugas 2 0916 jansen_1512510247
Tugas 2 0916 jansen_1512510247Tugas 2 0916 jansen_1512510247
Tugas 2 0916 jansen_1512510247
Jansen Wijaya
 
Dasar pembuatan web (html)
Dasar pembuatan web (html)Dasar pembuatan web (html)
Dasar pembuatan web (html)
daffa12
 
HTML, CSS, JavaScript
HTML, CSS, JavaScriptHTML, CSS, JavaScript
HTML, CSS, JavaScript
Muhammad Yusuf
 
Dasar html taufan_riyadi
Dasar html taufan_riyadiDasar html taufan_riyadi
Dasar html taufan_riyadi
dedd_simbolon
 
File Structure, HTML & Supporting Languages.pptx
File Structure, HTML & Supporting Languages.pptxFile Structure, HTML & Supporting Languages.pptx
File Structure, HTML & Supporting Languages.pptx
BeeOkee
 
Modul web affif
Modul web affifModul web affif
Modul web affif
Sejahtera Affif
 
Presentasi konsep dasar html
Presentasi konsep dasar htmlPresentasi konsep dasar html
Presentasi konsep dasar html
Dedy Setiawan
 
1210651097 css
1210651097 css1210651097 css
1210651097 css
ardyansyahAhmad
 
Web design (Pertemuan 1).pptx
Web design (Pertemuan 1).pptxWeb design (Pertemuan 1).pptx
Web design (Pertemuan 1).pptx
RaniRatnaningsih2
 
Mengenal script html 2
Mengenal script html 2Mengenal script html 2
Mengenal script html 2
Ali Muntaha
 
Laporan pratikum II web
Laporan pratikum II webLaporan pratikum II web
Laporan pratikum II web
rahmi wahyuni
 
Web Stastis disertai dengan link-link
Web Stastis disertai dengan link-linkWeb Stastis disertai dengan link-link
Web Stastis disertai dengan link-link
Sifra Melisa Setiowati
 

Similar to Pemrograman Web - Pengenalan HTML (20)

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)
 
Mpw
MpwMpw
Mpw
 
Praktikum_Pengenalan_HTML
Praktikum_Pengenalan_HTML Praktikum_Pengenalan_HTML
Praktikum_Pengenalan_HTML
 
Modul 2a html
Modul 2a htmlModul 2a html
Modul 2a html
 
Praktikum_Pengenalan_HTML oleh STMIK AMIKOM Yogyakarta.ppt
Praktikum_Pengenalan_HTML oleh STMIK AMIKOM Yogyakarta.pptPraktikum_Pengenalan_HTML oleh STMIK AMIKOM Yogyakarta.ppt
Praktikum_Pengenalan_HTML oleh STMIK AMIKOM Yogyakarta.ppt
 
Proyek web html menggunakan notepad
Proyek web html menggunakan notepadProyek web html menggunakan notepad
Proyek web html menggunakan notepad
 
Bab i. html
Bab i. htmlBab i. html
Bab i. html
 
Tugas 2 0916 jansen_1512510247
Tugas 2 0916 jansen_1512510247Tugas 2 0916 jansen_1512510247
Tugas 2 0916 jansen_1512510247
 
Dasar pembuatan web (html)
Dasar pembuatan web (html)Dasar pembuatan web (html)
Dasar pembuatan web (html)
 
HTML, CSS, JavaScript
HTML, CSS, JavaScriptHTML, CSS, JavaScript
HTML, CSS, JavaScript
 
Dasar html taufan_riyadi
Dasar html taufan_riyadiDasar html taufan_riyadi
Dasar html taufan_riyadi
 
File Structure, HTML & Supporting Languages.pptx
File Structure, HTML & Supporting Languages.pptxFile Structure, HTML & Supporting Languages.pptx
File Structure, HTML & Supporting Languages.pptx
 
Html for xi grade
Html for xi gradeHtml for xi grade
Html for xi grade
 
Modul web affif
Modul web affifModul web affif
Modul web affif
 
Presentasi konsep dasar html
Presentasi konsep dasar htmlPresentasi konsep dasar html
Presentasi konsep dasar html
 
1210651097 css
1210651097 css1210651097 css
1210651097 css
 
Web design (Pertemuan 1).pptx
Web design (Pertemuan 1).pptxWeb design (Pertemuan 1).pptx
Web design (Pertemuan 1).pptx
 
Mengenal script html 2
Mengenal script html 2Mengenal script html 2
Mengenal script html 2
 
Laporan pratikum II web
Laporan pratikum II webLaporan pratikum II web
Laporan pratikum II web
 
Web Stastis disertai dengan link-link
Web Stastis disertai dengan link-linkWeb Stastis disertai dengan link-link
Web Stastis disertai dengan link-link
 

More from KuliahKita

CSS Eksperimen - 05-2 Popup Menu
CSS Eksperimen - 05-2 Popup MenuCSS Eksperimen - 05-2 Popup Menu
CSS Eksperimen - 05-2 Popup Menu
KuliahKita
 
CSS Eksperimen - 05-1 Popup Konfirmasi
CSS Eksperimen - 05-1 Popup KonfirmasiCSS Eksperimen - 05-1 Popup Konfirmasi
CSS Eksperimen - 05-1 Popup Konfirmasi
KuliahKita
 
CSS Eksperimen - 04-4 Elemen Sliding Door
CSS Eksperimen - 04-4 Elemen Sliding DoorCSS Eksperimen - 04-4 Elemen Sliding Door
CSS Eksperimen - 04-4 Elemen Sliding Door
KuliahKita
 
CSS Eksperimen - 04-3 Elemen Card Flip
CSS Eksperimen - 04-3 Elemen Card FlipCSS Eksperimen - 04-3 Elemen Card Flip
CSS Eksperimen - 04-3 Elemen Card Flip
KuliahKita
 
CSS Eksperimen - 04-2 accordion
CSS Eksperimen - 04-2 accordionCSS Eksperimen - 04-2 accordion
CSS Eksperimen - 04-2 accordion
KuliahKita
 
CSS Eksperimen - 04-1 informasi tab
CSS Eksperimen - 04-1 informasi tabCSS Eksperimen - 04-1 informasi tab
CSS Eksperimen - 04-1 informasi tab
KuliahKita
 
CSS Eksperimen - 03-3 Slide Side Menu
CSS Eksperimen - 03-3 Slide Side MenuCSS Eksperimen - 03-3 Slide Side Menu
CSS Eksperimen - 03-3 Slide Side Menu
KuliahKita
 
CSS Eksperimen - 03-2 Breadcrumb
CSS Eksperimen - 03-2 BreadcrumbCSS Eksperimen - 03-2 Breadcrumb
CSS Eksperimen - 03-2 Breadcrumb
KuliahKita
 
CSS Eksperimen - 03-1 navigasi dasar
CSS Eksperimen - 03-1 navigasi dasarCSS Eksperimen - 03-1 navigasi dasar
CSS Eksperimen - 03-1 navigasi dasar
KuliahKita
 
CSS Eksperimen - 02-2 Flexbox Grid
CSS Eksperimen - 02-2 Flexbox GridCSS Eksperimen - 02-2 Flexbox Grid
CSS Eksperimen - 02-2 Flexbox Grid
KuliahKita
 
Eksperimen CSS - 02-1 grid layout
Eksperimen CSS - 02-1 grid layoutEksperimen CSS - 02-1 grid layout
Eksperimen CSS - 02-1 grid layout
KuliahKita
 
Eksperimen CSS - 01 Pendahuluan
Eksperimen CSS - 01 PendahuluanEksperimen CSS - 01 Pendahuluan
Eksperimen CSS - 01 Pendahuluan
KuliahKita
 
07 equity research (bagian 2)
07 equity research (bagian 2)07 equity research (bagian 2)
07 equity research (bagian 2)
KuliahKita
 
Pasar Saham - 32 Discounted Cash Flow (DCF)
Pasar Saham - 32 Discounted Cash Flow (DCF)Pasar Saham - 32 Discounted Cash Flow (DCF)
Pasar Saham - 32 Discounted Cash Flow (DCF)
KuliahKita
 
Pasar Saham - Equity Research (bagian 1)
Pasar Saham - Equity Research (bagian 1)Pasar Saham - Equity Research (bagian 1)
Pasar Saham - Equity Research (bagian 1)
KuliahKita
 
Pasar Saham - 30 Investment Due Dilligence
Pasar Saham - 30 Investment Due DilligencePasar Saham - 30 Investment Due Dilligence
Pasar Saham - 30 Investment Due Dilligence
KuliahKita
 
Pasar Saham - 29 Financial Ratio 03
Pasar Saham - 29 Financial Ratio 03Pasar Saham - 29 Financial Ratio 03
Pasar Saham - 29 Financial Ratio 03
KuliahKita
 
Pasar Saham - 28 Financial Ratio 02
Pasar Saham - 28 Financial Ratio 02Pasar Saham - 28 Financial Ratio 02
Pasar Saham - 28 Financial Ratio 02
KuliahKita
 
Pasar Saham -27 financial ratio 01
Pasar Saham -27 financial ratio  01Pasar Saham -27 financial ratio  01
Pasar Saham -27 financial ratio 01
KuliahKita
 
Pasar Saham - 26 Cash Flow Statement
Pasar Saham - 26 Cash Flow StatementPasar Saham - 26 Cash Flow Statement
Pasar Saham - 26 Cash Flow Statement
KuliahKita
 

More from KuliahKita (20)

CSS Eksperimen - 05-2 Popup Menu
CSS Eksperimen - 05-2 Popup MenuCSS Eksperimen - 05-2 Popup Menu
CSS Eksperimen - 05-2 Popup Menu
 
CSS Eksperimen - 05-1 Popup Konfirmasi
CSS Eksperimen - 05-1 Popup KonfirmasiCSS Eksperimen - 05-1 Popup Konfirmasi
CSS Eksperimen - 05-1 Popup Konfirmasi
 
CSS Eksperimen - 04-4 Elemen Sliding Door
CSS Eksperimen - 04-4 Elemen Sliding DoorCSS Eksperimen - 04-4 Elemen Sliding Door
CSS Eksperimen - 04-4 Elemen Sliding Door
 
CSS Eksperimen - 04-3 Elemen Card Flip
CSS Eksperimen - 04-3 Elemen Card FlipCSS Eksperimen - 04-3 Elemen Card Flip
CSS Eksperimen - 04-3 Elemen Card Flip
 
CSS Eksperimen - 04-2 accordion
CSS Eksperimen - 04-2 accordionCSS Eksperimen - 04-2 accordion
CSS Eksperimen - 04-2 accordion
 
CSS Eksperimen - 04-1 informasi tab
CSS Eksperimen - 04-1 informasi tabCSS Eksperimen - 04-1 informasi tab
CSS Eksperimen - 04-1 informasi tab
 
CSS Eksperimen - 03-3 Slide Side Menu
CSS Eksperimen - 03-3 Slide Side MenuCSS Eksperimen - 03-3 Slide Side Menu
CSS Eksperimen - 03-3 Slide Side Menu
 
CSS Eksperimen - 03-2 Breadcrumb
CSS Eksperimen - 03-2 BreadcrumbCSS Eksperimen - 03-2 Breadcrumb
CSS Eksperimen - 03-2 Breadcrumb
 
CSS Eksperimen - 03-1 navigasi dasar
CSS Eksperimen - 03-1 navigasi dasarCSS Eksperimen - 03-1 navigasi dasar
CSS Eksperimen - 03-1 navigasi dasar
 
CSS Eksperimen - 02-2 Flexbox Grid
CSS Eksperimen - 02-2 Flexbox GridCSS Eksperimen - 02-2 Flexbox Grid
CSS Eksperimen - 02-2 Flexbox Grid
 
Eksperimen CSS - 02-1 grid layout
Eksperimen CSS - 02-1 grid layoutEksperimen CSS - 02-1 grid layout
Eksperimen CSS - 02-1 grid layout
 
Eksperimen CSS - 01 Pendahuluan
Eksperimen CSS - 01 PendahuluanEksperimen CSS - 01 Pendahuluan
Eksperimen CSS - 01 Pendahuluan
 
07 equity research (bagian 2)
07 equity research (bagian 2)07 equity research (bagian 2)
07 equity research (bagian 2)
 
Pasar Saham - 32 Discounted Cash Flow (DCF)
Pasar Saham - 32 Discounted Cash Flow (DCF)Pasar Saham - 32 Discounted Cash Flow (DCF)
Pasar Saham - 32 Discounted Cash Flow (DCF)
 
Pasar Saham - Equity Research (bagian 1)
Pasar Saham - Equity Research (bagian 1)Pasar Saham - Equity Research (bagian 1)
Pasar Saham - Equity Research (bagian 1)
 
Pasar Saham - 30 Investment Due Dilligence
Pasar Saham - 30 Investment Due DilligencePasar Saham - 30 Investment Due Dilligence
Pasar Saham - 30 Investment Due Dilligence
 
Pasar Saham - 29 Financial Ratio 03
Pasar Saham - 29 Financial Ratio 03Pasar Saham - 29 Financial Ratio 03
Pasar Saham - 29 Financial Ratio 03
 
Pasar Saham - 28 Financial Ratio 02
Pasar Saham - 28 Financial Ratio 02Pasar Saham - 28 Financial Ratio 02
Pasar Saham - 28 Financial Ratio 02
 
Pasar Saham -27 financial ratio 01
Pasar Saham -27 financial ratio  01Pasar Saham -27 financial ratio  01
Pasar Saham -27 financial ratio 01
 
Pasar Saham - 26 Cash Flow Statement
Pasar Saham - 26 Cash Flow StatementPasar Saham - 26 Cash Flow Statement
Pasar Saham - 26 Cash Flow Statement
 

Recently uploaded

COOLING TOWER petrokimia gresik okdong d
COOLING TOWER petrokimia gresik okdong dCOOLING TOWER petrokimia gresik okdong d
COOLING TOWER petrokimia gresik okdong d
delphijean1
 
1. Paparan Penjelasan Permen PUPR 08 Tahun 2023.pdf
1. Paparan Penjelasan Permen PUPR 08 Tahun 2023.pdf1. Paparan Penjelasan Permen PUPR 08 Tahun 2023.pdf
1. Paparan Penjelasan Permen PUPR 08 Tahun 2023.pdf
AdityaWahyuDewangga1
 
MATERI STRUKTUR BANGUNAN TAHAN GEMPA.pdf
MATERI STRUKTUR BANGUNAN TAHAN GEMPA.pdfMATERI STRUKTUR BANGUNAN TAHAN GEMPA.pdf
MATERI STRUKTUR BANGUNAN TAHAN GEMPA.pdf
UmiKalsum53666
 
DAMPAK POLUSI UDARA TERHADAP KESEHATAN MASYARAKAT.pdf
DAMPAK POLUSI UDARA TERHADAP KESEHATAN MASYARAKAT.pdfDAMPAK POLUSI UDARA TERHADAP KESEHATAN MASYARAKAT.pdf
DAMPAK POLUSI UDARA TERHADAP KESEHATAN MASYARAKAT.pdf
benediktusmaksy
 
436102098-0-K3-Elevator-Dan-Eskalator.ppt
436102098-0-K3-Elevator-Dan-Eskalator.ppt436102098-0-K3-Elevator-Dan-Eskalator.ppt
436102098-0-K3-Elevator-Dan-Eskalator.ppt
rhamset
 
ANALISIS PENGARUH INDUSTRI BATU BARA TERHADAP PENCEMARAN UDARA.pdf
ANALISIS PENGARUH INDUSTRI BATU BARA TERHADAP PENCEMARAN UDARA.pdfANALISIS PENGARUH INDUSTRI BATU BARA TERHADAP PENCEMARAN UDARA.pdf
ANALISIS PENGARUH INDUSTRI BATU BARA TERHADAP PENCEMARAN UDARA.pdf
narayafiryal8
 
TUGAS pelaksana pekerjaan jalan jenjang empat 4 .pptx -.pdf
TUGAS pelaksana pekerjaan jalan jenjang empat 4 .pptx -.pdfTUGAS pelaksana pekerjaan jalan jenjang empat 4 .pptx -.pdf
TUGAS pelaksana pekerjaan jalan jenjang empat 4 .pptx -.pdf
jayakartalumajang1
 
TUGAS UJI KOMPETENSI-INDAH ROSANTI-AHLI UTAMA MANAJEMEN KONSTRUKSI.pptx
TUGAS UJI KOMPETENSI-INDAH ROSANTI-AHLI UTAMA MANAJEMEN KONSTRUKSI.pptxTUGAS UJI KOMPETENSI-INDAH ROSANTI-AHLI UTAMA MANAJEMEN KONSTRUKSI.pptx
TUGAS UJI KOMPETENSI-INDAH ROSANTI-AHLI UTAMA MANAJEMEN KONSTRUKSI.pptx
indahrosantiTeknikSi
 

Recently uploaded (8)

COOLING TOWER petrokimia gresik okdong d
COOLING TOWER petrokimia gresik okdong dCOOLING TOWER petrokimia gresik okdong d
COOLING TOWER petrokimia gresik okdong d
 
1. Paparan Penjelasan Permen PUPR 08 Tahun 2023.pdf
1. Paparan Penjelasan Permen PUPR 08 Tahun 2023.pdf1. Paparan Penjelasan Permen PUPR 08 Tahun 2023.pdf
1. Paparan Penjelasan Permen PUPR 08 Tahun 2023.pdf
 
MATERI STRUKTUR BANGUNAN TAHAN GEMPA.pdf
MATERI STRUKTUR BANGUNAN TAHAN GEMPA.pdfMATERI STRUKTUR BANGUNAN TAHAN GEMPA.pdf
MATERI STRUKTUR BANGUNAN TAHAN GEMPA.pdf
 
DAMPAK POLUSI UDARA TERHADAP KESEHATAN MASYARAKAT.pdf
DAMPAK POLUSI UDARA TERHADAP KESEHATAN MASYARAKAT.pdfDAMPAK POLUSI UDARA TERHADAP KESEHATAN MASYARAKAT.pdf
DAMPAK POLUSI UDARA TERHADAP KESEHATAN MASYARAKAT.pdf
 
436102098-0-K3-Elevator-Dan-Eskalator.ppt
436102098-0-K3-Elevator-Dan-Eskalator.ppt436102098-0-K3-Elevator-Dan-Eskalator.ppt
436102098-0-K3-Elevator-Dan-Eskalator.ppt
 
ANALISIS PENGARUH INDUSTRI BATU BARA TERHADAP PENCEMARAN UDARA.pdf
ANALISIS PENGARUH INDUSTRI BATU BARA TERHADAP PENCEMARAN UDARA.pdfANALISIS PENGARUH INDUSTRI BATU BARA TERHADAP PENCEMARAN UDARA.pdf
ANALISIS PENGARUH INDUSTRI BATU BARA TERHADAP PENCEMARAN UDARA.pdf
 
TUGAS pelaksana pekerjaan jalan jenjang empat 4 .pptx -.pdf
TUGAS pelaksana pekerjaan jalan jenjang empat 4 .pptx -.pdfTUGAS pelaksana pekerjaan jalan jenjang empat 4 .pptx -.pdf
TUGAS pelaksana pekerjaan jalan jenjang empat 4 .pptx -.pdf
 
TUGAS UJI KOMPETENSI-INDAH ROSANTI-AHLI UTAMA MANAJEMEN KONSTRUKSI.pptx
TUGAS UJI KOMPETENSI-INDAH ROSANTI-AHLI UTAMA MANAJEMEN KONSTRUKSI.pptxTUGAS UJI KOMPETENSI-INDAH ROSANTI-AHLI UTAMA MANAJEMEN KONSTRUKSI.pptx
TUGAS UJI KOMPETENSI-INDAH ROSANTI-AHLI UTAMA MANAJEMEN KONSTRUKSI.pptx
 

Pemrograman Web - Pengenalan HTML

  • 1. HTML Pengembangan Web Edwin Lunando edwin@kuliahkita.com
  • 2. Pendahuluan HTML - Hypertext Markup Language HTML ini adalah bahasa markup yang digunakan untuk membangun web pages atau halaman dari situs yang biasa dibuka di browser HTML ini didefinisikan sebagai aplikasi dari Standard Generalized Markup Language (SGML)
  • 4. Penulisan HTML Penulisan HTML dilakukan dengan susunan konten yang dibungkus Markup Tag (< >) Contoh: <p> Saya ingin belajar di KuliahKita </p> Markup yang didefinisikan mendeskripsikan: ● Appearance ● Layout ● Content
  • 5. Penyusun (Element) HTML Beberapa penyusun dari HTML: ● DTD (Doctype) ● Tag HTML ● Head ○ title (wajib) ○ base, meta, bgsound, script, noscript, style, link ● Body
  • 6. Doctype (DTD) Doctype atau document type definition berfungsi sebagai definisi sintaks konstruksi markup <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN”” "http://www. w3.org/TR/html4/strict.dtd"> DTD ini diletakkan di awal sebuah file HTML dan digunakan untuk memvalidasi dokumen berdasarkan versi yang digunakan
  • 7. Meta (<meta></meta>) Elemen meta digunakan untuk mendefinisikan properti dokumen, memberikan informasi pada browser, dan menspesifikasikan HTTP Header. Selain itu Elemen meta yang rapi juga digunakan untuk meningkatkan rank pada search engine result page (SERP) dari hasil optimasi mesin pencari (SEO atau Search Engine Optimization). <meta name="description" content="Ambil kelas tanpa harus di dalam kelas"> <meta name="copyright" content="2014 Kuliah Kita. All rights reserved."> <meta property="og:title" content="Tempat Belajar Bersama - KuliahKita" /> <meta property="og:image" content="http://oi62.tinypic.com/20j4xt5.jpg" /> <meta property="og:description" content="Mari belajar online bersama dengan teman-teman dari seluruh Indonesia!" />
  • 8. Style (<style></style>) Style digunakan untuk mendefinisikan cara menampilkan body markup dengan meng-override kelakuan standar browser dalam menampilkan body markup (atau user-agent stylesheet) Mendefinisikan dapat dilakukan di dalam HTML (inline style), tetapi tidak disarankan karena akan membuat HTML menjadi “kotor”: 1. Tidak memisahkan konten dan desain 2. Mempersulit maintenance 3. Tidak acessible dalam beberapa kasus 4. Membuat ukuran halaman lebih besar (menambah beban bandwidth, lag, dll)
  • 9. HTML Body (<body></body>) HTML body adalah tempat mendefinisikan konten dari halaman situs atau web. Di dalam tag body inilah tag-tag lain dari HTML dapat digunakan dan ditampilkan pada situs melalui browser. Dalam tag Body sendiri, biasanya konten diapit oleh ● header : sebuah div atau section yang biasa berupa judul halaman dan deskripsi singkat ● footer : sebuah div atau section yang biasa berupa deskripsi tambahan dari halaman atau situs