Flamingo Solution: HTML

Showing posts with label HTML. Show all posts

Friday, April 3, 2015

Dasar HTML Membuat Tabel

Kesempatan kali ini blog membahas yaitu cara membuat tabel di HTML, kegunaanya tentu sangat penting seperti contoh ingin membuat Form, tampilan sebuah database, atau untuk data data perbandingan, dll. Biasanya untuk penggunaan dalam membuat tabel akan lebih dipermudah jika menggunakan Aplikasi Dreamweaver (Adobe/ Macromedia) yaitu langsung dari tahap desainnya.

Namun perlu diketahui bahwa untuk awal, kamu juga harus perlu mengetahui dasar membuat tabel sederhana dengan menggunakan tool biasa (NOTEPAD).

Hal ini ditujukan agar dapat paham konteks, bentuk Tag yang dipakai dalam membuat tabel.

NB. Maka dalam pembahasan kali ini pun kita tetap menggunakan Notepad.

Tentu dalam tabel dalam tabel ada "baris" dan "kolom".

Berikut Tag membuat Tabel adalah <table> </table>

Penulisan Tag tabel berada di antara <body> seperti ini

<body>

<table>

</table>

</body>

Namun Bentuk diatas belumlah cukup, yang mana tag <table> masih hanya membuat garis kosong.

Sedangkan Tag membuat Baris adalah <tr> </tr>
Penulisan Tag Baris berada diantara tag <table>

<table>
<tr>
</tr>
</table>

Dan Tag membuat Kolom adalah <td> </td>
Penulisan Tag Kolom berada di dalam antara tag baris <tr>

Contoh Kolom 1.
<table>
                    <tr>
       <td>ISI KOLOM</td>
                    </tr>
</table>

Sehingga secara otomatis jika kita ingin membuat tabel berisi 2 kolom akan seperti ini

Contoh Kolom 2

<table>
<tr>
<td>ISI KOLOM</td>

<td>ISI KOLOM</td>

</tr>
</table>

Kode diatas adalah sebuah tabel yang berisi dua kolom seperti gambar dibawah ini

Jika ingin menambahkan baris kebawah berarti kita harus duplikasi tag <tr> tersebut seperti ini ;

<table>
<tr>
<td>ISI KOLOM</td>

<td>ISI KOLOM</td>

</tr>

                         <tr>
              <td>ISI KOLOM</td>
                                <td>ISI KOLOM</td>

</tr>

</table>

Sehingga menghasilkan seperti ini ;

Demikian selanjutnya jika ingin menambah baris dan kolom misalknya 8 Baris 2 kolom,

lakukan duplikat tag <tr> baris sebanyak 8 kali,
dan setiap 1 tag <tr> berisi 2 duplikat tag kolom <td>

Bagaimana sobat kira kira paham kan.. (hehe)

Attribut Attribut Dalam Tag Tabel Dalam tabel penggunaan Attribut berfungsi disaat seperti colntoh kita ingin memperlebar ukuran Kolom, mengganti latar tabel. Berikut attribut nya ;

Untuk mengatur lebar kolom colspan = " "
Untuk mengatur jarang antar cell cellspacing =""
Mengatur jarak pinggiran Bingkai dengan isi cellpadding =""
Mengatur latar Tabel Background =""

Sehingga Penulisan dalam Html demikian ;

<html>

<head>
   <title>Untitled Document</title>
</head>

        <body>
           <table width="200" border="1">
                <tr>
                      <td colspan="50">ISI</td>
                       <td>ISI</td>
                </tr>
    <tr>
      <td cellspacing="30">ISI</td>
                       <td>ISI</td>
  </tr>
           </table>
        </body>
</html>

Penjelasannya demikian :
1. Attribut yang ada pada kode tag <table> yaitu
     width="200" berfungsi untuk menambah lebar bingkai tabel
     border="1" berfungsi untuk menambah ketebalan Garis Bingkai agar lebih terlihat jelas

2. Attribut yang ada pada kode tag <td> (kolom) yaitu
   colspand="50" berfungsi untuk mengatur lebar pada kolom
   cellspacing="30" berfungsi mengatur jarak antar cell

