Nulis-Ilmu.com

Tutorial Elektronika dan Komputer

Membuat Tabel pada HTML

By

Tabel adalah sarana untuk menampilkan informasi yang terstruktur dalam sebuah field/kolom dan recorr/baris. Pada tabel terdapat sekumpulan informasi yang memiliki kategori sama sehingga dapat dikelompokkan dalam sebuah field/kolom. Masing-masing informasi tersebut disusun satu per satu dalam beberapa baris. Jadi dalam sebuah tabel terdapat dua untus utama yaitu field atau kolom dan record atau baris.
Untuk membuat tabel pada HTML dipakai tag <table>…</table>. Didalam tag <table>…</table>disisipi tag<tr>…</tr> untuk membuat baris dan didalam tag <tr>…</tr> disisipi tag <td>…</td> untuk membuat kolom. Khusus untuk baris paling atas yang biasanya berisi nama kolom bisa digunakan tag <th>…</th>.

Berikut ini contoh script HTML sederhana untuk membuat tabel dengan 2 kolom 3 baris:

 <table border=1>  
 <tr>  
 <th>Nama Kolom 1</th>  
 <th>Nama Kolom 2</th>  
 </tr>  
 <tr>  
 <td>Baris 1 Kolom 1</td>  
 <td>Baris 1 Kolom 2</td>  
 </tr>  
 <tr>  
 <td>Baris 2 Kolom 1</td>  
 <td>Baris 2 Kolom 2</td>  
 </tr><tr>  
 <td>Baris 3 Kolom 1</td>  
 <td>Baris 3 Kolom 2</td>  
 </tr>  
 </table>

Dan berikut tampilan script pada briwser :

Nama Kolom 1 Nama Kolom 2
Baris 1 Kolom 1 Baris 1 Kolom 2
Baris 2 Kolom 1 Baris 2 Kolom 2
Baris 3 Kolom 1 Baris 3 Kolom 2

Tag <table> dan atributnya

Dalam tag <table> terdapat beberapa atribut yang digunakan untuk mengatur beberapa parameter tabel, seperti border untuk mengatur tampilan border, width untuk mengatur lebar tabel dan bgcolor untuk mewarnai background tabel.

Contoh cara menggunakan atribut pada tag <table> :

  <table border=1 width=100% bgcolor=yellow >

Tag <tr> dan atributnya

Tag <tr> merupakan singkatan dari table row. Dalam tag <tr> juga terdapat atribut yang dipakai misalnya height untuk mengatur tinggi baris, align untuk mengatur posisi text dan juga bgcolor yang berbeda dari atribut tabelnya.

Contoh cara menggunakan atribut pada tag <tr> :

  <tr height="50px" align="center" bgcolor=green >

Tag <th>, <td> dan atributnya

Tag <td> merupakan singkatan dari table data sedangka <th> merupakan singkatan dari table heading. Tag <th> biasa dipakai untuk menyatakan nama kolom yang biasanya terletak padada posisi paling atas tabel. Atribut pada tag <td> dan <th> ini digunakan untuk mengatur beberapa parameter seperti width untuk mengatur lebar kolom, align untuk mengatur posisi text dalam satu cell dan bgcolor untuk background warna tersendiri terpisah dari background tabel dan baris.

Contoh cara menggunakan atribut pada tag <td> dan <th> :

  <tr width="100px" align="right" bgcolor=blue >

Tag <caption> pada tabel

Tag <caption> ini dipakai untuk menampilkan title dari sebuah tabel. Tag <caption>…</caption> harus diletakkan langsung setelah tag <table>.

Contoh rangkuman script tabel diatas beserta caption-nya:

 <!DOCTYPE html>  
 <html>  
 <head>  
 <title>Belajar membuat tabel pada HTML</title>  
 <body>  
  <table border=1 width=100% bgcolor=yellow >   
  <caption>Tabel Latihan HTML</caption>  
  <tr align="right" height="50px" bgcolor=green>   
  <th width="300px" bgcolor=blue>Nama Kolom 1 backgroung biru</th>   
  <th>Nama Kolom 2 dengan background mengikuti atribut tr</th>   
  </tr>   
  <tr>   
  <td>Baris 1 Kolom 1</td>   
  <td>Baris 1 Kolom 2</td>   
  </tr>   
  <tr>   
  <td>Baris 2 Kolom 1</td>   
  <td>Baris 2 Kolom 2</td>   
  </tr><tr>   
  <td>Baris 3 Kolom 1</td>   
  <td>Baris 3 Kolom 2</td>   
  </tr>   
  </table>   
 </body>  
 </html>

