Tugas Praktikum Pemrograman Web 1
Diajukan untuk memenuhi salah satu Tugas Mata Kuliah Praktikum Pemrograman Web 1
Dosen Pengampu : Rio Adriyat, M.Kom
Oleh ;
RINALDI
20160910032
Sistem Informasi 2016 C
FAKULTAS ILMU KOMPUTER
PROGRA SRUDI SISTEM INFORMASI
UNIVERSITAS KUNINGAN
2018
>> Selector Bebas
Selector bebas mirip seperti penggunaan tag di HTML, hanya saja selector menggunakan nama yang bisa kita atur sendiri sesuai keinginan. Bentuk umunya seperti berikut ini :
<testing>Teks ini berwarna hijau dan bergaris bawah</testing>
>> Selector dengan class
CSS memperbolehkan kita untuk memakai class, dimana didalam sebuah class kita dapat mengelompokkan elemen-elemen dan menerapkan aturan CSS didalamnya. Bentuk umunya seperti berikut ini :
CSS (Cascading Style Sheet)
CSS atau cascading style sheet merupakan salah satu bahasa desain Web (Style Sheet Language) yang mengontrol format tampilan sebuah halaman web yang ditulis dengan menggunakan penanda (marup language). CSS digunakan untuk mengatur style elemen yang ada didalam halaman web serta untuk mempercantik halaman website, CSS dapat mengerjakan apa yang tidk dapat dikerjakan oleh HTML, mulai dari memformat text hingga pembuatan layout.
Bentuk umum dari CSS :
<style type="text/css">
script CSS;
</style>
adapun aturan dalam penulisan script css adalah sebagai berikut :
selector {property_1 : value_1;....; proprety_ke-n : value_ke-n}
H1{color:red;}
atau
H1{color:blue; size:40;}
Sebagai contoh jika pada HTML kita memformat paragraf dengan <p align="right"> maka di dalam CSS bentuknya menjadi p{text-align: right;}
Ada 3 cara menerapkan CSS pada dokumen HTML
External style sheet
External CSS adalah cara menggunakan CSS dengan membuat file baru berekstensi (.css) dan untuk menggabungkan file HTML kita dengan file (.css) yang baru dibuat itu dengan menggunakan tag <link rel=”” type=”” href=”” />. Dan pada file CSS yang sudah di link dengan file HTML sudah tidak perlu memakai tag <style> dan </style> lagi.
Kelebihan memakai external CSS juga dapat membuat website lebih efisien karena semua style dibuat didalam 1 file (.css) jadi tidak menambah ukuran file HTML nya karena kode CSS diletakkan pada file yang berbeda, dan dapat menghemat bandwidth.
Kelebihan memakai external CSS juga dapat membuat website lebih efisien karena semua style dibuat didalam 1 file (.css) jadi tidak menambah ukuran file HTML nya karena kode CSS diletakkan pada file yang berbeda, dan dapat menghemat bandwidth.
Internal style sheet
Internal CSS adalah style yang digabungkan di dalam file HTML, internal CSS diletakan di antara tag <head> dan </head dengan menggunakan tag <style> dan </style>.
Kelebihan dari internal CSS juga dapat memudahkan mengelola satu buah halaman web tanpa menganggu pengaturan CSS dihalaman lain nya.
Kelebihan dari internal CSS juga dapat memudahkan mengelola satu buah halaman web tanpa menganggu pengaturan CSS dihalaman lain nya.
Inline style sheet
Inline CSS adalah pemakaian CSS yang diberikan di tag HTML tertentu dengan menambahkan atribut style di tag HTML yang mau diberikan CSS. teknik ini biasanya digunakan untuk pemformatan khusus pada tag HTML tidak untuk keseluruh elemen dalam dokumen web. Penggunaan inline CSS juga tidak efisien karena membuat file HTML seperti penuh dengan atribut-atribut style di setiap tag HTML dan juga membuat ukuran file HTML nya akan bertambah besar.
Jenis-jenis Selector pada CSS
Jenis-jenis Selector pada CSS
>> Selector Bebas
Selector bebas mirip seperti penggunaan tag di HTML, hanya saja selector menggunakan nama yang bisa kita atur sendiri sesuai keinginan. Bentuk umunya seperti berikut ini :
<style type=”text/css”>testing{ text-decoration: underline; color:green; }</style>
Untuk dapat menggunakan selector bebas maka kita harus menuliskan perintah nya seperti pada contoh berikut ini :
>> Selector dengan class
CSS memperbolehkan kita untuk memakai class, dimana didalam sebuah class kita dapat mengelompokkan elemen-elemen dan menerapkan aturan CSS didalamnya. Bentuk umunya seperti berikut ini :
<style type=”text/css”>.toplink { text-align : right; }</style>
berbeda dengan selector bebas, pada selector dengan class maka dalam dokumen penulisannya jadi seperti ini :
<h2 class=”toplink”>Class Heading 2 </h2>
>> Selector dengan Id
Kalau selector dengan class diawali dengan titik, selector id menggunakan tanda pagar. Bentuk umunya seperti berikut ini :
<style type=”text/css”>#title { font-size: 10px; text-transform:uppercase; color: red; }</style>
Penulisannya dalam dokumen tidak jauh berbeda dengan selector class. Hanya saja tulisana “class” di ganti dengan “id” :
<p id=”title”>Tulisan ini berukuran 10, kapital dan berwarna merah</p>
Assalamualaikum.wr.wb
Ok ketemu lagi kita di blog orizascript yang membahasa materi mengenai Bahasa pemrograman berbasis web yaitu HTML, pada kesempatan kali ini, sudah dipaparkan di atas materi yang dibahasa yaitu mengenai CSS atau Cascading Style Sheet, yang dimana CSS atau cascading style sheet merupakan salah satu bahasa pemrograman untuk mendesain sebuah tampilan Web (Style Sheet Language) yang mengontrol format tampilan sebuah halaman web yang ditulis dengan menggunakan penanda (marup language). Selain itu CSS juga digunakan untuk mengatur style elemen yang ada didalam halaman web serta untuk mempercantik halaman website, kelebihan dari penggunaan CSS yaitu dapat mengerjakan apa yang tidk dapat dikerjakan oleh HTML, mulai dari memformat text hingga pembuatan layout.
Untuk kali ini saya akan mencoba membuat sebuah tampilan web sederhana dengan menggunakan perintah CSS, ada dua yang akan saya coba buat sesuai dengan perintah didalam buku panduan, yang pertama membuat halaman untuk menampilkan beberapa gambar atau foto dengan menggunakan script CSS dan yang kedua membuat halaman untuk tampilan home atau beranda suatu situs web.
langsung saja yang pertama kita akan membuat halaman untuk menampilkan beberapa gambar dengan menggunakan perintah CSS. tanpa berlama-lama, yang pertama seperti biasa kita tuliskan script nya, berikut ini adalah script html nya :
<html>
<head>
<title>postest</title>
<style type="text/css">
img {
width : 150px;
height : 150px;
border : 2px solid #000000;
padding : 20px 20px 60px 20px;
}
p{
position : absolute;
top : 180px;
left : 30px;
z-index : 2;
color : blue;
}
</style>
</head>
<body>
<img class ="uniku" src="logo uniku.png">
<p align="text"> gambar 1</p>
<img class="gambar 2" src="gambar 2.jpg">
<img class="gambar 3" src="gambar 3.jpg">
</body>
</html>
Nah sahabat bisa melihat untuk cara penulisan nya seperti pada gambar diatas, jika sudah selesai kita buka script yang sudah kita buat dengan menggunakan web browser, ingat ya sahabat script yang sudah kita buat disimpan dengan ekstensi .html atau .htm.
Jika sudah terbuka maka akan terlihat tampilan sebagai berikut :
seperti inilah tampilan atau halaman yang td kita buat dengan perintah css, bagaimana apakah sahabat menemui kesulitan.? semoga tidak ya.. Ok lanjut pada contoh yang kedua, seperti yang sudah disebutkan tadi bahwa kita akan mambuat contoh sebuah halaman untuk tampilan home atau beranda suatu situs web.
Langsung saja untuk script perintahnya bisa dilihat dibawah ini :
<html>
<head>
<title>selector class</title>
<style type="text/css">
.tengah{text-align:center; font-family:courier}
.text{font-style:oblique}
</style>
</head>
<body>
<h1 align="center" class="tengah">UNIVERSITAS KUNINGAN</h1>
<h2 align="center" class="tengah">FAKULTAS ILMU KOMPUTER</h2>
<hr size="10" color="black">
<table border="5" bgcolor="blue">
<tr>
<th align="center" color="orange">HOME</th>
<th align="center" color="orange">NEWS</th>
<th align="center" color="orange">CONTACT</th>
<th align="center" color="orange">ABOUT</th>
</table>
</body>
</html>
ketika sudah selesai dan disimpan dengan ekstensi .html atau .htm dan kita buka file nya jika tidak ada yang salah dalam penulisan nya maka akan menghasilkan tampilan sebagai berikut :
Nah sahabat itulah contoh penulisan CSS yang sudah kita buat, semoga sahabat semua tidak menemukan kesulitan dalam menerapkannya. Semoga bermanfaat.. Wassalam...
Komentar
Posting Komentar