Menampilkan Gambar Dengan HTML

<div class="separator" style="clear: both; text-align: center;"> <a href="http://2.bp.blogspot.com/-Wfv3Eps8HEA/Vm5qJ0IEjlI/AAAAAAAAALg/VjyFYFPCK1c/s1600/html_1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://2.bp.blogspot.com/-Wfv3Eps8HEA/Vm5qJ0IEjlI/AAAAAAAAALg/VjyFYFPCK1c/s640/html_1.png" width="640" /></a></div> <br /> <br /> Kali ini saya akan memberi <b>Cara Menampilkan Gambar Dengan HTML  </b><br /> Bagaimana Caranya?? Caranya sangat mudah, Yang pertama saya akan mempraktekkannya dengan cara yang paling mudah yaitu dengan cara melihat apa yang ditampilkan browser. maksudnya bagaimana??<br /> Mari kita praktekkan ...<br /> <br /> Langkah Awal Pilih gambar anda yang ingin di tampilkan pada web browser. disini saya memilih gambar dengan nama ary.jpg. Jika Sudah Anda tentukan gambarnya lakukan drag and drop gambar tadi ke dalam browser. seperti gambar dibawah ini :<br /> <div class="separator" style="clear: both; text-align: center;"> </div> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="http://2.bp.blogspot.com/-EjQJHzuzy90/Vm5qc_PjKnI/AAAAAAAAALs/lnqhm-oTijk/s1600/gambar_2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="215" src="http://2.bp.blogspot.com/-EjQJHzuzy90/Vm5qc_PjKnI/AAAAAAAAALs/lnqhm-oTijk/s320/gambar_2.png" width="320" /></a></div> <br /> Lepaskan didalam web browser anda maka gambar akan muncul di dalam browser anda. <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="http://1.bp.blogspot.com/-V_ODYWblPOA/Vm5qhOu9iDI/AAAAAAAAAME/qT5QaYA2VCk/s1600/gambar_4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><br /></a></div> <br /> <br /> Jika Sudah maka gambar akan tampil di dalam browser, Mudah bukan...!! :)<br /> Namun Saya tau bahwa yang Anda butuhkan ialah sourcecodenya maka itu ini merupakan trik inti dari tutorial ini.<br /> Langkah selanjutnya ialah klik kanan pada tampilan browser dan pilih inspect element atau anda juga bisa menggunakan tombol [ctrl+shift+Q] pada keyboard.<br /> <br /> <div style="text-align: center;"> <a href="http://1.bp.blogspot.com/-V_ODYWblPOA/Vm5qhOu9iDI/AAAAAAAAAME/qT5QaYA2VCk/s1600/gambar_4.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="375" src="http://1.bp.blogspot.com/-V_ODYWblPOA/Vm5qhOu9iDI/AAAAAAAAAME/qT5QaYA2VCk/s400/gambar_4.png" width="400" /></a> </div> lalu anda pilih tab inspector dan didalamnya anda akan melihat source code cara menampilkan gambar tersebut yaitu dengan  script pada gambar berikut :<br /> <br /> <br /> <div style="text-align: center;"> <a href="http://1.bp.blogspot.com/-PctHRkzOYII/Vm5qcS80AjI/AAAAAAAAALo/Hfe0Rhm1yM0/s1600/Screenshot_5.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="141" src="http://1.bp.blogspot.com/-PctHRkzOYII/Vm5qcS80AjI/AAAAAAAAALo/Hfe0Rhm1yM0/s400/Screenshot_5.png" width="400" /> </a></div> Nah Gimana sudah jelas kan bahwa untuk menampilkan gambar pada browser hanya dengan menambahkan tag seperti berikut :  <br /> <br /> <pre class="c++" name="code"><img alt="Nama File Anda" src="url gambar anda"></img></pre> <br /> Jadi [Src] itu untuk menyatakan url gambar mana yang akan ditampilkan dan tag [img] itu untuk membaca bahwa bagian tag ini akan menampilkan gambar. Anda bisa mengkreasikan lagi dengan css tambahan untuk mempercantik tampilan gambar. Sudah Jelaskan Kawan Blogger Semua.Terimakasih Telah Membaca Tutorial Di GratisLagi.com 

HTML programming Menampilkan Gambar Dengan HTML

Kali ini saya akan memberi Cara Menampilkan Gambar Dengan HTML  Bagaimana Caranya?? Caranya sangat mudah, Yang pertama saya akan mempra...

