Newest Post

Cara Gampang Ubah File pdf ke Word

| Sabtu, 04 Februari 2017
Baca selengkapnya »
 


Dalam beberapa kebutuhan, sering kali kita diharuskan melakukan konversi atau pengubahan dari file PDF ke file Microsoft Word. Misalnya saja dalam kasus pengelolaan jurnal elektronik, ada pengirim naskah yang mengirimkan naskahnya dalam format PDF. Ini tentu saja harus kita ubah ke format Word agar ketika dikirimkan ke reviewer, reviewer dapat melakukan penelaahan dengan baik menggunakan Comment atau Track Changes. Inilah cara mengubahnya menggunakan aplikasi dari Internet yang bersifat gratis.





Langkah-Langkah Mengubah File PDF ke Word
Ikuti langkah-langkah di bawah ini:
1.      Jalankan browser dan arahkan ke alamat http://smallpdf.com/pdf-to-word.

2.      Akan tampil halaman awal PDF to Word Converter. Klik pada tombol Choose file yang ada di bawahnya. 
3.      Akan tampil kotak File Upload. Carilah file PDF yang akan Anda ubah ke Word.
4.      Proses unggah file tersebut akan berlangsung. Dilanjutkan dengan proses konversi seperti yang diperlihatkan pada gambar di bawah ini.



5.      Setelah proses konversi selesai, akan tampil tombol Download File. klik tombol tersebut.


6.      Akan tampil kotak Opening. Pilih opsi Open with atau Save File, kemudian klik tombol OK.





Sekarang, file PDF sudah diubah menjadi file Word yang dapat Anda edit. Mudah bukan?

Cara Gampang Ubah File pdf ke Word

Posted by : Unknown
Date :Sabtu, 04 Februari 2017
With 0komentar

Cara Membuat Internal Link ke Bagian Lain Dokumen (atribut id)

| Rabu, 01 Februari 2017
Baca selengkapnya »

Mengenal Atribut id dalam HTML

Atribut id adalah atribut yang bisa diberikan kepada tag apapun di dalam HTML. Atribut id bisa diibaratkan sebagai ‘identitas’ dari sebuah tag. Di dalam sebuah halaman, tidak boleh ada atribut id yang sama, namun setiap tag tidak harus memiliki atribut id. Berikut adalah contoh penulisan atribut id dalam beberapa tag HTML:
<p id="paragraf1"> </p>
<a id="situs1" href="http://http://indofredi.blogspot.co.id">IndoFredi</a>
<img id="gambar_koala" src="koala.jpg" />
<div id="footer"></div>
Atribut id kebanyakan digunakan untuk pengkodean dengan CSS atau pemograman JavaScript, dan atribut ini tidak akan berpengaruh apa-apa kedalam tampilan text HTML.

Cara Membuat Link ke Bagian Lain Dokumen HTML

Selain digunakan di dalam CSS dan JavaScript, atribut id juga digunakan di dalam HTML sebagai ‘penanda’ bagian dari halaman web.

Apabila paragraf pertama dari halaman kita memiliki id=”paragraf1”, maka kita bisa membuat link yang akan ‘memindahkan’ jendela web browser ke bagian “paragraf1”, dengan menuliskan:
<a href="#paragraf1">Kembali ke paragraf pertama</a>
Jika bagian tersebut dijalankan, web browser akan menampilkannya seperti link ‘normal’, namun ketika user men-klik kalimat link tersebut, ia akan dipindahkan ke bagian halaman yang memiliki id=”paragraf1”. Perhatikan bahwa di dalam tag <a>, kita menggunakan tanda pagar “#” untuk berpindah ke bagian lain halaman.
Syarat dari link tersebut bisa berfungsi adalah di bagian lain halaman, harus ada tag yang memiliki atribut id=”paragraf1”.
Selain digunakan untuk pindah ke bagian lain pada halaman yang sama, kita juga bisa membuat link untuk halaman lain, dan sekaligus memindahkan tampilan ke bagian tertentu. Untuk keperluan ini, kita hanya tinggal menambahkan tanda pagar di akhir atribut href, seperti contoh berikut ini:
<a href="halaman_lain.html#paragraf1">Link ke paragraf pertama halaman lain</a>
Jika digabungkan dengan alamat absolut, kita bisa memandu pengunjung situs ke bagian tertentu situs lain, dengan syarat pada bagian tersebut memiliki tag id.
Sebagai contoh, berikut adalah kode HTML cara membuat link ke bagian lain dokumen HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML di IndoFredi</title>
</head>
<body>
<h3 id="judul1">Saya sedang belajar HTML di IndoFredi</h3>
<p id="paragraf1">HTML adalah singkatan dari Hypertext Markup Language.
Disebut hypertext karena di dalam HTML sebuah text biasa dapat
berfungsi lain, kita dapat membuatnya menjadi link yang dapat
berpindah dari satu halaman ke halaman lainnya dengan
hanya meng-klik text tersebut.</p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<a href="#judul1">Kembali ke judul pertama</a>
<br />
<a href="#paragraf1">Kembali ke paragraf pertama</a>
</body>
</html>

