Style Halaman Web

Assallamuallaikum wr.wb.

Aku bakalan ngasi tau ke kalian nih project baru aku, yaitu tentang style halaman web. Apa si yang dimaksud style halaman pada web? Mari kita simak penjelasan dibawah ini.

Style Halaman Web

1.   Pengertian CSS

Cascading Style Sheet atau lebih sering disebut dengan istilah CSS merupakan salah satu dokumen website yang bertujuan untuk mengatur gaya (style) tampilan website.

CSS merupakan sekitar pembuatan dan pengaturan style font, warna, jarak, bentuk, dan lain-lain yang tidak dapat dilakukan dengan elemen - elemen HTML. Dapat dikatakan bahwa CSS merupakan pengembangan dari HTML dalam hal format dokumen web. Adanya CSS memudahkan kita untuk mengatur dan memilih sebuah website dan tampilannya karena CSS memisahkan antara bagian presentasi dan isi dari web yang dibuat.

Selain itu dengan penggunaan dari CSS dalam pembuatan web akan memberikan beberapa manfaat seperti berikut ini :

1.          Kode HTML menjadi lebih sederhana dan lebih mudah diatur.

2.          Ukuran file menjadi lebih kecil sehingga load file lebih cepat.

3.          Mudah untuk mengubah tampilan, hanya dengan mengubah file CSS saja.

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

5.          Dapat digunakan dalam hampir semua jenis web browser.

Bagian – bagian utama dari sebuah CSS itu terdiri dari tiga bagian yaitu: selector, property, value. Jika dalam HTML dikenal ada tag-tag yang menyusun sebuah dokumen HTML maka dalam CSS juga dikenal dengan sebutan selector.

2. Cara Kerja  dan Anatomi CSS

Cara kerja CSS dimulai saat deklarasi style yang diinginkan dengan menulis style (selektor, id dan class), maka secara otomatis style tersebut akan bekerja pada dokumen HTML. Dengan mengatur selektor, id, dan class, untuk kemudian id dan class tersebut kita sesuaikan dan terapkan pada
kode HTML . Dan secara otomatis pula CSS itu akan bekerja pada file HTML.

Contoh:

http://bocah-rpl.blogspot.com/2017/06/style-pada-halaman-web.html

3.   Mengatur Style Pada Teks

Properti	Keterangan
color	Properti color digunakan untuk mengubah warna text
direction	Properti direction digunakan untuk menentukan posisi text
letter-spacing	Properti latter-spacing digunakan untuk menambah atau mengurangi ruang antara huruf yang berbentuk kata
word-spacing	Properti word-spacing digunakan untuk menambah atau mengurangi ruang antara kata-kata pada sebuah kalimat
text-indent	Properti text-indent digunakan untuk mengatur jarak bagian kiri kata pertama pada sebuah kalimat
text-align	Properti text-align digunakan untuk mengatur posisi atau perataan text
text-decoration	Properti text-decoration digunakan untuk membuat garis bawah, overline atau tanda coret pada teks
text-transform	Properti text-transform digunakan untuk mengatur huruf besar atau kecil
white-space	Properti white-space digunakan untuk mengatur jarak enter sebuah kalimat
text-shadow	Properti text-shadow untuk membuat bayangan pada teks

Dasar mengatur teks pada css, biasanya seperti posisi perataan teks, jarak spasi dan lain sebagainya, semua itu bisa dilakukan dengan css. Berikut ini properti-properti yang bisa digunakan untuk memanipulasi atau mengatur teks pada css agar menjadi sesuai dengan yang kita inginkan.

https://bahasaweb.com/mengatur-teks-pada-css/

4.   Mengatur Style Multimedia

          Untuk memaksimalkan fungsi web Cascading style sheet dapat pula diterapkan pada elemen-elemen HTML multimedia, diantaranya gambar,video,audio. Berikut Penjabarannya.

1. CSS pada Tampilan Gambar

CSS berperan penting dalam menyajikan informasi dengan visual yang lebih baik, lebih optimal dari sisi penulisan serta lebih disenangi oleh mesin pencari. CSS dapat diterapkan hampir pada semua objek yang disisipkan dalam tag html baik itu tulisan, tabel dan gambar maupun objek lainya. Untuk mengatur gambar dapat dituliskan secara inline seperti contoh berikut :

<img src="nama-file-gambar" width="lebar" height="tinggi" alt="text" title="text" border="1" />

Selain dengan cara inline , stlyle CSS dapat diberikan secara embed ataupun eksternal CSS. Berikut terdapat tiga gambar yang diberi style dimana ukuran ketiga gambar dibuat sama 200 x 200 dan margin atas gambar adalah 10px sehingga antar gambar terlihat ada jarak.

