SlideShare a Scribd company logo
Materi : 
1. Konsep Dasar HTML 
2. Elemen pada Tag Head 
3. Elemen pada tag Body 
Oleh : Dedy Setiawan, ST
 HyperText Markup Language (HTML) adalah suatu 
bahasa pengkodean (Script) yang digunakan untuk 
membangun sebuah halaman web. 
 “HTML merupakan standar bahasa yang digunakan 
untuk menampilkan dokumen web”. 
 Ekstensi File : ‘html’ atau ‘htm’. 
 Editor HTML: Notepad, atau aplikasi khusus scripting 
(Macromedia Dreamweaver, dll). 
 Tag adalah Unsur bahasa atau elemen HTML 
dinyatakan dengan tanda khusus
 Bentuk umumpenulisan sintak tag HTML : 
<ELEMENT [ATRIBUT1 =”value” … ATRIBUTN=”value”] > … </ELEMENT> 
Keterangan : 
ELEMENT : Nama Tag HTML 
ATRIBUT : Atribut dari Tag HTML (optional) 
VALUE : Nilai dari Atribut Tag HTML (optional) 
Contoh : 
< BODY BGCOLOR =”red”> ……… </BODY>
 Open Element 
Merupakan elemen-elemen (tag) HTML yang bersifat terbuka, atau tidak 
memiliki elemen penutup. Format penulisan <name element /> 
Contoh : <hr/>, <br/> 
 Close Element 
Merupakan elemen-elemen (tag) HTML yang bersifat tertutup, atau memiliki 
elemen penutup. 
Format penulisan : <name element > ….. </name element> 
Contoh : <body>…<body/>, <div>…</div>, dll. 
 Comment 
Merupakan baris yang tidak akan dieksekusi oleh penerjemah. Biasanya 
digunakan untuk informasi script . 
Format Penulisan : < ! - - comment text -- > 
Contoh : < ! - - Hallo saya adalah baris yang tidak akan diekskusi -- >
Struktur elemen dalam dokumen HTML adalah struktur dasar penulisan 
script untuk dokumen HTML. Berikut ini adalah gambar struktur 
dokumen HTML, dan hubungannya dengan output pada halaman web 
browser.
 Elemen-elemen pada tag HEAD HTML, adalah 
elemen-elemen yang didefinisikan dan ditulis diantara 
Tag <HEAD> dan </HEAD>. Ada beberapa macam 
elemen pada tag HEAD HTML, yaitu antara lain :
 TITLE 
Tag yang digunakan untuk menampilkan judul homepage/ halaman web pada 
title browser area. 
Contoh : 
< TITLE > halaman web pertamaku </TITLE> 
 META 
Tag yang digunakan untuk mendefinisikan informasi (keywords, http 
header, dll) dan 
identitas (author, copyright, dll) pada sebuah halaman web (dokumen HTML). 
Contoh : 
< META keywords = “web, pemrograman”/> 
< META name =”author” content =”eko win kenali”/> 
< META name =”copyright” content =”2006”/>
 LINK 
tag yang digunakan untuk menyertakan dokumen lain ke dalam halaman web 
untuk tujuan khusus. Dokumen lain tersebut biasa berupa file dengan format 
CSS, PHP, ICO dan lain- lain. 
Contoh : 
<link rel="shortcut icon" href="../images/favicon.ico" type="image/x-icon“/> 
<link rel="stylesheet" href="../css/style.css" media="screen" type="text/css“/>
 Elemen-elemen pada tag BODY HTML, adalah 
elemen-elemen yang didefinisikan dan ditulis diantara 
Tag <BODY> dan </BODY>.
 HEADING 
Heading adalah elemen tag yang digunakan untuk mendefinisikan sebuah teks 
sebagai kepala (judul/title). Ada 6 macam elemen heading, yaitu H1, H2, H3, 
H4, H5 dan H6. 
Contoh : 
< H1 > Contoh Heading 1 </H1> 
 PARAGRAPH 
Paragraph adalah elemen tag yang digunakan untuk mendefinisikan sebuah 
teks atau lebih sebagai paragraph. Elemen Paragraph ditandai dengan close tag 
<p>..</p>. 
Contoh : 
<p> 
HyperText Markup Language (HTML) adalah suatu bahasa pengkodean 
(coding/scripting) yang digunakan untuk membangun sebuah halaman web. 
Script HTML akan diinterpretasikan dan diterjemahkan olehbrowser, kemudian 
browser akan menampilkan hasil ke pengguna. 
</p>
 LIST ITEMS 
List Item adalah tag digunakan untuk mengelompokkan data (teks) baik 
dengan metode pengelompokan tidak berurutan (unordered list) maupun 
pengelompokan berurutan (ordered list). 
Contoh :
 DEFINITON LIST 
Definition List fungsinya sama dengan list item. Elemen Definition List 
ditandai oleh tag 
<DL> … </DL>. Didalam tag Definition List terdapat tag Definition Term 
<DT>, yaitu tag untuk menentukan definition term. Serta tag Definition 
<DD>, yaitu tag untuk menentukan definition itu sendiri. Contoh :
 HORIZONTAL RULE 
