HTML (Hypertext Markup Language)

HTML (Hypertext Markup Language) bukanlah bahasa komputer dalam pengertian yang ketat. Lebih tepat apabila dikatakan bahwa HTML merupakan cara untuk mendeskripsikan bagaimana sebuah halaman web harus ditampilkan pada layar monitor. Meskipun bayak keterbatasan yang dimiliki oleh HTML, tetapi karena pada awal berkembangnya WWW hanya mengenal HTML untuk mendeskripsikan tampilan halaman wb, maka untuk menjaga kompatibilitas kode-kode yang membentuk deskripsi tampilan web berdasar HTML ini masih dipertahankan sampai sekarang.

Nah untuk memulainya kita bisa menggunakan Notepad atau Notepad++, kali ini saya menggunakan Notepad. Buat dokumen baru dan simpan dalam satu foder dengan jenis file .htm atau .html, setelah itu ketih kode kode berikut sebagai dasarnya :


Kode atau deskripsi yang dituliskan di antara tanda kurung siku "< >" disebut sebagai tag.
  • <html> merupakan indikator yang memberitahukan bahwa informasi selanjutnya harus diinterprestasikan oleh browser sebagai dokumen HTML. Tag ini diakhiri dengan </html> sebagai indikator batas akhir dokumen HTML
  • Teks di antara <header> dan </header> adalah teks informasi header.
  • Informasi yang beraada di antara tag <tittle> dan </tittle> akan diinterprestasikan oleh browser sebagai judul dokumen.
  • Informasi yang berada di antara tag <body> dan </body> adalah informasi yang akan ditampilkan dalam jendela tampilan browser.
1. Heading
Selain kode dasar di atas, ada beberapa kode untuk membuat heading, di antaranya seperti gambar di bawah ini :

Tag dan tampilan yang dihasilkan

