Latihan161214

Latihan Membuat HTML

Banyak software yang bisa digunakan untuk membuat HTML seperti Notepad++ atau Dream Weaver, namun kali ini saya akan berbagi cara membuatnya menggunakan Notepad bawaan Windows.
Lihat penjelasannya dibawah ini.

1.Pertama-tama kalian ketik dinotepad seperti gambar diwabah ini :

2. Kemudian save as dengan nama sesuai dengan yang kalian inginkan (kalo saya sih latihan.html). serta jangan lupakan ".html" dibelakangnya. pilih tempat save as di My Computer > Local Disk C : > Xampp > htdoc > save as

3. Buka notepad baru untuk membuat keluaran dari apa yang kita input.

4. Ketik dinotepad seperti gambar dibawah ini :

5. Kemudian save as dengan nama sesuai dengan yang kalian inginkan (kalo saya sih latihan.php). serta jangan lupakan ".php" dibelakangnya serta pilih all files. pilih tempat save as di My Computer > Local Disk C : > Xampp > htdoc > save as

6. Input deh. hasilnya dibawah ini :

dan ini hasil inputnya :

Fenomena Jilboobs Di Kalangan Remaja Islam

Fenomena Jilboobs Di Kalangan Remaja Islam

Jaman sekarang,era-nya fashion yang semakin beragam dan menarik.Tidak cuma kalangan umum saja,bahkan umat islam pun mengikuti perkembangan fashion ini,khususnya pakaian untuk wanita.Sudah biasa kita melihat di tempat-tempat umum,wanita muslim mengenakan jilbab.Jilbab sendiri di artikan sebagai busana muslim yang bentuknya terusan panjang untuk menutupi seluruh anggota tubuh kecuali muka dan telapak tangan.

Jilbab itu di wajibkan bagi muslimah untuk memakainya dengan tujuan sebagai pelindung dan menjaga auratnya agar tidak di ganggu kaum pria.Ada yang menyebut Jilbab dengan istilah Hijab.Sebenarnya baik Jilbab maupun Hijab itu sama saja,hanya perbedaan cara menyebutnya saja.Mungkin di tempat ini disebut Jilbab,sedangkan di lain tempat disebut dengan Hijab.

Hijab/Jilbab kini fungsinya tak hanya untuk menutupi bagian tubuh yang seharusnya tertutup saja,melainkan telah banyak di kreasikan dengan bermacam model,mengikuti selera fashion saat ini.Tidak masalah juga jika Jilbab menjadi fashion,apalagi remaja putri sekarang suka dengan Jilbab yang unik dan menarik modelnya.Tapi sayangnya justru banyak ditemukan Jilbab yang bentuk/cara pemakaiannya tidak sesuai syariat agama.

Remaja muslim ingin dibilang gaul dan akhirnya memakai jilbab yang melenceng dari aturan agama.Ya memang,jilbab yang dikenakan itu menutupi bagian kepalanya,tapi coba perhatikan bagian bawahnya.Jilbab di kombinasikan dengan pakaian yang ketat,transparan dan membentuk lekukan tubuh.Belum lagi bawahnya yang sering memakai celana jeans atau celana panjang yang ketat.

Mereka yang memakainya nggak merasa kalau cara berjilbab mereka salah.Seolah-olah tidak menghiraukan jika pakaian yang membentuk lekuk tubuh itu jelas dilarang dipakai dalam agama islam.Jangan salahkan para lelaki kalau para tertarik dan menggoda wanita yang berjilbab seperti itu.Saking banyaknya pakaian Jilbab gaul seperti itu hingga muncul sebutan Jilboobs.

Jilboobs

Jilboobs kalau di artikan,terdiri dari 2 kata : Jil (kependekan kata Jilbab) dan Boobs (pasti sudah tau artinya).Miris memang melihat para Jilboobs ini berkeliaran dimana-mana.Mereka berjilbab tapi telanjang,kelihatannya memakai pakaian penutup tapi lekuk tubuhnya terlihat jelas semua.

Padahal dalam islam,sudah di terangkan secara jelas,bagaimana hukumnya jika mengenakan Jilbab dengan pakaian yang ketat,seperti dijelaskan pada sebuah hadis yang artinya :

“Ada dua golongan dari penduduk neraka yang belum pernah aku lihat: [1] Suatu kaum yang memiliki cambuk seperti ekor sapi untuk memukul manusia dan [2] para wanita yang berpakaian tapi telanjang, berlenggak-lenggok, kepala mereka seperti punuk unta yang miring. Wanita seperti itu tidak akan masuk surga dan tidak akan mencium baunya, walaupun baunya tercium selama perjalanan sekian dan sekian.” (HR. Muslim no. 2128)

