SlideShare a Scribd company logo
1 of 21
HTML
(Hypertext Markup Language
HTML adalah
bahasa pemformatan sederhana untuk
membuat sebuah halaman web.
Program untuk menyunting dan menyimpan
script HTML adalah program teks editor seperti:
notepad, wordpad (untuk OS Windows), Text
editor, Gedit (untuk OS Linux), TextEdit,
TextMate (untuk OS MAC)
Persiapan membuat HTML
• Buat folder khusus. Folder ini adalah tempat
kamu meletakkan file induk, yaitu file html
dan file pendukung seperti foto, gambar,
musik, dan lain-lain.
• Ketika menyimpan file di program teks editor,
jangan lupa tambahkan format htm atau html.
Contoh: danisa.htm atau danisa.html
Struktur dasar dokumen HTML
Dokumen HTML disimpan dalam format teks
reguler dan mengandung tag-tag.
Tag-tag ini berfungsi untuk memerintahkan web
browser menjalankan perintah yang telah
ditetapkan.
Struktur Penulisan HTML
• Dalam struktur penulisan HTML ada 3 elemen
dasar, yaitu: html, head, dan body.
<html>
<head>
<title>ini adalah judul dokumen HTML</title>
</head>
<body>
Disini penulisan semua konten web
</body>
</html>
Keterangan
• Element (p, b, a, h1)
Elemen a digunakan untuk membuat hyperlink ke
halaman lain  <a>
• Tag
Sebuah elemen direpresentasikan oleh tag.
Tag ditandai oleh dua karakter “<“ dan “>”
Contoh: <a>
tag umumnya ditulis berpasangan, terdiri dari
tag pembuka dan tag penutup dengan
tambahan karakter “/”
contoh:
<font face=”arial” color=”yellow”>My
Blog</font>
• Attribute
adalah informasi tambahan untuk elemen
terdiri atas nama dan nilai
umumnya nilai attribute harus berada dalam
tanda petik satu atau dua
<font face=”arial” color=”yellow”>
artinya, jenis huruf yang kita inginkan (nama)
adalah arial (nilai)
warna huruf (nama) kuning (nilai)
Setiap elemen memiliki atribut yang berbeda,
meskipun terdapat juga atribut standar yang dapat
digunakan oleh semua elemen.
• jika menginginkan latar belakang halaman web
dengan warna, contoh scriptnya:
<body bgcolor=”blue”> atau
<body bgcolor=”#ffccdd”>
catatan: warna dengan kode #ffccdd seperti
contoh di atas dapat dilihat melalui bantuan
program editing Photoshop.
• Jika latar belakang halaman web yang diinginkan
berupa gambar, scriptnya adalah:
<body background=”nama file”>
contoh
<body background=”images.gif”>
Daftar keterangan berupa angka
dan gambar
1. Ordered List
Ordered List (OL) adalah daftar keterangan yang memiliki
nomor secara urut dalam sebuah daftar. Misal: A,B,C ;
a,b,c ;1,2,3 dan I,II,III dst
Script OL adalah <ol> dan diakhiri dengan </ol>
script untuk menuliskan daftarnya adalah <li>
contoh:
<ol>Jenis Kucing
<li>Persian Cat
<li>Siamese Cat
<li>Abyssinian cat
Tampilannya menjadi seperti ini:
Jenis Kucing
1. Persian Cat
2. Siamese Cat
3. Abyssinian cat
Jika ingin daftar listnya diubah menjadi huruf a,b,c
dstnya; A,B,C atau I,II,III dan i,ii,iii maka tambahkan
teks “type=”karakter”>
contoh:
<ol type=”a”>Jenis Kucing
<li>Persian Cat
<li>Siamese Cat
<li>Abyssinian Cat
tampilan di web akan seperti ini:
Jenis Kucing
a. Persian Cat
b. Siamese Cat
c. Abyssinian Cat
2. Unordered List
Unordered List (UL) adalah daftar keterangan berupa
lambang atau gambar. Misal: lingkaran, kotak, titik.
Script UL adalah <ul> dan diakhiri dengan </ul>
script untuk menuliskan daftarnya adalah <li>
contoh:
<ul type=”circle”>Jenis Kucing
<li>Persian Cat
<li>Siamese Cat
Tampilan di web:
• Jenis Kucing
• Persian Cat
• Siamese Cat
Membuat Tabel
Untuk apa Tabel?
Dengan tabel, kita bisa memodifikasi agar
tampilan web lebih menarik dan rapi.
1 kolom
2 kolom
Foto blog di atas memiliki desain tabel sebagai
berikut:
Baris pertama berisi 1 kolom, berupa header image
Baris kedua terdiri dari 2 kolom, dengan ketentuan:
Kolom pertama berisi postingan artikel
Kolom kedua dapat berisi informasi seputar
kategori tulisan, form pencarian, kalendar, dan lain-
lain.
Tag yang digunakan untuk membuat tabel di HTML adalah:
<html>
<head>
<title>Membuat table</title>
</head>
<body>
<table>
<tr>
<td> . . . </td>
</tr>
</table>
</body>
</html>
Keterangan:
<table>, adalah tag yang digunakan untuk membuat tabel di html
<tr>, atau table row untuk menentukan baris
<td>, atau table data berguna untuk menampilkan data pada setiap sel tabel
atau untuk membuat kolom baru.
Bagaimana skrip tabel untuk contoh
tabel di bawah ini?
Atribut dalam Tabel
Referensi
http://www.w3schools.com/html/

More Related Content

Similar to HTML Dasar dan Struktur Penulisan

Similar to HTML Dasar dan Struktur Penulisan (20)

01. pengenalan tabel
01. pengenalan tabel01. pengenalan tabel
01. pengenalan tabel
 
Pengenalan struktur elemen html
Pengenalan struktur elemen htmlPengenalan struktur elemen html
Pengenalan struktur elemen html
 
Praktek
PraktekPraktek
Praktek
 
Belajar html!!
Belajar html!!Belajar html!!
Belajar html!!
 
Html
HtmlHtml
Html
 
PWPB pertemuan 5 XII SMK Al Falah Bandung
PWPB pertemuan 5 XII SMK Al Falah BandungPWPB pertemuan 5 XII SMK Al Falah Bandung
PWPB pertemuan 5 XII SMK Al Falah Bandung
 
File Structure, HTML & Supporting Languages.pptx
File Structure, HTML & Supporting Languages.pptxFile Structure, HTML & Supporting Languages.pptx
File Structure, HTML & Supporting Languages.pptx
 
Dasar html taufan_riyadi
Dasar html taufan_riyadiDasar html taufan_riyadi
Dasar html taufan_riyadi
 
Html dasar
Html dasarHtml dasar
Html dasar
 
Andino Maseleno - Modul Web Programming
Andino Maseleno - Modul Web ProgrammingAndino Maseleno - Modul Web Programming
Andino Maseleno - Modul Web Programming
 
materi html xii mm.ppt
materi html xii mm.pptmateri html xii mm.ppt
materi html xii mm.ppt
 
Dasar pembuatan web (html)
Dasar pembuatan web (html)Dasar pembuatan web (html)
Dasar pembuatan web (html)
 
Dasar HTML
 Dasar HTML Dasar HTML
Dasar HTML
 
Catatan HTML SMP CC @2014-2015
Catatan HTML SMP CC @2014-2015Catatan HTML SMP CC @2014-2015
Catatan HTML SMP CC @2014-2015
 
belajar dan studi kasus HTML untuk pemula
belajar dan studi kasus HTML untuk pemulabelajar dan studi kasus HTML untuk pemula
belajar dan studi kasus HTML untuk pemula
 
Web html
Web htmlWeb html
Web html
 
Training HTML
Training HTMLTraining HTML
Training HTML
 
Bab i. html
Bab i. htmlBab i. html
Bab i. html
 
Dasar-dasar H t m l
Dasar-dasar H t m lDasar-dasar H t m l
Dasar-dasar H t m l
 
Pengenalan internet 10
Pengenalan internet 10Pengenalan internet 10
Pengenalan internet 10
 

More from Hindraswari Enggar (20)

Proyek pertemuan 1
Proyek pertemuan 1Proyek pertemuan 1
Proyek pertemuan 1
 
Proyek pertemuan 1
Proyek pertemuan 1Proyek pertemuan 1
Proyek pertemuan 1
 
Web developer
Web developerWeb developer
Web developer
 
Materi pembelajaran web dev
Materi pembelajaran web devMateri pembelajaran web dev
Materi pembelajaran web dev
 
Asesmen non kognitif awal tab
Asesmen non kognitif awal tabAsesmen non kognitif awal tab
Asesmen non kognitif awal tab
 
Lakukan satu kebaikan
Lakukan satu kebaikanLakukan satu kebaikan
Lakukan satu kebaikan
 
Bmc
BmcBmc
Bmc
 
Materi life skill
Materi life skillMateri life skill
Materi life skill
 
Toko online
Toko onlineToko online
Toko online
 
Konsep dan strategi implementasi kwu 2019
Konsep dan strategi implementasi kwu 2019Konsep dan strategi implementasi kwu 2019
Konsep dan strategi implementasi kwu 2019
 
Hack designthinking 2019 ver. 7
Hack designthinking 2019 ver. 7Hack designthinking 2019 ver. 7
Hack designthinking 2019 ver. 7
 
Design thinking new for kwu sma 2
Design thinking new for kwu sma 2Design thinking new for kwu sma 2
Design thinking new for kwu sma 2
 
Iht design thinking 4
Iht design thinking 4Iht design thinking 4
Iht design thinking 4
 
Iht design thinking 3 copy
Iht design thinking 3 copyIht design thinking 3 copy
Iht design thinking 3 copy
 
Iht design thinking
Iht design thinkingIht design thinking
Iht design thinking
 
Kbm pkwu final
Kbm pkwu finalKbm pkwu final
Kbm pkwu final
 
Prakarya dan kewirausahaan untuk sma
Prakarya dan kewirausahaan untuk smaPrakarya dan kewirausahaan untuk sma
Prakarya dan kewirausahaan untuk sma
 
Iklan animasi
Iklan animasiIklan animasi
Iklan animasi
 
Hewan kesayanganku
Hewan kesayangankuHewan kesayanganku
Hewan kesayanganku
 
Dokumentasi foto kegiatan kewirausahaan
Dokumentasi foto kegiatan kewirausahaanDokumentasi foto kegiatan kewirausahaan
Dokumentasi foto kegiatan kewirausahaan
 

Recently uploaded

Soal accurate terbaru untuk mahasiswa ya
Soal accurate terbaru untuk mahasiswa yaSoal accurate terbaru untuk mahasiswa ya
Soal accurate terbaru untuk mahasiswa yaMonaAmelia
 
Modul persamaan perakaunan prinsip akaun
Modul persamaan perakaunan prinsip akaunModul persamaan perakaunan prinsip akaun
Modul persamaan perakaunan prinsip akaunnhsani2006
 
Pembuktian rumus volume dan luas permukaan bangung ruang Tabung, Limas, Keruc...
Pembuktian rumus volume dan luas permukaan bangung ruang Tabung, Limas, Keruc...Pembuktian rumus volume dan luas permukaan bangung ruang Tabung, Limas, Keruc...
Pembuktian rumus volume dan luas permukaan bangung ruang Tabung, Limas, Keruc...NiswatuzZahroh
 
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
 
Sejarah Perkembangan Teori Manajemen.ppt
Sejarah Perkembangan Teori Manajemen.pptSejarah Perkembangan Teori Manajemen.ppt
Sejarah Perkembangan Teori Manajemen.pptssuser940815
 
slide presentation bab 2 sain form 2.pdf
slide presentation bab 2 sain form 2.pdfslide presentation bab 2 sain form 2.pdf
slide presentation bab 2 sain form 2.pdfNURAFIFAHBINTIJAMALU
 
Buku Saku Layanan Haji Ramah Lansia 2.pdf
Buku Saku Layanan Haji Ramah Lansia 2.pdfBuku Saku Layanan Haji Ramah Lansia 2.pdf
Buku Saku Layanan Haji Ramah Lansia 2.pdfWahyudinST
 
Tina fitriyah - Uji Sampel statistik.pptx
Tina fitriyah - Uji Sampel statistik.pptxTina fitriyah - Uji Sampel statistik.pptx
Tina fitriyah - Uji Sampel statistik.pptxTINAFITRIYAH
 
LATIHAN SOAL SISTEM PENCERNAAN KELAS 11pptx
LATIHAN SOAL SISTEM PENCERNAAN KELAS 11pptxLATIHAN SOAL SISTEM PENCERNAAN KELAS 11pptx
LATIHAN SOAL SISTEM PENCERNAAN KELAS 11pptxnataliadwiasty
 
Keberagaman-Peserta-Didik-dalam-Psikologi-Pendidikan.pptx
Keberagaman-Peserta-Didik-dalam-Psikologi-Pendidikan.pptxKeberagaman-Peserta-Didik-dalam-Psikologi-Pendidikan.pptx
Keberagaman-Peserta-Didik-dalam-Psikologi-Pendidikan.pptxLeniMawarti1
 
MATERI 1_ Modul 1 dan 2 Konsep Dasar IPA SD jadi.pptx
MATERI 1_ Modul 1 dan 2 Konsep Dasar IPA SD jadi.pptxMATERI 1_ Modul 1 dan 2 Konsep Dasar IPA SD jadi.pptx
MATERI 1_ Modul 1 dan 2 Konsep Dasar IPA SD jadi.pptxrofikpriyanto2
 
Dinamika perwujudan Pancasila sebagai Dasar Negara dan Pandangan Hidup Bangsa
Dinamika perwujudan Pancasila sebagai Dasar Negara dan Pandangan Hidup BangsaDinamika perwujudan Pancasila sebagai Dasar Negara dan Pandangan Hidup Bangsa
Dinamika perwujudan Pancasila sebagai Dasar Negara dan Pandangan Hidup BangsaEzraCalva
 
Modul Ajar Informatika Kelas 11 Fase F Kurikulum Merdeka
Modul Ajar Informatika Kelas 11 Fase F Kurikulum MerdekaModul Ajar Informatika Kelas 11 Fase F Kurikulum Merdeka
Modul Ajar Informatika Kelas 11 Fase F Kurikulum MerdekaAbdiera
 
Materi Kelas Online Ministry Learning Center - Bedah Kitab 1 Tesalonika
Materi Kelas Online Ministry Learning Center - Bedah Kitab 1 TesalonikaMateri Kelas Online Ministry Learning Center - Bedah Kitab 1 Tesalonika
Materi Kelas Online Ministry Learning Center - Bedah Kitab 1 TesalonikaSABDA
 
5. HAK DAN KEWAJIBAN JEMAAH indonesia.pdf
5. HAK DAN KEWAJIBAN JEMAAH indonesia.pdf5. HAK DAN KEWAJIBAN JEMAAH indonesia.pdf
5. HAK DAN KEWAJIBAN JEMAAH indonesia.pdfWahyudinST
 
P_E_R_I_L_A_K_U__K_O_N_S_E_L_O_R__v.1.ppt
P_E_R_I_L_A_K_U__K_O_N_S_E_L_O_R__v.1.pptP_E_R_I_L_A_K_U__K_O_N_S_E_L_O_R__v.1.ppt
P_E_R_I_L_A_K_U__K_O_N_S_E_L_O_R__v.1.pptAfifFikri11
 
PPT IPS Geografi SMA Kelas X_Bab 5_Atmosfer.pptx_20240214_193530_0000.pdf
PPT IPS Geografi SMA Kelas X_Bab 5_Atmosfer.pptx_20240214_193530_0000.pdfPPT IPS Geografi SMA Kelas X_Bab 5_Atmosfer.pptx_20240214_193530_0000.pdf
PPT IPS Geografi SMA Kelas X_Bab 5_Atmosfer.pptx_20240214_193530_0000.pdfNatasyaA11
 
RENCANA + Link2 Materi Pelatihan/BimTek "Teknik Perhitungan & Verifikasi TKDN...
RENCANA + Link2 Materi Pelatihan/BimTek "Teknik Perhitungan & Verifikasi TKDN...RENCANA + Link2 Materi Pelatihan/BimTek "Teknik Perhitungan & Verifikasi TKDN...
RENCANA + Link2 Materi Pelatihan/BimTek "Teknik Perhitungan & Verifikasi TKDN...Kanaidi ken
 
UNGGAH PEGANGAN LOKAKARYA DAN PENDAMPINGAN INDIVIDU DALAM KEGIATAN PEMBEKALAN...
UNGGAH PEGANGAN LOKAKARYA DAN PENDAMPINGAN INDIVIDU DALAM KEGIATAN PEMBEKALAN...UNGGAH PEGANGAN LOKAKARYA DAN PENDAMPINGAN INDIVIDU DALAM KEGIATAN PEMBEKALAN...
UNGGAH PEGANGAN LOKAKARYA DAN PENDAMPINGAN INDIVIDU DALAM KEGIATAN PEMBEKALAN...jumadsmanesi
 
RENCANA + Link2 Materi TRAINING "Effective LEADERSHIP & SUPERVISORY SKILL",
RENCANA + Link2 Materi TRAINING "Effective LEADERSHIP & SUPERVISORY  SKILL",RENCANA + Link2 Materi TRAINING "Effective LEADERSHIP & SUPERVISORY  SKILL",
RENCANA + Link2 Materi TRAINING "Effective LEADERSHIP & SUPERVISORY SKILL",Kanaidi ken
 

Recently uploaded (20)

Soal accurate terbaru untuk mahasiswa ya
Soal accurate terbaru untuk mahasiswa yaSoal accurate terbaru untuk mahasiswa ya
Soal accurate terbaru untuk mahasiswa ya
 
Modul persamaan perakaunan prinsip akaun
Modul persamaan perakaunan prinsip akaunModul persamaan perakaunan prinsip akaun
Modul persamaan perakaunan prinsip akaun
 
Pembuktian rumus volume dan luas permukaan bangung ruang Tabung, Limas, Keruc...
Pembuktian rumus volume dan luas permukaan bangung ruang Tabung, Limas, Keruc...Pembuktian rumus volume dan luas permukaan bangung ruang Tabung, Limas, Keruc...
Pembuktian rumus volume dan luas permukaan bangung ruang Tabung, Limas, Keruc...
 
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
 
Sejarah Perkembangan Teori Manajemen.ppt
Sejarah Perkembangan Teori Manajemen.pptSejarah Perkembangan Teori Manajemen.ppt
Sejarah Perkembangan Teori Manajemen.ppt
 
slide presentation bab 2 sain form 2.pdf
slide presentation bab 2 sain form 2.pdfslide presentation bab 2 sain form 2.pdf
slide presentation bab 2 sain form 2.pdf
 
Buku Saku Layanan Haji Ramah Lansia 2.pdf
Buku Saku Layanan Haji Ramah Lansia 2.pdfBuku Saku Layanan Haji Ramah Lansia 2.pdf
Buku Saku Layanan Haji Ramah Lansia 2.pdf
 
Tina fitriyah - Uji Sampel statistik.pptx
Tina fitriyah - Uji Sampel statistik.pptxTina fitriyah - Uji Sampel statistik.pptx
Tina fitriyah - Uji Sampel statistik.pptx
 
LATIHAN SOAL SISTEM PENCERNAAN KELAS 11pptx
LATIHAN SOAL SISTEM PENCERNAAN KELAS 11pptxLATIHAN SOAL SISTEM PENCERNAAN KELAS 11pptx
LATIHAN SOAL SISTEM PENCERNAAN KELAS 11pptx
 
Keberagaman-Peserta-Didik-dalam-Psikologi-Pendidikan.pptx
Keberagaman-Peserta-Didik-dalam-Psikologi-Pendidikan.pptxKeberagaman-Peserta-Didik-dalam-Psikologi-Pendidikan.pptx
Keberagaman-Peserta-Didik-dalam-Psikologi-Pendidikan.pptx
 
MATERI 1_ Modul 1 dan 2 Konsep Dasar IPA SD jadi.pptx
MATERI 1_ Modul 1 dan 2 Konsep Dasar IPA SD jadi.pptxMATERI 1_ Modul 1 dan 2 Konsep Dasar IPA SD jadi.pptx
MATERI 1_ Modul 1 dan 2 Konsep Dasar IPA SD jadi.pptx
 
Dinamika perwujudan Pancasila sebagai Dasar Negara dan Pandangan Hidup Bangsa
Dinamika perwujudan Pancasila sebagai Dasar Negara dan Pandangan Hidup BangsaDinamika perwujudan Pancasila sebagai Dasar Negara dan Pandangan Hidup Bangsa
Dinamika perwujudan Pancasila sebagai Dasar Negara dan Pandangan Hidup Bangsa
 
Modul Ajar Informatika Kelas 11 Fase F Kurikulum Merdeka
Modul Ajar Informatika Kelas 11 Fase F Kurikulum MerdekaModul Ajar Informatika Kelas 11 Fase F Kurikulum Merdeka
Modul Ajar Informatika Kelas 11 Fase F Kurikulum Merdeka
 
Materi Kelas Online Ministry Learning Center - Bedah Kitab 1 Tesalonika
Materi Kelas Online Ministry Learning Center - Bedah Kitab 1 TesalonikaMateri Kelas Online Ministry Learning Center - Bedah Kitab 1 Tesalonika
Materi Kelas Online Ministry Learning Center - Bedah Kitab 1 Tesalonika
 
5. HAK DAN KEWAJIBAN JEMAAH indonesia.pdf
5. HAK DAN KEWAJIBAN JEMAAH indonesia.pdf5. HAK DAN KEWAJIBAN JEMAAH indonesia.pdf
5. HAK DAN KEWAJIBAN JEMAAH indonesia.pdf
 
P_E_R_I_L_A_K_U__K_O_N_S_E_L_O_R__v.1.ppt
P_E_R_I_L_A_K_U__K_O_N_S_E_L_O_R__v.1.pptP_E_R_I_L_A_K_U__K_O_N_S_E_L_O_R__v.1.ppt
P_E_R_I_L_A_K_U__K_O_N_S_E_L_O_R__v.1.ppt
 
PPT IPS Geografi SMA Kelas X_Bab 5_Atmosfer.pptx_20240214_193530_0000.pdf
PPT IPS Geografi SMA Kelas X_Bab 5_Atmosfer.pptx_20240214_193530_0000.pdfPPT IPS Geografi SMA Kelas X_Bab 5_Atmosfer.pptx_20240214_193530_0000.pdf
PPT IPS Geografi SMA Kelas X_Bab 5_Atmosfer.pptx_20240214_193530_0000.pdf
 
RENCANA + Link2 Materi Pelatihan/BimTek "Teknik Perhitungan & Verifikasi TKDN...
RENCANA + Link2 Materi Pelatihan/BimTek "Teknik Perhitungan & Verifikasi TKDN...RENCANA + Link2 Materi Pelatihan/BimTek "Teknik Perhitungan & Verifikasi TKDN...
RENCANA + Link2 Materi Pelatihan/BimTek "Teknik Perhitungan & Verifikasi TKDN...
 
UNGGAH PEGANGAN LOKAKARYA DAN PENDAMPINGAN INDIVIDU DALAM KEGIATAN PEMBEKALAN...
UNGGAH PEGANGAN LOKAKARYA DAN PENDAMPINGAN INDIVIDU DALAM KEGIATAN PEMBEKALAN...UNGGAH PEGANGAN LOKAKARYA DAN PENDAMPINGAN INDIVIDU DALAM KEGIATAN PEMBEKALAN...
UNGGAH PEGANGAN LOKAKARYA DAN PENDAMPINGAN INDIVIDU DALAM KEGIATAN PEMBEKALAN...
 
RENCANA + Link2 Materi TRAINING "Effective LEADERSHIP & SUPERVISORY SKILL",
RENCANA + Link2 Materi TRAINING "Effective LEADERSHIP & SUPERVISORY  SKILL",RENCANA + Link2 Materi TRAINING "Effective LEADERSHIP & SUPERVISORY  SKILL",
RENCANA + Link2 Materi TRAINING "Effective LEADERSHIP & SUPERVISORY SKILL",
 

HTML Dasar dan Struktur Penulisan

  • 2. HTML adalah bahasa pemformatan sederhana untuk membuat sebuah halaman web.
  • 3. Program untuk menyunting dan menyimpan script HTML adalah program teks editor seperti: notepad, wordpad (untuk OS Windows), Text editor, Gedit (untuk OS Linux), TextEdit, TextMate (untuk OS MAC)
  • 4. Persiapan membuat HTML • Buat folder khusus. Folder ini adalah tempat kamu meletakkan file induk, yaitu file html dan file pendukung seperti foto, gambar, musik, dan lain-lain. • Ketika menyimpan file di program teks editor, jangan lupa tambahkan format htm atau html. Contoh: danisa.htm atau danisa.html
  • 5. Struktur dasar dokumen HTML Dokumen HTML disimpan dalam format teks reguler dan mengandung tag-tag. Tag-tag ini berfungsi untuk memerintahkan web browser menjalankan perintah yang telah ditetapkan.
  • 6. Struktur Penulisan HTML • Dalam struktur penulisan HTML ada 3 elemen dasar, yaitu: html, head, dan body. <html> <head> <title>ini adalah judul dokumen HTML</title> </head> <body> Disini penulisan semua konten web </body> </html>
  • 7. Keterangan • Element (p, b, a, h1) Elemen a digunakan untuk membuat hyperlink ke halaman lain  <a> • Tag Sebuah elemen direpresentasikan oleh tag. Tag ditandai oleh dua karakter “<“ dan “>” Contoh: <a>
  • 8. tag umumnya ditulis berpasangan, terdiri dari tag pembuka dan tag penutup dengan tambahan karakter “/” contoh: <font face=”arial” color=”yellow”>My Blog</font>
  • 9. • Attribute adalah informasi tambahan untuk elemen terdiri atas nama dan nilai umumnya nilai attribute harus berada dalam tanda petik satu atau dua <font face=”arial” color=”yellow”> artinya, jenis huruf yang kita inginkan (nama) adalah arial (nilai) warna huruf (nama) kuning (nilai) Setiap elemen memiliki atribut yang berbeda, meskipun terdapat juga atribut standar yang dapat digunakan oleh semua elemen.
  • 10. • jika menginginkan latar belakang halaman web dengan warna, contoh scriptnya: <body bgcolor=”blue”> atau <body bgcolor=”#ffccdd”> catatan: warna dengan kode #ffccdd seperti contoh di atas dapat dilihat melalui bantuan program editing Photoshop. • Jika latar belakang halaman web yang diinginkan berupa gambar, scriptnya adalah: <body background=”nama file”> contoh <body background=”images.gif”>
  • 11. Daftar keterangan berupa angka dan gambar
  • 12. 1. Ordered List Ordered List (OL) adalah daftar keterangan yang memiliki nomor secara urut dalam sebuah daftar. Misal: A,B,C ; a,b,c ;1,2,3 dan I,II,III dst Script OL adalah <ol> dan diakhiri dengan </ol> script untuk menuliskan daftarnya adalah <li> contoh: <ol>Jenis Kucing <li>Persian Cat <li>Siamese Cat <li>Abyssinian cat Tampilannya menjadi seperti ini: Jenis Kucing 1. Persian Cat 2. Siamese Cat 3. Abyssinian cat
  • 13. Jika ingin daftar listnya diubah menjadi huruf a,b,c dstnya; A,B,C atau I,II,III dan i,ii,iii maka tambahkan teks “type=”karakter”> contoh: <ol type=”a”>Jenis Kucing <li>Persian Cat <li>Siamese Cat <li>Abyssinian Cat tampilan di web akan seperti ini: Jenis Kucing a. Persian Cat b. Siamese Cat c. Abyssinian Cat
  • 14. 2. Unordered List Unordered List (UL) adalah daftar keterangan berupa lambang atau gambar. Misal: lingkaran, kotak, titik. Script UL adalah <ul> dan diakhiri dengan </ul> script untuk menuliskan daftarnya adalah <li> contoh: <ul type=”circle”>Jenis Kucing <li>Persian Cat <li>Siamese Cat Tampilan di web: • Jenis Kucing • Persian Cat • Siamese Cat
  • 16. Untuk apa Tabel? Dengan tabel, kita bisa memodifikasi agar tampilan web lebih menarik dan rapi. 1 kolom 2 kolom
  • 17. Foto blog di atas memiliki desain tabel sebagai berikut: Baris pertama berisi 1 kolom, berupa header image Baris kedua terdiri dari 2 kolom, dengan ketentuan: Kolom pertama berisi postingan artikel Kolom kedua dapat berisi informasi seputar kategori tulisan, form pencarian, kalendar, dan lain- lain.
  • 18. Tag yang digunakan untuk membuat tabel di HTML adalah: <html> <head> <title>Membuat table</title> </head> <body> <table> <tr> <td> . . . </td> </tr> </table> </body> </html> Keterangan: <table>, adalah tag yang digunakan untuk membuat tabel di html <tr>, atau table row untuk menentukan baris <td>, atau table data berguna untuk menampilkan data pada setiap sel tabel atau untuk membuat kolom baru.
  • 19. Bagaimana skrip tabel untuk contoh tabel di bawah ini?