Tutorial HTML dasar 3 ~ infoku.net

Setelah mempelajari Tutorial HTML dasar 2 sekarang kita akanlanjutkan ke Tutorial HTML dasar 3.

Pada tutorial Belajar HTML kali ini kita akan membahas tentang tag paragraf, bagaimana penulisan tag paragraf dan bagaimana cara membuat paragraf di HTML dan Cara Membuat Judul / Heading di HTML (tag h1)

1.Untuk memahami cara pembuatan paragraf di dalam HTML, kita akan menggunakan contoh struktur HTML yang dibuat pada tutorial sebelum ini, dan menambahkan beberapa text. Silahkan buka kembali text editor, lalu ketikkan kode berikut:

Contoh penggunaan tag paragraf:

<!DOCTYPE html>
<html>
<head>
  <title>Title dari Websiteku</title>
</head>
<body>
  Ini adalah paragraf pertama
  Ini adalah paragraf kedua
</body>
</html>

Save sebagai paragraf.html, lalu jalankan di web browser.

Kita akan melihat bahwa paragraf tersebut tidaklah berada pada baris berbeda, namun berada pada satu baris yang sama. Dalam HTML, spasi akan diabaikan, termasuk jika kita merubahnya menjadi:

Contoh penggunaan tag paragraf 2:

<!DOCTYPE html>
<html>
<head>
  <title>Title dari Websiteku</title>
</head>
<body>
  Ini adalah paragraf pertama        Ini adalah paragraf kedua
</body>
</html>

Kita harus memberi tahu web browser bahwa kedua kalimat itu harus terpisah. Dan bahwa masing-masing kalimat itu adalah sebuah paragraf.

Tag Paragraf (<p>)

HTML menyediakan tag khusus untuk membuat paragraf. Penulisannya menggunakan huruf p, sebagai berikut : <p>. Mari kita revisi contoh kode HTML sebelumnya, dan menambahkan tag <p>.

Contoh penggunaan tag paragraf 3:

<!DOCTYPE html>
<html>
<head>
  <title>title dari websiteku</title>
</head>
<body>
  <p>ini adalah paragraf pertama</p>
  <p>ini adalah paragraf kedua</p>
</body>
</html>

Maka kali ini kita akan melihat bahwa kedua paragraf itu sudah berada pada posisi masing-masing. Setiap tag paragraf, web browser akan memberikan spasi antar paragraf.

Tag Break (<br>)

Cara lain untuk memisahkan kedua paragraf adalah dengan menggunakan tag <br> (br singkatan dari break).

Contoh penggunaan tag <br>:

<!DOCTYPE html>
<html>
<head>
  <title>title dari websiteku</title>
</head>
<body>
  ini adalah paragraf pertama
  <br />
  ini adalah paragraf kedua
</body>
</html>

Jika kode HTML diatas dijalankan, maka hasilnya hampir sama dengan menggunakan tag <p>. Namun pemisahan paragraf menggunakan tag <br> bukanlah untuk membuat paragraf. Tag <br> berfungsi untuk memisahkan sebuah bagian text dengan text lain. Jika yang kita butuhkan adalah struktur paragraf, maka gunakan tag <p>.

Perhatikan penulisan tag <br>, tag break adalah salah satu dari beberapa tag yang tidak memiliki tag penutup, dan bisa ditulis sebagai<br > atau <br />. Penulisan <br /> merupakan bawaan dari xHTML yang dianggap lebih rapi. Namun dalam standar HTML5, penulisan <br> maupun <br /> tetap dianggap valid.

Tag untuk penebalan dan garis miring (<em> dan <strong>)

Di dalam sebuah paragraf, kadang kita perlu untuk membuat penekanan pada kata-kata tertentu. Penekanan ini bisa dilakukan dengan menebalkan kata, atau dengan garis miring.
Tag emphasis (penekanan) terdiri dari 2 tag, <em> untuk emphasis, dan <strong> untuk strong emphasis.
Pada umumnya web browser akan menampilkan <em> sebagai garis miring, dan <strong> dengan penebalan huruf.
Contoh penggunaan tag <em> dan <strong>:

<!DOCTYPE html>
<html>
<head>
  <title>title dari websiteku</title>
</head>
<body>
  <p>ini adalah kalimat <em>pertama</em>, 
  sedangkan ini adalah kalimat <strong>kedua</strong></p>
</body>
</html>

Walaupun tanda spasi tidak akan dianggap dalam HTML, namun untuk membuat kode HTML, menjorokkan (indent) beberapa baris dalam suatu tag akan membuat kode mudah dibaca.

Kita juga akan menemukan bahwa HTML memiliki tag <i> (italic) untuk memiringkan huruf, dan <b> (bold) untuk menebalkan huruf. Pakar HTML yang mendukung pemisahan konten dengan tampilan tidak menyarankan menggunakan tag <i> dan <b>, karena kedua tag ini akan mempengaruhi tampilan dari HTML.
Tampilan halaman web seharusnya di tangani oleh CSS, bukan di dalam kode HTML. Pada xHTML, tag <i> dan <b> sudah dianggap usang dan tidak akan dipakai lagi, namun dalam spesifikasi HTML5, tag <i> dan <b> kembali dianggap relevan.

2.Cara Membuat Judul (heading) di HTML

HTML menyediakan tag khusus untuk membuat judul atau di dalam HTML lebih di kenal dengan istilah: heading. Heading dirancang terpisah dari paragraf. Tag Heading biasanya digunakan untuk judul dari paragraf, atau bagian dari text yang merupakan judul.
Tag heading di dalam HTML terdiri dari 6 tingkatan, yaitu <h1>, <h2>, <h3>, <h4>, <h5>, dan <h6>. Tag heading secara default akan ditampilkan oleh web browser dengan huruf tebal (bold). Tampilan dari tag header juga dibuat bertingkat. Tag header <h1> memiliki ukuran huruf paling besar, sedangkan <h6> terkecil.
Berikut adalah contoh penggunaan tag heading di dalam HTML:

<!DOCTYPE html>
<html>
<head>
  <title>penggunaan tag heading</title>
</head>
<body>
  <h1>ini adalah judul dengan h1 </h1>
  <h2>ini adalah judul dengan h2 </h2>
  <h3>ini adalah judul dengan h3 </h3>
  <h4>ini adalah judul dengan h4 </h4>
  <h5>ini adalah judul dengan h5 </h5>
  <h6>ini adalah judul dengan h6 </h6>
</body>
</html>

Biasanya dalam sebuah halaman akan ada hanya 1 tag <h1>, dan beberapa tag <h2> dan <h3> dengan beberapa tag <p>. Berikut adalah contoh struktur artikel HTML sederhana dengan menggunakan tag <p> dan beberapa tag heading:

<!DOCTYPE html>
<html>
<head>
  <title>Belajar HTML Dasar</title>
</head>
<body>
  <h1>Judul Artikel</h1>
  <p>.....pembahasan artikel.....</p>
    <h2>Sub Judul Artikel 1</h2>
    <p>.....pembahasan sub artikel 1.....</p>
    <h2>Sub Judul Artikel 2</h2>
    <p>.....pembahasan sub artikel 2.1.....</p>
      <h2>Sub Sub Judul Artikel 2.1</h2>
      <p>.....pembahasan sub sub artikel 2.1.....</p>
</body>

Dengan menggunakan beberapa tag heading dan paragraf, kita bisa membuat struktur sederhana konten HTML.
Search Engine seperti Google akan memberikan nilai lebih untuk heading. Biasanya semakin tinggi tingkat heading, semakin tinggi pula penekanan search engine. Tag <h1> dianggap lebih bernilai dari pada <h2>. Tag <h1> umumnya digunakan untuk judul sebuah konten / artikel, sehingga dianggap dapat mewakili keseluruhan artikel.

Sekian dulu penjelasan dari saya,semoga jelas kita lanjut lagi Dalam tutorial selanjutnya di Tutorial HTML dasar 4

About Admin MC3

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.