Mereka para Jilboobs itu seharusnya memakai Jilbab bukan untuk ikut-ikutan fashion saja,karena percuma kalau pakai Jilbab tapi jadinya tidak sesuai aturan agama.Lalu bagaimana Jilbab yang sesuai syariat islam itu? Berikut ini ada beberapa ciri Jilbab yang sesuai dengan ajaran islam :

1. Menutup seluruh anggota tubuh kecuali muka dan kedua telapak tangan

2. Tidak berfungsi sebagai perhiasan

3. Kainnya tebal,tidak tipis dan transparan

4. Tidak boleh ketat,harus longgar

5. Tidak diberi wewangian/parfum

6. Tidak menyerupai pakaian wanita kafir

7. Tidak membentuk seperti punuk unta

 

PEMAHAMAN PHP

Penjelasan PHP

PHP (Hypertext Prosesor) adalah sebuah bahasa pemrograman yang dapat disisipkan pada sebuah HTML. Bahasa ini digunakan untuk pembuatan website dinamis. Sehingga bahasa ini digunakan oleh banyak CMS seperti wordpress.

Menurut pemahaman saya, PHP merupakan sebuah bahasa penghubung antara file html dengan database. Sehingga dapat sebuah halaman website dapat menjadi dinamis. Berbeda dengan html yang bersifat statis dan cenderung tetap. Dengan bantuan PHP kita bisa membuat sebuah halaman berubah-ubah, bukan hanya tampilan, tetapi juga kontennya.

Mulai Belajar Dasar PHP

Untuk memulai belajar php, kita harus install aplikasi web server terlebih dahulu. Saya menggunakan LAMPP di Ubuntu untuk web server. Untuk windows mungkin bisa menggunakan XAMPP. Sedangkan untuk Mac, mungkin bisa mengunakan MAMP. Kalau belum punya, bisa download LAMPP maupun XAMPP pada link di bawah ini

• Download XAMPP / LAMPP

Untuk pengguna Ubuntu, kalau masih bingung cara install lampp bisa ikuti tutorial install lampp di Ubuntu. Setelah melakukan instalasi web server, jalankan web server yang sudah terinstall dan simpan semua file dengan format php pada folder htdocs yang bisa kamu temukan pada folder instalasi web server. 

Selain itu, akses file php tersebut di browser dengan alamat localhost/namafile.php. Kalau kamu membuat sebuah folder pada folder htdocs, kamu bisa akses filenya dengan alamat localhost/namafolder/namafile.php

Pastikan web server sudah menyala terlebih dahulu sebelum memanggil kode php

Tag PHP

Sebuah script php diawali dan diakhiri oleh sebuah tag. Berikut tag sebuah script php

<?
kode script php
?>

Kode diatas merupakan tag pembuka dan penutup sebuah script php. Jadi pastikan kode php yang kamu gunakan berada di dalamnya.

Menampilkan Text dalam PHP

Untuk menampilkan sebuah text  dalam kode php, kita menggunakan perintah yang namanya echo. Berikut cara menampilkan text yang ada dalam PHP

 echo "Hallo Teman"

Sedangkan untuk menampilkan tag html dalam sebuah file php, kita bisa gunakan perintah di bawah ini

echo "<br>"

Membuat dan Menampilkan Variabel

Dalam sebuah file html kita bisa membuat sebuah variabel untuk menyimpan data. Untuk membuat dan menggunakan sebuah variabel bisa menggunakan kode di bawah ini

 $belajar="belajar dasar pemrograman php";

echo $belajar;

Dengan kode diatas dalam variabel belajar ada kata belajar dasar pemrograman php. Untuk menampilkan kata tersebut, kita cukup menampilkan variabel belajar.

Menggunakan Looping For dan While

Ada banyak cara yang bisa digunakan untuk membuat pengulangan atau yang biasa dikenal dengan looping. Diantaranya menggunakan fungsi for dan fungsi while. Apa fungsi masing-masing? 

Fungsi for banyak digunakan untuk pengulangan dengan jumlah maksimal yang sudah ditentukan. sedangkan untuk fungsi while, biasanya digunakan untuk pengulangan yang dibatasi oleh hasil jumlah baris sebuah array. 

Berikut contoh penggunan looping dengan for

for($i=1;$i<=10;$i++){
 echo $i." ";
}
echo "
";

Berikut contoh penggunaan looping dengan while

$x=1;
while($x<=10){
 echo $x;
 $x++;
}
echo "<br>";

Fungsi keduanya sebenarnya hampir sama perbedaannya hanya pada penggunaan. Menurut pemahaman saya, while digunakan untuk fungsi dengan variabel yang dinamis, sedangkan for untuk variabel yang sudah pasti. Mungkin ada yang lebih tahu? Tolong di koreksi apabila ada yang salah

