[Dasar - Dasar Web] Pengunaan Tag pada HTML Bagian 1

on
Disaat temen – temen seperjuangan ane sedang menikmati indahnya D’jafu (Acara Cosplay Sastra Jepang Universitas Udayaan tahunan di Bali), ane hanya bisa diam dirumah, meratapi langit yang biru nan indah (Just kidding, disini mendung coy).

Ane pun berfikir, “Dari pada ane diem ga jelas gini, mending ane updet blog aja deh. Mungkin tahun depan ane bakal ke D’jafu dan bakal ane posting di Blog ane.”. Nah, saat itu ane mikir ke blog lagi. Apa yang bakal ane sajikan di Blog ane tercinta hari ini. "Berbagi itu indah". Kata - kata itu secara mendadak terngiang di kepala ane. Dan akhirnya sebuah ide edukatif dan diplomatis pun muncul. Ane bakal share apa yang udah ane pelajari di selama berkuliah di STIKOM Bali. Not bad lah, not bad… Kali ini ane bakal ngeshare dasar – dasar HTML bagi para agan & aganwati yang baru aja belajar HTML. Semoga postingan ane kali ini bisa berguna buat ente – ente semua.

Sebelum kita mulai ke praktikum, kita pelajari dulu teorinya. Kita akan mengupas sedikit aja tentang apa itu HTML. Seperti yang ane lansir dari Wikipedia, Hyper Text Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan kata lain, file html bisa dibuat menggunakan Text Editor apa saja, asal file akhir disimpan dengan ekstensi *.html. Text editor yang dimaksud dapat berupa sebagai berikut :

Penggunaan Tag pada HTML

Struktur HTML
Struktur HTML yang ane buat pake paint
Seperti yang agan & aganwati lihat pada gambar sebuah struktur Html diatas, satu Tag memiliki tag pembuka dan tag penutup. Misalkan, di gambar kita memiliki Tag <html> sebagai tag pembuka bagian html, dan </html> sebagai tag penutup bagian html, dan hal ini juga berlaku untuk semua tag pada sebuah file html.

Tag - Tag Beratribut dan fungsinya

Kebanyakan tag memilik atribut guna merubah dan memperbaiki tampilan dari suatu dokumen html. Berikut beberapa contoh tag - tag yang dilengkapi dengan atribut :

1. Mengubah warna latar belakang (bgcolor)

Atribut bgcolor biasa digunakan pada tag <body> yang memiliki atribut bgcolor, dimana bgcolor merupakan singkatan dari "background color", jika diartikan kedalam Bahasa Indonesia, menjadi warna latar belakang. Cara penulisannya adalah <body bgcolor="warna yang diinginkan"> Contoh penggunaan :

<html>
  <head>
     <title>Test Body Bgcolor</title>
  </head>
<body bgcolor="#0000FF"> 
<!-- Ini comment yang tak akan muncul di tampilan web. Atribut ini akan memunculkan warna latar belakang berwana biru --!>
</body>
</html>

Alhasil browser akan menghasilkan tampilan sebagai berikut :
HTML bgcolor blue
Blue Background

2. Membuat Sebuah Link (a href)

Sebuah tag <a> biasa digunakan untuk membuat sebuah link, dan memiliki atribut berupa href, yang nantinya diisikan alamat web yang dituju. Lalu diantara tag pembuka dan tag penutup, berisikan tulisan selain alamat web. Cara penulisannya adalah <a href="alamat web yang ingin dituju">Deskripsi singkat dari alamat web yang dituju</a>. Contoh penggunaan :

<a href ="www.google.com">Google</a>

Hasilnya adalah :

Google

3. Membuat Sebuah Paragraf (P)

Dengan membaca judulnya saja, ane yakin agan & aganwati bakal langsung mengerti apa kegunaan dari tag <p> ini. Betul, tag <p> digunakan untuk  membuat paragraf. Dan agan & aganwati juga dapat mengatur apakah sebuah paragraf yang diinginkan rata kiri (left), rata kanan (right), rata tengah (center) atau rata kiri kanan (justify), menggunakan atribut align. Cara penggunaannya adalah <p align ="format rata yang diinginkan"> Isi dari sebuah paragraf </p>. Contoh penggunaan :

Penggunaan Tag P
Contoh Penggunaan tag p
Alhasil browser akan menampilkan :

Paragraf Rata Tengah
Paragraf Rata Tengah
Ane rasa cukup sekian dulu postingan dari ane, maaf kalo rada - rada ndak jelas bahasanya, maaf pendek seperti biasa, tapi serius deh, ane bener - bener seneng rasanya bisa sharing - sharing di mari. Thanks for reading! Arigatou Gozaimasu! Xie xie! Gracias!

Comments

Post a Comment