cyber media april

1 Media Sharing Bersama

Cyber MediaDaftar Isi

REDAKSICYBER MEDIA

INTERNET CLUB

Pelindung :Dr. Bambang Suko Priyono. M.M

Pembina :Eka Ardhianto, S.Kom, M.Cs

Penanggung Jawab :Fitri Cahyanti

Pimpinan Redaksi :Novi Fairuz Zuhria

Editor :Eka Puji Lestari

Layout :Ika Rinawati

Redaksi :Departemen Internal

Internet club

Daftar isi........................1Salam Redaksi...............2Topik Utama..................3Tutorial...........................6Pemrograman...............19Puisi...............................21Komik.............................22Kesehatan....................23Blog Walking................25Multimedia...................27Cyber Voice.................30

Daftar Isi :

Cyber Media : Diterbitkan oleh UKM Internet Club Universitas Stikubank. Bagi perusahaan yang berminat bergabung dan berkerja sama dalam kegiatan Internet Club dapat menghubungi Redaksi. Redaksi terbuka dan menerima artikel atau naskah apapun. Naskah bisa berupa softcopy atau hardcopy dan dikirim ke alamatRedaksi : UKM Internet Club Lt.1 Universitas Stikubank atauemail : [email protected]

2Media Sharing Bersama

Cyber Media Salam Redaksi

Puji Syukur kami panjatkan kepada Tuhan Yang Maha Esa karena berkat rahmat dan hidayah-Nya kami redaksi Cyber Media dapat

menerbitkan majalah edisi ini. Kami selalu berusaha untuk memberikan yang terbaik dan ide-ide yang menarik untuk disimak oleh para pembaca Cyber Media setiap bulannya.

Pada edisi kali ini, Cyber Media akan mengulas mengenai suatu bahasa dalam pengaturan tata letak pada web, yaitu CSS (Cascading Style Sheet). Selain membahas CSS, pada majalah ini juga terdapat tutorial PHP, tips dan trik, info kesehatan, dan masih banyak lagi informasi yang kami harap dapat bermanfaat bagi para pembaca semua.

Kami dari redaksi mohon maaf apabila ada kesalahan dalam penyampaian maupun penulisan kata.

Selamat membaca dan Semangat pagi!

Kritik & Saran : [email protected] Contact Person : 08999226457 (Novi)

@CyberMediaMagz

cybermediamagz

cybermediamagz.blogspot.com

http://issuu.com/cybermediamagz


Cyber MediaTopik Utama

Apa itu CSS ? Pernahkan Anda mendengar kata CSS sebelumnya? Mungkin diantara pembaca sudah pernah mendengarnya, atau bahkan baru tahu kata CSS saat membaca majalah ini. Mari kita mencoba mengenal CSS melalui

Cyber Media edisi kali ini.CSS merupakan kepanjangan dari Cascading Style Sheet, yaitu suatu aturan atau bahasa untuk mengendalikan beberapa komponen di dalam web agar terstruktur dan bertanggung jawab dalam layout yang enak di mata pengunjung melalui browser internet.

Aturan ini dapat mengendalikan semua parameter web mulai dari ukuran gambar, warna mouse over, warna table, warna border, dan masih banyak lagi. Selain itu, CSS juga dapat menampilkan halaman yang sama dengan gaya penataan letak berbeda dan dapat diikut sertakan pada file HTML. Untuk para blogger ataupun programmer, mungkin untuk ahli dalam CSS bukanlah suatu hal yang penting karena template bisa didownload.

Sejarah CSS

CSS menjadi bahasa standart pembuatan dokumen web pada tanggal 17 Agustus 1996 oleh World Wide Web Consortium (W3C). Tujuannya adalah untuk mengurangi pembuatan tag-tag baru dalam pengaturan tampilan web karena CSS diletakkan secara berurutan seperti bentuk hubungan ayah-anak (parent-child).

Perkembangan

Dalam perkembangannya, CSS mengalami perubahan dalam beberapa versi.


Cyber Media Topik Utama

