HTML adalah bahasa pemrograman yang digunakan untuk membuat web
. HTML sangat tepat sekali untuk mengawali anda untuk menjadi seorang progammer web.
HTML itu sendiri adalah singkatan dari
Hyper Markup Text Language yang diciptakan oleh bapak
Tim Berners-lee. Dan kerennya lagi seorang progammer web mendesain tampilan web hanya dengan mengetikkan baris kode bahasa pemrograman. Magic.!.
Sesuai dengan judulnya, silahkan lanjut kebawah.
Apa yang dibutuhkan.?
- Kemauan untuk belajar
- Sebuah program text editor untuk tempat penulisan kode (Coding).
Anda bisa menggunakan notepad yang tersedia di windows. tapi saya sarankan untuk menggunakan program yang didesain khusus untuk koding. saya biasa menggunakan
Sublime Text, atau text editor lainnya.
Baca :
5 daftar text editor yang mudah digunakan
Materi:
- Menyiapkan Project
- Struktur Dasar HTML
- Tipografi
- List / Daftar
- Tabel
- Menyisipkan Gambar
Menyiapkan Project
Biasanya para programmer web membuat folder tersendiri untuk 1 proyek web, 1 level didalam folder tersebut dinamakan dengan
root
- Buat satu folder untuk project pertama anda.
- Setelah membuat folder projectnya, buka menggunakan notepad atau sublime text
- Buat satu file dengan nama terserah namun berekstensi .html.
contoh : index.html.
Struktur Dasar HTML
Didalam bahasa pemrograman HTML, sistem penulisan kode memakai sistem buka tutup tag.
misal, tag <html> ditutup dengan </html> , tag <head> ditutup dengan </head> dan sebagainya.
Secara umum, struktur html sederhana seperti berikut, Tuliskan Kode dibawah pada text editor anda:
<html>
<head>
isinya head
</head>
<body>
isinya body
</body>
</html>
Maka kode diatas dapat diartikan seperti gambar dibawah
Didalam
tag <
head>, berisi kumpulan pendukung dokumen, seperti judul tab
<title>, memanggil file css
<link>, dan bahkan memuat file javascript
<script>.
Sementara semua yang ada didalam tag
<body>, akan tampil didalam halaman. Ada banyak sekali tag yang dapat anda gunakan.
Coba ketikkan kode seperti dibawah dan jalankan di browser:
<html>
<head>
<title>Ini Judulnya</title>
</head>
<body>
Ini yang tampil di web browser
</body>
</html>
Penjelasan
- Teks yang ada pada <body> muncul di browser,
- sementara pada tag <head> tidak muncul di halaman browser.
- Namun <title> tampil sebagai nama tab karena memang sudah menjadi fungsinya
Tipografi
Tipografi singkatnya adalah model penulisan. Pada HTML sendiri sudah disediakan tag yang menangani desain tipografi, seperti: Heading, Bold, Italic, Underline, dan masih banyak yang lainnya. Mari kita bahas
- Heading <h1>, <h2>, .... <h6>
Heading adalah tulisan besar yang memfokuskan kalimat didalamnya. Biasa digunakan untuk nama website, judul dan lain sebagainya.
Contoh
<html>
<head>
<title>Belajar html</title>
</head>
<body>
<h1>Ini contoh Heading 1</h1>
<h2>Ini contoh Heading 2</h2>
<h3>Ini contoh Heading 3</h3>
<h4>Ini contoh Heading 4</h4>
<h5>Ini contoh Heading 5</h5>
<h6>Ini contoh Heading 6</h6>
</body>
</html>
Hasil Output
Ini contoh Heading 1
Ini contoh Heading 2
Ini contoh Heading 3
Ini contoh Heading 4
Ini contoh Heading 5
Ini contoh Heading 6
- Cetak huruf (tebal, miring, underline dan coretan)
Pada saat kita mengetikkan dokumen pada microsoft word (misalnya). Kita tak pernah luput dari model huruf ini. Yaitu cetak tebal, miring dan garis bawah, Sesekali menggunakan Strike / coretan.
Kita juga dapat menggunakannya pada html.
tag <b> untuk mencetak huruf tebal
tag <u> untuk mencetak huruf dengan garis bawah
tag <i> untuk mencetak huruf miring
tag <ss> untuk mencetak huruf seperti dicoret
berikut demonya
<html>
<head>
<title></title>
</head>
<body>
<b>Ini huruf tebal</b><br>
<u>Ini huruf bergaris bawah</u><br>
<i>Ini huruf miring</i><br>
<ss>Ini huruf yang dicoret</ss><br>
</body>
</html>
Hasil Output
Ini huruf tebal
Ini huruf bergaris bawah
Ini huruf miring
Ini huruf yang dicoret
List / Daftar
- Daftar item tanpa nomor <ul>
<html>
<head>
<title></title>
</head>
<body>
<ul>
<li>Urutan daftar 1</li>
<li>Urutan daftar 2</li>
<li>Urutan daftar 3</li>
<li>Urutan daftar 4</li>
<li>Urutan daftar 5</li>
</ul>
</body>
</html>
Hasil Output
- Urutan daftar 1
- Urutan daftar 2
- Urutan daftar 3
- Urutan daftar 4
- Urutan daftar 5
- Daftar item dengan nomor <ol>
<html>
<head>
<title></title>
</head>
<body>
<ol>
<li>Urutan daftar 1</li>
<li>Urutan daftar 2</li>
<li>Urutan daftar 3</li>
<li>Urutan daftar 4</li>
<li>Urutan daftar 5</li>
</ol>
</body>
</html>
Hasil Output
- Urutan daftar 1
- Urutan daftar 2
- Urutan daftar 3
- Urutan daftar 4
- Urutan daftar 5
<html>
<head>
<title></title>
</head>
<body>
<dl>
<dt>Mouse</dt>
<dd>Inputan yang digunakan komputer sebagai penggerak kursor</dd>
</dl>
<dl>
<dt>LCD</dt>
<dd>Sejenis layar yang menggunakan air kristal dengan diterangi oleh backlight</dd>
</dl>
<dl>
<dt>Android</dt>
<dd>Sistem operasi yang dibuat oleh google dan dijalankan pada perangkat seluler</dd>
</dl>
</body>
</html>
Hasil Output
- Mouse
- Inputan yang digunakan komputer sebagai penggerak kursor
- LCD
- Sejenis layar yang menggunakan air kristal dengan diterangi oleh backlight
- Android
- Sistem operasi yang dibuat oleh google dan dijalankan pada perangkat seluler
Tabel
Untuk membuat tabel pada html, kita perlu mengetahui struktur tabel yang diterapkan pada html. Tabel HTML menggunakan 3 tag utama yaitu
<table>, <tr>, <td>
<table> adalah tag yang mewakili seluruh komponen tabel
<tr> adalah baris dari suatu tabel
<td> adalah cell dari suatu baris.
<th> adalah cell untuk header, perbedaannya dengan td adalah pada th tulisan lebih tebal.
pada kondisi bawaan, tabel tidak memiliki border / garis tepi. Sehingga kita harus menambahkan atribut pada tag
<table> berupa
border="1" (1 berarti memiliki ketebalan garis level 1)
Silahkan coba kode berikut:
<html>
<head>
<title></title>
</head>
<body>
<table border="1">
<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th>
</tr>
<tr>
<td>1</td>
<td>Ahmad</td>
<td>Jl. Jakarta</td>
</tr>
<tr>
<td>2</td>
<td>Budi</td>
<td>Jl. Surabaya</td>
</tr>
<tr>
<td>3</td>
<td>Ahmad</td>
<td>Jl. Semarang</td>
</tr>
</table>
</body>
</html>
Hasil Output
| No | Nama | Alamat |
| 1 | Ahmad | Jl. Jakarta |
| 2 | Budi | Jl. Surabaya |
| 3 | Ahmad | Jl. Semarang |
untuk menggabung cell, anda dapat menggunakan
rowspan="jumlah_baris" : untuk menggabungkan baris
colspan="jumlah_kolom : untuk menggabungkan kolom
<html>
<head>
<title></title>
</head>
<body>
<table border="1">
<tr>
<th rowspan="2">No</th>
<th rowspan="2">Nama</th>
<th rowspan="2">Alamat</th>
<th colspan="2">Orang Tua</th>
</tr>
<tr>
<th>Ayah</th>
<th>Ibu</th>
</tr>
<tr>
<td>1</td>
<td>Ahmad</td>
<td>Jl. Jakarta</td>
<td>Adi</td>
<td>Rani</td>
</tr>
<tr>
<td>2</td>
<td>Budi</td>
<td>Jl. Surabaya</td>
<td>Saputra</td>
<td>Dinda Ayu</td>
</tr>
<tr>
<td>3</td>
<td>Ahmad</td>
<td>Jl. Semarang</td>
<td>Saefudin</td>
<td>Rohmah</td>
</tr>
</table>
</body>
</html>
Hasil Output
| No | Nama | Alamat | Orang Tua |
| Ayah | Ibu |
| 1 | Ahmad | Jl. Jakarta | Adi | Rani |
| 2 | Budi | Jl. Surabaya | Saputra | Dinda Ayu |
| 3 | Ahmad | Jl. Semarang | Saefudin | Rohmah |
Menyisipkan Gambar
Untuk menyisipkan gambar, tag yang digunakan adalah
<img src="alamat_gambar">
Pada alamat gambar, anda dapat memberikan alamat di internet (komputer harus terkoneksi internet) ataupun gambar lokal yang ada dalam komputer anda.
Pada gambar lokal, gambar harus satu folder dengan file html, sehingga menjadi
<img src="gambar.png">. Atau anda dapat menyimpan gambar didalam folder lebih dalam misal
<img src="images/gambar.png".
Jangan lupa untuk memberikan ekstensi file seperti
png, jpeg, bmp dan lain sebagainya pada alamat
<html>
<head>
<title></title>
</head>
<body>
<h2>Dibawah adalah gambar cover dari artikel ini</h2>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAbb-qRI-5y5fzn4VLHTuur_mBBEIiZEnkv7FbFhRs32h0xEty7hVdwJk-JqFamgjTjE-Uf1c9HiD1JdEdxEib1FBNt9mQtaJgQBKJgf3P75Q4ikJMvT7TONNbavLAo1O-bjnhVcawveA/s400/Belajar.jpg">
</body>
</html>
Hasil Output
Dibawah adalah gambar cover dari artikel ini
