proBlogiz

Pemahaman tentang HTML, HTML Dasar, Cara Buat Website


Pemahaman tentang HTML, HTML DasarHTML adalah "bahasa ibu" dari browser Anda.
HTML digunakan untuk membuat sebuah website.
Dengan HTML, dapat menggambarkan struktur halaman menggunakan bahasa markup, seperti “paragraph,” “list,” “table,” "heading", "text", "photos",  dst.
Web browser (seperti Google Chrome, Internet Explorer, Firefox, Safari) akan membaca dokumen HTML dan menampilkannya sebagai halaman web.
Browser tidak menampilkan tag HTML, tetapi menggunakan tag itu untuk menafsirkan isi halaman web tersebut.

Jadi apa sebenarnya HTML itu?

HTML adalah singkatan dari Hyper Text Markup Language.

Hyper Text :  metode dimana Anda dapat bergerak leluasa di web - dengan mengklik pada sebuah teks khusus yang disebut "hyperlink" yang membawa Anda ke halaman berikutnya. Kata hiper itu sendiri berarti tidak linear - yaitu Anda dapat pergi ke tempat manapun di Internet kapanpun Anda inginkan dengan hanya mengklik sebuah link (sebuah teks yang berfungsi sebagai link)

Markup Language : adalah apa yang tag HTML lakukan dengan text, ini sama seperti Anda menandai bold text, italics text, headings, bullets, dst. ( cara penulisan informasi tata letak dalam dokumen )

HTML adalah bahasa markup.
  • Sebuah bahasa markup terdiri dari seperangkat markup tag
  • Tag menggambarkan isi dokumen (document content)
  • Dokumen HTML berisi HTML tags dan plain text (teks biasa)
  • Dokumen HTML ini juga disebut halaman web (web page)

Contoh sebuah dokumen HTML sederhana:
<!DOCTYPE html>
<html>
<head>
<title>Judul Website</title>
</head>
<body>
<h1>First Heading</h1>
<p>First paragraph</p>
</body>
</html>
Keterangan :
!DOCTYPE deklarasi mendefinisikan jenis/versi dokumen (ini contoh versi terbaru HTML5)
Teks antara tag <head> dan </ head> merupakan wadah untuk semua elemen head
Teks antara tag <title> dan </title> menjelaskan nama/judul website
Teks antara tag <html> dan </ html> menjelaskan halaman web
Teks antara tag <body> dan </ body> adalah isi halaman yang terlihat
Teks antara tag <h1> dan </ h1> ditampilkan sebagai judul pertama
Teks antara tag <p> dan </ p> ditampilkan sebagai sebuah paragraf pertama

Tag HTML 

  • Tag HTML juga biasa disebut dengan  markup tag HTML
  • Tag HTML adalah kata kunci (nama tag) yang dikelilingi oleh kurung sudut (angle brackets) seperti: <html>
  • Tag HTML biasanya diterapkan berpasangan seperti <b> dan </ b>
<b> juga disebut sebagai tag awal/tag pembuka
</b> disebut juga sebagai tag akhir/tag penutup
Contoh penulisan tag HTML :
        <namatag>konten</namatag>

Elemen HTML 

Adalah semua yang ada di antara tag pembuka dan tag penutup.
tag pembukaElement contenttag penutup
<p>This is a paragraph</p>
<a href="#">This is a link</a>
<body>elemen isi body  </body>
Seperti contoh dokumen HTML diatas, terdiri dari 6 elemen HTML, yaitu :
elemen <html>, elemen <head>, elemen <title>, elemen <body>, elemen <h1>,elemen<p>

Elemen <head>

Tag <head> adalah wadah untuk semua elemen head.
Di dalam elemen <head> dapat mencakup script, menginstruksikan browser di mana untuk menemukan style sheet, memberikan informasi meta, dan banyak lagi.
Tag HTML yang dapat ditambahkan ke bagian kepala: <title>, <style>, <meta>, <link>, <script>, <noscript>, dan <base>.

Elemen <title>

Tag <title> mendefinisikan judul dokumen.
Elemen <title> diperlukan dalam semua dokumen HTML / XHTML .
Fungsi Elemen <title>:
  • menampilkan judul website di toolbar browser
  • memberikan judul halaman ketika ditambahkan ke favorit
  • menampilkan judul  halaman di hasil mesin pencarian  (search engine result)
Elemen-elemen Head HTML 
TagDescription
<head>Mendefinisikan informasi tentang dokumen
<title>Mendefinisikan judul dokumen
<base>Mendefinisikan sebuah alamat default atau target default untuk semua link pada halaman
<link>Mendefinisikan hubungan antara dokumen dan sumber/resource eksternal, umunya digunakan untuk link ke style sheet
<meta>Mendefinisikan metadata tentang dokumen HTML (page description, keywords, author,robot,index, last modified, dan metadata yang lain)
<script>Mendefinisikan  client-side script, seperti Javascript
<style>Mendefinisikan informasi style untuk dokumen, menentukan bagaimana style ditampilkan di browser
* Untuk referensi lengkap HTML head elemen, kunjungi : www.w3schools.com/html/html_head.asp

HTML DASAR

HTML Heading (Judul)

HTML Heading ini dituliskan dengan kode tag <h1> sampai <h6>.
<h1>heading 1</h1>
<h2>heading 2</h2>
<h3>heading 3</h3>

HTML Paragraf

HTML Paragraf didefinisikan dengan tag <p>.
<p>Paragraf pertama.</p>
<p>Paragraf kedua.</p>

HTML Link

Link HTML didefinisikan dengan tag <a>.
<a href="http://problogiz.blogspot.com">Problogiz</a>
note: link address ditetapkan dalam atribut href ="..."

HTML Images

Gambar HTML didefinisikan dengan tag <img>.
<img src="banner problogiz.png" width="250" height="100">
note: nama file dan ukuran gambar disediakan sebagai atribut.

<!DOCTYPE> Declaration

<!DOCTYPE> declaration diperlukan browser untuk menampilkan halaman web (web page) dengan benar.
<!DOCTYPE> declaration harus diletakkan pertama dalam dokumen HTML Anda, sebelum tag <html>.
<!DOCTYPE> declaration : mendefinisikan jenis atau versi dokumen ( contoh diatas jenis deklarasi untuk HTML 5)

