Test Footer 2

zwani.com myspace graphic comments

Rabu, 06 Maret 2013

LOS Survey



Posted by: indra wiguna
LOS (Line of Sight) Survey di ibaratkan sebagai jarak pandang antara mata dengan objek yang dilihatnya. Survey MW (Microwave) atau TRM (Transmission) dilakukan untuk menghindari penghalang (Obstacle) dari sebuah lintasan sinyal dan menentukan apakah perangkat yang digunakan sesuai dengan yang dipersyaratkan. Dapat juga di definisikan sebagai aktivitas untuk memverifikasi kelayakan suatu jaringan telekomunikasi dengan tujuan menemukan titik spesifikasi pelanggan, tetapi juga mengoptimalkan cakupan dan meminimalkan biaya yang di keluarkan.

Sebelum perencanaan link, antenna dan seterusnya kita harus melakukan aktivitas ini untuk memprediksi bagaimana kita dapat menempatkan ketinggian antenna dari hambatan yang terlihat. Sebelum melakukan aktivitas ini dan untuk meminimalisir kesalahan biasanya team survey berangkat ke lokasi akan diberikan data berupa koordinat titik nominal untuk NE (Near end) dan FE (Far end) nya dari dari pemberi pekerjaan (Operator atau Vendor).



Persiapan LOS survey

Mempelajari map study. Sebelum melakukan survey, lebih baik kita mempelajari peta telebih dahulu untuk mengetahui seberapa jauh lokasi, letak daerah sebagai acuan dalam mengambil arah mana yang tercepat untuk sampai  ke lokasi tujuan. Sebagai alat bantu kita bisa menggunakan map atau study map. Setelah itu, periksa peta topografhic. Dari situ kita bisa menganalisa medan seperti gedung, sutet , pohon, gunung, lembah, bukit dan sebagainya. Sebagai alat bantu kita dapat menggunakan Global Mapper atau Google Earth.

Topology. Periksa kapasitas cross connect link pada existing site. Persiapan tersebut dibutuhkan untuk mengusulkan beberapa FE yang tersedia. Jika kapasitas penuh maka FE tidak dapat diajukan, kemudian periksa FE yang lainya untuk memastikan masih tersedianya kapasitas. Periksa perangkat atau equipment  dalam,  apakah masah ada tempat untuk penambahan link tersebut. Pilih beberapa site yang sudah ada sebagai FE dengan topografi, lokasi, dan link terdekat yang menjadi hub site. Akan lebih baik jika kita mensi mulasikan link dengan software (Pathloss) dengan mempertimbangkan ketinggian tower dan ketinggian antenna yang akan di pasang.

Pelaksanakan LOS survey

Tools yang digunakan. Seorang pelaksana survey di haruskan membawa (GPS,Compass, Clinometers Meteran, Camera, Mirror, Map Layout, Binocullar, Safety belt, Helm).

Titik koordinat. Masukkan koordinat di GPS dan biarkan perangkat menavigasi jalan ke lokasi tujuan. Routing fitur harus diaktifkan sehingga track diplot untuk mempelajari lokasi lebih lanjut. GPS harus dapat tersambung dengan komputer melalui MapSource, sehingga semua informasi dari GPS dapat disimpan di komputer juga sebaliknya. Pastikan lokasi site yang di kunjungi adalah benar, untuk menghindari terjadinya kesalahan usahakan datangi terlebih dahulu FE nya dan tandakan bidang tertinggi yang terdekat dari site FE tersebut.

Pengambilan gambar. Yang pertama dilakukan adalah pengambilan panorama, umumnya per 30 derajat dimulai dari 0 derajat sampai dengan 360 derajat. Pengambilan gambar harus 30 persen langit dan 70 persen bumi, bila new site naikilah bidang yang tinggi seperti pohon, gedung atau yang lainnya, carilah bidang yang terdekat dari titik koordinat. Kedua adalah pengambilan gambar dari NE ke FE atau sebaliknya, lakukan pengambilan dengan cara pembesaran, setengah, dan kecil, untuk memastikan adanya halangan atau tidak. Ketiga adalah pengambilan gambar untuk kondisi site, seperti lokasi site, akses jalan,  menara, perangkat, power, KWH dan trafo PLN terdekat.