Dan berikut tampilan script diatas pada browser:

Referensi :

Menampilkan Gambar Pada HTML

By

Untuk membuat website terlihat cantik dan menarik ada baiknya kita menampatkan gambar berhubungan dengan artikel yang kita buat. HTML mendukung pemasangan gambar dalam format JPG, GIF dan PNG. Untuk memasang gambar pada HTML menggunakan tag <img src=”lokasi-file”> tanpa penutup. Atribut src menunjukkan nama file beserta lokasi (jika diperlukan) dan merupakan syarat wajib dalam pemasangan tag. Untuk mengatur tampilan gambar tersedia babarapa atribut lain yang bisa dipakai.

Contoh script paling sederhana untuk pemasangan gambar pada html :

 <img src="profil.jpg">

Beberapa atribut dalam pemasangan tag <img> :

Atribut SRC

Menunjukkan URL dari file gambar yang akan ditampilkan. Ini merupakan atribut wajib dalam pemasangan gambar HTML. Jika URL dari file gambar salah atau tidak ditemukan maka browser otomatis menampilkan gambar “broken-image” yang berupa foto terpecah.
Ada beberapa cara menuliskan URL file image, yaitu:

  • Menulis nama file saja, ini dilakukan jika letak file gambar berada satu folder dengan file HTML. Contoh: 
     <img src="profil.jpg">
  • Menulis nama folder dan nama file, ini dilakukan jika file gambar terletak di folder yang lain. Contoh: 
     <img src="/images/profil.jpg">
  • Menulis alamat website, lokasi folder dan nama file, ini dilakukan jika file gambar berada disitus lain. Contoh: 
     <img src="http://nulis-ilmu.blogspot.com/images/profil.jpg">

Atribut ALT

Digunakan sebagai alternatif text manakala image tidak ditampilkan atau gagal ditampilkan. Teks pada atribut ALT sebaiknya merupakan deskripsi dari file gambar yang akan ditampilkan. Contoh penggunaan atribut ALT pada tag <img> :
 <img src="profil.jpg" alt="foto-profil">

Atribut WIDTH dan HEIGHT

Digunakan untuk mengatur lebar dan tinggi gambar yang akan ditampilkan. Nilai dari atribut WIDTH dan HEIGHT berupa angka tanpa disertai satuan px(pixel) sebagaimana ukuran gambar. Aspek rasio WIDTH dan HEIGHT tidak harus sama dengan ukuran gambar asli, namun untuk menjaga proporsi tampilan sebaiknya tidak meleset terlalu jauh.
Contoh penggunaan atribut WIDTH dan HEIGHT pada tag <img> :
 <img src="profil.jpg" alt="foto-profil" width="150" height="150">

Atribut BORDER

Adalah atribut untuk membuat border atau bingkai dari gambar yang akan ditampilkan. Ukuran border disini menggunakan satuan, misalnya: px (pixel). Contoh penggunaan atribut BORDER pada tag <img> :

 <img src="profil.jpg" alt="foto-profil" width="150" height="150" border="5px">

Menggunakan STYLE pada tag <img>

Sebenarnya ada cara alternatif yang lebih dianjurkan untuk mengatur setting width dan height gambar pada HTML, yaitu dengan metode style. Mengapa demikian, karena dengan metode ini kita bisa mencegah akses pengaturan gambar melalui style luar (misal=CSS) yang tidak kita sadari. Untuk nilai dari parameter width dan height pada style harus menggunakan satuan, misal: px (pixel). Selain itu mengatur boder bisa juga dilakukan dengan metode style.