*Ada berbagai macam dokumen di web, dan browser hanya dapat menampilkan halaman HTML dengan benar 100%  jika ia tahu jenis dan versi HTML yang digunakan.

Beberapa contoh umum <DOCTYPE html!> declaration standard W3C, seperti :

HTML5 (HTML vesri Terbaru)
<!DOCTYPE html>

HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
* Untuk referensi lengkap versi-versi <DOCTYPE html!>, kunjungi : www.w3schools.com/tags/tag_doctype.asp

Versi-versi HTML

Sejak awal diciptakan oleh seorang ilmuwan bernama Tim Berners-Lee pada tahun 1990. Sejarah HTML terus berkembang dengan berbagai macam versi dan kemajuan. Saat ini mulai diperkenalkan HTML versi terbaru HTML 5. Meskipun belum standar W3C namun, browser utama mendukung banyak elemen baru HTML5 dan API.  HTML5 kabarnya akan direkomendasikan oleh W3C pada tahun 2014 dan kandidat pengganti versi sebelumnya (XHTML 1.0 dan HTML 4.01)

Version Year
HTML1991
HTML+1993
HTML 2.01995
HTML 3.21997
HTML 4.011999
XHTML 1.02000
HTML52012
XHTML52013
source : w3schools.com

Mengenai HTML 5 ini, saya akan membahasnya secara khusus di post berikutnya, saya sendiri sedang mempertimbangkan untuk convert template blog ini ( saat ini menggunakan XHTML 1.0 Strict ) menjadi HTML 5. 
New Look on New Year:) HAPPY NEW YEAR 2013....Kawan!!
Yang membuat tertarik dengan HTML 5 diantaranya adalah support FULL CSS3, garfis 3D, platform game, movie dan animasi, lebih baik performa dan keamananan, penanganan kesalahan mudah dan markup lebih detail, mengurangi kebutuhan untuk plugin eksternal (seperti Flash), dan masih banyak fitur-fitur baru Sob!!
Ok, sekarang saatnya kita membuat website sederhana sendiri, tentu dengan informasi yang telah didapat dari tutorial diatas. Walaupun sedikit mungkin info yang didapat coba terapkan aja semuanya yang ada.
Untuk belajar membuat website dengan menerapakan tag HTML, sangat mudah dan cepat. 

Pertama siapkan  teks editor seperti Notepad (PC) atau TextEdit (Mac). Menggunakan teks editor sederhana adalah cara yang baik untuk belajar HTML.

Coba Anda lihat lagi dokumen HTML sederhana, yang diberikan diawal Tuorial ini. Kode tersebut sebenarnya sudah cukup valid sebagai Struktur HTML halaman sebuah Website yang sederhana dan bisa ditampilkan di web browser Anda. Kita akan beri tambahan elemen baru seperti HTML Link, HTML Image, Paragraf baru, HTML Unordered Lists dan Ordered Lists atau juga dengan HTML Table, tentu hasil website lebih lengkap dan menarik. Setelah kita beri tambahan elemen baru tersebut pada contoh dokumen HTML diatas, final kode dokumen  seperti berikut :

Buatlah atau edit kode ini di Notepad Anda
<!DOCTYPE html>
<html>
<head>
      <title>Website Baru Saya</title>
</head>

<body>
<h1>Belajar HTML</h1>

<h2>Apa HMTL itu?</h2>
<p><b>HTML</b> adalah singkatan dari Hyper Text Markup Language.</p>

<p><b>Hyper Text :</b>  metode dimana Anda dapat bergerak leluasa di web - dengan mengklik pada sebuah teks khusus yang disebut "hyperlink" yang membawa Anda ke halaman berikutnya. Kata hiper itu sendiri berarti tidak linear - yaitu Anda dapat pergi ke tempat manapun di Internet kapanpun Anda inginkan dengan hanya mengklik sebuah link (sebuah teks yang berfungsi sebagai link)</p>

<p><b>Markup Language :</b> adalah apa yang tag HTML lakukan dengan text, ini sama seperti Anda menandai bold text, italics text, headings, bullets, dst. ( cara penulisan informasi tata letak dalam dokumen )</p>

<h2>HTML Dasar</h2>
<ul>
 <li>HTML Heading</li>
 <li>HTML Paragraf</li>
        <li>HTML Image</li>
        <li>HTML Link</li>
        <li>HTML Table</li>
<li> Versi-versi HTML
  <ol>
   <li>HTML 4.01</li>
   <li>XHTML 1.0</li>
   <li>HTML5</li>
   <li>XHTML5</li>
  </ol></li>
 </ul>
<h2>Dimana saya belajar HTML?</h2>
<p><a href="http://problogiz.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1FrozMxewKWEUdH70WSY-5npscHETiwJlUDheH3RvdSLCe3EX3rfjzXOf7dMBqV8iQ62en2R0rREKZ-gsjXU2YHyq9vmoQSem_bi_-0_Xcyxd6gg7nf1cfd1Xfb_VaaTkXgQeqb6w_F_O/s200/banner.png" width="157" height="70" alt="ProBlogiz" /></a></p>

<h3>My Table here</h3>
<table border="1">
 <tr>
  <td>Row 1, cell 1</td>
  <td>Row 1, cell 2</td>
  <td>Row 1, cell 3</td>
 </tr>
 <tr>
  <td>Row 2, cell 1</td>
  <td>Row 2, cell 2</td>
  <td>Row 2, cell 3</td>
 </tr>
 <tr>
  <td>Row 3, cell 1</td>
  <td>Row 3, cell 2</td>
  <td>Row 3, cell 3</td>
 </tr>
</table>

<h3>Kesimpulan</h3>
<p><strong>Terima kasih</p>

</body>
</html>

Edit atau letakkan kode dokumen Page HTML ini di Notepad Anda.
Selanjutnya yang perlu anda lakukan adalah menyimpannya ke hard drive Anda dan kemudian buka di browser Anda.

See this DEMO

Cara menyimpan dokumen sebagai file HTML:

  • Di Notepad Anda pilih File > pilih Save As....
  • Beri nama File, misal : Websitebaru
  • Tambah ekstensi .html, sehingga menjadi : Websitebaru.html
  • Pilih "All File" pada kotak "Save as Type"
  • Kemudian Save


langkah menyimpan dokumen html di notepad
langkah menyimpan dokumen HTML di notepad
Untuk melihat hasil tampilan Website baru Anda, Double Klik pada file Websitebaru.html tersebut dimana Anda menyimpannya di PC.
Dan hasilnya akan seperti ini Sob, tampilan dibrowser Anda :