Dalam contoh diatas, saya sengaja membuat banyak tag <br /> agar halaman web menjadi panjang, dan kita bisa melihat efek ketika men-klik link untuk kembali ke paragraf pertama halaman web.

Cara Membuat Internal Link ke Bagian Lain Dokumen (atribut id)

Posted by : Unknown
Date :Rabu, 01 Februari 2017
With 0komentar

Cara Membuat Description List dalam HTML (tag dl, dt dan dd)

|
Baca selengkapnya »

Pengertian Description List dalam HTML

Description List adalah jenis list yang ditujukan untuk membuat struktur yang berisi deskripsi atau daftar penjelasan.
List jenis ini mungkin tidak sepopuler ordered list atau unordered list, namun jika anda membutuhkan struktur HTML untuk membuat list yang berisi penjelasan istilah-istilah dengan keterangannya, mungkin bisa menggunakan list jenis ini.

Cara Membuat Description List dalam HTML

Untuk membuat Description List, seluruh list harus berada di dalam pasangan tag <dl> dan </dl>. Untuk setiap deskripsi atau judul istilah, kita menggunakan tag <dt>. Sedangkan untuk penjelasan istilah tersebut, kita menggunakan tag <dd>.
Berikut adalah contoh kode program description list dalam HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML di IndoFredi</title>
</head>
<body>
<h3 id="judul1">Saya sedang belajar HTML di IndoFredi</h3>
  
<dl>
<dt>HTML</dt>
<dd>HTML adalah singkatan dari Hypertext Markup Language.</dd>
<dt>CSS</dt>
<dd>CSS adalah singkatan dari Cascading Style Sheet.</dd>
<dt>PHP</dt>
<dd>PHP adalah singkatan dari PHP: Hypertext Preprocessor.</dd>
</dl>
  
</body>
</html>


Perhatikan cara penulisan description list diatas, untuk setiap tag <dt>, diikuti oleh tag <dd>. Namun kita bisa juga menambahkan beberapa tag <dd> pada satu tag <dt>, dan demikian juga sebaliknya.
Di dalam web browser, isi dari penjelasan pada tag <dd> akan ditampilkan dengan sedikit menjorok (indent) dari bagian istilahnya.

Cara Mengatur Tampilan Gambar dalam HTML (atribut align dan border)

|
Baca selengkapnya »

Mengenal Atribut Align pada Tag <img>

Secara default, gambar akan tampil dengan text berada di sisi bawah gambar. Untuk mengubah atau mengatur tampilan gambar dalam HTML, kita bisa menambahkan atribut align ke dalam tag <img>. Atribut align bisa diisi dengan beberapa nilai, yakni bottom, left, middle, right dan top.
Sesuai dengan namanya, masing-masing nilai dari atribut align bisa digunakan untuk mengatur tampilan gambar. Berikut adalah contoh kode HTML dengan menggunakan atribut align=”left” pada gambar.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML di IndoFredi</title>
</head>
<body>
<h3 id="judul1">Saya sedang belajar HTML di IndoFredi</h3>
  
<p>IndoFredi adalah situs Belajar Ilmu Komputer.
IndoFredi didedikasikan bagi anda yang ingin mempelajari
tentang dunia ilmu komputer.
<img src="IndoFredi.png" alt="gambar IndoFredi" height="100px"
align="left"/>
Saat ini IndoFredi masih berfokus kepada tutorial web programming,
seperti Tutorial Belajar HTML, Tutorial CSS, Tutorial PHP,
Tutorial JavaScript, dan Tutorial MySQL.
</p>
  
</body>
</html>

Seperti yang terlihat, bahwa dengan menambahkan atribut align=”left”, gambar akan berada di sisi kiri paragraf. Sebagai sarana latihan, anda bisa merubah kode diatas dengan mengubah-ubah nilai dari atribut align.

Mengenal Atribut Border pada Tag <img>