• Versi pertama (CSS1) dikembangkan dengan lebih berfokus pada pemformatan dokumen HTML.

Pada versi ini mendukung pengaturan tampilan font (style, ketebalan), elemen (warna, posisi teks, background, gambar, table), text attributes (spasi antar baris, antar kata dan antar huruf), margin, border, dan lainnya.

• Versi kedua (CSS2) muncul pada tahun 1998 sebagai wujud dari penyempurnaan CSS1.

Versi ini dikembangkan untuk memenuhi kebutuhan terhadap format dokumen agar bisa ditampilkan ke printer. CSS2 mendukung pengaturan posisi konten, table layout, media printer, access download, dan lainnya.

• Versi ketiga (CSS3)


Cyber MediaTopik Utama

berfokus pada desain websitenya. CSS3 mendukung penampilan animasi pada halaman website (animasi warna ataupun animasi 3D), kompatibel pada smartphone, media query, multiple background, border-radius, drop-shadow, border- image, CSS Math, CSS Object Model, dan masih banyak lagi.

Kelebihan CSS

Penggunaan CSS memiliki beberapa kelebihan, yaitu :1. Halaman web Anda menjadi SEO friendly.2. Dapat disisipkan dalam HTML.3. Dapat digunakan dengan JavaScript.4. Meringankan beban loading web.5. Mudah mengganti layout web dengan hanya merubah CSSnya saja.

Kekurangan CSS

1. Tidak didukung oleh browser lama.2. Kurang cepat dipahami dibandingkan dengan bahasa pemrograman lain dan memerlukan waktu lama untuk menguasai.3. Tata letak dapat berubah jika dilihat di berbagai browser yang berbeda.

Demikian topik utama kali ini. Semoga menjadi pengenalan singkat yang dapat membuka gerbang semangat Anda.

Selamat membaca.

Author : Novi Fairuz ZEmail : [email protected]


Cyber Media Tutorial

Tutorial Pembuatan Website dengan CSS dan PhotoshopPengenalan dasar CSS Dalam tutorial kali ini akan dijelaskan mengenai apa itu CSS, fungsi CSS, dan cara pembuatan CSS.Pertama yaitu “apa itu CSS?”Cascading Style Sheet merupakan script yang digunakan untuk menata Markup Language (HTML) dari website itu sendiri.Kedua yaitu “fungsi dari CSS?”CSS juga digunakan untuk mempercantik tampilan dari sebuah web sehingga rapi dan menarik designnya.Secara mudah CSS juga digambarkan sebagai baju dari seorang manusia yang berfungsi sebagai pelengkap dan juga mempercantik tubuh manusia itu sendiri (HTML).

CSS dapat diterapkan dengan dua cara, yaitu:1. Internal Script CSS dimasukkan langsung ke dalam website yaitu ke dalam HTML yang akan dibuat atau didesain.2. External Yang dimaksud dengan external yaitu memanggil file CSS yang sudah jadi ke dalam website yang ingin diberi efek CSS. Khusus untuk external alamat file CSS harus diletakkan diantara tag <head>. Dan untuk memanggil script CSS yang sudah dibuat yaitu menggunakan name class yang sudah dibuat dengan menggunakan tag tertentu . Contoh Penulisan script Internal <div id=”nama id’><div>, <div class =”nama class”></div> Script External <link rel =”stylsheet” href=” alamat file css” type =”text/css”/>


Cyber MediaTutorial

Setelah pengenalan CSS di atas. Langkah pertama yang dibutuhkan untuk membuat website sesuai dengan judul mengenai “Tutorial Pembuatan Website dengan CSS dan Photoshop” langsung saja kita mulai.

Langkah Pertama

Membuat desain terlebih dahulu dengan photoshop, caranya pilih file-new kemudian setting dengan ukuran width: 720px, height: 875px, resolution 72px/inch, dan background contens: transparent.

Pilih rounded retagle tool panel yang akan terlihat seperti gambar di bawah ini:



Buat bidang seperti gambar di bawah ini yang akan digunakan untuk background dan jangan lupa settingannya.

