Kamis, 30 Agustus 2018

By  No comments Edit This

PRAKTIKUM 10 - CSS Pada Tabel

yoo halo halo kembali lagi bersama saya disini, ya jadi di kesempatan kali ini saya akan menshare kepada kalian yaitu membuat tabel lalu memodifnya dengan css di pertemuan sebelumnya saya sudah membahas apa itu css dan kegunaanya pada html.
nah disini saya akan mengimplementasikan css tersebut kedalam bentuk tabel , fungsinya ga lain ya  untuk merapihkan dan mempercantik dokumen HTML. karena disni saya tidak akan menshare semuanya disni maka kalian bisa melihat semua kodingan dan hasilnya di LINK INI

pertama disini saya akan menjelaskan atribut pada html
Margin : "". marigin diguankan untuk menentukan ukuran pada tabel tetapi mengacu pada halaman web tersebut
Border: menentukan ukuran yang ada di bagian paling luar sebuah kontent
padding: mentukan ukuran lapisan luar sebuah konten secara kasarnya
content: konent itu sendiri

 


dapat diilustraksikan seperti itu.

 lalu kalian juga dapat memvariaskan style border contohnya yaiut
border-syle: dotted; atau dashed dan lain , dotted adalah table yang terdiri dari titik titik dan dashed terbuat dari garis lurus
disni saya akan menunjukan kepada anda border-collapse: colapse;, apa ittu border collapse  ? border collapse berfungsi untuk memisahkan setiap kollom dan row nya , terpisah disni bukan bermaksud terpisah secara harfiah dengan kata lain yaitu untuk membuat spasi pada tabble menghilang
contohnya seperti ini


 berikut adalah kodingannya
























lalu berikutnya kalian dapat memasukan gambar pada suatu tabel contoh kodingannya yaitu seperti ini





 














lalu hal terakhir yang akan saya bahas disini yaitu kombinasi pengedittan tabel dengan html dan css mulai dari warna yang ada dalam setiap kolom , pemasukkan gambar , menenutkan tabel data
kodigannya seperti ini

berikut adalah tampilan kodigan html dan cssnya, dan berikut merupakan hasil dari kodingan tersebut



mungkin sekian saja yang dapat saya sampaikan, untuk semua kodingannya anda bisa melihatnya di link diatas , termakasih telah mengunjungi blog ini
i'll  see you the next one!
waalaikumsalam



Rabu, 22 Agustus 2018

By  No comments Edit This

Praktikum 9 - CSS

Halohalo, selamat datang kembali , jad disini setelah saya membahas banyak tentang HTML saya disini akan mulai membahas tentang css atau yang bisa disebut juga cascading style sheet . jadi css atau cascading style sheet ini digunakan untuk memperindah suatu tampilan web jika dianalogikan HTML adalah kerangka mobil sedangkan CSS adalah cat dan furniturenya sebelumnya untuk melihat kodingan html dan css saya bisa melihat di link ini


langsung saja kita ke inti pembahasan
jadi sebelum kita menulis css tentu saja harus ada file html nya dulu baru kita bisa menulis cssnya
Ada tiga cara penulisan kode CSS, yaitu inline, internal dan external. Ketiganya bisa anda lakukan sesuai dengan kebutuhan. Berikut contoh penggunaan dari metode-metode tersebut:
Inline
Penulisan kode CSS dengan metode inline ini bisa dilakukan langsung pada tag yang ingin diberi style dengan menggunakan atribut style.
<h1 style=‚color : red; ‚> Judul Situs </h1>
Pada metode ini, anda tidak perlu menuliskan selector. Karena anda menuliskan CSS langsung pada tag yang ingin diberi style. 
Cara ini sangat tidak dianjurkan, karena Anda akan mencampurkan antara “Format” dan “Presentasi”. Cara ini juga tidak efektif ketika anda akan melakukan perubahan pada CSS.
Internal
Metode CSS internal ditulis di dalam tag style yang ditempatkan pada tag head.
<HTML>  <head>   <title>Judul HTML</title>
<style> 
h1 {
    color : red;
 }
  </style>  </head> ...
Metode kedua ini sangat dianjurkan untuk pengujian style, atau ketika anda hanya memiliki satu halaman web.
External
Metode yang terakhir adalah dengan membuat file CSS dan dipanggil di dalam tag head. File CSS memiliki ekstensi (akhiran) .CSS misanya namafile.CSS.
Pemanggilan file CSS dilakukan dengan menggunakan tag link:
<HTML>  <head>
 <title>Judul HTML</title>
<link rel=‚stylesheet‛ href=‚fileCSS.CSS‛ />
 </head> ...