2. CSS Gambar untuk Background

Seperti penambahan warna latar, penambahan gambar latar belakang juga dilakukan dengan menggunakan dua properti, yaitu background dan background-image. Nilai yang diisikan untuk properti ini ialah url dari gambar, relatif terhadap file CSS, sama seperti pada penambahan font.

div { background: url( “latar.png”); background-image: url(“latar.png”);}

 Terdapat empat nilai yang dapat diisikan pada properti background-repeat, yaitu repeat, no-repeat, repeat-x, dan repeat-y. Seperti contoh di bawah ini :

<div style="background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE4FkRVIaI3GZEUwK4OIaumgsqZU2CLL79qBu_QNCQiYwt_psd1pjLuEQ8zM4hq8UrXTPZjBbMYENxHxtv1FqD_wbbC81q0NrpaEtQDD48xEUGj-t1wDU1ITBn632SZ4NZR2Jvpqg3MopN/s1600/back.jpg'); background-repeat: repeat;">
<div style="color: white; text-align: center;">
<b>BAGIMU NEGERI</b>
Padamu negeri kami berjanji
Padamu negeri kami berbakti
Padamu negeri kami mengabdi
Bagimu negeri jiwa raga kami
</div>
</div>

3. CSS pada Tampilan Video

Untuk penerapan Cascading style sheet pada elemen video dapat dituliskan secara inline seperti contoh berikut ini :

<html>
<head>
<title>Test</title>
</head>
<body>
<video controls="controls" style="display:block; margin: 0 auto; width:400px ; heigth:400;" >
<source src="http://googledrive.com/host/0B7q1GyuInSWkLUdUQTNhU0hkYWs/" type="video/mp4" />
Your browser does not support the video tag.
</video>
</body>
</html>

4. CSS Video Embed dari Youtube

Penyajian video juga bisa memanfaatkan elemen iframe yang dilinkkan ke alamat video tertentu , misalnya www.youtube.com. Berikut adalah penerapan CSS secara embed untuk menampilan video dari youtube. Seperti di bawah ini.

<html>
<head>
<title>Test</title>
<style>
.videoWrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px;
height: 0; }
.videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
</style>
</head>
<body>
<div class="videoWrapper">
<iframe width="560" height="349" src="url_video" frameborder="0" allowfullscreen></iframe>
</div>
</body>
</html>

http://www.mikirbae.com/2016/09/css-untuk-memformat-tampilan-multimedia.html

5.   Mengatur Style pada table

 Sebuah tabel selalu terdiri dari dua elemen utama, yaitu baris dan kolom. Tentunya HTML memiliki elemen untuk membuat baris dan kolom dari sebuah tabel, tetapi sebelum membuat baris dan kolom dari tabel kita harus membuat tabelnya terlebih dahulu. Pembuatan tabel dimulai dari inisialisasi tabel, menggunakan elemen table:

<table>

    <!-- Data -->

</table>

dan selanjutnya, kita dapat menambahkan baris ke dalam tabel tersebut dengan menggunakan elemen tr:

<table>

    <tr>

        <!-- Isi Baris Tabel -->

    </tr>

    <tr>

        <!-- Isi Baris Tabel -->

    </tr>

</table>

Dan setiap baris dari tabel tentunya harus diisikan dengan data, yang akan menghasilkan kolom tabel. Pengisian data pada tabel dilakukan dengan menggunakan elemen td, seperti berikut:

<table>

    <tr>

        <td>NIM</td>

        <td>Nama</td>

    </tr>

    <tr>

        <td>23511000</td>

        <td>Alex Xandra Albert Sim</td>

    </tr>

</table>

maka kita akan mendapatkan sebuah tabel HTML, seperti berikut:

https://bertzzie.com/knowledge/desain-web-dasar/Table.html

6.   Mengatur Style pada formulir

Form di HTML dapat kita buat dengan tag <form>. Tag ini memiliki beberapa atribut yang harus diberikan, seperti:

·         action untuk menentukan akasi yang akan dilakukan saat data dikirim;

·         method metode pengiriman data.

Contoh:

<form action="prosess.php" method="GET">

<!-- form field di sini -->

</form>

Untuk atribut action, kita dapat mengisinya dengan alaman URL dari endpoint yang akan memproses form.

Secara sederhana,—pada contoh di atas— kita akan menyuruh file proses php untuk memproses data form.

https://www.petanikode.com/html-form/

Nah jadi seperti itu temen-temen, buat kalian yang pengen tau lebih detail kalian bisa cek di link yang udah aku lampirkan dimasing-masing part. Terimkasih!

Wassallamuallaikum wr.wb.