website sederhana
hasil membuat website sederhana

Selesai !!
Sekarang Anda sudah paham HTML dan bisa membuat website sendiri....Hooraaay:)
Oh ya, ini website baru yang dibuat dengan struktur HTML 5 lho, ya walaupun masih sederhana banget. Untuk latihan aja atau "warming" tar lagi juga akan terbiasa dengan HTML versi baru itu.
Jika Anda tertarik dengan HTML 5, atau ingin convert template blog Anda menjadi HTML 5 tunggu aja artikelnya Sob di awal Januari 2013......Tar lagi kan Tahun Baru, ane mo libur dulu:)

New Look on New Year:) HAPPY NEW YEAR 2013....Kawan!!


Read More


proBlogiz

Membuat widget Back To Top dengan Efek Smooth Scrolling

Back To Top Efek Smooth Scrolling

Widget Back To Top tentu Anda sudah mengetahuinya, bukan? Sudah banyak sekali tutorial Blogger yang membahasnya, baik yang sedeharna hanya dengan membuat link anchor ke atas halaman (mengarahkan ke halaman atas blog) ada juga yang sudah menggunakan efek smooth scrolling  (dengan jQuery). Penggunaan script jQuery tentu lebih membuat fungsi tombol/button back to top lebih baik dan memberi kesan profesional di blog/situs Anda. Desain Blog kali ini juga tentang Cara Membuat widget Back To Top dengan Efek Smooth Scrolling, smooth scrolling ini berarti menggulung (bergulir) secara lembut/halus ke atas jika tombol diklik, tidak secara sekaligus.

Bagi Anda yang memiliki blog/situs  dengan konten yang banyak dan panjang, menambah widget Back To Top ini sungguh ide yang baik, Kawan. Dengan memberi kemudahan dan navigasi yang cepat bagi pengunjung, tombol kembali ke halaman atas ini adalah widget yang sempurna untuk blog Anda.

Buton/tombol Back To Top yang saya sharing ini, menggunakan script yang tidak rumit dan selain mempunyai efek smooth scrolling automatic (menggulung halaman otomatis secara lembut) juga efek fade in dan fade out (tombol akan muncul jika halaman telah discroll pada posisi tertentu kebawah halaman blog). Disamping itu script tersebut mudah diedit dan diganti seperti mengganti gambar ikon/tombol Back To Top, merubah ukuran gambar, mengganti teks attribut (Scroll Back to Top) dengan teks Anda sendiri. Oleh karena dalam artikel ini, saya juga telah menyediakan contoh-contoh image/gambar tombol Back To Top  dengan url-nya dibawah. (silahkan Anda pilih yang cocok)

Ok, now....langsung saja ke topik bagaimana cara membuat atau menambah widget Back To Top di blog ini, sebelumnya saya akan memulai dengan prinsip sederhana dari fungsi tombol back to top.

Pada dasarnya cara kerja fungsi link back to top ini sederhana, yaitu sebuah link yang menuju atau megarahkan pengguna ke halaman atas dari blog/website. Prinsipnya Anda bisa membuat tombol ini hanya dengan menggunakan kode sederhana dibawah ini :

<a href='#'>Back to Top</a>
Coba Anda klik link back to top dengan menggunakan contoh diatas:

Sebuah tag hyperlink yang memiliki nilai href="#", akan selalu menuju ke halaman atas situs. Pada dasarnya, setiap kali Anda membuat sebuah link kosong, maka link tersebut secara otomatis akan membawa Anda menuju ke atas setiap kali Anda mengkliknya.

Walaupun contoh diatas sangat sederhana, maka tentu kurang menarik dan hanya mengarahkan user keatas secara sekaligus karena memang tanpa menggunakan efek apapun (smooth scroll).
Maka sudah saatnya Anda memakai yang ini, fungsi back to top dengan smooth scrolling, caranya sangat mudah ikuti saja panduannya dibawah ini.

Cara Membuat/Menambah Widget "Smooth Scrolling Back To Top" di Blogger

  • Masuk Blogger > pilih Tata Letak >
  • Klik Tambah Gadget > pilih Add HTML/Javascript
  • Copy semua kode dibawah, dan letakkan didalam kolom widget tersebut.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" >
var scrolltotop={ 
    //startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control 
    //scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top). 
    setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]}, 
    controlHTML: '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfn8LLvHdampgUhQi_tVjzhVoDW5ryvdS2JGRaAn83SX6P_ysE1rgJXirSeMdgV8CLZiYBenPntmWfadEn5WkNJ7uoNQxQ-GNRNfitqs0g8Nz__sOJXMrp4e7-VeY2UkdiayCA0zH7m0c/" width="32px" height="32px"/>', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol" 
    controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner 
    anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links
    state: {isvisible:false, shouldvisible:false},
    scrollup:function(){ 
        if (!this.cssfixedsupport) //if control is positioned using JavaScript 
            this.$control.css({opacity:0}) //hide control immediately after clicking it 
        var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto) 
        if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists 
            dest=jQuery('#'+dest).offset().top 
        else 
            dest=0 
        this.$body.animate({scrollTop: dest}, this.setting.scrollduration); 
    },
    keepfixed:function(){ 
        var $window=jQuery(window) 
        var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx 
        var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety 
        this.$control.css({left:controlx+'px', top:controly+'px'}) 
    },
    togglecontrol:function(){ 
        var scrolltop=jQuery(window).scrollTop() 
        if (!this.cssfixedsupport) 
            this.keepfixed() 
        this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false 
        if (this.state.shouldvisible && !this.state.isvisible){ 
            this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0]) 
            this.state.isvisible=true 
        } 
        else if (this.state.shouldvisible==false && this.state.isvisible){ 
            this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1]) 
            this.state.isvisible=false 
        } 
    }, 
    
    init:function(){ 
        jQuery(document).ready(function($){ 
            var mainobj=scrolltotop 
            var iebrws=document.all 
            mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode 
            mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body') 
            mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>') 
                .css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'}) 
                .attr({title:'Scroll Back to Top'}) 
                .click(function(){mainobj.scrollup(); return false}) 
                .appendTo('body') 
            if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text 
                mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text 
            mainobj.togglecontrol() 
            $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){ 
                mainobj.scrollup() 
                return false 
            }) 
            $(window).bind('scroll resize', function(e){ 
                mainobj.togglecontrol() 
            }) 
        }) 
    } 
}
scrolltotop.init()
</script>
original code by : www.dynamicdrive.com
little modif by me

