Tutorial dasar html - Html adalah singkatan dari Hypertext markup language yang merupakan core atau inti dari bahasa pemrograman web yang dipahami oleh web browser. Html adalah bahasa markup yang memformat konten halaman web, dengan kata lain bahasa untuk mengatur apa yang akan ditampilkan sebagai konten web. Html adalah bahasa pemrograman yang open source atau bebas dan tidak dimiliki oleh siapa pun, pengembangannya dilakukan oleh banyak orang.
langsung saja kita mulai pembahasannya. Html diawali dengan tag <html> dan diakhiri dengan </html>, semua tag pada html yang ditampilkan tanpa tanda "/" (slash) disebut tag pembuka dan yang ditampilkan dengan tanda "/" (slash) disebut sebagai tag penutup. Html memilki struktur berupa tag <head> dan <body>. Untuk lebih jelasnya liat susunan kode dibawah ini.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> judul website </title>
</head>
<body>
ketikkan kode program anda disini
</body>
</html>
1. Pada baris pertama terdapat pendeklarasian tag doctype, tag ini digunakan untuk mengidentifikasi jenis dokumen html yang digunakan sehingga browser dapat menentukan bagaimana memperlakukan kode tersebut
2. Pada baris ketiga terdapat tag head pembuka dan ditutup pada baris keenam. Tag head bisa berisi mengenai informasi pada website misalkan judul yang akan ditampilkan pada tab web browser, deskripsi website, dan juga optimasi SEO onpage juga dilakukan pada tag head ini. Tag head juga bisa berisikan alamat file css maupun library javascript.
3. Pada baris ketujuh terdapat tag body pembuka dan penutup pada baris kesembilan. Tag body ini berisi semua konten yang ditampilkan pada website.
Untuk mempermudah anda dalam menulis dan mengedit koding nantinya biasakan untuk menulis kode dengan cara seperti yang diatas, tag - tag atau kode yang berada didalam tag lainnya diberikan jarak satu tab kedalam, dengan cara seperti ini maka kode akan terlihat rapih dan tidak membingungkan.
Menampilkan teks menggunakan html
Kita bisa menampilkan teks hanya dengan mengetikkannya didalam tag body seperti yang diatas, tetapi akan lebih baik jika teks atau paragrap diletakkan diantara tag <p> dan </p>. Semua teks yang berada didalam tag <p> akan dianggap sebagai paragrap
Menampilkan link menggunakan html
Link berfungsi sebagai navigasi halaman web ke halaman web yang lainnya. Link dapat dibuat pada html dengan tag <a> dan </a>. Ada dua jenis link jika ditinjau dari url nya yaitu :
- untuk web, URL = www.domain.com
- untuk email, URL = mailto:nama@email.com
properti href berguna sebagai tempat alamat link yang ingin dituju dan tulisan yang berada diantara tag <a> dan </a> adalaha tulisan yang akan ditampilkan sebagai link itu sendiri.
Menampilkan list menggunakan html
List pada html dibagi menjadi dua jenis yaitu ordered list atau list dengan menggunakan nomor dan unordered list yaitu list tanpa nomor atau hanya menggunakan bullet.
sebagai contoh adalah seperti berikut:
Ordered list
- list pertama
- list kedua
- list ketiga
- list keempat
- list kelima
- list
- list
- list
- list
- list
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> list menu </title>
</head>
<body>
<h1> Ordered list </h1>
<ol>
<li>list pertama</li>
<li>list kedua</li>
<li>list ketiga</li>
<li>list keempat</li>
<li>list kelima</li>
</ol>
<h1>Unordered list</h1>
<ul>
<li>list</li>
<li>list</li>
<li>list</li>
<li>list</li>
<li>list</li>
<ul>
</body>
</html>
- List bernomor dimulai dengan tag <ol> dan ditutup dengan </ol>, pada setiap item list dimulai dengan tag <li> dan diakhiri dengan </li>.
- List bullet dimulai dengan tag <ul> dan diakhir dengan </ul>. Sama seperti list bernomor, list bullet juga menggunakan tag <li> pada setiap item listnya.
Gambar ditampilkan dengan menggunakan tag <img/>, perlu diketahui tidak semua tag dalam html memiliki tag penutup, ada beberapa tag yang tidak memiliki tag penutup salah satunya tag <img/> yang akan digunakan untuk menampilkan gambar. Untuk menentukan lokasi file gambar kita menggunakan properti "src". Lokasi gambar bisa berupa URL atau juga didalam folder tempat kita menghostingkan website kita. Properti alt juga wajib dibuat pada tag <img/> yang berfungsi sebagai teks alternatif jika gambar tidak berhasil diload kedalam website dan juga berfungsi sebagai pengenal agar search engine dapat mengetahui gambar tersebut, hal ini tentu sangat baik buat aspek SEO website teman - teman kedepannya.
Secara keseluruhan tag <img/> adalah seperti berikut <img src="lokasi gambar.jpg" alt="teksAlternatif"/>. Untuk pengaturan gambar yang akan ditampilkan misalkan posisi, ukuran, border, opacity dan yang lainnya dibahas dalam tutorial dasar css.
Menampilkan tabel menggunakan html
Tabel sangat pengting dalam membuat website, selain dapat menampilkan data secara rapih dan teratur tabel juga dapat kita gunakan untuk membantu membuat layout website kita, hal ini sering digunakan untuk membuat layout pada form inputan data. Tabel diawali dengan tag <table> dan diakhiri tag penutup </table>. Tabel juga dibuat berdasarkan baris yang berisi beberapa kolom, untuk membuat baris pada tabel menggunakan tag <tr> dan untuk membuat kolomnya menggunakan <td>. Kode lengkapnya bisa dilihat dibawah ini.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> judul website </title>
</head>
<body>
<table>
<tr>
<td>no</td>
<td>nama</td>
<td>alamat</td>
</tr>
<tr>
<td>1</td>
<td>polan</td>
<td>jln.santun</td>
</tr>
</table>
</body>
</html>
Html mutlak harus dikuasai seorang web desainer dan web developer karena ini adalah inti dan dasar dari pembuatan website. Pemahaman yang baik pada setiap baris kode juga diperlukan agar dalam mempelajari bahasa pemrograman yang lain seperti css,jquery dan juga php tidak mengalami kesulitan. Semoga Tutorial dasar html ini dapat bermanfaat bagi teman - teman yang ingin mempelajari web development dan jangan segan - segan untuk bertanya ya teman - teman.
EmoticonEmoticon