demikian selanjutnya sehingga menghasilkan tabel seperti dibawah

Sekian mengenai cara Membuat Tabel dengan Tools sederhana, untuk postingan pembahasan selanjutnya akan segera ditambahkan di kotak komentar, atau klik Halaman Kategori DESAIN WEB diatas. Semoga Bermanfaat, dan dapat menambah refrensi kamu sobat, Terima kasih telah berkunjung.

Salam BLogger.

Klik Like atau bagikan ke teman yang ingin belajar HTML. Silahkan tinggalkan komentar jika ada yang sulit dipahami.

By: Utomo19 On 9:53:00 PM

Dasar HTML 2 | Membuat Judul Attribut dan Paragraf

Kesempatan kali ini Blog ingin melanjutkan postingan terdahulu/sebelumnya yaitu "Belajar Dasar Membuat HTML" . Dalam Postingan terakhir kita sudah sampai pada pembahasan /membuat HTML dasar biasa , dimana hanya menampilkan text dengan Format biasa, namun seperti halnya di aplikasi Tulis menulis seperti MS.WORD, dalam HTML juga berlaku hal yang namanya permak -permak, atau mempercantik tampilan, baik dari segi Font, Latar, dll,
Hal itu bisa kita lakukan melalui Penerapan/ variasi pada Kode <Tag> atau Attribut pada Tag .

Sebelumnya pembahasan kita sudah sampai pada pembuatan html sederhana dibawah ini, yang mana dibuat dalam notepad dan disimpan dalam format .html

<html>
              <head>
                      <title> Belajar HTML </title>
              </head>
                                  <body bgcolor="Yellow">
                                    BELAJAR HTML Bersama
                                   </body>
</html>

Berikut Keterangannya :

Merah : Adalah tag (yang mana memiliki Pembuka dan Penutup) NB; perhatikan Tag yang saling berpasangan

Biru : Adalah Attribut ( berguna untuk menambah fungsi suatu Elemen/Merubah Latar)

Orange : ELEMEN (Isi dari TAG/ yang diapit oleh Tag)