Horizontal rule adalah tag digunakan untuk menggambar garis horizontal 
dalam document 
HTML. Elemen Horizontal Rule ditandai dengan tag <hr>. Contoh : 
<hr/>
 BREAK LINE 
Break Line adalah tag di gunakan untuk memulai/ganti baris baru 
pada document HTML. Elemen Break Line ditandai dengan tag <br>. 
Contoh : 
<br/> 
 FONT 
Font adalah tag di gunakan untuk menentukan format font pada 
dokumen html. Elemen 
Font ditandai dengan tag <font>…</font>.
Presentasi konsep dasar html

More Related Content

What's hot

HTML-(workshop)7557.pptx
HTML-(workshop)7557.pptxHTML-(workshop)7557.pptx
HTML-(workshop)7557.pptx
Raja980775
 
HTML
HTMLHTML
Html
HtmlHtml
CSS Basics
CSS BasicsCSS Basics
CSS Basics
Sanjeev Kumar
 
PEMROGRAMAN WEB 1.pptx
PEMROGRAMAN WEB 1.pptxPEMROGRAMAN WEB 1.pptx
PEMROGRAMAN WEB 1.pptx
UntukDownloadLoginLa
 
How to learn HTML in 10 Days
How to learn HTML in 10 DaysHow to learn HTML in 10 Days
How to learn HTML in 10 Days
Manoj kumar Deswal
 
CSS Layouting #3 : Box Model
CSS Layouting #3 : Box ModelCSS Layouting #3 : Box Model
CSS Layouting #3 : Box Model
Sandhika Galih
 
Document Object Model (DOM)
Document Object Model (DOM)Document Object Model (DOM)
Document Object Model (DOM)
GOPAL BASAK
 
Basic HTML
Basic HTMLBasic HTML
Basic HTML
Sayan De
 
Html
HtmlHtml
CSS Layouting #2 : Dimensi & Overflow
CSS Layouting #2 : Dimensi & OverflowCSS Layouting #2 : Dimensi & Overflow
CSS Layouting #2 : Dimensi & Overflow
Sandhika Galih
 
Basic Html Notes
Basic Html NotesBasic Html Notes
Basic Html Notes
NextGenr
 
Html table
Html tableHtml table
Html table
JayjZens
 
Html basic
Html basicHtml basic
Html basic
Viccky Khairnar
 
Javascript
JavascriptJavascript
Javascript
Mayank Bhatt
 
Dom
DomDom
CSS Layouting #1 : Display
CSS Layouting #1 : DisplayCSS Layouting #1 : Display
CSS Layouting #1 : Display
Sandhika Galih
 
CSS
CSSCSS
Html5
Html5 Html5
Html5
Shiva RamDam
 
Html,javascript & css
Html,javascript & cssHtml,javascript & css
Html,javascript & css
Predhin Sapru
 

What's hot (20)

HTML-(workshop)7557.pptx
HTML-(workshop)7557.pptxHTML-(workshop)7557.pptx
HTML-(workshop)7557.pptx
 
HTML
HTMLHTML
HTML
 
Html
HtmlHtml
Html
 
CSS Basics
CSS BasicsCSS Basics
CSS Basics
 
PEMROGRAMAN WEB 1.pptx
PEMROGRAMAN WEB 1.pptxPEMROGRAMAN WEB 1.pptx
PEMROGRAMAN WEB 1.pptx
 
How to learn HTML in 10 Days
How to learn HTML in 10 DaysHow to learn HTML in 10 Days
How to learn HTML in 10 Days
 
CSS Layouting #3 : Box Model
CSS Layouting #3 : Box ModelCSS Layouting #3 : Box Model
CSS Layouting #3 : Box Model
 
Document Object Model (DOM)
Document Object Model (DOM)Document Object Model (DOM)
Document Object Model (DOM)
 
Basic HTML
Basic HTMLBasic HTML
Basic HTML
 
Html
HtmlHtml
Html
 
CSS Layouting #2 : Dimensi & Overflow
CSS Layouting #2 : Dimensi & OverflowCSS Layouting #2 : Dimensi & Overflow
CSS Layouting #2 : Dimensi & Overflow
 
Basic Html Notes
Basic Html NotesBasic Html Notes
Basic Html Notes
 
Html table
Html tableHtml table
Html table
 
Html basic
Html basicHtml basic
Html basic
 
Javascript
JavascriptJavascript
Javascript
 
Dom
DomDom
Dom
 
CSS Layouting #1 : Display
CSS Layouting #1 : DisplayCSS Layouting #1 : Display
CSS Layouting #1 : Display
 
CSS
CSSCSS
CSS
 
Html5
Html5 Html5
Html5
 
Html,javascript & css
Html,javascript & cssHtml,javascript & css
Html,javascript & css
 

Viewers also liked

Presentasi E- commerce
Presentasi E- commercePresentasi E- commerce
Presentasi E- commerce
Imam tantowi
 
Bali's Best Beach Club
Bali's Best Beach ClubBali's Best Beach Club
Bali's Best Beach ClubRie Arris
 
