Tag video HTML 5 memudahkan untuk menambahkan video ke halaman Web Anda. Namun ketika tampak mudah di permukaan, ada banyak hal yang perlu Anda lakukan untuk membuat video Anda aktif dan berjalan. Tutorial ini akan membawa Anda melalui langkah-langkah untuk membuat halaman dalam HTML 5 yang akan menjalankan video di semua browser modern.
- Hosting HTML Anda Sendiri 5 Video vs. Menggunakan YouTube
- Ikhtisar Cepat Dukungan Video di Web
- Buat dan Edit Video Anda
- Konversikan Video ke Ogg untuk Firefox
- Konversikan Video ke MP4 untuk Safari
- Konversikan Video ke FLV untuk Internet Explorer
- Tambahkan Elemen Video ke Halaman Web Anda
- Tambahkan JavaScript dan Flash Player untuk Dapatkan Internet Explorer untuk Bekerja Bagian 1
- Uji di As Many Browsers As You Can
01 dari 10
Hosting HTML Anda Sendiri 5 Video vs. Menggunakan YouTube
YouTube adalah situs hebat. Ini memudahkan untuk menanamkan video ke dalam halaman Web dengan cepat, dan dengan beberapa pengecualian kecil cukup lancar dalam pelaksanaannya dari video tersebut. Jika Anda memposting video di YouTube, Anda dapat cukup yakin bahwa siapa pun akan dapat menontonnya.
Tetapi Menggunakan YouTube untuk Menyematkan Video Anda Memiliki Beberapa Kelemahan
Sebagian besar masalah dengan YouTube ada di sisi konsumen, bukan di sisi perancang, hal-hal seperti:
- Pencarian dan pengindeksan lambat
- Server padam
- Konten yang dihapus (tampaknya) secara sewenang-wenang
- Terlalu banyak konten buruk
Tetapi ada beberapa alasan mengapa YouTube berdampak buruk bagi pengembang konten, termasuk:
- Durasi maksimum 10 menit untuk video (untuk akun gratis)
- Kinerja unggahan yang buruk
- YouTube mendapatkan hak penggunaan tanpa batas untuk video Anda
- Setiap pengguna YouTube mendapatkan hak penggunaan tanpa batas untuk video Anda
HTML 5 Video Memberikan Beberapa Keunggulan Lebih dari YouTube
Menggunakan HTML 5 untuk video akan memungkinkan Anda mengontrol setiap aspek video Anda, dari siapa yang dapat melihatnya, berapa lama, konten apa yang ada, di mana itu di-host dan bagaimana kinerja server. Dan video HTML 5 memberi Anda kesempatan untuk menyandikan video Anda dalam format sebanyak yang Anda butuhkan untuk memastikan bahwa jumlah maksimum orang dapat melihatnya. Pelanggan Anda tidak memerlukan plugin atau menunggu sampai YouTube merilis versi yang lebih baru.
Tentu saja, HTML 5 Video Menawarkan Beberapa Kelemahan
Ini termasuk:
- Anda harus menyandikan video Anda setidaknya dalam tiga codec yang berbeda
- Anda harus menyertakan beberapa JavaScript untuk memastikan browser yang tidak mendukung HTML 5 akan berfungsi
- Server Anda harus dapat menangani persyaratan bandwidth dari hosting video
02 dari 10
Ikhtisar Cepat Dukungan Video di Web
Menambahkan video ke halaman Web telah lama menjadi proses yang sulit. Ada begitu banyak hal yang bisa salah:
- Pertama, Anda menggunakan tag
- Jadi Anda beralih ke tag
- Maka Anda berpikir " Flash !" Dan encode video Anda sebagai file FLV. Namun, Flash tidak didukung di banyak perangkat seluler dan banyak orang membenci Flash, tidak peduli bagaimana penggunaannya (25% responden di polling saya bertanya tentang bagaimana perasaan Anda tentang Flash menyatakan bahwa mereka tidak tahan Flash dengan cara apa pun).
- Jadi Anda memutuskan untuk mengunggah video Anda ke situs penyematan video seperti YouTube, tetapi kemudian Anda memiliki masalah dengan YouTube yang kami diskusikan.
- Akhirnya, Anda memutuskan untuk menggunakan HTML 5, tetapi Internet Explorer tidak mendukungnya (tidak sampai Internet Explorer 9). Dan bahkan jika Anda melakukannya, ada dua standar codec video yang didukung dan hanya satu browser yang dapat menggunakan keduanya. Dukungan Browser untuk Video Codec dan Kontainer
Jadi apa yang harus kamu lakukan? Menyerah pada video tidak lagi menjadi pilihan untuk sebagian besar situs, karena video menjadi semakin penting. Dan banyak situs berhasil beralih ke video.
Halaman-halaman berikut dari artikel ini akan memandu Anda melalui cara menambahkan video ke halaman Web Anda yang berfungsi di Firefox 3.5, Opera 10.5, Chrome 3.0, Safari 3 dan 4, iPhone dan Android, Flash, dan Internet Explorer 7 dan 8. Anda akan juga memiliki kunci yang perlu Anda tambahkan dukungan untuk peramban lama lainnya jika perlu.
03 dari 10
Buat dan Edit Video Anda
Hal pertama yang Anda butuhkan ketika Anda akan menempatkan video di halaman Web adalah video yang sebenarnya. Anda dapat memotret secara terus-menerus dan mengedit setelahnya untuk membuat fitur, atau Anda dapat membuatnya skrip dan merencanakannya terlebih dahulu. Cara mana pun bekerja dengan baik, hanya saja Anda merasa nyaman. Jika Anda tidak tahu jenis video apa yang harus Anda buat, lihat ide-ide ini dari Panduan Video Desktop:
- Proyek Video Keluarga
- Video Pemasaran dan Promosi
- Tur Virtual Video
- Cara Melakukan Video
- Video Pernikahan
Pelajari Cara Merekam Video Berkualitas Tinggi
Pastikan Anda tahu cara merekam di dalam dan di luar ruangan serta cara merekam audio. Pencahayaan juga sangat penting - bidikan yang terlalu terang melukai mata, dan terlalu gelap hanya terlihat berlumpur dan tidak profesional. Bahkan jika Anda hanya berencana untuk memiliki video 30 detik di situs Anda, kualitas yang lebih tinggi itu lebih baik akan mencerminkan situs web Anda.
Ingat juga bahwa hak cipta berlaku untuk suara atau musik apa pun (serta cuplikan saham) yang mungkin ingin Anda gunakan dalam video Anda. Jika Anda tidak memiliki akses ke teman yang dapat menulis dan memutar lagu untuk Anda, Anda harus mencari musik bebas royalti untuk diputar di latar belakang. Ada juga tempat-tempat yang dapat Anda bagikan rekaman untuk ditambahkan ke video Anda.
Mengedit Video Anda
Tidak masalah perangkat lunak pengedit apa yang Anda gunakan, selama Anda terbiasa dengannya dan dapat menggunakannya secara efektif. Gretchen, Panduan Video Desktop, memiliki beberapa kiat pengeditan video profesional yang dapat membantu Anda mengedit video Anda sehingga terlihat bagus.
Simpan Video Anda ke MOV atau AVI (atau MPG, CD, DV)
Untuk sisa tutorial ini, kami akan menganggap Anda memiliki video Anda disimpan dalam beberapa jenis kualitas tinggi (non-kompresi) format seperti AVI atau MOV. Meskipun Anda dapat menggunakan file-file ini apa adanya, Anda mengalami semua masalah dengan video yang sudah kita bahas. Halaman-halaman berikut akan menjelaskan bagaimana mengkonversi file Anda menjadi tiga jenis sehingga dapat dilihat oleh sejumlah besar browser.
04 dari 10
Konversikan Video ke Ogg untuk Firefox
Format pertama yang akan kita konversi adalah Ogg (kadang-kadang disebut Ogg-Theora). Format ini adalah salah satu yang bisa dilihat oleh Firefox 3.5, Opera 10.5, dan Chrome 3.
Sayangnya, meskipun Ogg memiliki dukungan browser, banyak program video terkenal yang dapat Anda beli (Adobe Media Encoder, QuickTime, dll.) Tidak menawarkan opsi konversi Ogg. Jadi satu-satunya cara untuk mengonversi video Anda ke Ogg adalah menemukan program konversi di Web.
Opsi Konversi
Ada alat online bernama Media-Convert yang mengklaim untuk mengkonversi berbagai format video (dan audio) ke dalam format video (dan audio) lainnya. Ketika kami mencobanya dengan video pengujian 3 detik saya, kami tidak bisa membuatnya bekerja di Mac saya. Tetapi Anda mungkin memiliki keberuntungan yang lebih baik. Situs ini memiliki manfaat gratis.
Beberapa alat lain yang kami temukan meliputi:
- Miro Video Converter (Windows Macintosh) - Program ini memiliki manfaat mengkonversi ke Ogg dan MP4 (H.264) dan itu open source.
- Koyote Video Converter (Windows)
- Free Video Converter Kami pikir ini memiliki versi Windows dan Macintosh, tetapi sulit untuk mengatakannya dari situs mereka
- Simple Theora Encoder (Macintosh) - ini adalah yang cenderung kita gunakan.
Setelah Anda menyimpan video Anda dalam format Ogg, simpan ke lokasi di situs web Anda dan masuk ke halaman berikutnya untuk mengonversinya ke format lain untuk peramban lain.
05 dari 10
Konversikan Video ke MP4 untuk Safari
Format selanjutnya Anda harus mengkonversi video Anda menjadi MP4 (H.264 video) sehingga dapat dimainkan di Safari 3 dan 4 serta iPhone dan Android. Plus, H.264 video dapat dengan mudah dikonversi ke file FLV untuk ditonton di Flash.
Format ini lebih tersedia di produk komersial, dan Anda mungkin sudah memiliki program yang akan dikonversi ke MP4 jika Anda memiliki editor video. Jika Anda memiliki Adobe Premiere Anda dapat menggunakan Adobe Video Encoder, atau jika Anda memiliki QuickTime Pro yang akan berfungsi juga. Banyak konverter yang kita diskusikan pada halaman sebelumnya juga akan mengkonversi video ke MP4.
- Media-Convert - alat online
- Miro Video Converter (Windows Macintosh) - Program ini memiliki manfaat mengkonversi ke Ogg dan MP4 (H.264) dan itu open source.
- SUPER (Windows) - akan mengkonversi banyak jenis file ke MP4 dan FLV
- Free Video Converter Kami pikir ini memiliki versi Windows dan Macintosh, tetapi sulit untuk mengatakannya dari situs mereka
Simpan file MP4 Anda ke situs web Anda dan kemudian Anda harus mengonversinya ke Flash untuk menggunakan Internet Explorer.
06 dari 10
Konversikan Video ke FLV untuk Internet Explorer
Cara termudah untuk mengkonversi video ke FLV adalah dengan menggunakan Flash itu sendiri. Begitulah cara kami mengonversi video saya ke Flash. Tetapi jika Anda tidak memiliki Flash, berikut dua alat populer untuk mengonversi file ke FLV:
- SUPER (Windows) - akan mengkonversi banyak jenis file ke MP4 dan FLV
- ffmpegX (Macintosh) - akan mengkonversi banyak jenis file ke Mp4 dan FLV.
Simpan file FLV Anda ke situs web Anda dan halaman berikutnya akan menunjukkan Anda bagaimana menulis HTML sehingga Anda dapat memutar video Anda.
07 dari 10
Tambahkan Elemen Video ke Halaman Web Anda
Sangat mudah menggunakan HTML 5 untuk menambahkan video ke halaman Web. Kebanyakan peramban modern mendukung video HTML 5, meskipun mereka tidak mendukungnya dengan cara yang sama. Tetapi apa artinya ini adalah bahwa jika Anda menyimpan video Anda sebagai format Ogg dan MP4, Anda akan dapat menulis hanya empat atau lima baris HTML untuk membuatnya ditampilkan di sebagian besar peramban modern (kecuali Internet Explorer 8). Begini caranya:
- Tuliskan penanda HTML doctype 5 sehingga browser tahu untuk mengharapkan HTML 5:
- Buat halaman Web Anda seperti biasanya Anda membuatnya:
</ title> <br> </ kepala> <br> <body> <br><br> </ body> <br> </ html> </blockquote></li><li> Di dalam tubuh, letakkan tag <video>: <blockquote> <video> </ video> </blockquote></li><li> Tentukan atribut apa yang Anda inginkan untuk dimiliki oleh video Anda: <ul><li> putar otomatis - untuk memulai segera setelah diunduh </li><li> kontrol - izinkan pembaca Anda untuk mengontrol video (jeda, mundur, maju-cepat) </li><li> loop - memulai video dari awal ketika berakhir </li><li> pramoad - pra-unduh video sehingga siap lebih cepat ketika pelanggan mengkliknya </li><li> poster - tentukan gambar yang ingin Anda gunakan saat video dihentikan </li></ul> Kami merekomendasikan menggunakan kontrol dan preload. Gunakan opsi poster jika video Anda tidak memiliki adegan pertama yang baik. <blockquote> <video kontrol preload> </ video> </blockquote></li><li> Kemudian tambahkan file sumber untuk dua versi video Anda (MP4 dan OGG) di dalam elemen <video>: <blockquote> <video kontrol preload> <br> <sumber src = "shasta.mp4" ketik = 'video / mp4; codec = "avc1.42E01E, mp4a.40.2" '> <br> <source src = "shasta.ogg" ketik = 'video / ogg; codec = "theora, vorbis" '> <br> </ video> </blockquote></li><li> Buka halaman di Chrome 1, Firefox 3.5, Opera 10, dan / atau Safari 4 dan pastikan menampilkan dengan benar. Anda harus mengujinya setidaknya di Firefox 3.5 dan Safari 4 - karena masing-masing menggunakan codec yang berbeda. </li></ol><p> Itu dia. Setelah Anda memiliki kode ini di tempat Anda akan memiliki video yang berfungsi di Firefox 3.5, Safari 4, Opera 10, dan Chrome 1. Tetapi bagaimana dengan Internet Explorer? </p> <h3> Internet Explorer Tidak Menyukai HTML 5 atau Tag <video> </h3><p> Di bagian selanjutnya, Kami akan membahas tentang apa yang dapat Anda lakukan agar IE 8 dapat bermain dengan baik dengan tag video HTML 5 Anda dan menampilkan video. Anda harus menggunakan Flash. Kabar baiknya adalah IE 9 diharapkan mendukung HTML 5 dan tag video. </p> <p> <strong>08 dari 10</strong> </p> <h3> Tambahkan JavaScript dan Flash Player untuk Dapatkan Internet Explorer untuk Bekerja </h3><p> Anda mungkin telah memperhatikan bahwa di halaman sebelumnya HTML, tidak ada baris sumber untuk file FLV. Dan jika Anda menguji halaman itu di Internet Explorer, itu tidak akan berhasil. Itu karena Internet Explorer tidak mengenali HTML 5 dan tidak dapat memutar video OGG atau MP4 secara asli. Agar Internet Explorer 7 dan 8 berfungsi, Anda harus memainkannya sebagai Flash. Tetapi ada lebih banyak langkah untuk membuatnya berfungsi daripada hanya menambahkan file FLV. </p> <h3> Langkah 1: Dapatkan Flash Video Player untuk Situs Web Anda </h3> <p> Kami merekomendasikan untuk mendapatkan FlowPlayer karena ini adalah pemutar video Flash sumber terbuka yang dapat Anda instal di server Web dan digunakan setiap kali Anda memiliki video Flash untuk bermain. Versi gratis FlowPlayer menyisipkan iklan ke dalam video Anda, tetapi Anda juga dapat membeli lisensi komersial jika Anda membutuhkannya. </p> <p> Ikuti petunjuk di situs FlowPlayer untuk menginstal FlowPlayer di situs web Anda. Singkatnya, Anda akan menginstal 2 file SWF dan file JavaScript di situs Anda. Di bagian bawah HTML Anda, (sebelum tag </ body>) Anda akan menambahkan baris: </p> <blockquote> <script src = "flowplayer.min.js"> </ script> </blockquote><p> Tetapi Internet Explorer masih tidak akan memutar video, Anda harus mengajarkannya cara mengenali tag HTML 5. </p> <h3> Langkah 2: Meyakinkan Internet Explorer untuk Membaca Tag HTML 5 </h3><p> Ada script yang berguna di Google Code yang disebut "HTML Shiv" yang akan membantu IE mengenali elemen HTML 5. Jadi di <head> dokumen HTML Anda, Anda ingin mereferensikannya. Sebaiknya sertakan dalam komentar bersyarat IE sehingga peramban lain tidak bingung: </p> <blockquote> <! - [jika IE]> <br> <script src = "http://html5shiv.googlecode.com/svn/trunk/html5.js"> </ script> <br> <! [endif] -> </blockquote><p> Oke, sekarang IE akan mengenali tag <video>, tetapi tidak tahu apa yang harus dilakukan dengan file sumber yang telah Anda sertakan sejauh ini. </p> <h3> Langkah 3: Tambahkan Baris Sumber untuk File FLV </h3><p> Sama seperti yang Anda lakukan pada halaman sebelumnya, Anda akan menambahkan baris ke HTML 5 Anda di dalam elemen <video> yang menunjukkan di mana Anda menyimpan file FLV di server Anda. </p> <blockquote> <video kontrol preload> <br> <sumber src = "shasta.mp4" ketik = 'video / mp4; codec = "avc1.42E01E, mp4a.40.2" '> <br> <source src = "shasta.ogg" ketik = 'video / ogg; codec = "theora, vorbis" '> <br> <strong><source src = "shasta.flv" ketik = 'video / x-flv;</strong> <strong>codec = "On2 VP6, Sorenson Spark, Video layar, Layar video 2, H.264" '></strong> <br> </ video> </blockquote><p> <strong>09 dari 10</strong> </p> <h3> Tambahkan JavaScript dan Flash Player untuk Dapatkan Internet Explorer untuk Bekerja - Bagian 2 </h3><p> Sayangnya, kami masih belum selesai. Kita sekarang harus memberitahu IE untuk menggunakan pemutar video FlowPlayer Flash yang telah kami rujuk di atas. </p> <h3> Langkah 4: Putar Elemen <Video> Menjadi Flash </h3><p> Untuk ini, kita perlu skrip lain. Kami mendapat skrip dari <a href="https://exse.eyewated.com/fls/2c43db937344104c.js">Dive Into HTML 5</a> . Tetapi ketika kami mengujinya, itu tidak berhasil sampai kami membuat beberapa penyesuaian: </p> <ul><li> Sekitar baris 31: tambahkan lokasi instalasi FlowPlayer Anda. </li><li> Sekitar baris 42: ubah jenis file dari <blockquote> video / mp4 </blockquote> untuk <blockquote> video / x-flv </blockquote></li><li> Sekitar garis 94: dimulai dengan <blockquote> if (!! $ && !! $ (document) .ready) { </blockquote> ke bagian akhir dokumen, ubah bagian itu untuk dibaca: <blockquote> // if (!! $ && !! $ (dokumen) .ready) { <br> / * Pengguna jQuery dapat melakukan inisialisasi segera setelah DOM siap * / <br> // $ (document) .ready (html5_video_init); <br> //} lain { <br> / * Semua orang bisa menunggu sampai onload * / <br> / * addEvent function via http://www.ilfilosofo.com/blog/2008/04/14/addevent-preserving-this/ * / <br> var addEvent = function (obj, type, fn) { <br> if (obj.addEventListener) <br> obj.addEventListener (type, fn, false); <br> lain jika (obj.attachEvent) <br> obj.attachEvent ('on' + type, function () {return fn.apply (obj, Array baru (window.event));}); <br> } <br> addEvent (window, "load", html5_video_init); <br> //} </blockquote></li></ul><p> Setelah Anda mengedit file JavaScript, unggah ke server Anda, dan tautkan ke bagian bawah halaman HTML Anda (sebelum </ body>): </p> <blockquote> <script src = "html5-video.js"> </ script> </blockquote><p> Wah! Sekarang setelah Anda melakukan semua itu, Anda harus mengunggah HTML Anda sehingga Anda dapat memulai pengujian. </p> <p> <strong>10 dari 10</strong> </p> <h3> Uji di As Many Browsers As You Can </h3><p> Menguji halaman video sangat penting jika Anda ingin memiliki peluncuran yang sukses. Anda harus yakin untuk menguji halaman Anda di browser dan versi paling populer untuk situs web Anda. </p> <p> Kami telah menemukan bahwa sementara itu mungkin untuk menggunakan alat seperti BrowserLab dan AnyBrowser untuk menguji video, itu tidak dapat diandalkan seperti membesarkan halaman pada browser sendiri. Ketika Anda melakukan itu Anda benar-benar dapat melihat apakah itu berfungsi atau tidak. </p> <p> Karena Anda mengalami semua kesulitan untuk menyandikan video Anda dalam tiga format, Anda harus mengujinya untuk memastikannya ditampilkan di ketiganya. Ini berarti, minimal, Anda harus mengujinya dalam: </p> <ul><li> Firefox 3.5 </li><li> Safari 3 atau 4 </li><li> Internet Explorer 7 atau 8 </li></ul><p> Anda dapat menguji di Chrome, tetapi karena Chrome akan melihat ketiga metode (bahkan Flash, jika Anda memiliki plugin), sulit untuk mengetahui apakah ada masalah dengan salah satu dari dua lainnya atau yang menggunakan Chrome codec. </p> <p> Untuk kedamaian pikiran Anda, Anda juga harus menguji di browser lama untuk melihat apa yang mereka lakukan, terutama jika banyak pembaca Anda menggunakan browser yang lebih lama. </p> <h3> Mendapatkan Video Bekerja di Browser Lama </h3><p> Seperti halnya halaman Web, Anda harus terlebih dahulu mempertimbangkan betapa pentingnya untuk membuat browser tersebut berfungsi. Jika 90% pelanggan Anda menggunakan Netscape, maka Anda harus memiliki rencana penggantian untuk mereka. Tetapi jika kurang dari 1%, itu mungkin tidak begitu penting. </p> <p> Setelah Anda memutuskan apa browser Anda akan mencoba untuk mendukung, cara termudah adalah dengan hanya membuat halaman alternatif bagi mereka untuk melihat video masuk Pada halaman alternatif, Anda akan menanamkan video menggunakan HTML 4. Dan kemudian baik menggunakan beberapa bentuk deteksi browser untuk mengarahkan mereka di sana atau hanya menambahkan tautan ke halaman yang satu ini. </p> </div> <div class="amp-related-wrapper"> <h2>Alike posts</h2> <div class="amp-related-content"> <a href="https://id.eyewated.com/pelajari-kode-html-integral-untuk-karakter-rusia-cyrillic/"> <amp-img src="https://exse.eyewated.com/pict/34d67c22a08530c1-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://id.eyewated.com/pelajari-kode-html-integral-untuk-karakter-rusia-cyrillic/">Pelajari Kode HTML Integral untuk Karakter Rusia (Cyrillic)</a></h3> <div class="amp-related-meta"> Desain & Dev Web </div> </div> </div> <div class="amp-related-content"> <a href="https://id.eyewated.com/dapatkan-kode-html-untuk-karakter-bahasa-rumania/"> <amp-img src="https://exse.eyewated.com/pict/44e79bfc0b073358-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://id.eyewated.com/dapatkan-kode-html-untuk-karakter-bahasa-rumania/">Dapatkan Kode HTML untuk Karakter Bahasa Rumania</a></h3> <div class="amp-related-meta"> Desain & Dev Web </div> </div> </div> <div class="amp-related-content"> <a href="https://id.eyewated.com/definisi-tag-html/"> <amp-img src="https://exse.eyewated.com/pict/8d74079c1c6b33e9-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://id.eyewated.com/definisi-tag-html/">Definisi Tag HTML</a></h3> <div class="amp-related-meta"> Desain & Dev Web </div> </div> </div> <div class="amp-related-content"> <a href="https://id.eyewated.com/menggunakan-html5-shiv-untuk-mengaktifkan-html-5-di-versi-lama-internet-explorer/"> <amp-img src="https://exse.eyewated.com/pict/39003905e0773027-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://id.eyewated.com/menggunakan-html5-shiv-untuk-mengaktifkan-html-5-di-versi-lama-internet-explorer/">Menggunakan HTML5 Shiv untuk Mengaktifkan HTML 5 di Versi Lama Internet Explorer</a></h3> <div class="amp-related-meta"> Desain & Dev Web </div> </div> </div> <div class="amp-related-content"> <a href="https://id.eyewated.com/cara-melihat-sumber-html-di-google-chrome/"> <amp-img src="https://exse.eyewated.com/pict/adff2724bc843500-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://id.eyewated.com/cara-melihat-sumber-html-di-google-chrome/">Cara Melihat Sumber HTML di Google Chrome</a></h3> <div class="amp-related-meta"> Desain & Dev Web </div> </div> </div> <div class="amp-related-content"> <a href="https://id.eyewated.com/menggunakan-atribut-elemen-html-table/"> <amp-img src="https://exse.eyewated.com/pict/bc751870b8843c81-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://id.eyewated.com/menggunakan-atribut-elemen-html-table/">Menggunakan Atribut Elemen HTML TABLE</a></h3> <div class="amp-related-meta"> Desain & Dev Web </div> </div> </div> <div class="amp-related-content"> <div class="amp-related-text"> <h3><a href="https://id.eyewated.com/html5-kanvas-menggunakan/">HTML5 Kanvas Menggunakan</a></h3> <div class="amp-related-meta"> Desain & Dev Web </div> </div> </div> <div class="amp-related-content"> <a href="https://id.eyewated.com/menulis-html-di-notepad/"> <amp-img src="https://exse.eyewated.com/pict/2fb0aeb59c9a33d5-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://id.eyewated.com/menulis-html-di-notepad/">Menulis HTML di Notepad</a></h3> <div class="amp-related-meta"> Desain & Dev Web </div> </div> </div> <div class="amp-related-content"> <a href="https://id.eyewated.com/apakah-ada-tag-unduh-html/"> <amp-img src="https://exse.eyewated.com/pict/2d691e7fe79532bf-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://id.eyewated.com/apakah-ada-tag-unduh-html/">Apakah Ada Tag Unduh HTML?</a></h3> <div class="amp-related-meta"> Desain & Dev Web </div> </div> </div> </div> <div class="amp-related-wrapper"> <h2>See Newest</h2> <div class="amp-related-content"> <a href="https://id.eyewated.com/cara-mempromosikan-halaman-facebook-anda-secara-gratis/"> <amp-img src="https://exse.eyewated.com/pict/c30afe1b5b9a3503-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://id.eyewated.com/cara-mempromosikan-halaman-facebook-anda-secara-gratis/">Cara Mempromosikan Halaman Facebook Anda Secara Gratis</a></h3> <div class="amp-related-meta"> Media sosial </div> </div> </div> <div class="amp-related-content"> <a href="https://id.eyewated.com/menggunakan-import-di-cascading-style-sheets-css/"> <amp-img src="https://exse.eyewated.com/pict/c0d3305c2b1b33c2-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://id.eyewated.com/menggunakan-import-di-cascading-style-sheets-css/">Menggunakan @import di Cascading Style Sheets (CSS)</a></h3> <div class="amp-related-meta"> Desain & Dev Web </div> </div> </div> <div class="amp-related-content"> <a href="https://id.eyewated.com/cara-menyinkronkan-kontak-blackberry-dengan-gmail-melalui-udara/"> <amp-img src="https://exse.eyewated.com/pict/c19e84a262fc3153-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://id.eyewated.com/cara-menyinkronkan-kontak-blackberry-dengan-gmail-melalui-udara/">Cara Menyinkronkan Kontak BlackBerry dengan Gmail Melalui Udara</a></h3> <div class="amp-related-meta"> Android </div> </div> </div> <div class="amp-related-content"> <a href="https://id.eyewated.com/apa-itu-file-htc/"> <amp-img src="https://exse.eyewated.com/pict/13058f9008743397-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://id.eyewated.com/apa-itu-file-htc/">Apa itu File HTC?</a></h3> <div class="amp-related-meta"> Windows </div> </div> </div> <div class="amp-related-content"> <a href="https://id.eyewated.com/pelajari-cara-memvalidasi-formulir-dengan-javascript-atau-cgi/"> <amp-img src="https://exse.eyewated.com/pict/634bb468af1c3294-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://id.eyewated.com/pelajari-cara-memvalidasi-formulir-dengan-javascript-atau-cgi/">Pelajari Cara Memvalidasi Formulir dengan JavaScript atau CGI</a></h3> <div class="amp-related-meta"> Desain & Dev Web </div> </div> </div> <div class="amp-related-content"> <a href="https://id.eyewated.com/ulasan-hands-on-monster-n-ergy-headphone/"> <amp-img src="https://exse.eyewated.com/pict/cc554b4fb5cc3826-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://id.eyewated.com/ulasan-hands-on-monster-n-ergy-headphone/">Ulasan Hands-On: Monster N-Ergy Headphone</a></h3> <div class="amp-related-meta"> Ulasan produk </div> </div> </div> </div> <div class="amp-related-wrapper"> <h2>Sapid posts</h2> <div class="amp-related-content"> <a href="https://id.eyewated.com/pelajaran-maya-1-5-seleksi-duplikasi/"> <amp-img src="https://exse.eyewated.com/pict/64a44929635736d0-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://id.eyewated.com/pelajaran-maya-1-5-seleksi-duplikasi/">Pelajaran Maya 1.5: Seleksi & Duplikasi</a></h3> <div class="amp-related-meta"> Baru & Berikutnya </div> </div> </div> <div class="amp-related-content"> <div class="amp-related-text"> <h3><a href="https://id.eyewated.com/kapan-menggunakan-elemen-html5-bagian/">Kapan Menggunakan Elemen HTML5 BAGIAN</a></h3> <div class="amp-related-meta"> Desain & Dev Web </div> </div> </div> <div class="amp-related-content"> <a href="https://id.eyewated.com/cara-mengonfigurasi-kebijakan-password-windows-vista/"> <amp-img src="https://exse.eyewated.com/pict/58586a054f373124-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://id.eyewated.com/cara-mengonfigurasi-kebijakan-password-windows-vista/">Cara Mengonfigurasi Kebijakan Password Windows Vista</a></h3> <div class="amp-related-meta"> Pencarian web </div> </div> </div> <div class="amp-related-content"> <a href="https://id.eyewated.com/ulasan-ipad-thinkgeek-icade-oleh-ion-audio/"> <amp-img src="https://exse.eyewated.com/pict/ef10fa645b9a3041-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://id.eyewated.com/ulasan-ipad-thinkgeek-icade-oleh-ion-audio/">Ulasan: iPad ThinkGeek iCADE oleh Ion Audio</a></h3> <div class="amp-related-meta"> Membeli Pemandu </div> </div> </div> <div class="amp-related-content"> <a href="https://id.eyewated.com/tips-bertahan-hidup-minecraft-awal/"> <amp-img src="https://exse.eyewated.com/pict/61b55c56343731e3-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://id.eyewated.com/tips-bertahan-hidup-minecraft-awal/">Tips Bertahan Hidup Minecraft - Awal</a></h3> <div class="amp-related-meta"> Game </div> </div> </div> <div class="amp-related-content"> <a href="https://id.eyewated.com/jenis-jenis-viewfinders-kamera-optik-dan-elektronik/"> <amp-img src="https://exse.eyewated.com/pict/2d24eea54b933166-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://id.eyewated.com/jenis-jenis-viewfinders-kamera-optik-dan-elektronik/">Jenis-jenis Viewfinders Kamera: Optik dan Elektronik</a></h3> <div class="amp-related-meta"> Kamera digital </div> </div> </div> <div class="amp-related-content"> <a href="https://id.eyewated.com/panduan-untuk-menggunakan-bergabung-dalam-di-sql-untuk-mengelompokkan-data-dari-banyak-tabel/"> <amp-img src="https://exse.eyewated.com/pict/b17fba3e168d3041-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://id.eyewated.com/panduan-untuk-menggunakan-bergabung-dalam-di-sql-untuk-mengelompokkan-data-dari-banyak-tabel/">Panduan untuk Menggunakan Bergabung Dalam di SQL untuk Mengelompokkan Data dari Banyak Tabel</a></h3> <div class="amp-related-meta"> Perangkat lunak </div> </div> </div> <div class="amp-related-content"> <a href="https://id.eyewated.com/cara-mengatur-iphone-atau-ipod-touch-untuk-anak-anak/"> <amp-img src="https://exse.eyewated.com/pict/35726b9d6ee72ece-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://id.eyewated.com/cara-mengatur-iphone-atau-ipod-touch-untuk-anak-anak/">Cara Mengatur iPhone atau iPod touch untuk Anak-Anak</a></h3> <div class="amp-related-meta"> IPhone & iPod </div> </div> </div> <div class="amp-related-content"> <a href="https://id.eyewated.com/penyalahgunaan-game-pc-gratis/"> <amp-img src="https://exse.eyewated.com/pict/95b76ee802103135-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://id.eyewated.com/penyalahgunaan-game-pc-gratis/">Penyalahgunaan - Game PC Gratis</a></h3> <div class="amp-related-meta"> Game </div> </div> </div> <div class="amp-related-content"> <a href="https://id.eyewated.com/menggunakan-perangkat-insteon-untuk-memantau-suhu-indoor-dan-outdoor/"> <amp-img src="https://exse.eyewated.com/pict/cae18348537634da-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://id.eyewated.com/menggunakan-perangkat-insteon-untuk-memantau-suhu-indoor-dan-outdoor/">Menggunakan Perangkat INSTEON untuk Memantau Suhu Indoor dan Outdoor</a></h3> <div class="amp-related-meta"> Baru & Berikutnya </div> </div> </div> <div class="amp-related-content"> <a href="https://id.eyewated.com/sherwood-newcastle-r-972-penerima-av-ulasan/"> <amp-img src="https://exse.eyewated.com/pict/2261d35724a23bf2-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://id.eyewated.com/sherwood-newcastle-r-972-penerima-av-ulasan/">Sherwood Newcastle R-972 Penerima AV Ulasan</a></h3> <div class="amp-related-meta"> Ulasan produk </div> </div> </div> <div class="amp-related-content"> <a href="https://id.eyewated.com/pengembang-game-iphone-terbaik/"> <amp-img src="https://exse.eyewated.com/pict/8dbd69e035673360-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://id.eyewated.com/pengembang-game-iphone-terbaik/">Pengembang Game iPhone Terbaik</a></h3> <div class="amp-related-meta"> Perangkat Lunak & Aplikasi </div> </div> </div> <div class="amp-related-content"> <a href="https://id.eyewated.com/memperbaiki-ipad-yang-terus-meminta-kata-sandi/"> <amp-img src="https://exse.eyewated.com/pict/769b81b573723455-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://id.eyewated.com/memperbaiki-ipad-yang-terus-meminta-kata-sandi/">Memperbaiki iPad yang Terus Meminta Kata Sandi</a></h3> <div class="amp-related-meta"> IPad </div> </div> </div> <div class="amp-related-content"> <a href="https://id.eyewated.com/cara-mentransfer-musik-ke-memory-stick-psp/"> <amp-img src="https://exse.eyewated.com/pict/e091bb7d9fec3c77-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://id.eyewated.com/cara-mentransfer-musik-ke-memory-stick-psp/">Cara Mentransfer Musik ke Memory Stick PSP</a></h3> <div class="amp-related-meta"> Konsol Game </div> </div> </div> <div class="amp-related-content"> <a href="https://id.eyewated.com/cara-memindai-komputer-anda-dengan-benar-untuk-malware/"> <amp-img src="https://exse.eyewated.com/pict/69a042310ad831d3-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://id.eyewated.com/cara-memindai-komputer-anda-dengan-benar-untuk-malware/">Cara Memindai Komputer Anda dengan Benar untuk Malware</a></h3> <div class="amp-related-meta"> Anti Virus </div> </div> </div> <div class="amp-related-content"> <a href="https://id.eyewated.com/ulasan-lengkap-mozy/"> <amp-img src="https://exse.eyewated.com/pict/9a9add95c0772fdd-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://id.eyewated.com/ulasan-lengkap-mozy/">Ulasan Lengkap Mozy</a></h3> <div class="amp-related-meta"> Perangkat Lunak & Aplikasi </div> </div> </div> </div></article> <footer class="amp-wp-footer"> <div class="amp-wp-footer-inner"> <a href="#" class="back-to-top">Back to top</a> <p class="copyright"> © 2024 id.eyewated.com </p> <div class="amp-wp-social-footer"> <a href="#" class="jeg_facebook"><i class="fa fa-facebook"></i> </a><a href="#" class="jeg_twitter"><i class="fa fa-twitter"></i> </a><a href="#" class="jeg_google-plus"><i class="fa fa-google-plus"></i> </a><a href="#" class="jeg_pinterest"><i class="fa fa-pinterest"></i> </a><a href="" class="jeg_rss"><i class="fa fa-rss"></i> </a> </div> </div> </footer> <div id="statcounter"> <amp-pixel src="https://c.statcounter.com/12022999/0/02d06b5d/1/"> </amp-pixel> </div> </body> </html> <!-- Dynamic page generated in 1.261 seconds. --> <!-- Cached page generated by WP-Super-Cache on 2019-10-03 22:35:08 --> <!-- 0.002 -->