Jumat, 20 Maret 2015

Membuat Tabel HTML

07.54 No comments
Assalamu'alaikum semuanya, kembali lagi dengan saya. Kali ini saya akan memberikan sedikit materi tentang membuat tabel pada HTML.
Pertama yang harus diketahui, apakah fungsi dari sebuah tabel ?
Fungsi tabel adalah :
1. Menampilkan informasi secara terstruktur, ringkas, dan mudah dibaca.
2. Mengatur tampilan homepage agar lebih menarik.
Tabel juga membutuhkan atribut-atribut untuk memperlengkap atau untuk mengatur tabel itu sendiri.
Dibawah ini merupakan atribut-atribut dari tabel :

Tag tabel ditandai dengan tanda <table> pada awal dan diakhiri dengan tanda </table>.
Tabel juga merupakan perpaduan antara baris dan kolom. Artinya didalam tabel harus ada baris dan kolom.
Tag yang diperlukan untuk membuat baris dan kolom adalah :
  • Tag membuat baris <tr> (table row)
  • Tag membuat kolom <td> <table data>
Dan dibawah ini contoh script sederhananya gan :

<html>
<head>
<title>Tabel Sederhana</title>
</head>
<body>
<table border = "1">
<tr>
<td>Baris 1 Sel 1</td>
<td>Baris 1 Sel 2</td>
</tr>
<tr>
<td>Baris 2 Sel 1</td>
<td>Baris 2 Sel 2</td>
</tr>
</table>
</body>
</html>

Dan dibawah ini merupakan gambar atau hasil dari script diatas :


  • Menambahkan Judul Pada Tabel

Judul pada tabel diatandai dengan tanda <caption>, sedangkan judul pada baris dan kolom ditandai dengan tanda <th> (table header).
Langsung saja ya gan, tanpa basa basi ini saya beri scriptnya :

<html>
<head>
<title>Menambahkan Judul Tabel</title>
</head>
<body>
<table border = "1">
<caption align = "top"><b>DAFTAR MAHASISWA</b></caption>
<tr>
<th>N0</th>
<th>NPM</th>
<th>Nama</th>
</tr>
<tr>
<td>1</td>
<td>06.100.001</td>
<td>Amin A. Angkasa</td>
</tr>
<tr>
<td>2</td>
<td>06.100.002</td>
<td>Beni B. Bernardi</td>
</tr>
</table>
</body>
</html>

Dan ini gambar dari hasil script diatas gan :

 

  • Mengatur Lebar dan Tinggi Tabel

Atribut yang digunakan dalam mengatur lebar dan tinggi tabel adalah width dan height.
Bentuk nilai yang digunakan adalah persen ataupun pixel.
Ini contoh scriptnya :

<html>
<head>
<title>Menambahkan Judul Tabel</title>
</head>
<body>
<table border = "1" width = "50%">
<caption align = "top"><b>DAFTAR MAHASISWA</b></caption>
<tr>
<th>N0</th>
<th>NPM</th>
<th>Nama</th>
</tr>
<tr>
<td width = "20">1</td>
<td width = "80" height = "50">06.100.001</td>
<td width = "180" height = "50">Amin A. Angkasa</td>
</tr>
<tr>
<td width = "20">2</td>
<td width = "80" height = "70">06.100.002</td>
<td width = "180" height = "70">Beni B. Bernardi</td>
</tr>
</table>
</body>
</html>

Dan dibawah ini gambar dari script diatas :


  • Memberi Warna Pada Tabel

Atribut yang digunakan untuk memberi warna pada tabel adalah BGcolor.
Langsung saja ya gan, saya akan memberikan contoh scriptnya :

<html>
<head>
<title>Memberi Warna Pada Tabel</title>
</head>
<body BGcolor = "purple">
<table border = "2" BGcolor = "white" align = "center">
<caption align = "bottom"><b>DAFTAR MAHASISWA</b></caption>
<tr BGcolor = "yellow">
<th>N0</th>
<th>NPM</th>
<th>Nama</th>
</tr>
<tr BGcolor = "cyan">
<td width = "20">1</td>
<td width = "80" height = "50">06.100.001</td>
<td width = "180" height = "50">Amin A. Angkasa</td>
</tr>
<tr>
<td BGcolor = "blue" width = "20">2</td>
<td BGcolor = "red" width = "80" height = "70">06.100.002</td>
<td BGcolor = "green" width = "180" height = "70">Beni B. Bernardi</td>
</tr>
</table>
</body>
</html>