PHP

Penjelasan PHP

PHP (Hypertext Prosesor) adalah sebuah bahasa pemrograman yang dapat disisipkan pada sebuah HTML. Bahasa ini digunakan untuk pembuatan website dinamis. Sehingga bahasa ini digunakan oleh banyak CMS seperti wordpress.

Menurut pemahaman saya, PHP merupakan sebuah bahasa penghubung antara file html dengan database. Sehingga dapat sebuah halaman website dapat menjadi dinamis. Berbeda dengan html yang bersifat statis dan cenderung tetap. Dengan bantuan PHP kita bisa membuat sebuah halaman berubah-ubah, bukan hanya tampilan, tetapi juga kontennya.

Mulai Belajar Dasar PHP

Untuk memulai belajar php, kita harus install aplikasi web server terlebih dahulu. Saya menggunakan LAMPP di Ubuntu untuk web server. Untuk windows mungkin bisa menggunakan XAMPP. Sedangkan untuk Mac, mungkin bisa mengunakan MAMP. Kalau belum punya, bisa download LAMPP maupun XAMPP pada link di bawah ini

• Download XAMPP / LAMPP

Untuk pengguna Ubuntu, kalau masih bingung cara install lampp bisa ikuti tutorial install lampp di Ubuntu. Setelah melakukan instalasi web server, jalankan web server yang sudah terinstall dan simpan semua file dengan format php pada folder htdocs yang bisa kamu temukan pada folder instalasi web server. 

Selain itu, akses file php tersebut di browser dengan alamat localhost/namafile.php. Kalau kamu membuat sebuah folder pada folder htdocs, kamu bisa akses filenya dengan alamat localhost/namafolder/namafile.php

Pastikan web server sudah menyala terlebih dahulu sebelum memanggil kode php

Tag PHP

Sebuah script php diawali dan diakhiri oleh sebuah tag. Berikut tag sebuah script php

<?
kode script php
?>

Kode diatas merupakan tag pembuka dan penutup sebuah script php. Jadi pastikan kode php yang kamu gunakan berada di dalamnya.

Menampilkan Text dalam PHP

Untuk menampilkan sebuah text  dalam kode php, kita menggunakan perintah yang namanya echo. Berikut cara menampilkan text yang ada dalam PHP

 echo "Hallo Teman"

Sedangkan untuk menampilkan tag html dalam sebuah file php, kita bisa gunakan perintah di bawah ini

echo "<br>"

Membuat dan Menampilkan Variabel

Dalam sebuah file html kita bisa membuat sebuah variabel untuk menyimpan data. Untuk membuat dan menggunakan sebuah variabel bisa menggunakan kode di bawah ini

 $belajar="belajar dasar pemrograman php";

echo $belajar;

Dengan kode diatas dalam variabel belajar ada kata belajar dasar pemrograman php. Untuk menampilkan kata tersebut, kita cukup menampilkan variabel belajar.

Menggunakan Looping For dan While

Ada banyak cara yang bisa digunakan untuk membuat pengulangan atau yang biasa dikenal dengan looping. Diantaranya menggunakan fungsi for dan fungsi while. Apa fungsi masing-masing? 

Fungsi for banyak digunakan untuk pengulangan dengan jumlah maksimal yang sudah ditentukan. sedangkan untuk fungsi while, biasanya digunakan untuk pengulangan yang dibatasi oleh hasil jumlah baris sebuah array. 

Berikut contoh penggunan looping dengan for

for($i=1;$i<=10;$i++){
 echo $i." ";
}
echo "
";

Berikut contoh penggunaan looping dengan while

$x=1;
while($x<=10){
 echo $x;
 $x++;
}
echo "<br>";

Fungsi keduanya sebenarnya hampir sama perbedaannya hanya pada penggunaan. Menurut pemahaman saya, while digunakan untuk fungsi dengan variabel yang dinamis, sedangkan for untuk variabel yang sudah pasti. Mungkin ada yang lebih tahu? Tolong di koreksi apabila ada yang salah

PHP

Penjelasan PHP

PHP (Hypertext Prosesor) adalah sebuah bahasa pemrograman yang dapat disisipkan pada sebuah HTML. Bahasa ini digunakan untuk pembuatan website dinamis. Sehingga bahasa ini digunakan oleh banyak CMS seperti wordpress.

Menurut pemahaman saya, PHP merupakan sebuah bahasa penghubung antara file html dengan database. Sehingga dapat sebuah halaman website dapat menjadi dinamis. Berbeda dengan html yang bersifat statis dan cenderung tetap. Dengan bantuan PHP kita bisa membuat sebuah halaman berubah-ubah, bukan hanya tampilan, tetapi juga kontennya.