Atribut border digunakan untuk menambahkan garis tepi (border) kedalam gambar. Nilai dari atribut ini adalah angka yang berisi ukuran lebar garis tepi dalam satuan pixel. Berikut adalah contoh kode HTML dengan menggunakan atribut border=”5” pada gambar:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML di IndoFredi</title>
</head>
<body>
<h3 id="judul1">Saya sedang belajar HTML di IndoFredi</h3>
  
<p>IndoFredi adalah situs Belajar Ilmu Komputer.
<img src="dindofredi.jpg" alt="gambar indofredi" height="100px"
align="right" border="5"/>
IndoFredi didedikasikan bagi anda yang ingin mempelajari
tentang dunia ilmu komputer.
Saat ini IndoFredi masih berfokus kepada tutorial web programming,
seperti Tutorial Belajar HTML, Tutorial CSS, Tutorial PHP,
Tutorial JavaScript, dan Tutorial MySQL.
</p>
  
</body>
</html>


Penggunaan atribut border secara langsung ke dalam tag <img> memiliki banyak keterbatasan, misalnya kita tidak bisa mengatur warna dan jenis border dari gambar. Pengaturan yang lebih disarankan adalah dengan menggunakan CSS.

Pengertian Meta Tags dalam HTML

|
Baca selengkapnya »

Pengertian meta tag

Meta tag tidak dimaksudkan untuk menambah atau mempengaruhi isi dari konten halaman web kita, namun lebih kepada keterangan tambahan tentang halaman itu sendiri.
Meta tag biasanya di tempatkan pada bagian head dari HTML, dan biasanya terdiri dari beberapa meta tag dengan atribut yang berbeda-beda. Beberapa atribut yang biasanya di tampilkan adalah charset, name, http-equiv, dan content.
Penulisan meta tag adalah sebagai berikut: <meta … />. Meta tag merupakan tag yang berdiri sendiri, atau disebut juga self-closing tag.

Mengenal atribut name pada meta tag

Atribut pertama yang akan kita pelajari adalah name. Kita bisa menamakan isi dari atribut name ini dengan apa saja. Biasanya tag ini dipakai sebagai keterangan tentang kode HTML di dalamnya, seperti pembuat kode, tanggal, dan keterangan tentang isi halaman tersebut.
Untuk web asing biasanya atribut name akan berisi author, description, dan keywords. Author dimaksudkan untuk menambahkan nama pembuat kode kedalam HTML, description untuk keterangan tentang kode yang ada di dalam halaman itu, dan keyword berfungsi untuk kata kunci yang mewakili isi keseluruhan halaman.
Khusus untuk atribut keyword, beberapa tahun yang lalu, atribut ini sering digunakan sebagai kata kunci bagi mesin pencari dalam meng-index halaman website. Namun karena seringnya meta tag keyword ini di manipulasi supaya mempengaruhi hasil pencarian, belakangan ini mesin pencari seperti google tidak lagi menggunakannya.

Mengenal atribut charset pada meta tag

Atribut charset pada meta tag digunakan untuk memberi tahu web browser dengan karakter set apa halaman web akan ditampilkan. Biasanya atribut charset ini akan berisi nilai seperti utf-8, atau ISO-8859-1.
Jika kita tidak memasukkan charset ke dalam meta tag, tampilan halaman seakan tidak berubah, namun akan menjadi masalah jika halaman web kita dibuka oleh browser dari negara yang tidak menggunakan huruf latin seperti jepang, cina dan arab. Mendeklarasikan utf-8 sebagai atribut charset pada meta tag merupakan langkah untuk mengantisipasinya.

Mengenal atribut HTTP equivalents pada meta tag

Atribut HTTP Equivalents berkaitan dengan HTTP header. Dimana ini merupakan mekanisme web browser mengirimkan halaman ke browser kita. Nilai dari atribut HTTP Equivalents ini dapat berupa content-type, default-style dan refresh. Yang cukup menarik adalah jika nilai HTTP Equivalents kita isi dengan refresh, maka kita dapat mengontrol secara otomatis seberapa sering halaman akan di refresh.
Contoh penggunaan meta tag adalah sebagai berikut, save kode berikut sebagai meta.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
<title>Belajar Meta Tag HTML</title>
    <meta charset="utf-8" />
    <meta http-equiv="refresh" content="3" />
    <meta name="keywords" content="belajar meta tag html,
    meta tag, belajar html dasar" />
    <meta name="description" content="dahulu
    google akan menampilkan kalimat ini" />
</head>
<body>
   <p>
     Halaman ini akan otomatis di refresh setiap <em>3 detik</em>
   </p>
</body>
</html>

