SlideShare ist ein Scribd-Unternehmen logo
1 von 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>.
Presentasi konsep dasar html

Weitere ähnliche Inhalte

Was ist angesagt? (20)

Html ppt
Html pptHtml ppt
Html ppt
 
Bootstrap
BootstrapBootstrap
Bootstrap
 
HTML Dasar : #6 List
HTML Dasar : #6 ListHTML Dasar : #6 List
HTML Dasar : #6 List
 
Html coding
Html codingHtml coding
Html coding
 
HTML
HTMLHTML
HTML
 
Html
HtmlHtml
Html
 
HTML dan CSS
HTML dan CSSHTML dan CSS
HTML dan CSS
 
Pengenalan html
Pengenalan htmlPengenalan html
Pengenalan html
 
HTML Dasar : #2 Hello World
HTML Dasar : #2 Hello WorldHTML Dasar : #2 Hello World
HTML Dasar : #2 Hello World
 
CSS Layouting #2 : Dimensi & Overflow
CSS Layouting #2 : Dimensi & OverflowCSS Layouting #2 : Dimensi & Overflow
CSS Layouting #2 : Dimensi & Overflow
 
Html n CSS
Html n CSSHtml n CSS
Html n CSS
 
CSS3, Media Queries, and Responsive Design
CSS3, Media Queries, and Responsive DesignCSS3, Media Queries, and Responsive Design
CSS3, Media Queries, and Responsive Design
 
Belajar Web HTML – Modul 6 Hyperlink
Belajar Web HTML – Modul 6 Hyperlink Belajar Web HTML – Modul 6 Hyperlink
Belajar Web HTML – Modul 6 Hyperlink
 
html tags
html tagshtml tags
html tags
 
HTML - Form
HTML - FormHTML - Form
HTML - Form
 
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
 
Html form tag
Html form tagHtml form tag
Html form tag
 
Pengenalan Dasar Web
Pengenalan Dasar WebPengenalan Dasar Web
Pengenalan Dasar Web
 
HTML Dasar : #4 Paragraf
HTML Dasar : #4 ParagrafHTML Dasar : #4 Paragraf
HTML Dasar : #4 Paragraf
 
Basic HTML
Basic HTMLBasic HTML
Basic HTML
 

Andere mochten auch

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
 

Andere mochten auch (11)

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
 
Contoh Presentasi Power Point Tentang Pendidikan
Contoh Presentasi Power Point Tentang PendidikanContoh Presentasi Power Point Tentang Pendidikan
Contoh Presentasi Power Point Tentang Pendidikan
 

Ähnlich wie 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.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
 

Ähnlich wie 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
 

Mehr von 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
 

Mehr von 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
 

Kürzlich hochgeladen

E-modul Materi Ekosistem untuk kelas X SMA
E-modul Materi Ekosistem untuk kelas X SMAE-modul Materi Ekosistem untuk kelas X SMA
E-modul Materi Ekosistem untuk kelas X SMAAmmar Ahmad
 
HAK DAN KEWAJIBAN WARGA NEGARA ppkn i.ppt
HAK DAN KEWAJIBAN WARGA NEGARA ppkn i.pptHAK DAN KEWAJIBAN WARGA NEGARA ppkn i.ppt
HAK DAN KEWAJIBAN WARGA NEGARA ppkn i.pptnabilafarahdiba95
 
PELAKSANAAN (dgn PT SBI) + Link2 Materi Pelatihan _"Teknik Perhitungan TKDN, ...
PELAKSANAAN (dgn PT SBI) + Link2 Materi Pelatihan _"Teknik Perhitungan TKDN, ...PELAKSANAAN (dgn PT SBI) + Link2 Materi Pelatihan _"Teknik Perhitungan TKDN, ...
PELAKSANAAN (dgn PT SBI) + Link2 Materi Pelatihan _"Teknik Perhitungan TKDN, ...Kanaidi ken
 
power point bahasa indonesia "Karya Ilmiah"
power point bahasa indonesia "Karya Ilmiah"power point bahasa indonesia "Karya Ilmiah"
power point bahasa indonesia "Karya Ilmiah"baimmuhammad71
 