Contoh mengatur width, height dan border gambar pada HTML dengan metode style :

 <img src="profil.jpg" alt="foto-profil" style="width:50px;height:50px;border:1px solid;">

Contoh script lengkap untuk menampilkan gambar pada website :

 <!DOCTYPE html>  
 <html>  
 <head>  
 <title>Belajar Menampilkan gambar pada HTML</title>  
 <body>  
 Ini contoh tampilan gambar dengan <b>atribut</b> width, height dan border<br/>  
 <img src="profil.jpg" alt="foto-profil" width="150" height="150" border="5px"><br/>  
 Ini contoh tampilan gambar dengan <b>style</b> width, height dan border<br/>  
 <img src="profil.jpg" alt="foto-profil" style="width:150px;height:150px;border:5px solid;"><br/>  
 </body>  
 </html>

Tampilan script diatas pada browser :

Memasang Link Pada HTML

By

Link adalah sebuah penanda untuk menghubungkan pengguna ke sebuah alamat atau URL sebuah halaman atau sebuah situs. Link sebenarnya merupakan sebutan singkat dari Hyperlink. Kegunaan Link dalam sebuah website diperlukan untuk akses pengguna yang lebih mudah dan cepat. Untuk menuju ke suatu halaman web pengguna cukup meng-klik sebuah Link yang diberikan oleh server. Link dapat berupa text ataupun gambar. Dalam artikel ini juga sekalian dibahas tentang cara memasang link dengan gambar pada sebuah halaman HTML.

Memasang Link pada HTML dengan Tag <a>

Untuk memasang Link digunakan tag <a>…</a> yang merupakan singkatan dari kata anchor. Untuk menentukan halaman tujuan digunakan atribut href, jadi sintak dasar minimal sebuah link pada html adalah sebagai berikut :

 <a href="url-link-tujuan">tampilan-link-text atau gambar</a>

URL-Link tujuan dapat berupa sebuah halaman tertentu dalam satu situs misal tentang-kami.html atau lengkap menyebutkan nama situs dan halaman seperti www.nulis-ilmu.blogspot.com/tentang-kami.html atau juga hanya sekedar menyebutkan nama situs seperti www.nulis-ilmu.blogspot.com.
Tampilan link text atau gambar merupakan display link yang dapat dilihat dan di klik oleh pengguna. Untuk format text link dapat mengacu pada tag formatting HTML.

Ada beberapa atribut lain dalam membuat sebuah link, yaitu:

  1. HREF, menunjukkan alamat tujuan sebuah link. Ada tiga jenis penulisan nilai atribut HREF yaitu :
    • Halaman lokal adalam satu situs, cukup dengan cara menyebut langsung halaman, contoh: 
       <a href="tentang-kami.html">Tentang Kami</a>
    • Halaman tertentu yang terdapt pada situs lain, caranya dengan ditulis lengkap nama situs dengan http dan nama halaman, contoh: 
       <a href="http://nulis-ilmu.blogspot.com/tentang-kami.html">Tentang Kami</a>
    • Nama situs tanpa menyebut halaman, ditujukan untuk menuju ke situs tertentu dan akan langsung membuka halaman index situs tersebut. Untuk nama situs harus ditulis lengkap dengan http, contoh : 
       <a href="http://nulis-ilmu.blogspot.com">Nulis Ilmu Bermanfaat</a>
  2. TARGET, merupakan target tampilan sebuah link yang ditunjukkan oleh HREF. Ada beberapa nilai untuk atribut TARGET yang bisa dipilih, yaitu:
    • _blank, membuka link pada tab baru dalam satu jendela, contoh: 
       <a href="tentang-kami.html" target="_blank">Tentang Kami</a>
    • _self, membuka link pada frame dan tab yang sama. ini merupakan default atribut misal atribut tidak diset. contoh: 
       <a href="tentang-kami.html" target="_self">Tentang Kami</a>
    • _parent, membuka link pada jendela baru. Jadi browser akan membuat lagi satu window untuk menampilkan halaman yang dituju oleh link ini. contoh: 
       <a href="tentang-kami.html" target="_parent">Tentang kami</a>
    • _top, membuka link pada full body dari sebuah jendela. contoh: 
       <a href="tentang-kami.html" target="_top">Tentang kami</a>
  3. ID, merupakan atribut untuk menentukan id sebuah link. ID ini bisa digunakan untuk berbagai keperluan seperti bookmark dan javascript.
    contoh pemasangan atribut ID pada Link : 
     <a href="tentang-kami.html" target="_blank" id="link1">Tentang kami</a>

