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

23.30  Unknown  No comments

Read More

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.

18.38  Unknown  No comments

Read More

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

18.38  Unknown  No comments

Read More

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 :

18.37  Unknown  No comments

Read More

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 :

18.36  Unknown  No comments

Read More

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 :

18.34  Unknown  No comments

Read More

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

Tag	Penjelasan
<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!.

Tag	Penjelasan
<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.

Tag	Penjelasan
<canvas>	Untuk membuat gambar pada halaman web

Elemen Form

Tag	Penjelasan
<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:

Tipe	Penjelasan
tel	Nilai input untuk nomor telepon
search	Untuk bidang pencarian
url	Nilai input untuk memasukkan URL
email	Untuk mengisi email atau lebih dari 1 email
datetime	Untuk pengisian waktu dan tanggal
date	Untuk pengisian tanggal
month	Untuk pengisian bulan
week	Untuk pengisian minggu
time	Untuk pengisian waktu
datetime-local	Untuk pengisian lokal waktu/tanggal
number	Untuk pengisian nomer
range	Untuk pengisian rentang waktu
color	Untuk 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.

18.31  Unknown  No comments

Read More

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!

18.28  Unknown  No comments

Read More

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.

00.49  Unknown  No comments

Read More

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 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!

00.48  Unknown  No comments

Read More

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!

00.47  Unknown  No comments

Read More

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!

00.34  Unknown  No comments

Read More

Belajar CSS 6 : CSS Link

Setelah mempelajari CSS style font, mari kita lanjutkan belajar tentang CSS link. CSS Link dapat diatur dengan css property misalnya color, font family, background dan lain-lain.
Masih inget kan, materi HTML Link yang pernah kita bahas saat belajar HTML dulu? Nah materi ini kira-kira mirip dengan materi HTML Link namun, kita akan mencoba mengatur tampilannya dengan menggunakan CSS.
Langsung saja, disini saya akan memberikan contoh link menggunakan property text-decoration yang banyak digunakan untuk menghapus underline (garis bawah) dari link :

?

1 2 3 4 5 6 7

a:link {text-decoration:none;}   a:visited {text-decoration:none;}   a:hover {text-decoration:underline;}   a:active {text-decoration:underline;}

Sedangkan contoh yang dibawah ini adalah link yang menggunakan property background:

Try This: 4 Langkah Mudah Belajar Cara Membuat Website, Langsung Praktek! KLIK DI SINI!.

?

1 2 3 4 5 6 7