vIDEO kelayakan berita untuk mahasiswa.ppsx
vIDEO kelayakan berita untuk mahasiswa.ppsxvIDEO kelayakan berita untuk mahasiswa.ppsx
vIDEO kelayakan berita untuk mahasiswa.ppsxsyahrulutama16
 
TEKNIK MENJAWAB RUMUSAN SPM 2022 - UNTUK MURID.pptx
TEKNIK MENJAWAB RUMUSAN SPM 2022 - UNTUK MURID.pptxTEKNIK MENJAWAB RUMUSAN SPM 2022 - UNTUK MURID.pptx
TEKNIK MENJAWAB RUMUSAN SPM 2022 - UNTUK MURID.pptxMOHDAZLANBINALIMoe
 
PPT PERUBAHAN LINGKUNGAN MATA PELAJARAN BIOLOGI KELAS X.pptx
PPT PERUBAHAN LINGKUNGAN MATA PELAJARAN BIOLOGI KELAS X.pptxPPT PERUBAHAN LINGKUNGAN MATA PELAJARAN BIOLOGI KELAS X.pptx
PPT PERUBAHAN LINGKUNGAN MATA PELAJARAN BIOLOGI KELAS X.pptxdpp11tya
 
Refleksi Mandiri Modul 1.3 - KANVAS BAGJA.pptx.pptx
Refleksi Mandiri Modul 1.3 - KANVAS BAGJA.pptx.pptxRefleksi Mandiri Modul 1.3 - KANVAS BAGJA.pptx.pptx
Refleksi Mandiri Modul 1.3 - KANVAS BAGJA.pptx.pptxIrfanAudah1
 
Modul 2 - Bagaimana membangun lingkungan belajar yang mendukung transisi PAUD...
Modul 2 - Bagaimana membangun lingkungan belajar yang mendukung transisi PAUD...Modul 2 - Bagaimana membangun lingkungan belajar yang mendukung transisi PAUD...
Modul 2 - Bagaimana membangun lingkungan belajar yang mendukung transisi PAUD...pipinafindraputri1
 
Bab 4 Persatuan dan Kesatuan di Lingkup Wilayah Kabupaten dan Kota.pptx
Bab 4 Persatuan dan Kesatuan di Lingkup Wilayah Kabupaten dan Kota.pptxBab 4 Persatuan dan Kesatuan di Lingkup Wilayah Kabupaten dan Kota.pptx
Bab 4 Persatuan dan Kesatuan di Lingkup Wilayah Kabupaten dan Kota.pptxrizalhabib4
 
MODUL PENDIDIKAN PANCASILA KELAS 6 KURIKULUM MERDEKA.pdf
MODUL PENDIDIKAN PANCASILA KELAS 6 KURIKULUM MERDEKA.pdfMODUL PENDIDIKAN PANCASILA KELAS 6 KURIKULUM MERDEKA.pdf
MODUL PENDIDIKAN PANCASILA KELAS 6 KURIKULUM MERDEKA.pdfAndiCoc
 
Aksi Nyata Disiplin Positif Keyakinan Kelas untuk SMK
Aksi Nyata Disiplin Positif Keyakinan Kelas untuk SMKAksi Nyata Disiplin Positif Keyakinan Kelas untuk SMK
Aksi Nyata Disiplin Positif Keyakinan Kelas untuk SMKgamelamalaal
 
7.PPT TENTANG TUGAS Keseimbangan-AD-AS .pptx
7.PPT TENTANG TUGAS Keseimbangan-AD-AS .pptx7.PPT TENTANG TUGAS Keseimbangan-AD-AS .pptx
7.PPT TENTANG TUGAS Keseimbangan-AD-AS .pptxSusanSanti20
 
SOAL PUBLIC SPEAKING UNTUK PEMULA PG & ESSAY
SOAL PUBLIC SPEAKING UNTUK PEMULA PG & ESSAYSOAL PUBLIC SPEAKING UNTUK PEMULA PG & ESSAY
SOAL PUBLIC SPEAKING UNTUK PEMULA PG & ESSAYNovitaDewi98
 
Program Kerja Public Relations - Perencanaan
Program Kerja Public Relations - PerencanaanProgram Kerja Public Relations - Perencanaan
Program Kerja Public Relations - PerencanaanAdePutraTunggali
 
