Scribd
Unggah
18 tayangan10 halaman

Perintah HTML

Diunggah oleh

Juli Ett
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
18 tayangan10 halaman

Perintah HTML

Diunggah oleh

Juli Ett
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 10

Perintah Dasar HTML

HTML (HyperText Mark-up Language) merupakan bahasa mark-up yang di gunakan


untuk membuat konstruksi suatu web (situs web atau aplikasi berbasis web), HTML di
anggap bukan sebagai suatu bahasa pemrograman karena strukturnya yang sederhana,
oleh karena itu situs web atau aplikasi berbasis web dinamis tidak mungkin di buat
hanya menggunakan HTML saja, misalnya di kombinasikan dengan PHP yang
merupakan salah satu bahasa pemrograman web paling populer saat ini.
1. Tag <!DOCTYPE html>
Tag <! DOCTYPE html> adalah perintah dasar HTML yang di gunakan untuk
menginformasikan web browser bahwa dokumen yang di berikan adalah dokumen
HTML, dengan begitu web browser dapat mengetahui bagaimana dokumen harus di
interpretasikan, dengan menunjukkan versi atau standar HTML (atau bahasa markup
lainnya) yang di gunakan. Meskipun sebenarnya tag <! DOCTYPE html> bukan elemen
HTML itu sendiri, tag <! DOCTYPE html> harus di sertakan pada setiap dokumen
HTML agar sesuai dengan standar HTML.
2. Tag <html> … </html>
Tag <html> adalah perintah dasar HTML yang di gunakan sebagai wadah untuk semua
elemen dari keseluruhan dokumen HTML, semua elemen HTML harus ada dalam tag
<html> … </html> (kecuali DOCTYPE, itulah yang dimaksud dengan ‘tag DOCTYPE
bukan elemen HTML’). Hal tersebut merupakan aturan dalam dasar-dasar
HTML (ISO/IEC 15445 adalah standar yang di tetapkan untuk HTML).
3. Tag <head> … </head>
Tag <head> adalah perintah dasar HTML yang berisi informasi tentang dokumen
HTML yang digunakan oleh web browser dan web crawlers namun sebagian besar tidak
ditampilkan ke pengunjung situs web. Tujuan dari penggunaan tag <head> adalah
memberikan informasi tentang dokumen itu sendiri. Seperti favicon, judul halaman (tag
‘title’), meta tags, style (CSS), dan javascript.
4. Tag <title> … </title>
Tag <title> adalah perintah dasar HTML yang di butuhkan untuk menetapkan judul
dokumen HTML. Judul halaman tidak di tampilkan di halaman web, namun di gunakan
sebagai nama halaman oleh search engine dan di tampilkan pada tab web browser juga
di gunakan sebagai nama halaman dari halaman web yang di bookmark.
5. Tag <body> … </body>
Tag <body> adalah perintah dasar HTML yang berisi keseluruhan isi halaman web. Ini
harus menjadi elemen kedua di dalam elemen induk <html>, hanya mengikuti elemen
<head>. Tag <body> merupakan elemen HTML yang paling penting. Isi elemen
<body> adalah apa yang di tampilkan kepada pengguna yang mengunjungi halaman
web melihat dokumen web.
6. Tag <p> … </p>
Tag <p> adalah perintah dasar HTML yang di gunakan untuk mengidentifikasi blok
teks. Tag <p> mendefinisikan sebuah paragraf teks (belupa blok). Akhir paragraf di
tandai dengan tag </p>. Secara teknis tag </p> bersifat opsional, namun ada baiknya
menyertakan tag penutup untuk memastikan dokumen HTML tersebut valid.
Secara default, sebagian besar browser terbaik saat ini menempatkan jarak dan baris
kosong di antara paragraf.
Mari kita satukan ke-enam pasang tag di atas menjadi satu kesatuan membentuk struktur
dasar halaman HTML

<!DOCTYPE html>

<html>

<head>

<title>DosenIT.com</title>

</head>

<body>

<p>Ilmu komputer & teknologi dari Dosen IT</p>

</body>

</html>