Klik kanan pada layer pertama, pilih Blending Option sampai muncul kotak dialog seperti di bawah ini.


Cyber MediaTutorial

Kemudian sesuaikan tampilan background seperti ini :

Hasilnya:



Langkah kedua

Setelah pembutan background, dibutuhkan tombol navigasi yang digunakan untuk menghubungkan antara halaman web satu dengan yang lainnya. Langkah-langkahnya hampir sama seperti di atas, yang dilakukan pertama pilih Rectangle Tool.

Lalu buat tombol navigasi sesuai keinginan atau samakan ukuran dengan gambar di bawah ini dan jangan lupa atur radius 5px dan berilah warna sesuai keinginan.


Cyber MediaTutorial

Kemudian copy tombol navigasi tadi sebanyak tiga kali yaitu dengan cara “ctrl+alt+shif “ dan geser ke kanan 3 kali. Nanti akan tampak seperti gambar di bawah ini.

Kemudian isi daftar navigasi tadi dengan memilih “Horizontal Type Tool”.

Isi text pada bidang untuk daftar navigasi dengan : Home, Artikel, About, Other.



Langkah ketiga

pembuatan logo dan juga footer. Footer itu sendiri adalah bagian bidangnya berisi informasi singkat mengenai “copy right “ mesin pencari dan mengenai informasi kecil soal blog atau website itu sendiri.Buatlah seperti tadi, pilih “Rounded Rectangle Tool” lalu buat seperti gambar di bawah ini :


Cyber MediaTutorial

Langkah selanjutnya yaituprose slice pilih “Slice Tool”.

Kemudian potong gambar yang sudah kita buat menjadi 7 bagian.

Kemudian pilih file klik save for Web & Devise.



Setelah itu klik tombol save dan akan muncul kotak dialog seperti di bawah ini dan klik save lagiDengan format “HTML and Images”.

Dan proses ini adalah akhir dari Layout web dan akan dilanjutkan dengan proses penambahan CSS di dreamwaver.

Langkah pertama buka Dreamweaver kemudian buka file index.html.yang telah kita save pada sesi photoshop dengan cara pilih File->Open setelah file index.html dibuka pada dream weaver delete gambar slice yang keenam atau gambar dengan nama index_06.gif, yaitu gambar yang digunakan untuk isi content. Setelah didelete maka tata letak web kita nanti akan berantakan.


Cyber MediaTutorial

Setelah anda mengatur tata letak gambar pada tabel, pindahkan opsi view ke show code view sehingga Anda dapat melihat Tag-tag Mark-up HTML seperti berikut :

Nah selanjutnya kita Modif tag HTML dengan menambahkan Cascading Style Sheets (CSS).

<html><head><title>index1</title><meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1”><style type=”text/css”>.content {background:url(images/index1_06.gif); height:600;padding:0px 10px 20px 10px;}</style></head><body bgcolor=”#FFFFFF” leftmargin=”0” topmargin=”0” marginwidth=”0” marginheight=”0”>

<table id=”Table_01” width=”720” height=”875” border=”0” cellpadding=”0” cellspacing=”0” align=”center”> <tr> <td colspan=”4”> <imgsrc=”images/index1_01.gif” width=”720” height=”139” alt=””></td> </tr> <tr> <td> <imgsrc=”images/index1_02.gif” width=”123” height=”53” alt=””></td> <td> <imgsrc=”images/index1_03.gif” width=”197” height=”53” alt=””></td> <td> <imgsrc=”images/index1_04.gif” width=”196” height=”53” alt=””></td> <td> <imgsrc=”images/index1_05.gif” width=”204” height=”53” alt=””></td> </tr> <tr> <td colspan=”4” class=”content”><p> </p></td> </tr> <tr> <td colspan=”4”> <imgsrc=”images/index1_07.gif” width=”720” height=”83” alt=””></td> </tr></table></body></html>


Cyber MediaTutorial