Modul training-php-rc1-u3
Modul training-php-rc1-u3Modul training-php-rc1-u3
Modul training-php-rc1-u3Jamil Jamil
 
Modul 2
Modul 2Modul 2
Modul 2
iswan_di
 
Presentasi tentang dasar-dasar HTLM untuk pemula
Presentasi tentang dasar-dasar HTLM untuk pemulaPresentasi tentang dasar-dasar HTLM untuk pemula
Presentasi tentang dasar-dasar HTLM untuk pemula
1smail12
 
Media Presentasi
Media PresentasiMedia Presentasi
Media Presentasi
Syifa Diatmika
 
Presentasi makalah
Presentasi makalahPresentasi makalah
Presentasi makalah
Mone Masyhudin
 
Langkah-Langkah Menggunakan POWERPOInt
Langkah-Langkah Menggunakan POWERPOIntLangkah-Langkah Menggunakan POWERPOInt
Langkah-Langkah Menggunakan POWERPOInt
Mr.Joseph_4u
 
Modul web
Modul webModul web
Modul web
liakhairunnisya
 
Presentasi pemograman dasar
Presentasi pemograman dasarPresentasi pemograman dasar
Presentasi pemograman dasar
F. Bagus TKJa
 
Html coding
Html codingHtml coding
Html coding
Briana VanBuskirk
 
Contoh Presentasi Power Point Tentang Pendidikan
Contoh Presentasi Power Point Tentang PendidikanContoh Presentasi Power Point Tentang Pendidikan
Contoh Presentasi Power Point Tentang Pendidikan
Mustofa Thovids
 

Viewers also liked (12)

Presentasi E- commerce
Presentasi E- commercePresentasi E- commerce
Presentasi E- commerce
 
Bali's Best Beach Club
Bali's Best Beach ClubBali's Best Beach Club
Bali's Best Beach Club
 
Modul training-php-rc1-u3
Modul training-php-rc1-u3Modul training-php-rc1-u3
Modul training-php-rc1-u3
 
Modul 2
Modul 2Modul 2
Modul 2
 
Presentasi tentang dasar-dasar HTLM untuk pemula
Presentasi tentang dasar-dasar HTLM untuk pemulaPresentasi tentang dasar-dasar HTLM untuk pemula
Presentasi tentang dasar-dasar HTLM untuk pemula
 
Media Presentasi
Media PresentasiMedia Presentasi
Media Presentasi
 
Presentasi makalah
Presentasi makalahPresentasi makalah
Presentasi makalah
 
Langkah-Langkah Menggunakan POWERPOInt
Langkah-Langkah Menggunakan POWERPOIntLangkah-Langkah Menggunakan POWERPOInt
Langkah-Langkah Menggunakan POWERPOInt
 
Modul web
Modul webModul web
Modul web
 
Presentasi pemograman dasar
Presentasi pemograman dasarPresentasi pemograman dasar
Presentasi pemograman dasar
 
Html coding
Html codingHtml coding
Html coding
 
Contoh Presentasi Power Point Tentang Pendidikan
Contoh Presentasi Power Point Tentang PendidikanContoh Presentasi Power Point Tentang Pendidikan
Contoh Presentasi Power Point Tentang Pendidikan
 

Similar to Presentasi konsep dasar html

dokumen.tips_presentasi-konsep-dasar-html.pptx
dokumen.tips_presentasi-konsep-dasar-html.pptxdokumen.tips_presentasi-konsep-dasar-html.pptx
dokumen.tips_presentasi-konsep-dasar-html.pptx
AndreianYusuf
 
HTML
HTMLHTML
Html dasar
Html dasarHtml dasar
Html dasar
fhnx
 
Modul 2a html
Modul 2a htmlModul 2a html
Modul 2a html
Siigit Aziz
 
PPT_HTML_DASAR.pptx
PPT_HTML_DASAR.pptxPPT_HTML_DASAR.pptx
PPT_HTML_DASAR.pptx
FAUZY38
 
Web design (Pertemuan 1).pptx
Web design (Pertemuan 1).pptxWeb design (Pertemuan 1).pptx
Web design (Pertemuan 1).pptx
RaniRatnaningsih2
 
Pertemuan 1 b
Pertemuan 1 bPertemuan 1 b
Pertemuan 1 b
f fr
 
Pengenalan struktur elemen html
Pengenalan struktur elemen htmlPengenalan struktur elemen html
Pengenalan struktur elemen html
Deka M Wildan
 
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
 
Praktikum_Pengenalan_HTML
Praktikum_Pengenalan_HTML Praktikum_Pengenalan_HTML
Praktikum_Pengenalan_HTML
fikrinurfahmi1
 
Training HTML
Training HTMLTraining HTML
Training HTML
Yanwar Purnama
 
Html Dasar#1_ANFALAB.pdf
Html Dasar#1_ANFALAB.pdfHtml Dasar#1_ANFALAB.pdf
Html Dasar#1_ANFALAB.pdf
MAdnanFauzanMaulana
 
Modul HTML5
Modul HTML5Modul HTML5
Modul HTML5
As Faizin
 