Atribut rel adalah informasi hubungan (relationship) dari tag link tersebut, yaitu sebagai stylesheet. Href diisi dengan lokasi file CSS yang ingin dimuat. Pemanggilannya sama dengan pemanggilan gambar atau link.

 lalu contoh css yang akan saya bahas pertama yaitu adalah format spacing









 jadi letter-spacing digunakan untuk menspasi atau memberikan jarak pada setiap kalimat
sedangkan color untuk warna dari tulisan itu sendiri, beda dengan html di css di setiap baris kode nya menggunakan {} dan semi colon (;) atau bisa disebut titik koma









 ini adalah contoh css iniline yang menggunakan tag inline , bisa dilihat disini ada tulisan style =""



















ini adalah contoh penggunaan css secara external


Tugas sesi 9, membuat artikel
 saya disini membuuat artikel tentang player dota 2 yaitu secret.ace, dengan menggunakan html dan css berikut adalah screenshootdari kodinganya btw saya memakai teknik css nya yaitusecara external atau menggunkana file tambahan css






















sekian dari saya mohon maaf apabila ada kesalahan , sampai jumpa di lain kesempatan







Minggu, 19 Agustus 2018

By  No comments Edit This

Praktikum 8 - WEB


Haloo, kembali lagi ya di sesi web yang ke 8 ini , jadi disini saya mau ngeshare gimana cara menyajikan macem macem textarea , mulai dari textarea hidden ,textarea password dll. Disini saya akan share sebagian kodingannya saja tidak semua jika anda ingin melihat kodingannya anda bisa melihatnya Disini


Text area hampir mirip dengan text box. Perbedaannya adalah text area lebih dapat banyak menampung sebuah text lebih dari satu baris dari pada text box tag yang digunakan dalam membuat text area adalah 
<textarea name="alamat" rows="5" cols="40"></textarea>
  Anda bisa mengubah ukuran sesuai dengan keinginan anda (rows dan cols).
<textarea> tag yang digunakan untuk membuat tag area 
<input> adalah tag yang digunakan untuk menginput data contohnya adalah <input type = "textarea>
Form merupakan salah satu elemen dalam HTML yang digunakan untuk menerima input dari pengunjung. Melalui form pengunjung sebuah halaman web dapat melakukan interaksi dengan web. Pengunjung dapat memasukan data melalui elemen-elemen input seperti textfield, checkbox, radio button, textarea, submit button, dropdown dan lain-lain. Selain itu pengunjung  juga dapat melakukan pemilihan data mengunakan elemen select list atau dengan istilah lain combo box atau drop-down list. Form membuat sebuah halaman web menjadi web interaktif dan dinamis, karena form merupakan satu-satunya sarana bagi pengembang website untuk mendapatkan informasi dari pengguna.
<form>
Input elements
</form>

Ada dua atribut yang digunakan pada elemen form yaitu method dan action.
Method yang berfungsi sebagai pengiriman data pada server dengan cara ke tujuan yaitu :
- Get: mengirim data pada server dengan cara meletakan data pada bagian akhir URL yang ditunjuk.
- Post : mengirim datanya secara terpisah.
Perbedaannya, jika kita mengisi atribut method dengan get (dimana ini adalah nilai default seandainya kita tidak menuliskannya) maka isian form akan terlihat pada url browser. Method get ini biasanya digunakan untuk query pencarian. Method post biasanya digunakan untuk data yang lebih sensitif seperti yang berisi password, atau registrasi user. Data hasil form tidak akan terlihat pada browser.

Action yang berfungsi menentukan lokasi dari script yang akan memproses data dari form.
Struktur dasar form akan terlihat sebagai berikut:

<form action="logindata.php" method="post">
...isi form...
</form>

Elemen Input pada form
Elemen yang paling penting dalam form adalah elemen input. Elemen ini memungkinkan pengunjung memasukan data melalui halaman form yang datanya kemudian akan dikirimkan keserver. Ada banyak elemen-elemen input pada form, yang dapat digunakan oleh pengguna untuk mengisikan data dengan yang berbeda-beda jenisnya. Berikut ini saya akan membahas tiap-tiap elemen input  form, beserta dengan cara pembuatannya.
1.     Text Field
Elemen yang digunakan untuk memasukan text dalam satu baris. Lebar karakter defaultnya adalah 20 karakter.
Penulisan :< input type=”text” />



2.      Password Field
Untuk memasukan datu baris teks dengan format chiphertext/password. Dengan karakter yang disamarkan dengan bulatan atau tanda “*”.
Penulisan :< input type=”password” />
3.      Radio Button
Radio button digunakan agar dapat memilih salah satu pilihan. Contoh jenis kelamin (male or female).
Penulisannya :  Radio Button<input type="radio">

