HTML merupakan bahasa yang digunakan untuk mendesain atau membuat halaman website. HTML merupakan singkatan dari Hyper Text Mark up Languange. Yuk kita belajar dasar-dasar HTML, seperti di mana menulis kode HTML, cara menyimpannya, cara menampilkannya di Browser serta bagaimana sintaks kode HTML ini
Di Mana Menulis Kode HTML
Di mana sih kita bisa menulis kode-kode HTML?Kita bisa menulisnya di teks editor seperti Notepad, atau bisa langsung di program pembuat website seperti DreamWeaver.
File HTML biasanya berekstensi .html atau .htm atau bisa juga berakhiran .php, .asp dan sebagainya jika anda melakukan pemograman website dari sisi server seperti PHP atau ASP
Sintaks Kode HTML
Kode HTML atau biasa juga disebut tag HTML ditulis di antara kurung siku < dan >, contoh <html>, <body> dan sebagainya.
Biasanya kode HTML ada pembuka atau penutup, contoh pembuka <html> maka ditutup atau diakhiri dengan </html>, di mana terdapat garis miring di tag HTMLnya.
Struktur Halaman website menggunakan HTML
Dalam membuat desain halaman website menggunakan HTML terdiri 2 bagian, yaitu:
- Biasanya kode HTML ditulis di antara tag <html> dan </html>
- Kepala atau header, biasanya ditulis di antara tag <head> dan </head>. Bagian header ini tidak akan ditampilkan di halaman browser, biasanya hanya berupa informasi yang berguna bagi serach engine atau juga informasi yang berguna bagi browser kita.
- Badan atau body, biasanya ditulis di antara tag <body> dan <body>. nah di sinilah kita mulai mendesain atau membuat halaman website kita yang biasa kita lihat di browser kita
OK daripada bingung-bingung, langsung saja kita lihat contoh kode HTML
Contoh Kode HTML
OK pertama-tama bukalah Notepad di komputer anda dan tulislah kode HTML berikut:
<html> <head> <title>Belajar Website</title> </head> <body> Hai, teman-teman aku belajar website </body> </html>
Lalu simpanlah kode tersebut dengan nama belajar.html, jangan lupa pada bagian Save as type pilihAll Files (*.*). Setelah selesai disimpan, bukalah file tadi, maka hasilnya seperti berikut:
Ok, coba perhatikan tulisan Belajar Website, tidak ditampilkan di halaman website, tetapi di bagian headernya browser sebagai informasi bagi pengguna.
Nah bagaimana teman-teman..gampang kan? ok kita akan lanjut mengenai cara memformat tulisan di HTML
Ok, kalau sebelumnya kita telah belajar mengenai dasar HTML, saatnya kita belajar bagaimana mem-format tulisan yang ada di halaman website menggunakan kode HTML. Kita akan belajar memformat tulisan menjadi tebal, miring, garis bawah. Kira juga akan belajar cara menentukan jenis tulisan/font serta ukuran dan warna dari font tersebut.
Cara memformat tulisan di website dengan HTML
Ok kita langsung aja lihat tag-tag HTML yang berguna untuk memformat tulisan di website:
Jenis, warna dan ukuran tulisan atau font
Sintaks:
<font face="jenis tulisan" color="warna" size="ukuran">
Contoh:
<font face="Arial Black" color="Red" size="5"> Hai tulisan ini akan berjenis Arial Black, berwarna merah dan ukurannya 5, secara default ukuran tulisan adalah 3. </font>
Output:
Hai tulisan ini akan berjenis Arial Black, berwarna merah dan ukurannya 5, secara default ukuran tulisan adalah 3.
Tulisan Tebal, Miring dan garis Bawah
Ok, kita lanjut untuk menebalkan tulisan gunakan tag <b>, untuk tulisan miring gunakan tag <i> dan untuk garis bawah gunakan tag <u>
Contoh:
<b>Tulisan ini akan tebal</b><br> <u>Tulisan ini ada garis bawahnya</u><br> <i>Tulisan ini akan miring</i>
Output:
Tulisan ini akan tebal
Tulisan ini ada garis bawahnya
Tulisan ini akan miring
Tulisan ini ada garis bawahnya
Tulisan ini akan miring
Jika kita biasa mengetik di MS Word, kita bisa membuat list berbentuk bullet, angka ataupun huruf. Nah bagaimana cara atau kode HTML untuk membuat list tersebut di halaman website. Yuk kita pelajari sintaks atau kode HTMLnya.
Sintaks list bullet, angka dan huruf di HTML
Tag atau kode HTML yang digunakan untuk membuat list berupa bullet adalah <UL> sedangkan untuk membuat list berupa huruf atau angka adalah <OL>, dan untuk masing-masing point kita gunakan tag <LI>, yuk langsung saja kita lihat contoh-contohnya supaya lebih mengerti
Contoh Kode list berbentuk bullets
Kode:
<ul> <li>Ini adalah tulisan list ke 1</li> <li>Ini adalah tulisan list ke 2</li> <li>Ini adalah tulisan list ke 3</li> <li>Ini adalah tulisan list ke 4</li> <li>Ini adalah tulisan list ke 5</li> </ul>
Output:
- Ini adalah tulisan list ke 1
- Ini adalah tulisan list ke 2
- Ini adalah tulisan list ke 3
- Ini adalah tulisan list ke 4
- Ini adalah tulisan list ke 5
Contoh Kode list berbentuk kotak
Kode:
<ul type="square"> <li>Ini adalah tulisan list ke 1</li> <li>Ini adalah tulisan list ke 2</li> <li>Ini adalah tulisan list ke 3</li> <li>Ini adalah tulisan list ke 4</li> <li>Ini adalah tulisan list ke 5</li> </ul>
Output:
- Ini adalah tulisan list ke 1
- Ini adalah tulisan list ke 2
- Ini adalah tulisan list ke 3
- Ini adalah tulisan list ke 4
- Ini adalah tulisan list ke 5
Contoh Kode list angka
Kode:
<ol> <li>Ini adalah tulisan list ke 1</li> <li>Ini adalah tulisan list ke 2</li> <li>Ini adalah tulisan list ke 3</li> <li>Ini adalah tulisan list ke 4</li> <li>Ini adalah tulisan list ke 5</li> </ol>
Ouput:
- Ini adalah tulisan list ke 1
- Ini adalah tulisan list ke 2
- Ini adalah tulisan list ke 3
- Ini adalah tulisan list ke 4
- Ini adalah tulisan list ke 5
Contoh Kode list huruf
Kode:
<ol type="a"> <li>Ini adalah tulisan list ke 1</li> <li>Ini adalah tulisan list ke 2</li> <li>Ini adalah tulisan list ke 3</li> <li>Ini adalah tulisan list ke 4</li> <li>Ini adalah tulisan list ke 5</li> </ol>
Ouput:
- Ini adalah tulisan list ke 1
- Ini adalah tulisan list ke 2
- Ini adalah tulisan list ke 3
- Ini adalah tulisan list ke 4
- Ini adalah tulisan list ke 5
HTML untuk Pemula
Tidak ada komentar:
Posting Komentar