Bab i. html
Bab i. htmlBab i. html
Bab i. html
Dewa Dwi Antara
 
Dasar-dasar penggunaan elemen dan tagging dalam html
Dasar-dasar penggunaan elemen dan tagging dalam htmlDasar-dasar penggunaan elemen dan tagging dalam html
Dasar-dasar penggunaan elemen dan tagging dalam html
oyie76
 
Laporan pratikum 1
Laporan pratikum 1Laporan pratikum 1
Laporan pratikum 1
rahmi wahyuni
 
01. Dasar-dasar HTML.ppt
01. Dasar-dasar HTML.ppt01. Dasar-dasar HTML.ppt
01. Dasar-dasar HTML.ppt
Ediyono3
 
01. Dasar-dasar HTML.ppt
01. Dasar-dasar HTML.ppt01. Dasar-dasar HTML.ppt
01. Dasar-dasar HTML.ppt
AkhmadAlbari1
 

Similar to Presentasi konsep dasar html (20)

dokumen.tips_presentasi-konsep-dasar-html.pptx
dokumen.tips_presentasi-konsep-dasar-html.pptxdokumen.tips_presentasi-konsep-dasar-html.pptx
dokumen.tips_presentasi-konsep-dasar-html.pptx
 
HTML
HTMLHTML
HTML
 
Html dasar
Html dasarHtml dasar
Html dasar
 
Modul 2a html
Modul 2a htmlModul 2a html
Modul 2a html
 
PPT_HTML_DASAR.pptx
PPT_HTML_DASAR.pptxPPT_HTML_DASAR.pptx
PPT_HTML_DASAR.pptx
 
Web design (Pertemuan 1).pptx
Web design (Pertemuan 1).pptxWeb design (Pertemuan 1).pptx
Web design (Pertemuan 1).pptx
 
1
11
1
 
Pertemuan 1 b
Pertemuan 1 bPertemuan 1 b
Pertemuan 1 b
 
Pengenalan struktur elemen html
Pengenalan struktur elemen htmlPengenalan struktur elemen html
Pengenalan struktur elemen 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
 
Praktikum_Pengenalan_HTML
Praktikum_Pengenalan_HTML Praktikum_Pengenalan_HTML
Praktikum_Pengenalan_HTML
 
Training HTML
Training HTMLTraining HTML
Training HTML
 
PPT_HTML_DASAR.pptx
PPT_HTML_DASAR.pptxPPT_HTML_DASAR.pptx
PPT_HTML_DASAR.pptx
 
Html Dasar#1_ANFALAB.pdf
Html Dasar#1_ANFALAB.pdfHtml Dasar#1_ANFALAB.pdf
Html Dasar#1_ANFALAB.pdf
 
Modul HTML5
Modul HTML5Modul HTML5
Modul HTML5
 
Bab i. html
Bab i. htmlBab i. html
Bab i. html
 
Dasar-dasar penggunaan elemen dan tagging dalam html
Dasar-dasar penggunaan elemen dan tagging dalam htmlDasar-dasar penggunaan elemen dan tagging dalam html
Dasar-dasar penggunaan elemen dan tagging dalam html
 
Laporan pratikum 1
Laporan pratikum 1Laporan pratikum 1
Laporan pratikum 1
 
01. Dasar-dasar HTML.ppt
01. Dasar-dasar HTML.ppt01. Dasar-dasar HTML.ppt
01. Dasar-dasar HTML.ppt
 
01. Dasar-dasar HTML.ppt
01. Dasar-dasar HTML.ppt01. Dasar-dasar HTML.ppt
01. Dasar-dasar HTML.ppt
 

More from Dedy Setiawan

Tutorial virtual box
Tutorial virtual boxTutorial virtual box
Tutorial virtual box
Dedy Setiawan
 
Modul ptik
Modul ptikModul ptik
Modul ptik
Dedy Setiawan
 
Perancangan konten
Perancangan kontenPerancangan konten
Perancangan konten
Dedy Setiawan
 
Module desain web
Module desain webModule desain web
Module desain web
Dedy Setiawan
 
4 membuat menu_baru_menu_top_pada_joomla
4 membuat menu_baru_menu_top_pada_joomla4 membuat menu_baru_menu_top_pada_joomla
4 membuat menu_baru_menu_top_pada_joomla
Dedy Setiawan
 
3 membuat kategori_artikel_joomla2.5
3 membuat kategori_artikel_joomla2.53 membuat kategori_artikel_joomla2.5
3 membuat kategori_artikel_joomla2.5
Dedy Setiawan
 
2 instalasi template_joomla
2 instalasi template_joomla2 instalasi template_joomla
2 instalasi template_joomla
Dedy Setiawan
 
1 tutorial instalasi_joomla
1 tutorial instalasi_joomla1 tutorial instalasi_joomla
1 tutorial instalasi_joomla
Dedy Setiawan
 

More from Dedy Setiawan (8)

Tutorial virtual box
Tutorial virtual boxTutorial virtual box
Tutorial virtual box
 
