Laporan Praktikum Pemograman Web Modul 4 CSS (Cascading Style Sheet),Class dan Id CSS

LAPORAN PRAKTIKUM
PEMOGRAMAN WEB 1


                  

DISUSUN OLEH :
Nurintan Yuliani
2015091076
SI 2015 B

Laboraturium Komputer
UNIVERSITAS KUNINGAN
Jl.Cut Nyak Dhien No.36A Cijoho Kuningan Telp.Faks/ : 0232-874824

2015-2016





BAB I
PENDAHULUAN



Dasar Teori 
CSS adalah kepanjangan dari Cascading Style Sheet dan digunakan para web designer untuk mengatur style elemen yang ada didalam halaman web serta untuk mempercantik halaman website,CSS dapat mengerjakan apa yang tidak bisa dikerjkan oleh HTML,mulai dari memformat text hingga pembuatan layout.Disamping untuk mempercantik halaman web tujuan dari penggunaan CSS inii adalah supaya diperoleh suatu keekosistenan style pada elemen tertentu.
     CSS  (Cascading Style Sheet) adalah salah satu bahasa design web(Style Sheet Language) yang mengontrol format tampilan sebuah halaman web yang ditulis dengan menggunakan penanda (markup language).


Struktur CSS
<style type=”text/css”>
        Script CSS;
</style>

Aturan Penulisan

