Materi Perkuliahan Mata Kuliah Web Programing Tentang HTML
Apa itu HTML? Mungkin pertanyaan inilah yang terbersit dalam benak kalian yang baru masuk ke dalam dunia web programming. HTML merupakan bahasa pemrograman dasar yang wajib dikuasai oleh seorang web developer, karena HTML merupakan unsur dasar dari pembangunan sebuah website. Jika diibaratkan, HTML menjadi pondasi pada sebuah rumah atau bangunan, karena bentuk pada halaman website dibuat dengan menggunakan HTML.
PENGENALAN HTML
Hypertext Markup Language (HTML) adalah sebuah bahasa untuk menampilkan konten di web. HTML sendiri adalah bahasa pemrograman yang bebas, artinya tidak dimiliki oleh siapapun, pengembangannya dilakukan oleh banyak orang di banyak Negara dan bisa dikatakan sebagai sebuah bahasa yang dikembangkan bersama-sama secara global.
LANGKAH2 DASAR MENGOPERASIKAN HTML
Berikut langkah-langkah yang harus kita perhatikan :
1. Tentu kita harus install Xampp terlebih dahulu.
2. Setelah terinstal, buka aplikasi Xampp Control Panel
3. Setelah terbuka kemudian klik tombol start pada bagian Apache dan MYSQL, fungsi keduanya nantinya adalah sebagai Server(Apache) dan Database(Mysql)
4. Kemudian buka Windows Explorer
5. Masuk ke folder instalasi Xampp, biasanya ada di Local Disc C.
6. Masuk ke folder htdocs.
7. Hapus 2 file yang bernama index (index.php dan index.html)
8. Buka Web Browser (firefox,chrome dsb) pilih salah satu.
9. Ketikan di kolom url address bar “localhost” = c : /xampp/htdocs.
10. Buat folder baru bernama “lat1” di dalam folder htdocs.
11. Ulangi langkah ke 9, maka nanti folder lat1 akan muncul.
12. Buka Notepad ++/Notepad (bawaan dari windows), nah disinilah nanti kita membuat scriptnya.
13. Isikan di notepad, struktur dasar html, langsung ketik pasangannya beserta tag title : <title>……JUDUL…..</title> untuk judul (Terserah mau dikasih judul apa nantinya).
14. Simpan file tersebut ke dalam folder “lat1” dengn nama : percobaan.html
15. Ulangi langkah ke 9, pilih folder lat1, maka nanti muncul file percobaan.html, klik dan lihat hasilnya.
Demikian langkah-langkah sederhananya,semoga dapat dimengerti sebagai pembelajaran.
Selanjutnya, mari kita bahas tentang struktur HTML, dan macam2 tag HTML
STRUKTUR DASAR HTML
<html>
<head> ... </head>
<body>
....................
</body>
</html>
CONTOH PENGGUNAAN SCRIPT HTML
<html>
<head>
<title>BSI Purwokerto</title> -----------------> Judul Web
</head>
<body>
Halo Apa Kabar? <br>
Mudah-mudahan kabarnya baik
</body>
</html>
TAG HTML
Tag adalah bagian dari struktur html yang dituliskan diapit oleh tanda < tag >, dan tag dituliskan berpasangan, dengan maksud < tag >-->tag pembuka dan < /tag > --> tag penutup.
• Contoh TAG HTML
<b>...</b> = huruf tebal (bold)
<i>...</i> = huruf miring (italic)
<u>...</u> = huruf garis bawah (underline)
<p>...</p> = paragraf
<marquee>...</marquee> = text berjalan
<br> = ganti baris/enter (break)
<hr> = garis horizontal (horizontal ruler)
Berikut contohnya :
TAG HEADING
Biasanya digunakan untuk membuat judul pada halaman web, tag heading pada HTML terdiri dari 6 tingkatan yaitu yang terdiri dari h1,h2,h3,h4,h5,h6. Tag heading secara default di tampilkan oleh browser dengan huruf tebal (bold), tag heading yang paling besar adalah h1 dan yang paling kecil adalah h6.
<h1>...</h1> = Paling besar ukuran font nya
<h2>...</h2>
<h3>...</h3>
<h4>...</h4>
<h5>...</h5>
<h6>...</h6> = Paling kecil ukuran font nya
TAG BULLET & NUMBERING
HTML mendukung beberapa format list, baik numbering List dan bullets List.
Tag HTML Numbering List
Ada beberapa tipe Penomoran (numbering list) antara lain:
type umum (default) dari Numbering adalah lambang bilangan (1,2,3,... dst)
Adapun Tag HTML yang digunakan untuk type ini, dibuka dengan kode <ol> dan ditutup dengan kode </ol> , sedangkan untuk masing masing item /list dibuka dengan <li> dan ditutup dengan </li>.
Contoh:<ol>
<li>urutan ke-1</li>
<li>urutan ke-2</li>
<li>urutan ke-3</li>
<li>urutan seterusnya...</li>
</ol>
Hasilnya akan terlihat seperti ini:
Contoh:
urutan ke-1
urutan ke-2
urutan ke-3
urutan seterusnya...
Ket: Tag ini selalu berpasangan
Huruf romawi (I, II, III, ... atau i, ii, iii,... ),
Adapun Tag HTML yang digunakan untuk type ini, dibuka dengan kode <ol type="I"> dan ditutup dengan kode </ol> , sedangkan untuk masing masing item /list dibuka dengan <li> dan ditutup dengan </li>.
Contoh:<ol type="I">
<li>urutan ke-1</li>
<li>urutan ke-2</li>
<li>urutan ke-3</li>
<li>urutan seterusnya...</li></ol>
Hasilnya akan terlihat seperti ini:
Contoh:
urutan ke-1
urutan ke-2
urutan ke-3
urutan seterusnya...
Huruf Alfabet ( A,B,C,... atau a,b,c,...)
Adapun Tag HTML yang digunakan untuk type ini, dibuka dengan kode <ol type="A"> dan ditutup dengan kode </ol> , sedangkan untuk masing masing item /list dibuka dengan <li> dan ditutup dengan </li>.
Contoh:<ol type="I">
<li>urutan ke-1</li>
<li>urutan ke-2</li>
<li>urutan ke-3</li>
<li>urutan seterusnya...</li></ol>
Hasilnya akan terlihat seperti ini:
Contoh:
urutan ke-1
urutan ke-2
urutan ke-3
urutan seterusnya...
Tag HTML Bullet List
Ada beberapa tipe Bullet (bullet list) antara lain:
Tipe Disc,
Penulisan Tag HTML nya( contoh agar jarak antar barisnya tidak terlalu jauh maka penulisan tagnya tidak perlu ganti baris (tidah usah di enter)
Contoh:<ul type="Disc"> <li>urutan ke-1</li> <li>urutan ke-2</li> <li>urutan ke-3</li> <li>urutan seterusnya...</li></ul>
Hasilnya:
Contoh:
urutan ke-1
urutan ke-2
urutan ke-3
urutan seterusnya...
Tipe Circle
Penulisan Tag HTML nya ( contoh agar jarak antar barisnya tidak terlalu jauh maka penulisan tagnya tidak perlu ganti baris (tidah usah di enter)
Contoh:<ul type="Circle"> <li>urutan ke-1</li> <li>urutan ke-2</li> <li>urutan ke-3</li> <li>urutan seterusnya...</li></ul>
Hasilnya sbb:
Contoh:
urutan ke-1
urutan ke-2
urutan ke-3
urutan seterusnya...
Tipe Square
Penulisan Tag HTML nya ( contoh agar jarak antar barisnya tidak terlalu jauh maka penulisan tagnya tidak perlu ganti baris (tidah usah di enter)
Contoh:<ul type="Square">
<li>urutan ke-1</li><li>urutan ke-2</li><li>urutan ke-3</li><li>urutan seterusnya...</li></ul>
Hasilnya sebagai berikut:
Contoh:
urutan ke-1
urutan ke-2
urutan ke-3
urutan seterusnya...
Berikut contoh script an hasilnya :
Itulah sedikit ulasan mengenai HTML, semoga artikel ini bermanfaat ^-^