Penentuan ketinggian. Pada existing site carilah posisi yang tersedia pada menara. Gambar kaki menara sangat diperlukan sebagai bahan analisa untuk pemasangan antenna MW sehingga kita dapat memprediksi sisi mana pada kaki menara yang masih ada tempat. Pada new site kita harus dapat memprediksi pada ketinggian berapa antenna tersebut akan dipasang, juga harus dapat memastikan tidak terjadi halangan ke sisi FE.

Pemetaan dengan gambar. Melakukan sketsa gambar lokasi site (site layout), lokasi peletakan perangkat dengan mengukur dimensi dari perangkat guna memastikan masih ada tempat kosong untuk penambahan perangkat baru. Sketsa gambar untuk (antenna layout) digunakan sebagai data pada saat ini dan yang akan datang. Kita harus memeriksa ketinggian, ukuran dan jenis antenna yang terpasang pada kaki menara. Untuk memudahkan penggambaran, berikan nama atau kode pada setiap kaki menara. Cara menentukan nya, yang pertama adalah milihat compass sisi arah utara, kaki menara yang memiliki nilai terkecil adalah kaki yang pertama dan untuk penentuan selanjutnya hanya dengan menyesuaikan kaki menara yang lain searah dengan jarum jam.

Tracking. Setelah posisi NE dan FE telah dikonfirmasi. Sekarang kita melacak di sepanjang jalan dari NE ke FE. Idealnya, kita harus mengikuti link pada garis lurus, untuk mengetahui jika ada halangan seperti gedung, menara, pohon, dan lainnya dengan mencari referensi ketinggian dari bidang tersebut. Namun  kendala ke daera  berbukit yang tidak dapat dikunjuni. Kita hanya menandai hambatan sepanjang jalur link dari tempat lain. Seiring pelacakan, kita melihat kondisi jalan apakah pemukiman, pertokoan, perbukitan,  perkantoran, pasar, pegunungan atau yang lainnya. Lihatlah dan ambil data di sepanjang jalur link untuk perhitungan penggunaan perangkat MW. 

Laporan akhir (Reporting)

Reporting. Merupakan pembuatan sebuah laporan dari hasil survey yang selanjutnya dilakukan untuk proses DRM (design review meeting) sebagai proses akhir untuk melakukan pembahasan mengenai hasil survey lapangan bersama pemberi pekerjaan (vendor atau operator). Untuk contoh reporting LOS survey bisa download disini sebuah report yang pernah saya kerjakan.

Sabtu, 09 Februari 2013

Unit Produksi

UNIT PRODUKSI
Visi dan Misi Organisasi Unit Produksi SMKN 2 Banjar

Visi
“Menjadikan Organisasi Unit Produksi Teknik Informatika SMK NEGERI 2 BANJAR sebagai barometer kemajuan teknologi di SMK NEGERI 2 BANJAR”
Misi
1.    Mengenalkan teknologi pada dunia luar.
2.    Menjadi penggerak bagi siswa/i di SMK NEGERI 2 BANJAR dalam pengenalan teknologi.
3.    Menjadikan siswa/i SMK NEGERI 2 BANJAR sebagai orang yang dapat menguasai teknologi

Kamis, 07 Februari 2013

Belajar HTML5 Canvas


Dalam tutorial belajar HTML5 kali ini kita akan membahas tentang html5 canvas. Canvas merupakan salah satu dari banyak feature di html5. Dengan canvas kita bisa melakukan drawing / menggambar sebuah object pada halaman web tanpa menggunakan image, pada canvas kita juga membuat sebuah animasi tanpa menggunakan bantuan third party aplikasi seperti flash.
Elemen canvas html5 ini bisa menggambar grafik dengan cepat melalui scripting (biasanya menggunakan javascript). Kanvas memiliki beberapa metode untuk path gambar, kotak, lingkaran, karakter, dan menambah gambar.
Browser yang support untuk html5 canvas ini adalah internet explorer 9, firefox, oprea, chrome dan safari. Canvas dispesifikasikan dengan elemen <canvas> sebagai berikut:
<canvas id=”myCanvas” width=”200″ height=”100″></canvas>
Elemen <canvas> tidak memiliki kemampuan menggambar sendiri. Semua gambar harus dilakukan di dalam JavaScript. Mari kit alihat sebuah contoh sederhana berikut ini.