Aksi Nyata Sosialisasi Profil Pelajar Pancasila.pdf
Aksi Nyata Sosialisasi Profil Pelajar Pancasila.pdfAksi Nyata Sosialisasi Profil Pelajar Pancasila.pdf
Aksi Nyata Sosialisasi Profil Pelajar Pancasila.pdfJarzaniIsmail
 
Pendidikan-Bahasa-Indonesia-di-SD MODUL 3 .pptx
Pendidikan-Bahasa-Indonesia-di-SD MODUL 3 .pptxPendidikan-Bahasa-Indonesia-di-SD MODUL 3 .pptx
Pendidikan-Bahasa-Indonesia-di-SD MODUL 3 .pptxdeskaputriani1
 
Regresi Linear Kelompok 1 XI-10 revisi (1).pptx
Regresi Linear Kelompok 1 XI-10 revisi (1).pptxRegresi Linear Kelompok 1 XI-10 revisi (1).pptx
Regresi Linear Kelompok 1 XI-10 revisi (1).pptxRizalAminulloh2
 
LATAR BELAKANG JURNAL DIALOGIS REFLEKTIF.ppt
LATAR BELAKANG JURNAL DIALOGIS REFLEKTIF.pptLATAR BELAKANG JURNAL DIALOGIS REFLEKTIF.ppt
LATAR BELAKANG JURNAL DIALOGIS REFLEKTIF.pptPpsSambirejo
 

Kürzlich hochgeladen (20)

E-modul Materi Ekosistem untuk kelas X SMA
E-modul Materi Ekosistem untuk kelas X SMAE-modul Materi Ekosistem untuk kelas X SMA
E-modul Materi Ekosistem untuk kelas X SMA
 
Intellectual Discourse Business in Islamic Perspective - Mej Dr Mohd Adib Abd...
Intellectual Discourse Business in Islamic Perspective - Mej Dr Mohd Adib Abd...Intellectual Discourse Business in Islamic Perspective - Mej Dr Mohd Adib Abd...
Intellectual Discourse Business in Islamic Perspective - Mej Dr Mohd Adib Abd...
 
HAK DAN KEWAJIBAN WARGA NEGARA ppkn i.ppt
HAK DAN KEWAJIBAN WARGA NEGARA ppkn i.pptHAK DAN KEWAJIBAN WARGA NEGARA ppkn i.ppt
HAK DAN KEWAJIBAN WARGA NEGARA ppkn i.ppt
 
PELAKSANAAN (dgn PT SBI) + Link2 Materi Pelatihan _"Teknik Perhitungan TKDN, ...
PELAKSANAAN (dgn PT SBI) + Link2 Materi Pelatihan _"Teknik Perhitungan TKDN, ...PELAKSANAAN (dgn PT SBI) + Link2 Materi Pelatihan _"Teknik Perhitungan TKDN, ...
PELAKSANAAN (dgn PT SBI) + Link2 Materi Pelatihan _"Teknik Perhitungan TKDN, ...
 
power point bahasa indonesia "Karya Ilmiah"
power point bahasa indonesia "Karya Ilmiah"power point bahasa indonesia "Karya Ilmiah"
power point bahasa indonesia "Karya Ilmiah"
 
vIDEO kelayakan berita untuk mahasiswa.ppsx
vIDEO kelayakan berita untuk mahasiswa.ppsxvIDEO kelayakan berita untuk mahasiswa.ppsx
vIDEO kelayakan berita untuk mahasiswa.ppsx
 
TEKNIK MENJAWAB RUMUSAN SPM 2022 - UNTUK MURID.pptx
TEKNIK MENJAWAB RUMUSAN SPM 2022 - UNTUK MURID.pptxTEKNIK MENJAWAB RUMUSAN SPM 2022 - UNTUK MURID.pptx
TEKNIK MENJAWAB RUMUSAN SPM 2022 - UNTUK MURID.pptx
 
PPT PERUBAHAN LINGKUNGAN MATA PELAJARAN BIOLOGI KELAS X.pptx
PPT PERUBAHAN LINGKUNGAN MATA PELAJARAN BIOLOGI KELAS X.pptxPPT PERUBAHAN LINGKUNGAN MATA PELAJARAN BIOLOGI KELAS X.pptx
PPT PERUBAHAN LINGKUNGAN MATA PELAJARAN BIOLOGI KELAS X.pptx
 
