HTML Dasar dan Struktur Penulisan

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

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?

Referensi
http://www.w3schools.com/html/

HTML Dasar dan Struktur Penulisan

Recommended

Recommended

More Related Content

Similar to HTML Dasar dan Struktur Penulisan

Similar to HTML Dasar dan Struktur Penulisan (20)

More from Hindraswari Enggar

More from Hindraswari Enggar (20)

Recently uploaded

Recently uploaded (20)

HTML Dasar dan Struktur Penulisan