Read more »

Mengenal Tag Komponen HTML

Tanpa disadari setiap kita memainkan internet baik itu di PC, Laptop maupun pada Smartphone anda Kita selalu berhadapan dengan yang namanya HTML. Untuk melanjutkan Tutorial sebelumnya Saya akan memberikan Sedikit Materi Dari tutorial sebelumnya tentang HTML.<br /> <br /> Dimana hampir setiap Tag HTML Selalu mempunyai Tag pembuka dan penutup. Contoh :<br /> <br /> <div style="text-align: center;"> <tag_pembuka>Statement....</tag_penutup></div> <div style="text-align: center;"> <br /></div> <div style="text-align: left;"> Sebagai contoh disini saya akan menggunakan tag <p>...</p> tag p merupakan Sebuah <i>paragraf</i> </div> <div style="text-align: left;"> Perhatikan !!</div> <div style="text-align: center;"> <p>Ini Website Pertama Saya</p></div> <div style="text-align: center;"> <br /></div> <div style="text-align: center;"> Hasil Output :</div> <div style="text-align: center;"> <br /></div> <div class="separator" style="clear: both; text-align: center;"> </div> <div class="separator" style="clear: both; text-align: center;"> </div> <div class="separator" style="clear: both; text-align: center;"> </div> <div class="separator" style="clear: both; text-align: center;"> <a href="http://2.bp.blogspot.com/-el000PQP75Y/VkiKhpky6XI/AAAAAAAAAEM/T6FldLQRNQY/s1600/Screenshot_10.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="2" src="http://2.bp.blogspot.com/-el000PQP75Y/VkiKhpky6XI/AAAAAAAAAEM/T6FldLQRNQY/s1600/Screenshot_10.png" /></a></div> <div style="text-align: center;"> Mari kita coba dengan menambahkan <i>...</i> menjadi seperti ini :<br /> <br /> <a href="http://1.bp.blogspot.com/-ZFEgR-JFrpU/Vkisf0NxY8I/AAAAAAAAAEc/6p4M0JICoRE/s1600/Screenshot_11.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="83" src="http://1.bp.blogspot.com/-ZFEgR-JFrpU/Vkisf0NxY8I/AAAAAAAAAEc/6p4M0JICoRE/s640/Screenshot_11.png" width="640" /></a> <br /> Maka Akan menjadi seperti ini :<br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="http://1.bp.blogspot.com/-eWWJmo3Ne-I/VkisfzGeoYI/AAAAAAAAAEg/LM5-ft7WV8c/s1600/Screenshot_12.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-eWWJmo3Ne-I/VkisfzGeoYI/AAAAAAAAAEg/LM5-ft7WV8c/s1600/Screenshot_12.png" /></a></div> <br /> <div class="separator" style="clear: both; text-align: left;"> Terlihat pada output diatas bahwa <i>...</i> menjadikan sebuah teks menjadi miring dan karena adanya perintah paragraf di awal kalimat maka pas kalimat "Yang Dibuat menggunakan HTML" itu berada dibawah atau anda bisa menggunakan </br> sebagai pengganti <p> Seperti ini :</div> <div class="separator" style="clear: both; text-align: left;"> <br /></div> <div class="separator" style="clear: both; text-align: left;"> Ini Website Pertama Saya</br><i>Yang Dibuat menggunakan HTML</i></div> <div class="separator" style="clear: both; text-align: left;"> <br /></div> <div class="separator" style="clear: both; text-align: left;"> dari script diatas ini akan menghasilkan Output yang sama karena </br> Akan memerintahkan enter jadi akan sama .</div> <div class="separator" style="clear: both; text-align: left;"> Bagaimana ? Apa Anda Sudah mengerti Sampai disini?? Jika Sudah ANda Bisa lanjut ke tutorial berikutnya tentang : </div> <br /></div>

HTML programming Mengenal Tag Komponen HTML

Tanpa disadari setiap kita memainkan internet baik itu di PC, Laptop maupun pada Smartphone anda Kita selalu berhadapan dengan yang namanya ...

Read more »

Cara Belajar HTML Untuk Pemula

