Kali ini saya akan berbagi tentang HTML. Apa sih tuh HTML?? HTML atau HyperText Markup Language adalah sebuah bahasa standar yang digunakan oleh browser Internet untuk membuat halaman dan dokumen pada sebuah Web yang kemudian dapat diakses dan dibaca layaknya sebuah artikel.
Seperti yang diajarkan disekolah saya , kami menggunakan software WampServer yang dapat didownload gratis di berbagai situs.
Kalo sudah download instal aja yah, saya sih di Local Disk C. Sebagai pemula agar lebih mudah buka Local Disk C buka wamp klik www kemudian hapus 2 file yang ada di www.
Lalu buka notepad, di notepad ini lah kita akan mengetikkan kode-kode html tersebut. Pertama save notepad di www tadi kemudian beri nama latihan1.html.
Setelah itu ketik di notepad kode html seperti dibawah ini :
<html></html> Selalu berada diawal dan diakhir dari file HTML
<title></title> Untuk memberikan title pada HTML yang harus selalu ada pada header.
<head></head> Untuk memberikan Judul halaman HTML
<body></body> Untuk isi dari halaman HTML
Di Mozilla akan jadi seperti ini nih :
Kalimat Hello Aja ini nantinya tidak akan tampak dihalaman website, tapi akan muncul di browser seperti contoh dibawah ini: Lihat Arah Panah
<h1> Hello HTML! </h1> ukuran teks besar atau kecil . Jadi seperti <h1> <h2> <h3> dan seterusnya. Semakin besar angka maka semakin kecil pula tulisannya.
<br /> untuk baris baru (enter)
<b>Ini file HTML</b> fungsinya untuk menebalkan tulisan
<u> cetak bawah
<i> miring
Kemudian untuk menambahkan garis batas, tambahkan <hr/> , akan menjadi seperti dibawah ini:
Membuat tulisan rata tengah : <h1 align ="center">Hello HTML !</h1>
Menambahkan beberapa atribut seperti kode html ini:
Maka halaman HTML seperti ini :
Ada tambahan juga nih. Tentang tag <div>
Div adalah sebuah pembatas
suatu daerah dari sebuah rangkaian html (bisa berupa tulisan, gambar, atau kode lainnya).
Namun bila kita berikan kode seperti :
<div> Desy Mayang Sari</div>
hasilnya :
Desy Mayang Sari
Maka tidak akan ada terlihat perbedaan dengan teks biasa. Tetapi akan sangat berbeda apabila tag DIV digabungkan dengan elemen CSS yang berguna untuk memberikan gaya tampilan dari dokumen HTML yang kita buat. Supaya tag div nanti menjadi berbeda maka kita akan memberi atribut
style pada tag div tersebut seperti ini,
<div style="">.
Dengan atribut
style berarti membahas masalah penampilan, dan dengan atribut ini secara tidak langsung kita akan masuk kedalam elemen CSS. Tapi sebaiknya kita membahas
style aja dulu.
Dengan atribut
style kita akan menambahkan atribut yang lainnya. Seperti dibawah ini:
- background:url gambar atau warna
- border:ukuran pixel atau ditambahkan warna
- margin:ukuran pixel
- padding:ukuran pixel
- color:warna huruf
- font-size:ukuran huruf
- text-align:jenis perataan huruf
Kita akan membahas secara singkat satu persatu dari atribut tersebut
Background, yang akan kita bahas dengan atribut color atau warna, bahasan dengan atribut gambar nanti akan kita bahas lagi dibagian akhir, contoh kita akan menggunakan warna dasar pink, contoh penggunaanya:
<div style="background:pink; "> Desy Mayang Sari </div>
hasilnya sepeti dibawah ini :
Lalu tambahkan atribut
border yang akan diberi nilai
blue, dengan ketebalan garis 2 pixel, untuk memberi garis tepi, bentuknya seperti ini
border 2px solid blue; tapi jika ingin garis tepinya berbentuk titik-titik, bentuknya akan seperti ini,
border:2px dotted blue;. penambahannya seperti ini
<div style="background:pink; border:2px solid blue; "> Desy Mayang Sari
</div>
Hasilnya akan seperti ini:
Kemudian tambahkan
padding supaya hurufnya tidak menempel pada garis, nah inilah fungsi dari
padding, kita akan memberi jarak
10 pixel dari tulisan ke garis tepi, bentuknya seperti ini
padding:10px;seperti ini:
<div style="background:pink; border:2px solid blue; padding:10px; "> Desy Mayang Sari</div>
Hasilnya akan seperti ini:
Menambahkan gambar sebagai background,
yaitu : background:url( alamat gambar ); Contoh:
<div style="background:url(http://kumisjaim.web.id/wp-content/uploads/2011/05/pink-colour.jpg);border:2px solid blue;padding:10px;"> Desy Mayang Sari </div>
Hasilnya:
Wah.. Jadi cantik dengan warna pink. Nah sekian postingan dari saya. Semoga bermanfaat ya. Maaf kalo ada yang salah-salah. ^^
