SlideShare a Scribd company logo
1 of 18
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>.
HTML Dasar

More Related Content

What's hot

What's hot (20)

Hushang Gaikwad
Hushang GaikwadHushang Gaikwad
Hushang Gaikwad
 
Tugas laporan project aplikasi website
Tugas laporan project aplikasi websiteTugas laporan project aplikasi website
Tugas laporan project aplikasi website
 
CSS Layouting #4 : Float
CSS Layouting #4 : FloatCSS Layouting #4 : Float
CSS Layouting #4 : Float
 
Understanding THML
Understanding THMLUnderstanding THML
Understanding THML
 
Html introduction
Html introductionHtml introduction
Html introduction
 
Power point
Power pointPower point
Power point
 
Laporan pemrograman berbasis web (CSS)
Laporan pemrograman berbasis web (CSS)Laporan pemrograman berbasis web (CSS)
Laporan pemrograman berbasis web (CSS)
 
Pemrograman Berorientasi Objek
Pemrograman Berorientasi ObjekPemrograman Berorientasi Objek
Pemrograman Berorientasi Objek
 
CSS Layouting #5 : Position
CSS Layouting #5 : PositionCSS Layouting #5 : Position
CSS Layouting #5 : Position
 
Modul Membuat Tabel pada HTML
Modul Membuat Tabel pada HTMLModul Membuat Tabel pada HTML
Modul Membuat Tabel pada HTML
 
Gudang Materi Ms. Word 1
Gudang Materi Ms. Word 1Gudang Materi Ms. Word 1
Gudang Materi Ms. Word 1
 
Tipe data abstract
Tipe data abstractTipe data abstract
Tipe data abstract
 
HTML & CSS
HTML & CSSHTML & CSS
HTML & CSS
 
Materi CMS - Blog.pptx
Materi CMS - Blog.pptxMateri CMS - Blog.pptx
Materi CMS - Blog.pptx
 
[PBO] Pertemuan 4 - Getter Setter
[PBO] Pertemuan 4 - Getter Setter[PBO] Pertemuan 4 - Getter Setter
[PBO] Pertemuan 4 - Getter Setter
 
Contoh soal uts struktur data
Contoh soal uts struktur dataContoh soal uts struktur data
Contoh soal uts struktur data
 
Dasar pemrograman web HTML
Dasar pemrograman web HTMLDasar pemrograman web HTML
Dasar pemrograman web HTML
 
Microsoft Word
Microsoft WordMicrosoft Word
Microsoft Word
 
Pengenalan html
Pengenalan htmlPengenalan html
Pengenalan html
 
CSS Dasar #2 : Anatomy CSS
CSS Dasar #2 : Anatomy CSSCSS Dasar #2 : Anatomy CSS
CSS Dasar #2 : Anatomy CSS
 

Viewers also liked

Presentasi E- commerce
Presentasi E- commercePresentasi E- commerce
Presentasi E- commerceImam 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
 
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 pemula1smail12
 
Langkah-Langkah Menggunakan POWERPOInt
Langkah-Langkah Menggunakan POWERPOIntLangkah-Langkah Menggunakan POWERPOInt
Langkah-Langkah Menggunakan POWERPOIntMr.Joseph_4u
 
Presentasi pemograman dasar
Presentasi pemograman dasarPresentasi pemograman dasar
Presentasi pemograman dasarF. Bagus TKJa
 
Contoh Presentasi Power Point Tentang Pendidikan
Contoh Presentasi Power Point Tentang PendidikanContoh Presentasi Power Point Tentang Pendidikan
Contoh Presentasi Power Point Tentang PendidikanMustofa 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 HTML Dasar

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.pptxAndreianYusuf
 
Html dasar
Html dasarHtml dasar
Html dasarfhnx
 
PPT_HTML_DASAR.pptx
PPT_HTML_DASAR.pptxPPT_HTML_DASAR.pptx
PPT_HTML_DASAR.pptxFAUZY38
 