<div class="separator" style="clear: both; text-align: center;"> <a href="http://3.bp.blogspot.com/-3QAMjNJlBjA/Vkeh_vaY3eI/AAAAAAAAADg/XTX2hLFedvk/s1600/Screenshot_6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><br /></a></div> <div class="separator" style="clear: both; text-align: center;"> <a href="https://familysearch.org/learn/wiki/en/images/0/04/HTML.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="241" src="https://familysearch.org/learn/wiki/en/images/0/04/HTML.jpg" width="320" /></a></div> <br /> <br />       Di pembahasan kali ini saya akan menjelaskan nih tentang <b>cara belajar HTML untuk pemula. </b>Nah Bagi Anda yang berasa bingung untuk membangun sebuah web tapi belum bisa berbuat apa-apa. Ini Solusi untuk anda. Jadi Jika Anda mengikuti langkah demi langkah <b>cara belajar HTML untuk pemula </b>Anda akan memahami bahkan Anda Bisa jago dalam membuat Script Html.<br /> <br /> Oke Saya Lanjutkan Untuk <b>cara belajar HTML untuk pemula </b>yang dibutuhkan Kalau saya Hanya menggunakan Notepad++ dan Browser apa saja tetapi yang populer adalah Google Chrome Dan Firefox<b>.</b><br /> <b><br /></b> <b>cara belajar HTML untuk pemula </b>itu harus tahu bahwa HTML itu identik dengan Tag Pembuka dan penutup sebagai contoh, Buka Notepad Anda Dan Tuliskan Seperti Ini :<br /> <br /> <b></b><br /> <div class="separator" style="clear: both; text-align: center;"> <a href="http://3.bp.blogspot.com/-3QAMjNJlBjA/Vkeh_vaY3eI/AAAAAAAAADg/XTX2hLFedvk/s1600/Screenshot_6.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="183" src="http://3.bp.blogspot.com/-3QAMjNJlBjA/Vkeh_vaY3eI/AAAAAAAAADg/XTX2hLFedvk/s320/Screenshot_6.png" width="320" /></a></div> <br /> Nah Kira-kira apa ya hasilnya??? Mari sama-sama kita lihat hasilnya di dalam browser kesayangan Anda.<br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="http://3.bp.blogspot.com/-nO_EBqkcA5Q/Vkeitv3rdqI/AAAAAAAAADo/lgYZQgQ_Re0/s1600/Screenshot_7.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-nO_EBqkcA5Q/Vkeitv3rdqI/AAAAAAAAADo/lgYZQgQ_Re0/s1600/Screenshot_7.png" /></a></div> Kali Ini Coba Membuat Struktur dasar Html Seperti Dibawah ini :<br /> <div class="separator" style="clear: both; text-align: center;"> <a href="http://2.bp.blogspot.com/-MZ1yqpH_kBs/VkejoN-WzqI/AAAAAAAAAD4/WItZyKRG1v0/s1600/Screenshot_9.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><br /></a></div> <div class="separator" style="clear: both; text-align: center;"> </div> <div class="separator" style="clear: both; text-align: center;"> <a href="http://1.bp.blogspot.com/-XlA3dSu-MD4/VkejoMlvpXI/AAAAAAAAAD0/RuIy5_yUdus/s1600/Screenshot_8.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="281" src="http://1.bp.blogspot.com/-XlA3dSu-MD4/VkejoMlvpXI/AAAAAAAAAD0/RuIy5_yUdus/s320/Screenshot_8.png" width="320" /></a></div> <br /> Dan Bagaimana outputnya ?? Coba Lihat disini .<br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="http://2.bp.blogspot.com/-MZ1yqpH_kBs/VkejoN-WzqI/AAAAAAAAAD4/WItZyKRG1v0/s1600/Screenshot_9.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-MZ1yqpH_kBs/VkejoN-WzqI/AAAAAAAAAD4/WItZyKRG1v0/s1600/Screenshot_9.png" /> </a></div> <div class="separator" style="clear: both; text-align: left;"> Bagaimana Sudah paham bukan tentang <b>Cara Belajar HTML Untuk Pemula. </b>Teruslah Berlatih Agar Kreatifitas Anda meningkat untuk mendesign web Anda Serapih mungkin.</div> <div class="separator" style="clear: both; text-align: left;"> Lanjutkan Ke Pembahasan Selanjutnya <a href="http://tutorials-channel.blogspot.co.id/2015/11/mengenal-tag-komponen-html.html" target="_blank"><b>Mengetahui Komponen-Komponen TAG Dalam HTML</b></a></div>

HTML programming Cara Belajar HTML Untuk Pemula

      Di pembahasan kali ini saya akan menjelaskan nih tentang cara belajar HTML untuk pemula. Nah Bagi Anda yang berasa bingung untuk...

Read more »