Kemudian Simpan.
Hasilnya ( sebagai DEMO) Anda bisa lihat tombol "Back to Top" di blog ini, pojok kanan bawah tampak ikon, coba diklik aja.

Kostum :

*Script jQery:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
Anda bisa menghapus jQuery diatas jika template Anda sudah menggunakan jquery.min.

*Text 'Scroll Back to Top' ganti dengan teks Anda sendiri jika mau.

*Untuk URL gambar/ikon tombol "back to top" pada kode yang berwarna biru :
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfn8LLvHdampgUhQi_tVjzhVoDW5ryvdS2JGRaAn83SX6P_ysE1rgJXirSeMdgV8CLZiYBenPntmWfadEn5WkNJ7uoNQxQ-GNRNfitqs0g8Nz__sOJXMrp4e7-VeY2UkdiayCA0zH7m0c/" width="32px" height="32px"/>
*Angka="32px" : adalah besar ukuran ikon, jika kurang besar Anda bisa rubah menjadi 48 atau 50, jangan terlalu besar (tampilanya jelek) max= 50px.
*Gantilah URL ikon dengan contoh gambar/ikon dibawah ini (atau dengan ikon Anda sendiri), jika Anda tertarik dengan  ikon-ikon dibawah ( klik kanan pada ikon yang Anda pilih kemudian pilih "copy image URL", kemudian gantikan kode ikon URL-nya)

 tombol "back to top"
 tombol "back to top"1
 tombol "back to top"4
 tombol "back to top"5
 tombol "back to top"6

 tombol "back to top"7
 tombol "back to top"2
 tombol "back to top"3
 tombol "back to top"8
 tombol "back to top"9
 tombol "back to top"a
 tombol "back to top"s
 tombol "back to top"h
 tombol "back to top"j
 tombol "back to top"k


Silahkan pilih salah satu ikon-ikon keren "back to top" diatas dan copy URL image, kemudian ganti url ikon yang ada di code Widget Back To Top diatas (yang berwarna biru)

Gimana Sob!! udah coba?
Silahkan di comment atau ada yang ga jelas, feel free to ask me......

Happy Blogging...:)

Read More


proBlogiz

Pengertian Google Plus dan Fitur Google Plus (Google+)

Ikon Google+

Apa Google Plus itu?

Google+ (dibaca Google Plus, kadang-kadang disingkat G+) adalah layanan jejaring sosial multibahasa dan identitas yang dimiliki dan dioperasikan oleh Google Inc. Sejak diluncurkan pada tanggal 28 Juni 2011, telah memiliki total 500 juta pengguna terdaftar di antaranya 235 juta aktif secara bulanan (per Desember 2012).

Google Plus sebagai sebuah Jejaring Sosial dari Google (Google’s Social Network) yang konon adalah upaya Google untuk menyaingi jejaring Facebook dan membuktikan bahwa Google tidak hanya menjadi Raja di bidang Network Searching (dunia pencarian di internet) tapi juga dibidang sosial. Namun pada kenyataannya Google+ tidak dimaksudkan untuk menjadi pembunuh jejaring gaek seperti Facebook. Mungkin, jika Google mendapat kesempatan, mereka pasti akan mencoba untuk mengalahkan Facebook (atau setidaknya mencuri hati Facebook Fans). Tapi Google+ adalah lebih jauh berbicara tentang data, identitas dan berbagi: ini menjadi bagian dari produk Google.

Petinggi Google Plus seperti Vic Gundotra dan Bradley Horowitz tidak suka jika orang selalu membandingkan Google+ dengan jejaring sosial Facebook padahal sang pencipta Google+ menganggap bahwa Google+ bukan sekedar jejaring sosial, namun lebih dari itu.
“Google+ adalah upgrade dari Google. Orang memiliki pemahaman yang sulit dengan menganggap Google+ jejaring sosial yang selalu dibanding-bandingkan dengan pesaing sosial lainnya.”
“Mereka melihat kami dari sudut pandang jejaring sosial dan bukan melihat dari apa yang terjadi. Google adalah produk yang luar biasa dengan membawanya secara bersama-sama, maka akan membuat Google+ lebih dahsyat,” kata Vic Gundotra, VP Social Bussines Google.
Google Plus berintegrasi dengan layanan Google Profile, dan juga diintegrasikan ke dalam proses pembuatan account untuk layanan Google lainnya, seperti Google Mail. So, jika ingin bergabung dengan Google+ itu berarti Anda harus mempunyai akun Google atau mendaftarnya.

Fitur- fitur penting Google Plus

Google Profile
Google Profile
Sebuah profil dari user/pengguna yang disediakan di Google Plus yang memungkinkan Anda menampilkan diri pada Google produk dengan pengguna Google lainnya. Dengan Google Profile, memungkinkan Anda untuk mengontrol bagaimana Anda muncul di Google dan memberitahu orang lain tentang siapa Anda. Dengan Google Profile, Anda dapat dengan mudah berbagi konten dari situs/blog Anda dengan Google user yang lain pada satu lokasi saja. Anda dapat menyertakan link ke blog Anda, foto online, dan profil lainnya seperti Facebook, LinkedIn, Twitter dan banyak lagi.

Anda juga memiliki kontrol atas apa yang orang lain lihat di profil dan Google + tidak akan menampilkan informasi pribadi Anda kecuali secara eksplisit Anda menambahkannya. Secara default profil Anda adalah bersifat public/umum, nama lengkap Anda adalah satu-satunya informasi yang diperlukan untuk ditampilkan pada profil Anda, Anda dapat juga mengedit atau menghapus informasi lain yang tidak ingin ditampilkan. Anda dapat memberikan berbagai informasi tambahan tentang diri Anda dalam profil Anda.

Hal penting tentang profil Google :
  • Mengubah nama Anda di profil berarti mengubah nama Akun Google Anda juga. Perubahan ini akan berlaku pada produk Google lain, seperti Gmail dan Docs.
  • Menghapus profil Anda tidak akan menghapus Akun Google Anda.
  • Orang-orang yang memiliki alamat email Anda dapat melihat link profil yang terkait dengan alamat email.
