Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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)...
Persiapan membuat HTML
• Buat folder khusus. Folder ini adalah tempat
kamu meletakkan file induk, yaitu file html
dan file...
Struktur dasar dokumen HTML
Dokumen HTML disimpan dalam format teks
reguler dan mengandung tag-tag.
Tag-tag ini berfungsi ...
Struktur Penulisan HTML
• Dalam struktur penulisan HTML ada 3 elemen
dasar, yaitu: html, head, dan body.
<html>
<head>
<ti...
Keterangan
• Element (p, b, a, h1)
Elemen a digunakan untuk membuat hyperlink ke
halaman lain  <a>
• Tag
Sebuah elemen di...
tag umumnya ditulis berpasangan, terdiri dari
tag pembuka dan tag penutup dengan
tambahan karakter “/”
contoh:
<font face=...
• Attribute
adalah informasi tambahan untuk elemen
terdiri atas nama dan nilai
umumnya nilai attribute harus berada dalam
...
• jika menginginkan latar belakang halaman web
dengan warna, contoh scriptnya:
<body bgcolor=”blue”> atau
<body bgcolor=”#...
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...
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=”k...
2. Unordered List
Unordered List (UL) adalah daftar keterangan berupa
lambang atau gambar. Misal: lingkaran, kotak, titik....
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 ter...
Tag yang digunakan untuk membuat tabel di HTML adalah:
<html>
<head>
<title>Membuat table</title>
</head>
<body>
<table>
<...
Bagaimana skrip tabel untuk contoh
tabel di bawah ini?
Atribut dalam Tabel
Referensi
http://www.w3schools.com/html/
Upcoming SlideShare
Loading in …5
×

Html

1,481 views

Published on

HTML dan Toko Online

Published in: Education
  • Be the first to comment

  • Be the first to like this

Html

  1. 1. HTML (Hypertext Markup Language
  2. 2. HTML adalah bahasa pemformatan sederhana untuk membuat sebuah halaman web.
  3. 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. 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. 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. 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. 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. 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. 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. 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. 11. Daftar keterangan berupa angka dan gambar
  12. 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. 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. 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
  15. 15. Membuat Tabel
  16. 16. Untuk apa Tabel? Dengan tabel, kita bisa memodifikasi agar tampilan web lebih menarik dan rapi. 1 kolom 2 kolom
  17. 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. 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. 19. Bagaimana skrip tabel untuk contoh tabel di bawah ini?
  20. 20. Atribut dalam Tabel
  21. 21. Referensi http://www.w3schools.com/html/

×