Dalam dunia blogging, selain konten desain juga memiliki peran penting. Keindahan dalam blog itu terletak pada desain/templatenya. Oleh karena itu keahlian dalam html/css juga penting untuk di pelajari. Tidak perlu sampai ke tingkat yang sulit, tapi yang dasar-dasar sudah lebih dari cukup, daripada tidak sama sekali.
Apa itu HTML?
HTML ( Hyper Text Markup Language ) adalah sebuah bahasa markah yang digunakan untuk membuat halaman website, menampilkan berbagai informasi di dalam sebuah penjelajah web
Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas
format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi.
Kegunaan HTML
1. Mengintegrasikan gambar dengan tulisan
2. Membuat pranala
3. Mengintegerasikan berkas suara dan rekaman gambar hidup
4. Membuat form interaktif, dan masih banyak lagi.
Contoh dokumen HTML sederhana
<!DOCTYPE html>
<html>
<head bgcolor=black text=white>
<title>'''Selamat Datang''' HTML</title>
</head>
<body>
<p>Halo dunia!</p>
</body>
</html>
d
Bagian utama html terdiri dari <html>...<html>.
Dan didalamnya terdapat <head></head> dan <body></body>.
Head adalah bagian awal html. Biasanya head berisi <title></title> serta tag META
Apa itu CSS?
CSS ( Casecading Style Sheet ) merupakan sebuah bahasa pemrograman yang fungsinya untuk menstrukturkan
komponen-komponen web yang beragam sesuai dengan keinginan kita.
HTML dan CSS sangat berkaitan. Jadi kita tidak bisa menggunakan css tanpa html, tapi kita bisa menggunakan html tanpa css.
Cara menggunakan css ada tiga cara, pertama yaitu:
1. Eksternal Style Sheet
Cara ini idealnya diterapkan pada banyak halaman. Kita hanya mengincludnya saja. Contoh penerapan:
<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css” />
</head>
Untuk file cssnya tertulis di halaman mystyle.css
2. Internal Style Sheet
merupakan dokumen tunggal html harus digunakan apabila dokumen tunggal html memiliki gaya yang unik. Biasnya terletak diantara tag head.
<head>
<style type=”text/css”>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url(“images/back40.gif”);}
</style>
</head>
3. Inline Style
Gaya inline dengan mencampurkan konten dengan presentasi akan banyak
kehilangan keuntungan, maka anda dapat menggunakan cara seperti dibawah ini:
<p style=”color:sienna;margin-left:20px”>This is a paragraph.</p>
Contoh penggunaan CSS (disini saya memakai cara inline style):
<div style="border-left: 5px solid red;
color: red; font-family: arial; font-size: 10px; padding: 10px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo:
</div>
Hasilnya akan seperti dibawah ini:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo:
Demikian artikel tentang belajar html dan css sederhana. Semoga bermanfaat bagi teman-teman semua.
Sumber referensi:
Id.wikipedia.org
Tutorial.belajarweb.net