Memasang link dengan gambar dengan tag <img>

Selain menggunakan text, link juga bisa dibuat dengan menggunakan gambar. Hal ini biasa dipakai saat akan menampilkan gambar besar melalui link thumbnail gambar yang berukuran lebih kecil. Atau juga bisa dipakai saat menampilkan preview post dalam bagian artikel terkait.

Untuk menampilkan link dengan gambar cukup dilakukan dengan meletakkan tag <img> diantara tag <a>…</a>. Semua atribut yang dipakai pada tag <img> juga bekerja saat dipakai untuk link.
Contoh pemasangan link menggunakan gambar:

 <a href="tentang-kami.html" target="_blank" id="link1"><img src="images/profil.jpg"></a>

Referensi :

Memformat Teks Pada HTML

By

Agar artikel yang kita buat lebih enak dibaca dan gampang dipahami maksudnya perlu diperhatikan format teksnya. Dalam hal ini kita bisa mengatur format standar, mengatur font atau juga bisa mengatur list teks seperti bullet numbering.
Pada contoh penggunaan tag berikut ini kita sudah mulai mengenal atribut, yaitu sebuah parameter yang berfungsi mengatur properti sebuah tag. Misal pada tag <font> ada atribut untuk mengatur jenis font, ukuran dan warna teks.

Tag html untuk standar formatting

Ada beberapa pengaturan standar formatting, yaitu:

  1. Cetak tebal (bold atau strong)
    ada dua cara yang bisa dipakai yaitu menggunakan tag <b>…</b> atau <strong>…</strong>
  2. Cetak miring (italic atau emphasized)
    ada dua cara yang bisa dipakai yaitu menggunakan tag <i>…</i> atau <em>…</em>
  3. Cetak garis bawah (underline)
    ada dua cara yang bisa dipakai yaitu menggunakan tag <u>…</u> atau <ins>…</ins>
  4. Cetak lebih rendah (subscript)
    menggunakan tag <sub>…</sub>
  5. Cetak lebih tinggi (superscript)
    menggunakan tag <sup>…</sup>
  6. Cetak dicoret (deleted)
    menggunakan tag <del>…</del>

Contoh penggunaan tag standar formatting:

 <b>Teks dicetak tebal</b>  
 <strong>Ini juda dicetak tebal</strong>  
 <i>Teks dicetak miring</i>  
 <em>Ini juga dicetak miring</em>  
 <u>Teks digaris bawahi</u>  
 <ins>Ini juga teks digaris bawahi</ins>  
 <sub>Teks cetak lebih rendah</sub>  
 <sup>Teks cetak lebih tinggi</sup>  
 <del>Teks cetak dicoret</del>

Tag html untuk mengatur font

Untuk mengatur font menggunakan tag <font>…</font>.
Ada tiga opsi atribut yang bisa dipakai dalam pengaturan font yaitu:

  1. Mengganti jenis font
    menggunakan atribut face, contoh: <font face=”arial”>…</font>
  2. Mensetting ukuran font
    menggunakan atribut size, contoh: <font size=”10″>…</font>
  3. Mengubah warna font
    menggunakan atribut color, contoh: <font color=”RED”>…</font>.
    Ada dua cara dalam menentukan warna font, yaitu dengan menyebut warna langsung seperti diatas atau dengan menyebut kode heksa warna seperti contoh berikut: <font color=”#FF0000″>…</font>

Contoh penggunaan tag <font> dengan satu atribut :

 <font face="arial">  
 <font size="5">Ini adalah font arial size 5 tanpa set warna<br/>  
 <font color="red">Ini adalah font arialsize 5 dengan set warna merah</font>  
 </font>  
 </font>