Dengan demikian maka kerangka website Anda sudah jadi. Langkah selanjutnya kembalikan tampilan dreamweaver ke design view “Show Design View” kemudian isi bagian kolom content dengan hal-hal yang ingin Anda publikasikan pada website Anda. Setelah selesai save index.html, lalu save as dengan nama file yang berbeda about.html pada folder yang sama, save as lagi dengan nama file artikel.html dan yang terakhir other.html. Sehingga kini Anda memiliki 4 (empat) file html yang berbeda (semuanya harus dalam folder yang sama).

Isi kolom content pada masing-masing file yang sudah Anda buat sesuai dengan tema masing-masing file, yakni isi halaman utama website, tentang kita, galeri dan link. Penulis contoh kan di bawah merupakan isi halaman utama.



Langkah terakhir setelah mengisi semua file adalah menghubungkan/melink-an file yang satu dengan yang lain. Caranya mudah saja. Klik setiap menu link pada website kita lalu pada properties pilih link dan click icon folder seperti dilihat pada gambar di bawah :

Pilih file yang ingin dihubungkan. Lakukan hal yang sama dan hubungkan semua file. Selesailah project website menggunakan CSS yang Anda rancang sendiri.

Selamat berkreasi.

Author : AilsaEmail : [email protected]


Cyber MediaPemrograman

PHP Lanjutan Edisi Maret

VARIABEL Variabel digunakan untuk menyimpan nilai atau data, seperti String atau Number. Variabel dapat digunakan berulang-ulang

dan nilainya dapat berubah-ubah.Penulisan variabel dimulai dengan simbol $.Cara penulisan variabel$nama_var = nilai ;

Contoh program tipe data

Dalam PHP, tipe data tidak perlu dideklarasikan terlebih dahulu oleh programmer, akan tetapi sudah ditentukan secara

otomatis. Anda dapat menuliskan fungsi gettype() untuk mengetahui tipe data dari nilai yang akan Anda berikan.

Pendeklarasian Tipe Data

Contoh penggunaan variabel

<?php$a = 0.3;$b = -3;$c = “Fatih”;echo “$a adalah type data “. gettype($a).”<br />”;echo “$b adalah type data “. gettype($b).”<br />”;echo “$c adalah type data “. gettype($c).”<br />”;?>


Cyber Media Pemrograman

1. Tipe Data Integer

Tipe data integer adalah tipe data yang berguna untuk menyimpan bilangan bulat, bukan desimal. Sebagai contoh (1), (2), (3), (4), (5), (-1), (-2), (-3), (-4) dan lain- lain. Tipe data ini memiliki range antara -2, 147, 483, 648 sampai dengan +2, 147, 483, 648 platform 32bit.2. Tipe Data Double / Floating Point Number

Tipe data floating point numbers biasa juga disebut dengan “double”, ” float” atau “real” adalah tipe data yang berguna untuk menyimpan bilangan desimal. Sebagai contoh (0.1), (1.3), (1.7), (1.8), (9.7), (2.4) dan lain-lain.

Contoh Penulisan tipe data float

<?PHP$a = 2.9;$b = 7.4;Echo”$a+$b”;?>

Sekian pembahasan PHP Dasar kali ini. Semoga bermanfaat dan selamat mencoba.

Author : Raclien CamelianaEmail : raclien@internetclub. or.id


Cyber MediaPuisi

Author:BoyGardenEmail :sutaman@internetclub. or.id

JUARA

sebuah kata tak bermakna tapi resapilah,niscaya kata itu kan menjadi bara yang membakarmu.ini lah kata kata TAK BERMAKNA itu...

saat mentari terbangunmulailah berlari mengejar kehangatannyasaat rembulan bersinar,tetaplah berlari walau matamu ingin terpejam...

berpikirlah s’lalubahwa dipeluk matamuada cahaya yang ingin kau gapai sejak dulu....

tak perlu mendengar suara sumbang.tutup telingamu,dan lanjutkan berlari tuk menggapai cahayadan jika kau ingin menjadi JUARAbekerjalah lebih keras dari orang lainkarena JUARA itu SATUbukan DUA atau TIGA,,.

TAMAN ASMORO

tetesan air langit inimenemani langkah kitamenuju “TAMAN CINTA”