Belajar Drag Drop pada HTML5


HTML5 selanjutnya adalah membahas tentang drag and drop. Drag dan drop adalah bagian dari html5 yang standard dan merupakan feature yang biasa digunakan, ketika anda “grab” suatu obyek dan menggesernya ke lokasi yang berbeda. Nah, di html5 semua elemen dapat di drag and drop. Browser yang support drag and drop adalah mozila firefox, internet explorer 9, google chrome dan safari 5.
Berikut ini adalah contoh sederhana dari drag and drop

Belajar HTML5 Audio


Setelah membahas tentang elemen video pada html5, termasuk DOM videonya, sekarang kita akan membahas html5 audio. Sebenarnya, sampai sekarang tidak standar dalam memutar file audio pada browser. Akhirnya sekarang ini banyak file audio yang diputar menggunakan plugin seperti flash dll. Bahkan, berbeda browser berbeda pula plugin-nya.
Pada html5 mendefinisikan elemen baru yang memungkinkan untuk embed sebuah file audio di browser menggunakan tag <audio> .
Sebagai contoh tag untuk audio adalah :

Membuat DOM pada Video HTML5


Pada artikel kali ini masih tentang video html5, yaitu cara membuat video/DOM menggunakan html5.
HTML5 Video juga mempunyai method, property dan event. Ada beberapa metode untuk bermain, berhenti, dan loading, misalnya. Ada sifat (misalnya durasi, volume, mencari) yang dapat membaca atau ditetapkan. Ada juga peristiwa DOM yang dapat memberitahu Anda, misalnya, ketika elemen <video> mulai bermain, pause, berakhir, dll. Oh ya, DOM adalah DOcument Object Model. DOM adalah antar muka standar yang tidak tergantung platform.
Contoh di bawah ini menggambarkan, dengan cara yang sederhana, bagaimana mengatasi elemen <video>, membaca dan mengatur properti, dan metode panggilan.
Berikut ini tampilan script yang harus di buat :

Belajar Elemen Video HTML5


Dari artikel yang saya jelaskan sebelumnya, mungkin anda sudah sedikit mengerti tentang html5 kan? Nah, untuk kali ini langsung saja kita akan membahas struktur elemennya. Yang pertama kali akan saya bahas adalah video html5.
Buat kamu yang baru masuk ke sini, coba pelajari dulu tutorial tentang belajar HTML5  dan Belajar Elemen HTML5 ini.
Video html5 elemen diperkenalkan dalam spesifikasi rancangan HTML5 dengan tujuan memutar video atau film. Sebagian fungsinya adalah menggantikan elemen objek (yang isinya skrip yang rumit). Video HTML5 dimaksudkan untuk menjadi standar baru dalam menampilkan video di web tanpa plugin. Intinya sih supaya lebih cepat loading ketimbang harus dengan plugin flash atau yang lain.
Standar HTML5 mencakup banyak fitur baru untuk aplikasi web dan antarmuka yang lebih dinamis. Salah satu komponen seperti disebut di atas yakni <video>. Dengan menggunakan Javascript HTML5 video kita dapat diputar pada perangkat-perangkat mobile terbaru dan bahkan di browser lama tanpa Flash. Youtube juga telah mencoba fitur baru ini tapi masih dalam taraf percobaan.
Untuk menampilkan video menggunakan html5, perhatikan script HTML5 berikut ini :

Belajar Elemen HTML5