Contoh penggunaan tag <font> dengan bayak atribut sekaligus :

 <font face="Courier" size="10" color="blue">Teks Biru ukuran 10 Courier</font>

Tag html untuk membuat list teks tanpa order (bullet)

Berfungsi menata sekumpulan teks menurut list tertentu tanpa urutan pasti. Tag ini mirip fitur bullet pada microsoft word. Tag yang digunakan adalah <ul> yang merupakan singkatan dari unorder list. Secara default, tampilan list akan berbentuk bulat hitam.
Untuk menambah list cukup dengan menambahkan tag <li>…</li> diantara <ul>…</ul> sesuai dengan jumlah list yang diinginkan.

Contoh penggunaan tag <ul>:

 <ul>  
 <li>ini unorder list ke-1</li>  
 <li>ini unorder list ke-2</li>  
 <li>ini unorder list ke-3</li>  
 </ul>

Tag html untuk membuat list teks dengan order (numbering)

Berfungsi menata sekumpulan teks menurut list tertentu dengan urutan yang pasti.Tag ini mirip dengan fitur numbering pada microsoft word. Tag yang digunakan adalah <ol> yang merupakan singkatan dari order list. Secara default tampilan list akan berupa angka urut mulai dari 1.
Sama seperti tag <ul> untuk menambah list dilakukan dengan menyisipkan tag <li>…</li> diantara <ol>…</ol> sejumlah list yang diinginkan.

Contoh penggunaan tag <ol> :

 <ol>  
 <li>ini order list ke-1</li>  
 <li>ini order list ke-2</li>  
 <li>ini order list ke-3</li>  
 </ol>

Contoh rangkuman semua script formatting HTML :

 <!DOCTYPE html>  
 <html>  
 <head>  
 <title>Belajar Formatting Teks pada HTML</title>  
 <body>  
  <b>Teks dicetak tebal</b> <br/>  
  <strong>Ini juda dicetak tebal</strong>  <br/>  
  <i>Teks dicetak miring</i>  <br/>  
  <em>Ini juga dicetak miring</em>  <br/>  
  <u>Teks digaris bawahi</u>  <br/>  
  <ins>Ini juga teks digaris bawahi</ins>  <br/>  
  <sub>Teks cetak lebih rendah</sub>  <br/>  
  <sup>Teks cetak lebih tinggi</sup>  <br/>  
  <del>Teks cetak dicoret</del>  <br/>  
  <font face="Courier" size="10" color="blue">Teks Biru ukuran 10 Courier</font>   
  <ul>   
  <li>ini unorder list ke-1</li>   
  <li>ini unorder list ke-2</li>   
  <li>ini unorder list ke-3</li>   
  </ul>   
  <ol>   
  <li>ini order list ke-1</li>   
  <li>ini order list ke-2</li>   
  <li>ini order list ke-3</li>   
  </ol>   
 </body>  
 </html>

Tampilan tag formatting html diatas pada browser :

Referensi :

Mengatur Tata Letak Teks Pada HTML

By

Tampilan halaman website pada browser pada dasarnya bisa dibuat seperti saat kita membuat surat atau dokumen pada microsoft word. Setiap halaman mempunyai judul dan isi, lalu pada isi terdapat paragraf dan didalam paragraf terdapat baris demi baris kalimat. Pada HTML masing-masing bagian ini mempunyai tag sendiri-sendiri, misalnya tag heading seperti h1, h2, dst dipakai untuk judul dan sub judul. Kemudian tag p dipakai untuk membuat paragraf dan tag br dipakai untuk membuat baris baru.

1. Membuat judul pada HTML dengan Tag HEADING <h1>…</h1>

Dalam setiap artikel atau dokumen tentu diperlukan sebuah judul. Ukuran font judul ini harus tampak lebih besar dari teks yang lain. Secara umum judul dibuat dengan tag <h1>. Jika dibutuhkan sub judul didalam artikel maka dipakai tag <h2>, <h3> dan seterusnya sampai <h6>. Perlu digaris bawahi bahwa judul atau heading ini tidak sama dengan title yang menggunakan tag <title> karena title akan muncul pada title window dan tidak berasa pada halaman isi.
Meski terlihat bahwa heading tampak membuat font menjadi lebih besar namun tidak disarankan menggunakan heading untuk sekedar memperbesar ukuran teks. Hal ini dikarenakan heading juga merupakan alat search engine dalam mengindeks sebuah halaman website.