Modul ptik
Modul ptikModul ptik
Modul ptik
 
Perancangan konten
Perancangan kontenPerancangan konten
Perancangan konten
 
Module desain web
Module desain webModule desain web
Module desain web
 
4 membuat menu_baru_menu_top_pada_joomla
4 membuat menu_baru_menu_top_pada_joomla4 membuat menu_baru_menu_top_pada_joomla
4 membuat menu_baru_menu_top_pada_joomla
 
3 membuat kategori_artikel_joomla2.5
3 membuat kategori_artikel_joomla2.53 membuat kategori_artikel_joomla2.5
3 membuat kategori_artikel_joomla2.5
 
2 instalasi template_joomla
2 instalasi template_joomla2 instalasi template_joomla
2 instalasi template_joomla
 
1 tutorial instalasi_joomla
1 tutorial instalasi_joomla1 tutorial instalasi_joomla
1 tutorial instalasi_joomla
 

Recently uploaded

RANCANGAN TINDAKAN AKSI NYATA MODUL 1.4.pdf.pdf
RANCANGAN TINDAKAN AKSI NYATA MODUL 1.4.pdf.pdfRANCANGAN TINDAKAN AKSI NYATA MODUL 1.4.pdf.pdf
RANCANGAN TINDAKAN AKSI NYATA MODUL 1.4.pdf.pdf
OswaldusDiwaDoka
 
Demonstrasi Konseptual Modul 2.1 - RPP Berdiferensiasi.pdf
Demonstrasi Konseptual Modul 2.1 - RPP Berdiferensiasi.pdfDemonstrasi Konseptual Modul 2.1 - RPP Berdiferensiasi.pdf
Demonstrasi Konseptual Modul 2.1 - RPP Berdiferensiasi.pdf
d2spdpnd9185
 
PERSENTASI PENINGKATAN KUALITAS PRAKTIK PEMBELAJARAN.pdf
PERSENTASI PENINGKATAN KUALITAS PRAKTIK PEMBELAJARAN.pdfPERSENTASI PENINGKATAN KUALITAS PRAKTIK PEMBELAJARAN.pdf
PERSENTASI PENINGKATAN KUALITAS PRAKTIK PEMBELAJARAN.pdf
MunirLuvNaAin
 
Pengenalan Morfologi & Tata Bahasa Indonesia
Pengenalan Morfologi & Tata Bahasa IndonesiaPengenalan Morfologi & Tata Bahasa Indonesia
Pengenalan Morfologi & Tata Bahasa Indonesia
sucibrooks86
 
CP dan ATP bahasa indonesia fase B kelas 12.pdf
CP dan ATP bahasa indonesia fase B kelas 12.pdfCP dan ATP bahasa indonesia fase B kelas 12.pdf
CP dan ATP bahasa indonesia fase B kelas 12.pdf
andimagfirahwati1
 
Bab 7Korupsi sebagai persoalan moral .pptx
Bab 7Korupsi sebagai persoalan moral  .pptxBab 7Korupsi sebagai persoalan moral  .pptx
Bab 7Korupsi sebagai persoalan moral .pptx
Habibatut Tijani
 
PELAKSANAAN + Link2 Materi WORKSHOP Nasional _"Penerapan Regulasi Terbaru P...
PELAKSANAAN + Link2 Materi WORKSHOP Nasional _"Penerapan  Regulasi  Terbaru P...PELAKSANAAN + Link2 Materi WORKSHOP Nasional _"Penerapan  Regulasi  Terbaru P...
PELAKSANAAN + Link2 Materi WORKSHOP Nasional _"Penerapan Regulasi Terbaru P...
Kanaidi ken
 
Modul Projek Gaya Hidup Berkelanjutan - Peduli Sampah Selamatkan Generasi - F...
Modul Projek Gaya Hidup Berkelanjutan - Peduli Sampah Selamatkan Generasi - F...Modul Projek Gaya Hidup Berkelanjutan - Peduli Sampah Selamatkan Generasi - F...
Modul Projek Gaya Hidup Berkelanjutan - Peduli Sampah Selamatkan Generasi - F...
AdeSutisna19
 
5. Rangkuman Kehadiran Guru di Kelas_SDN 8n Kranji.docx
5. Rangkuman Kehadiran Guru di Kelas_SDN 8n Kranji.docx5. Rangkuman Kehadiran Guru di Kelas_SDN 8n Kranji.docx
5. Rangkuman Kehadiran Guru di Kelas_SDN 8n Kranji.docx
StevanusOkiRudySusan
 
Biografi Presiden Republik Indonesia.pdf
Biografi Presiden Republik Indonesia.pdfBiografi Presiden Republik Indonesia.pdf
Biografi Presiden Republik Indonesia.pdf
pristayulianabila
 
Projek Penguatan Profil Pelajar Pancasila SD.pdf.pdf
Projek Penguatan Profil Pelajar Pancasila SD.pdf.pdfProjek Penguatan Profil Pelajar Pancasila SD.pdf.pdf
Projek Penguatan Profil Pelajar Pancasila SD.pdf.pdf
anikdwihariyanti
 
