Tentang Frontend Developer

<div class="frontend coll-00 left">
<div style="text-align:right;border-bottom:1px dashed;border-right:0;" class="coll-50 left">
Dalam dunia Web Developer, beberapa istilah-istilah dibawah merupakan bagian-bagian yang memiliki peran tersendiri dalam pengembangan <a href="http://www.rijaldesigner.xyz/2016/01/manfaat-website.html">sebuah website</a>.
</div>

<div style="text-align:right;" class="coll-50 left">
<span style="font-size:large;">
<b style="color:#9AAC02">Web Designer</b>
<i class="fa fa-file-image-o right" style="background:#9AAC02;margin-left:10px;"></i>
</span>
Web Designer adalah seseorang yang mendesain tampilan atau layout sebuah website. Maksud dari mendesain ini adalah seorang designer membuat gambar website yang nantinya akan seperti apa  dan terlihat seperti apa.
<br />
<br />
Web Designer ini pada dasarnya sama sekali tidak menggunakan kode-kode. Web Designer dalam perannya hanya menggunakan tools seperti Photoshop, Illustrator dan lainnya. 
<br />
<br />

<span style="font-size:large;">
<b style="color:#FAC517">FrontEnd Developer</b>
<i class="fa fa-file-code-o right" style="background:#FAC517;margin-left:10px;"></i>
</span>
<font style="color:#000;">I'm here <i class="fa fa-smile-o"></i> and above</font><a href="http://www.rijaldesigner.xyz/2016/01/tentang-frontend-developer.html">Front-End Developer</a> merupakan seseorang yang mengerjakan kode layout sebuah website yang sebelumnya layout dan gambaran websitenya sudah dikerjakan oleh Web Designer serta mengurusi segala hal yang terjadi pada tampilam website yang diakses dan digunakan oleh client. Front-end Web Developer memiliki keahlian dalam <a href="http://www.rijaldesigner.xyz/2016/01/tentang-html.html">bahasa HTML</a>, <a href="http://www.rijaldesigner.xyz/2016/01/tentang-css.html" title="Tentang CSS">CSS</a>, <a href="http://www.rijaldesigner.xyz/2016/01/tentang-javascript.html">Javascript</a> dan <a href="http://www.rijaldesigner.xyz/2016/01/tentang-jquery.html">jQuery</a>. Ketiga keahlian tersebut merupakan pondasi penting bagi Frontend Web.
<br />
<br />
Namun tidak menutup kemungkinan, seorang Front-end Web Developer memiliki kemampuan di bidang Web Designer atau sebaliknya. Front-end Web Developer biasanya tidak mengurusi hal seperti Database atau bahasa pemrograman PHP, kalaupun iya hanya untuk menampilkan data yang telah dibuat oleh Back-end.
<br />
<br />
</div>

<div style="text-align: left;" class="coll-50 right">
<span style="font-size:large;">
<i class="fa fa-file-excel-o left" style="background:#DD50DD;margin-right:10px;"></i>
<b style="color:#DD50DD">Back-end Web Developer</b>
</span>
Back-end Web Developer merupakan seseorang yang mengerjakan sistem bagaimana sebuat website bekerja. Sistem website ini merupakan sistem yang berjalan di dalam suatu server (server-side). Back-end Web Developer-lah yang bermain dengan bahasa pemrograman server (server-side languange) seperti PHP, JSP, atau ASP. Mereka pula-lah yang biasanya mengurusi urusan Database seperti MySQL, Oracle, dan lain lain.
<br />
<br />
Seorang Backend Developer setidaknya harus memiliki dan memahami konsep algoritma yang kuat dan beberapa konsep-konsep pemrograman seperti OOP atau Object Oriented Programming. Back-end Developer pun harus bisa memastikan bahwa aplikasi (website) yang dibuat aman dari serangan-serangan orang yang tak bertanggung jawab.
<br />
<br />
<span style="font-size:large;">
<i class="fa fa-file-zip-o left" style="background:#018DFF;margin-right:10px;"></i>
<b style="color:#018DFF">Full-stack Web Developer</b>
</span>
Full-stack Web Developer bisa dikatakan sebagai Single Fighter. Hal tersebut disebabkan karena seorang Fullstack Developer harus mengerti dan mengerjakan semua yang dikerjakan oleh Web Designer, Front-end dan Back-end Developer.
</div>
<div class="clear"></div>
</div>
<div style="text-align:left;padding:10px;border-top:1px dashed" class="bottom coll-50 right">
Selain bagian-bagian diatas masih banyak bagian-bagian lain dalam pengembangan sebuah website.
</div>