Pada artikel serial html5 kali ini kita akan membahas tentang elemen – elemen yang ada pada html5. Oh iya sebelumnya saya jelaskan dulu kenapa HTML 4.01 diperbaharui ialah karena beberapa elemen dalam HTML 4.01 sudah usang, tidak pernah digunakan, atau tidak banyak memberikan manfaat, maka lahirlah HTML5. Silakan baca dulu tutorial tentang perbedaan HTML dengan HTML5 ini untuk lebih memperkaya latar belakang perubahan HTML menjadi HTML5.
Seperti contohnya pada elemen HTML5 untuk mendefinisikan video, seperti klip video atau video stream lainnya menggunakan tag <video>, mendefinisikan tag suara, seperti musik atau audio lain menggunakan tag <audio>, mendefinisikan konten tertanam, seperti plug-in menggunakan tag <embed>.
Ok, untuk lebih jelasnya berikut ini contoh – contoh elemen pada html5 :
Elemen Markup
TagPenjelasan
<article>Untuk konten eksternal, seperti teks dari artikel-berita, blog, forum, atau konten lain dari sumber eksternal
<aside>Untuk konten selain konten itu ditempatkan di samping konten yang masuk harus berkaitan dengan isi sekitarnya
<command>Sebuah tombol, atau radiobutton, atau sebuah kotak centang
<details>Untuk rincian menggambarkan tentang sebuah dokumen, atau bagian dari dokumen
<summary>Sebuah keterangan, atau ringkasan, dalam rincian elemen
<figure>Untuk pengelompokan bagian dari konten berdiri sendiri, bisa video
<figcaption>Keterangan dari tokoh bagian
<footer>Untuk footer dari dokumen atau bagian, dapat meliputi nama penulis, tanggal dokumen, informasi kontak, atau informasi hak cipta
<header>Untuk penerapan suatu dokumen atau bagian, dapat mencakup navigasi
<hgroup>Untuk bagian dari pos, menggunakan <h1> untuk <h6>, di mana yang terbesar adalah pos utama bagian tersebut, dan yang lainnya sub-judul
<mark>Untuk teks yang harus disorot
<meter>Untuk pengukuran, digunakan hanya jika nilai-nilai maksimum dan minimum diketahui
<nav>Untuk bagian navigasi atau menu
<progress>Keadaan pekerjaan berlangsung
<ruby>Untuk penjelasan ruby (catatan Cina atau karakter)
<rt>Untuk penjelasan tentang penjelasan ruby
<rp>Apa untuk menunjukkan browser yang tidak mendukung elemen ruby
<section>Untuk bagian dalam dokumen. Seperti bab, header, footer, atau bagian lain dari dokumen
<time>Untuk menentukan waktu atau tanggal, atau keduanya
Elemen Media
Try This: 4 Langkah Mudah Belajar Cara Membuat Website, Langsung Praktek! KLIK DI SINI!.
TagPenjelasan
<audio>Untuk konten multimedia , suara, musik atau streaming audio lainya
<video>Untuk konten video , seperti klip film atau Streaming video lainya
<source>Untuk sumber suatu media pada elemen media, menjelaskan didalam video atau media audio
<embed>Untuk mengisi embedded , contohnya seperti plug-in atau mengambil video dari Youtube.
Elemen Kanvas
Elemen kanvas menggunakan JavaScript untuk membuat gambar pada halaman web.
TagPenjelasan
<canvas>Untuk membuat gambar pada halaman web
Elemen Form
TagPenjelasan
<datalist>Daftar pilihan untuk nilai input
<keygen>Hasilkan kunci untuk mengotentikasi pengguna
<output>Untuk berbagai jenis output, seperti output yang ditulis oleh script
Input Type Attribute Values
Untuk kontrol input yang lebih baik sebelum mengirimnya ke server:
TipePenjelasan
telNilai input untuk nomor telepon
searchUntuk bidang pencarian
urlNilai input untuk memasukkan URL
emailUntuk mengisi email atau lebih dari 1 email
datetimeUntuk pengisian waktu dan tanggal
dateUntuk pengisian tanggal
monthUntuk pengisian bulan
weekUntuk pengisian minggu
timeUntuk pengisian waktu
datetime-localUntuk pengisian lokal waktu/tanggal
numberUntuk pengisian nomer
rangeUntuk pengisian rentang waktu
colorUntuk pengisian heksadesimal sebuah warna, contohnya #FF8800

