Beranda » html » Belajar HTML Lengkap Untuk Pemula

Belajar HTML Lengkap Untuk Pemula

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