Tentang Frontend Developer

Dalam dunia Web Developer, beberapa istilah-istilah dibawah merupakan bagian-bagian yang memiliki peran tersendiri dalam pengembangan s...

Tentang CSS

<div class="separatorslider" style="clear: both; padding-top: 30px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFmpzzifTfFlxN2AZkFlmYfShrZy2UTqFEjxz7A9oBXoajWH9BHCKb382ofcXJ70XB2Aq4pbBpSSNThELBZEdhqC9eXh2EMaov3a5XAnuFPJoK7UiV6K2knhHtvKPD9wvVoFBo_1J4Evgj/s1600/tentang-css-cover.jpg"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFmpzzifTfFlxN2AZkFlmYfShrZy2UTqFEjxz7A9oBXoajWH9BHCKb382ofcXJ70XB2Aq4pbBpSSNThELBZEdhqC9eXh2EMaov3a5XAnuFPJoK7UiV6K2knhHtvKPD9wvVoFBo_1J4Evgj/s1600/tentang-css-cover.jpg" /></a></div>
<div style="text-align: justify;">
Seperti halnya dengan <a href="http://www.rijaldesigner.xyz/2016/01/tentang-html.html">HTML</a>, CSS bukan bahasa pemograman. CSS sendiri singkatan dari Cascading Style Sheet yang merupakan bahasa style/gaya yang digunakan untuk mengatur tampilan sebuah <a href="http://www.rijaldesigner.xyz/2016/01/manfaat-website.html">website</a>. Dengan adanya CSS memungkinkan <a href="http://www.rijaldesigner.xyz/2016/01/tentang-frontend-developer.html">frontend web developer</a> untuk menampilkan berbagai bentuk tampilan berbeda pada sebuah halaman website serta untuk mengendalikan dan mengatur elemen-elemen website sehingga akan lebih terstruktur dan seragam dalam hal tampilan. Diantaranya mengendalikan ukuran elemen-elemen html, mudah dikolaborasikan dengan <a href="http://www.rijaldesigner.xyz/2016/01/tentang-javascript.html">Javascript</a> dan <a href="http://www.rijaldesigner.xyz/2016/01/tentang-jquery.html">jQuery</a> dalam hal tampilan, memberi kemudahan bagi pengguna format gambar <a href="http://www.rijaldesigner.xyz/2016/01/tentang-svg.html">SVG</a>, gambar, warna baik berupa tulisan, tabel, ukuran dan warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah dan banyak lagi. 
</div>
<br />
<br />
CSS merupakan teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996. Setelah CSS distandarisasikan, Internet Explorer dan Netscape melepas browser terbaru mereka yang telah sesuai atau paling tidak hampir mendekati dengan standar CSS.
<br />
<br />
Kode CSS terdiri dari Selector, Property dan Value yang bentuk penulisannya adalah 
<div class="htmlprint" style="background: #232323;">
selector { property : value }
</div>. Sebagai salah satu contoh penggunaan CSS untuk memberi warna dan menambah ukuran huruf pada sebuah tulisan "Tentang CSS" :

<div class="coll-33 left">
<div class="introcss" style="width: 100%;"><span style="font-weight: 700;">1</span> File HTML</div>
<div class="wrappcss" style="width: 100%;">
<pre class="htmlprint">Tentang HTML dan <b>Tentang CSS</b> bukan bahasa pemograman.</pre>
</div>
</div>

<div class="coll-33 left">
<div class="introcss" style="width: 100%;"> Penggunaan CSS <span style="font-weight: 700;">2</span></div>
<div class="wrappcss" style="width: 100%;">
<pre class="htmlprint">b { color:blue; font-size:15px; }</pre>
</div>
</div>

