" Pemrograman Web " modul 2 (pendahuluan dan pratikum)

selamat pagi-selamat siang-selamat sore dan selamat malam pembaca yang sudah berkenan mengunjungi blog yang sangat berguna untuk menambah wawasan anda ini J

Ataupun yang meringankan beban anda untuk tidak bersusah-susah payah mencari kesana-sini bahan untuk mengerjakan tugas pratikum J HAHAHAHA

NOTE

untuk para pembaca yang cerdas alangkah baiknya setelah membaca tulisan ini, ringankan tangan saudara untuk share tulisan ini atau ikuti blog ini dengan mengklik gambar seperti di samping J

oke tidak usah berlama-lama lagi bincang-bincangnya langsung aja di pelajari para pembaca yang budiman J

PENDAHULUAN 2

#JAWABAN MUNGKIN DIACAK

1. CSS (Cascading Style Sheet) adalah salah satu bahasa desain web (style sheet language) yang mengontrol format tampilan sebuah halaman web yang ditulis dengan menggunakan penanda(markup laguage).

2. CSS 3 dibagi menjadi "modul".

Beberapa CSS 3 modul yang paling penting adalah:^[1]

· Selector

· Model Kotak

· Latar belakang dan Border

· Efek teks

· Transformasi 2D/3D

· Animasi

· Layout Kolom

· User Interface

3. Manfaat dari CSS:

a. Kode HTML, menjadi lebih sederhana dan lebih mudah diatur.

b. Ukuran file menjadi lebih kecil, sehingga load file lebih cepat.

c. Mudah untuk merubah tampilan, hanya dengan merubah dile CSS saja.

d. Dapat berkolaborasi dengan JavaScript dan merupakan pasangan setia HTML.

e. Digunakan dalam hampir semua web browser

4. Istilah

a. Selector → penghubung antara dokumen HTML dan style

b. Deklator → bagian dari aturan yang menentukan efek apa yang akan diberikan. Terdiri dari Property dan value

c. Property → Properti adalah kualitas atau ciri-ciri yang dimiliki sesuatu hal.

d. Value → spesifikasi yang tepat dari properti.

e. Margin → syntax yang berfungsi untuk merubah jarak luar antara bidang satu dengan bidang yang lain.

f. Padding → syntax yang berfungsi untuk merubah jarak lapisan dalam atara bidang dengan isi bidang yang ada didalam bidang tersebut (dengan merubah padding dari sebuah bidang maka akan merubah nilai width dan height dari bidang tersebut)

g. Float → syntax yang berfungsi untuk merubah posisi sebuah bidang yang akan terlihat (left, right)

h. Position → mengatur posisi elemen

i. Overflow →

5. Selector { property : value };

· Padding → [sourcecode language="css"]padding: 10px;[/sourcecode]

· Border→ [sourcecode language="css"]border: 1px solid #000000;[/sourcecode]

· Colo→ [sourcecode language="css"]color: #000000;[/sourcecode]

· font- Size→ [sourcecode language="css"]font-size: 12px;[/sourcecode]

· font-family→ [sourcecode language="css"]font-family: Arial, Times, Georgia;[/sourcecode]

Cara memasang CSS pada HTML :

a. External Style Sheet (file CSS berbeda dari file HTML),

b. Internal Style Sheet (Kode CSS dipasang di dalam tag head HTML)

c. Inline Style Sheet (Kode CSS langsung dipasang di tag HTML, tidak direkomendasikan).

Internal CSS

Metode penulisan kode CSS langsung dalam file HTML. contoh:

<html>
<head>
<style type = "text/css">
.header {
width:900px;
height:50px;
border: 1px solid #640404;
}
.headerLeft {
width:400px;
background-color:#CCCCCC;
height:50px;
float:left;
text-align:center;
}
.headerRight {
width:450px;
background-color:#999999;
height:50px;
float:right;
text-align:center;
}
</style>
</head>
<body>

</body>
</html>

Eksternal CSS

file CSS terpisah dengan HTML. Buat file dengan ekstention .css. contoh:

Inline CSS

Penulisan kode CSS dalam tag HTML. contoh:

<html>
<head>
</head>
<div style="background-color:#999999; text-align:center;">Inline CSS</div>
</body>
</html>

Jika kita menggunakan teknik external CSS, maka kita perlu membuat file css, misal buat file dan simpan dengan nama style.css

7. Jenis selector :

a. Type Selector