Mulai Belajar Dasar PHP

Untuk memulai belajar php, kita harus install aplikasi web server terlebih dahulu. Saya menggunakan LAMPP di Ubuntu untuk web server. Untuk windows mungkin bisa menggunakan XAMPP. Sedangkan untuk Mac, mungkin bisa mengunakan MAMP. Kalau belum punya, bisa download LAMPP maupun XAMPP pada link di bawah ini

• Download XAMPP / LAMPP

Untuk pengguna Ubuntu, kalau masih bingung cara install lampp bisa ikuti tutorial install lampp di Ubuntu. Setelah melakukan instalasi web server, jalankan web server yang sudah terinstall dan simpan semua file dengan format php pada folder htdocs yang bisa kamu temukan pada folder instalasi web server. 

Selain itu, akses file php tersebut di browser dengan alamat localhost/namafile.php. Kalau kamu membuat sebuah folder pada folder htdocs, kamu bisa akses filenya dengan alamat localhost/namafolder/namafile.php

Pastikan web server sudah menyala terlebih dahulu sebelum memanggil kode php

Tag PHP

Sebuah script php diawali dan diakhiri oleh sebuah tag. Berikut tag sebuah script php

<?
kode script php
?>

Kode diatas merupakan tag pembuka dan penutup sebuah script php. Jadi pastikan kode php yang kamu gunakan berada di dalamnya.

Menampilkan Text dalam PHP

Untuk menampilkan sebuah text  dalam kode php, kita menggunakan perintah yang namanya echo. Berikut cara menampilkan text yang ada dalam PHP

 echo "Hallo Teman"

Sedangkan untuk menampilkan tag html dalam sebuah file php, kita bisa gunakan perintah di bawah ini

echo "<br>"

Membuat dan Menampilkan Variabel

Dalam sebuah file html kita bisa membuat sebuah variabel untuk menyimpan data. Untuk membuat dan menggunakan sebuah variabel bisa menggunakan kode di bawah ini

 $belajar="belajar dasar pemrograman php";

echo $belajar;

Dengan kode diatas dalam variabel belajar ada kata belajar dasar pemrograman php. Untuk menampilkan kata tersebut, kita cukup menampilkan variabel belajar.

Menggunakan Looping For dan While

Ada banyak cara yang bisa digunakan untuk membuat pengulangan atau yang biasa dikenal dengan looping. Diantaranya menggunakan fungsi for dan fungsi while. Apa fungsi masing-masing? 

Fungsi for banyak digunakan untuk pengulangan dengan jumlah maksimal yang sudah ditentukan. sedangkan untuk fungsi while, biasanya digunakan untuk pengulangan yang dibatasi oleh hasil jumlah baris sebuah array. 

Berikut contoh penggunan looping dengan for

for($i=1;$i<=10;$i++){
 echo $i." ";
}
echo "
";

Berikut contoh penggunaan looping dengan while

$x=1;
while($x<=10){
 echo $x;
 $x++;
}
echo "<br>";

Fungsi keduanya sebenarnya hampir sama perbedaannya hanya pada penggunaan. Menurut pemahaman saya, while digunakan untuk fungsi dengan variabel yang dinamis, sedangkan for untuk variabel yang sudah pasti. Mungkin ada yang lebih tahu? Tolong di koreksi apabila ada yang salah

Penjelasan CSS

HTML dan CSS Dasar

Pada bab-bab sebelumnya, kita telah berkenalan sekilas dengan dunia web. Sekarang kita akan langsung masuk dan mencoba membuat dokumen HTML sederhana, agar konsep-konsep yang telah dijelaskan sebelumnya menjadi lebih jelas.
Untuk menyegarkan pikiran, sebelum masuk ke dalam kode, kita akan melihat kembali perbedaan antara HTML dan CSS:

• HTML merupakan bahasa penanda yang digunakan untuk memberikan konten (teks) struktur dan makna semantik.
• CSS adalah bahasa yang digunakan untuk memberikan konten gaya penampilan yang bagus.

Contoh sederhananya, sebuah paragraf teks direpresentasikan dengan penanda lstinline{p} pada HTML. Memberikan penanda lstinline{p} pada konten dalam HTML berarti menandakan konten tersebut berada di dalam sebuah paragraf. CSS kemudian digunakan untuk menentukan ukuran teks, warna teks, spasi, dan berbagai gaya tampilan dari paragraf tersebut.
Oke, setelah pikiran anda segar kembali dengan konsep HTML dan CSS, mari kita lihat berbagai hal yang membuat dokumen HTML menjadi, emph{well}, dokumen HTML.