Refleksi Mandiri Modul 1.3 - KANVAS BAGJA.pptx.pptx
Refleksi Mandiri Modul 1.3 - KANVAS BAGJA.pptx.pptxRefleksi Mandiri Modul 1.3 - KANVAS BAGJA.pptx.pptx
Refleksi Mandiri Modul 1.3 - KANVAS BAGJA.pptx.pptx
 
Modul 2 - Bagaimana membangun lingkungan belajar yang mendukung transisi PAUD...
Modul 2 - Bagaimana membangun lingkungan belajar yang mendukung transisi PAUD...Modul 2 - Bagaimana membangun lingkungan belajar yang mendukung transisi PAUD...
Modul 2 - Bagaimana membangun lingkungan belajar yang mendukung transisi PAUD...
 
Bab 4 Persatuan dan Kesatuan di Lingkup Wilayah Kabupaten dan Kota.pptx
Bab 4 Persatuan dan Kesatuan di Lingkup Wilayah Kabupaten dan Kota.pptxBab 4 Persatuan dan Kesatuan di Lingkup Wilayah Kabupaten dan Kota.pptx
Bab 4 Persatuan dan Kesatuan di Lingkup Wilayah Kabupaten dan Kota.pptx
 
MODUL PENDIDIKAN PANCASILA KELAS 6 KURIKULUM MERDEKA.pdf
MODUL PENDIDIKAN PANCASILA KELAS 6 KURIKULUM MERDEKA.pdfMODUL PENDIDIKAN PANCASILA KELAS 6 KURIKULUM MERDEKA.pdf
MODUL PENDIDIKAN PANCASILA KELAS 6 KURIKULUM MERDEKA.pdf
 
Aksi Nyata Disiplin Positif Keyakinan Kelas untuk SMK
Aksi Nyata Disiplin Positif Keyakinan Kelas untuk SMKAksi Nyata Disiplin Positif Keyakinan Kelas untuk SMK
Aksi Nyata Disiplin Positif Keyakinan Kelas untuk SMK
 
7.PPT TENTANG TUGAS Keseimbangan-AD-AS .pptx
7.PPT TENTANG TUGAS Keseimbangan-AD-AS .pptx7.PPT TENTANG TUGAS Keseimbangan-AD-AS .pptx
7.PPT TENTANG TUGAS Keseimbangan-AD-AS .pptx
 
SOAL PUBLIC SPEAKING UNTUK PEMULA PG & ESSAY
SOAL PUBLIC SPEAKING UNTUK PEMULA PG & ESSAYSOAL PUBLIC SPEAKING UNTUK PEMULA PG & ESSAY
SOAL PUBLIC SPEAKING UNTUK PEMULA PG & ESSAY
 
Program Kerja Public Relations - Perencanaan
Program Kerja Public Relations - PerencanaanProgram Kerja Public Relations - Perencanaan
Program Kerja Public Relations - Perencanaan
 
Aksi Nyata Sosialisasi Profil Pelajar Pancasila.pdf
Aksi Nyata Sosialisasi Profil Pelajar Pancasila.pdfAksi Nyata Sosialisasi Profil Pelajar Pancasila.pdf
Aksi Nyata Sosialisasi Profil Pelajar Pancasila.pdf
 
Pendidikan-Bahasa-Indonesia-di-SD MODUL 3 .pptx
Pendidikan-Bahasa-Indonesia-di-SD MODUL 3 .pptxPendidikan-Bahasa-Indonesia-di-SD MODUL 3 .pptx
Pendidikan-Bahasa-Indonesia-di-SD MODUL 3 .pptx
 
Regresi Linear Kelompok 1 XI-10 revisi (1).pptx
Regresi Linear Kelompok 1 XI-10 revisi (1).pptxRegresi Linear Kelompok 1 XI-10 revisi (1).pptx
Regresi Linear Kelompok 1 XI-10 revisi (1).pptx
 
LATAR BELAKANG JURNAL DIALOGIS REFLEKTIF.ppt
LATAR BELAKANG JURNAL DIALOGIS REFLEKTIF.pptLATAR BELAKANG JURNAL DIALOGIS REFLEKTIF.ppt
LATAR BELAKANG JURNAL DIALOGIS REFLEKTIF.ppt
 

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