Web design (Pertemuan 1).pptx
Web design (Pertemuan 1).pptxWeb design (Pertemuan 1).pptx
Web design (Pertemuan 1).pptxRaniRatnaningsih2
 
Pertemuan 1 b
Pertemuan 1 bPertemuan 1 b
Pertemuan 1 bf fr
 
Pengenalan struktur elemen html
Pengenalan struktur elemen htmlPengenalan struktur elemen html
Pengenalan struktur elemen htmlDeka 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.pptNansyeDeboraLitaay
 
Praktikum_Pengenalan_HTML
Praktikum_Pengenalan_HTML Praktikum_Pengenalan_HTML
Praktikum_Pengenalan_HTML fikrinurfahmi1
 
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 htmloyie76
 
01. Dasar-dasar HTML.ppt
01. Dasar-dasar HTML.ppt01. Dasar-dasar HTML.ppt
01. Dasar-dasar HTML.pptEdiyono3
 
01. Dasar-dasar HTML.ppt
01. Dasar-dasar HTML.ppt01. Dasar-dasar HTML.ppt
01. Dasar-dasar HTML.pptAkhmadAlbari1
 

Similar to HTML Dasar (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 boxDedy 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_joomlaDedy Setiawan
 
3 membuat kategori_artikel_joomla2.5
3 membuat kategori_artikel_joomla2.53 membuat kategori_artikel_joomla2.5
3 membuat kategori_artikel_joomla2.5Dedy Setiawan
 
2 instalasi template_joomla
2 instalasi template_joomla2 instalasi template_joomla
2 instalasi template_joomlaDedy Setiawan
 
1 tutorial instalasi_joomla
1 tutorial instalasi_joomla1 tutorial instalasi_joomla
1 tutorial instalasi_joomlaDedy 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

BAHAN SOSIALISASI PPDB SMA-SMK NEGERI DISDIKSU TP. 2024-2025 REVISI.pptx
BAHAN SOSIALISASI PPDB SMA-SMK NEGERI DISDIKSU TP. 2024-2025 REVISI.pptxBAHAN SOSIALISASI PPDB SMA-SMK NEGERI DISDIKSU TP. 2024-2025 REVISI.pptx
BAHAN SOSIALISASI PPDB SMA-SMK NEGERI DISDIKSU TP. 2024-2025 REVISI.pptxJamhuriIshak
 
Kelompok 2 Karakteristik Negara Nigeria.pdf
Kelompok 2 Karakteristik Negara Nigeria.pdfKelompok 2 Karakteristik Negara Nigeria.pdf
Kelompok 2 Karakteristik Negara Nigeria.pdftsaniasalftn18
 
Ppt tentang perkembangan Moral Pada Anak
Ppt tentang perkembangan Moral Pada AnakPpt tentang perkembangan Moral Pada Anak
Ppt tentang perkembangan Moral Pada Anakbekamalayniasinta
 
04-Gemelli.- kehamilan ganda- duo atau triplet
04-Gemelli.- kehamilan ganda- duo atau triplet04-Gemelli.- kehamilan ganda- duo atau triplet
04-Gemelli.- kehamilan ganda- duo atau tripletMelianaJayasaputra
 
MODUL 2 BAHASA INDONESIA-KELOMPOK 1.pptx
MODUL 2 BAHASA INDONESIA-KELOMPOK 1.pptxMODUL 2 BAHASA INDONESIA-KELOMPOK 1.pptx
MODUL 2 BAHASA INDONESIA-KELOMPOK 1.pptxarnisariningsih98
 
MATERI EKOSISTEM UNTUK SEKOLAH MENENGAH ATAS
MATERI EKOSISTEM UNTUK SEKOLAH MENENGAH ATASMATERI EKOSISTEM UNTUK SEKOLAH MENENGAH ATAS
MATERI EKOSISTEM UNTUK SEKOLAH MENENGAH ATASKurniawan Dirham
 
DESAIN MEDIA PEMBELAJARAN BAHASA INDONESIA BERBASIS DIGITAL.pptx
DESAIN MEDIA PEMBELAJARAN BAHASA INDONESIA BERBASIS DIGITAL.pptxDESAIN MEDIA PEMBELAJARAN BAHASA INDONESIA BERBASIS DIGITAL.pptx
DESAIN MEDIA PEMBELAJARAN BAHASA INDONESIA BERBASIS DIGITAL.pptxFuzaAnggriana
 
Materi Strategi Perubahan dibuat oleh kelompok 5
Materi Strategi Perubahan dibuat oleh kelompok 5Materi Strategi Perubahan dibuat oleh kelompok 5
Materi Strategi Perubahan dibuat oleh kelompok 5KIKI TRISNA MUKTI
 
Karakteristik Negara Brazil, Geografi Regional Dunia
Karakteristik Negara Brazil, Geografi Regional DuniaKarakteristik Negara Brazil, Geografi Regional Dunia
Karakteristik Negara Brazil, Geografi Regional DuniaNadia Putri Ayu
 
Edukasi Haji 2023 pembinaan jemaah hajii
Edukasi Haji 2023 pembinaan jemaah hajiiEdukasi Haji 2023 pembinaan jemaah hajii
Edukasi Haji 2023 pembinaan jemaah hajiiIntanHanifah4
 
adap penggunaan media sosial dalam kehidupan sehari-hari.pptx
adap penggunaan media sosial dalam kehidupan sehari-hari.pptxadap penggunaan media sosial dalam kehidupan sehari-hari.pptx
adap penggunaan media sosial dalam kehidupan sehari-hari.pptxmtsmampunbarub4
 
Kesebangunan Segitiga matematika kelas 7 kurikulum merdeka.pptx
Kesebangunan Segitiga matematika kelas 7 kurikulum merdeka.pptxKesebangunan Segitiga matematika kelas 7 kurikulum merdeka.pptx
Kesebangunan Segitiga matematika kelas 7 kurikulum merdeka.pptxDwiYuniarti14
 
PELAKSANAAN + Link2 Materi TRAINING "Effective SUPERVISORY & LEADERSHIP Sk...
PELAKSANAAN  + Link2 Materi TRAINING "Effective  SUPERVISORY &  LEADERSHIP Sk...PELAKSANAAN  + Link2 Materi TRAINING "Effective  SUPERVISORY &  LEADERSHIP Sk...
PELAKSANAAN + Link2 Materi TRAINING "Effective SUPERVISORY & LEADERSHIP Sk...Kanaidi ken
 
Materi Pertemuan Materi Pertemuan 7.pptx
Materi Pertemuan Materi Pertemuan 7.pptxMateri Pertemuan Materi Pertemuan 7.pptx
Materi Pertemuan Materi Pertemuan 7.pptxRezaWahyuni6
 
PEMIKIRAN POLITIK Jean Jacques Rousseau.pdf
PEMIKIRAN POLITIK Jean Jacques  Rousseau.pdfPEMIKIRAN POLITIK Jean Jacques  Rousseau.pdf
PEMIKIRAN POLITIK Jean Jacques Rousseau.pdfMMeizaFachri
 
alat-alat liturgi dalam Gereja Katolik.pptx
alat-alat liturgi dalam Gereja Katolik.pptxalat-alat liturgi dalam Gereja Katolik.pptx
alat-alat liturgi dalam Gereja Katolik.pptxRioNahak1
 
AKSI NYATA Strategi Penerapan Kurikulum Merdeka di Kelas (1).pdf
AKSI NYATA Strategi Penerapan Kurikulum Merdeka di Kelas (1).pdfAKSI NYATA Strategi Penerapan Kurikulum Merdeka di Kelas (1).pdf
AKSI NYATA Strategi Penerapan Kurikulum Merdeka di Kelas (1).pdfTaqdirAlfiandi1
 
Karakteristik Negara Mesir (Geografi Regional Dunia)
Karakteristik Negara Mesir (Geografi Regional Dunia)Karakteristik Negara Mesir (Geografi Regional Dunia)
Karakteristik Negara Mesir (Geografi Regional Dunia)3HerisaSintia
 
Topik 1 - Pengenalan Penghayatan Etika dan Peradaban Acuan Malaysia.pptx
Topik 1 - Pengenalan Penghayatan Etika dan Peradaban Acuan Malaysia.pptxTopik 1 - Pengenalan Penghayatan Etika dan Peradaban Acuan Malaysia.pptx
Topik 1 - Pengenalan Penghayatan Etika dan Peradaban Acuan Malaysia.pptxsyafnasir
 
Jurnal Dwi mingguan modul 1.2-gurupenggerak.pptx
Jurnal Dwi mingguan modul 1.2-gurupenggerak.pptxJurnal Dwi mingguan modul 1.2-gurupenggerak.pptx
Jurnal Dwi mingguan modul 1.2-gurupenggerak.pptxBambang440423
 

Recently uploaded (20)

BAHAN SOSIALISASI PPDB SMA-SMK NEGERI DISDIKSU TP. 2024-2025 REVISI.pptx
BAHAN SOSIALISASI PPDB SMA-SMK NEGERI DISDIKSU TP. 2024-2025 REVISI.pptxBAHAN SOSIALISASI PPDB SMA-SMK NEGERI DISDIKSU TP. 2024-2025 REVISI.pptx
BAHAN SOSIALISASI PPDB SMA-SMK NEGERI DISDIKSU TP. 2024-2025 REVISI.pptx
 
Kelompok 2 Karakteristik Negara Nigeria.pdf
Kelompok 2 Karakteristik Negara Nigeria.pdfKelompok 2 Karakteristik Negara Nigeria.pdf
Kelompok 2 Karakteristik Negara Nigeria.pdf
 
Ppt tentang perkembangan Moral Pada Anak
Ppt tentang perkembangan Moral Pada AnakPpt tentang perkembangan Moral Pada Anak
Ppt tentang perkembangan Moral Pada Anak
 
04-Gemelli.- kehamilan ganda- duo atau triplet
04-Gemelli.- kehamilan ganda- duo atau triplet04-Gemelli.- kehamilan ganda- duo atau triplet
04-Gemelli.- kehamilan ganda- duo atau triplet
 
MODUL 2 BAHASA INDONESIA-KELOMPOK 1.pptx
MODUL 2 BAHASA INDONESIA-KELOMPOK 1.pptxMODUL 2 BAHASA INDONESIA-KELOMPOK 1.pptx
MODUL 2 BAHASA INDONESIA-KELOMPOK 1.pptx
 
MATERI EKOSISTEM UNTUK SEKOLAH MENENGAH ATAS
MATERI EKOSISTEM UNTUK SEKOLAH MENENGAH ATASMATERI EKOSISTEM UNTUK SEKOLAH MENENGAH ATAS
MATERI EKOSISTEM UNTUK SEKOLAH MENENGAH ATAS
 
DESAIN MEDIA PEMBELAJARAN BAHASA INDONESIA BERBASIS DIGITAL.pptx
DESAIN MEDIA PEMBELAJARAN BAHASA INDONESIA BERBASIS DIGITAL.pptxDESAIN MEDIA PEMBELAJARAN BAHASA INDONESIA BERBASIS DIGITAL.pptx
DESAIN MEDIA PEMBELAJARAN BAHASA INDONESIA BERBASIS DIGITAL.pptx
 
Materi Strategi Perubahan dibuat oleh kelompok 5
Materi Strategi Perubahan dibuat oleh kelompok 5Materi Strategi Perubahan dibuat oleh kelompok 5
Materi Strategi Perubahan dibuat oleh kelompok 5
 
Karakteristik Negara Brazil, Geografi Regional Dunia
Karakteristik Negara Brazil, Geografi Regional DuniaKarakteristik Negara Brazil, Geografi Regional Dunia
Karakteristik Negara Brazil, Geografi Regional Dunia
 
Edukasi Haji 2023 pembinaan jemaah hajii
Edukasi Haji 2023 pembinaan jemaah hajiiEdukasi Haji 2023 pembinaan jemaah hajii
Edukasi Haji 2023 pembinaan jemaah hajii
 
adap penggunaan media sosial dalam kehidupan sehari-hari.pptx
adap penggunaan media sosial dalam kehidupan sehari-hari.pptxadap penggunaan media sosial dalam kehidupan sehari-hari.pptx
adap penggunaan media sosial dalam kehidupan sehari-hari.pptx
 
Kesebangunan Segitiga matematika kelas 7 kurikulum merdeka.pptx
Kesebangunan Segitiga matematika kelas 7 kurikulum merdeka.pptxKesebangunan Segitiga matematika kelas 7 kurikulum merdeka.pptx
Kesebangunan Segitiga matematika kelas 7 kurikulum merdeka.pptx
 
PELAKSANAAN + Link2 Materi TRAINING "Effective SUPERVISORY & LEADERSHIP Sk...
PELAKSANAAN  + Link2 Materi TRAINING "Effective  SUPERVISORY &  LEADERSHIP Sk...PELAKSANAAN  + Link2 Materi TRAINING "Effective  SUPERVISORY &  LEADERSHIP Sk...
PELAKSANAAN + Link2 Materi TRAINING "Effective SUPERVISORY & LEADERSHIP Sk...
 
Materi Pertemuan Materi Pertemuan 7.pptx
Materi Pertemuan Materi Pertemuan 7.pptxMateri Pertemuan Materi Pertemuan 7.pptx
Materi Pertemuan Materi Pertemuan 7.pptx
 
PEMIKIRAN POLITIK Jean Jacques Rousseau.pdf
PEMIKIRAN POLITIK Jean Jacques  Rousseau.pdfPEMIKIRAN POLITIK Jean Jacques  Rousseau.pdf
PEMIKIRAN POLITIK Jean Jacques Rousseau.pdf
 
alat-alat liturgi dalam Gereja Katolik.pptx
alat-alat liturgi dalam Gereja Katolik.pptxalat-alat liturgi dalam Gereja Katolik.pptx
alat-alat liturgi dalam Gereja Katolik.pptx
 
AKSI NYATA Strategi Penerapan Kurikulum Merdeka di Kelas (1).pdf
AKSI NYATA Strategi Penerapan Kurikulum Merdeka di Kelas (1).pdfAKSI NYATA Strategi Penerapan Kurikulum Merdeka di Kelas (1).pdf
AKSI NYATA Strategi Penerapan Kurikulum Merdeka di Kelas (1).pdf
 
Karakteristik Negara Mesir (Geografi Regional Dunia)
Karakteristik Negara Mesir (Geografi Regional Dunia)Karakteristik Negara Mesir (Geografi Regional Dunia)
Karakteristik Negara Mesir (Geografi Regional Dunia)
 
Topik 1 - Pengenalan Penghayatan Etika dan Peradaban Acuan Malaysia.pptx
Topik 1 - Pengenalan Penghayatan Etika dan Peradaban Acuan Malaysia.pptxTopik 1 - Pengenalan Penghayatan Etika dan Peradaban Acuan Malaysia.pptx
Topik 1 - Pengenalan Penghayatan Etika dan Peradaban Acuan Malaysia.pptx
 
Jurnal Dwi mingguan modul 1.2-gurupenggerak.pptx
Jurnal Dwi mingguan modul 1.2-gurupenggerak.pptxJurnal Dwi mingguan modul 1.2-gurupenggerak.pptx
Jurnal Dwi mingguan modul 1.2-gurupenggerak.pptx
 

HTML Dasar

  • 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>.