Elemen, Tag, dan Atribut

Sebelum masuk lebih jauh, kita akan melihat tiga istilah utama yang harus diketahui ketika menulis HTML. Ketiga istilah tersebut ialah elemen, tag, dan atribut.

Elemen

Elemen HTML merupakan komponen yang menetapkan peran sebuah objek dalam dokumen, termasuk struktur dan konten dari objek tersebut. Contoh dari sebuah elemen HTML ialah p ataupun b yang telah dicontohkan pada bagian-bagian sebelumnya. Elemen-elemen populer lain dalam HTML misalnya a, h1, div, span, em, ataupun strong.
Kode di bawah menunjukkan contoh dari elemen a yang digunakan untuk membuat hyperlink ke halaman lain:

<a>

Tag

Sebuah elemen biasanya direpresentasikan oleh tag. Tag pembuka menandakan elemen tersebut dimulai, dan tag penutup menandakan akhir dari sebuah elemen. Tag pembuka direpresentasikan dengan nama elemen yang diapit simbol “<>”, contohnya <a>. Tag penutup dituliskan dengan menambahkan garis miring (“/”) setelah simbol “<”. Misalnya, tag penutup untuk elemen a adalah </a>.
Berikut adalah contoh pengunaan tag a untuk membuat sebuah link:

<a>Ini adalah sebuah link</a>

Atribut

Atribut merupakan informasi tambahan yang dapat kita berikan untuk sebuah elemen. Setiap elemen memiliki atribut yang berbeda-beda, meskipun terdapat beberapa atribut standar yang dapat digunakan oleh semua elemen.
Atribut khusus elemen dibuat ketika nilai atribut tersebut memang hanya pantas digunakan untuk elemen tersebut. Misalnya, untuk elemen img yang digunakan untuk menampilkan gambar, terdapat atribut untuk menentukan di mana sumber gambar yang akan ditampilkan di simpan. Atribut ini tentunya tidak akan berguna untuk elemen p, yang hanya menampilkan teks.
Atribut standar yang dimiliki oleh semua elemen sendiri merupakan atribut yang umumnya dapat diimplementasikan oleh semua elemen, misalnya atribut “id” untuk identifikasi elemen, atau “class” untuk klasifikasi elemen.
Kode di bawah menunjukkan contoh elemen a yang digunakan dengan atribut wajib elemen tersebut (href):

<a href=``http://www.bertzzie.com''>Ini adalah sebuah link</a>

Kode di atas memberikan contoh atribut href yang dimiliki oleh elemen a. Atribut ini berguna untuk memberikan referensi hyperlink dari sebuah elemen (karenanya namanya “href” - hyperlink reference). Atribut-atribut yang dimiliki oleh tiap-tiap elemen akan dibahas lebih lanjut ketika pembahasan dari sebuah elemen dilakukan.

Struktur Dokumen HTML

Sebuah dokumen HTML memiliki struktur tertentu yang harus dipatuhi. Struktur minimal yang harus dimiliki sebuah dokumen HTML dapat dilihat pada kode di bawah:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>...</title>
  </head>
  <body>
    ...
  </body>
</html>  

Apa arti dari struktur tersebut? Mari kita lihat satu per satu.

Elemen DOCTYPE

• Digunakan untuk memberikan informasi kepada browser mengenai versi HTML yang digunakan oleh dokumen. Pada listing~ref{code:struktur-html}, versi HTML yang digunakan adalah HTML5.

Elemen HTML

• Elemen ini mengandung keseluruhan dokumen HTML, yang berarti tag pembuka elemen HTML merupakan tanda awal dokumen HTML, dan tag penutup adalah tanda akhir dokumen.

Elemen head

• Elemen head pada dokumen digunakan untuk menguraikan berbagai meta data (informasi yang berkaitan dengan dokumen), judul dokumen, dan tautan dokumen ke berkas-berkas eksternal. Berbagai data yang ada di dalam elemen head tidak akan nampak pada halaman web hasil tampilan browser.

Elemen title

• Memberikan judul dokumen.

Elemen body

• Elemen ini merupakan penampung dari isi konten dokumen yang akan ditampilkan kepada pengguna.

Untuk lebih jelasnya, buat sebuah file dengan nama pengenalan-html.html yang berisi kode berikut:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Pengenalan HTML</title>
  </head>
  <body>
    <h1>Berita Utama</h1>
    <p>
        Elemen h1 digunakan untuk menandakan sebuah header dari teks
        (h1 == header 1). Konten teks ini sendiri berada di dalam
        sebuah paragraf, yang ditandai oleh elemen p.
    </p>
    <p>
        Paragraf kedua.
    </p>
  </body>
</html>