Dan dibawah ini gambar dari script diatas gan :



  • Menggabungkan Baris dan Kolom
Menggabungkan beberapa baris dan kolom mempunyai atribut sendiri-sendiri.
Atribut yang menggabungkan beberapa baris menjadi satu adalah rowspan sedangkan atribut yang menggabungkan beberapa kolom menjadi satu adalah colspan.
Ini contoh scriptnya gan :

<html>
<head>
<title>Menggabungkan Baris dan Kolom</title>
</head>
<body>
<table border = "1" BGcolor = "white" align = "center" cellpadding = "10" cellspacing = "12">
<caption align = "top">
<b>Tabel Daftar Nilai Mahasiswa</b>
</caption>
<tr BGcolor = "gray">
<th rowspan = "2">No</th>
<th rowspan = "2">NPM</th>
<th rowspan = "2">Nama</th>
<th colspan = "2">Nilai</th>   
</tr>
<tr BGcolor = "gray">
<th>UTS</th><th>UAS</th>
</tr>
<tr>
<td align = "center" width = "20">1</td>
<td align = "left" valign = "middle" width = "80" height = "40">06.100.001</td>
<td align = "left" valign = "middle" width = "180" height = "40">Amin A. Angkasa</td>
<td align = "center" valign = "middle">70</td><td align = "center" valign = "middle">80</td>
</tr>
<tr>
<td align = "center" width = "20">2</td>
<td align = "left" valign = "middle" width = "80" height = "40">06.100.001</td>
<td align = "left" valign = "middle" width = "180" height = "40">Beni B. Bernardi</td>
<td align = "center" valign = "middle">70</td><td align = "center" valign = "middle">80</td>
</tr>
</table>
</body>
</html>

Dan ini gambar dari script diatas :



Selamat mencoba ya gan. Saya minta maaf jika ada kata-kata yang tidak sopan dalam blog saya.
Saya hanya menyampaikan apa yang sudah saya alami sebelumnya.
Sekali lagi, jika ada kata-kata yang salah, tidak sopan, atau pun artikel yang saya tulis tidak lengkap, saya minta maaf sebesar-besarnya.
Read More

Senin, 09 Februari 2015

Tag Untuk HTML

07.22 No comments
Semangat Pagi Indonesia. Semangat pagi harus ada pada diri kita setiap waktu gan. Biar kita selalu semangat untuk menjalani kehidupan sehari-hari.
o ya gan, langsung saja. Saya akan memberikan beberapa contoh tag-tag dalam HTML.
Sebelumnya membahas fungsinya tag sedikit gan.
Fungsi dari Tag itu digunakan untuk menentukan tingkah laku web browser.
Tag dinyatakan dengan tanda lebih kecil "<" (dibagian awal) dan tanda lebih besar ">" (dibagian akhir).

Beberapa tag-tag dalam HTML :
  1. Tag untuk format HTML
  2. Tag Heading
  3. Tag Paragraf
  4. Tag Memformat Dokumen
  5. Tag Break
  6. Tag Garis Pemisah Horisontal
  7. Tag Font
  8. Tag Link
  9. Tag Membuat Gambar
  10. Tag Warna Background
  11. Tag List