Selector {property_1:value_1;...;property_ke-n
H1{color.red;}

Atau
H1 {color:blue;size:40;}
 selector {property_1:value_1:...;property_ke-n:value_ke-n}

1. Selector 
Selector pada CSS sama dengan Tag atau komponen pada HTML yaitu yang terdapat pada HTML yaitu yang terdapat antara tanda < dan tanda >misalnya <h1>,<p>,<b>dll.  
2. Property 
Selector pada CSS sama dengggan atribut pada HTML yaitu berfungsi uuntuk memberi nilai dari selector .
3.Value
Value dalah nilai yang kita berikan kepada property.
Contoh: Jika di HTML kita memformat paragraf dengan <p align="right"> maka dengan CSS menjadi p {text-align:right;}
Ada 3 cara penempatan CSS yaitu:
1.Internal CSS 
Yaitu menulisakan secara langsung script CSS kedalam file HTML.

2.Eksternal CSS
Ekternal CSS adalah kita membuat file CSS tersendiri dengan eksistensi *.css dan terpisah dari file html dan ditempatkan difolder lain atau difolder yang sama dengan file html tersebut.Browser akan membaca file tersebut dan akan menampilkan file html sesuai dengan format yang telah kita atur dlam file CSS.

3.Inline CSS
Yaitu menuliskan secara langsung script CSS ke dalam tag HTML.

CLASS dan ID CSS
CSS dapat diterapkan dengan nama class dan nama Id,class dan id digunakan untuk mengelompokan beberapa elemen supaya memiliki style sama.Secara umum sintaks style adalah: 
.nama_kelas{property:value;} .Berbeda dengan penerapan yang langsung mengacu pada tag HTML metode CSS dengan class ini selalu menggunakan tanda '.'(titik) sebagai penandaan bahwa itu adalah sebuah CSS yang akan diterapkan di class nantinya.Dengan clss selector kita dapat mendefenisikan style untuk tag elemn html yang sama.Misalnya dua type paragraf pertama menggunakan align-left dan yang pargraf satu lagi menggunakan align-center.Contoh Penggunaan atribut class didalam HTML:


<Style type=”text/css”>
.left{text-align:left}
.center{text-align:center}
</style>
<p class=”left”>Pragraf ini rata kiri</p>
<p class=”center”>Pragraf ini rata tengah</p>

 ID bentuk penulisannya selalu menggunakan tanda # (kres) sebagai penanda bahwa CSS akan diterapkan pada elemen ID.
Contoh: 


<Style type=”text/css”>
#polesteks {color:green;size:34;}

</style>
<body>
<b id=”polestek”>Saya adalah CSS</b>
<p id=”polestek”>Saya adalah CSS</p>

 ID selector digunakan dengan tujuan mendefenisikan per-elemen dasar.Setiap halaman id selector hanya boleh digunakan dengan satu id unik itulah yang menjadi perbedaanya dengan class slector.


BAB II
Praktikum dan Analisisnya



praktikum 6 . modul_4f.html

<html>
<head>
<title>CSS Pertamaku</title>
<style type="text/css">
.left {text-align: left}
.center { text-align : center}
</style>
<p class="left">Paragraph ini rata kiri di panggil melalui Class Left</p>
<p class="center">Paragraph ini rata tengah di panggil melalui Class Center</p>
</body>
</html>

Tampilannya :


Analisisnya :

  • pada praktikum ke 7 ini adalah pembutan CSS dimana tanda sebuah script CSS seperti ini:
<style type="text/css">
.left {text-align: left}
.center { text-align : center}
</style>
  • di praktikum ini akan membuatan sebuah paragrafh dengan penggunaan Class yaitu pada : 
.left {text-align: left}
.center { text-align : center}
  • pada penggunaan class haruslah menggunakan titik didepan Class, dengan class itu kita dapat mendefinisikan style pada setiap paraghraf yang akan kita tampilkan di web seperti pada 
.left {text-align: left} maka untuk mendefinisikannya yaitu : <p class="left">Paragraph ini rata kiri di panggil melalui Class Left</p> yang berarti paraghraf pertama berada di sebelah kanan.
  • dan .center { text-align : center} maka untuk mendeinisikannya yaitu :
 <p class="center">Paragraph ini rata tengah di panggil melalui Class Center</p>  yang berarti paragraf kedua berada di tengah-tengah.



Praktikum 7. modul_4g.html

<style type="text/css">
#polesteks {color : green; size: 34;}
</style>
<body>
<b id="polesteks">Saya adalah CSS</b>
<p id="polesteks">Saya adalah CSS</b>
</body>

Tampilannya :


Analisisnya :

  • pada praktikum 8 ini adalah pembuatan paragraf yang memiliki teks berwarna masih mengguanan format CSS yaitu pada : 
<style type="text/css">
#polesteks {color : green; size: 34;}
</style>
  • pada praktikum ini adalah penggunaan dari ID CSS yang bentuk penulisannya menggunakan tanda # seperti pada : #polesteks {color : green; size: 34;} sebagai petanda bahwa CSS akan diterapkan pada elemen ID.di sini POLESTEKS adalah sebagai ID nya dengan property dan value di daamnya yaitu warna teks hijau dan ukuran teks 34.
  • pada penerapan nya yaitu :
<b id="polesteks">Saya adalah CSS</b>
<p id="polesteks">Saya adalah CSS</b>
  • pada format tampiannya setiap paragrafnya akan sama karena menggunakan ID yang sama dan teks yang sama pula



Praktikum 8. modul_4h.html

<html>
<head>
<title>Jenis-Jenis Selector</title>
</head>
<style type="text/css">
p.italic { font-size : 200%; font-style: italic}
p.normal { font-family : arial; font-style: normal}
p.oblique { font-style : oblique}
</style>
<body>
<p class="italic"> Universitas Kuningan </p>
<p class="normal"> Universitas Kuningan </p>
<p class="oblique"> Universitas Kuningan </p>
</body>
</html>

Tampilannya :

Analisisnya :


  • pada praktikum 8 ini akan membuat paragraf dengan jenis teks yang berbeda-beda, menggunakan format CSS internal yaitu :
<style type="text/css">
p.italic { font-size : 200%; font-style: italic}   untuk format teks miring dan ukuran huruf 200%
p.normal { font-family : arial; font-style: normal}   untuk format teks jenis arial dan ukuran teks normal 
p.oblique { font-style : oblique}   untuk format teks jenis oblique
</style>
  • pada penerapan nya yaitu sebagai berikut :
<body>
<p class="italic"> Universitas Kuningan </p>
<p class="normal"> Universitas Kuningan </p>
<p class="oblique"> Universitas Kuningan </p>
</body>
  • dalam setiap paragraf terdapat masing-masing format teks yang sudah di buatkan di script CSS tadi seperti <p class="italic"> Universitas Kuningan </p> jadi teks Universitas Kuningan akan miring karena format yang dibuat adalah  Italic .





Praktikum 9. modul_4i.html

<html>
<head>
<style type="text/css">
body {
  background-image:url("C360_2015-05-26-12-07-49-069.jpg");
  background-repeat:no-repeat;
  background-position:right top;
  margin-right:200px;
  }
  </style>
  </head>
  <body>

  <h1>Hello World</h1>
  <p>background no-repeat, set position example.</p>
  <p>no the background image is only shown once,and positioned away from the

text.</p>
  <p>in this example we have also added a margin on the right side,
  so the background image will never disturb the text</p>
  <p>Cascading Style Sheet (CSS) </p>
  <p>merupakan aturan untuk mengendalikan beberapa komponen
  dalam sebuah web sehingga akan lebih tersetruktur dan seragam.</p>
  <p>Css bukan merupakan bahasa pemrograman</p>
 </body>
 </html>

Tampilannya :


Analisisnya:

  • pada praktikum 9 ini adalah pembuatan paragraf dan background gambar dengan format CSS dan ini adalah secrip dari CSS nya :
<style type="text/css">
body {
                background-image: url ("C360_2015-05-26-12-07-49-069.jpg"); yaitu penggunaan background gambar
                background-repeat: no-repeat;      yaitu tidak ada pengulangan dalam background
                background-position: right top;    yaitu penempatan background dari kiri ke kanan
                margin-right: 200px;                     yaitu ukuran halaman sebelah kiri 200px
}
</style>
  • dan ini adalah scrip yang akan menuruti style dari script CSS yang tadi sudah dibuat yang akan di tampilkan di halaman webnya.
<body>
<h1>Hello Word!</h1>
<p>background no-repeat, set position example.</p>
<p>Nom the background image is only show once, and positioned away from the text.</p>
<p>In this example we have also added a margin on the right side,
so the background image will never disturb the text</p>
<p>Cascading Style Sheet (CSS)</p>
<p> merupakan aturan untuk mengendalikan beberapa komponen
dalam sebuah web sehingga akan lebih terstruktur dan seragam.</p>
<p>CSS bukan merupakan bahasa pemograman</p>

</body>
  • pada semua paragraf ini menerapkan format pengaturan style dari script CSS yang tadi.
  • pada Hello Word format tulisannya akan besar di bandingkan yang lainnya karena tulisan yang lain ukuran teksnya tidak ditentukan.





Praktikum 10. modul_4j.html

<!DOCTYPE html>
<html><head><style>
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit]{
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input [type=submit]: hover {background-color: #45a049;}
div {border-radius: 5px; background-color: #f2f2f2; padding: 20px;}
</style><body>
<h3>Using CSS to style an HTML Form</h3>
<div>
<form action="/action_page.php">
<label for="nim"NIM</label>
<input type="text" id="nim" name="NIM" placeholder="Nomor Induk Mahasiswa">
<label for="nama"Nama</label>
<input type="text" id="nama" name="Nama" placeholder="Nama Lengkap">
<label for="country">Program Studi</label>
<select id="country"> name="country">
 <option value="TI S1">Teknik Informatika S1</option>
 <option value="SI S1">Sistem Informasi S1</option>
 <option value="MI D3">Management Informatika D3</option>
 <option value="TI D3">Teknik Informatika D3</option>
</select>
<input type="submit" value="submit">
</form>
</div></body></html>

Tampilannya :
Analisisnya :

  • Pada praktikum 10 ini adalah pembuatan form masih menggunakan format CSS nya yaitu :
<style>
input[type=text], select { untuk format pembuatan kolom
width: 100%;  menentukan lebar kolom yaitu 100%
padding: 12px 20px; menentukan bahan pengisian pada kolom
margin: 8px 0; untuk menentukan ukuran halaman
display: inline-block; untuk menentukan jenis tampilannya yaitu kolom berjajar kebawah
border: 1px solid #ccc;  untuk menentukan garis dan warna
border-radius: 4px; untuk menentukan radius dari garis
box-sizing: border-box; untuk menentukan ukuran kotak
}
input[type=submit]{ untuk format pembuatan kotak submit
width: 100%; untuk menentukan lebar kotak yaitu 100%
background-color: #4CAF50; untuk menentukan background warna untuk kotak submit
color: white; untuk memberi warna pada teks submit nya yaitu berwarna putih
padding: 14px 20px; untuk menentukan bahan pengisian pada kolom
margin: 8px 0; untuk menentukan ukuran halaman
border: none; untuk pembuatan garis namun tidak dibuatkan garis pada kotak submit ini
border-radius: 4px;  untuk menentukan radius dari garis
cursor: pointer; untuk kursor ketika kursor di arahkan ke kotak maka cursor akan berubah menjadi pointer
}
input [type=submit]: hover {background-color: #45a049;} 
div {border-radius: 5px; background-color: #f2f2f2; padding: 20px;}
</style>
  • untuk pembuatan form nya yaitu :
<body>
<h3>Using CSS to style an HTML Form</h3> pada paragraf ini jenis tulisannya besar karna ukurannya h3.
<div>
<form action="/action_page.php"> 
<label for="nim"NIM</label> 
<input type="text" id="nim" name="NIM" placeholder="Nomor Induk  Mahasiswa">
<label for="nama"Nama</label>
<input type="text" id="nama" name="Nama" placeholder="Nama Lengkap">
<label for="country">Program Studi</label>
<select id="country"> name="country">
  <option value="TI S1">Teknik Informatika S1</option>
  <option value="SI S1">Sistem Informasi S1</option>
  <option value="MI D3">Management Informatika D3</option>
  <option value="TI D3">Teknik Informatika D3</option>
 </select>
 <input type="submit" value="submit">
 </form>
 </div></body>
  • pada format ini adalah pengaturan tampian yang ada di halaman webnya yang dalamnya terdapat kolom pengisian NIM dan Nama Lengkap yang format style nya sudah di buatkan di script CSS nya dan placeholder="   " ini maksudnya akan ada nama Nomor Induk  Mahasiswa di dalam kolom namun warnanya samar-samar dan tidak dapat dihapus namun jika di isi kolomnya otomatis teksnya akan hilang dan digantikan dengan teks dari pengisian yang kita lakukan.
  • dan pada pengisian Program Studi dibuat dengan format drop-down yang dapat di pilih salah satu dari ke 4 pilihan yang ada.
  • untuk submit sama seperti tadi format style nya sudah di atur di script CSS .submit ini dapat di klik karna formatnya sebagai tombol,submit ini dapat menampilkan halam selanjutnya atau link.






BAB III
TUGAS


1. Butarlah Design WEB dengan menggunakan CSS !

Format HTML nya
tugas.html 

<link rel="stylesheet" type="text/css" href="tugas.css">
<nav>
    <ul>
        <li><a href="Tugas.html">Home</a></li>
        <li><a href="Tugas.html">News</a></li>
        <li><a href="Tugas.html">Contacs</a></li>
        <li><a href="Tugas.html">About</a></li>
    </ul>
</nav>

Format CSS nya .
tugas.css

Selector {property_1:value_1;...;property_ke-n
H1{color.red;}
* {margin:0; padding:0;}
body {
 background-color:#fff;
 font-family:Arial, Helvetica, sans-serif;
 color:#000;
}
nav {
 margin:auto;
 text-align: center;
 width: 100%;
}
nav ul ul {
 display: none;
}
nav ul li:hover > ul{
display: block;
width: 150px;
}
nav ul {
 background: #53bd84;
 padding: 0 20px;
 list-style: none;
 position: relative;
 display: inline-table;
 width: 100%;
}
nav ul:after {
 content: "";
 clear:both;
 display: block;
}
nav ul li{
 float:left;
}
nav ul li:hover{
 background:#666;
}
nav ul li:hover a{
 color:#fff;
}
nav ul li a{
 display: block;
 padding: 25px;
 color: #fff;
 text-decoration: none;
}
nav ul ul{
 background: #53bd84;
 border-radius: 0px;
 padding: 0;
 position: absolute;
 top:100%;
}
nav ul ul li{
 float:none;
 border-top: 1px soild #53bd84;
 border-bottom: 1px solid #53bd84;
 position: relative;
}
nav ul ul li a{
 padding: 15px 40px;
 color: #fff;
}
nav ul ul li a:hover{
 background-color: #666;
}
nav ul ul ul{
 position: absolute;
 left: 100%;
 top: 0;
}
Tampilannya :






Sekian dari saya mohon maaf apabila ada kesalahan dan kekurangan

Semoga bisa bermanfaat bagi semuanya 

Terima Kasih.. :)

Komentar

Posting Komentar

Postingan populer dari blog ini

Laporan Praktikum Pemograman Web 1 Modul 8 ,PHP DASAR

Gambar
LAPORAN PRAKTIKUM PEMOGRAMAN WEB 1 DISUSUN OLEH : Nurintan Yuliani 2015091076 SI 2015 B Laboraturium Komputer UNIVERSITAS KUNINGAN Jl.Cut Nyak Dhien No.36A Cijoho Kuningan Telp.Faks/ : 0232-87 4824 2016-2017 BAB I Pendahuluan A. Dasar Teori                           PHP (akronim dari PHP Hypertext Preprocessor) yang merupakan bahasa pemograman berbasis web yang memiliki kemampuan untuk memproses data dinamis. PHP dikatakan sebagai sebuah server-side embedded script language artinya sintaks-sintak dan perintah yang diberikan akan sepenuhnya dijalankan oleh server tetapi disrtakan pada halaman HTML biasa, Aplikasi-aplikasi yang dibangun oleh PHP pada umumnya kan memberikan hasil pada web browser, tetapi proses secara menyeluruh dijalankan diserver ( server side programming ). Bentuk umum PHP <?php //script php ?> Variabel             Variabel dihunakan untuk mnyimpan suatu nilai ,seperti text,anggka a
Baca selengkapnya

Laporan Praktikum Pemograman Web 1, Modul 1

Gambar
LAPORAN PRAKTIKUM PEMOGRAMAN WEB 1 DISUSUN OLEH : Nurintan Yuliani 2015091076 SI 2015 B Laboraturium Komputer UNIVERSITAS KUNINGAN Jl.Cut Nyak Dhien No.36A Cijoho Kuningan Telp.Faks/ : 0232-87 4824 2016-2017 BAB I  Tag Tag HTML ·          1.    Definisi HTML HTML adalah singkatan dari HyperText Markup Language yaitu bahasa pemrograman  standar yang digunakan untuk membuat sebuah halaman web, yang kemudian dapat diakses untuk menampilkan berbagai informasi di dalam sebuah penjelajah web  Internet  (Browser). HTML dapat juga digunakan sebagai link link antara file-file dalam situs atau dalam komputer dengan menggunakan localhost, atau link yang menghubungkan antar situs dalam dunia  internet . ·          2.     Tag-Tag HTML <html>=Mendefinisikan root dari suatu dokumen HTML <head> =Digunakan untuk memberikan informasi tentang dokumen tersebut <body> = berfungsi sebagai isi untuk menulisk
Baca selengkapnya