Buka file tersebut pada browser (dapat dilakukan dengan klik dua kali, ataupun melalui menu File -> Open... pada browser).

Pemetaan Kode pengenalan-html.html dengan Hasil Tampilan

Gambar Pemetaan Kode pengenalan-html.html dengan Hasil Tampilan menunjukkan hasil tampilan dari kode pada pengenalan-html.html, beserta dengan pemetaan antara elemen HTML dengan tampilan hasil olahan browser.
Pada gambar Pemetaan Kode pengenalan-html.html dengan Hasil Tampilan dapat dilihat bahwa elemen title ditampilkan pada bagian atas browser, dan isi dari body ditampilkan seluruhnya oleh browser. Perhatikan juga bahwa terdapat jarak spasi antara elemen p pertama dengan elemen p kedua, sebagai pemisah antar paragraf. Secara otomatis browser dapat membaca bahwa terdapat dua paragraf, dan biasanya dua paragraf yang berbeda akan memiliki jarak. Seperti yang telah dijelaskan pada bagian Browser dan Kode Klien, jarak antar paragraf ini akan berbeda-beda, tergantung dengan browser yang digunakan. Perhatikan juga bahwa jarak antar p berbeda dengan jarak antara h1 dengan p. Hal ini dikarenakan elemen h1, sebagai kepala teks, dianggap memiliki makna khusus, sehingga harus ditonjolkan (dengan menebalkan dan memperbesar huruf, serta memberi jarak yang lebar antara elemen h1 dengan elemen-elemen lainnya).

Dasar CSS

Untuk dapat mengerti bagaimana menggunakan CSS, terlebih dahulu kita harus mengerti tiga istilah dasar yang digunakan dalam CSS, yaitu selector, property, dan value. Pembahasan mengenai makna dari ketiga istilah tersebut akan dilakukan pada bagian selanjutnya.

Selector

Sebagai bahasa yang digunakan untuk memberikan gaya tampilan, CSS menggunakan metode deklaratif untuk menspesifikasikan bagian HTML yang ingin diberikan gaya tampilan. Pemilihan elemen HTML dilakukan dengan menspesifikasikan selector. Kode di bawah memberikan contoh dari sebuah selector, yang dapat digunakan untuk memberikan gaya tampilan terhadap seluruh elemen p yang ada pada dokumen HTML:

p {
    ....
}

Pada kode di atas, yang dikatakan selector ialah kode “p”. Singkatnya, sebuah selector merupakan seluruh kode yang berada sebelum “{}”.
Selector yang diberikan pada kode di atas melakukan pemberian gaya pada seluruh elemen p yang ada dalam dokumen. Selain memberikan desain pada seluruh elemen seperti ini, selector juga dapat memberikan desain secara lebih spesifik: melalui klasifikasi, identitas, ataupun berbagai atribut lainnya dari sebuah elemen. Pembahasan selector secara mendalam dapat ditemukan pada bab.

Property

Sebuah properti menentukan berbagai parameter desain yang dapat diubah dari sebuah elemen yang dipilih oleh selector. Untuk lebih mudahnya, perhatikan kode di bawah:

p {
    color: ...;
    font-size: ...;
}

Pada kode di atas, yang dikatakan property ialah kode yang berada sebelum titik dua (“:”). Kegunaan dari kedua properti tersebut tentunya cukup jelas dari nama yang diberikan, yaitu color untuk memberikan warna pada elemen p, dan font-size untuk mengubah ukuran teks. Terdapat sangat banyak properti yang dapat digunakan, tetapi pembahasan mengenai detil pengunaan tiap-tiap properti tidak akan dilakukan pada buku ini. Jika terdapat pengunaan properti baru, penjelasan akan diberikan pada bagian yang relevan. Daftar properti sendiri dapat dibaca di.

Value

Value merupakan nilai dari property yang ingin kita berikan. Nilai yang dapat diberikan sendiri berbeda-beda, tergantung dengan jenis property-nya. Misalnya, jika ingin memberikan nilai warna, kita harus memberikan nilai dalam format #RRGGBB (kombinasi nilai heksa merah-hijau-biru yang biasa digunakan pada program pengolah grafis seperti Photoshop). Ketika ingin memberikan nilai ukuran, kita dapat memberikan nilai dalam format nilai px atau nilai em. Untuk lebih jelasnya, kode berikut memberikan contoh value dari properti yang ada pada kode sebelumnya:

p {
    color: #FFFF00;
    font-size: 50px;
}

Sintaks CSS

Setelah mengerti makna dari Property, Value, dan Selector, kita dapat melihat bahwa sintaks dari CSS adalah seperti yang ditampilkan pada gambar berikut:

Sintaks CSS

