Cara Membuat Tabel Di HTML

Oke pada kesempatan kali ini Blog Pintasku masih tetap membahas seputar Tutorial Dasar HTML, sebelumnya saya pernah membuatkan tutorial tentang Mengenal Atribut Style Di HTML, nahh sedangkan kali ini saya akan membahas bagaimana Cara Membuat Tabel Di HTML. Membuat sebuah tabel di sebuah dokumen memang sering digunakan.

Tapi sekarang bagaimana sih membuat sebuah tabel di HTML ? oke untuk membuat sebuah tabel di dalam HTML itu sangatlah mudah.

Cara Membuat Tabel Di HTML

Untuk membuat sebuah tabel di HTML itu memerlukan beberapa Tag khusus, yaitu :

1. Tag <table>
Tag <table berfungsi untuk memulai pembuatan tabel, atau lebih sederhananya adalah pembungkus antara baris tabel dengan isi tabel.

2. Tag <tr>
Tag <tr> merupakan singkatan dari table row yang berarti baris tabel. dan fungsinya juga pastinya sudah terpikirkan oleh sobatkan

3. Tag <td>
Tag <td> merupakan singkatan dari table data, yang berarti data tabel, dan fungsinya adalah untuk menginput atau memasukan data ke dalam tabel.

Supaya sobat readers bisa lebih mengerti, silahkan sobat perhatikan contoh penggunaan Tag <table> dibawah ini.

<!DOCTYPE html>
<html>
<head>
   <title>Penggunaan Tag Tabel</title>
</head>
<body>
<h1>Membuat Tabel Di HTML</h1>
<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>
</body>
</html>

Hasilnya :

Keterangan : Pada tag <table> disana ada sebuah atribut border, atribut border berfungsi sebagai garis tersebut. jika ingin menghilangkan baris tinggal dirubah saja dari 1 ke 0, ukuran 1 disana adalah ukuran 1 pixel.

Catatan: Tag dan atribut yang bisa dipakai di tabel itu masih banyak, tetapi untuk tutorial kali ini saya hanya memberikan bentuk dasar tabel di HTML, mungkin nanti saya akan melengkapi semua tutorial tentang tabel di lain hari.

Nah cukup sampai disini saja Tutorial Membuat Tabel Di HTML, semoga tutorial ini bisa membantu dan bermanfaat untuk semuanya. Terimakasih

Mengenal Atribut Style Di HTML

Pada kesempatan kali ini Blog Pintasku masih tetap membahas seputar Tutorial Dasar HTML, tetapi untuk kali ini saya akan memberikan Tutorial Cara Membuat Style Di HTML, sebelumnya saya pernah membuat tutorial Cara Membuat Paragraf di HTML.

Sepertinya tidak akan pernah terbayang jika sebuah halaman web tidak memiliki style nantinya akan terlihat polos dan sangat tidak relevan. Mungkin sobat akan bertanya - tanya bagaimana sih membuat sebuah dokumen html dengan tampilan bergaya seperti membuat warna background yang di inginkan atau bahkan membuat tulisan berwarna ? Oke jika ingin sobat ingin mengetahuinya silahkan sobat baca penjelasan saya dibawah ini.

Mengenal Atribut Style Di HTML

Apa itu Atribut Style ?

Style jika di artikan ke dalam Bahasa Indonesia berarti "Gaya" nah jika mendengar istilah Gaya di Desain Web atau Web Development itu berhubungan dengan CSS, CSS di dalam Desain Web berfungsi untuk menghias dan mengatur gaya tampilan/layout halaman web supaya lebih elegan dan menarik. 

Untuk lebih jelasnya silahkan sobat baca di Mengenal Apa Itu CSS ?

Atribut Style ini termasuk kedalam Metode Penulisan CSS dan dikenal dengan istilah inline, dimana penulisan ini dilakukan di dalam Tag HTML. Supaya bisa lebih mengerti silahkan perhatikan struktur atribut style berikut ini.

style="property:value"

Keterangan : Property adalah Property CSS dan Value adalah Nilai dari Propery CSS.
Untuk lebih jelasnya saya akan jelaskan nanti untuk bagian CSS

Nahh di atas adalah struktur dari atribut style, sekarang silahkan perhatikan contoh penggunaan atribut style di dalam HTML dibawah ini.

1. Untuk background dan warna.

<!DOCTYPE html>
  <html>
  <head>
    <title>Cara Membuat Paragraf HTML</title>
  </head>
<body style="background-color:lightgrey">
   <h1 style="color:red">Penggunaan Atribut Style</h1>
   <p style="color:blue">Belajar Atribut Style dari Blog Pintasku</p>
