Membuat Halaman Web HTML Sederhana dengan CSS | Belajar CSS Dasar #2

Fitrah Izul Falaq Januari 15, 2014
Assalamu’alaikum Wr. Wb.
Salam Blogger !


Saat diriku lihat blogku ini ternyata artikel-artikel tentang tutorial sangat minim ditemukan. Terasa aneh dan asing sih sebenarnya, oleh karena itulah pada postingan kali ini saya akan melanjutkan tutorial sebelumnya tentang “Belajar CSS Dasar”. Jika tutorial sebelumnya yaitu memberikan sedikit materi dan pengenalan tentang CSS saja (Cek : Pengenalan CSS | Belajar CSS Dasar #1). Sekarang diriku akan memperkenalkan tentang cara mengaplikasikannya, tentu yang masih sangat sederhana. :D

Dalam materi sebelumnya sudah disinggung tentang penulisan script CSS nya kan ? Sekarang langsung saja di praktekkan. Pada tutorial ini diriku memberi contoh penulisan tag sederhana yaitu tag p (Paragragh) dan tag h1 (Heading).

Ketikkan script ini tepat diatas tag (Jika dirimu malas mengetikkan ulang, bisa di copy paste saja)

<style type="text/css">
h1{color:#FFFFFF;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
text-align:center;
}
p{color:#FFFFFF;
font-style:italic;
text-align:justify;
}
</style>
Kemudian buatlah halaman HTML sederhana dengan menggunakan tag p dan tag h1. Setelah itu jangan lupa disimpan dan lihat hasilnya. Secara otomatis ketika anda mengetikkan tag p saja maka formatnya akan mengikuti script CSS berbeda dengan penulisan tag HTML yang ada di dalam tag.

Bagi anda yang masih bingung, dapat mencoba code HTML di bawah ini :

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Membuat File HTML Sederhana Menggunakan CSS | Belajar CSS Dasar #2</title>
<style type="text/css">
h1{color:#FFFFFF;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
text-align:center;
}
p{color:#FFFFFF;
font-style:italic;
text-align:justify;
}
</style>
</head>
<body bgcolor="#000000">
<h1>Ini adalah HEADING yang menggunakan CSS</h1>
<p>Deskripsi ini juga menggunakan CSS. Dengan diberlakukannya file CSS tersebut, kita tidak perlu di repotkan lagi untuk mengetikkan format yang kita inginkan. Dengan CSS semua format akan mengikuti apa yang telah di buat di script nya.</p>
<p>Ketika disini saya mengetikkan tag p yang baru, formatnya akan sama dengan yang ada diatas...</p>
</body>
</html>
Selamat mencoba, Keep Trying Don’t Crying. Fitrah Izul Falaq akan tetap ada disini.... ;)

NB : Kalau masih ada yang sulit dan perlu ditanyakan, silahkan berkomentar atau hubungi saya di contact person.
IDBT
 Reviewed by Useron 15 January 2014
 Rating: 5
Fitrah Izul Falaq

Diposting oleh Fitrah Izul Falaq

Posting Komentar

1 Komentar