saat langkahmu mulai beratbersandarlah sejenak dipundakkukan ku hapus peluh keringat di dahimulalu kan ku tuntun kembalikau ke “TAMAN CINTA”

aku memang tak sempurna,tapi aku sempurna bila kau di sampingku...

kini kita t’lah sampai di depan pintu gerbang “TAMAN CINTA”tinggal selangkah lagi kita kan menikmati keindahan “TAMAN CINTA”tetaplah bersamakutuk menelusuri “TAMAN CINTA” ini


Cyber Media Komik


Cyber MediaKesehatan

Bahaya Begadang Bagi Kesehatan Tubuh Setiap orang pasti pernah mendengar kata “Begadang” atau bahkan dari Anda sering melakukan hal itu. Rubrik kesehatan kali ini akan mengulas mengenai bahaya begadang. Kesehatan tidak bisa tergantikan oleh apapun. Kita harus belajar untuk menjaga kesehatan agar tetap sehat dan semangat menjalani aktifitas. Salah satu kegiatan yang dapat merusak kesehatan kita adalah begadang. Seperti apakah efek samping dari begadang? Sewaktu muda tidak akan terasa apa- apa, tetapi setelah tua, barulah akan menyesal. Maka dari itu kali ini akan berbagi hal tentang bahaya begadang. Langsung saja kita baca ulasan berikut ini.

1. Mengurangi Konsentrasi. Konsentrasi Anda akan terus menerus berkurang secara perlahan. Apakah ini masalah? Tentu saja. Dengan begitu produktivitas

Anda akan berkurang, padahal Anda sadar kalau Anda masih sangat muda dan masih mampu untuk bekerja keras.

2. Mudah Terserang Penyakit.

Percayakah Anda? Tim medis di seluruh dunia sudah berani membuktikan kalau begadang bisa membunuh sel Antibodi. Dengan begitu tubuh Anda tidak akan memiliki penangkal virus. Bersamaan dengan itu, Anda akan sangat mudah terkena penyakit apapun.


Cyber Media Kesehatan

3. Cepat Tua. Anda akan terlihat lesu di segala kondisi. Akibatnya Anda jadi tidak energik lagi. Dengan begitu akan banyak orang yang menilai anda sudah tua.

4. Mudah Stres. Masih berhubungan dengan nomor 3, Anda akan mudah stres. Anda akan sering merasakan beratnya beban hidup ini. Dengan banyak begadang, maka otak Anda akan sulit fresh.

5. Gemuk Malam hari merupakan waktu dimana sistem pencernaan bisa mencerna ‘lebih’ dibanding siang hari. Anda yang terbiasa

begadang, biasanya tidak akan lepas dari makanan ringan.Padahal makan di malam hari atau ngemil bisa membuat Anda gemuk. Percayalah!

Author : MamanEmail : sutaman@internetclub. or.id


Cyber MediaBlog Walking

Bocah Poris Blog Blog ini berisi segala macam tutorial mengenai bahasa pemograman dan bahasan lainnya. Di blog ini juga mengulas tentang CSS dasar sampai ke tingkat advance. Ingin tahu lebih jelasnya mengenai blog ini silahkan kunjungi :www.bocahporis.blogspot.

Media blogger Blog ini mengulas tentang SEO tetapi di samping itu juga terdapat tutorial dasar membuat tampilan sebuah website dengan menggunakan CSS. Bagi Anda yang ingin tahu lebih dalam mengenai CSS dapat mengujungi blog tersebut dengan alamat sebagai berikut :www.impoint.blogspot.com.


Cyber Media Blog Walking

Panduan Template Blog Blog yang mengulas tentang cara mudah dalam membuat sebuah blog dari dasar. Mulai HTML, CSS dan variasi blog. Kunjungi saja www.panduantemplateblog.blogspot.com dan mulailah berkreasi dalam membuat blog.

Tekno Life Blog ini banyak mengulas tentang HTML dan CSS. Dari CSS dasar sampai perkembangannya. Ingin belajar mengenai CSS kunjungi saja www.tecno-yes.blogspot.com.