7. Tag <b> … </b> dan tag <strong> … </strong>


Tag <b> adalah perintah dasar HTML yang di gunakan untuk menarik perhatian pada
teks dengan menampilkan huruf tebal secara semantik (bagian struktur bahasa yang
berhubungan dengan makna ungkapan), pada HTML5 ada tag lain yang serupa dengan
tag <b> (untuk menampilkan teks tebal) adalah tag <strong>, tag <strong> di gunakan
untuk mengidentifikasi teks yang lebih penting dari pada teks di sekitarnya.
Secara default, semua web browser menampilkan <strong> teks dalam huruf tebal.
8. Tag <i> … </i> dan <em> … </em>
Tag <i> adalah perintah dasar HTML yang di gunakan untuk membedakan kata dari
teks sekitarnya dengan menata teks yang di tandai dengan huruf miring tanpa
menyiratkan penekanan tambahan pada kata-kata yang dicetak miring, artinya teks di
cetak miring semata-mata hanya masalah style saja, untuk teks dengan makna yang
tersirat secara tekstual HTML5 menyediakan tag <em> untuk kebutuhan tersebut.
9. Tag <u> … </u>
Tag <u> adalah perintah dasar HTML yang di gunakan untuk mengidentifikasi teks
yang harus di garisbawahi, namun teks tersebut tidak berartikulasi walaupun menjadi
berbeda dari teks di sekitarnya. Teks link dengan tag <a> juga secara default memiliki
style garisbawah, namun teks link dengan tag <a> berartikulasi karena memiliki makna
dan berbeda dengan teks lain di sekitarnya.
10. Tag <a> … </a>
Tag <a>, atau tag anchor, adalah perintah dasar HTML yang di gunakan untuk
membuat hyperlink ke halaman web lain atau lokasi lain dalam halaman web yang
sama. Hyperlink yang di buat oleh elemen anchor dapat di terapkan pada teks, gambar,
atau konten HTML lainnya yang berada di antara tag <a> dan </a>.
Mari kita satukan tag di atas menjadi satu kesatuan membentuk halaman web dengan
beragam format teks.

<!DOCTYPE html>

<html>

<head>

<title>DosenIT.com</title>

</head>

<body>

<p>Ilmu komputer & teknologi dari Dosen IT</p>

<b>Teks tebal dengan tag BOLD</b>

<strong>Teks tebal dengan tag STRONG</strong>

<i>Teks miring dengan tag ITALIC</i>

<em>Teks miring dengan tag EMPASIZE</em>

<u>Teks bergarisbawah dengan tag UNDERLINE</u>

<a href="http://dosenit.com">Teks link dengan tag ANCHOR</a>

</body>

</html>

11. Tag <ul> … </ul>


Tag <ul> adalah perintah dasar HTML yang di gunakan untuk mendefinisikan list
item yang tidak berurutan (unordered list, ul). Tag <ul> menyajikan list item di
dalamnya tanpa urutan numerik.
12. Tag <ol> … </ol>
Tag <ol> adalah perintah dasar HTML yang di gunakan untuk mendefinisikan list
item yang berurutan (ordered list, ul). Tag <ol> menyajikan list item di dalamnya
dengan urutan numerik (1, I, i) atau alfabet (A, a).
13. Tag <li> … </li>
Tag <li> adalah perintah dasar HTML yang di gunakan untuk mendefinisikan list
item yang merupakan bagian dari tag <ul> atau tag <ol>. Tampilan list item tergantung
pada jenis list yang di gunakan, misalnya Anda menggunakan tag <ol>, maka list
item akan menampilkan daftar terurut dengan item angka.
Copy kode di bawah ini kemudian paste diantara tag <body> dan </body> untuk
melihat perbedaanya.

