CSS
Syntax bisa diartikan sebagai bentuk kode. Jadi Syntax CSS bisa berarti bentuk kode CSS. Kode CSS berbeda dengan kode HTML.
Selector adalah elemen HTML yang akan diberikan style.
Property adalah atribut dari suatu elemen HTML yang ingin anda tentukan stylenya, sedangkan
Value adalah nilai dari atribut tersebut.
Kode CSS diatas bisa berarti elemen body (tag <body>) akan ditampilkan dengan warna background abu-abu (#cccccc adalah kode warna untuk abu-abu), dan pada perintah berikutnya kita menentukan agar elemen body menggunakan font Calibri.
Jika font Calibri tidak ada pada komputer user, maka gunakan font Verdana, begitu seterusnya.
Penulisan font Calibri menggunakan petik dua adalah karena font Calibri bukan merupakan font standart dalam CSS.
Font yang tidak standart dalam CSS sebaiknya diberi tanda petik dua. Font yang namanya terdiri lebih dari satu kata juga harus diberikan tanda petik, misal “Times New Roman”.
Inheritance (Pewarisan)
Maksud dari Interitance pada CSS adalah begitu kita memberikan style pada elemen body, maka elemen yang didalamnya akan mengikuti style dari elemen body kecuali elemen tersebut diberi style tertentu.
Dari contoh kode diatas, kita memberikan style pada elemen body (tag <body>).
Dengan begini, maka tag-tag HTML yang ada diantara <body> dan </body> yaitu (tag <h1> dan tag <p>) akan mengikuti style <body>, yaitu memiliki warna latar abu-abu dan menggunakan font Calibri.
0
 |
| CSS Syntax |
Kode CSS hanya dibagi menjadi 3 bagian, yaitu selector, property, dan value.
 |
| CSS Syntax |
selector { property : value; }
Selector adalah elemen HTML yang akan diberikan style.
Property adalah atribut dari suatu elemen HTML yang ingin anda tentukan stylenya, sedangkan
Value adalah nilai dari atribut tersebut.
body { background-color:#cccccc; font-family: "Calibri", Verdana, Tahoma; }
Jika font Calibri tidak ada pada komputer user, maka gunakan font Verdana, begitu seterusnya.
Penulisan font Calibri menggunakan petik dua adalah karena font Calibri bukan merupakan font standart dalam CSS.
Font yang tidak standart dalam CSS sebaiknya diberi tanda petik dua. Font yang namanya terdiri lebih dari satu kata juga harus diberikan tanda petik, misal “Times New Roman”.
Inheritance (Pewarisan)
Maksud dari Interitance pada CSS adalah begitu kita memberikan style pada elemen body, maka elemen yang didalamnya akan mengikuti style dari elemen body kecuali elemen tersebut diberi style tertentu.
<html>
<head>
<title>Syntax CSS</title>
<style type="text/css">
body {
background-color:#cccccc;
font-family: "Calibri", Verdana, Tahoma;
}
</style>
</head>
<body>
<h1>Semangat Pagi</h1>
<p>paragraf</p>
</body>
</html>
Dari contoh kode diatas, kita memberikan style pada elemen body (tag <body>).
Dengan begini, maka tag-tag HTML yang ada diantara <body> dan </body> yaitu (tag <h1> dan tag <p>) akan mengikuti style <body>, yaitu memiliki warna latar abu-abu dan menggunakan font Calibri.
HTML
Quotation tag <blockquote>
Tag <blockquote> ini biasanya digunakan untuk menandakan kuttipan tersebut dari sumber lain.
0
 |
| Quotation pada web / blogspot |
Dalam bahasa indonesia Quotation adalah kutipan.
Kutipan ini biasanya kita gunakan untuk menandakan bahwa kalimat atau kata-kata itu adalah hasil pemikiran sendiri atau dari sumber lain, yang biasanya berupa kata-kata motivasi atau hal-hal penting lainnya dan diapit tanda kutip (“....”).
Dalam HTML sendiri untuk menggunakan quote ada beberapa tag untuk dipakai.
Quotation tag <q>
Tag <q> biasanya digunakan untuk membuat kutipan yang pendek dan
biasanya disisipkan didalam tag lain
<html> <body> <p>Deddy Suranto mengatakan: <q>Tidak harus besar untuk memulai usaha,namun kita harus memulai sesuatu untuk menjadi besar</q></p> </body> </html>
Quotation tag <blockquote>
Tag <blockquote> ini biasanya digunakan untuk menandakan kuttipan tersebut dari sumber lain.
<html><head><title>Test</title></head><body> <p>Motivasi dari Toto Sukamto</p> <blockquote cite="https://s2b-indonesia.blogspot.com/2018/06/toto-sukamto.html> Tiada kesuksesan tanpa jerih payah, tetapi S2B sangat pantas dan layak membayar tetesan keringat kita, penolakan, ejekan, cemoohan bahkan makian kita dapatkan... </blockquote> </body></html>
HTML
Tag Break ( < br > )
Cara lain untuk membuat paragraf kedua dengan menggunakan tag <br> (br singkatan dari break ).
Jika kode HTML diatas dijalankan, maka hasilnya hampir sama dengan menggunakan tag <p>.
Namun pemisahan paragraf menggunakan tag <br> bukanlah untuk membuat paragraf. Tag <br> berfungsi untuk memisahkan sebuah bagian text dengan text lain. Jika yang kita butuhkan adalah struktur paragraf, maka gunakan tag <p>
0
 |
| Pharagraf pada web / blogspot |
Pada blogspot atau web tidak mengenali apakah kalimat tertentu termasuk dalam paragraf atau tidak.
Browser akan menghapus spasi tambahan dan garis tambahan ketika halaman ditampilkan.
Untuk mengenali bahwa yang kita tulis merupakan paragraf baru browser sudah menyediakan kode berupa < p > dan penutup < /p > .
Kita harus memberi tahu browser web bahwa kedua kalimat itu harus terpisah.Dan bahwa masing-masing kalimat itu adalah sebuah paragraf .
<html>
<body>
<p>Ini adalah paragraf 1</p>
<p>Ini adalah paragraf 2</p>
</body>
</html>
Tag Break ( < br > )
Cara lain untuk membuat paragraf kedua dengan menggunakan tag <br> (br singkatan dari break ).
<html> <body> <p>Pharagraf 1<br/>pharagraf 2</p> </body> </html>
Namun pemisahan paragraf menggunakan tag <br> bukanlah untuk membuat paragraf. Tag <br> berfungsi untuk memisahkan sebuah bagian text dengan text lain. Jika yang kita butuhkan adalah struktur paragraf, maka gunakan tag <p>
Perhatikan pada penulisan tag <br>, tag break adalah salah satu dari beberapa tag yang tidak memiliki tag penutup, dan bisa ditulis sebagai<br > atau<br />.
Penulisan <br /> merupakan bawaan dari xHTML yang dianggap lebih rapi. Namun dalam standar HTML5, penulisan <br> maupun <br /> tetap dianggap valid.
Penulisan <br /> merupakan bawaan dari xHTML yang dianggap lebih rapi. Namun dalam standar HTML5, penulisan <br> maupun <br /> tetap dianggap valid.
Tag untuk penebalan dan garis miring ( <em> dan <strong>
Di dalam sebuah paragraf, kadang kita perlu untuk membuat penekanan pada kata-kata tertentu.
Penekanan ini bisa dilakukan dengan menebalkan kata, atau dengan garis miring.
Tag emphasis (penekanan) terdiri dari 2 tag, <em> untuk emphasis, dan <strong> untuk strong emphasis.
Pada umumnya web browser akan menampilkan <em> sebagai garis miring, dan <strong> dengan penebalan huruf.
<html> <head> <title>Judul</title> </head> <body> <p>ini adalah paragraf <em>pertama</em>, Ini adalah paragraf <strong>kedua</strong></p> </body> </html>
Kita juga akan menemukan bahwa HTML memiliki tag <i> (italic) untuk memiringkan huruf, dan <b> (bold) untuk menebalkan huruf. Pakar HTML yang mendukung pemisahan konten dengan tampilan tidak menyarankan menggunakan tag <i> dan <b>, karena kedua tag ini akan mempengaruhi tampilan dari HTML.
Tampilan halaman web seharusnya di tangani oleh CSS, bukan di dalam kode HTML. Pada xHTML, tag <i> dan <b> sudah dianggap usang dan tidak akan dipakai lagi, namun dalam spesifikasi HTML5, tag <i> dan <b> kembali dianggap relevan.
Tampilan halaman web seharusnya di tangani oleh CSS, bukan di dalam kode HTML. Pada xHTML, tag <i> dan <b> sudah dianggap usang dan tidak akan dipakai lagi, namun dalam spesifikasi HTML5, tag <i> dan <b> kembali dianggap relevan.
HTML
Banyak yang belum paham apa itu heading di blogspot, apalagi cara membuatnya. Secara sederhana heading adalah "judul". Masalahnya adalah di dalam blog, judul itu mempunyai susunan bertingkat-tingkat
Sebagai contoh tingkatan judul atau heading sebagai berikut
0
 |
| Heading pada blogspot |
Sebagai contoh tingkatan judul atau heading sebagai berikut
- Judul Halaman < h1 >
- Judul Artikel < h2 >
- Judul Poin Dalam Artikel < h2 >
- Judul Sub poin dalam artikel < h3 >
- Judul widget, dll < h4 >
Judul didefinisikan dengan tag <h1> hingga <h6>.
<h1> mendefinisikan tajuk yang paling penting hingga <h6> mendefinisikan heading yang paling tidak penting.
Heading sangat penting
Mesin pencari menggunakan judul untuk mengindeks struktur dan konten halaman blogspot atau web Anda.
Secara default template blogspot selalu membuat heading <h2> untuk judul widget. Anda perlu mengubah ini menjadi <h4>.
Secara default template blogspot selalu membuat heading <h2> untuk judul widget. Anda perlu mengubah ini menjadi <h4>.
- Buka menu Tata Letak
- Lihat Nama dari widget yang akan diubah heading tagnya
- Buka menu TEMPLATE lalu klik EDIT HTML
- Pada tampilan HTML, klik kursor di antara kode HTML dan tekan CTRL+F sesudahnya. Ini akan membuka kotak pencarian kode
- Masukkan nama widget tadi ke kotak pencarian dan tekan Enter
- Sekarang anda sudah melihat nama widget tersebut, sekarang tinggal mengubah heading tagnya dari <h2> menjadi <h4>. Demikian juga penutupnya dari </h2> menjadi </h4>
- Ubah semua heading tag dari nama widget yang anda inginkan, dan klik SIMPAN TEMPLATE
BLOGING
HOW TO
Untuk membuat code script fanspage facebook sebelumnya anda harus mempunyai halaman facebook terlebih dahalu. Apabila sudah membuat halaman facebook ikuti langkah – langkah membuat kode scriptnya dibawah ini.
Cara Membuat Code Script Fanspage Facebook
Langkah pertama, anda harus login terlebih dahulu pada akun Facebook yang anda miliki.
Lakukan pengisian mulai dari url halaman facebook, ukuran widget, warna, dll.
Facebook Page URL : Tulis dengan url halaman facebook anda, misalnya seperti http://www.facebook.com/3inetworksindonesia/
Width : Tulis dengan ukuran lebar widget yang anda inginkan.
Height : Tulis dengan ukuran tinggi widget yang anda inginkan.
Tabs : Bisa anda tulis dengan timeline, messenger, atau ivent.
Show Friend's Faces : Checklist untuk menampilkan wajah para pengguna facebook yang telah like halaman anda.
Use Small Header : Checklist untuk menampilkan header dengan ukuran kecil.
Hide Cover Photo : Checklist untuk menyembunyikan cover foto.
Apabila semua data telah terisi secara lengkap, kemudian klik “Get Code”. Maka code fanspage facebook anda akan tampil. Code script siap anda copy dan siap untuk anda pasang pada blog kesayangan anda.
1. Langkah pertama, anda harus login terlebih dahulu pada akun blogger anda.
2. Masuk pada menu Tata Letak/ layout, kemudian klik
0
 |
| Cara memasang fanspage Facebook |
Untuk membuat code script fanspage facebook sebelumnya anda harus mempunyai halaman facebook terlebih dahalu. Apabila sudah membuat halaman facebook ikuti langkah – langkah membuat kode scriptnya dibawah ini.
Cara Membuat Code Script Fanspage Facebook
Langkah pertama, anda harus login terlebih dahulu pada akun Facebook yang anda miliki.
Kemudian kunjungi situs Developer Facebook untuk membuat kode scriptnya. Klik link ini https://developers.facebook.com/docs/plugins/page-plugin/.
 |
| Cara memasang fanspage Facebook |
Lakukan pengisian mulai dari url halaman facebook, ukuran widget, warna, dll.
Petunjuk pengisian :
Facebook Page URL : Tulis dengan url halaman facebook anda, misalnya seperti http://www.facebook.com/3inetworksindonesia/
Width : Tulis dengan ukuran lebar widget yang anda inginkan.
Height : Tulis dengan ukuran tinggi widget yang anda inginkan.
Tabs : Bisa anda tulis dengan timeline, messenger, atau ivent.
Show Friend's Faces : Checklist untuk menampilkan wajah para pengguna facebook yang telah like halaman anda.
Use Small Header : Checklist untuk menampilkan header dengan ukuran kecil.
Hide Cover Photo : Checklist untuk menyembunyikan cover foto.
Apabila semua data telah terisi secara lengkap, kemudian klik “Get Code”. Maka code fanspage facebook anda akan tampil. Code script siap anda copy dan siap untuk anda pasang pada blog kesayangan anda.
 |
| Cara memasang fanspage Facebook |
Cara Memasang Widget Fanspage Facebook Di Blog
1. Langkah pertama, anda harus login terlebih dahulu pada akun blogger anda.
2. Masuk pada menu Tata Letak/ layout, kemudian klik
3. Tambahkan Widget/Gadget.
4. Pilih widget HTML/JavaScript,
lalu pastekan semua code script fanspage facebook yang telah anda buat.
 |
| Cara memasang fanspage Facebook |
Klik simpan untuk mendapatkan hasilnya
BLOGING
HOW TO
Sebelum mulai membahas cara membuat blog gratis ada baiknya perhatikan beberapa hal berikut untuk jangka panjang :
1. Tentukan mau membuat blog tentang apa?
Sebenarnya hal ini bebas-bebas saja terserah Anda mau nulis tentang apapun, Tapi kalau boleh saya sarankan untuk jangka panjang usahakan sebisa mungkin Anda menulis tentang materi yang disukai, sebisa mungkin bukan blog gado-gado dan serius mempelajari blog jika ingin sukses di blog. Di dunia ini setiap hari selalu ada yang membuat blog baru, apalagi yang namanya artikel pasti lebih banyak lagi. Fakta menunjukkan bahwa lebih dari 2 juta konten diterbitkan setiap hari. Tetapi tidak sampai 50% dari keseluruhan jumlah tersebut dapat mencapai 10000 pengunjung setiap bulan.
2. Mengelola blog perlu waktu
Jangan berharap bahwa setelah tahu cara bikin blog lalu buat beberapa artikel terus bisa menjadi sukses dan mendapatkan penghasilan. Mengelola blog perlu waktu yang tidak sedikit... Ya.. sebuah blog tidak akan bisa eksis dalam pencarian hanya dalam tempo singkat. Blogging perlu waktu, tenaga, fokus dan kesabaran. Terutama bagi Anda yang berniat mencari uang lewat blog harus mengeluarkan energi ekstra lagi.
Langsung saja ke cara membuat blog gratis sebagai berikut :
1. Buat Email Gmail
Kenapa harus menggunakan Email Gmail ? Kenapa tidak menggunakan Email Yahoo ? Kita tahu bahwa Blogger dan Gmail adalah sama-sama produk keluaran Google jadi pihaknya mensyaratkan harus menggunakan Email Gmail.
Selain itu sebuah email sangatlah penting, Karena hampir semua produk internet memerlukan email sebagai alat untuk memulainya (login). Misalnya : Facebook, Intagram, Twitter dan lain-lain.
Setelah Anda mempunyai email sebaiknya dicatat kemudian simpan USERNAME dan PASSWORD ditempat yang aman.
3. Silahkan isikan EMAIL Anda dan PASSWORD yang sudah dibuat sebelumnya, kemudian tekan ENTER atau klik Sign In. Perhatikan juga huruf-huruf yang digunakan, Karena login sangatlah sensitif, Bila ada 1 huruf saja yang tidak sama persis maka tidak akan bisa login.
4. Akan terbuka layar baru , klik saja kotak bertuliskan "Blog Baru" kemudian tekan ENTER
5. Anda akan memasuki layar baru, silahkan isi JUDUL BLOG, buatlah judul yang sesuai dengan thema blog, upayakan jangan terlalu panjang.
6. Isi alamat blog
Buatlah alamat blog yang tidak terlalu panjang agar mudah mengingatnya, kapasitas yang diijinkan adalah 15 karakter lebih dari itu tidak akan bisa.
Jika alamat blog yang anda ketikan belum ada yang miliki / gunakan maka akan tampil "alamat ini tersedia" , tetapi jika alamatnya sudah ada yang menggunakannya maka akan ada pesan " maaf, alamat ini tidak tersedia" dan tanda seru (!) berwarna kuning maka Anda harus mencoba alamat baru lagi.
Tips : jika tidak memungkinkan Anda bisa menyisipkan angka atau tanda strip ( - )
7. Pilih TEMPLATE yang menurut selera Anda.
Pilih salah satu yang sesuai dengan keinginan kemudian klik saja "buat blog!", Karena Anda baru belajar cara membuat blog maka saran saya gunakan yang pertama ( tipe sederhana) saja, template ini berfungsi sebagai tampilan atau boleh dikatakan sebagai kulit dari sebuah blog. Nantinya template ini dapat Anda ganti sesuai dengan kehendaki.
0
 |
| Cara membuat blog gratis |
Sebelum mulai membahas cara membuat blog gratis ada baiknya perhatikan beberapa hal berikut untuk jangka panjang :
1. Tentukan mau membuat blog tentang apa?
Sebenarnya hal ini bebas-bebas saja terserah Anda mau nulis tentang apapun, Tapi kalau boleh saya sarankan untuk jangka panjang usahakan sebisa mungkin Anda menulis tentang materi yang disukai, sebisa mungkin bukan blog gado-gado dan serius mempelajari blog jika ingin sukses di blog. Di dunia ini setiap hari selalu ada yang membuat blog baru, apalagi yang namanya artikel pasti lebih banyak lagi. Fakta menunjukkan bahwa lebih dari 2 juta konten diterbitkan setiap hari. Tetapi tidak sampai 50% dari keseluruhan jumlah tersebut dapat mencapai 10000 pengunjung setiap bulan.
2. Mengelola blog perlu waktu
Jangan berharap bahwa setelah tahu cara bikin blog lalu buat beberapa artikel terus bisa menjadi sukses dan mendapatkan penghasilan. Mengelola blog perlu waktu yang tidak sedikit... Ya.. sebuah blog tidak akan bisa eksis dalam pencarian hanya dalam tempo singkat. Blogging perlu waktu, tenaga, fokus dan kesabaran. Terutama bagi Anda yang berniat mencari uang lewat blog harus mengeluarkan energi ekstra lagi.
Langsung saja ke cara membuat blog gratis sebagai berikut :
1. Buat Email Gmail
 |
| Cara membuat blog gratis |
Kenapa harus menggunakan Email Gmail ? Kenapa tidak menggunakan Email Yahoo ? Kita tahu bahwa Blogger dan Gmail adalah sama-sama produk keluaran Google jadi pihaknya mensyaratkan harus menggunakan Email Gmail.
Selain itu sebuah email sangatlah penting, Karena hampir semua produk internet memerlukan email sebagai alat untuk memulainya (login). Misalnya : Facebook, Intagram, Twitter dan lain-lain.
Setelah Anda mempunyai email sebaiknya dicatat kemudian simpan USERNAME dan PASSWORD ditempat yang aman.
2. Ketik di browser Anda, www.blogger.com kemudian tekan ENTER. Akan terbuka menu baru untuk login ke blogger.
 |
| Cara membuat blog gratis |
3. Silahkan isikan EMAIL Anda dan PASSWORD yang sudah dibuat sebelumnya, kemudian tekan ENTER atau klik Sign In. Perhatikan juga huruf-huruf yang digunakan, Karena login sangatlah sensitif, Bila ada 1 huruf saja yang tidak sama persis maka tidak akan bisa login.
4. Akan terbuka layar baru , klik saja kotak bertuliskan "Blog Baru" kemudian tekan ENTER
 |
| Cara membuat blog gratis |
5. Anda akan memasuki layar baru, silahkan isi JUDUL BLOG, buatlah judul yang sesuai dengan thema blog, upayakan jangan terlalu panjang.
6. Isi alamat blog
Buatlah alamat blog yang tidak terlalu panjang agar mudah mengingatnya, kapasitas yang diijinkan adalah 15 karakter lebih dari itu tidak akan bisa.
Jika alamat blog yang anda ketikan belum ada yang miliki / gunakan maka akan tampil "alamat ini tersedia" , tetapi jika alamatnya sudah ada yang menggunakannya maka akan ada pesan " maaf, alamat ini tidak tersedia" dan tanda seru (!) berwarna kuning maka Anda harus mencoba alamat baru lagi.
Tips : jika tidak memungkinkan Anda bisa menyisipkan angka atau tanda strip ( - )
7. Pilih TEMPLATE yang menurut selera Anda.
Pilih salah satu yang sesuai dengan keinginan kemudian klik saja "buat blog!", Karena Anda baru belajar cara membuat blog maka saran saya gunakan yang pertama ( tipe sederhana) saja, template ini berfungsi sebagai tampilan atau boleh dikatakan sebagai kulit dari sebuah blog. Nantinya template ini dapat Anda ganti sesuai dengan kehendaki.
BLOGING
HOW TO
5. Klik tanda ' + ' , dan akan masuk menu tampilan sementara yang dapat disetting sesuai dengan warna blog.
Kemudian "Simpan" .
0
 |
| Cara memasang Widget pada blog |
1. Login ke Blogger dahulu
2. Pilih Tata Letak atau Layout
3. Pilih posisi yang akan ditempatkan oleh widget, misalnya anda ingin menampilkannya di sidebar maka pilih gadget yang berada di samping layar. Kalau mau pasang di tengah pilih gadget yang berada di tengah.
2. Pilih Tata Letak atau Layout
3. Pilih posisi yang akan ditempatkan oleh widget, misalnya anda ingin menampilkannya di sidebar maka pilih gadget yang berada di samping layar. Kalau mau pasang di tengah pilih gadget yang berada di tengah.
4. Setelah itu klik "Tambahkan Gadget", maka akan terbuka , setelah itu silahkan pilih widget yang ingin dipasangkan di blog Anda. Saya ambil contoh gadget pengikut google+ baru yang akan saya pasangkan ke blog.
5. Klik tanda ' + ' , dan akan masuk menu tampilan sementara yang dapat disetting sesuai dengan warna blog.
BLOGING
HOW TO
Mengapa harus membuat Web Responsive ?
Perlu di ketahui pengguna internet sekarang ini lebih banyak menggunakan ponsel , sehingga jika ingin web kita dapat diakses dimanapun dan kapanpun tidak lain hanya dengan menggunakan web yang responsive . Artinya ketika laman web di akses melalui layar 1080px maka akan tampak 2 kolom atau 3 kolom . Namun jika di akses menggunakan layar dengan lebar dibawah 760px , akan menjadi satu kolom .
Cara Membuat Web Responsive Pertama Buat Script HTML
Pertama kita akan mulai dengan membuat struktur HTML nya, terdiri dari 3 class utama, dan karena kita akan membuat 3 kolom maka pada class .main akan kita bagi menjadi 3 class yaitu .left, .middle dan .right, setiap class nanti diberi ukuran tertentu dan diberi properti float agar membentuk kolom.
1. class header
2. class main ( terdiri dari class “.left”, “.middle” dan “.right”
3. class footer
Mengatur Layout Dengan CSS
Struktur HTML telah selesai kita buat, namun layout nya belum terbentuk. Maka selanjutnya kita beri tambahan kode CSS agar membentuk layout yang terdiri dari 3 kolom, potongan kode css nya seperti berikut ini.
Gambar biasanya menjadi masalah jika ukuran nya lebih lebar dibanding layout, oleh karena itu kita harus tentukan script untuk gambar ini, kita buat gambar berukuran 100%, dengan begini maka gambar tidak akan pernah lebih lebar dibanding ukuran layout penampungnya.
Layout akan kita buat berubah ketika ukuran layar 1080px, untuk ukuran 1080px ini sebenarnya bisa anda sesuaikan dengan kebutuhan, bisa saja 960px, atau 1000px, tergantung keinginan anda saja. Tapi sebenarnya kalau bisa sesuai dengan ukuran perangkat-perangkat yang banyak dipakai seperti iPad, Amazon kindle atau Galaxy Tab. Kode untuk merubah layout menjadi 2 kolom adalah seperti dibawah ini, kita bisa lihat bahwa untuk merubahnya kita menggunakan bantuan media query @media screen and (max-width: 1080px) yang artinya ketika ukuran layout maksimal 1080 maka tentukan CSS nya, CSS ini inherit dari kode CSS sebelumnya.
Menjadi Satu Kolom Ketika di Ponsel
Layout untuk tablet tidak bisa kita pakai untuk mengakomodir ponsel, oleh karena itu ketika ukuran layar lebih kecil kita tentukan lagi css berikutnya, masih tetap dengan media query, kami merubahnya menjadi satu kolom pada ukuran 780px kebawah. Script nya adalah sebagai berikut.
0
 |
| Cara membuat web responsive (RWD) |
Mengapa harus membuat Web Responsive ?
Perlu di ketahui pengguna internet sekarang ini lebih banyak menggunakan ponsel , sehingga jika ingin web kita dapat diakses dimanapun dan kapanpun tidak lain hanya dengan menggunakan web yang responsive . Artinya ketika laman web di akses melalui layar 1080px maka akan tampak 2 kolom atau 3 kolom . Namun jika di akses menggunakan layar dengan lebar dibawah 760px , akan menjadi satu kolom .
Cara Membuat Web Responsive Pertama Buat Script HTML
Pertama kita akan mulai dengan membuat struktur HTML nya, terdiri dari 3 class utama, dan karena kita akan membuat 3 kolom maka pada class .main akan kita bagi menjadi 3 class yaitu .left, .middle dan .right, setiap class nanti diberi ukuran tertentu dan diberi properti float agar membentuk kolom.
1. class header
2. class main ( terdiri dari class “.left”, “.middle” dan “.right”
3. class footer
Untuk bagian head dari HTML jangan lupa di beri tag meta viewport, tag nya seperti ini:<div class="container"> <div class="header">Untuk bagian header...</div> <div class="main"> <div class="left">Untuk kolom bagian Kiri...</div> <div class="middle">Untuk kolom bagian tengah...</div> <div class="right">Untuk kolom bagian kanan...</div> </div> <div class="footer">Untuk bagian footer...</div> </div>
Sisipkan meta viewport didalam tag< head><meta name="viewport" content="width=device-width, initial-scale=1.0">
Mengatur Layout Dengan CSS
Struktur HTML telah selesai kita buat, namun layout nya belum terbentuk. Maka selanjutnya kita beri tambahan kode CSS agar membentuk layout yang terdiri dari 3 kolom, potongan kode css nya seperti berikut ini.
Mengatur Gambar Agar Menyesuaikan Layout.container{ max-width: 1080px; margin: 20px auto; background: #fff; overflow: hidden; padding: 10px; } .header{ border: 1px solid #dedede; padding: 10px; margin: 10px; } /* Main */ .left{ width: 250px; border: 1px solid #dedede; background: #e5e5e5; padding: 10px; margin: 10px; float: left; } .middle{ width: 500px; border: 1px solid #dedede; padding: 10px; margin: 10px; float: left; } .middle img{ max-width: 100%; height: auto; } .right{ width: 250px; border: 1px solid #dedede; padding: 10px; margin: 10px; float: left; } .footer{ clear: both; border: 1px solid #dedede; padding: 10px; margin: 10px; }
Gambar biasanya menjadi masalah jika ukuran nya lebih lebar dibanding layout, oleh karena itu kita harus tentukan script untuk gambar ini, kita buat gambar berukuran 100%, dengan begini maka gambar tidak akan pernah lebih lebar dibanding ukuran layout penampungnya.
Menjadi 2 Kolom Ketika di Tablet..middle img{ max-width: 100%; height: auto; }
Layout akan kita buat berubah ketika ukuran layar 1080px, untuk ukuran 1080px ini sebenarnya bisa anda sesuaikan dengan kebutuhan, bisa saja 960px, atau 1000px, tergantung keinginan anda saja. Tapi sebenarnya kalau bisa sesuai dengan ukuran perangkat-perangkat yang banyak dipakai seperti iPad, Amazon kindle atau Galaxy Tab. Kode untuk merubah layout menjadi 2 kolom adalah seperti dibawah ini, kita bisa lihat bahwa untuk merubahnya kita menggunakan bantuan media query @media screen and (max-width: 1080px) yang artinya ketika ukuran layout maksimal 1080 maka tentukan CSS nya, CSS ini inherit dari kode CSS sebelumnya.
Kode CSS diatas bukan hanya untuk mengatur jumlah kolom, namun juga bisa melakukan perubahan-perubahan lain seperti merubah kolom kiri menjadi berwarna kuning, atau bisa juga merubah ukuran font, bahkan warna font, seperti yang kita lihat di class .left, ditambahkan background: #fff000; untuk merubah background menjadi warna kuning.@media screen and (max-width: 1080px) { .container { width: 100%; } .left { width: 25%; background: #fff000; } .middle { width: 68%; float: right; } .right { clear: both; padding: 1% 4%; width: auto; float: none; } }
Menjadi Satu Kolom Ketika di Ponsel
Layout untuk tablet tidak bisa kita pakai untuk mengakomodir ponsel, oleh karena itu ketika ukuran layar lebih kecil kita tentukan lagi css berikutnya, masih tetap dengan media query, kami merubahnya menjadi satu kolom pada ukuran 780px kebawah. Script nya adalah sebagai berikut.
Pada kode css diatas tidak ditentukan lagi lebar kolom, semua div dibuat width: auto yang artinya dibuat memenuhi lebar layar, akhirnya terbentuk lah layout yang hanya satu kolom. Begitulah cara sederhana membuat layout responsive, kami hanya menjelaskan prinsip dasar nya agar mudah dimengerti, jadi layoutnya dibuat sangat sederhana. Untuk project yang serius anda bisa mengembangkan lagi dengan elemen-elemen yang lain.@media screen and (max-width: 780px) { .header, .footer{ text-align: center; } .left { width: auto; float: none; } .middle { width: auto; float: none; } .right { width: auto; float: none; } }
JAVASCRIPT
JavaScript adalah bahasa pemrograman tingkat tinggi dan dinamis.
JavaScript populer di internet dan dapat bekerja di sebagian besar penjelajah web populer seperti Internet Explorer (IE), Mozilla, Netscape dan Opera. Kode JavaScript dapat disisipkan dalam halaman web menggunakan tag SCRIPT.
0
 |
| JavaScript |
JavaScript populer di internet dan dapat bekerja di sebagian besar penjelajah web populer seperti Internet Explorer (IE), Mozilla, Netscape dan Opera. Kode JavaScript dapat disisipkan dalam halaman web menggunakan tag SCRIPT.
CSS
Cascading Style Sheet (CSS) merupakan aturan untuk mengatur beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman.
Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file).
Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.
CSS dapat mengendalikan ukuran gambar,warna bagian tubuh pada teks, warna table, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya.
CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.
0
 |
| CSS (Cascading Style Sheet ) |
Cascading Style Sheet (CSS) merupakan aturan untuk mengatur beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman.
Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file).
Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.
CSS dapat mengendalikan ukuran gambar,warna bagian tubuh pada teks, warna table, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya.
CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.
HTML
HTML adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi.
Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halaman web dengan perintah-perintah HTML.
Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML (Standard Generalized Markup Language), HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web.
HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C).
HTML dibuat oleh kolaborasi Caillau TIM dengan Berners-lee Robert ketika mereka bekerja di CERN pada tahun 1989 (CERN adalah lembaga penelitian fisika energi tinggi di Jenewa).
Contoh dokumen HTML sederhana
0
 |
| HTML |
Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halaman web dengan perintah-perintah HTML.
Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML (Standard Generalized Markup Language), HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web.
HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C).
HTML dibuat oleh kolaborasi Caillau TIM dengan Berners-lee Robert ketika mereka bekerja di CERN pada tahun 1989 (CERN adalah lembaga penelitian fisika energi tinggi di Jenewa).
Contoh dokumen HTML sederhana
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <p>My first paragraph.</p> <h1>My First Heading</h1> </body> </html>
Penjelasan:
- Elemen <DOCTYPE html> mendefinisikan dokumen ini menjadi HTML5
- Elemen <html> elemen elemen akar halaman
- Elemen <head> berisi informasi meta tentang dokumen
- Elemen <title> menentukan judul untuk dokumen
- Elemen <body> berisi konten halaman yang terlihat
- Elemen <h1> mendefinisikan judul besar
- Elemen <p> mendefinisikan sebuah paragraf
Langganan:
Postingan
(
Atom
)