1. Home
  2. html
  3. Belajar HTML Lengkap Untuk Pemula

Belajar HTML Lengkap Untuk Pemula

October 11, 2018
Oke, seperti janji admin sebelumnya (Baca : Coba 10 text editor ini dan menulislah kode Seperti seorang Profesional), Admin 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 www.codekaryo.blogspot.com)



(Baca Juga : Belajar Tag HTML untuk Pemula )

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://codekaryo.blogspot.com/">

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

Kode Karyo

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.jpg" alt="Gambar Rusak" width="150" height="340"></body></html>

Hasilya seperti dibawah ini

Gambar

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> Ini adalah text Normal Seperti biasanya </p><br><p><b> Ini adalah teks dengan format Bold </b></p><br><p><strong>  Ini adalah elemen yang didefiniskan teks yang kuat </strong></p><br><p><i> Ini adalah teks dengan format italic </i></p><br><p><em> Ini adalah element empharized yang berarti teks penting <em></p><br><p><small> Ini adalah teks dengan format kecil </small></p><br><p><mark> Ini adalah teks dengan warna yang di block </mark> dan tidak </p><br><p>ini adalah format yang <del> Dihapus </del></p><br><p> Ini adalah teks yang <ins> dimasukkan </ins></p><br><p> Ini adalah teks <sub> Subscripted </sub> HTML </p><br><p> Ini adalah teks <sup> Superscript </sup> HTML </p><br></body></html>

Hasilnya seperti di bawah ini
Ini adalah text Normal Seperti biasanya


Ini adalah teks dengan format Bold


Ini adalah elemen yang didefiniskan teks yang kuat


Ini adalah teks dengan format italic


Ini adalah element empharized yang berarti teks penting


Ini adalah teks dengan format kecil


Ini adalah teks dengan warna yang di block dan tidak


ini adalah format yang
Dihapus


Ini adalah teks yang
dimasukkan


Ini adalah teks Subscripted HTML


Ini adalah teks Superscript HTML


Gak usah dijelasin kalian pasti sudah peka dong ya...

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. 

Comments

Subscribe to: Post Comments ( Atom )