Oke, seperti janji admin sebelumnya
(
Baca : Coba 10 text editor ini dan menulislah kode Seperti seorang Profesional),
Bang dibul akan memberikan tutorial HTML secara lengkap.
Jadi.. Untuk kalian yang sudah baca sampai sini saya sarankan untuk mencari tempat baca atau tempat yang nyaman, Karena artikel saya akan lumayan panjang. Hehehehe
Tenang aja, Admin tahu kok.. Mengapa kalian mau belajar HTML
(Ada yang pengen buat halaman Web, ada yang hanya ingin kelihatan keren, dan ada juga yang cuma penasaran)
Untuk belajar Kode yang harus kalian persiapkan ada 4 :
1. Niat
2. sebuah web browser entah itu Mozilla Firefox, Google Chrome, UC Browser dsb.
3. Text Editor ( Yang sudah dijelaskan di Artikel Sebelumnya)
4. Sedikit materi (Yang bisa kalian pelajari di Blog ini)
(
Baca Juga : Belajar Pemrograman Web dari Pemula Sampa Mahir )
Tapi diantara tag HTML yang paling penting adalah
<!DECOTYPE HTML><html>
<head><title> ... </title></head><body><h2> Isi </h2> </body> </html>
Sekarang coba tuliskan Kode dibawah ini di text editor kalian masing-masing
Save dengan format
dasar.html
<!DECOTYPE HTML><html>
<head><title> Latihan 1 </title></head><body><h2> Belajar HTML </h2> <p> Web ini digunakan khusus untuk latihan web dengan menggunakan HTML <br>Kami berlatih code web ini dari <a href="https://bangdibul.blogspot.com/">
Bang Dibul </a></body></html>
Nanti hasilnya akan menjadi seperti dibawah
Belajar HTML
Web ini digunakan khusus untuk latihan web dengan menggunakan HTML
Kami berlatih code web ini dari
Bang Dibul
Ket :
| DECOTYPE | Untuk mendeklarasikan jenis dikumen menjadi HTML |
| <html> </html> | Untuk menggambarkan dokumen HTML |
| <head> </head> | Untuk memberikan informasti tentang dokumen |
| <title> </title> | Menyediakan Judul untuk dokumen |
| <body> </body> | Menggambarkan isi halaman yang terlihat |
| <h2> </h2> | Digunakan untuk menggambarkan sebuah heading |
| <p> <p> | Menggambarkan sebuah paragraf |
| <a href=""> </a> | Digunakan untuk mengaitkan sebuah link |
| <br> | (Break) Untuk memisahkan sebuah paragraf |
Nb : <h2> itu hanya sebagian, kalian bisa ganti <h1>, <h2> ..... <h6>
Semakin banyak angka di belakang <h maka Font Headernya semakin kecil.. begigtu juga sebaliknya
Gak percaya ? Coba aja : Klik Disini
Banyak pemula yang bertanya kepada admin, Kok hurufnya DECOTYPE besar.. q coba huru kecil kok bisa ?
Decotype itu tidak sensitif kaya cewek :)
Kamu mau buat <!DECOTYPE html> , <!DECOTYPE HTML> , <!decotype html>, <!Decotype Html> Semua keterima kok..
Lanjut Materi Berikutnya
A. Memasukan Gambar di HTML
Gambar di HTML didefinisikan dengan tag <img>, File sumber ( src ), alternatif teks ( alt ) dan ukuran ( width and height )
Contoh :
Untuk mempermudah latihan kita ( Download gambar disini )
Masukkan Kode dibawah dan simpan dengan judul gambar.html
<!DECOTYPE html><html><head><title> Gambar </title></head><body><img src="latihan.jpeg" alt="Gambar Rusak" width="150" height="340"></body></html>
Hasilya seperti dibawah ini
bang Aku ada problem nih..
"Gambarku kok tidak muncul ya, gambarku kok gini ya"
B. Menformat Elements di HTML
Supaya lebih cepet jelasnya, ada baiknya kalian langsung praktik.. Tulis Kode dibawah ini
dengan judul
format.html
<!DECOTYPE html><html><head><title> Format Element </title></head><body><p> 1--> Ini adalah text Normal Seperti biasanya </p><br><p>2--><b> Ini adalah teks dengan format Bold </b></p><br><p>3--><strong> Ini adalah elemen yang didefiniskan teks yang kuat </strong></p><br><p>4--><i> Ini adalah teks dengan format italic </i></p><br><p>5--><em> Ini adalah element empharized yang berarti teks penting <em></p><br><p>6--><small> Ini adalah teks dengan format kecil </small></p><br><p>7--><mark> Ini adalah teks dengan warna yang di block </mark> dan tidak </p><br><p>8-->ini adalah format yang <del> Dihapus </del></p><br><p>9--> Ini adalah teks yang <ins> dimasukkan </ins></p><br><p>10--> Ini adalah teks <sub> Subscripted </sub> HTML </p><br><p>11--> Ini adalah teks <sup> Superscript </sup> HTML </p><br></body></html>
Hasilnya seperti di bawah ini
1-->Ini adalah text Normal Seperti biasanya
2-->
Ini adalah teks dengan format Bold
3-->
Ini adalah elemen yang didefiniskan teks yang kuat
4-->
Ini adalah teks dengan format italic
5-->
Ini adalah element empharized yang berarti teks penting
6-->Ini adalah teks dengan format kecil
7-->Ini adalah teks dengan warna yang di block dan tidak
8-->ini adalah format yang
Dihapus
9-->Ini adalah teks yang
dimasukkan
10-->Ini adalah teks
Subscripted HTML
11-->Ini adalah teks
Superscript HTML
Gak usah dijelasin kalian pasti sudah peka dong ya... yups.
C. Quotation dan Citation Elements
| <abbr> | Mendefinisikan sebuah singkatan atau akronim |
| <address> | Mendefinisikan informasi kontak untuk penulis atau pemilik dokumen |
| <bdo> | Mendefinisikan arah teks |
| <blockquote> | Menggambarkan isi halaman yang terlihat |
| <cite> | Mendefinisikan judul karya |
| <q> | Mendefinisikan sebuah kutipan inline singkat |
(Baca juga : Contoh Quotation dan Cition Element )
D.
Belum ada tanggapan untuk "Belajar HTML Lengkap Untuk Pemula"
Posting Komentar