* Untuk lebih jauh tentang Google Profile kunjungi : http://support.google.com/plus/bin/answer.py?hl=en&answer=1355890
Circle (Lingkaran)
Circle (Lingkaran)
Google Circle ini memungkinkan pengguna untuk mengatur orang atau teman dalam kelompok-kelompok Lingkaran untuk berbagi di berbagai produk Google dan layanan. Meskipun pengguna lain mungkin dapat melihat daftar orang-orang dalam koleksi Lingkaran Anda, mereka tidak dapat melihat nama-nama dari kelompok Lingkaran. Pengaturan privasi juga memungkinkan Anda untuk menyembunyikan user dalam Lingkaran mereka. Pengaturan dilakukan melalui antarmuka drag-and-drop. Sistem ini menggantikan fungsi daftar teman yang biasa digunakan oleh situs-situs sosial, seperti Facebook.

Fungsi lain dari Google+ Circle adalah untuk mengontrol konten Streaming* seseorang. Seorang pengguna bisa mengklik pada lingkaran di sisi kiri halaman dan bagian Streaming akan berisi posting yang hanya dimiliki oleh pengguna dalam lingkaran itu.

Secara default Circle terdiri dari kelompok Friends, Family, Acquaintances, and Following, dan dapat Anda rubah nama tersebut sesuai keinginan. Kelompok "Following" digambarkan sebagai "Orang yang tidak Anda kenal secara pribadi, tetapi Anda menemukan posting yang menarik darinya"

* Dari Stream, (kolom yang di tengah dari tiga kolom pada halaman Google+), pengguna dapat melihat update post atau status, foto, video dari orang-orang di Lingkaran mereka.

* Untuk lebih jauh tentang Google+ Circle kunjungi : http://support.google.com/plus/bin/answer.py?hl=en&answer=1047805&topic=1698291&ctx=topic
Hangout
Hangout
Hangout adalah tempat yang digunakan untuk memfasilitasi obrolan video (dengan maksimal 10 orang berpartisipasi dalam Hangout tunggal pada setiap waktu bersamaan). Hanya pengguna Google+ dapat bergabung dengan" Hangout ". Google menambahkan tambahan fitur baru untuk "Hangouts", tombol Share di bawah setiap video YouTube untuk menonton video dengan teman-teman di tempat nongkrong Google+

Hangouts didukung Android 2.3 + sedangkan pengguna pada iOS dapat menggunakan iPhone dan iPad.

Dengan fitur Hangout Anda bisa melakukan hal berikut:
  • Ngobrol sambil bertatap muka di mana pun Anda berada
  • Ngumpul bersama seluruh anggota keluarga -- baik menggunakan perangkat komputer, ponsel, atau tablet.
  • Selenggarakan rapat virtual
  • Meningkatkan produktivitas tim Anda dengan rapat yang memuat hingga 10 orang dan alat canggih seperti berbagi layar dan Google Documents.
  • Siarkan percakapan Anda ke seluruh dunia
  • Apakah Anda seorang seniman pendatang baru, selebriti dunia, atau warga yang berprihatin, Anda dapat melakukan siaran di hadapan pemirsa global diseluruh dunia.

* Untuk lebih jauh tentang Hangout kunjungi : http://support.google.com/plus/bin/topic.py?hl=en&topic=1257349
Komunitas

KomunitasDi fitur Komunitas (Google+ Communities) Anda dapat memulai percakapan yang sedang berlangsung tentang topik tertentu, sharing info dengan teman-teman yang memiliki hobi dan minat yang sama, atau juga sekedar berbagi update artikel.

Kumpul bareng
Untuk keluarga, klub buku, atau orang-orang di seluruh dunia yang memiliki minat yang sama dengan Anda, komunitas memberi suasana rumah pada setiap grup Anda.

Nikmati percakapan yang bermakna
Poskan foto dan video yang indah, rencanakan acara, atau bahkan adakan diskusi langsung sambil bertatap muka di hangout. Dan tetap terhubung saat dalam perjalanan melalui aplikasi seluler Google+.

Jelajahi minat Anda
Dari hobi kuliner, grup sukarelawan, sampai fanatik bola, komunitas membantu Anda menemukan orang yang minatnya sama dengan Anda. Berbagi berita, ide, dan semangat dengan orang yang tepat, atau bertemu dengan orang-orang baru dengan bergabung ke komunitas publik.

* Untuk lebih jauh tentang Google+ Communities kunjungi : http://support.google.com/plus/bin/answer.py?hl=en&answer=2888328&topic=1698291&ctx=topic
Laman (Google+ Pages)

Laman (Google+ Pages)Laman Google+ memberikan identitas publik dan eksistensi di Google+ terhadap bisnis, produk, merek, dan organisasi. Hal ini memungkinkan entitas yang bukan individu (seperti organisasi, perusahaan, dan publikasi) untuk mengatur profil, atau halaman untuk diperkenaklan kepada user. Hal ini mirip dengan fitur Facebook yang bernama Facebook Page.

Laman dibuat berdasarkan salah satu dari lima kategori berikut:
  • Produk atau Merek
  • Perusahaan, Lembaga, atau Organisasi
  • Bisnis Lokal atau Tempat
  • Seni, Hiburan, atau Olahraga
  • Lainnya

* Untuk lebih jauh tentang Laman Google Plus kunjungi :http://support.google.com/plus/bin/answer.py?hl=en&answer=1710600
Perbedaan antara Laman Google+ (Google +  Page) dan Profil Google+
  • Laman/halaman sangat mirip dengan Google profil, namun memiliki beberapa perbedaan penting:
  • Laman tidak dapat menambahkan orang ke lingkaran sebelaum laman tersebut "di-add" dahulu atau disebutkan.
  • Laman dapat dibuat untuk berbagai entitas yang berbeda sedangkan profil hanya dapat dilakukan bagi orang-orang.
  • Laman dapat memiliki beberapa pengurus.
  • Privasi Pengaturan default untuk elemen profil laman Anda adalah publik.
  • Laman dilengkapi dengan tombol +1.Laman tidak bisa memberi +1 pada laman yang lain, juga tidak bisa memberi +1 pada hal-hal lain di Web.
  • Laman tidak bisa memainkan game.
  • Laman tidak memiliki opsi untuk berbagi ke ‘Lingkaran diperluas’.
  • Laman tidak menerima pemberitahuan melalui email, SMS, atau di bilah Google.
  • Laman tidak bisa hangout di perangkat seluler.
  • Laman Lokal memiliki bidang khusus yang membantu orang-orang menemukan lokasi bisnis yang sebenarnya.
