Apa itu HTML?
HTML ( Hyper Text Markup Language ) merupakan bahasa standar pemprograman untuk membuat sebuah halaman web yang terdiri dari kode-kode atau tag-tag singkat pada web. Sekumpulan kode-kode atau tag-tag tadi dapat dituliskan dalam sebuah file yang dimaksudkan untuk menampilkan halaman pada web browser. HTML mempunyai file ekstensi .htm atau .html. Dimana kedua ekstensi tersebut adalah sama, jadi kalian boleh menyimpan file dokumen HTML dengan ektensi .htm atau .html .Tag-tag HTML selalu diawali dengan <a> seperti <br>, <input> dan lainnya.Cara Menggunakan HTML
Untuk menggunakan HTML dan untuk menuliskan kode-kode atau tag-tag HTML kalian bisa menggunakan Text Editor seperti Notepad, Sublime Text, PHP Designer dan lainnya. Contoh penggunaan Tag HTML| Contoh Penerapan HTML | Hasil Kode |
| <b>Ini tulisan tebal</b> | Ini tulisan tebal |
| <i>Ini tulisan miring</i> | Ini tulisan miring |
| <u>Ini tulisan bergaris bawah</u> | Ini tulisan bergaris bawah |
| Ini baris 1<br>Ini baris 2 | Ini baris 1 Ini baris 2 |
| Ini garis horizontal <hr> | Ini garis horizontal
|
Contoh Penggunaan Tag HTML Dengan Warna
| Contoh Penerapan HTML | Hasil Kode |
| <font color=”black” face=”Arial” size=”12”>Ini Font Arial berwarna merah dan berukuran 12 pt</font> | Ini Font Arial berwarna merah dan berukuran 12 pt |
Tag HTML Utama yang harus kalian ketahui
| Tag HTML | Atribut Atau kode | Fungsi |
| <html>...</html> | Baris paling atas dari setiap file HTML | |
| <head>...</head> | Digunakan untuk memberikan informasi tentang dokumen | |
| <body>...</body> | background bgcolor bgsound font link alink vlink topmargin leftmargin marginheight marginwidth | untuk menentukan bagaimana isi suatu dokumen ditampilkan di web browsernya. Isi dokumen tersebut dapat berupa teks, gambar, animasi, link, dan lainnya. |
Seletah kalian hapal kode HTML diatas sekarang mari kita lanjutkan untuk menuliskan kode HTML tersebut ke dalam notepad atau program lainnya.
Untuk yang pertama kita buat dahulu Hello Word!
Kalian ketik kode dibawah ini di program notepad atau sublime text ingat jangan di copy paste !! jika kalian copy paste kapan kalian dapat menggingat atau bisa menggunakan kode programer tersebut..
Jika sudah diketik kalian simpan dengan cara Save as, pilih all files buat yang pakai notepad agar file tersebut tidak berbentuk text melainkan html jadi simpan seperti contoh_kode.html. Lalu kalian buka kode htmlnya dengan double klik atau drag and drop ke browser mozilla atau yang lainnya.
Dan hasilnya akan terlihat seperti gambar berikut Meski
masih belum terlihat bagus akan tetapi jika kalian sudah hapal maka kalian dapat mengkreasikannya sendiri dengan begitu kalian akan lebih mudah lagi membuat kode-kode HTML.
Sekarang mari kita tambahkan kode <p> pada kode Hello Word!! , kode <p> ini adalah paragrap dari text jadi kita tambahkan biar Hello Word!! diatas ada paragrapnya.
seperti biasa kalian buka notepat atau alat syntak lainnya dan ketik kode dibawah ini
Setelah kalian ketik kode diatas maka kita jalankan kodenya seperti yang pertama
Nah sekarang mari kita lanjutkan lagi menjadi beberapa kata agar kode diatas menjadi banyak dan tentu saja kalian harus sudah hapal kode-kode diatas untuk daftar kodenya bisa dilihat dulu dibawah ini.
Kode ini adalah kode table kalian sudah bisa melihatnya dari tadi pastinya karena saya menggunakan beberapa kode table untuk membuat informasi seperti diatas hanya saja tanpa css jadi hanya kode HTML table saja.
Nah sekarang kalian bisa variasikan kode-kode diatas dengan kemampuan kalian seperti kode <b>, <i>, <u> nah dan seperti biasa kalian harus menyimpannya pada bentuk .html dengan begitu kodenya dapat dijalankan.
Untuk ingin melihat kode html lebih lengkap kalian klik saja link ini Kamus HTML
Dan sekian artikel ini menggenai Apa Itu HTML dan Bagaimana Menggunakannya, nah pastinya saya akan bahas lagi menggenai HTML nantinya so jadi tunggu apalagi klik berlangganan untuk mendapatkanya lebih cepat agar kalian lebih hapal lagi menggenai HTML nantinya.
Untuk yang pertama kita buat dahulu Hello Word!
Kalian ketik kode dibawah ini di program notepad atau sublime text ingat jangan di copy paste !! jika kalian copy paste kapan kalian dapat menggingat atau bisa menggunakan kode programer tersebut..
<html>
<head>
<title> Hello Word!! </title>
</head>
<body>
<h1> Hello Word!! </h1>
</body>
</html>
Jika sudah diketik kalian simpan dengan cara Save as, pilih all files buat yang pakai notepad agar file tersebut tidak berbentuk text melainkan html jadi simpan seperti contoh_kode.html. Lalu kalian buka kode htmlnya dengan double klik atau drag and drop ke browser mozilla atau yang lainnya.
Dan hasilnya akan terlihat seperti gambar berikut Meski
masih belum terlihat bagus akan tetapi jika kalian sudah hapal maka kalian dapat mengkreasikannya sendiri dengan begitu kalian akan lebih mudah lagi membuat kode-kode HTML.
Sekarang mari kita tambahkan kode <p> pada kode Hello Word!! , kode <p> ini adalah paragrap dari text jadi kita tambahkan biar Hello Word!! diatas ada paragrapnya.
seperti biasa kalian buka notepat atau alat syntak lainnya dan ketik kode dibawah ini
<html>
<head>
<title> Hello Word!! </title>
</head>
<body>
<h1> Hello Word!! </h1>
<p> Ini Adalah Paragrap, kalian isi sesuai kata masing masing </p>
</body>
</html>
Setelah kalian ketik kode diatas maka kita jalankan kodenya seperti yang pertama
Nah sekarang mari kita lanjutkan lagi menjadi beberapa kata agar kode diatas menjadi banyak dan tentu saja kalian harus sudah hapal kode-kode diatas untuk daftar kodenya bisa dilihat dulu dibawah ini.
Modifikasi Teks
| Tag HTML | Atribut Atau kode | Fungsi |
| <b>...</b> | Teks tebal | Teks tebal |
| <i>...</i> | Teks miring | Teks miring |
| <ul>...</ul> | Teks garis bawah | |
| <pre>...</pre> | Preformatted teks | Contoh teks |
| <h1>...</h1> | Header 1 | Header |
| <h2>...</h2> | Header 2 | Header |
| <h3>...</h3> | Header 3 | Header |
| <h4>...</h4> | Header 4 | Header |
| <h5>...</h5> | Header 5 | Header |
| <h6>...</h6> | Header 6 | Header |
| <sub>...</sub> | Subscript | Subscript |
| <sup>...</sup> | Superscript | Superscript |
Front
| Tag HTML | Atribut Atau kode | Fungsi |
| <font>...</font> | color,size,name | Mengubah gaya suatu huruf. |
Links
| Tag HTML | Atribut Atau kode | Fungsi |
| <a>...</a> | href target style class name id | Membuat link ke dokumen atau situs lainnya. |
Gambar/IMG
| Tag HTML | Atribut Atau kode | Fungsi |
| <img> | src alt name border height width | Menampilkan sebuah gambar |
Formatting
| Tag HTML | Atribut Atau kode | Fungsi |
| <blockquote>...</blockquote> | Digunakan untuk mengatur text dan gambar dalam suatu tag | Sample of text in a block quote format |
| <ol> </ol> | Ordered List (digunakan dengan <li>) | 1. Item 1 |
| <ul> </ul> | Unordered List (digunakan dengan <li>) | • Item 1 |
| <li> | Element list | |
| <dd>...</dd> <dt> <dd> <p> | Definition List Definition Term Definition Description Paragraf | Sample text Sample text Sample text Sample text |
| <br> | Ganti baris | Sample text |
| <hr> | Garis horizontal | |
| <center>...</center> | Menengahkan elemen | Sample |
Tabel
| Tag HTML | Atribut Atau kode | Fungsi |
| <table>...</table> | border cellpadding cellspacing width height name id title bgcolor background align valign | Mengatur semua elemen table |
| <tr>...</tr> | height bgcolor background align valign title | Membuat baris baru |
| <td>...</td> | height width bgcolor background align valign title colspan rowspan | Membuat kolom |
| <th>...</th> | height width bgcolor background align valign title colspan rowspan | Header(kepala tabel). Otomatis ke tengah dan tebal |
| <tbody>...</tbody> | height width align valign bgcolor background | Format yang berlaku bagi cell yang diapit tag. |
| <colgroup>...</colgroup> | height width align valign bgcolor background colspan | Format yang berlaku bagi kolom |
Nah sekarang kalian bisa variasikan kode-kode diatas dengan kemampuan kalian seperti kode <b>, <i>, <u> nah dan seperti biasa kalian harus menyimpannya pada bentuk .html dengan begitu kodenya dapat dijalankan.
Untuk ingin melihat kode html lebih lengkap kalian klik saja link ini Kamus HTML
Dan sekian artikel ini menggenai Apa Itu HTML dan Bagaimana Menggunakannya, nah pastinya saya akan bahas lagi menggenai HTML nantinya so jadi tunggu apalagi klik berlangganan untuk mendapatkanya lebih cepat agar kalian lebih hapal lagi menggenai HTML nantinya.