<div class="coll-33 left">
<div class="introcss" style="width: 100%;"><span style="font-weight: 700;">3</span>Web Browser</div>
<div class="wrappcss" style="background: rgba(255, 255, 255, 0.8); width: 100%;">
Tentang HTML dan <b style="color: blue; font-size: 20px;">Tentang CSS</b> bukan bahasa pemograman.
</div>
</div>

<div class="coll-00 left">
<div class="introcss" style="width: 100%;">Keterangan<span style="font-weight: 700;">4</span></div>
<div class="wrappcss" style="background: rgba(255, 255, 255, 0.8); width: 100%;">
Contoh (1) terdapat kode html yang mengapit "Tentang CSS" dan Contoh (2) memberi style dengan memberi warna biru dan merubah ukuran huruf sebesar 15 pixel pada tulisan yang diapit kode html. Dimana 
<i class="fa fa-hand-o-right"></i><i>b</i> adalah selector, 
<i class="fa fa-hand-o-right"></i><i>color, font-size</i> adalah property, 
<i class="fa fa-hand-o-right"></i><i>blue, 15px</i> adalah value dan Contoh (3) tampak terlihat di web browser hasil dari pemberian style dimana "Tentang CSS" berwarna biru dan lebih besar dari tulisan lainnya
</div>
</div>

</div>
<div style="clear: both;">
Saat ini terdapat tiga versi CSS diantaranya adalah <b>CSS1, CSS2,</b> dan <b>CSS3</b>. CSS1 dikembangkan dan berpusat pada pemformatan file HTML, sementara CSS2 dikembangkan untuk memenuhi kebutuhan terhadap HTML agar bisa ditampilkan di printer, sedangkan CSS3 adalah versi terbaru dari CSS yang mampu melakukan berbagai hal dalam menyusun struktur dan desain website. Diantara kelebihan CSS3 adalah dapat melakukan animasi dalam halaman website seperti animasi warna hingga animasi 3D. Dengan hadirnya CSS3 front-end lebih dimudahkan dalam hal kompatibilitas sebuah website untuk di smartphone dan tablet dengan dukungan fitur baru. Fitur baru lainnya adalah multiple background, border-radius, drop-shadow, border-image, CSS Math, dan banyak lagi
</div>

<style>