Jelajah
ExploreLaman Jelajah menyoroti konten pilihan yang patut dicontoh, menarik, dan sesuai: yang menampilkan informasi spontan dan beragam. Bila Anda menemukan pos yang Anda sukai, Anda dapat menambahkan komentar, memberi plus satu ( + 1) pada pos, atau membagikannya ulang kepada lingkaran Anda yang juga akan menyukainya. Disini Anda juga dapat melihat Pos yang lagi ngetren, Pos lagi ngetren dan yang direkomendasikan juga mungkin tampil di arus 'Semua lingkaran' di laman Beranda dengan nama di bagian atas pos yang mencantumkan Lagi ngetren dan direkomendasikan.

Di laman Jelajah, gunakan bilah geser di bagian atas untuk menyesuaikan jumlah pos Lagi ngetren dan yang direkomendasikan pada laman Beranda Anda:
jumlah pos Lagi ngetren
Gerakkan bilah geser untuk melihat lebih banyak pos, sedikit pos, atau untuk menonaktifkan Lagi ngetren dan yang direkomendasikan pada laman Beranda Anda seluruhnya.
Foto Google+
Foto Google+Memungkinkan Anda berbagi foto-foto atau kenangan hanya dengan orang yang tepat.
Anda dapat menambahkan foto ke album Anda di Google+ dan berbagi dengan orang-orang yang peduli. Di Google+ Anda mendapatkan foto dan upload video yang tak terbatas.
Google+ Events
Google+ EventsDi elemen Even Anda dapat merayakan semua hal penting dengan orang-orang yang paling berarti atau sekedar mengumpulkan dan berbagi kenangan dari acara-acara penting Anda. Mengundang teman-teman Anda untuk bergabung di even Anda.
Google+ Lokal
Google+ LokalGoogle Plus Lokal membantu pengguna menemukan dan menyebarluaskan informasi tentang tempat-tempat favorit. Dengan berintegrasi sistem penilaian ekspresif Zagat memberikan Anda wawasan terperinci dalam mengevaluasi Makanan, Layanan, Dekor, dan Harga sebelum mengambil keputusan. 
Selain itu ringkasan Zagat mengenai ulasan pengguna membantu Anda dalam memutuskan tempat yang ingin Anda kunjungi.
ringkasan Zagat

Dengan Google+ Lokal, Anda dapat:
  • Mendapatkan saran tempat berdasarkan lingkaran Anda, ulasan Anda sebelumnya, dan lokasi Anda
  • Mempublikasikan ulasan dan foto tempat favorit Anda
  • Membaca ringkasan Zagat mengenai ulasan pengguna tentang sebuah tempat
  • Melihat laman Google+ lokal tentang sebuah bisnis dengan melihat ulasan, foto, dan informasi yang bermanfaat lainnya
  • Mencari ulasan dari orang-orang yang Anda kenal dan percayai yang disorot dalam hasil penelusuran Anda
Google Plus Mobile
  • Tetap terhubung dan berbagi kabar kehidupan pada saat itu terjadi (real time)
  • Bagikan foto secara otomatis ke Acara dengan Mode Pesta
  • Ngobrol video dengan maksimal 9 orang teman menggunakan Hangouts seluler
  • Hidupkan Upload Instan untuk menyinkronkan foto dari perangkat Anda ke album Google+ pribadi
  • Ngobrol dengan teman atau semua teman sekaligus menggunakan Messenger
  • Lihat arus Lagi Ngetren untuk mengetahui topik yang sedang tren
  • Lihat arus yang Berdekatan untuk mengetahui apa yang dikatakan orang di dekat lokasi Anda
  • Nikmati tata letak bergaya majalah di tablet
Untuk bergabung dengan elemen ini, Google menyediakan aplikasi Google+ asli untuk perangkat berikut:
  1. Android: Aplikasi tablet dan ponsel (Android 2.2+) tersedia dari Google Play.
  2. iOS: iPhone / iPod Touch / iPad app (iOS 5.0+) tersedia dari app store.

*Untuk lebih jauh mengenai Google+ Mobile dan Ketersediaan fitur seluler kunjungi : http://support.google.com/plus/bin/answer.py?hl=id&answer=1301219
Sparks
Sparks"Sparks" adalah sebuah front-end untuk Google Search, memungkinkan pengguna untuk mengidentifikasi topik yang mungkin mereka tertarik dalam berbagi dengan orang lain. Sparks dapat diakses sebagai pull-down dari hasil pencarian dan membantu pengguna tetap mengetahui dari update informasi terbaru pada topik yang diminati.

Game
GameJelajahi game baru dan populer dengan menggulir di bagian atas laman. Untuk melihat daftar lengkap game yang tersedia, klik Direktori di bagian atas laman Game. Setelah Anda memilih game, klik tombol Mainkan, tinjau izin yang diminta game lalu mainkan!
Saat memainkan game, Anda bisa mendapatkan kesempatan untuk berbagi pembaruan, hadiah, dan pesan game dengan lingkaran Anda. Anda juga dapat mengundang orang-orang di lingkaran Anda untuk bergabung dengan Anda.
Saat orang-orang di lingkaran Anda berbagi pembaruan game, Anda akan melihatnya di arus Game. Undangan, hadiah, dan pesan game akan ditampilkan pada Notifikasi game.
Mentioning people in posts
Adalah fitur terbaru dari Google Plus yang digunakan untuk menarik perhatian seseorang ketika Anda berbagi di Google+, dengan menyebutkan mereka menggunakan tanda '+' atau '@'. Ketika Anda melakukan ini, seseorang yang Anda sebutkan dalam posting dapat menerima pemberitahuan dan juga akan dapat melihat keseluruhan pos.

Untuk menyebutkan seseorang dalam sebuah posting atau komentar:

  • Ketik + [nama orang] atau @ [nama orang]. (Anda juga dapat mengetik alamat email mereka bukan nama mereka.)
  • Saat Anda mengetik, daftar autocomplete orang akan muncul.
  • Pilih orang yang Anda ingin sebutkan.

mention people in post
mention people in post
sumber: Blogger Buzz
*Anda hanya dapat menyebutkan orang-orang yang berada di Google+. Anda dapat berbagi dengan    orang-orang yang bukan anggota dengan memasukkan email mereka setelah tanda '+' atau '@'.