Dalam Tag ada Attribut yang dapat menambah Fungsi Elemen yang ada didalamnya
yaitu dengan menambah beberapa Atribut seperti dibawah ini;
Contohnya Merubah FONT                    : <font face="arial">

   Mewarnai FONT                 : <style="color:#0F6"> (untuk warna diawali # )
                   Membuat Text Rata Tengah : <align="center">
   Membuat Text Rata Kiri      : <align="left">
   Mengganti Warna FONT     : <color="RED">
                   Membuat Latar Halaman     : <bgcolor="Yellow">

Sehingga Jika mencoba menerapkan beberapa attribu HTML menjadi seperti dibawah ini :

<html>
              <head>
                      <title> Belajar HTML </title>
              </head>
                                  <body bgcolor="Yellow">
                                    <a style="color:#F00">BELAJAR HTML Bersama</a>
                                   </body>
</html>

Kode Attribut yang biru (bgcolor="Yellow")berfungsi untuk membuat membuat latar menjadi warna KUNING.

Kode attribut biru (style="color:#F00") berfungsi untuk membuat Teks "Belajar HTML Bersama menjadi berwarna Merah"

(Klik Perbesar)

"PEMBUATAN JUDUL"
Dalam Pembuatan Judul ada hingga 6 (Heading & SubHeading) Yaitu ;

<h1>Judul Halaman</h1>

<h2>Judul Halaman</h2>

<h3>Judul Halaman</h3>

<h4>Judul Halaman</h4>

<h5>Judul Halaman</h5>

<h6>Judul Halaman</h6>

Sehingga diterapkan dalam sebuah HTML menjadi seperti ini ;

<html>
              <head>
                      <title> Belajar HTML </title>
              </head>
                                  <body bgcolor="Yellow">
                                    BELAJAR HTML Bersama

                        <h1>Judul Halaman</h1>

                        <h2>Judul Halaman</h2>

                        <h3>Judul Halaman</h3>

                        <h4>Judul Halaman</h4>

                        <h5>Judul Halaman</h5>

                         <h6>Judul Halaman</h6>

                                    </body>
</html>

tampilannya setelah disimpan kira kira seperti ini (Klik untuk memperbesar)

Sehingga bisa kita rangkum bahwa H1 adalah ukuran paling besar, hingga H6 maka jenis judul akan semakin mengecil

Namun dalam Tag Judul <h1> tersebut kita juga bisa menambahkan attribut attribut diatas sebelumnya menjadi seperti dibawah ini ;

<html>
              <head>
                      <title> Belajar HTML </title>
              </head>
                                  <body bgcolor="RED">
                                    BELAJAR HTML Bersama

                        <h1 align="Center">Judul Halaman</h1>

                        <h2 align="right">Judul Halaman</h2>

                        </body>

</html>

Tampilannya seperti ini (Klik untuk perbesar)

Disimpulkan bahwa attribut untuk judul H1 berlaku untuk membuat rata tengah, dan attribut pada H2 untuk rata kanan.

Selain membuat judul dalam html berlaku/diperlukan juga peran untuk membuat sebuah paragraf

PARAGRAF (Kode Tag : <p> </p> )

misalkan setelah membuat judul dibawah kamu ingin memasukkan sebuah paragraf,
maka kode tag <p> </p>

Sehingga dalam html diapit seperti ini

<h1> Judul Paragraf </h1>
<p> contoh isi paragraf, contoh isi paragraf, contoh isi paragraf, contoh isi paragraf, contoh isi paragraf, contoh isi paragraf, contoh isi paragraf, contoh isi paragraf, contoh isi paragraf, contoh isi paragraf, contoh isi paragraf, contoh isi paragraf, contoh isi paragraf, contoh isi paragraf, contoh isi paragraf, contoh isi paragraf, contoh isi paragraf, contoh isi paragraf, contoh isi paragraf, contoh isi paragraf, contoh isi paragraf, contoh isi paragraf,</p>

Namun jika kamu ingin memberi warna pada paragraf , mungkin sudah paham kan....??
maka menjadi demikian

<h1> Judul Paragraf </h1>
<p style="color:#F00"> contoh isi paragraf, contoh isi paragraf, contoh isi paragraf, contoh isi paragraf, contoh isi paragraf, contoh isi paragraf, contoh isi paragraf, contoh isi paragraf, contoh isi paragraf, contoh isi paragraf, contoh isi paragraf, contoh isi paragraf, contoh isi paragraf, contoh isi paragraf, contoh isi paragraf, contoh isi paragraf, contoh isi paragraf, contoh isi paragraf, contoh isi paragraf, contoh isi paragraf, contoh isi paragraf, contoh isi paragraf,</p>

Attribut pada tag paragraf tersebut berfungsi untuk mewarnai Paragraf tersebut.

Nah, Sekian untuk ulasan tambahan mengenai " Attribut hingga Membuat Judul Heading & Sub Heading dan Paragraf "

Dalam Postingan Berikutnya Blog akan menjelaskan "Cara Membuat Tabel Dalam HTML". Dan linknya akan Update pada Kotak Komentar.
so... Ditunggu ya...

Jika berkenan silahkan klik tombol like Facebook dibawah ini / share atau bagikan ke teman teman yang juga ingin belajar HTML Bersama, Berbagi itu Banyak Pahalanya Loh..

Trima kasih telah berkunjung, Salam BLogger.

By: Utomo19 On 4:17:00 AM

Thursday, April 2, 2015

Belajar Dasar Membuat HTML

Jika sebelumnya kamu telah membaca Postingan "Belajar Desain Web (Perkenalan HTML)", maka kali ini kita akan mencoba membahas dan praktek yaitu Dasar Membuat HTML.

Untuk Membuat HTML tahap dasar ini kita hanya memerlukan aplikasi bawaan sederahana yaitu "Notepad".
Namun sebelum mencoba alangkah lebih baik untuk menyimak Hal hal penting dibawah ini;

Dalam HTML ada 3 Bagian yang perlu kamu ingat yaitu ;
1. TAG
2. ATTRIBUT
3. ELEMEN

1. Tag
Yaitu Coding berupa bagian elemen dari HTML. Singkatnya HTML berisi sekumpulan tag- tag.

Tag dalam HTML dituliskan dengan Awalan dan Akhirnya (ingat!!)

Contoh :
Awalan / pembukanya <html>
Akhiran/ Penutup </html> "Penutup memakai Slash"

Ada 3 Bentuk Tag Utama (Sebagai Dasar yang perlu diingat!!)

(klik untuk Perbesar)

Nah.. Jadi yang perlu digaris bawahi ;
Pertama : <html> </html> (adalah Badan HTML) berada di awal dan akhiran
Kedua : <head> </head> (adalah Untuk Judul) berada kedua dalam Badan
Ketiga : <body> </body> (adalah untuk Isi) ditengah

NB : Namun tak semua Tag harus memakai akhiran/penutup, akan ada contoh penulisan yang hanya awalan saja, akan dijelaskan.

Salah satuTag tag yang tidak memiliki akhiran/ penutup

1. <br/> (berfungsi untuk menurunkan Tulisan kebawah/ENTER)

2. Attribut
Nah, Attribut adalah Sebuah kode yang berguna untuk menambah fungsi dari Tag itu tadi. Hanya saja codingnya ditambahkan didalam Tag.

Contoh : color="yellow"

Jadi misalkan kita ingin membuat latar halaman berwarna kuning, maka dalam kode Tag <body> ditulis seperti ini;

<body bgcolor = "yellow">

</body>

attribut ini (bgcolor="yellow">) yaitu berfungsi untuk mengubah latar halaman menjadi warna kuning.

Attibut juga berlaku untuk mengganti jenis tulisan pada "Judul "(head) atau " isi" (Body).

untuk mengganti jenis font attributnya seperti berikut

dll.

3. Elemen
Merupakan isi kode tag yang berada diantara tag pembuka dan tag penutup. Element terdiri atas tiga bagian, yaitu tag pembuka, isi, dan tag penutup. Sebagai contoh untuk menampilkan judul dokumen HTML pada web browser digunakan element title.
terkadang banyak yang berpikir bentuk ini sama dengan attribut namun jangan salah paham dulu ya,

elemen bisa kita lihat seperti contoh dibawah

<html>
          <head>
                  <title> Belajar HTML </title>
          </head>
                              <body>
                                BELAJAR HTML Bersama
                               </body>
</html>

Elemen adalah Tulisan berwarna Hitam (berarti berada dalam tag pembuka dan penutup)
Nah, Sekarang kita sudah Paham, Langsung saja silahkan untuk membuka NOTEPAD kamu dan ketikan kode diatas :

Simpan File Namun sebelum menyimpan HARAP PERHATIKAN, Atur type filenya dengan merubah menjadi All Files dan ganti namanya menjadi format .html (jangan lupa titiknya)
lihat contoh dibawah ini.

setelah itu buka lah file yang sudah disimpan tersebut, maka jika format yang disimpan benar, secara otomatis file tersebut akan berekstensi dan akan dibuka oleh browser (ex; firefox).

Cukup Mudah Mudah bukan, sekian postingan kali ini, selanjutnya blog akan menambahkan tutorial lanjutan antara lain: Cara Membuat JUDUL (HEADING & SUB HEADING)

Silahkan Tunggu Updatenya di kotak KOMENTAR (secepatnya)

Terima kasih telah berkunjung, Salam Blogger.

By: Utomo19 On 4:18:00 AM

Friday, April 3, 2015

Dasar HTML Membuat Tabel

Dasar HTML 2 | Membuat Judul Attribut dan Paragraf

Thursday, April 2, 2015

Belajar Dasar Membuat HTML

#Kategori

#Trends

Jasa Design

#Kategori

Artikel Lainnya

Yuk ! Ikuti Fan Page kami

Tentang Kami

Hubungi Kami