</body>
</html>

Hasilnya :

2. Untuk Fonts.

<!DOCTYPE html>
  <html>
  <head>
    <title>Penggunaan Atribut Style</title>
  </head>
<body style="background-color:lightgrey">
   <h1 style="font-family:verdana">Penggunaan Atribut Style</h1>
   <p style="font-family:courier">Belajar Atribut Style dari Blog Pintasku</p>
</body>
</html>

Hasilnya :

3. Untuk ukuran tulisan.

<!DOCTYPE html>
  <html>
  <head>
    <title>Penggunaan Atribut Style</title>
  </head>
<body style="background-color:lightgrey">
   <h1 style="font-size:300%">Penggunaan Atribut Style</h1>
   <p style="font-size:160%"">Belajar Atribut Style dari Blog Pintasku</p>
</body>
</html>

Hasilnya :

3. Untuk Jajaran Tulisan atau Perataan Tulisan.

<!DOCTYPE html>
  <html>
  <head>
    <title>Penggunaan Atribut Style</title>
  </head>
<body style="background-color:lightgrey">
   <h1 style="text-align:center">Penggunaan Atribut Style</h1>
   <p style="text-align:Left">Belajar Atribut Style dari Blog Pintasku</p>
      <p style="text-align:Right">Tulisan Rata Kanan ini</p>
</body>
</html>

Hasilnya :

Catatan : Penggunaan Tag <center> itu tidak valid HTML5, tetapi masih bekerja di versi HTML sebelumnya.

Mengenal Block Element dan Inline Element Di HTML

Pada kesempatan kali ini Blog Pintasku akan memberikan Tutorial Format Text Di HTML, tetapi untuk kali ini saya membahas tentang Block Elements dan Inline Elements Di HTML, karena sebelum kita masuk ke dalam Tutorial Lanjutan HTML kita harus mengetahui dahulu lebih dalam mengenai Tag dan atribut di dalam HTML.

Perlu di ketahui Tag Di Dalam HTML itu pada dasarnya ada 2 jenis, yaitu Tag Block Element dan Tag Inline Elements. Perbedaan antara dari kedua Tag tersebut terletak pada browser ketika membaca atau menampilkan Tag tersebut.

Perbedaan Tag Block Element dan Tag Inline Element

Apa itu Tag Block Elemetn Di HTML ? 

Tag Block Element adalah sebuah tag yang bertujuan untuk membagi atau memisahkan halaman HTML menjadi terpisah atau lebih sederhananya menjadi block. Block Element ini akan di tampilkan secara terpisah oleh browser seolah - olah di dalam sebuah kotak dan biasanya Tag Block Element memiliki jarak yang berbeda dengan tag lain. Contoh dari Tag yang termasuk kedalam jenis Tag Block Element ini adalah sebagai berikut :

1. Tag Heading (H1 - H6)
2. Tag Paragraf <p>
3. Tag List <ol> dan <ul>

Supaya bisa lebih mengerti silahkan perhatikan contoh kode berikut ini.

<!DOCTYPE html>
<html>
<head>
<title>Belajar Format Text</title>
</head>
 
<body>
<h1>Mengenal Tag Jenis Block Element</h1>
<h3>Apa Itu Tag Block Element</h3>
<p>Tag P dan Tag Heading akan di tampilkan dengan jarak yang berbeda</p>
<p>Dan tag ini juga bro ! </p>
<ul>
<li>Apalagi kalo Tag List ini</li>
<li>Memiliki perbedaan jarak yang sangat berbeda kan</li>
</ul>
</body>
 
</html>

Hasilnya :

Pada contoh di atas akan terlihat sangat jelas perbedaan jarak spasi yang berbeda dan masing - masing tag memiliki barisan baru.

Apa Itu Tag Inline Element ?

Tag Inline Element adalah kebalikan dari Tag Block Element , yaitu Tag yang nantinya akan menyatu tidak akan terpisah dengan Tag sebelumnya ataupun sesudahnya. Tag Inline ini tidak akan memulai pada baris baru lagi dan tidak akan memiliki jarak yang berbeda dengan Tag lainnya.

Berikut ini adalah contoh tag yang termasuk kedalam jenis tag inline.

• Tag <em>
• Tag  <b>
• Tag  <Strong>
• Tag  <i>
• Tag < u>
• Tag <ins>
• dan lain lain.

Berikut ini adalah contoh kode yang menggunakan mode Tag Inline.

<!DOCTYPE html>
<html>
<head>
<title>Belajar Format Text</title>
</head>
 