* Untuk informasi tentang fitur Mentioning people in posts kunjungi : http://buzz.blogger.com/2012/12/mention-people-in-your-posts-with-google.html

Itulah Sob! sedikit ulasan mengenai Google Plus dan Fitur- fitur di Google Plus, semoga sharing post ini dapat membantu Anda. 

Adding me to your Circle too
See you later.....

Read More

Cara Membuat Message Box (kotak pesan) Keren di Blog

Box Message Keren

Membuat Box Message (kotak pesan) sangat berguna untuk menampilkan status pesan kepada pengguna/pembaca di situs Anda. Bagi pengembang Aplikasi Web, menggunakan kotak pesan (box message) adalah cara terbaik untuk menampilkan dan menginformasikan pesan sehingga pembaca menerima pesan yang sejelas mungkin tentang apa yang sedang terjadi.

Box Message / message box / alert message box dapat berupa pesan kesalahan (error box message), pesan peringatan  (warning box message), pesan informasi ( information box message), pesan sukses/gagal (successful operation box  message), pesan pengumuman dst. Penggunaan warna yang berbeda pada box (kotak pesan) juga dapat memperjelas tentang maksud dari status pesan itu sendiri, misalkan: warna merah pada pesan error, situs facebook biasa menggunakan kotak pesan yang mirip dengan type pesan sukses.

Dalam tutorial Desain Blog ini, saya memberikan beberapa contoh Message Box Keren yang dibuat menggunakan CSS dan menambahkan icon cantik didalamnya. Penambahan icon dan warna  yang berbeda untuk tiap Status Pesan tentu akan mempertegas isi pesan tesebut.

Berikut contoh Box Message Keren untuk status pesan yang berbeda :

Information Box Message ( kotak pesan informasi)