Type Selector merupakan bentuk paling dasar dari selector css. Dengan menggunakan tag HTML tertentu, kita dapat menerapkan style css langsung pada tag yang dimaksud. Type selector digunakan untuk mengatur style dasar yang akan diterapkan pada seluruh situs web. Misalnya saja kita ingin menerapkan aturan untuk elemen paragraf pada web seperti berikut

p {
font-family: arial, helvetica, sans-serif;
font-size: 13px;
color : #333;
}

Maka style tersebut akan diterapkan pada seluruh paragraf pada dokumen web.

b. Class Selector
Class selector digunakan jika ingin menerapkan style yang berbeda untuk sekelompok elemen yang identik. Misalnya kita ingin suatu paragraf memiliki style yang berbeda dari style paragraf secara umum. Maka kita bisa menggunakan class selector dengan nama selector yang khusus misalnya dengan nama selector "beda". Kita dapat menuliskan kode css sebagai berikut:

.beda {
font-size: 15px;
color : red;
}

Untuk menuliskan class selector, kita harus menggunakan tanda titik untuk penamaan selector tersebut. karena nama selector kali ini adalah beda maka penulisan class selector yang benar menjadi .beda, kemudian untuk memakainya kita harus memanggil nama selector tersebut dalam tag HTML yang dimaksud. Cara pemanggilannya seperti berikut ini:

<p class="beda"> Paragraf ini akan tampil berbeda dari paragraf yang lainnya karena menggunakan class selector.</p>

Pada kode tersebut kita menggunakan atribut class untuk memanggil kode css yang telah kita buat sebelumnya.

c. Id Selector

ID selector digunakan jika kita ingin menerapkan style yang berbeda hanya untuk satu elemen tertentu. Cara penulisan kode css untuk id selector adalah dengan tanda hash atau pagar (#) sebelum nama selector. Misalnya seperti berikut

#khusus {
font-size: 12px;
color: blue;
}

untuk menggunakannya kita harus menggunakan atribut id pada elemen html yang dimaksud.

<p id="khusus"> Paragraf ini akan tampil berbeda karena menggunakan id selector</p>

id selector ini hanya boleh digunakan sekali pada sebuah halaman web. Ini dikarenakan id bersifat unik.

d. Descendant Selector

Pada halaman web biasanya terdapat bagian konten. Nah, pada bagian konten tersebut biasanya terdapat lebih dari satu paragraf. Untuk menerapkan style yang sama pada paragraf-paragraf tersebut, kita bisa saja menuliskan kelas pada setiap tag paragraf, namun alangkah baiknya kita menggunakan descendant selector.

Berikut merupakan contoh kode css descendan selector:

.konten p{
color: blue;
}

Kita dapat menerapkannya pada dokumen html dengan cara seperti berikut

<div class="konten">
<p> Paragraf ini ditampilkan dengan descendant selector</p>
<p> Paragraf ini juga akan ditampilkan dengan style yang sama</p>
</div>

e. Universal Selector
universal selector merupakan jenis selektor yang dapat diterapkan pada seluruh elemen html. contohnya:

*{
color: #fff;
background-color: #333;
}

maka seluruh elemen html akan mempunyai huruf berwarna putih dengan latar belakang hitam.

PRATIKUM 2

nomor 1

<html>

<head>

<title>Nomor 1</title>

</head>

<style type="text/css" rel="stylesheet">

#container{

width: 960px; height: 634px; background-color: #000000;

}

#header{

width: 960px; height: 192px; background-color: green;

}

#isi{

width: 960px; height: 250px;

}

#left{

width: 192px; height: 250px; background-color: yellow;

}

#right{

width: 768px; height: 250px; background-color: blue;

float: right; top: -250px; position: relative;

}

#footer{

width: 960px; height: 192px; background-color: yellow;

}

</style>

<body>

<div id="container">

<div id="header"></div>

<div id="isi">

<div id="left"></div>

<div id="right"></div>

</div>

<div id="footer"></div>

</div>

</body></html>

gambar setelah disimpan

nomor 2

<html>

<head><title>::Nomor2::</title>

<link a href="gaya.css" style="text/css" rel="stylesheet"/>

<script languange="javascript">

function willGREEN()

{

var tulisan=document.getElementById("penutup")

tulisan.style.color="green"

}

</script>

</head>

<body>

<div id="penutup" class="font button">

I'm going to green!... Wait for it...

<br><br><button onClick="willGREEN()">Click me!</button>

</div>

</body>

</html>

gambar setelah disimpan

sebelum diklik

sesudah di klik

SEKIAN DAN TERIMA KASIH

JANGAN LUPA SHARE

Belajar Bareng

" Pemrograman Web " modul 2 (pendahuluan dan pratikum)