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.

PROJECT 1 (Hal-hal yang perlu diperhatikan saat pembuatan video)

Hallo gengs...... ketemu lagi sama aku, tentunya di project study.
Kali ini aku akan share ke kalian tentang project atau pekerjaan atau tugas yang aku dapet dari sekolah tadi siang. Nah jadi aku itu siswa kelas XII Multimedia dan tentunya materi yang diajarkan itu ya seputar multimedia. Terus nih tadi siang aku dapet materi TPAV, disini pasti ada yang belum tau kan TPAV itu apa?. Jadi TPAV adalah suatu pelajaran atau materi yang berkaitan dengan audio dan juga video.
Project pertama yang aku dapet adalah membuat sebuah video atau film pendek berdurasi 3 menit. Dimana pembuatan filmnya itu dilakukan dengan berkelompok. Nah yang harus digaris bawahi disini adalah, kalian harus tau dulu gimana si caranya bikin video atau film pendek.
Tahapan yang harus dilalui adalah :
1. Pra Produksi
Disini yang dimaksud dengan pra produksi adalah, temen-temen harus menentukan dulu hal apa yang kira-kira dibutuhkan saat membuat film. Diantaranya membuat gagasan ide atau tema film pendek yang akan dibuat. Setelah ada ide kemudian dilanjutkan dengan membuat Sinopsis, skenario, Storyboard, Shooting script.
2. Proses pembuatan
Nah pada tahap ini kalian bisa mulai dengan proses pengambilan gambar, kemuidan perekaman suara dll. Untuk pengambilan gambar tentunya dengan menggunakan kamera, untuk kameranya sendiri itu bisa pakai kamera HP minimal 8 Mp, atau bisa juga menggunakan DSLR atau kamera video(kamera pro).
3. Paska Produksi
Pada tahap ini dilakukan yang namanya editing video. Dimana editing video ini bisa melalui aplikasi yang didownload dari playstore atau appstore, atau juga bisa menggunakan software khusus seperti Adobe Premiere dll. Setelah melalui proses editing tentunya akan masuk pada proses pengujian, disisni akan diuji apakah film ini layak untuk di publikasikan atau tidak. Jika memungkinkan maka akan masuk pada proses promosi.

Nahhh mungkin cukup sekian dulu ya penjelasan mengenai first project study aku, mungkin next time aku akan share lebih mendetail tentang tahapan-tahapan produksi Multimedia. Atau kalo yang udah ngga sabaran nihh kalian bisa kunjungin link dibawah ini. Selamat Belajar 😊

Naliwardima.blogspot.com/?m=1

Perkenalan

Assallamuallaikum wr.wb
.
.
.Selamat datang di blogku yang baru ini teman-teman :)
Perkenalkan nama aku Intan Nurjanah saat ini aku sebagai siswa di salah satu sekolah tehnik di daerah Purwokerto. Nah tepatnya di SMK N 2 Purwokerto. Tahu gak si? mangga itu rasanya kaya apa? dan buat teman-teman yang tau bisa banget kirim jawaban kalian ke email aku nah untuk email kalian bisa lihat di bio aku, Nah buat teman-teman yang mau ngirim jawaban kalian tentunya dengan dilengkapi nama lengkap dan kota asal ya, nah bagi teman-teman yang beruntung nanti akan aku kasih hadiah, untuk hadiahnya aku rahasiakan yaa man teman. Oh iya nih untuk kedepannya aku bakal upload tentang project2 study apa aja sih yang aku jalani sewaktu di SMK, dan buat teman-teman yang mau tanya2 ato kepo tentang project apa si yang bakal aku upload diblog kalian bisa kunjungi blog aku di hari apa aja terserah, biar tetep update dan nggak ketinggalan sama project-project study aku. Kedepannya aku bakalan upload project-project itu. So Stay tune yahhh :)
Selain itu mungkin aku bakal upload hal-hal lain juga yang mungkin bisa menghibur teman-teman semua.
Nah cukup segitu aja ya perkenalan dari blog aku. See you on the first project
Bye....bye
.
.
.
Wassallamuallaikum wr.wb