Seperti yang saya jelaskan bahwa pada html5 ini adalah menyederhanakan html versi sebelumnya, untuk artikel selanjutnya adalah membahas struktur penyederhanaan pada html5.

Belajar HTML5


Ok, kali ini kita akan memulai belajar tentang HTML 5. Mungkin bagi anda yang sudah mengenal HTML bertanya-tanya, apa bedanya HTML dan HTML5? Dan apa keistimewaan HTML5 dibanding dengan HTML?
Baiklah, sebelum kita mulai tutorial belajar HTML5 kita, ada baiknya kita lihat dulu apa keistimiewaan dan perbedaan HTML dibanding HTML5.
HTML5 ini adalah standar baru dari HTML, yang dikembangkan oleh World Wide Web Consortium (W3C) dan Web Hypertext Aplikasi Teknologi Working Group (WHATWG). ebagaimana pendahulu sebelumnya yaitu: HTML 4.01 dan XTHML 1.1, HTML5 adalah sebuah standar untuk menstrukturkan dan menampilkan isi pada World Wide Web. Standar ini memperkenalkan fitur baru seperti memutar video serta drag and drop, Sebelumnya fitur ini bergantung pada plugins pihak ketiga di penjelajah web seperti Adobe Flash dan Microsoft Silverlight.
Nah, untuk itu ada beberapa aturan yang harus kamu pelajari saat belajar HTML5, yaitu :
  • Fitur baru harus didasarkan pada HTML, CSS, DOM, dan JavaScript
  • Mengurangi kebutuhan untuk plugin eksternal (seperti Flash)
  • Lebih baik penanganan kesalahan
  • Lebih banyak penggunaakn markup untuk mengganti scripting.
  • HTML5 harus independen
  • Proses development-nya harus terlihat untuk umum (visible)
Dalam HTML5 hanya ada satu <DOCTYPE> deklarasi, dan sangat sederhana, yaitu :
<!DOCTYPE html>
Dengan belajar HTML5 sebenarnya kamu akan mendapat banyakmanfaat. Misalnya kita akan mempelajari bahwa HTML 5 menyederhanakan banyak praktek coding yang digunakan dalam versi sebelumnya dari HTML. Sebagai contoh, ketika memulai sebuah file, Anda sebelumnya harus memulai dokumen sehingga tampak seperti ini:
Try This: 4 Langkah Mudah Belajar Cara Membuat Website, Langsung Praktek! KLIK DI SINI!.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/
Disederhanakan menjadi seperti dibawah ini:
<!DOCTYPE html><html lang=”en”>

Dibawah ini adalah contoh dari kesederhanaan HTML5 :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
The content of the document……
</body>

</html>

Okey, saya rasa cukup untuk pengenalannya sebelum kita mulai belajar HTML5. Jangan lewatkan untuk pantau terus web prothelon.com, karena saya akan membahas HTML5 lanjutan seperti tutorial tentang elemen HTML5 ini yang pasti sangat berguna dalam membangun web anda.
Selamat belajar HTML5!

Belajar Mengatur Border CSS

Pada materi belajar CSS sebelumnya yaitu box model css kita sudah membahas tentang border. Kali ini kita akan belajarborder CSS lebih dalam lagi. Pembahasannya kita fokuskan pada border style, border width dan border color.
Border style
Pada property border style, terdiri dari bermacam-macam bentuk border antara lain dotted, dashed, solid, double, groove, ridge, inset dan outset.
Border Width
Properti border width digunakan untuk mengatur lebar / ketebalan batas. Untuk pengaturan ketebalan suatu border bisa menggunakan pixels (px) atau bisa menggunakan salah satu ukuran yang biasa digunakan dalam css yaitu, thin, medium, atau thick (tipis, sedang, atau tebal). Dengan catatan property “border width” tidak bekerja jika digunakan sendiri, Gunakan “border style” terlebih dahulu untuk mengaturnya.
Contoh :
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
p.one
 
{
 
border-style:solid;
 
border-width:5px;
 
}
 
p.two
 
{
 
border-style:solid;
 
border-width:medium;
 
}