Info text message here
CSS code :
.info { border: 1px solid; margin: 15px 0px; padding:15px 20px 15px 55px; width: 500px; font: bold 12px verdana; -moz-box-shadow: 0 0 5px #888; -webkit-box-shadow: 0 0 5px#888; box-shadow: 0 0 5px #888; text-shadow: 2px 2px 2px #ccc; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 5px; } .info { color: #00529B; background: #BDE5F8 url('https://sites.google.com/site/problogiz/my-icon/info.png') no-repeat 10px center; } HTML :
<div class="info">Info text message here</div>

Success Box Message (kotak pesan sukses)

Successful operation text message here
CSS code: .success { border: 1px solid; margin: 15px 0px; padding:15px 20px 15px 55px; width: 500px; font: bold 12px verdana; -moz-box-shadow: 0 0 5px #888; -webkit-box-shadow: 0 0 5px#888; box-shadow: 0 0 5px #888; text-shadow: 2px 2px 2px #ccc; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 5px; } .success { color: #4F8A10; background: #DFF2BF url('https://sites.google.com/site/problogiz/my-icon/ok.png') no-repeat 10px center; }
HTML :
<div class="success">Successful operation text message here</div>

Warning Box Message (kotak pesan peringatan)

Warning text message here
CSS code : .warning { border: 1px solid; margin: 15px 0px; padding:15px 20px 15px 55px; width: 500px; font: bold 12px verdana; -moz-box-shadow: 0 0 5px #888; -webkit-box-shadow: 0 0 5px#888; box-shadow: 0 0 5px #888; text-shadow: 2px 2px 2px #ccc; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 5px; } .warning { color: #9F6000; background: #FEEFB3 url('https://sites.google.com/site/problogiz/my-icon/warning.png') no-repeat 10px center; }
HTML :
<div class="warning">Warning text message here </div>

Error Box Message (kotak pesan kesalahan)

Error text message here
CSS code : .error { border: 1px solid; margin: 15px 0px; padding:15px 20px 15px 55px; width: 500px; font: bold 12px verdana; -moz-box-shadow: 0 0 5px #888; -webkit-box-shadow: 0 0 5px#888; box-shadow: 0 0 5px #888; text-shadow: 2px 2px 2px #ccc; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 5px; } .error { color: #D8000C; background: #FFBABA url('https://sites.google.com/site/problogiz/my-icon/dialog_error_3.png') no-repeat 10px center; }
HTML :
<div class="error">Error text message here</div>

Keterangan :
*Ganti width: 500px; sesuaikan dengan lebar halaman blog Anda.
*Ganti "text message" dengan kata pesan yang akan Anda pasang.
*Gambar icon box message pada kode yang berwarna merah, Anda bisa menggantinya dengan icon/gambar sendiri. Atau bisa menggunakan contoh gambar icon yang lain, saya sediakan dibawah ini :

                              check icon edit icon warning icon info1 icon error2 icon info2 icon tip icon warning2 icon error3 help icon warning4

Kalau tertarik dengan pilihan gambar icon yang lebih banyak, silahkan kunjungi di situs: www.findicons.com

So, bagaimana? tertarik memasang Kotak Pesan di blog Anda?
Box Message ini dapat Anda tempatkan di halaman blog, Hompage atau dipostingan, dimana saja Anda mau.

Wait for next cool CSS design !!!
Read More


proBlogiz

Arti Margin, Padding, Border dan Penggunaanya dalam CSS

Topik tutorial Blogger kali ini mengenai CSS "Pengertian Margin, Padding, dan Border". tentu bagi CSS developer yang sudah berpengalaman ini topik yang sangat sederhana. Tapi saya pikir juga ga ada salahnya sharing topik CSS basic ini, arti dan penyajian elemen dengan menggunakan kode CSS untuk margin, padding serta border property.

Dengan memahami margin, padding, border dan cara menerapkan dengan CSS, akan memberi kesempatan bagi blogger (pemula), untuk bereksperimen sendiri dengan menentukan dan mengatur sifat dan nilai property. Ini sering dijumpai pada penerapan css style pada template, .body {..},.sidebar {...},. container {...}, css widget, pengaturan posisi dan jarak (space) antara sidebar, penerapan pada pargaraf posting, pada h1, h2.....dst.

Apa Margin itu?

Margin (dalam pengertian CSS) adalah ruang disekitar elemen/konten. Margin akan membentuk daerah (ruang) vertikal dan horizontal antara elemen. Jika elemen/konten tidak memilki margin, maka elemen-elemen tersebut akan rapat bertemu terhadap satu sama lain. Agar margin bekerja dengan baik, elemen biasanya diikuti oleh posisi float atau diposisikan relative. Style ini sering diterapkan untuk dapat memindahkan elemen lain di sekitarnya.
Secara visual akan lebih mudah memahami definisi dari margin ini :

visualisasi pengertian margin
visualisasi pengertian margin

Margin dapat diatur menggunakan properti margin "shorthand" (yaitu istilah, yang mewakili empat nilai marjin untuk elemen) atau dengan penulisan stye "longhand". Untuk itu dibawah saya beri contoh beberapa penulisan margin dalam css.

Contoh penulisan margin pada suatu elemen ("shorthand")

#element { margin: 10px;}

Ini berarti elemen memilki margin yang sama "10px" untuk setiap sisi elemen

#element { margin: 10px 20px; }

Ini berarti elemen memiliki:
-margin-top, margin-bottom : "10px"
-margin-left, margin-right : "20px"

#element { margin: 10px 20px 5px 15px; }

Elemen ini memiliki -margin-top : 10px, margin-right: 20px,  margin-bottom : 5px, margin-left: 15px

Berikut penulisan margin style "longhand":
#element { margin-top: 10px; margin-right: 5px; margin-bottom: 5px; margin-left: 10px;}

Apa Padding itu?

Jadi bagaimana dengan padding? Nah, padding adalah ruang horizontal dan vertikal yang diatur di sekitar area isi/konten dari elemen yang ditargetkan. Jadi padding di bagian dalam kotak, bukan di luar.

Padding juga dapat dipahami sebagai "filling". Karena  padding tidak mempengaruhi jarak dari elemen ke elemen lainnya tetapi hanya mendefinisikan jarak inner antara tepi/border dan isi dari elemen. (lihat visual dibawah)

visual definisi padding
visual definisi padding

Dari gambar diatas dapat diartikan padding adalah ruang yang diatur antara border/tepi dengan isi / konten dari suatu elemen (dalam hal ini isi konten berupa text).
Serupa dengan margin, padding juga diatur menggunakan properti padding "shorthand"  dan juga dapat dilakukan dengan properti padding "longhand": padding-top, padding-right, padding-bottom, dan padding-left.

Contoh :
#element { padding: 10px; }/*padding untuk semua sisi sama 10px*/
#element { padding: 5px 10px 2px 4px; }/*padding: Top, Right, Bottom, Left*/ 

#element { padding-top: 10px; padding-right: 5px; padding-bottom: 5px; padding-left: 10px;} 


Pengertian dari properti padding sama dengan  margin, cuma kalau padding bersifat inside space dari suatu elemen yang diatur disekitar area konten. Penerapannya padding sering dijumpai  hampir disemua elemen, sebagai contoh pengggunaan padding pada heading (h1, h2, h3....) di postingan.

Contoh :
h1 { background: yellow;
padding: 20px 20px 20px 80px;}

h2 { background: orange;
padding-left:120px;}

Hasilnya pada postingan Anda akan seperti ini :

heading dan padding

Apa arti Border?

Border/garis tepi dapat digunakan untuk banyak hal, misalnya sebagai elemen dekoratif atau untuk memberi garis batas pemisah dari dua hal. Border properti mendefinisikan width, color, and style dari batas area pada box/kotak.

CSS memberi Anda pilihan dalam menggunakan border antara lain :
  • border-style
  • border-width
  • border-color
  • border-individual
Border Style
Properti border-style untuk menentukan bentuk (style) dari tampilan border.
Tak satu pun dari properti border memiliki efek APAPUN kecuali telah menempatkan properti border-style dahulu!
Ada 9 type border-style values yang umum digunakan dalam CSS :
1. None : mendefinisikan tidak ada border
border style
2. Dotted : berarti border berupa dot (titik)
Dotted
3. Dashed : border berupa dashed (garis putus-putus)
Dashed
4. Solid : border yang solid
Solid
5. Double : mendefinisikan double border. Lebar double border adalah sama dengan nilai border-width
 Double
6. Groove : mendefinisikan sebuah border groove (beralur) 3D. Efeknya tergantung pada nilai border-color
Groove
7. Ridge: mendefinisikan sebuah border bergerigi (ridge) 3D. Efeknya tergantung pada nilai border-color
 Ridge
8. Inset: mendefinisikan sebuah border inset 3D. Efeknya tergantung pada nilai border-color
9. Outset : mendefinisikan sebuah border outset 3D. Efeknya tergantung pada nilai border-color
Outset

Border Width
Properti border-width digunakan untuk mengatur lebar border/garis tepi. Border diatur dalam pixel, atau dengan menggunakan salah satu dari tiga nilai yang telah ditentukan : thin, medium, dan thick.

Border Width
ukuran border dalam pixel dan value thin, medium, thick

Contoh :

p{ border-style:solid; border-width:5px; }

p{ border-style:solid; border-width:medium; }

p{ border-style:solid; border-width:1px; }

Border Color
Properti border-color mendefinisikan warna yang dimiliki oleh border. Nilai-nilai yang normal penggunaan nilai warna misalnya: hex "# 123456", rgb "(123.123.123)" atau "blue". Anda juga dapat mengatur warna border menjadi "transparent".

color chart
chart warna hex
Contoh :
Border Color






Border - Individual sides
Dalam CSS Anda bisa juga menentukan border yang berbeda pada tiap sisi:
Border - Individual




Nah, gabungan dari pengaturan margin, padding dan border pada sebuah elemen dalam CSS sering disebut juga dengan "box model".
Diagram di bawah ini menunjukkan bagaimana box model dibangun:
diagram model box
diagram model box
* Problogiz juga pernah sharing mengenai macam dan style box model dengan berbagai style border, check in HERE 

Wah panjang ya Sob, tuorial CSS ini :)
Tapi semoga gak tambah bingung dengan sharing tentang pemahaman margin, padding dan border ini dan sedikit menyegarkan pengetahuan kita mengenai CSS dan menggunakan CSS untuk mengatur sendiri style dan tata letak halaman web/blog Anda. 
Anda juga bisa datang di w3schools.com sebagai tempat belajar CSS yang tepat.

Cukup sekian dulu......and Cheers!!!
Read More

Google+ Followers

Submit email Anda, dapatkan update artikel:


Like Me

artikel terbaru

|Copyright © 2013| Problogiz |All Rights Reserved|