2. Tabel dan jenis masukan
Kita bisa membuat tabel dan jenis masukan dengan cara menuliskan tag seperti di bawah ini :




  • <table> </table> adalah tag awalan dan akhiran untuk membuat tabel.
  • <table border="1" align="center"> artinya kita akan membuat tabel dengan ukuran border satu dan letaknya tabel berada di tengah halaman.
  • <tr> </tr> adalah tag untuk baris
  • </td> </td> adalah tag untuk kolom
  • <td> Nama </td> berarti di dalam sel tersebut terdapat kata "Nama" (tag <td>digunakan setelah tag <tr>
  • <input type="text" size="20"> berarti jenis masukan yang kita gunakan berupa teks yang ukurannya 20.
  • <input type="submit" size="20"> berarti jenis masukan yang kita gunakan berupa sejenis tombol input.
  • <br> artinya garis baru. Ini sama dengan fungsi enter.

3. Gambar, Musik dan Video

Kita juga bisa memasukkan gambar, musik maupun video di halaman web kita. Caranya ketikkan kode sebagai berikut :
  • Pertama masukkan gambar, musik maupun video yang akan ditampilkan di halaman web ke folder tempat kita menyimpan dokumen .htm tadi

  • Ketikkan kode-kode seperti dibawah ini :


Tampilan gambar dan musiknya

Tampilan videonya


  • <figure> </figure> adalah tag awalan dan akhiran untuk menampilkan gambar.
  • <img src="falling-151819_640.png" width="50%" height="50%"> artinya nama file gambar yang akan kita tampilkan adalah "falling-151819_640.png" (beserta jenis filenya), "width="50%" height="50%" merupakan ukuran gambarnya.
  • <audio controls> </audio> adalah tag awalan dan akhiran untuk menampilkan musik player di halaman web kita.
  • <source src="Naruto_Shippuuden_-_Blue_Bird.mp3" type="audio/mpeg">. Kode <source src> adalah kode standarnya maka harus dituliskan. "Naruto_Shippuuden_-_Blue_Bird.mp3" adalah nama dan jenis file nya dan type="audio/mpeg" adalah jenis file yang bisa kita putar.
  • <video controls> </video> adalah tag awalan dan akhiran untuk menapilkan video di halaman web kita.
  • <source src="Cara Membuat Efek 3D Box dengan CorelDraw.mp4" type="video/mp4">. Kode <source src juga harus diketikkan. "Cara Membuat Efek 3D Box dengan CorelDraw.mp4" adalah nama file dan jenid file yang akan ditampilkan. type="video/mp4" adalah type file yang bisa ditampilkan.

Tambahan :
Jika kita ingin memberi warna pada halaman web kita, bisa ditambahkan kodenya sebagai berikut :


  • "b2d8d8" adalah kode warnanya, sehingga menjadi :


Satu lagi, jika kita ingin menampilkan video yang sumbernya dari youtube,kita bisa meng-copy embednya dan masukkan ke kode video sebagai nama videonya gan. Wahhhhhh, demikian sedikit penjelasan mengena dasar HTML dari saya. Kita bisa mengotak ngatiknya sesuai selera gan, asal kodenya bener :D Terimakasih semoga bermanfaat.


Aldi Solihin


Komentar

Posting Komentar

Postingan populer dari blog ini

Punya Cerita

Setiap orang pasti punya temen, dan beruntunglah buat orang-oranng yang punya banyak temen, apalagi temennya kaya temen yang  41 ini,, Ya ! Dua Belas Ipa Satu. Kita tinjau satu per satu. goooow! Aldi Solihin : Nama gue sendiri, gue orangnya ga gampang percaya, apalagi sama hal yang belom kebukti. Jadi kalo apa-apa teh harus ada buktinya dulu.  Aga kesusahan buat nyanyi lagu barat. Sebenernya sih punya perasaan, punya kelembutan, punya hati nurani dan ga PHP batre -_-. Berizky Pratama A . : Deuuuh ah. Jamil . Dia sering mengamalkan slogan "malu bertanya sesat di jalan". Hal apapun ditanyainn, : -__- sabar ya Pak, Bu :" . Dulu Suka bawa timbel ke sekolah, dia temen yang baik ko. Bintari Pratidina Pratama : Kalo kita perhatiin dia punya kepanjangan nama yang sama kaya si Bebe . Cieeeeee :D Salah satu cewek pendiem di kelas dan kalau ke depan kelas punya suara yang ultrasonik, frekuensinya dibawah 20Hz. Bramantio Bagus Widiaaaaa ehm Widiatmoko : Paling muda ...
Baca selengkapnya

Kenapa Rasio kompresi file dengan format .jpg lebih kecil dari pada .doc ?

Gambar
http://4.bp.blogspot.com Hallo agan-agan semua kali ini saya akan berbagi cerita tentang kompres mengompres. Pasti sudah pada tahu kan? Misalnya gini, saya ingin meminta file dari laptop teman dengan ukuran 5 MB, tapi apa daya flashdrive saya hanya cukkup untuk 4,99 MB hha nyesekkan? Atau misalnya saya ingin mengirim file video dengan ukuran 30MB via e-mail, tapi apa daya, maksimal ukuran file yang bisa dikirim hanya 25MB saja? Nahloh.. repot kan? Disinilah kita membutuhkan jasa pengompresan. Berikut ini beberapa defenisi dari kompresi data: a.  Kompresi berarti memampatkan/mengecilkan ukuran. b.  Kompresi data adalah proses mengkodekan informasi menggunakan bit atau informasi bearing unit yang lain yang lebih rendah dari pada representasi data yang tidak terkodekan dengan suatu sistem enkoding tertentu. Data digital yang telah dikompresi dapat dikembalikan ke bentuk data digital semula (dekompresi) dimana hal ini tergantung pada aplikasi software yang menduku...
Baca selengkapnya

Alat input dan Output serta cara pengaturannya

Gambar
Hallo teman-teman kali ini saya akan berbagi cerita tentang apa saja alat input dan output pada komputer serta cara mengatur beberapa perangkat agar performa komputer kita lebih nyaman. Materi ini saya dapat pas praktikum kedua Penerapan Komputer. Oke langsung aja gan scroll ke bawah .... 1. Alat Input Alat input adalah alat-alat yang berfungsi untuk memasukan data atau perintah dari luar sistem ke dalam suatu memori dan prosesor untuk diolah guna menghasilkan informasi yang diperlukan. Contoh : keyboard, mouse, joystick, scanner, barcode scanner, touch pad dan sejenisnya. 2. Alat Output Alat output adalah alat-alat yang berfungsi mengeluarkan data-data yang berbentuk informasi yang dibutuhkan. Contoh : monitor, printer, plotter, speaker, dan proyektor. Baiklah itu sekilas tentang pengertian dan contoh alat input dan output pada komputer. Sekarang kita akan coba untuk mengatur beberapa perangkat sesuai dengan apa yang kita inginkan. 1. Keyboard Keyboard merupakan salah s...
Baca selengkapnya