Alur tujuan pembelajaran bahasa inggris kelas x fase e
Alur tujuan pembelajaran bahasa inggris kelas x fase eAlur tujuan pembelajaran bahasa inggris kelas x fase e
Alur tujuan pembelajaran bahasa inggris kelas x fase e
MsElisazmar
 
RENCANA + Link2 Materi BimTek _"Ketentuan TERBARU_PTK 007 Rev-5 Tahun 2023 & ...
RENCANA + Link2 Materi BimTek _"Ketentuan TERBARU_PTK 007 Rev-5 Tahun 2023 & ...RENCANA + Link2 Materi BimTek _"Ketentuan TERBARU_PTK 007 Rev-5 Tahun 2023 & ...
RENCANA + Link2 Materi BimTek _"Ketentuan TERBARU_PTK 007 Rev-5 Tahun 2023 & ...
Kanaidi ken
 
Perangkat pembelajaran dalam kurikulum merdeka
Perangkat pembelajaran dalam kurikulum merdekaPerangkat pembelajaran dalam kurikulum merdeka
Perangkat pembelajaran dalam kurikulum merdeka
AchmadArifudin3
 
Panduan E_KSP SMK 2024 Program Kemendikbud SMK
Panduan E_KSP SMK 2024 Program Kemendikbud SMKPanduan E_KSP SMK 2024 Program Kemendikbud SMK
Panduan E_KSP SMK 2024 Program Kemendikbud SMK
PujiMaryati
 
laporan komunitas belajar sekolah dasar negeri botoputih
laporan komunitas belajar sekolah dasar negeri botoputihlaporan komunitas belajar sekolah dasar negeri botoputih
laporan komunitas belajar sekolah dasar negeri botoputih
SDNBotoputih
 
PPT KRITERIA KENAIKAN KELAS & KELULUSAN.pptx
PPT KRITERIA KENAIKAN KELAS & KELULUSAN.pptxPPT KRITERIA KENAIKAN KELAS & KELULUSAN.pptx
PPT KRITERIA KENAIKAN KELAS & KELULUSAN.pptx
SriKuntjoro1
 
Materi Feedback (umpan balik) kelas Psikologi Komunikasi
Materi Feedback (umpan balik) kelas Psikologi KomunikasiMateri Feedback (umpan balik) kelas Psikologi Komunikasi
Materi Feedback (umpan balik) kelas Psikologi Komunikasi
AdePutraTunggali
 
Koneksi Antar Materi modul 2.1.pptx Johan martha
Koneksi Antar Materi modul 2.1.pptx Johan marthaKoneksi Antar Materi modul 2.1.pptx Johan martha
Koneksi Antar Materi modul 2.1.pptx Johan martha
johan199969
 
Aksi Nyata Modul 1.1. Pendidikan Guru Penggerak
Aksi Nyata Modul 1.1. Pendidikan Guru PenggerakAksi Nyata Modul 1.1. Pendidikan Guru Penggerak
Aksi Nyata Modul 1.1. Pendidikan Guru Penggerak
TitisNindiasariAnggr
 

Recently uploaded (20)

RANCANGAN TINDAKAN AKSI NYATA MODUL 1.4.pdf.pdf
RANCANGAN TINDAKAN AKSI NYATA MODUL 1.4.pdf.pdfRANCANGAN TINDAKAN AKSI NYATA MODUL 1.4.pdf.pdf
RANCANGAN TINDAKAN AKSI NYATA MODUL 1.4.pdf.pdf
 
Demonstrasi Konseptual Modul 2.1 - RPP Berdiferensiasi.pdf
Demonstrasi Konseptual Modul 2.1 - RPP Berdiferensiasi.pdfDemonstrasi Konseptual Modul 2.1 - RPP Berdiferensiasi.pdf
Demonstrasi Konseptual Modul 2.1 - RPP Berdiferensiasi.pdf
 
PERSENTASI PENINGKATAN KUALITAS PRAKTIK PEMBELAJARAN.pdf
PERSENTASI PENINGKATAN KUALITAS PRAKTIK PEMBELAJARAN.pdfPERSENTASI PENINGKATAN KUALITAS PRAKTIK PEMBELAJARAN.pdf
PERSENTASI PENINGKATAN KUALITAS PRAKTIK PEMBELAJARAN.pdf
 
Pengenalan Morfologi & Tata Bahasa Indonesia
Pengenalan Morfologi & Tata Bahasa IndonesiaPengenalan Morfologi & Tata Bahasa Indonesia
Pengenalan Morfologi & Tata Bahasa Indonesia
 
CP dan ATP bahasa indonesia fase B kelas 12.pdf
CP dan ATP bahasa indonesia fase B kelas 12.pdfCP dan ATP bahasa indonesia fase B kelas 12.pdf
CP dan ATP bahasa indonesia fase B kelas 12.pdf
 
Bab 7Korupsi sebagai persoalan moral .pptx
Bab 7Korupsi sebagai persoalan moral  .pptxBab 7Korupsi sebagai persoalan moral  .pptx
Bab 7Korupsi sebagai persoalan moral .pptx
 
