SlideShare une entreprise Scribd logo
1  sur  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/

Contenu connexe

Similaire à Html (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
 

Plus de 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
 

Dernier

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
 
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
 
MODUL AJAR SENI RUPA KELAS 6 KURIKULUM MERDEKA.pdf
MODUL AJAR SENI RUPA KELAS 6 KURIKULUM MERDEKA.pdfMODUL AJAR SENI RUPA KELAS 6 KURIKULUM MERDEKA.pdf
MODUL AJAR SENI RUPA KELAS 6 KURIKULUM MERDEKA.pdfAndiCoc
 
Program Kerja Public Relations - Perencanaan
Program Kerja Public Relations - PerencanaanProgram Kerja Public Relations - Perencanaan
Program Kerja Public Relations - PerencanaanAdePutraTunggali
 
Panduan Memahami Data Rapor Pendidikan 2024
Panduan Memahami Data Rapor Pendidikan 2024Panduan Memahami Data Rapor Pendidikan 2024
Panduan Memahami Data Rapor Pendidikan 2024RahmadLalu1
 
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
 
MODUL AJAR BAHASA INGGRIS KELAS 6 KURIKULUM MERDEKA.pdf
MODUL AJAR BAHASA INGGRIS KELAS 6 KURIKULUM MERDEKA.pdfMODUL AJAR BAHASA INGGRIS KELAS 6 KURIKULUM MERDEKA.pdf
MODUL AJAR BAHASA INGGRIS KELAS 6 KURIKULUM MERDEKA.pdfAndiCoc
 
KELAS 10 PERUBAHAN LINGKUNGAN SMA KURIKULUM MERDEKA
KELAS 10 PERUBAHAN LINGKUNGAN SMA KURIKULUM MERDEKAKELAS 10 PERUBAHAN LINGKUNGAN SMA KURIKULUM MERDEKA
KELAS 10 PERUBAHAN LINGKUNGAN SMA KURIKULUM MERDEKAppgauliananda03
 
AKSI NYATA Numerasi Meningkatkan Kompetensi Murid_compressed (1) (1).pptx
AKSI NYATA  Numerasi  Meningkatkan Kompetensi Murid_compressed (1) (1).pptxAKSI NYATA  Numerasi  Meningkatkan Kompetensi Murid_compressed (1) (1).pptx
AKSI NYATA Numerasi Meningkatkan Kompetensi Murid_compressed (1) (1).pptxnursariheldaseptiana
 
PANDUAN PENGEMBANGAN KSP SMA SUMBAR TAHUN 2024 (1).pptx
PANDUAN PENGEMBANGAN KSP SMA SUMBAR TAHUN 2024 (1).pptxPANDUAN PENGEMBANGAN KSP SMA SUMBAR TAHUN 2024 (1).pptx
PANDUAN PENGEMBANGAN KSP SMA SUMBAR TAHUN 2024 (1).pptxfitriaoskar
 
Aksi Nyata PMM Topik Refleksi Diri (1).pdf
Aksi Nyata PMM Topik Refleksi Diri (1).pdfAksi Nyata PMM Topik Refleksi Diri (1).pdf
Aksi Nyata PMM Topik Refleksi Diri (1).pdfEniNuraeni29
 
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
 
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
 
Salinan dari JUrnal Refleksi Mingguan modul 1.3.pdf
Salinan dari JUrnal Refleksi Mingguan modul 1.3.pdfSalinan dari JUrnal Refleksi Mingguan modul 1.3.pdf
Salinan dari JUrnal Refleksi Mingguan modul 1.3.pdfWidyastutyCoyy
 
BAB 5 KERJASAMA DALAM BERBAGAI BIDANG KEHIDUPAN.pptx
BAB 5 KERJASAMA DALAM BERBAGAI BIDANG KEHIDUPAN.pptxBAB 5 KERJASAMA DALAM BERBAGAI BIDANG KEHIDUPAN.pptx
BAB 5 KERJASAMA DALAM BERBAGAI BIDANG KEHIDUPAN.pptxJuliBriana2
 
LATAR BELAKANG JURNAL DIALOGIS REFLEKTIF.ppt
LATAR BELAKANG JURNAL DIALOGIS REFLEKTIF.pptLATAR BELAKANG JURNAL DIALOGIS REFLEKTIF.ppt
LATAR BELAKANG JURNAL DIALOGIS REFLEKTIF.pptPpsSambirejo
 
TUGAS RUANG KOLABORASI 1.3 PRAKARSA PERUBAHAN
TUGAS RUANG KOLABORASI 1.3 PRAKARSA PERUBAHANTUGAS RUANG KOLABORASI 1.3 PRAKARSA PERUBAHAN
TUGAS RUANG KOLABORASI 1.3 PRAKARSA PERUBAHANwawan479953
 
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
 
Materi Sosialisasi US 2024 Sekolah Dasar pptx
Materi Sosialisasi US 2024 Sekolah Dasar pptxMateri Sosialisasi US 2024 Sekolah Dasar pptx
Materi Sosialisasi US 2024 Sekolah Dasar pptxSaujiOji
 

Dernier (20)

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
 
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...
 
MODUL AJAR SENI RUPA KELAS 6 KURIKULUM MERDEKA.pdf
MODUL AJAR SENI RUPA KELAS 6 KURIKULUM MERDEKA.pdfMODUL AJAR SENI RUPA KELAS 6 KURIKULUM MERDEKA.pdf
MODUL AJAR SENI RUPA KELAS 6 KURIKULUM MERDEKA.pdf
 
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...
 
Program Kerja Public Relations - Perencanaan
Program Kerja Public Relations - PerencanaanProgram Kerja Public Relations - Perencanaan
Program Kerja Public Relations - Perencanaan
 
Panduan Memahami Data Rapor Pendidikan 2024
Panduan Memahami Data Rapor Pendidikan 2024Panduan Memahami Data Rapor Pendidikan 2024
Panduan Memahami Data Rapor Pendidikan 2024
 
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
 
MODUL AJAR BAHASA INGGRIS KELAS 6 KURIKULUM MERDEKA.pdf
MODUL AJAR BAHASA INGGRIS KELAS 6 KURIKULUM MERDEKA.pdfMODUL AJAR BAHASA INGGRIS KELAS 6 KURIKULUM MERDEKA.pdf
MODUL AJAR BAHASA INGGRIS KELAS 6 KURIKULUM MERDEKA.pdf
 
KELAS 10 PERUBAHAN LINGKUNGAN SMA KURIKULUM MERDEKA
KELAS 10 PERUBAHAN LINGKUNGAN SMA KURIKULUM MERDEKAKELAS 10 PERUBAHAN LINGKUNGAN SMA KURIKULUM MERDEKA
KELAS 10 PERUBAHAN LINGKUNGAN SMA KURIKULUM MERDEKA
 
AKSI NYATA Numerasi Meningkatkan Kompetensi Murid_compressed (1) (1).pptx
AKSI NYATA  Numerasi  Meningkatkan Kompetensi Murid_compressed (1) (1).pptxAKSI NYATA  Numerasi  Meningkatkan Kompetensi Murid_compressed (1) (1).pptx
AKSI NYATA Numerasi Meningkatkan Kompetensi Murid_compressed (1) (1).pptx
 
PANDUAN PENGEMBANGAN KSP SMA SUMBAR TAHUN 2024 (1).pptx
PANDUAN PENGEMBANGAN KSP SMA SUMBAR TAHUN 2024 (1).pptxPANDUAN PENGEMBANGAN KSP SMA SUMBAR TAHUN 2024 (1).pptx
PANDUAN PENGEMBANGAN KSP SMA SUMBAR TAHUN 2024 (1).pptx
 
Aksi Nyata PMM Topik Refleksi Diri (1).pdf
Aksi Nyata PMM Topik Refleksi Diri (1).pdfAksi Nyata PMM Topik Refleksi Diri (1).pdf
Aksi Nyata PMM Topik Refleksi Diri (1).pdf
 
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
 
power point bahasa indonesia "Karya Ilmiah"
power point bahasa indonesia "Karya Ilmiah"power point bahasa indonesia "Karya Ilmiah"
power point bahasa indonesia "Karya Ilmiah"
 
Salinan dari JUrnal Refleksi Mingguan modul 1.3.pdf
Salinan dari JUrnal Refleksi Mingguan modul 1.3.pdfSalinan dari JUrnal Refleksi Mingguan modul 1.3.pdf
Salinan dari JUrnal Refleksi Mingguan modul 1.3.pdf
 
BAB 5 KERJASAMA DALAM BERBAGAI BIDANG KEHIDUPAN.pptx
BAB 5 KERJASAMA DALAM BERBAGAI BIDANG KEHIDUPAN.pptxBAB 5 KERJASAMA DALAM BERBAGAI BIDANG KEHIDUPAN.pptx
BAB 5 KERJASAMA DALAM BERBAGAI BIDANG KEHIDUPAN.pptx
 
LATAR BELAKANG JURNAL DIALOGIS REFLEKTIF.ppt
LATAR BELAKANG JURNAL DIALOGIS REFLEKTIF.pptLATAR BELAKANG JURNAL DIALOGIS REFLEKTIF.ppt
LATAR BELAKANG JURNAL DIALOGIS REFLEKTIF.ppt
 
TUGAS RUANG KOLABORASI 1.3 PRAKARSA PERUBAHAN
TUGAS RUANG KOLABORASI 1.3 PRAKARSA PERUBAHANTUGAS RUANG KOLABORASI 1.3 PRAKARSA PERUBAHAN
TUGAS RUANG KOLABORASI 1.3 PRAKARSA PERUBAHAN
 
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
 
Materi Sosialisasi US 2024 Sekolah Dasar pptx
Materi Sosialisasi US 2024 Sekolah Dasar pptxMateri Sosialisasi US 2024 Sekolah Dasar pptx
Materi Sosialisasi US 2024 Sekolah Dasar pptx
 

Html

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