Tutorial HTML

Tutorial HTML adalah tutorial yang membahas tentang script html, penggunaan html dan pengembangan aplikasi php menggunakan html sebagai template desain web.

3 Cara Mudah Menampilkan File PDF di Website

3 Cara Mudah Menampilkan File PDF di Website

3 Cara Mudah Menampilkan File PDF di Website

File pdf biasanya di baca menggunakan pdf reader seperti adobe reader, nitro pdf dan sebagainya. Kali akan kita ulas bagaimana menampilkan file pdf agar dapat di baca secara online melalui browser seperti chrome, mozilla firefox, dan juga internet explorer.

Caranya cukup mudah dan simpel saja, berikut ini script atau tag html yang bisa di kita gunakan untuk menampilkan file pdf di browser:

Embed

Merupakan tag html yang berguna untuk membaca source dari sebuh file sehingga dapat di run atau di jalankan di browser:

Tag:

<embed>

Dukungan Browser:

  1. Google Chrome
  2. Mozilla Firefox
  3. Safari
  4. Opera
  5. Internet explorer

Dukungan script:

Html 4.01+

Atribut:

  1. height, berfungsi untuk mengatur tinggi ruang pdf
  2. src, source dimana link url pdf atau file
  3. type, bererisi tipe file dalam kasus ini pdf
  4. width, mengatur lebar ruang pembacaan pdf

Penggunaan:

<embed src=”file.pdf”>

Iframe

Untuk tag iframe, source yang dapat digunakan selain file pdf, word, excel,audio, video sama seperti tag embed ini dapat juga digunakan untuk menampilkan link url halaman web pada sourcenya.

Tag: 

<iframe></iframe>

Dukungan Browser:

  1. Google Chrome
  2. Mozilla Firefox
  3. Safari
  4. Opera
  5. Internet explorer

Dukungan script:

Html 4.01+

Atribut:

  1. height, mengatur tinggi ruang tampil (misal:100px)
  2. src, link file yang akan ditampilkan (misal: file.pdf)
  3. width, mengatur lebar ruang tampil (misal:100px)
  4. align, mengatur posis tampilan misalnya kiri, kanan atas bawah (left,right,top,middle,bottom)

Penggunaan:

<iframe src=”file.pdf”></iframe>

Object

Berfungsi untuk menampilkan source file berupa file, audio, video, dokument. Perbedaannya adalah pada tag ini menampilkan link filenya menggunakan tag data

Tag: 

<object></object>

Dukungan Browser:

  1. Google Chrome
  2. Mozilla Firefox
  3. Safari
  4. Opera
  5. Internet explorer

Dukungan script:

Html 4.01+

Atribut:

  1. height, mengatur tinggi ruang tampil (misal:100px)
  2. src, link file yang akan ditampilkan (misal: file.pdf)
  3. width, mengatur lebar ruang tampil (misal:100px)
  4. align, mengatur posis tampilan misalnya kiri, kanan atas bawah (left,right,top,middle,bottom)

Penggunaan:

<object data=”file.pdf”></object>

3 Cara menampilkan pdf di website

  1. <embed src=”file_name.pdf” width=”800px” height=”2100px” /><embed src=”file_name.pdf” width=”800px” height=”2100px” />
  2. <iframe src=”file_name.pdf” style=”width: 100%;height: 100%;border: none;”></iframe>
  3. <object data=”data/test.pdf” type=”application/pdf” width=”300″ height=”200″></object>

Terimakasih semoga bermanfaat

Postingan berikutnya

  1. menampilkan file pdf php
  2. cara membuat pdf reader menggunakan laravel
  3. menampilkan pdf di php
  4. menampilkan pdf di internet expoler
  5. menampilkan file pdf modal
  6. menampilkan file pdf in php
  7. menampilkan file pdf di php
  8. laravel tampil file pdf
  9. coding untuk menampilkan pdf secara langsung
  10. cara menampilkan pdf di link web
  11. cara menampilkan file pdf php
  12. cara menampilkan file pdf di php
  13. cara membuka file pdf siphp
  14. sourcecode menampilkan file pdf

Membuat Cursor Langsung Pada Form Input

Membuat Cursor Langsung Pada Form Input. Iseng-iseng saya membuat dan sharing hal unik tentang penempatan kursor pada sebuah form input pada sintak atau tag html. Kegunaan atau fungsi dari hal tersebut yaitu untuk memudahkan user atau penggunakan aplikasi web, langsung menginput pada form input tanpa mengarahkan atau mengklik kursor ke form yang ada.