Dari contoh meta.html diatas, halaman tersebut akan direfresh secara otomatis setiap 3 detik, hal ini kita cantumkan pada <meta http-equiv=”refresh” content=”3″ /> dimana konten adalah penentu berapa detik halaman tersebut harus menunggu diantara tiap refresh. Atribut keyword dan description lebih ditujukan kepada mesin pencari seperti google, walaupun efektifitasnya sudah jauh berkurang saat ini.

Pengertian Meta Tags dalam HTML

Posted by : Unknown
Date :
With 0komentar

Perbedaan tag Span dan tag Div

|
Baca selengkapnya »


HTML digunakan untuk membuat ‘tujuan’ dari konten. Hampir semua tag memiliki keperluan masing-masing. Misalnya tag <p> untuk paragraf, tag h1 untuk heading (judul), dan lain-lain. Namun ada 2 buah tag khusus, yaitu span dan div yang memang tidak memiliki ‘tujuan’ apa-apa. Pada Tutorial Belajar HTML: Perbedaan tag span dan div ini kita akan membahasnya lebih dalam.

Pengertian tag Span dan tag Div

Tag <span> dan tag <div> adalah tag yang tidak memiliki makna apa-apa. Selain kedua tag ini, tag-tag lain di dalam HTML memiliki makna masing-masing. Jadi, apa fungsi dari kedua tag ini?
Tag <span> dan tag <div> yang tidak bermakna ini malah menjadi salah satu tag yang paling sering digunakan untuk membuat struktur web, terutama tag <div>. Tag <div> yang tidak memiliki style bawaan (tidak memiliki efek tampilan apa-apa), dapat dengan mudah diubah menggunakan CSS. Biasanya tag <div> menggunakan atribut id sebagai pembeda antara tag <div> yang satu dengan yang lainnya.
Contoh paling umum untuk penggunaan tag <div> adalah sebagai container atau pembatas satu struktur HTML dengan struktur lainnya. Berikut adalah contoh struktur HTML menggunakan tag <div>:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html>
<head>
  <title>Belajar Tag Div</title>
</head>
<body>
   
  <div id="header">
    <h1>Judul Website</h1>
    <img src="logo_website.jpg" />
  </div>
     
  <div id="menu">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
     
  <div id="content">
    <div id="article_1">
      <p>......Isi dari artikel.....</p>
    </div>
  </div>
     
  <div id="sidebar">
    <h1>Artikel Terbaru</h1>
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
      </ul>
    </div>
     
  <div id="footer">
    <p>Footer - Copyright IndoFredi 2016</p>
  </div>
</body>
</html>
Stuktur web diatas umum ditemukan pada web modern yang menggunakan CSS untuk men-style halaman tersebut. Perhatikan bahwa masing-masing tag <div> memiliki atribut id yang membedakannya dengan tag <div> lainnya.

Perbedaan Antara tag Span dan tag Div

Secara garis besar, tag-tag di dalam HTML dapat dibagi menjadi 2 jenis, yaitu Block-line dan In-line.
Jenis tag Block-line atau Block-style adalah kelompok tag yang ‘ingin’ berdiri sendiri, dan memisahkan diri dari tag disekitarnya.Block Style tag umumnya akan tampil pada baris baru dan secara otomatis menambahkan spasi (enter) di akhir tag. Contoh tag Block-line yaitu tag paragraf (<p>), heading (<h1>..<h6>), dan tabel (<table>). Tag Block-line akan membuat sebuah ‘blok’ dalam struktur HTML. Di dalam tag ini bisa terdapat tag block lain, maupun tag In-line.
Jenis tag In-line atau Inline style adalah tag yang tidak membuat blok baru di dalam struktur HTML. Tag jenis ini tidak menambahkan spasi di akhir tag, dan cenderung menyambung tag sebelum dan sesudahnya dalam baris yang sama. Contoh tag inline adalah tag garis miring (<em> atau <i>), tag penebalan (<strong> atau <b>) dan tag link (<a>).
Tag div termasuk kedalam jenis block-line, sedangkan tag span termasuk kedalam in-line tag.
Contoh perbedaan kedua tag ini dapat dilihat dalam kode HTML berikut, savelah sebagai spandiv.html
Contoh penggunaan tag div dan span:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
 <style type="text/css">
   #kalimat{
      font-weight: bold;
      }
   .miring{
      font-style: italic;
      }
 </style>
<head>
   <title>Belajar Membuat Form </title>
</head>
<body>
   <p>
       <strong>Ini adalah <em>Sebuah</em> paragraf </strong>
   </p>
   <div id="kalimat">
       Ini juga <span class="miring">Sebuah</span> paragraf
   </div>
</body>
</html>