a:link {background-color:#B2FF99;}   a:visited {background-color:#FFFF85;}   a:hover {background-color:#FF704D;}   a:active {background-color:#FF704D;}

Materi belajar css style berikutnya adalah 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.

00.30  Unknown  No comments

Read More

Belajar CSS 5: CSS Font, Memanipulasi Huruf di CSS

Belajar CSS 5: CSS Font, Memanipulasi Huruf di CSS

Sesi belajar css kali ini membahas tentang css font yang merupakan salah satu dari css style. CSS font digunakan untuk mengatur tampilan font atau huruf pada website.

CSS Font Family

Didalam CSS terdapat 2 tipe nama CSS font family, yaitu :
- Generik family : Kelompok font family dengan tampilan yang sama (seperti “serif” atau “monoscope”)
- Font family : Font family khusus / tertentu ( seperti “times new roman” atau ‘arial”)
Font family merupakan pengaturan jenis huruf yang akan digunakan, Contoh pemakaian :

?

1	p{font-family:"Times New Roman", Times, serif;}

CSS Font Style

Style disini yang paling banyak digunakan adalah cetak miring, yang sebenarnya juga terdapat style normal dan oblique. Berikut syntak CSS font style:

?

1 2 3 4 5

p.normal {font-style:normal;}   p.italic {font-style:italic;}   p.oblique {font-style:oblique;}

CSS Font Size

Didalam mendesain web, mengatur ukuran font itu penting. Dengan menggunakan property ini, memudahkan kita untuk mengatur ukuran font berbeda-beda dalam satu halaman website. Disini kita akan belajar juga cara mengatur ukuran font dalam css. Jangan lupa untuk Selalu gunakan tag HTML yang tepat, seperti <h1> – <h6> untuk heading dan paragraf <p>. Nilai font-size bisa menjadi ukuran absolut, atau relatif.

?

1 2 3 4 5

body {font-size: 13px; } // satuan pixel   body {font-size: 1.5em; } // satuan em   body {font-size: 100%; } // satuan %

Contoh diatas bisa diaplikasikan di browser firefox, safari dan chrome tapi tidak bisa digunakan di aplikasi internet explorer. Nah untuk itu banyak developer web menyarankan menggunakan em daripada pixel. 1em sama dengan 16 pixel. Ukurannya dihitung dari pixel ke dalam em menggunakan rumus pixels/16=em. Contoh :

Try This: 4 Langkah Mudah Belajar Cara Membuat Website, Langsung Praktek! KLIK DI SINI!.

?

1 2 3 4 5

h1 {font-size:2.5em;} /* 40px/16=2.5em */   h2 {font-size:1.875em;} /* 30px/16=1.875em */   p {font-size:0.875em;} /* 14px/16=0.875em */

CSS Font Variant

Contoh Font Variant adalah membuat font besar semua, dimana pada css text terdapat text transformation. Contoh syntak CSS Font Variant:

?

1 2 3

p.normal {font-variant: normal; } // tulisan normal   p.besar {font-variant: small-caps; } // TULISAN BESAR SEMUA

CSS Font Weight

Penggunaan yang sering ditemukan pada style font weight, yakni membuat huruf tebal. Berikut syntak untuk CSS font weight:

?

1 2 3

p.normal{font-weight: normal;} // font normal   p.tebal{font-weight: bold; } // hasil tebal

Sebagai alternatif, sebenarnya bisa juga menggunakan tag <strong> atau <b> dimana fungsinya juga sama yakni membuat tulisan tebal.
Okey, tutorial belajar css tentang CSS font sudah cukup. Saya yakin anda akan semakin jelas dalam mempelajari css dan ketagihan belajar css

 

00.28  Unknown  No comments

Read More

Belajar CSS 4: CSS Text

Tutorial CSS text untuk pemula, ditulis dengan bahasa yang ringan dan mudah dipahami.
Dalam seri belajar css 3 lalu kita mempelajari warna css style background, Nah.. yang termasuk css style selain CSS background ada CSS text, CSS font, CSS link, CSS list dan CSS table. Kali ini kita akan membahas CSS Text. CSS text digunakan untuk mengatur tampilan teks dalam html, mulai dari text color (warna text alignment (posisi teks rata kiri, kanan, justify, atau center), text decoration (garis bawah), text transformation (text kapital atau huruf kecil), juga text indentation (posisi teks menjorok).
CSS text bisa digunakan untuk mengatur text color. Caranya bisa dengan menambahkan pada declaration syntak color=”warna”. Seperti contoh dibawah ini:

?

1 2 3 4 5

body {color:blue;}   h1 {color:#00ff00;}   h2 {color:rgb(255,0,0);}

Untuk mengatur posisi text, baik rata kiri, kanan, center, ataupun rata kanan kiri, maka syntak yang ditambahkan pada declaration CSS text yakni text-align=”nilai” dimana nilai bisa diisi left, right, center, justify
Contoh kode:

?

1	p {text-align:center;}

Properti text-decoration CSS text ini digunakan untuk membuat atau menghapus dekorasi dari teks.
Properti text-decoration banyak digunakan untuk menghapus menggarisbawahi dari link untuk tujuan desain, contoh :

?

1	a {text-decoration:none;}

Untuk lebih jelas akan CSS text decoration berikut ini kami contohkan penggunaanya. Teks Berkedip, inherit, Line throught, text tanpa efek, overline, garis bawah.
Syntak untuk ditambahkan pada declaration:

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

text-decoration:blink;   text-decoration:inherit;   text-decoration:line-through;   text-decoration:none;   text-decoration:overline;   text-decoration:underline;

Text transform adalah CSS text yang digunakan untuk menentukan huruf besar dan huruf kecil dalam sebuah teks.

Hal ini dapat digunakan untuk mengubah segalanya menjadi huruf besar atau huruf kecil, atau memanfaatkan huruf pertama dari setiap kata.

?

1 2 3 4 5

p.uppercase {text-transform:uppercase;}   p.lowercase {text-transform:lowercase;}   p.capitalize {text-transform:capitalize;}

Teks Identation digunakan untuk menentukan indentasi dari baris pertama dari teks. Yakni pada awal paragraf penulisan menjorok kekanan sesuai dengan besaran yang dikehendaki.

?

1	p {text-indent:50px;}

Cukup jelas kan penjelasan tentang css text? Kalau kita tekun, belajar css itu mudah kok. Nah seri berikutnya kita lanjut ke font style

00.24  Unknown  No comments

Read More

Belajar CSS: Mengganti Warna

Dalam belajar css seri 3 ini, saya akan menjelaskan tentang berbagai macam cara mengganti warna dalam css. Warna dalam css didefinisikan menggunakan hexadecimal (hex). notasi untuk kombinasi Merah, Hijau, dan nilai-nilai warna Biru (RGB). Nilai terendah yang dapat diberikan adalah 0 (hex 00). Nilai tertinggi adalah 255 (FF hex). Contoh mengganti warna dengan menambahkan tanda “#” bisa dilakukan dengan pola seperti ini:

?

1	I {color: #0000FF)

Atau mengganti warna CSS dengan nilai kombinasi RGB atau dalam nilai absolut terhadap persen, seperti ini :

?

1 2 3

I {color: rgb (0, 0, 255))   I {color: rgb (0%, 0%, 100%))

Kita dapat mengubah kombinasi warna CSS sesuai dengan gaya yang kita sukai.

?

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

<HTML>   <HEAD>   <STYLE TYPE="text/css">   .blue {color: cyan; background-color: #FF8000}   .green {color: lime; background-color: black}   </STYLE>   </HEAD>   <BODY>   <P CLASS="blue">   Mari kita lanjutkan belajar css   <P CLASS="green">   Setuju, dengan belajar css, semuanya menjadi mudah   </BODY>   </HTML>

Ada 16 ribu lebih warna yang berbeda pada kombinasi merah, biru, dan hijau. So, apabila kita mempunyai kreasi seni yang tinggi kita akan dapat membuat kombinasi jutaan warna untuk memperkaya situs kita.
Nah, sekarang kita akan lihat bagaimana css mengimplementasikan warna pada background situs yang kita buat.

?

1	body {background-color:#b0c4de;}

Oh iya, kita langsung lanjut belajar mengimplementasikan background pada css ya! Terdapat macam-macam background property pada css yaitu :
* Background-color, mengatur warna background
* Background-image, mengatur gambar background
* Background-repeat, Mengatur bagaimana gambar pada background akan diulang

Try This: 4 Langkah Mudah Belajar Cara Membuat Website, Langsung Praktek! KLIK DI SINI!.

* Background-attachment, Mengatur apakah gambarnya akan tetap (fixed) atau tidak
* Background-position, mengatur dai mana posisi awal dari gambar.
Properti background-color CSS untuk menspesifikasikan latar belakang warna pada suatu elemen. Contohnya seperti yang terlihat diatas tadi.
Sedangkan properti background image untuk menspesifikasikan latar belakang gambar pada suatu elemen. Secara default, gambar akan diulang sehingga akan menutupi seluruh elemen halaman web.

?

1 2 3 4 5 6 7 8 9

body {background-image:url('paper.gif');}   [/body]   Dibawah ini, contoh dari kombinasi yang salah antara text dan gambar, textnya hampir tidak terlihat:   [html]   body {background-image:url('bgdesert.jpg');}

Kode dibawah ini untuk mengatur posisi background :

?

1 2 3 4 5 6 7 8 9

body   {   background-image:url('img_tree.png');   background-repeat:no-repeat;   }

Well, belajar mengatur background pada css saya rasa cukup, Pada seri belajar CSS berikutnya kita akan belajar tentang pengaturan font dan text.

00.22  Unknown  No comments

Read More