Author : Arwan NEmail : [email protected]


Cyber MediaMultimedia

Indirect LightingSemangat Pagi! Pada edisi kali ini, rubrik multimedia akan membahas mengenai Indirect Light. Langsung saja ya. Yang akan dibahas di sini adalah mengenai lighting tetapi menggunakan salah satu objek pada blender. Objek yang akan digunakan adalah objek cube yang nantinya akan kita jadikan lampu.

• Oke langkah pertama, kita buka dulu blender application. Setelah dibuka, klik add pilih mesh kemudian klik cube pada menu kiri atas atau bisa juga menggunakan shorcut dengan menekan sift+A dan pilih Mesh klik cube.

• Kubus yang tadi sudah kita add, tarik ke atas menuju sumbu Z agar kubus yang ada

di tengah permukaan berada di atas permukaan.

• Kemudian kita tambahkan lagi objek Plan dengan mentekan Sift+A, pilih mash klik plan.

• Besarkan objek Plan dengan menekan S (Scale) kemudian tarik keluar.


Cyber Media Multimedia

• KitaklikmenuWorldpadamenudisebelahkanan.

• SelanjutnyakitacentangpadaInderectLighting.

• Padacontrolathorizon,kitagantiwarnayangabu-abu

menjadiwarnahitam.Caranya,kliksajaterussampaimemilihwarnahitam.

• Kemudianlanjutkanpadasamplingpassesdigantimenjadi5sampling.

• Setelahsemuanyaselesaikitamasukkematerialsdengancaraklikmenumaterials.


Cyber MediaMultimedia

• Kubusyangtadisudahkitasiapkan,kitaberiwarnasesuaiselera.Disinipenulismem-berikancontohwarnamerah.

• Padabagianmenushading,dibawahnyaadaemit.Pilihemitdanberivalue2.00,makapadamaterialswarnanyaakanberubahmenjaditerang.Sema-kinbanyakvalueemitmakaakansemakinterangobjeknya.

• Oke.Cobakitalihatmeng-gunakanviewcamera.Kliksajaviewyangadapadamenubagianbawah.klikkamera.

• Jikaposisikamerasudahses-uai,langsungkitarendersajadenganmenekantombolF12padakeyboard.

Lightingnyasudahjadi.Selamatmencobadanselamatberkreasi.

Author:AgungSugondoEmail :agungs@internetclub. or.id


Cyber Media Cyber Voice

Nama : YogaFakultas : EkonomiSalam sapa : Buat anak-anak B1 jangan lupa selalu woles. Kritik saran : keamanan kampus harus ditingkatkan.

Nama : DyahFakultas : EkonomiSalam sapa : Buat anak-anak WC(Wanita Cantik) sehat selalu.Kritik saran : Kampus jangan pelit sama UKM donk.

Nama : SerliFakultas : EkonomiSalam sapa : Para dosen ngajarnya slow aja tho..Kritik saran : kantin diperlebar donk, biar tambah nyaman .

Nama : BudiFakultas : TISalam sapa : Cinta selalu ingat aku ya.Kritik saran : Perhatian kampus harus lebih lagi untuk UKM.

Nama : ArdiFakultas : TISalam sapa : Prend woles ya buat nyelesain masalahnya.Kritik saran : Info beasiswa harus lebih dipublikasikan lagi.

Nama : UlfaFakultas : EkonomiSalam sapa : Buat bebebku selalu cinta sama aku ya..Kritik saran : Perlu ada tempat yang hijau dikampus mugas...

Nama : RicoFakultas : EkonomiSalam sapa : Pokoknya seneng rewo-rewo.Kritik saran : Kampus harus menyediakan tempat parkir yang memadai.

Nama : AskaFakulta s : TISalam sapa : Buat para anak kendal sehat selalu.Kritik saran : Perlu perluasan basecamp UKM.

cyber media april

Documents

world wide web consortium

ukm internet club lt

gaya penataan letak

css diletakkan secara

untuk mengurangi pembuatan

css cascading style

baru tahu kata css

cyber media edisi kali