Ingat, bahwa pada satu selector dapat diaplikasikan banyak property, dan masing-masing property akan memiliki value yang berbeda-beda, bergantung kepada apa yang direpresentasikan oleh property tersebut.

Penyingkatan Nilai dari Property

Ketika memberikan nilai untuk property, sintaks CSS memungkinkan kita untuk menyingkat nilai yang diberikan. Untuk lebih jelasnya, perhatikan kode berikut:

/*
    Bentuk Panjang
*/
p {
    margin-top    : 10px;
    margin-right  : 20px;
    margin-bottom : 10px;
    margin-left   : 20px;
}

/*
    Bentuk Singkat (1)
*/
p {
    margin: 10px 20px;
}

/*
    Bentuk Singkat (2)
*/
p {
    margin: 10px;
}

Pada bentuk panjang pada kode di atas, nilai margin atas, kanan, bawah, dan kiri diberikan satu per satu, sesuai dengan property yang ada. Penulisan ini dapat kita singkat dengan menggunakan hanya property margin dan dua value, yang secara otomatis akan mengisikan nilai top dan right, kemudian bottom dan left. Bentuk singkat kedua memberikan nilai keempat margin dengan satu value.
Perlu diingat bahwa tidak semua property dapat diisikan dengan menggunakan penulisan singkat ini. Beberapa (tetapi tidak semua) property yang dapat dituliskan secara singkat misalnya: margin, padding, border, dan background. Untuk mendapatkan informasi lebih lanjut mengenai property tersebut silahkan baca dokumentasi property CSS yang bersangkutan.

Mengimplementasikan CSS pada HTML

Setelah HTML selesai dituliskan, kita dapat mereferensikan CSS kepada HTML yang ada agar desain yang dispesifikasikan oleh CSS dapat diaplikasikan pada HTML. Terdapat tiga cara untuk memberikan referensi CSS, yaitu:

Referensi ke File Eksternal

Kita dapat memberikan referensi ke sebuah file CSS yang berada di luar HTML. Cara referensi CSS seperti ini seringkali dianggap sebagai best practice dalam pengembangan web.

Penulisan CSS pada Elemen Head

CSS yang ingin diaplikasikan pada sebuah dokumen HTML dapat juga dituliskan pada bagian head dari sebuah dokumen. Penulisan CSS seperti ini tidak disarankan, karena umumnya elemen-elemen yang ada dalam sebuah dokumen akan digunakan kembali pada dokumen lain. Penulisan CSS langsung pada bagian head akan menyebabkan elemen-elemen yang berulang harus dituliskan ulang pada dokumen lain juga.

CSS di dalam Atribut style pada Elemen

Menuliskan CSS di dalam atribut style pada elemen HTML (atribut ini dimiliki oleh semua elemen) merupakan cara terakhir, yang juga tidak disarankan karena penulisan seperti ini akan “mengotori” kode HTML. HTML dibuat dengan tujuan untuk memberikan makna semantik untuk konten, bukan desain. Begitupun, metode ini biasanya digunakan untuk manipulasi gaya yang dilakukan secara dinamis, melalui Javascript (yang tidak mengotori kode HTML, karena biasanya atribut baru diisikan setelah HTML selesai dibaca oleh browser).

Untuk lebih jelasnya, kode di bawah memberikan contoh cara melakukan referensi CSS pada sebuah dokumen HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Pengenalan HTML</title>
    <!-- Referensi pada Elemen Head -->
    <style type="text/css">
        h1 {
            color: red;
        }
    </style>

    <!-- Referensi pada file eksternal -->
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Berita Utama</h1>
    <p>
        Elemen h1 digunakan untuk menandakan sebuah header dari teks
        (h1 == header 1). Konten teks ini sendiri berada di dalam
        sebuah paragraf, yang ditandai oleh elemen p.
    </p>

    <!-- CSS langsung pada atribut style -->
    <p style="font-weight: bold;">
        Paragraf kedua.
    </p>
  </body>
</html>

Mari kita coba jalankan kode yang ada pada kode di atas! Sebelum menjalankan kode tersebut, tentunya kita harus membuat file style.css yang direferensikan oleh elemen link pada kode di atas terlebih dahulu. Simpan kode di atas pada sebuah file bernama referensi-css.html, dan kemudian buat sebuah file baru dengan nama style.css di dalam direktori yang sama dengan referensi-css.html. Isikan file style.css dengan kode berikut:

p {
    font-size: 50px;
}

