Cara Membuat Tulisan Garis Bawah (Underline) Di HTML

Kali ini Blog Pintasku akan membahas seputar Format Text Di HTML, tapi untuk postingan kali ini saya akan memberikan tutorial Membuat Text Bergaris Bawah di HTML. Membuat sebuah kata atau kalimat yang bergaris bawah itu sangatlah sering digunakan untuk mengolah kata atau kalimat dimana fungsi untuk membuat kata atau kalimat bergaris bawah itu untuk menandai kalau kata atau kalimat tersebut penting.


Tapi apakah sobat tau bagaimana membuat tulisan bergaris bawah di dalama sebuah halaman atau dokumen HTML ? Nahh oleh karena itu untuk tutorial kali ini Blog Pintasku akan membahas Cara Membuat Text Garis Bawah (Underline) Di HTML.

Cara Membuat Text Garis Bawah (Underline) Di HTML

Untuk membuat text atau tulisan bergaris bawah (underline) di dalam HTML itu diperlukan sebuah tag khusus, yaitu tag <u> dan tag <ins>.

Apa itu Tag <u> dan Tag <ins> ?

Tag <u> merupakan kepanjangan dari underline, nahh underline sendiri jika di artikan kedalam Bahasa Indonesia adalah Garis Bawah. 
Sedangkan Tag <ins> merupakan kepanjangan dari Insert, dimana Tag <ins> ini berfungsi untuk menunjukan bagian text yang baru ditambahkan kedalam kontent web atau halaman web.

Tag <ins> dan Tag <u> ini termasuk kedalam Jenis Tag Inline Elements, dimana tag ini akan mengikuti alur text yang ada dan tidak akan membuat baris baru atau memerikan jarak yang berbeda.

Apa perbedaan Tag <u> dan Tag <ins> ?

Memang jika kita menuliskan tag ini di dalam sebuah dokumen HTML akan terlihat sama hasilnya dengan Tag <u> yaitu membuat text bergaris bawah, tetapi yang berbeda itu dari segi penggunaanya. Tag <ins> ini digunakan untuk menunjukan bagian text atau tulisan yang baru ditambahkan kedalam konten web atau halaman HTML.

Supaya bisa lebih mengerti silahkan perhatikan contoh kode berikut ini.
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML</title>
</head>

<body>
<h3>Penggunaan Tag Insert dan Underline</h3>
<p>ini adalah contoh dalam penggunaan tag underline
<u>Tulisan ini bergaris bawah</u>
Sedangkan Penggunaan Tag Insert
<ins>ini tulisan yang baru ditambahkan</ins>
</p>
</body>

</html>
Hasilnya :
Hasil dari Contoh kode di atas
Saya sendiri sering menggunakan tag <u> untuk memperjelas kalimat atau text yang penting, dan jarang menggunakan tag <ins> karena tag tersebut untuk menunjukan text baru.

Nahh sekian penjelasan tentang Cara Membuat Tulisan Garis Bawah (Underline) Di HTML, semoga ini bisa membantu dan bermanfaat untuk semuanya. Terimakasih
Diposkan oleh Tanggal No comments:

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>
    2. Tag <table berfungsi untuk memulai pembuatan tabel, atau lebih sederhananya adalah pembungkus antara baris tabel dengan isi tabel.
  2. Tag <tr>
    3. Tag <tr> merupakan singkatan dari table row yang berarti baris tabel. dan fungsinya juga pastinya sudah terpikirkan oleh sobatkan
  3. Tag <td>
    4. 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
Diposkan oleh Tanggal 1 comment:

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.

Mengenal Atribut Style 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 :
Penggunaan Atribut Style-1

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.

Diposkan oleh Tanggal No comments:

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


Diposkan oleh Tanggal No comments:
Subscribe to: Posts (Atom)