Kedua paragraf akan memiliki efek yang sama. Namun pada paragraf kedua kita hanya menggunakan tag div dan span. Efek penebalan dan garis miring dari tulisan kita ubah melalui CSS.
Jika anda belum mempelajari CSS, tidak perlu khawatir, namun dapat diingat bahwa tag span dan tag div merupakan tag ‘tanpa makna’ yang bisa dimaknai.

Perbedaan tag Span dan tag Div

Posted by : Unknown
Date :
With 0komentar

Tutorial HTML Dasar (Finish)

|
Baca selengkapnya »


Tutorial belajar HTML dasar ini kita tutup dengan sebuah halaman web dengan seluruh tag dan atribut yang telah kita pelajari dari tutorial part 1 sampai 14. Tag disini mencakup tag paragraf, heading, list, link, image (gambar), komentar, tabel dan form.
Berikut adalah rangkuman kode program sebuah halaman HTML. Ketiklah kode berikut dan save sebagai finish.html
Contoh rangkuman tag dasar html:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE html>
<html>
<head>
   <title>Summary HTML Dasar</title>
</head>
<body>
<!-- Akhirnya... Sebuah Halaman HTML Lengkap -->
<h1>Belajar HTML Dasar</h1>
<p> Ini <strong>adalah</strong> sebuah <em>paragraf</em> </p>
<!-- tag link -->
<p>Saya sedang belajar HTML dari
<a href="http://indofredi.blogspot.co.id" target="_blank">IndoFredi</a>
dan akan terbuka pada tab baru</p>
<!-- tag image -->
<img alt="gambar koala" src="koala.jpg" />
<!-- tag list -->
<h2>Daftar Belanjaan</h2>
<ol>
   <li>Minyak Goreng</li>
   <li>Sabun Mandi</li>
   <li>Deterjen</li>
   <li>Shampoo</li>
   <li>Obat Nyamuk</li>
</ol>
<!-- tag table -->
<table border="1">
<tr>
   <td>Baris 1, Kolom 1</td>
   <td>Baris 1, Kolom 2</td>
   <td>Baris 1, Kolom 3</td>
</tr>
<tr>
   <td>Baris 2, Kolom 1</td>
   <td>Baris 2, Kolom 2</td>
   <td> Baris 2, Kolom 3</td>
</tr>
<tr>
   <td> Baris 3, Kolom 1</td>
   <td> Baris 3, Kolom 2</td>
   <td> Baris 3, Kolom 3</td>
</tr>
<tr>
   <td> Baris 4, Kolom 1</td>
   <td> Baris 4, Kolom 2</td>
   <td> Baris 4, Kolom 3</td>
</tr>
</table>
<br/>
<!-- tag form -->
<form action="finish.html" method="get">
   
   Nama: <input type="text" name="nama" value="Nama Kamu" />
   <br />
   Password: <input type="password" name="password" />
   <br />
   Jenis Kelamin :
   <input type="radio" name="jenis_kelamin" value="laki-laki" checked/>
   Laki - Laki
   <input type="radio" name="jenis_kelamin" value="perempuan" />
   Perempuan
   <br />
   Hobi:
     <input type="checkbox" name="hobi_baca" /> Membaca Buku
     <input type="checkbox" name="hobi_nulis" checked /> Menulis
     <input type="checkbox" name="hobi_mancing" /> Memancing
   <br />
   Asal Kota:
   <select name="asal_kota" >
     <option value="Kota Jakarta"> Jakarta</option>
     <option>Bandung</option>
     <option value="Kota Semarang" checked>Semarang</option>
   </select>
   <br />
   Komentar Anda:
   <textarea name="komentar" rows="5" cols="20">
   Silahkan katakan isi hati anda</textarea>
   <br />
   <input type="submit" value="Mulai Proses!" >
</body>
</html>

Jika anda telah mempelajari Tutorial Belajar HTML dari awal sampai akhir, seluruh kode HTML ini dapat dimengerti dengan mudah.
Walaupun kita telah mempelajari seluruh tag-tag umum dalam HTML, namun HTML masih menyimpan banyak tag-tag lain untuk kebutuhan yang lebih khusus. HTML juga makin berkembang dengan hadirnya HTML5.

Sampai disini anda boleh melanjutkan untuk mempelajari Tutorial HTML Lanjutan, dimana kita akan membahas tentang tag-tag yang lebih khusus. contohnya tag untuk menformat Text HTML, tag untuk membuat tabel HTML, dan tag untuk membuat Form HTML. Atau anda bisa langsung mempelajari tutorial dasar tentang CSS.

Tutorial HTML Dasar (Finish)

Posted by : Unknown
Date :
With 0komentar
Prev
▲Top▲