Contoh script membuat judul dalam HTML dengan <h1> sampai <h6>

 <!DOCTYPE html>  
 <html>  
 <head>  
 <title>Belajar HEADING HTML</title>  
 <body>  
 <h1>HEADING TINGKAT 1</h1>  
 <h2>HEADING TINGKAT 2</h2>  
 <h3>HEADING TINGKAT 3</h3>  
 <h4>HEADING TINGKAT 4</h4>  
 <h5>HEADING TINGKAT 5</h5>  
 <h6>HEADING TINGKAT 6</h6>  
 </body>  
 </html>

Dan berikut ini tampilan heading pada browser

2. Membuat paragraf pada HTML dengan tag <p>…</p>

Setelah judul kemudian kita masuk pada seksi pembuatan paragraf atau alinea. paragraf adalah rangkaian kalimat yang tersusun dari beberapa kata sehingga mempunyai makna tertentu. penulisan paragraf dimaksudkan untuk memudahkan pembaca dalam menangkap maksud atau gagasan utama dari penulis. Setiap paragraf terpisah oleh jarak yang lebih lebar dibandingkan dengan jarak setiap baris.
Untuk menandai setiap paragraf dalam HTML dipakai tag <p>…</p>. Jadi teks-teks dalam satu paragraf harus diletakkan diantara tag tersebut. Secara default paragraf dibuat rata kiri dan untuk membuatnya menjadi rata tengah atau rata kanan dapat dipakai atribut ALIGN.

Contoh script membuat paragraf dalam HTML

 <!DOCTYPE html>  
 <html>  
 <head>  
 <title>Belajar PARAGRAF HTML</title>  
 <body>  
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>  
 <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.  
 </p>  
 </body>  
 </html>

Dan berikut ini tampilan paragraf pada browser

3. Membuat baris baru pada HTML dengan tag <br>

Dalam sebuah artikel kadang dibutuhkan mambuat baris baru namun masih dalam satu paragraf. Untuk itu dipakai tag <br> yang merupakan singkatan dari begin row. Tag <br> akan membuat teks setelah tag ditulis pada baris baru tanpa memberi ruang kosong seperti tag <p>. Tag <br> dalam keseharian mengetik mirip dengan tombol Enter.

4. Membuat garis pemisah pada HTML dengan tag <hr>

Selain tag <br> mengganti baris juga bisa dilakukan dengan tag <hr>, bedanya jika menggunakan tag <hr> maka diatas baris baru akan ditampilkan sebuah garis horisontal sebagai pemisah. Tag <hr> merupakan singkatan dari horizontal rule.

5. Membuat kutipan teks pada HTML dengan tag <blockquote>

Dengan tag <blockquote> maka teks akan dibuat agak menjorok kedalam. Tag ini digunakan untuk menampilkan kutipan atau catatan tertentu dalam sebuah artikel.

Contoh script HTML dengan tag <h1>, <p>, <br>, <hr> dan <blockquote>

 <!DOCTYPE html>  
 <html>  
 <head>  
 <title>Belajar tag HTML p, br, hr dan blockquote</title>  
 <body>  
 <h1>judul artikel</h1>  
 <hr>  
 <p>Ini adalah baris pertama paragraf pertama.<br>  
 Ini adalah baris kedua paragraf pertama.  
 </p>  
 <p>Ini adalah kalimat pertama paragraf kedua.  
 Ini adalah kalimat kedua paragraf kedua tanpa membuat baris baru  
 <blockquote>Ini adalah catatan khusus yang terdapat pada paragraf kedua</blockquote>  
 </p>  
 <p>Ini adalah paragraf ketiga</p>  
 </body>  
 </html>

Dan berikut ini tampilan script diatas pada browser

Referensi :