PELAKSANAAN + Link2 Materi WORKSHOP Nasional _"Penerapan Regulasi Terbaru P...
PELAKSANAAN + Link2 Materi WORKSHOP Nasional _"Penerapan  Regulasi  Terbaru P...PELAKSANAAN + Link2 Materi WORKSHOP Nasional _"Penerapan  Regulasi  Terbaru P...
PELAKSANAAN + Link2 Materi WORKSHOP Nasional _"Penerapan Regulasi Terbaru P...
 
Modul Projek Gaya Hidup Berkelanjutan - Peduli Sampah Selamatkan Generasi - F...
Modul Projek Gaya Hidup Berkelanjutan - Peduli Sampah Selamatkan Generasi - F...Modul Projek Gaya Hidup Berkelanjutan - Peduli Sampah Selamatkan Generasi - F...
Modul Projek Gaya Hidup Berkelanjutan - Peduli Sampah Selamatkan Generasi - F...
 
5. Rangkuman Kehadiran Guru di Kelas_SDN 8n Kranji.docx
5. Rangkuman Kehadiran Guru di Kelas_SDN 8n Kranji.docx5. Rangkuman Kehadiran Guru di Kelas_SDN 8n Kranji.docx
5. Rangkuman Kehadiran Guru di Kelas_SDN 8n Kranji.docx
 
Biografi Presiden Republik Indonesia.pdf
Biografi Presiden Republik Indonesia.pdfBiografi Presiden Republik Indonesia.pdf
Biografi Presiden Republik Indonesia.pdf
 
Projek Penguatan Profil Pelajar Pancasila SD.pdf.pdf
Projek Penguatan Profil Pelajar Pancasila SD.pdf.pdfProjek Penguatan Profil Pelajar Pancasila SD.pdf.pdf
Projek Penguatan Profil Pelajar Pancasila SD.pdf.pdf
 
Alur tujuan pembelajaran bahasa inggris kelas x fase e
Alur tujuan pembelajaran bahasa inggris kelas x fase eAlur tujuan pembelajaran bahasa inggris kelas x fase e
Alur tujuan pembelajaran bahasa inggris kelas x fase e
 
RENCANA + Link2 Materi BimTek _"Ketentuan TERBARU_PTK 007 Rev-5 Tahun 2023 & ...
RENCANA + Link2 Materi BimTek _"Ketentuan TERBARU_PTK 007 Rev-5 Tahun 2023 & ...RENCANA + Link2 Materi BimTek _"Ketentuan TERBARU_PTK 007 Rev-5 Tahun 2023 & ...
RENCANA + Link2 Materi BimTek _"Ketentuan TERBARU_PTK 007 Rev-5 Tahun 2023 & ...
 
Perangkat pembelajaran dalam kurikulum merdeka
Perangkat pembelajaran dalam kurikulum merdekaPerangkat pembelajaran dalam kurikulum merdeka
Perangkat pembelajaran dalam kurikulum merdeka
 
Panduan E_KSP SMK 2024 Program Kemendikbud SMK
Panduan E_KSP SMK 2024 Program Kemendikbud SMKPanduan E_KSP SMK 2024 Program Kemendikbud SMK
Panduan E_KSP SMK 2024 Program Kemendikbud SMK
 
laporan komunitas belajar sekolah dasar negeri botoputih
laporan komunitas belajar sekolah dasar negeri botoputihlaporan komunitas belajar sekolah dasar negeri botoputih
laporan komunitas belajar sekolah dasar negeri botoputih
 
PPT KRITERIA KENAIKAN KELAS & KELULUSAN.pptx
PPT KRITERIA KENAIKAN KELAS & KELULUSAN.pptxPPT KRITERIA KENAIKAN KELAS & KELULUSAN.pptx
PPT KRITERIA KENAIKAN KELAS & KELULUSAN.pptx
 
Materi Feedback (umpan balik) kelas Psikologi Komunikasi
Materi Feedback (umpan balik) kelas Psikologi KomunikasiMateri Feedback (umpan balik) kelas Psikologi Komunikasi
Materi Feedback (umpan balik) kelas Psikologi Komunikasi
 
Koneksi Antar Materi modul 2.1.pptx Johan martha
Koneksi Antar Materi modul 2.1.pptx Johan marthaKoneksi Antar Materi modul 2.1.pptx Johan martha
Koneksi Antar Materi modul 2.1.pptx Johan martha
 
Aksi Nyata Modul 1.1. Pendidikan Guru Penggerak
Aksi Nyata Modul 1.1. Pendidikan Guru PenggerakAksi Nyata Modul 1.1. Pendidikan Guru Penggerak
Aksi Nyata Modul 1.1. Pendidikan Guru Penggerak
 