4.      Text Area
Digunakan sebagai input kontrol form untuk memasukan teks lebih dari satu baris. Elemen ini mempunyai atribut yaitu name, cols, dan rows.
Seperti dijelaskan berikut :
Nama                    = nama dari veriabel yang dikirim ke suatu aplikasi
Rows                     = panjang baris dalam karakter
Cols                       = tinggi kotak

Penulisannya : <text area>
                  Name=”name”
Cols=”number”
Row=”number”
...........
</text area>





berikut merupakan contoh text area yang tidak dapat disalin dan dapat disalin

5.      Check Box
Check Box digunakan untuk dapat memilih lebih dari satu pilihan.
Penulisannya: Check Box<input type="checkbox">

6.      Select List
Digunakan untuk menampilkan daftar pilihan dalam bentuk drop-down list.
Penulisannya :
<select>
......
</select>


7.      Submit Button
Digunakan untuk mengirimkan data dari halaman web ke server. Setiap elemen form membutuhkan tombol submit untuk mengirimkan nama dan nilinya ke suatu aplikasi yang di tentukan dalam  atribut ACTION dlam elemen FORM.
Penulisannya : Submit<input type="submit">




Berikut adalah kombinasi dari beberapa bagian 

ini merupakan login form sederhana dengan menggunakan input type text area dll.

sedangkan ini adalah login form lainnya yang saya buat menggunakan html&CSS dan Javascript,

 penggunaan javascript disini yaitu ketika user menklik Submit Button maka akan muncul pop up seperti ini

Berikut merupakan sedikit cuplikan kodingannya


Sekian saja dari sesi kali ini , mohon maaf apabila ada kesalaahan
sampai jumpa di sesi berikutnya

Kamis, 16 Agustus 2018

By  No comments Edit This

Praktikum 7 - WEB

Ya halohalo, kembali lagi bersama saya disini. Sama seperti sebelumnya saya disini akan membahas lagi tentang web programming atau web dev dan sebutan sebutan yang lain ya.
disini saya akan mencoba untuk menampilkan kepada kalian cara menampilkan Video dan Audio pada dokumen HTML kamu!.
ya langsung saja pada materinya, sebelum kalian melihat bagaimana, saya tidak akan memposting semua kodingannya disni , jika kalian inigin melihat kodingannya bisa dilihat Disini
sebelum melihat bagaimana disni saya akan menjelaskan atribut dan tag yang dipakai pada html


<audio>= adalah tag pertama digunakan untuk memuat sebuah audio atau musik dan hanya dapat memuat format audio saja contohnya yaitu mp3, wav  dll.
<video> = adalah tag pertama yang digunakan untuk membuat sebuah video dan hanya dapat membuat format video saja contohnya yaitu mp4, mkv, avi dll.
<source>  = adalah sebuah locator unutk mencari dimana video kita disimpan tag <source> tersebut dibarengin dengan atribut src = "Lokasi File"
disini saya juga akan menjelaskan atribut yang dipakai saat anda ingin memuat video atau audio dalam dokumen html kalian.
controls = atribut control ini dibarengi dengan tag audio maupun video yang fungsinya adalah secara kasar yaitu memberi kita hak untuk menyunting video atau audio dalam dokumen html contohnya adalah mengukur lebar dan tinggi pada video anda
height= yaitu atribut yang digunakan untuk menentukan tinggi pada video atau audio yang anda masukan dalam dokumen html
width =  yaitu atribut yang digunakan unutk menentukan lebar pada video atau audio yang anda masukan dalam dokumen html.
type = type adalah atribut yang digunakan untuk menjelaskan apa type atau format dari file tersebut jika video maka format  type nya bisa mp4,mkv dsb dan audio bisa mp3, wav dsb.





















ini adalah contoh tampilan ketika anda memasukan video kedalam dokumen html anda
anda jg bisa mengatur thumbnailnya


sedangkan ini adalah tampilan ketika anda memasukan  input audio pada dokumen html anda hanya terlihat bar dengan menit dan tombol play saja



PRAKTIKUM SESI 7
disni saya akan membuat biodata yang didalamnya terdapat video dan audio



saya mebuat halaman seperti ini

ini adalah contoh kodingannya
dikarenakan pada pada awalan sesi ini kami sementara dipertidakbolehkan menggunakan CSS atau cascadi style sheet yang nanti akan saya bahas di sesi sesi berikutnya, sehingga saya menggunakan space secara manual haha.


mungkin sekian saja dari sesi kali ini, mohon maaf apabila ada kesalahan, sampai jumpa di sesi berikutnya!!