1
HTML Anggia Panggabean
HTML
2
HyperText Markup Language (HTML)
adalah sebuah bahasa markup yang digunakan untuk membuat
sebuah halaman web dan menampilkan berbagai informasi di
dalam sebuah browser Internet.
Bermula dari sebuah bahasa yang sebelumnya banyak digunakan
di dunia penerbitan dan percetakan yang disebut dengan SGML,
HTML adalah sebuah standar yang digunakan secara luas untuk
menampilkan halaman web dan HTML kini merupakan standar
Internet yang saat ini dikendalikan oleh World Wide Web
Consortium (W3C).
Versi terakhir dari HTML adalah HTML 5, meskipun saat ini telah
berkembang XHTML yang merupakan pengembangan dari HTML.
HTML
3
HTML berupa kode-kode tag yang
menginstruksikan browser untuk menghasilkan
tampilan sesuai dengan yang diinginkan.
Sebuah file yang merupakan file HTML dapat
dibuka dengan menggunakan browser web
seperti Mozilla Firefox atau Microsoft Internet
Explorer.
TOOLS HTML
4
1. Browser
Browser merupakan software yang di install di mesin client
(komputer kita sebagai pengguna website) yang berfungsi
untuk menterjemahkan tag-tag HTML menjadi halaman web.
Contoh browser Internet Explorer, Mozila, opera dan masih
banyak yang lainya.
2. Editor
Editor adalah program yang bisa digunakan untuk membuat
document HTML (Web page/Halaman Web), ada banyak HTML
editor yang bisa anda gunakan diantaranya:
Ms FrontPage, Dreamweaver, Notepad, dll.
HTML
5 Secara garis besar, terdapat 4 jenis elemen dari HTML:
1. Structural
tanda yang menentukan level atau tingkatan dari sebuah teks
Contoh :
<h1>Golf</h1> akan memerintahkan browser untuk
menampilkan "Golf" sebagai teks tebal besar yang
menunjukkan sebagai Heading 1
2. Presentational
tanda yang menentukan tampilan dari sebuah teks tidak peduli
dengan level dari teks tersebut
Contoh:
<b>boldface</b> akan menampilkan bold.
Tanda presentational saat ini sudah mulai digantikan oleh CSS
dan tidak direkomendasikan untuk mengatur tampilan teks,
3. Hypertext
6
tanda yang menunjukkan pranala ke bagian dari
dokumen tersebut atau pranala ke dokumen lain
Contoh :
<a
href="[Link]
akan menampilkan Wikipedia sebagai sebuah
hyperlink ke URL tertentu)
4. Elemen widget
membuat objek-objek lain seperti tombol (<button>), list
(<li>), dan garis horizontal (<hr>).
Dasar-dasar HTML dan Operasi
7 Bentuk Umum penulisan dokumen HTML :
1. <html> ... </html> : merupakan
tag pembuka dari dokumen html.
2. <head> ... </head>
<title> ... </title> : merupakan tag
untuk memberikan judul pada
dokumen html.
3. <body> ... </body> : merupakan
body dari dokumen html. Segala
sesuatu yang ingin ditampilkan di
dokumen html disimpan dalam tag
body ini.
DASAR-DASAR HTML
8
Aturan dasar pembuatan HTML adalah :
1. Setiap tag HTML harus diapit oleh tanda lebih besar dan
lebih kecil <………>
2. Tag yang dituliskan dapat berupa huruf kecil ataupun
huruf kapital.
3. Hampir semua tag adalah tag berpasangan.
Tag awal ditandai dengan <……> dan
tag akhir diikuti dengan tag slash-nya </……>
Contoh : <HEAD>……</HEAD>
4. File dokumen HTML harus disimpan sebagai file teks murni,
dengan menggunakan file ekstensi html atau htm.
Dasar-dasar HTML (Lanj)
9
Beberapa Tag HTML antara lain:
<A….</A> membuat tulisan dapat di “klik”
<H>…</H> mencetak heading
<P>….</P> batas paragraph
<U>…</U> cetak dengan garis bawah
<A HREF=”URL”>DOK</A> membuat hyperlink
<IMG SRC =”[Link]” ALT =”gambar”>
memasukkan gambar.
Contoh Program HTML
10
MENGATUR FONT
11
Didalam dokumen html kita bisa mengatur format font seperti mengatur jenis
huruf, warna huruf, size/ukuran huruf dll.
Untuk mengatur format font dalam dokumen html caranya dengan
menggunakan tag <font>...</font>
Dibawah ini adalah contoh penggunaan tag font :
12
MENGATUR TEKS
Membuat Text Bold, Italic, Underline, Striketrue,
Supersript dan Subscript
Membuat Garis
13
Tag hr digunakan untuk membuat garis pada dokumen html
Membuat Link
14
Ada 4 jenis pembuatan link dalam html :
Link untuk menghubungkan ke halaman website lain
Link untuk menghubungkan ke alamat email
Link untuk menghubungkan antar halaman
Link untuk menghubungkan ke bagian halaman lain
15
MENAMPILKAN GAMBAR
16
Dalam dokumen html kita dapat menampilkan gambar, untuk
menampilkan gambar di dokumen html menggunakan tag
<img>
Berikut adalah contoh penggunaan tag <img>.
17
Membuat Animasi Teks Bergerak
Tag Marquee digunakan untuk membuat
animasi teks berjalan pada dokumen html.
1
8
Membuat List
19
Ada 3 jenis list dalam dokumen html yaitu:
1. Ordered List “<ol>”
Tag <ol> adalah kependekan dari Ordered List, yang artinya list
secara berurutan. List yang ditampilkan nanti oleh tag ini akan
menampilkan nomor disebelah kiri dari detail.
20
Membuat List
21
Pada Ordered List “<ol>” secara
default pengurutan akan diurutkan
dengan angka.
Jika anda ingin mengurutkan
dengan huruf/romawi maka anda
tinggal menambahkan atribut type
pada tag <ol> contoh :
Membuat List
22
2. Unordered List <ul>
Unordered List
merupakan
pengurutan list dengan
menggunakan
symbol/bullet.
Cara membuatnya
sama dengan Ordered
List hanya saja tag <ol>
diganti dengan tag
<ul>. Contoh :
Membuat List
23
3. Description List <dl>
Untuk membuat list tanpa
mengunakan bullet/symbol
caranya sama dengan
pembuatan list dengan
tag ol/ul, hanya saja tag
<ul> diganti dengan <dl>
lalu tag <li> diganti
dengan <dd>
contoh:
Tabel
24
Tabel digunakan untuk menyajikan data dalam bentuk kolom
dan baris. Umumnya setiap kolom menunjukan data yang
sejenis, dan setiap baris yang terdiri atas kolom-kolom
menunjukan kelompok data dalam satu kesatuan.
Untuk membuat tabel pada html menggunakan tag <table>
dan di akhiri dengan tag </table>
lalu di dalam sebuah tag <table> dan tag </table> dimasukan
tag <tr> dan </tr> yang bekerja sebagai baris pada tabel
lalu di dalam sebuah <tr> dan </tr> terdapat tag <td> dan
</td> yang bekerja memberikan sebuah kolom pada tabel.
Untuk mengetahui garis tabel tersebut, kita menggunakan
atribut 'border' pada tag table.
25