Pages

site info

Powered by Blogger.

linx sahabat

Tuesday, 8 August 2017

Cara Membuat Tag Table

Beberapa informasi pada website sering ditampilkan dalam bentuk tabel. Tabel adalah sebuah data tabular dalam bentuk grid yang terdiri atas kolom, baris dan sel yang merupakan pertemuan antara kolom dan baris. Penggunaan tabel tentunya menjadikan informasi lebih ringkas dan padat serta membuat orang mudah membaca dan mengerti informasi yang terkandung didalamnya. Selain itu, tampilan data yang diambil dari database pun akan lebih mudah dibaca dan nyaman dilihat jika menggunakan tabel.

Melihat kegunaan dari tabel tersebut, tentunya Anda juga harus mempelajari bagaimana cara membuat tabel di HTML. Oleh karena itu, pada pembahasan kali ini, saya akan membahas materi cara membuat tabel di HTML. Anda dapat membuat tabel di dokumen HTML menggunakan tag khusus yang sudah disediakan oleh HTML yaitu dimulai dengan pasangan tag <table> ……. </table>.
Penggunaan tabel pada dokumen HTML tidak tepat Anda gunakan untuk mendesain tata letak elemen – elemen dalam sebuah tabel dengan kata lain tidak boleh digunakan untuk layout halaman. Dahulu mungkin sering digunakan untuk mendesain tampilan website, tapi saat ini fungsinya digantikan oleh CSS yang jauh lebih baik dalam hal membuat tampilan website.
Adapun tag – tag umum yang disediakan HTML untuk membuat sebuah tabel antara lain :
Tag Fungsi
table digunakan untuk mendefinisikan sebuah tabel dimana sebuah tabel di HTML.
tr merupakan kepanjangan dari table row yang digunakan untuk mendefinisikan baris – baris pada suatu tabel.
th merupakan kepanjangan dari table header yang digunakan untuk mendefinisikan judul pada sel dalam tabel yang berada di bagian paling atas atau paling kiri tabel. Tabel header berada di bagian atas adalah judul kolom tabel, sedangkan tabel header yang terletak di bagian kiri adalah judul baris tabel.
td merupakan kepanjangan dari table data yang digunakan untuk mendefinisikan isi tiap sel dalam tabel.
Sebuah tabel di HTML dimulai dengan penggunaan tag <tabel> dan diakhiri dengan tag </tabel>. Diantara pasangan tag <tabel> … </tabel>, ditulis tag <tr> untuk membuat baris pada tabel.
Selanjutnya, di masing – masing pasangan tag <tr> …. </tr>, ditulis di dalamnya kolom – kolom menggunakan tag <th> untuk membuat header (induk sel) ataupun tag <td> untuk membuat isi di setiap sel dalam tabel. Berikut contoh kode sederhana membuat tabel di HTML:
<html>
 <head>
 <title>Penggunaan Tabel di HTML</title>
 </head>
 <body>
  <table border="1">
 <tr>
 <th>Nama</th>
 <th>Jurusan</th>
 <th>Kelas</th>
 </tr>
 <tr>
 <td>Muhammad Ridho</td>
 <td>TKJ</td>
 <td>12</td>
 </tr>
 <tr>
 <td>Meilisa Niatur Rahmah</td>
 <td>MM</td>
 <td>11</td>
 </tr>
 <td>Johanes Eko Prasetyo</td>
 <td>RPL</td>
 <td>10</td>
 </tr>
 </table>
 </body>
</html>
Jika dijalankan di browser, tampilannya seperti ini:
tabel sederhana dengan border

Posted by at 0 comments

Cara Membuat Tag Image Html

Penambahan media berupa gambar pada suatu website tentunya akan menciptakan tampilan halaman web yang menarik dan informasi yang disampaikan menjadi lebih informatif. Ada beberapa macam format gambar yang didukung oleh HTML, seperti GIF, PNG, JPG, JPEG, WMF, PCX, BMP, TIFF dan lain sebagainya. Namun, format gambar PNG dan JPG/ JPEG yang paling sering digunakan dan merupakan format yang paling cocok karena dikenali oleh mayoritas browser.
Sebelum Anda memasukkan gambar ke sebuah website, Anda harus mempertimbangkan apakah penempatan gambar tersebut sudah cocok atau malah merusak tampilan dan konten website (tidak sesuai dengan isi website dan menyulitkan pembaca untuk membaca informasi di dalamnya).  Pada materi kali ini, saya tidak hanya menjelaskan mengenai cara menambahkan gambar di HTML melainkan juga menjelaskan bagaimana cara mengatur posisi gambar atau mempercantik gambar dengan bingkai atau garis tepi.