Sedikit catatan untuk mereferensikan file CSS eksternal, pada kode di atas, file style.css harus berada di dalam direktori yang sama karena atribut href diisikan tanpa penunjuk direktori. Jika misalnya kita ingin menyimpan file pada direktori yang berbeda, maka kita dapat menambahkan direktori sebelum nama file. Misalnya jika file disimpan dalam subdirektori “style”, kita dapat mengisikan style/style.css pada atribut href.
Setelah selesai menyimpan referensi-css.html dan style.css, jalankan referensi-css.html dan lihat hasilnya, seperti pada gambar berikut:

Hasil Eksekusi referensi-css.html

Perhatikan bagaimana CSS mempengaruhi penampilan dari HTML, hanya dengan sedikit deklarasi kode. Gambar berikut menunjukkan perbandingan dokumen HTML yang memiliki CSS dan tidak memiliki CSS:

Perbandingan Dokumen HTML dengan CSS dan Tanpa CSS

Perhatikan bagaimana setiap CSS mempengaruhi elemen-elemen yang bersangkutan pada gambar Perbandingan Dokumen HTML dengan CSS dan Tanpa CSS. Teks pada elemen h1 berubah menjadi warna merah karena CSS yang berada pada bagian atas dokumen, paragraf memiliki teks yang sangat besar (50px) karena CSS dari file style.css, dan paragraf kedua (dan hanya paragraf kedua) dicetak tebal karena CSS yang berada di atribut style pada paragraf kedua. Ketiga CSS yang terpisah tersebut berjalan dengan baik.
Yang juga perlu diingat, cara terbaik dalam mereferensikan CSS ialah dengan referensi ke file eksternal. Cara ini memungkinkan kita hanya menggunakan satu file CSS untuk seluruh web yang dikembangkan. Perubahan desain juga dapat dilakukan dengan mudah, hanya mengubah satu buah file saja. Pengguna juga hanya perlu melakukan sedikit download (karena seluruh file berada di satu tempat, dan seringkali browser akan menggunakan teknologi caching untuk tidak melakukan download berulang kali pada file yang sama).

Dasar-dasar HTML

A. HTML 

HTML adalah singkatan dari HyperText Markup Language yang berguna untuk membuat atau menyusun dokumen-dokumen web. HTML bukanlah bahasa pemrograman dia hanya terdiri dari markup (penandaan) yang disebut dengan tag. HTML dapat dibuat dengan menggunakan text editor sederhana, seperti notepad atau dapat juga menggunakan HTML editor yang bersifat WYSIWYG (What You See Is What You Get), seperti Frontpage, Dreamwaver.

B. ELEMEN DAN TAG

1. Elemen HTML

Dokumen html disusun dari elemen-elemen html, elemen tersebut merupakan komponen-komponen dasar pembentuk dokumen html dan terdiri dari tiga bagian, yaitu tag pembuka, isi dan tag penutup. Sebagai contoh <title>Judul Halaman</title>. <title> adalah tag pembuka, kata "Judul Halaman" adalah isi dan </title> adalah tag penutup.

Struktur Elemen

 

Struktur Dasar HTML

2. Tag HTML

Tag adalah penanda atau teks khusus yang berguna untuk menandai elemen-elemen dalam halaman html dengan simbol lebih kecil dari "<" dan lebih besar dari ">", semua tag harus di apit oleh dua simbol "<" ">". Secara umum tag ditulis berpasangan, yaitu tag pembuka dan tag penutup. Tag pembuka menandakan awal dari elemen sebagai contoh <body> dan tag penutup menandakan akhir dari elemen, untuk penulisan tag akhir ada penambahan karakter "/" setelah karakter "<" sebagai </body>, inilah bentuk tag berpasangan dalam html. Meskipun demikian, ada beberapa elemen dalam halaman html yang tidak berpasangan seperti tag <br> dan lain-lain.

Tag Dasar HTML

• HTML

          Memberitahukan pada browser bahwa dokumen web yang digunakan adalah HTML.
          Untuk penulisannya : 
          <html>  "Tag pembuka html di letakkan pada awal dokumen"
            .........
          </html>  "Tag penutup html di letakkan pada akhir dokumen"
           

• Head

          Kepala dokumen html atau tentang dokumen yang akan ditampilkan
          Penulisan :
         <head>  "Tag pembuka head di letakkan pada awal setelah tag <html>"

           ........

         </head>  "Tag penutup head di letakkan di akhir section head"

    
     Pada bagian head akan mengerjakan tugas-tugas sebagai berikut :

1. Menyediakan judul dokumen
2. Menjembatani hubungan antar dokumen
3. Memberitahu browser untuk membuat form pencarian
4. Menyediakan metode untuk mengirim pesan ke tipe browser

          

• Body

        Menampilkan isi dokumen html. Penulisannya :

         <body>  "Tag pembuka body terletak di bawah tag penutup </head>"
           ........
        </body>   "Tag penutup </body> terletak di atas tag penutup </html>"