1. Tag Untuk Format HTML

    Dokumen HTML dimulain dengan <html> dan di akhiri dengan </html>.
    Secara umum isi dokumen HTML terdiri dari head dan body.
    Langsung saja gan, ini contoh scriptnya :

    <html>
    <head>
    <title>Belajar HTML</title>
    </head>
    <body>
    Saya Belajar HTML
    </body>
    </html> 
    Keterangan :
    • Didalam dokumen HTML terdapat <head></head> itu merupakan kepala dari sebuah dokumen.
    • Dan didalam head terdapat <title><title> itu mrupakan judul dari sebuah dokumen HTML.
    • Dan ada juga <body></body> yang fungsinya untuk menuliskan isi yang anda inginkan.
    Dan dibawah ini merupakan outputan dari script diatas.
     gambar disamping merupakan judul dokumen HTML yang berada didalam <title></title>

    dan gambar disamping merupakan outputan dari dokumen HTML.



    2. Tag Untuk Heading

    Tag untuk heading biasa difungsikan sebagai penulisan judul pada dokumen HTML.
    Langsung saja, saya akan memberikan contoh script dari Tag Heading.
    Dalam penulisan heading terdapat heading 1 sampai heading 6. Dimulai dari heading 1 yang paling besar sampai heading 6 yang paling kecil.
    Penulisan heading berupa <h1>, <h2>, <h3>, ... , <h6> (penulisan diawal) dan penulisan heading berupa </h1>, </h2>, </h3>, ..., </h6> (penulisan di akhir atau penutup).

    <html>
    <head>
    <title>Contoh Heading</title>
    </head>
    <body>
    <h1 align = "center">Heading1 : HTML</h1>
    <h2 align = "center">Heading2 : HTML</h2>
    <h3 align = "center">Heading3 : HTML</h3>
    <h4 align = "center">Heading4 : HTML</h4>
    <h5 align = "center">Heading5 : HTML</h5>
    <h6 align = "center">Heading6 : HTML</h6>
    </body>
    </html>

    Dan dibawah ini merupakan gambar outputan dari script diatas.


    3. Tag Untuk Paragaraf

    Tag untuk paragraf sama halnya menulis seperti paragraf biasanya.
    Untuk peunlisan tag paragraf dimulai dari <p> dan berakhir </p>.
    Dan untuk perataan paragraf sama seperti dengan apa yang ada pada dalam Ms. Office Word (rata kanan "right", rata kiri "left", dan rata tengah "center").
    Langsung saja, dibawah ini saya akan memberikan contoh script dari tag paragraf.

    <html>
    <head>
    <title>Contoh Paragraf</title>
    </head>
    <body>
    <p align = "right">Belajar Untuk Membuat Paragraf</p>
    <p align = "left">Belajar Untuk Membuat Paragraf</p>
    <p align = "center">Belajar Untuk Membuat Paragraf</p>
    </body>
    </html>

    Dan gambar dibawah ini merupakan outputan dari script diatas.


    4. Tag Untuk Memformat Dokumen

    Tag untuk memformat dokumen ini sama halnya seperti mengatur model teks pada Micosoft Office Word.
    Contohnya seperti bold untuk mempertebal huruf atau teks. Model Bold diawali dengan tanda <b> dan diakhiri dengan tanda </b>.
    Italic untuk huruf atau teks miring. Model Italic diawali dengan tanda <i> dan diakhiri dengan tanda </i>.
    Superscripted untuk huruf atau teks seperti pangkat. Model Superscripted diawali dengan tanda <sup> dan diakhiri dengan tanda </sup>.
    Subscripted kebalikan dari Superscripted. Untuk Superscipted seperti pangkat diatas, sedangkan Subscripted untuk pangkat dibawah. Model Subscripted diawali dengan tanda <sub> dan diakhiri dengan tanda </sub>.
    Struckthrough untuk huruf atau teks seperti hurufnya dicoret. Model Struckthrough diawali dengan tanda <del> dan diakhiri dengan tanda </del>.
    Langsung saja gan, saya akan memberikan contoh scriptnya dibawah.

    <html>
     <head>
    <title>Contoh Memformat Dokumen</title>
    </head>
    <body>
    <p>Contoh<b> Untuk Huruf Tebal</b></p>
    <p>Contoh<i> Untuk Huruf Miring</i></p>
    <p>Contoh<sup> Untuk Huruf Pangkat diatas</sup></p>
    <p>Contoh<sub> Untuk Huruf Pangkat dibawah</sub></p>
    <p>Contoh<del> Untuk Huruf Seperti dicoret</del></p>
    </body>
    </html>

    Dan gambar dibawah ini merupakan outputan dari script diatas.

     

    5. Tag Break

    Tag untuk Break ini fungsinya sama seperti tombol Enter yaitu untuk pindah baris dibawahnya.
    Tanda dari tag break adalah <br/>.
    Langsung saja ya gan ini scriptnya.

    <html>
    <head>
    <title>Coba Break</title>
    </head>
    <body>
    Nama Saya Budi<br/>
    Saya 2 Barsaudara<br/>
    Cita-cita saya ingin menjadi programmer<br/>  
    </body>
    </html>

    Dan ini langsung saja gambar outputannya.


    6. Tag Garis Pemisah Horisontal

    Tag garis pemisah horisontal sama halnya dengan garis pemisah.
    Tag ini ditandai dengan tanda <hr/> pada akhir kita menulis kata-kata pada script yang kita tulis.
    Langsung saja, dibawah ini contoh scriptnya :

    <html>
    <head>
    <title>Tag Garis Pemisah Horisontal</title>
    </head>
    <body>
    <p>Nama Saya Budi</p><hr/>
    <p>Ibu Saya Ibu Budi</p><hr/>
    <p>Bapak Saya Bapak Budi</p>
    </body>
    </html>
    Dan dibawah ini merupakan gambar outputan dari script diatas :


    7. Tag Font

    Tag Font merupakan suatu format untuk tulisan. Mulai dari ukuran(size), model(face),
    dan warna(color).
    Tag font ditandai dengan tanda <font> pada awal script dan </font> pada akhir script.
    Didalam script font kita dapat menuliskan ukuran, model dan color.
    Contoh Penulisannya :
    <font face = "nama untuk pemodelan tulisan" size = "ukuran tulisan" color = "warna tulisan">Apa Yang Anda Pikirkan ?</font>
    Lanhsung saja, dibawah ini merupakan contoh script dari tag font :

    <html>
    <head>
    <title>Tag Font</title>
    </head>
    <body>
    <font>Nama Saya Budi</font><br/>
    <font size = "7px">Nama Saya Budi</font><br/>
    <font face = "algerian">Nama Saya Budi</font><br/>
    <font color = "red">Nama Saya Budi</font><br/>
    <font size = "7px" face = "algerian" color = "red">Nama Saya Budi</font>
    </body>
    </html>
    Dan dibawah ini merupakan gambar outputan dari script diatas.

     

    8. Tag Link

    Tag Link merupakan tag yang berfungsi untuk memindahkan halaman web satu ke halaman web yang lain.
    Tag Link ditandai dengan tanda <a href = "nama_link">...</link>.
    Tag Link merupakan tulisan yang bergaris bawah.
    nama_link merupakan alamat html ataupun alamat web.
    Dan Link ini berfungsi untuk adanya keterkaitan antara halaman web satu dengan halaman web yang lain.
    Dan juga html satu dengan html yang lain. Jika foldernya berupa html, html satu dan html yang lainnnya harus bertempat pada folder yang sama.
    Lansung saja dibawah ini merupakan contoh scriptnya :
    HTML 1.

    <html>
    <head>
    <title>Tag Link HTML 1</title>
    <head>
    <body>
    <h2><a href = "menuju_html2.html">Menuju Ke HTML 2</a></h2>
    </body>
    </html>
    Dan dibawah ini merupakan hasil gambar dari script html 1.


    Dan script dalam HTML 2 merupakan hasil dari link script HTML 1.
    Script HTML 2 bisa ditulis script yang lain.
    HTML 2

    <html>
    <head>
    <title>Tag Link HTML 2</title>
    </head>
    <body>
    <p>Hasil dari HTML 1</p>
    </body>
    </html>
    Dan dibawah ini merupakan hasil gambar dari script html 2.

     

    9. Tag Membuat Gambar

    Tag membuat gambar ini berfungsi untuk menampilkan gambar pada halaman web.
    Gambar yang bisa ditampilkan berupa gambar yang berformat jpg, png, gif.
    Tag membuat gambar ditandai dengan tanda atau script <img src  = "nama gambar dan formatnya" width = "ukuran panjang gambar" height = "ukuran tinggi gambar">.
    Dan gambar yang ditampilkan harus satu folder dengan script htmlnya.
    Langsung saja, dibawah ini contoh scriptnya :

    <html>
    <head>
     <title>Membuat Gambar</title>
    </head>
    <body>
     <p>Ini gambar yang saya buat</p><br/>
    <img src = "gambar.jpg" width = "100" height = "100">
    </body>
    </html>
    Dan ini gambar dari script diatas.

    10. Tag Warna Background

    Tag warna background ini berfungsi untuk mengganti warna background sesuka anda.
    Script untuk tag background ini dituliskan bersamaan script <body> pada awal dan ditambahi BGcolor untuk cuma mengganti warna bankground dan Background untuk mengganti background dengan gambar.
    Contohnya <body BGcolor = "nama warna gambar"> dan <body background = "nama gambar untuk mengganti background">
    Langsung saja, ini scriptnya :

    <html>
    <head>
    <title>Warna Background</title>
    </head>
    <body BGcolor = blue>
    Ini merupakan warna untuk backgroundnya ...
    </body>
    </html>
    Dan ini gambar dari script diatas :


    11. Tag List

    List dalam HTML ada dua :
    a. Unordered List
    b. Ordered List
    Unordered List
    Unordered list adalah list yang menggunakan bullet sebagai tanda point.
    Unordered list ditandai dengan tanda <ul> pada awal dan tanda </ul> pada akhir.
    Dan didalam tanda <ul> ada tanda <li></li>. Dan didalam tanda <li></li> terdapat tulisan yang ingin kita tulis.
    Langsung saja, dibawah ini merupakan contoh scriptnya :

    <html>
    <head>
    <title>Unordered List</title>
    </head>
    <body>
    <p>Contoh Unordered List</p>
    <ul>
    <li>apples</li>
    <li>bananas</li>
    <li>grapefruit</li>
    </ul>
    </body>
    </html>
    Dan dibawah ini gambar dari script diatas.



    Oredered List
    Ordered list adalah list yang menggunakan angka untuk tanda point.
    Penulisan ordered list sama halnya dengan penulisan unordered list,
    tapi yang membedakan cuma penulisan <ul></ul> diganti dengan <ol></ol>.
    Ini contoh scriptnya :

    <html>
    <head>
    <title>Ordered List</title>
    </head>
    <body>
    <p>Contoh Ordered List</p>
    <ol>
    <li>oranges</li>
    <li>peaches</li>
    <li>grapes</li>
    </ol>
    </body>
    </html>
    Dan ini gambar dari script diatas.


    Selamat mencoba ya gan. Saya minta maaf jika ada kata-kata yang tidak sopan dalam blog saya.
    Saya hanya menyampaikan apa yang sudah saya alami sebelumnya.
    Sekali lagi, jika ada kata-kata yang salah, tidak sopan, atau pun artikel yang saya tulis tidak lengkap, saya minta maaf sebesar-besarnya.
    Read More

    Pengertian HTML

    06.37 No comments
    Hai gan, yang baru mengenal apa itu HTML, blog saya ini akan sedikit membantu menjelaskan tentang apa itu HTML.
    HTML (Hypertext Markup Language) merupakan standard bahasa yang digunakan untuk menampilkan dokumen web.
    Untuk membuat dokumen web yang bisa ditampilkan di browser, perlu menuliskan kode HTML baik secara langsung. Misalkan pada software Notepad atau Notepad++. Maupun secara tidak langsung melalui software Frontpage.



    Software yang perlu digunakan :
    1. Text Editor
    contoh :
    • untuk Windows bisa menggunakan Notepad atau Notepad++.
    • untuk Linux bisa menggunakan Bluefish, gEdit, mcedit, pico, dll.
    2. Web Browser untuk menampilkan dokumen web yang sudah dibuat
    contoh :
    • untuk Windows bisa menggunakan Internet Explorer, Opera, dan Firefox.
    • untuk Linux bisa mengguanakan Firefox dan Conqueror.
    Read More
    Langganan: Postingan (Atom)
    Subscribe to RSS Feed Follow me on Twitter!