<body>
<p><strong>Mengenal Tag Jenis Inline Element</strong>
<i><u>Tag em, i, dan tag yang berjenis tag inline</u><i>
<b>Tidak akan dimulai di baris baru dan tidak memiliki jarak yang berbeda dengan tag lain<b>
</p>
</body>
 
</html>

Hasilnya :

Nahh sekian saja penjelasan tentang Mengenal Block Element dan Inline Element Di HTML, semoga penjelasan ini bisa membantu dan bermanfaat unuk semuanya. Terimakasih

Cara Mudah Menambahkan Gambar Di HTML

Masih tetap melanjutkan Tutorial Dasar HTML, tetapi kali ini saya akan membuat Tutorial Cara Menambahkan Gambar Di HTML, mungkin sobat sudah sering melihat halaman web ada sebuah gambar yang terdapat di halaman tersebut. Tetapi apakah sobat tahu Bagaimana Cara Menambahkan Gambar tersebut ?

Sebelum saya masuk ke pembahasan utama, bagi sobat yang belum mengerti tentang Dasar HTML silahkan untuk membuka halaman direktori Belajar Dasar HTML. 

Cara Menambahkan Gambar Di HTML

Di dalam HTML jika kita ingin menambahkan sebuah gambar di dokumen atau halaman html kita itu ada sebuah tag khusus, yaitu tag <img> dan atributnya yaitu atribut src.

Apa Itu Atribut src ?

Atribut src merupakan singkatan dari kata "source" jika di artikan ke indonesia adalah sumber. Jadi atribut src ini berisi sumber dari gambar tersebut yang ingin kita tambahkan atau lebih tepatnya adalah URL dari gambar tersebut.

Pada contoh kali ini sebelumnya silahkan di siapkan dulu sebuah gambar, nahh saya disini akan menggunakan sebuah gambar logo Blog Pintasku. Lalu simpanlah di dalam satu folder dengan dokumen html yang dibuat. Untuk kodenya berikut ini.

<!DOCTYPE html>
<html>
<head>
   <title>Penggunaan Tag Image</title>
</head>
<body>
   <h1>Ini Adalah Contoh Gambar</h1>
   <img src="Blog-pintasku.jpg" />
</body>
</html>

Hasilnya :

Bagaimana Cara Mengubah Ukuran Gambar DI HTML ? 

Untuk mengubah ukuran gambar di HTML kita hanya perlu menambahkan beberapa atribut lainnya yaitu atribut width dan height.

Dibawah ini adalah contoh Penggunaan Atribut Width dan Height.

<!DOCTYPE html>
<html>
<head>
   <title>Penggunaan Tag Image</title>
</head>
<body>
   <h1>Ini Adalah Contoh Gambar</h1>
   <img src="Blog-pintasku.jpg" height="200" width="400" />
</body>
</html>

Hasilnya :

Pada Contoh di atas kita menggunakan ukuran width adalah 400px dan height 200px, jika kita tidak menambahkan salah satu atribut width atau height. browser akan secara otomatis mengatur ukuran lebar gambar tersebut sehingga menjadi gambar yang proporsional.

Pengguaan Atribut Alt

Nahh ini ada satu lagi atribut yang sangatlah penting jika menambahkan gambar di halaman web, yaitu atribut Alt. Alt merupakan sebuah singkatan dari "alternative description" Dimana Atribut Alt ini berfungsi untuk menambahkan keterangan atau deskripsi dari gambar tersebut jika pada browser tidak tampil gambar tersebut maka atribut alt ini akan memberikan sebuah keterangan pada gambar tersebut yang tidak tampil.

Berikut ini adalah contoh Penggunaan Atribut Alt.

<!DOCTYPE html>
<html>
<head>
   <title>Penggunaan Tag Image</title>
</head>
<body>
   <h1>Ini Adalah Contoh Gambar</h1>
   <img alt="gambar blog pintasku" src="Blog-pintasku.jpg" height="200" width="400" />
</body>
</html>

Perlu diketahui penggunaan atribut alt ini sangatlah berperan penting dalam sebuah web untuk bersain dengan blog lain. Karena cara kerja mesin pencari adalah untuk membaca isi kesuluruhan tulisan yang berada pada halaman web dan tidak membaca pada gambar oleh karena itu dengan menambahkan sebuah deskripsi singkat pada sebuah gambar itu akan membuat tanda bahwa gambar yang di tambahkan itu ada di deskripsi gambar tersebut.

Nahh sekian artikel dari saya mengenai Cara Menambah Gambar Di HTML semoga tutorial ini bisa bermanfaat dan membantu untuk semuanya, terimakasih.