body{background:#fff;}.tentang-css{padding:50px 80px}
.tentang-css span{float:right;border-radius:100px;border:7px solid #fff;height:50px;width:50px;padding-top:6px;font-size:24px;margin:-14px 10px 0 0;text-align:center;background:#fac517;color:#fff;}
.tentang-css .coll-33{padding-right:1px;margin-bottom:10px;}
.wrappcss,.introcss{padding:10px;display:block;background:#FAC517;color:#000;}
.wrappcss{padding:20px 10px;text-align:left;background:rgba(255,255,255,0.7);min-height:110px;font-size:13px;box-shadow:0 5px 3px -1px #bbb;color:#111;border:1px solid #f4f4f4;}
.wrappcss .htmlprint{width:100%;line-height:18px;color:#000;border-radius:0;}
.htmlprint{display:inline-block;color:white;padding:4px 6px 5px;border-radius:3px;font-size:12px;line-height:10px;white-space:inherit}
.thehome{display:none}#cover{background:#fff;}.pagescovertitle{background:none;}
.content-right::before{background:rgba(255,255,255,.6)}
#about.slides,.whitecover{background:none;}
.content-right{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhay61FDHhCqq96UD4nR2UYbjUFhg32w7DuBE-MhA6UsGujZXaAR53bcL4mgAQEzhwmaRmM8A25iyizOTFwVToAzq6l-x8Us8dasFT1gQ_2raP_-nrIgN9SWBFwZuljeeuxgvySIAEA7Mc/s1600/tentang-css.jpg) no-repeat scroll center / 120%}
@media only screen and ( max-width:800px){.tentang-css{padding:50px 0}}
@media only screen and ( max-width:600px){.tentang-css .coll-33{width:50%}.tentang-css .coll-33:nth-child(3){width:100%}}
@media only screen and ( max-width:479px){.tentang-css .coll-33{width:100%}}
</style>

Tentang CSS

Seperti halnya dengan HTML , CSS bukan bahasa pemograman. CSS sendiri singkatan dari Cascading Style Sheet yang merupakan bahasa style/ga...

Manfaat Website

<div class="separatorslider" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgItIxpy1yt36Eb2dWhNDU5ZkTcn1Smqt6u8QtVMBc2FRk3Ugrko89vpHOt-P5y-_7tm5rFFmcjINaWR3Tvzy_PgCjkufqWMJTuEMVZLmRH2OVPz4oCfAr8h4hZ7GnT2_MdUfmqNOdVU9i5/s1600/manfaat-website-bagi-bisnis.jpg"></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4wibX0_wPM8wB1eRJBXyqqg9c7FW1sCoyRJNfp-pJOczFQyzS1WxKm3Er0IN18BQLq5SKEMW6ikc3JrW4yGex4Rnw3jymquka0fjYR5-Ih8BJe_qPBGSZRalXdubDzHNlgYnCi-WZykEQ/s1600/manfaat-sebuah-website.jpg"><img alt="manfaat website" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwRz3YSlYwfDWK_Hz04chLJE_TDGq90JN5lIwY7m2JUBwVYj_-yq0KrKDwcLZpPHkgF9V5eW6lTF05W-LuB75V_1E4OY-hCYgKsGx0tnLTiUGLGo_HTs0kr-wxe3X09yLU_osNc3dkPauP/s1600/manfaat-sebuah-website.jpg" /></a>
</div>
<div style="text-align: justify;">
Website merupakan bagian yang tak terpisahkan dari dunia internet, Media sederhana untuk mendapatkan dan berbagi informasi serta promosi baik dari personal, komunitas, pemerintah maupun pelaku bisnis. Terlebih, saat ini website tidak hanya dapat diakses melalui komputer namun juga dapat diakses dengan mudah melalui handphone dan website merupakan media luar biasa yang tak mengenal waktu, serta media lintas batas daerah bahkan negara. 
<br />
<br />
Dengan tersedianya media yang bisa diakses semua orang, disemua tempat dan disemua waktu maka sebuah website menjadi salah satu kunci untuk memenangkan persaingan khususnya bagi pelaku bisnis dan memberikan informasi sedetil mungkin seperti lokasi, harga, informasi sekitar, events dll, secara interaktif dan up to date. Semakin banyak yang tau, semakin besar peluang yang bersangkutan menjadi pilihan terfavorit. 
<br />
<br />
Disebutkan, di Tanah Air perkembangan teknologi informasi sangat pesat khususnya pengguna internet yang jumlahnya cukup fantastis. Dan tidak hanya jumlah penggunanya menunjukkan kenaikan secara signifikan, tetapi waktu yang digunakan untuk berselancar di dunia maya juga terus bertambah, dan diperkirakan akan semakin bertambah waktu yang dihabiskan untuk mengakses internet yang nantinya akan mengalahkan waktu yang di habiskan mengakses media televisi dan cetak.
</div>
<div class="manfaat">
<div class="coll-50 left">
<div class="coll-00" style="background: #feb80a;">
<i class="fa fa-star" style="text-align: center;"></i>
<span style="font-size: small;">Dengan website, Membuka peluang besar bagi yang bersangkutan untuk menjadi pilihan terfavorit disemua kalangan bahkan semua umur</span>
</div>
<div class="coll-00" style="background: #83010b;">
<i class="fa fa-road" style="text-align: center;"></i>
<span style="font-size: small;">Dengan website, Jarak tidak menjadi masalah sehingga dapat berhubungan secara langsung tanpa mengenal batas kota, desa bahkan Negara.</span>
</div>
<div class="coll-00" style="background: #22bfce;">
<i class="fa fa-bullhorn" style="text-align: center;"></i>
<span style="font-size: small;">Dengan website, Membangun sarana promosi yang murah dan meriah serta sangat luar biasa karena sebagai media lintas batas dan waktu</span>
</div>
</div>
<div class="coll-50 right">
<div class="coll-00" style="background: #fc430a;">
<i class="fa fa-dashboard" style="text-align: center;"></i>
<span style="font-size: small;">Dengan website, Akan mudah dikenali dan memperkenalkan atau mempromosikan produk, jasa & informasi dengan cepat. (tak kenal maka tak laku)</span>
</div>
<div class="coll-00" style="background: #4c027b;">
<i class="fa fa-users" style="text-align: center;"></i>
<span style="font-size: small;">Dengan website, Komunikasi dapat dilakukan dengan mudah baik dengan anggota komunitas, klien bahkan kepada masyarakat secara luas</span>
</div>
<div class="coll-00" style="background: #055f81;">
<i class="fa fa-globe" style="text-align: center;"></i>
<span style="font-size: small;">Dengan website, Membangun sebuah 'jembatan informasi' bagi siapapun yang mudah di akses oleh semua orang dimanapun dan kapanpun
</span>
</div>
</div>
<div style="float: left; margin: 22px 0 -20px; text-align: center; width: 100%;">
<div class="touch">
</div>
</div>
<div class="ujung-jari" style="text-align: center;">
<b>DI UJUNG JARI</b>
<br />
<div class="left" style="text-align: justify;">
Disisi lain, Kehadiran internet membuat biaya promosi yang semula sangat mahal kini dapat dipangkas sedemikian rupa. Ditambah harga sebuah perangkat teknologi kian terjangkau membuat internet saat ini bisa dijangkau oleh hampir semua lapisan masyarakat hingga ke pelosok. <b style="font-family: "allan"; font-size: 20px; font-weight: 400;">Dengan sentuhan di ujung jarinya</b>, sebuah promosi dan informasi dapat menembus batas ruang dan waktu, mudah diakses di manapun dan kapanpun serta oleh siapapun, dengan jangkauan yang sangat luas mencapai ke seluruh dunia. 
</div>
<br />
<b style="font-family: "allan"; font-size: 18px; font-weight: 400;">Selamat Datang di Era Informasi!!</b>
</div>
</div>
<style>
.touch{width:200px;height:200px;overflow:hidden;border:10px solid #fff;border-radius:250px;display:inline-block;box-shadow:0 0 30px #fff;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbpzRJ8hL6HLev-40VFk12Uir72Xi8dt4EhtXxMOuxS5SdLYM7A007q_XrST8SdJ861gUoJmLP2pMqLt_rVkSsrf48XFDxVEbFqKQBCTpxqfsbGSrAphUUDUkm7ySQ5-VMowBup_dZ0OhX/s1600/ujung-jari.jpg) no-repeat scroll center center / 180px;}
.ujung-jari{position:relative;padding:20px 0;float:left;width:100%;color:#000;}
.ujung-jari b{font-size:18px;font-family:oswald}
.thehome{display:none;}
.manfaat{color:#fff;margin:0 auto;max-width:760px;overflow:hidden;padding:50px 20px 0;}
.manfaat i{font-size:50px;padding:30px 0;}
.manfaat .coll-50.left i{float:left;margin-right:10px;}
.manfaat .coll-50.right i{float:right;margin-left:10px;}
.manfaat .coll-00{border-radius:20px;display:inline-block;padding:20px;position:relative;box-shadow:0 -5px 15px -5px #000;}
.manfaat .coll-50 .coll-00::before{content:"";position:absolute;border-width:30px;bottom:-20px;border-style:solid;}
.manfaat .coll-50.right{margin-top:50px;}
.manfaat .coll-50.left .coll-00::before{right:0;}.manfaat .coll-50.right .coll-00::before{left:0;}
.manfaat .coll-50.left .coll-00:nth-child(1)::before{border-color:transparent #FEB80A transparent transparent;}
.manfaat .coll-50.left .coll-00:nth-child(2)::before{border-color:transparent #83010B transparent transparent;}
.manfaat .coll-50.left .coll-00:nth-child(3)::before{border-color:transparent #22BFCE transparent transparent;}
.manfaat .coll-50.right .coll-00:nth-child(1)::before{border-color:transparent transparent transparent #FC430A;}
.manfaat .coll-50.right .coll-00:nth-child(2)::before{border-color:transparent transparent transparent #4C027B;}
.manfaat .coll-50.right .coll-00:nth-child(3)::before{border-color:transparent transparent transparent #055F81;}
.pagescovertitle{background:none}
#cover{background:#FAC517;}
#fourth::before{content:"";background:rgba(240,240,240,.8)}
#fourth{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaggZBBDraxdZb8HS3jbFAlZZvSdN9T5Fv3KW3mcO6FqOll6qapA9WscFNEaKAOTY1DjgZP1FdO18YcIuCk5EB4bcdTKprC2mhyphenhyphennEadAzZZ28DIaf745FFcovbqqYPdt5C8hWBWE48JUnq/s1600/manfaat-website.jpg) no-repeat scroll center}
@media only screen and (max-width:768px){
.manfaat{padding:50px 2%;}
}
@media only screen and (max-width:480px){
.manfaat{padding:50px 0;}
.manfaat i{padding:0;font-size:30px;}
}
@media only screen and (max-width:384px){
.manfaat .coll-00{line-height:18px;padding:20px 10px;}
}
</style>

Manfaat Website

Website merupakan bagian yang tak terpisahkan dari dunia internet, Media sederhana untuk mendapatkan dan berbagi informasi serta promos...

Tentang SVG

<div class="separator">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc5gnHLbECt5gbO1crvEjbbzn-xRjlyOrQqohamAvfoSVfZKBPACVsTUsUgVgE4_k6ALpeRiybc91bjJBtxA0bM7IgdbECYiDG0FmjHEwb6IsoZTQSihegUf_GHWG5TF-cqeIPERNoi-vq/s1600/tentang-svg.jpg"><img alt="tentang SVG" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc5gnHLbECt5gbO1crvEjbbzn-xRjlyOrQqohamAvfoSVfZKBPACVsTUsUgVgE4_k6ALpeRiybc91bjJBtxA0bM7IgdbECYiDG0FmjHEwb6IsoZTQSihegUf_GHWG5TF-cqeIPERNoi-vq/s1600/tentang-svg.jpg" /></a></div>
<div style="text-align: justify;">
SVG adalah singkatan dari Scalable Vector Graphics yaitu suatu format gambar yang menggunakan XML sebagai dasar untuk membuat gambar 2 dimensi. Penggunaan gambar dengan format svg pada sebuah <a href="http://www.rijaldesigner.xyz/2016/01/manfaat-website.html">website</a> telah direkomendasikan oleh W3C sejak lama, karena SVG memiliki banyak manfaat bagi sebuah situs diantaranya, ukuran file SVG lebih kecil daripada JPG atau PNG yang berarti proses perenderan atau loading sebuah website semakin cepat. Selain itu, karena gambar dengan format SVG dibuat dalam bentuk file XML maka tentu dapat di index mesin pencari, ditulis dengan <a href="http://www.rijaldesigner.xyz/2016/01/tentang-javascript.html">bahasa pemograman web</a> atau dikompres serta dapat dibuat dan disunting dengan aplikasi teks editor apa saja. Bahkan sejumlah peramban web populer seperti Mozilla Firefox, Internet Explorer, Google Chrome, Opera, dan Safari sudah mulai mendukung penggunaan gambar dengan format SVG.
<br />
<br />
SVG yang merupakan kode XML tentu bisa dimodifikasi dengan fleksibel menggunakan <a href="http://www.rijaldesigner.xyz/2016/01/tentang-css.html">CSS</a>, <a href="http://www.rijaldesigner.xyz/2016/01/tentang-javascript.html">JavaScript</a> dan <a href="http://www.rijaldesigner.xyz/2016/01/tentang-jquery.html">jQuery</a>. Serta tidak memerlukan HTTP request, jadi kode bisa langsung diletakkan pada sebuah file <a href="http://www.rijaldesigner.xyz/2016/01/tentang-html.html">HTML</a> atau pada bagian halaman website.<br />
<br />
</div>
<div class="coll-00 tentang-svg left">
<div style="text-align:center;">
Sebagai contoh penulisan kode format gambar SVG<br /><br />
</div>
<pre class="svgprint">
<span class="cp"><?xml version="1.0" encoding="iso-8859-1"?></span>
<span class="cp"><!DOCTYPE svg PUBLIC "-//W3C//DTD svg 20000303 Stylable//EN" "http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303 stylable.dtd"></span>
<br/>
<span class="nt"><svg</span> <span class="na">width=</span><span class="s">"100px"</span> <span class="na">height=</span><span class="s">"50px"</span><span class="nt">></span>
<br/>
<span class="nt"><text</span> <span class="na">style=</span><span class="s">"fill:red"</span> <span class="na">x =</span><span class="s">"10"</span> <span class="na">y=</span><span class="s">"20"</span><span class="nt">></span>Hello World !<span class="nt"></text></span>
<br/>
<span class="nt"></svg></span>
</pre>
<br/>
<div class="coll-60 left">
<div style="text-align: justify;">
Selain itu, beberapa tambahan penting tentang SVG dan keuntungan lain penggunaan SVG dibanding format gambar yang lain, misalnya seperti JPEG, PNG dan GIF antara lain: <br /><br />
</div>
<ul>
<li>File sumber SVG berukuran lebih kecil dan dapat dikompresi dibanding dengan format gambar JPEG dan GIF </li>
<li>Gambar dalam format SVG bersifat scalable/diresizing. SVG dapat menghasilkan grafik yang tidak mengurangi kualitas gambar apabila di zoomin maupun resizing. </li>
<li>Gambar dalam format SVG dapat dicetak dengan kualitas yang tinggi dan sama baiknya pada berbagai resolusi </li>
<li>Gambar dalam format SVG bersifat zoomable. 
Setiap bagian dari gambar dapat di zoom tanpa degradasi mutu Text dalam SVG “selectable” dan “searchable” (sangat berguna dalam peta) </li>
<li>SVG dapat bekerja dengan Teknologi Java SVG merupakan “open standard” SVG merupakan murni XML </li>
<li>Elemen dan attribut dalam SVG dapat di beri nama.</li>
<li>SVG terintegrasi dengan standar W3C lainnya misalnya DOM dan XSL </li>
</ul>
</div>
<div class="coll-40 right">
<div style="text-align:center;">
Beberapa contoh gambar dengan format SVG <a rel="prettyPhoto[pp_svg]" href="https://upload.wikimedia.org/wikipedia/commons/1/15/Svg.svg"><i class="fa fa-search-plus"></i></a> :<br/><br/>
</div>
<a rel="prettyPhoto[pp_svg]" href="http://rationalwiki.org/w/images/9/9c/Che.svg"></a>
<a rel="prettyPhoto[pp_svg]" href="http://dev.w3.org/SVG/tools/svgweb/samples/svg-files/gallardo.svg"></a>
<a rel="prettyPhoto[pp_svg]" href="https://ryanbrownhill.github.io/svg-animation-pres/img/svg-logo.svg">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="100%" width="100%" viewBox="0 0 300 300">
<defs>
<g id="SVG" fill="#ffffff" transform="scale(2) translate(20,79)">
<path id="S" d="M 5.482,31.319 C2.163,28.001 0.109,23.419 0.109,18.358 C0.109,8.232 8.322,0.024 18.443,0.024 C28.569,0.024 36.782,8.232 36.782,18.358 L26.042,18.358 C26.042,14.164 22.638,10.765 18.443,10.765 C14.249,10.765 10.850,14.164 10.850,18.358 C10.850,20.453 11.701,22.351 13.070,23.721 L13.075,23.721 C14.450,25.101 15.595,25.500 18.443,25.952 L18.443,25.952 C23.509,26.479 28.091,28.006 31.409,31.324 L31.409,31.324 C34.728,34.643 36.782,39.225 36.782,44.286 C36.782,54.412 28.569,62.625 18.443,62.625 C8.322,62.625 0.109,54.412 0.109,44.286 L10.850,44.286 C10.850,48.480 14.249,51.884 18.443,51.884 C22.638,51.884 26.042,48.480 26.042,44.286 C26.042,42.191 25.191,40.298 23.821,38.923 L23.816,38.923 C22.441,37.548 20.468,37.074 18.443,36.697 L18.443,36.692 C13.533,35.939 8.800,34.638 5.482,31.319 L5.482,31.319 L5.482,31.319 Z"/>
<path id="V" d="M 73.452,0.024 L60.482,62.625 L49.742,62.625 L36.782,0.024 L47.522,0.024 L55.122,36.687 L62.712,0.024 L73.452,0.024 Z"/>
<path id="G" d="M 91.792,25.952 L110.126,25.952 L110.126,44.286 L110.131,44.286 C110.131,54.413 101.918,62.626 91.792,62.626 C81.665,62.626 73.458,54.413 73.458,44.286 L73.458,44.286 L73.458,18.359 L73.453,18.359 C73.453,8.233 81.665,0.025 91.792,0.025 C101.913,0.025 110.126,8.233 110.126,18.359 L99.385,18.359 C99.385,14.169 95.981,10.765 91.792,10.765 C87.597,10.765 84.198,14.169 84.198,18.359 L84.198,44.286 L84.198,44.286 C84.198,48.481 87.597,51.880 91.792,51.880 C95.981,51.880 99.380,48.481 99.385,44.291 L99.385,44.286 L99.385,36.698 L91.792,36.698 L91.792,25.952 L91.792,25.952 Z"/>
</g>
</defs>
<path id="base" fill="#000" d="M8.5,150 H291.5 V250 C291.5,273.5 273.5,291.5 250,291.5 H50 C26.5,291.5 8.5,273.5 8.5,250 Z"/>
   <g stroke-width="38.0086" stroke="#000">
     <g id="svgstar" transform="translate(150, 150)">
       <path id="svgbar" fill="#ffb13b" 
         d="M-84.1487,-15.8513 a22.4171,22.4171 0 1 0 0,31.7026 h168.2974 a22.4171,22.4171 0 1 0 0,-31.7026 Z"/>
       <use xlink:href="#svgbar" transform="rotate(45)"/>
       <use xlink:href="#svgbar" transform="rotate(90)"/>
       <use xlink:href="#svgbar" transform="rotate(135)"/>
     </g>
   </g>
<use xlink:href="#svgstar"/><use xlink:href="#base" opacity="0.85"/><use xlink:href="#SVG"/>
</svg>
</a>
</div>
</div>
<style>
.svgprint{background:#232323;padding:20px;color:#bbb;white-space:inherit;border-radius:5px;}
.svgprint span{display:inline-block}
.tentang-svg{}
.tentang-svg .coll-60{padding:20px;}
.tentang-svg .coll-40{padding:20px 50px;}
.thehome{display:none;}
#cover{background:#FE9901;}
.separator {border:3px solid #000;border-radius:6px;float:left;overflow:hidden;width:300px;margin-right:10px;height:142px;}
@media only screen and (max-width:800px){
.tentang-svg .coll-60{width:100%}
.tentang-svg .coll-40{max-width:400px;width:100%;float:none;margin:0 auto;padding:20px;}
}
@media only screen and (max-width:480px){
.separator {width:100%;height:auto;background:#FE9901;margin:0 0 20px;}
}
</style>

Tentang SVG

SVG adalah singkatan dari Scalable Vector Graphics yaitu suatu format gambar yang menggunakan XML sebagai dasar untuk membuat gambar 2 di...

Subscribe to: Posts ( Atom )

Menu - Logo

TheIcon

TheSlider

Label Front End

AboutOne

Tentang

MY WORKS

AboutTwo

FrontEnd WEB Developer

AboutThree

Website

FourthCSS

FRESH UPDATE

Tentang Frontend Developer

Tentang Frontend Developer

Tentang Frontend Developer

Tentang CSS

Tentang CSS

Tentang CSS

Manfaat Website

Manfaat Website

Manfaat Website

Tentang SVG

Tentang SVG

Tentang SVG

FollowMe and CSS

TETAP TERHUBUNG

SUBSCRIBES FEED

DESIGN & FRONTEND WEB

ConfigSummary