Border Color
Border color digunakan untuk mengatur warna border. Untuk pengaturan warna suatu border bisa menggunakan nama suatu warna (dalam bahasa Inggris tentunya) misalnya, blue, red, yellow, grey dll, atau bisa menggunakan RGB misalnya, rgb(0.51.26), atau HEX misalnya, #330000
Try This: 4 Langkah Mudah Belajar Cara Membuat Website, Langsung Praktek! KLIK DI SINI!.
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
p.one
 
{
 
border-style:solid;
 
border-color:red;
 
}
 
p.two
 
{
 
border-style:solid;
 
border-color:#98bf21;
 
}
Dengan CSS, kita bisa juga menentukan border yang berbeda untuk sisi yang berbeda dan bagaimana mewarnai border. Menarik bukan? Nah itu akan kita pelajari bareng di materi belajar CSS berikutnya.

Belajar Box Model CSS

Setelah selesai belajar dasar-dasar css beserta stylenya, sekarang kita mulai memasuki materi yang lebih advance lagi. Yang akan kita bahas kali ini adalah box css. Didalam html, semua elemen seperti p, div, h dan lain-lain pada dasarnya dianggap kolom kotak yang membungkus isi (html) didalam css, istilah “model kotak / box” digunakan ketika berbicara tentang design dan tata letak.
Ada beberapa property dalam box model CSS diantaranya Border, Padding, Margin dan content HTML itu sendiri. Setiap box model ini memungkinkan kita untuk membuat jarak antara yang satu dengan yang lainya, jadi dengan box model ini setiap kolom bisa di beri ukuran jarak antara satu dengan yang lainya sehingga kotak-kotak kolom tidak tampil menyatu dan tampak lebih bagus untuk di lihat. Agar lebih mudah memahami, berikut ini saya akan tampilkan ilustrasi box model :

box model Belajar Box Model CSS
Box Model CSS

Penjelasan :
  • Margin : memungkinkan kita untuk memberi jarak batas antara kolom kotak satu dengan yang lainya. margin tidak memiliki background warna (transparan)
  • Border – sama halnya dengan border memungkinkan kita memberi jarak bedanya border kita bisa mendefinisikan warna background
  • Padding – memungkinkan kita untuk membuat lapisan pada contet HTML, memiliki background tapi tergantung dari warna background content
  • Content – adalah isi seperti text dan gambar yang ada di kolom elemen HTML seperti div, p, h, dan lainnya
Penting untuk diingat, jika anda mengatur lebar dan tinggi menggunakan CSS, anda hanya mengatur lebar dan tinggi dalam content area. Untuk menghitung semua elemen, anda harus menambahkan padding, border dan margin.
?
1
2
3
4
5
6
7
width:250px;
 
padding:10px;
 
border:5px solid gray;
 
margin:10px;
Try This: 4 Langkah Mudah Belajar Cara Membuat Website, Langsung Praktek! KLIK DI SINI!.
Pada contoh kode diatas lebarnya bukanlah 250px, melainkan 300px. Hmm..kenapa bisa begitu? Sekarang marilah kita berhitung :
?
1
Lebar : 250px, batas kiri (margin:10px + border:5px + padding:10px) + batas kanan (margin:10px + border:5px + padding:10px) = 300px.
Contoh di atas sebenarnya tidak bisa ditampilkan dengan benar apabila menggunakan browser IE. Design CSS yang sudah mulus di browser lain banyak sekali berantakan di i.e dan sedikit yang tahu untuk menyelesaikan masalah ini. Untuk memperbaiki masalah ini, tambahkan saja DOCTYPE ke halaman HTML:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html>
 
<head>
 
<style type="text/css">
 
div.ex
 
{
 
width:220px;
 
padding:10px;
 
border:5px solid gray;
 
margin:0px;
 
}
 
</style>
 
</head>
Baiklah, selesai sudah belajar css tentang box model. Materi selanjutnya kita akan mengenal lebih jauh lagi tentang border. Outline, margin dan padding. Jadi jangan kemana-mana, tetap serius belajar css-nya yaa!

Belajar CSS Table, Mengatur Tabel dengan CSS