Penggunaan tag <img>

Untuk menambahkan gambar ke HTML, Anda dapat menggunakan tag <img>. Berikut atribut – atribut yang terdapat pada tag <img> :
Atribut Fungsi
src Menunjukkan URL atau direktori lokasi file gambar berada
width Lebar gambar (default : pixel)
height Tinggi gambar (default : pixel)
align Menentukan posisi teks di sekitar gambar
alt Sebagai kata kunci gambar di search engine semisal Google dan menampilkan teks pengganti gambar jika gambar tidak dapat ditampilkan misalnya karena koneksi lambat
title Memberikan keterangan gambar ketika cursor diarahkan ke gambar tersebut
border Memberikan bingkai (garis tepi) pada gambar dengan nilai menggunakan satua pixel (default)
Berikut contoh kode penggunaan tag <img> di HTML:
<html>
<head>
            <title>Cara Menambahkan Gambar di Html</title>
</head>
<body>
            <p>Dibawah ini merupakan gambar pantai:</p>
            <img src="pantai.jpg" alt="gambar pantai">

</body>
</html>

AGAR GAMBAR TAMPIL,FILE HTML HARUS DISIMPAN BERSAMAAN DENGAN GAMBAR KITA.

Ketika kode HTML dijalankan, tampilannya di browser akan seperti ini:

cara menambahkan gambar di html








Posted by





at



0
comments






































Cara Membuat Tag Link Html












Cara Membuat Link di HTML

Sampai disini saya anggap pembaca sudah mengerti atribut-atribut tag 
<a> (anchor link) pada tabel di atas, Berikut ini adalah cara 
penulisan tag <a> untuk membuat link di html.

<a href="link_tujuan">nama link</a>



Untuk lebih lengkapnya penulis akan membuat dua halaman, yaitu 
halaman index.html dan  menu.html dimana kedua halaman tersebut akan 
saling merujuk ke masing-masing halaman, berikut ini adalah susunan 
hirarki halaman, file menu.html di simpan didalam direktori  “menu”.

Cara Membuat Link di HTML

Untuk direktori root dapat menggunakan folder apa saja, karena 
seperti awal pembahasan bahwa html adalah bahasa client-side sehingga 
untuk menjalankannya tidak perlu menggunakan web server. Selanjutnya 
silahkan buka text editor apa saja sesuai keinginan, lalu ketik kode di 
bawah ini dan simpan dengan nama index.html.

<html>

<head>

            <title>Cara Membuat Link di HTML</title>

</head>

<body>

            <h1>Membuat hyperlink di HTML<h1>

            <p>Di bawah ini adalah link yang ditujukanke halaman menu| <a href="menu/menu.html">MENU</a></p>

</body>

</html>

Dari kode di atas maka seharusnya akan tampil seperti gambar di bawah ini.



Cara Membuat Link di HTML









Posted by





at



0
comments






































Cara Membuat Tag list Html












Cara Membuat Daftar/List di HTML



                            

Apa itu Lists dalam HTML?



List merupakan salah satu tag yang dapa digunakan dalam HTML. Tag List sendiir memiliki beberapa jenis, yaitu :


    

  1. Unordered List
    2. 

  2. Ordered List
    3. 

  3. Description List
    4. 







Struktur Dasar Unordered & Ordered List



<ul>

<li>Kopi</li>

<li>Teh</li>

<li>Susu</li>

</ul>


    

  1. Tag <ul> yaitu untuk membuka (mendefinisikan) suatu list pada html.
    2. 

  2. Tag <li> yaitu untuk mendefinisikan sebuah butir list didalam 
sebuah list. Setelah sebuah butir list selesai diikuti dengan menutup 
tag </li>
    3. 

  3. Tag </ul> yaitu untuk menutup suatu list
    4. 




Tag Unordered dan Ordered list bisa dibuat nested (list didalam list), yaitu dengan cara menambahkan tag <ul> sejajar dengan tag <li> didalam suatu list. Contohnya yaitu:



<ul>

<li>Kopi</li>

<li>Teh

<ul>

<li>Teh Hitam</li>

<li>Teh Hijau</li>

</ul>

</li>

<li>Susu</li>

</ul> 



Perbedaan Antara Unordered dengan Ordered List



Yang membedakan antara Unordered dan Ordered 
List yaitu pada bagian atribut. Untuk Unordered memakai atribut style. 
Atribut tersebut bisa diisi dengan value:


    

  1. Bulat (berisi) : list-style-type:disc
    2. 

  2. Lingkaran : list-style-type:circle
    3. 

  3. Kotak : list-style-type:square
    4. 

  4. Kosong : list-style-type:none
    5. 




Untuk Ordered List sendiri memakai atribut type, yang bisa diisi dengan value :


    

  1. Angka : type=”1″
    2. 

  2. Huruf Kapital: type=”A”
    3. 

  3. Huruf Kecil : type=”a”
    4. 

  4. Romawi Besar : type=”I”
    5. 

  5. Romawi Kecil : type=”i”
    6. 




Description List



Description List yaitu sebuah tipe list yang 
dikhususkan untuk mendeskripsikan suatu poin didalam list. Penggunaan 
Description List hampir sama dengan Unordered/Ordered list, hanya saja 
menggunakan tag yang berbeda. Berikut ini cara menulis Description List :



<dl>

<dt>Kopi</dt>

<dd>Sebuah Minuman Hangat yang biasa disajikan saat bekerja</dd>

<dt>Susu</dt>

<dd>Sebuah Minuman yang biasa disediakan di pagi hari</dd>

</dl>


    

  1. Tag <dl> mendefinisikan sebuah Description List
    2. 

  2. Tag <dt> mendefinisikan term (nama)
    3. 

  3. Tag <dd> mendefinisikan data (deskripsi)
    4. 












Posted by





at



1 comments






































Pengaturan Paragraf Html












Pengaturan Paragraf Hasil gambar untuk contoh gambar satu paragraf 







Perataan Paragraf

Diwakili dengan tag <p align="...">...</p>

Ada 4 jenis perataan yaitu left, center, right, dan justify.

Left -> Rata kiri



Center -> Rata tengah



Right -> Rata kanan



Justify -> Rata kiri kanan





Pengaturan Indentasi

Ada 3 macam bentuk indentasi : 


    

  • First Line <DD> -> membuat baris pertama menjorok ke dalam
    • 

  • Hanging <BLOCKQUOTE> -> membuat semua baris menjorok ke dalam
    • 

  • Daftar Definisi <DT> -> membuat suatu paragraf yang dijelaskan dengan paragraf lain yang menjorok ke dalam
    • 




Preformatted Text

Digunakan untuk menampilkan sama dengan apa yang kita tulis pada dokumen html.

Tag untuk preformatted text adalah <pre>...</pre> 



Contoh :



 <html>

<head>

<title>Paragraf</title>

</head>

<body>

<p align="left">Paragraf ini merupakan paragraf rata kiri dengan 

menggunakan align left.</p>

<p align="center">Paragraf ini merupakan paragraf rata tengah 

dengan menggunakan align center.</p>

<p align="right">Paragraf ini merupakan paragraf rata kanan 

dengan menggunakan align right.</p>

<p align="left">Paragraf ini merupakan paragraf rata kiri kanan 

dengan menggunakan align justify.</p>

<dd>Paragraf ini menggunakan tag DD sehingga baris 

pertamanya menjorok ke dalam. Dimulai dengan tag &lt dd &gt 

dan ditutup dengan tag &lt /dd &gt .</dd>

<blockquote>Paragraf ini menggunakan tag blockquote, 

sehingga tidak hanya baris pertamanya saja yang menjorok ke 

dalam, melainkan semua barisnya juga ikut menjorok ke dalam. 

</blockquote>

<dl>

<dt>Daftar definisi</dt>

<dd>Daftar definisi adalah susunan paragraf yang berselang-

seling antara paragraf normal dan paragraf yang menjorok ke 

dalam yang merupakan penjelasan dari paragraf normal 

tersebut.</dd></dl>

</body>

</html>











Gambar di bawah adalah hasil dari rumus yang kita masukkan.












Posted by





at



0
comments
































        

      










Subscribe to:
Posts (Atom)