what do you want to find?: ~Hari 1~ HTML

HTML

(Hypertext Markup Language)

pengertian

Hypertext Markup Language atau HTML adalah bahasa markup yang digunakan untuk membuat struktur halaman website. HTML terdiri dari kombinasi teks dan simbol yang disimpan dalam sebuah file. Dalam membuat file HTML, terdapat standar atau format khusus yang harus diikuti. Format tersebut telah tertuang dalam standar kode internasional atau ASCII (American Standard Code for Information Interchange) .Dengan adanya HTML, pengguna dapat membuat atau menyusun heading, paragraf, gambar, link, dan lainnya supaya dapat dilihat banyak orang melalui halaman website. Untuk bisa diakses secara umum, pengguna perlu membukanya lewat aplikasi browser, seperti Internet Explorer, Chrome, atau Mozilla Firefox.

Sejarah

Tim Berners-Lee merupakan sosok ilmuwan dibalik lahirnya HTML. Di tahun 1991, ia awalnya menciptakan HTML sebagai solusi untuk memudahkan para ilmuwan dalam mengakses dokumen satu sama lain.
Selang setahun kemudian, HTML mulai dapat digunakan untuk umum. Sejarah penggunaan HTML secara umum ini pun tak bisa lepas dari peran World Wide Web atau yang kita kenal dengan WWW. Keduanya saling bersinergi supaya informasi yang ingin disebarkan bisa diakses oleh banyak orang. Tak disangka, kini HTML telah berevolusi menjadi bahasa markup yang telah digunakan oleh lebih dari 92,3% persen website di dunia. Selama perjalanannya, HTML tentu mengalami perkembangan yang cukup pesat. Seperti apa evolusinya? Simak timeline perjalanan HTML berikut:

Sampai saat ini HTML5 menjadi versi yang paling update dengan sistem yang paling canggih. Popularitas HTML versi terbaru ini pun sangat pesat. Bahkan, saat ini ada 87,4 persen website yang sudah menggunakan HTML5.

Tag

Tag adalah tanda awalan dan akhiran dalam perintah HTML yang akan dibaca oleh web browser. Tag di buat mengunakan kurung siku <...>, dimana di dalam nya berisi nama tag. Setiap tag memiliki fungsi perintah yang berbeda-beda. Mulai dari membuat judul, paragraf, heading, cetak tebal, miring, italic, dan lainnya. Misalnya: <bold>. Tag tersebut akan meminta browser untuk menampilkan teks dengan format tebal. Selain itu, tag ditulis secara berpasangan, yaitu tag pembuka dan tag penutup. Pada tag penutup ditambahkan garis miring (/) di depan nama tag. Tag HTML awalnya hanya berjumlah 18. Seiring berkembangnya jaman tag HTML sendiri sudah berjumlah lebih dari 250 tag. Namun tak perlu terlalu banyak menghafal tpi hanya perlu mengingat beberapa tag saja, seperti berikut :

Element dalam HTML

elemen html merupakan komponen html yg berupa keseluruhan kode dari tag

contoh : <bold>Belajar HTML</bold>.

jadi emlement itu kumpulan dari banyak tag. Element tersebut disebut nested element

contoh :

<html> <body> <h2>Judul Heading</h2> <p>Paragraf pertama artikel.</p> </body> </html>

Atribut

Atribut adalah informasi atau perintah tambahan yang berad dalam elemen. Fungsi dari atribut sendiri ialah penjelasan perintah tag pada elemen

contoh : <img src=”gambar.jpg” alt “Bunga Matahari.”>.

Tag <img> memiliki atribut kusus yaitu <src> dan <alt> yang berarti browser harus menampilkan gambar.jpg dengan alt text "Bunga Matahari"

jumlah atribut dalam tag bisa lebih dari satu. Meski demikian, tidak semua atribut bisa digunakan dalam sebuah tag. berikut kenis atribut kusus beberapa tag:

Atribut	Dapat digunakan pada Tag
src	<img>, <embed>, <audio>, <iframe>
href	<a>, <link>
action	<form>
autoplay	<audio>, <video>

Perintah dalam HTML

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.

Unordered List

<ul>

<li>Software</li>

<li>Hardware</li>

<li>Brainware</li>

</ul>

<li>Software</li>

<li>Hardware</li>

<li>Brainware</li>

</ul>

<li>Software</li>

<li>Hardware</li>

<li>Brainware</li>

</ul>

Ordered List

<ol>

<li>Software</li>

<li>Hardware</li>

<li>Brainware</li>

</ol>

<li>Software</li>

<li>Hardware</li>

<li>Brainware</li>

</ol>

<li>Software</li>

<li>Hardware</li>

<li>Brainware</li>

</ol>

<li>Software</li>

<li>Hardware</li>

<li>Brainware</li>

</ol>

<li>Software</li>

<li>Hardware</li>

<li>Brainware</li>

</ol>

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.

<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.

Image

Audio

</audio>

Video

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/>

Jenis Kelamin : <br/>

<option>Perempuan</option>

</select>

<br/>

Alamat : <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.

hari ini saya latihan membuat website

dan ini merupakan hasi karya saya yg pertama mohon di maklumi karena saya masih pemula