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