Seperti yang telah saya sampaikan di materi sebelumnya, materi belajar css kali ini membahas tentang belajar CSS table. Tabel yang terlihat biasa saja jika dibuat menggunakan html, akan terlihat lebih bagus dan meriah apabila menggunakan css. Tabel berguna sekali untuk memuat data agar terlihat lebih rapi. Untuk mengaplikasikan table dalam css, kita menggunakan table property. Contoh dibawah ini table menggunakan garis luar hitam, serta elemen th dan td
?
1
2
3
4
5
6
7
table, th, td
 
{
 
border: 1px solid black;
 
}
Okey, berikut ini property umum yang sering digunakan dalam table.
Border – Colaps , property ini digunakan untuk memformat tampilan border menjadi single atau double line.
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
table
 
{
 
border-collapse:collapse;
 
}
 
table,th, td
 
{
 
border: 1px solid black;
 
}
Border – Spacing, property ini digunakan untuk mengatur jarak spasi antara border dengan isi cell.
?
1
2
3
4
5
6
7
td
 
{
 
padding:15px;
 
}
Tabel text algiment , mengatur text dalam table. Untuk horizontal mengatur teks kanan, kiri atau tengah
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
td
 
{
 
text-align:right;
 
}
 
Sedangkan untuk texs align vertical mengatur teks keatas, bawah :
 
td
 
{
 
height:50px;
 
vertical-align:bottom;
 
}
Table – Color, digunakan untuk mengatur warna dar border, teks maupun background
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
table, td, th
 
{
 
border:1px solid green;
 
}
 
th
 
{
 
background-color:green;
 
color:white;
 
}
Try This: 4 Langkah Mudah Belajar Cara Membuat Website, Langsung Praktek! KLIK DI SINI!.
Nah, dengan berakhirnya materi CSS table ini maka berakhir juga materi belajar macam-macam style pada css. Sekedar untuk mereview, kita telah belajar dasar-dasar css dan juga style css. Saya yakin, anda sudah bisa bereksperimen dengan skrip-skrip css. Materi belajar css selanjutnya adalah mengatur model box atau kotak dalam css. Nantikan artikel-artikel kami selanjutnya!

Belajar CSS 7: Membuat Daftar atau List pada CSS

Sebagaimana sudah saya sampaikan sebelumnya, materi belajar css style berikutnya adalah membuat daftar CSS atau CSS List. Dengan CSS list kita bisa mengatur penanda yang berbeda pada baik pada ordered list (ditandai menggunakan angka atau huruf) maupun unordered list (ditandai menggunakan bullet) serta mengatur gambar sebagai penanda daftar / list.
Perhatikan contoh dibawah ini :
?
1
2
3
4
5
6
7
8
9
ul.a {list-style-type: circle;}
 
ul.b {list-style-type: square;}
 
  
 
ol.c {list-style-type: upper-roman;}
 
ol.d {list-style-type: lower-alpha;}
Kode dari nilai diatas adalah unordered list dan yang lainnya ordered list.
Untuk menggunakan gambar sebagai penanda list, gunakan list-style-image-property
?
1
2
3
4
5
6
7
ul
 
{
 
list-style-image: url('sqpurple.gif');
 
}
Dalam css list juga memungkinkan untuk menuliska semua property dalam satu yang disebut shortand-list. Seperti contoh kode dibawah ini :
?
1
2
3
4
5
6
7
ul
 
{
 
list-style: square url("sqpurple.gif");
 
}
Berikut ini adalah daftar dari list property:
Try This: 4 Langkah Mudah Belajar Cara Membuat Website, Langsung Praktek! KLIK DI SINI!.
  • List style : mengatur semua property dalam satu deklarasi
  • List style image : menentukan gambar sebagai penanda list
  • List style position : menentukan posisi didalam atau diluar konten
  • List style type : menentukan jenis / gaya list

Masih ada 1 macam css style yang perlu dipelajari yaitu css table yang akan saya sampaikan dalam tutorial belajar css berikutnya. Selamat belajar!

Postingan Lebih Baru Postingan Lama Beranda