Ticker

6/recent/ticker-posts

Header Ads Widget

Tutorial #1 | tag h, p, dan br HTML 5

HTML 5 adalah sebuah bahasa markup untuk menstrukturkan dan menampilkan isi dari World Wide Web.

HTML 5 merupakan salah satu karya Konsortium World Wide Web ( Worl Wide Web Consortium atau disingkat W3C ) untuk mendefinisikan sebuah bahasa markup tunggal yang dapat ditulis dengan cara HTML atau XHTML.

HTML 5 memungkinkan untuk membuat situs web lebih interaktif dengan menyematkan audio, video dan grafik di halaman web

Tujuan utama pengembangan HTML 5 untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru dan membuat lebih mudah bagi pengembang web.

Fitur baru yang ada di HTML 5 :

  • Browser support atau dukungan browser
  • Geolocation atau geolokasi
  • Offline application cache atau cache aplikasi offline
  • Web storage atau penyimpanan web
  • Error handling atau penanganan kesalahan
  • New structure atau struktur baru

Contoh fitur Application Programming Interface:

  • 2D drawing on web page
  • Drag and drop
  • Timed Media Playback
  • Browser History Management

Beberapa contoh elemen HTML 5 lainnya:

  • Elemen semantik baru seperti <header>, <nav>, <footer>,<aside>, <article> dan <section>.
  • Atribut baru seperti number, date, time calendar dan range
  • Elemen grafik : <svg> dan <canvas>
  • Elemen multimedia: <audio> dan <video>

DOCTYPE HTML 5

<!DOCTYPE> adalah sebuah intruksi ke web browser tentang versi HTML pada halaman.

DOCTYPE atau dikenal sebagai Deklarasi tipe dokumen HTML, diperlukan dalam setiap dokumen HTML. Hal ini memastikan bahwa halaman web di render dengan cara yang sama oleh standar web browser.

DOCTYPE untuk versi HTML yang sebelumnya lebih panjang karena bahasa HTML berbasis SGML ( Standard Generalized Markup Language) dan memerlukan referensi ke DTD ( Document Type Definition )

Versi HTML 5 sekarang lebih sederhana dan mudah di ingat seperti dibawah ini:

<!DOCTYPE html>

Deklarasi dokumen HTML diletakkan pada posisi paling atas atau sebelum elemen html. 

Ketik kode berikut pada HTMLPad > simpan > lalu buka pada halaman browser.

<!DOCTYPE html><html lang="en"><head>
	<title> Tutorial DOCTYPE HTML 5</title></head><body>
	<p> Contoh paragraf di dalam tag body </p></body></html>
 


Membuat judul menggunakan tag <h> 

Tag h membantu dalam menentukan hierarki dan struktur konten halaman web. Huruf h berasal dari kata Heading, digunakan untuk membuat judul pada halaman web.

Heading terdiri dari enam tingkatan berdasarkan tingkat kepentingan dan ukurannya, judul <h1> hingga <h6> ditampilkan dalam font yang terkecil.

Pemakaian judul <h1> sebagai judul utama halaman web Anda, diikuti oleh judul <h2>, lalu judul <h3> yang kurang penting, dan seterusnya.

Ketik kode berikut pada HTMLPad.

<!DOCTYPE html><html><head>
    <title> Belajar Tag  Heading </title></head><body>
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    <h4>Heading 4</h4>
    <h5>Heading 5</h5>
    <h6>Heading 6</h6></body></html>

Tutorial paragraf pada HTML

Tag <p> adalah tag yang digunakan untuk membuat paragraf di halaman web.

Cara penulisannya dibuka dengan tag <p> dan ditutup dengan tag </p>, tag penutup </p> opsional, tetapi penulisan yang baik menyertakan tag penutup untuk memastikan dokumen tervalidasi sesuai standar penulisan yang baik.

Jika Anda membuka halaman web, tampak ada beberapa ruang/jarak yang ditambahkan sebelum dan sesudah paragfraf. Secara otomatis HTML memberi jarak antara paragraf secara default .

Jumlah baris dalam paragraf tergantung pada ukuran jendela browser web, jika jendela browser dirubah ukurannya, maka jumlah baris dalam paragraf ini akan berubah mengikuti lebarnya jendela browser.

Ketik kode berikut pada HTMLPad.

<!DOCTYPE html><html><head>
    <title> Belajar Tag  Paragraf </title></head><body>
    <p>
        isi dari paragraf
    </p>
    <p>
        paragraf yang tidak memiliki tag penutup
    </body></html>
 

Baris baru menggunakan Tag br pada HTML

Tag br adalah singkatan dari kata break yang termasuk tag kosong atau tidak memliki tag akhir, tag ini digunakan untuk memasukan jeda baris atau pemisah dalam teks, bukan untuk memisahkan paragraf.

Tag <br> biasanya digunakan untuk menulis puisi, alamat, atau tulisan yang menuntut pembagian baris sangat penting.

Contoh penulisan tag <br> sebagai berikut.

Ketik kode berikut pada HTMLPad.

<!DOCTYPE html><html><head>
    <title> Cara menempatkan Tag break </title></head><body>
    <p>
        Padamu negeri kami berjanji
        Padamu negeri kami berbakti
        Padamu negeri kami mengabdi
        Bagimu negeri jiwa raga kami
    </p>
    <p>
       Padamu negeri kami berjanji<br>
       Padamu negeri kami berbakti<br>
       Padamu negeri kami mengabdi<br>
       Bagimu negeri jiwa raga kami<br>
    </p></body></html>

Hasilnya dapat dilihat pada HTMLPad. 



Published: Seno Adjie.

Posting Komentar

0 Komentar