Ternyata caranya sangat mudah. Hal ini juga di lakukan oleh google. Google langsung menempatkan kursor pada form pencarian yang ada tanpa Kamu harus mengkliknya terlebih dahulu. Ini memungkinkan sebuah proses pada bisnis program lebih cepat.

Caranya yaitu menggunakan tag

autofocus=”autofocus”

Langkahya yaitu silahkan tempatkan tag tersebut di dalam selah-selah form input bertipe text seperti berikut ini:

<input type=”text” name=”token” autofocus=”autofocus”>

Maka dengan cara tersebut kursor akan dengan otomatis aktif dan berkedip didalam form input yang didalamnya terdapat tag autofocus.

Seperti contoh gambar berikut ini:

Membuat Cursor Langsung Pada Form Input

Membuat Cursor Langsung Pada Form Input

Oke demikian Tutorial singkat tentang penggunaan tag autofocus pada input html.  semoga bermanfaat ya

Postingan berikutnya

  1. cara buat cursor element fokus pada html

Iframe Tanpa Src

Iframe Tanpa Src. Pada awalnya Saya membuat ini adalah ketika konten yang ada pada di spk Saya tabelnya melebar hingga keluar konten web. Nah dari situ kan keliatan kuran enak di pandang mata, terlintas, wah gimana nih cara biar masuk kedalam konten dan kelihatan rapih tabelnya. Terpikir wah pake iframe aja kali ya. Tapi kan kalau iframe biasanya pakai src yang isinya link gitu. Tapi ini tidak pakai link, oke maulai dari situ saya cari sana-sini dan akhirnya nemu script ini yang berguna untuk membuat konten di iframe tanpa src. SImpel si scripnya, lihat aja.

Kalau bingung saya mau buat apa, ini screenshotnya:

Iframe tanpa src

Iframe tanpa src

Iframe Tanpa Src

Script berikut ini ada dua terserah mana yang mau anda gunakan, boleh pilih salah satu atau keduannya.

1. Script 1

<iframe src='javascript:document.write("tes")'></iframe>

2. Script 2

<iframe id="FileFrame" src="about:blank"></iframe>
<script type="text/javascript">
var doc = document.getElementById('FileFrame').contentWindow.document;
doc.open();
doc.write('<html><head><title></title></head><body>Hello world.</body></html>');
doc.close();
</script>

Script diatas adalah kombinasi tag htm dengan javascript. Dengan kondisi menyisipkan teks javascript dalam tag html. Pada script kedua, iframe di beri id untuk inisialisasi penempatan konten yang akan disisipkan didalam iframe.

Namun menggunakan cara diatas ada satu kelemahan yaitu tag tabel tidak dapat muncul pada iframe. Wah disitu saya bingung, sedangkan konten yang akan saya tampilkan adalah tabel. Namun isi tabel muncul dan garis tabelnya yang tidak muncul. Setelah itu barulah saya terpikir menggunakan css, Kalau pakai css begini caranya.

Ternyata pakai css bisa, dan lebih mudah tinggal pakai div dan isi css, ini scriptnya.

1. Pakai div

Pertama letakkan konten yang akan Anda beri scrooll diantara tag,

<div class="scrooll"> dan </div>

2. Script css

Letakkan script css berikut ini di file css Anda,


.scroll{
overflow: scroll;
width:910px;
}

Iframe Tanpa Src dapat muncul. Namun untuk widthnya yang saya gunakan diatas lebih kecil dari konten web utama yang widthnya 980. Oke semoga bermanfaat, dan dapat Anda gunakan mana tau butuh tutorial iframe yang gak pakai src untuk menampilkan kontennya.

Menampilkan Kalender pada Form Input

 

 

<h3>Rekap Data Pemasangan Iklan</h3>
<fieldset>
<form name=”login” action=”modul/laporan/rekap_pemasangan.php” method=”POST”>
<div>
<b>Dari :</b><br/>
<input type=”date” name=”dari”>
</label>
<label><b>Sampai :</b><br/>
<input type=”date” name=”sampai”>
</label>
<label>
<button type=”submit”>Proses</button>
<button type=”button” onclick=”self.history.back()”>Batal</button>
</label>
</div>
</form>
</fieldset>

Rekap Data Pemasangan Iklan

Dari :


Postingan berikutnya

  1. input tanggal php dengan kalender
  2. cara membuat input kalender / tanggal otomatis php
  3. cara membuat tanggal di html
  4. membuat form input tanggal dengan php
  5. cara membuat kalender pada form html
  6. codingan kalender php