Presentasi konsep dasar html

  • 1. Materi : 1. Konsep Dasar HTML 2. Elemen pada Tag Head 3. Elemen pada tag Body Oleh : Dedy Setiawan, ST
  • 2.  HyperText Markup Language (HTML) adalah suatu bahasa pengkodean (Script) yang digunakan untuk membangun sebuah halaman web.  “HTML merupakan standar bahasa yang digunakan untuk menampilkan dokumen web”.  Ekstensi File : ‘html’ atau ‘htm’.  Editor HTML: Notepad, atau aplikasi khusus scripting (Macromedia Dreamweaver, dll).  Tag adalah Unsur bahasa atau elemen HTML dinyatakan dengan tanda khusus
  • 3.  Bentuk umumpenulisan sintak tag HTML : <ELEMENT [ATRIBUT1 =”value” … ATRIBUTN=”value”] > … </ELEMENT> Keterangan : ELEMENT : Nama Tag HTML ATRIBUT : Atribut dari Tag HTML (optional) VALUE : Nilai dari Atribut Tag HTML (optional) Contoh : < BODY BGCOLOR =”red”> ……… </BODY>
  • 4.  Open Element Merupakan elemen-elemen (tag) HTML yang bersifat terbuka, atau tidak memiliki elemen penutup. Format penulisan <name element /> Contoh : <hr/>, <br/>  Close Element Merupakan elemen-elemen (tag) HTML yang bersifat tertutup, atau memiliki elemen penutup. Format penulisan : <name element > ….. </name element> Contoh : <body>…<body/>, <div>…</div>, dll.  Comment Merupakan baris yang tidak akan dieksekusi oleh penerjemah. Biasanya digunakan untuk informasi script . Format Penulisan : < ! - - comment text -- > Contoh : < ! - - Hallo saya adalah baris yang tidak akan diekskusi -- >
  • 5. Struktur elemen dalam dokumen HTML adalah struktur dasar penulisan script untuk dokumen HTML. Berikut ini adalah gambar struktur dokumen HTML, dan hubungannya dengan output pada halaman web browser.
  • 6.  Elemen-elemen pada tag HEAD HTML, adalah elemen-elemen yang didefinisikan dan ditulis diantara Tag <HEAD> dan </HEAD>. Ada beberapa macam elemen pada tag HEAD HTML, yaitu antara lain :
  • 7.  TITLE Tag yang digunakan untuk menampilkan judul homepage/ halaman web pada title browser area. Contoh : < TITLE > halaman web pertamaku </TITLE>  META Tag yang digunakan untuk mendefinisikan informasi (keywords, http header, dll) dan identitas (author, copyright, dll) pada sebuah halaman web (dokumen HTML). Contoh : < META keywords = “web, pemrograman”/> < META name =”author” content =”eko win kenali”/> < META name =”copyright” content =”2006”/>
  • 8.  LINK tag yang digunakan untuk menyertakan dokumen lain ke dalam halaman web untuk tujuan khusus. Dokumen lain tersebut biasa berupa file dengan format CSS, PHP, ICO dan lain- lain. Contoh : <link rel="shortcut icon" href="../images/favicon.ico" type="image/x-icon“/> <link rel="stylesheet" href="../css/style.css" media="screen" type="text/css“/>
  • 9.  Elemen-elemen pada tag BODY HTML, adalah elemen-elemen yang didefinisikan dan ditulis diantara Tag <BODY> dan </BODY>.
  • 10.  HEADING Heading adalah elemen tag yang digunakan untuk mendefinisikan sebuah teks sebagai kepala (judul/title). Ada 6 macam elemen heading, yaitu H1, H2, H3, H4, H5 dan H6. Contoh : < H1 > Contoh Heading 1 </H1>  PARAGRAPH Paragraph adalah elemen tag yang digunakan untuk mendefinisikan sebuah teks atau lebih sebagai paragraph. Elemen Paragraph ditandai dengan close tag <p>..</p>. Contoh : <p> HyperText Markup Language (HTML) adalah suatu bahasa pengkodean (coding/scripting) yang digunakan untuk membangun sebuah halaman web. Script HTML akan diinterpretasikan dan diterjemahkan olehbrowser, kemudian browser akan menampilkan hasil ke pengguna. </p>
  • 11.  LIST ITEMS List Item adalah tag digunakan untuk mengelompokkan data (teks) baik dengan metode pengelompokan tidak berurutan (unordered list) maupun pengelompokan berurutan (ordered list). Contoh :
  • 12.
  • 13.
  • 14.  DEFINITON LIST Definition List fungsinya sama dengan list item. Elemen Definition List ditandai oleh tag <DL> … </DL>. Didalam tag Definition List terdapat tag Definition Term <DT>, yaitu tag untuk menentukan definition term. Serta tag Definition <DD>, yaitu tag untuk menentukan definition itu sendiri. Contoh :
  • 15.
  • 16.  HORIZONTAL RULE Horizontal rule adalah tag digunakan untuk menggambar garis horizontal dalam document HTML. Elemen Horizontal Rule ditandai dengan tag <hr>. Contoh : <hr/>
  • 17.  BREAK LINE Break Line adalah tag di gunakan untuk memulai/ganti baris baru pada document HTML. Elemen Break Line ditandai dengan tag <br>. Contoh : <br/>  FONT Font adalah tag di gunakan untuk menentukan format font pada dokumen html. Elemen Font ditandai dengan tag <font>…</font>.