[tabs]
[tab title=”Unordered List
<ul>

<li>Software</li>

<li>Hardware</li>

<li>Brainware</li>

</ul>

<ul type='circle'>

<li>Software</li>

<li>Hardware</li>

<li>Brainware</li>

</ul>

<ul type='disc'>

<li>Software</li>

<li>Hardware</li>
<li>Brainware</li>

</ul>

[/tab]
[tab title=”Ordered List
<ol>

<li>Software</li>

<li>Hardware</li>

<li>Brainware</li>

</ol>

<ol type='A'>

<li>Software</li>

<li>Hardware</li>

<li>Brainware</li>

</ol>

<ol type='a'>

<li>Software</li>

<li>Hardware</li>

<li>Brainware</li>

</ol>

<ol type='I'>

<li>Software</li>

<li>Hardware</li>

<li>Brainware</li>
</ol>

<ol type='i'>

<li>Software</li>

<li>Hardware</li>

<li>Brainware</li>

</ol>

[/tab]
[/tabs]
14. Tag <table> … </table>
Seperti namanya, tag <table> adalah perintah dasar HTML yang di gunakan untuk
mendefinisikan tabel, sebuah tabel setidaknya terdiri dari satu kolom dan satu baris,
dalam HTML sebuah baris di definisikan dengan tag <tr> (akan kita bahas kemudian)
sedangkan kolom di definisikan dengan tag <td> atau <th> (juga akan kita bahas
kemudian).

15. Tag <tr> … </tr>


Tag <tr> adalah perintah dasar HTML yang di gunakan untuk mendefinisikan baris
pada tabel (table row), tag <tr> harus di simpan tepat di dalam tag <table>, dalam satu
baris (satu pasang tag <tr>) bisa terdapat satu atau lebih tag <td> atau tag <th>.

16. Tag <th> … </th>


Tag <th> adalah perintah dasar HTML yang di gunakan untuk mendefinisikan heading
pada tabel (table heading), tag <th> harus di simpan tepat di dalam tag <tr>, tag <th>
sebenarnya lebih cocok di analogikan sebagai cell pertama pada microsoft office excel.
Cell pertama biasanya di definisikan sebagai heading atau judul kolom.

17. Tag <td> … </td>


Tag <td> adalah perintah dasar HTML yang di gunakan untuk mendefinisikan tabel
data, tag <td> harus di simpan tepat di dalam tag <tr>, tag <td> lebih mirip dengan cell
pada Microsoft Office Excel, kumpulan cell yang linier (horizontal) membentuk suatu
kolom.

Copy kode di bawah ini kemudian paste diantara tag <body> dan </body> untuk
membentuk struktur tabel.

<table border='1'>
<tr>

<th>No.<th><th>Nama Barang<th><th>Qty</th>

</tr>

<tr>

<td>1</td><td>Mouse</td><td>10</td>

</tr>

<tr>

<td>2</td><td>Keyboard</td><td>15</td>

</tr>

</table>

18. Tag <img/>


Tag <img> adalah perintah dasar HTML yang di gunakan untuk menampilkan gambar
statis pada halaman web. Semua tag <img> harus memiliki atribut “src” yang di
tentukan. Atribut “src” mendefinisikan gambar yang akan di tampilkan. Biasanya, “src”
adalah URL, namun representasi data gambar juga dapat di gunakan dalam beberapa
kasus, misalnya apabila gambar berada satu path atau child-path dari halaman web yang
menampilkannya.

19. Tag <audio> … </audio>


Tag <audio> adalah perintah dasar HTML yang di gunakan untuk menambahkan media
audio ke dokumen HTML yang akan di mainkan oleh dukungan untuk pemutaran audio
yang terpasang pada browser dan bukan plugin browser.

20. Tag <video> … </video>


Tag <video> adalah perintah dasar HTML yang di gunakan untuk menambahkan video
ke halaman web, video akan di putar oleh dukungan pemutaran video native (bukan
plugin browser), tag <video> membutuhkan URL video ke elemen tersebut dengan
menggunakan atribut src elemen <video> antara tag pembuka dan penutup <video>.

Copy kode di bawah ini kemudian paste diantara tag <body> dan </body> untuk
menyematkan media image, audio, dan video.
[tabs]
[tab title=”Image
<img src="https://dosenit.com/wp-content/uploads/2015/07/dosenitdankomputer.jpg">

[/tab]
[tab title=”Audio
<audio controls id="audio-example">

<source src="http://mp3download.planetlagu.site/save/01%20Jaz%20Kasmaran.ogg">

<source src="http://mp3download.planetlagu.site/save/01%20Jaz
%20Kasmaran.mp3">

</audio>

[/tab]
[tab title=”Video
<video width="640" height="480"
src="https://archive.org/download/Popeye_forPresident/Popeye_forPresident_512kb.mp
4" controls></video>

[/tab]
[/tabs]
21. Tag <form>
Tag <form> adalah perintah dasar HTML yang di gunakan untuk membuat formulir
pada halaman web. Elemen <form> sebenarnya tidak membuat kolom formulir, namun
di gunakan sebagai wadah induk untuk menampung elemen formulir seperti elemen
<input> dan <textarea>, akan kita bahas kemudian.

22. Tag <input>


Tag <input> adalah perintah dasar HTML yang di gunakan untuk membuat kolom
formulir yang menerima masukan dari pengguna. Bentuk elemen <input> dapat di
sajikan dengan berbagai cara, termasuk teks box, button, check box, menu drop-down,
dan banyak lagi, dengan menetapkan atribut jenis elemen masukan ke nilai yang sesuai.

23. Tag <textarea>


Tag <textarea> adalah perintah dasar HTML yang di gunakan untuk membuat area
input teks dengan panjang yang tak terbatas. Secara default, teks dalam <textarea> di
tampilkan dalam font monospace atau fixed-width, tag <textarea> paling sering di
gunakan dalam <form>.
24. Tag <button>
Tag <button> adalah perintah dasar HTML yang di gunakan untuk membuat tombol
HTML. Teks yang muncul antara tag pembuka dan penutup akan muncul sebagai teks
pada tombol. Tidak ada tindakan yang terjadi secara default saat tombol diklik.
Tindakan harus ditambahkan ke tombol menggunakan JavaScript atau dengan
menghubungkan tombol dengan formulir.

25. Tag <select>


Tag <select>, adalah perintah dasar HTML yang di gunakan bersama dengan satu atau
lebih tag <option> (akan kita bahas kemudian), kombinasi kedua tag tersebut digunakan
untuk membuat daftar opsi drop-down untuk formulir pada halaman web. Tag <select>
membuat daftar dan setiap elemen <option> di tampilkan sebagai pilihan yang tersedia
dalam daftar tersebut.

26. Tag <option>


Tag <option> adalah perintah dasar HTML yang di gunakan bersamaan dengan elemen
<select> untuk membuat menu drop-down dalam formulir halaman web. Setiap elemen
<option> di tampilkan sebagai pilihan yang tersedia di menu drop-down yang di
hasilkan, tag <option> harus di letakkan tepat di dalam tag <select>.

Copy kode di bawah ini kemudian paste diantara tag <body> dan </body> untuk
membuat formulir pada halaman web.

<form>

Nama : <br/>

<input type='text'><br/>

Jenis Kelamin : <br/>

<select>

<option>Laki-laki</option>

<option>Perempuan</option>

</select>

<br/>

Alamat : <br/>

<textarea cols='5' rows='5'> </textarea><br/>

<button>Simpan</button>
</form>

27. Tag <style>


Tag <style> adalah perintah dasar HTML yang di gunakan untuk menambahkan kode
CSS ke dokumen HTML. Elemen ini sebaiknya di letakkan di bagian <head>, walaupun
tetap dapat berguna jika di letakkan dalam <body>. CSS sendiri berfungsi untuk
membuat desain web lebih menarik sesuai dengan tujuan user interface pada masing-
masing web developer (khususnya web designer).
28. Tag <script>
Tag <script> adalah perintah dasar HTML yang berisi kode yang di tulis dalam bahasa
pemrograman selain HTML atau menentukan lokasi sumber skrip eksternal. Hal ini
paling sering di gunakan untuk menambahkan perintah dasar JavaScript (atau perintah
yang lebih expert) ke dalam halaman web secara langsung atau dengan menautkan ke
file .js eksternal.

Anda mungkin juga menyukai