Fungsi tag dan atribut dalam HTML

Adakah diantara kalian sudah mengetahui tentang tag dan atribut dalam HTML ??? sebagian besar pasti sudah tetapi sekedar untuk mengingat dam memberi info dalam HTML terdapat beberapa tag dan atribut yang masing – masing mempunyai fungsi yang penting dalam web dalam HTML .

HTML (Hypertext Markup Language) merupakan bahasa pemrograman web yang digunakan untuk membuat halaman situs.Dalam belajr HTML anda bisa belajar membuatnya di dreamweaver atau di notepad

Nah jika ada yang belum tau anda bisa membacanya di bawah ini,saya akan menjelaskan dari dasarnya !!!!!

<html>= pertama kali anda menuliskan script pada dreamweaver atau notepad anda menuliskan <html> itu wajib karna sebagai pembuka dalam menulis script – script yang lain.

ingat : setiap tag harus di tutup dengan slais “/” ex:<html> …. </html> ; <head> … </head>;dll

<head>….</head> & <title> ….</title>= pada bagian ini adalah judul dari web/html anda

contoh :

<body> = berfungsi sebagai isi untuk menuliskan script – script yang mana nantinya sebagai halaman web anda

dalam tag body bisa kita sisipkan atribut background yang berguna sebagai background halaman web,contoh :

<body bgcolor=”red”> atau <body bgcolor=”#FF0000”> = memberi warna pada halaman web anda
<body background=”Gambar.jpg”> = memberi background gambar pada halaman web anda,jika anda ingin gambar anda terlihat dan tidak terjadi kesalahan buatlah semua pekerjaan anda dalam 1 folder

<a> … </a> = Membuat hyperlink/link

contoh :

<a href=”google.com”> Home </a> = jika anda klik home anda akan menuju halaman google

<img> = memasukan gambar pada halaman web anda

contoh :

<img src=”dian.jpg”> = perhatikan extensi pada image nya jika berextensi .gif jadi dian.gif tetapi jika jpeg jadi dian.jpg
<img src=”dian.jpg” width=”50″ height=”50″ > = untuk width dan height ini untuk mengatur ukuran gambar

<font> … </font> = membuat tulisan pada halaman web

contoh atributnya :

<font size =”4″ color=”blue” face=”arial”> dianluffi.wordpress.com </font>

atribut size = ukuran tulisan
atribut color = warna pada tulisan
atribut face = jenis untuk tulisannya
lalu tutup dengan “</font>”

<marquee> … </marquee> = tulisan berjalan atau bergerak pada halaman web anda

contoh atribut dalam marquee :

DIRECTION = Atribut ini digunakan untuk menentukan arah gerak dari tampilan apakah ingin ke kiri, kanan, atas, atau bawah

<marquee direction=”right”> dianluffi.wordpress.com </marquee> = tulisan berjalan dari kiri ke kanan
<marquee direction=”left”> dianluffi.wordpress.com </marquee> = tulisan berjalan dari kanan ke kiri
<marquee direction=”up”> dianluffi.wordpress.com </marquee> = tulisan berjalan ke atas
<marquee direction=”down”> dianluffi.wordpress.com </marquee> = tulisan berjalan ke bawah

BEHAVIOR = Atribut ini digunakan untuk menentukan bagaimana tampilan bergerak, jika sebelumnya yang ditentukan adalah arahnya maka pada atribut BEHAVIOUR yang ditentukan adalah perilaku geraknya

<marquee behaviour=”scroll”> dianluffi.wordpress.com </marquee> = tulisan dengan penentuan BEHAVIOR = SCROLL maka tampilan akan bergerak sesuai arah yang ditentukan dan akan kembali mengulangi gerakan dari titik awal gerakan
<marquee behaviour=”slide”> dianluffi.wordpress.com </marquee> = tulisan dengan penentuan BEHAVIOR = SLIDE maka tampilan akan bergerak sesuai arah yang ditentukan lalu kemudian berhenti di titik akhir tanpa mengulangi gerakan sebelumnya

<marquee behaviour=”alternate”> dianluffi.wordpress.com </marquee> = tulisan dengan penentuan BEHAVIOR = ALTERNATE maka tampilan akan bergerak bolak-balik

SCROLL DELAY = Atribut ini digunakan untuk menentukan jeda waktu antara tiap gerakan dari tampilan.,nilai yang di isi untuk atribut ini adalah berupa angka dalam mili detik

<marquee scrolldelay=”500″> dianluffi.wordpress.com </marquee> = Delay 500 mili detik
<marquee scrolldelay=”1000″> dianluffi.wordpress.com </marquee> = Delay 1000 mili detik

BGCOLOR = Atribut BGCOLOR pada tag MARQUEE akan menghasilkan jalur gerakan memiliki warna,prinsip kerja atribut ini sama dengan atribut BGCOLOR pada tag TABLE yaitu memberikan warna latar

<marquee bgcolor=”blue”> dianluffi.wordpress.com </marquee> = tag ini bergerak dengan memberikan warna pada dianluffi.wordpress.com

HSPACE = Atribut ini berguna untuk memberikan jarak antara tampilan bergerak dengan tulisan yang ada disamping kanan dan kiri tulisan

Selamat datang <marquee width=”20%” bgcolor=”blue”> dianluffi.wordpress.com <br> one piece </marquee> thank you

VSPACE = Atribut ini berguna untuk memberikan jarak antara tampilan bergerak dengan tulisan yang ada diatas dan dibawah tulisan

Selamat datang <br> <marquee width=”20%” bgcolor=”blue”> dianluffi.wordpress.com <br> one piece </marquee><br> thank you

<big> … </big> = membuat tulisan menjadi besar

<small> … </small> = membuat tulisan menjadi kecil

<b> … </b> = membuat tulisan bercetak tebal / bold

<i> … </i> = membuat tulisan bercetak miring / italic

<u> … </u> =membuat tulisan bergaris bawah / underlined

<hn>Judul paragraf</hn> ——>n = 1,2,3,4,5,6 (tingkat judul) = Untuk menuliskan judul suatu paragraf atau lebih dikenal sebagai heading

<p> … </p> = membuat paragraf

<br> = tag untuk mengganti baris ,tag ini tidak perlu di tutup

<tr> … </tr> = tag untuk membuat baris pada table

<td> … </td> = tag untuk membuat kolom/cell pada table

<table> … </table> = untuk mebuat table

Pada tag table terdapat beberapa atribut yaitu :

<table border=”1”> … </table> = merupakan perintah utama dalam pembuatan tabel,pada script ini yang dimaksud dengan border itu adalah ketebalan untuk table nya yaitu table dengan ketebalan 1px,jika anda ganti 1 itu dengan 2 maka garis bordernya juga semakin tebal

align=”…” untuk mengatur tabel rata tengah, kanan, atau kiri
width=”…” untuk mengatur lebar tabel,bisa di isi dengan satuan pixel atau persen.
Contoh:
<table width=”80%”> atau <table width=”600”>
height=”…” untuk mengatur tinggi table
valign=”…” untuk mengatur perataan secara vertikal dari suatu cell.Seperti top, middle, dan bottom
bgcolor=”…” untuk mengatur warna background tabel,baris, atau cell

<li> … </li> = Untuk menandai suatu item dari daftar (enumerasi), diawali dengan simbol ” • ” (bullet) Kelompok item harus diapit oleh tag <ul> … </ul> dalam daftar bertingkat. Untuk menomori enumerasi dengan nomor urut (1,2,3), apitlah dengan tag <ol>… </ol>

contoh :

<sup> …. </sup> & <sub> … </sub> = Untuk menandai bagian karakter agar dicetak tinggi atau rendah, biasanya untuk rumus matematika atau kimia.

<!– –> Memberi komentar atau keterangan. Kalimat yang terletak pada tag kontiner ini tidak akan terlihat pada browser

<a name> Membuat nama bagian yang didefinisikan pada link pada halaman yang sama <applet> Sebagai awal dari Java applets

<area> Mendefinisikan daerah yang dapat diklik (link) pada image map

<basefont> Membuat atribut teks default seperti jenis, ukuran dan warna font

<bgsound> Memberi (suara latar) background sound pada halaman web

<blink> Membuat teks berkedip

<caption> Membuat caption pada tabel

<center> Untuk perataan tengah terhadap teks atau gambar

<comment> Meletakkan komentar pada halaman web tidak tidak akan nampak pada browser

<dd> Indents teks

<div> Represents different sections of text.

<embed> Menambahkan sound or file avi ke halaman web

<fn> Seperti tag <a name>

<form> Mendefinisikan input form

<frame> Mendefinisikan frame

<frameset> Mendefinisikan attribut halaman yang akan menggunakan frame

<hr> Membuat garis horizontal

<input> Mendefinisikan input field pada form

<map> Mendefinisikan client-side map

<nobr> Mencegah ganti baris pada teks atau images

<noframes> Jika browser user tidak mendukung frame

<ol> Mendefinisikan awal dan akhir list

<pre> Membuat teks dengan ukuran huruf yg sama

<script> Mendefinisikan awal script

<!DOCTYPE> =Mendefinisikan informasi tipe dokumen

<abbr> = Digunakan untuk menguraikan satu ungkapan yang disingkat dan Anda dapat memberikan informasi bermanfaat kepada penelusur-penulusur page source(halaman sumber kode) / pembaca layar, sistem terjemahan dan mesin pencari yang berasal dari singkatan yang sudah diuraikan, tetapi saat di browser uraian tersebut tidak akan tampil dan hanya sebagai informasi saja

<acronym> = Mendefinisikan akronim / fungsi tag ini kurang lebih sama dengan tag <abbr>

<address> = Mendefinisikan informasi kontak untuk penulis/pemilik dokumen

<base /> = Mendefinisikan URL dasar/target untuk semua URL relatif dalam dokumen

<bdo> = Digunakan untuk menimpa arah teks

<blockquote> = Mendefinisikan sebuah kutipan panjang. Pada saat di browser teks akan tampil menjorok kedalam

<button> = Mendefinisikan sebuah tombol diklik

<cite> = Mendefinisikan kutipan

<code> = Mendefinisikan sebuah bagian dari kode komputer

<col /> = Mendefinisikan nilai atribut dari satu kolom atau lebih dalam sebuah tabel

<colgroup> = Menentukan kelompok dari satu kolom atau lebih dalam sebuah tabel untuk performatan

<del> = Untuk memberi garis tengah pada teks/mencoret teks

<dfn> = Mendefinisikan sebuah istilah definisi

<dir> = Mendefinisikan sebuah daftar direktori

<dl> = Mendefinisikan sebuah daftar definisi

<dt> = Mendefinisikan istilah (item) dalam daftar definisi

<em> = Membuat teks miring. Fungsi tag ini sama dengan tag <i> tetapi tag <em> yang lebih dianjurkan/ditekankan pada penggunaan untuk teks miring

<fieldset> = Untuk mengelompokkan elemen-elemen yang terkait dalam form / membuat seperti frame-box di dalam form

<iframe> = Mendefinisikan sebuah inline frame

<ins> = Membuat teks bergaris bawah

<kbd> = Mendefinisikan teks yang di input dari keyboard

<label> = Mendefinisikan label untuk sebuah elemen <input>

<legend> = Mendefinisikan sebuah caption untuk elemen <fieldset>

<link /> = Mendefinisikan hubungan antara dokumen dan sumber eksternalnya

<listing> = Fungsi tag ini sama dengan tag <pre> dan dianjurkan menggunakan tag <pre> karena tag <listing> tidak layak/diprotes

<menu> = Mendefinisikan sebuah daftar menu

<meta /> = Mendefinisikan metadata tentang sebuah dokumen HTML

<noscript> = Jika browser user tidak mendukung client-side scripts

<object>meletakkan embed sebuah objek

<optgroup> = Menampilkan beberapa pilihan yang sudah dikelompokkan dalam bentuk sebuah daftar drop-down

<option> = Menampilkan beberapa pilihan yang berbentuk dalam sebuah daftar drop-down

<param /> = Mendefinisikan sebuah parameter untuk objek

<q> = Mendefinisikan sebuah kutipan singkat

<s> = Untuk memberi garis tengah pada teks/mencoret teks, fungsi tag ini sama dengan tag <del> tetapi tag <s> tidak dianjurkan sebagai gantinya menggunakan tag <del>

<samp> = Mendefinisikan contoh keluaran dari program komputer

<select> = Membuat daftar drop-down

<span> = Mendefinisikan sebuah section dalam dokumen

<strike> = Untuk memberi garis tengah pada teks/mencoret teks, fungsi tag ini sama dengan tag <del>

<strong> = Membuat teks tebal, fungsi tag ini sama dengan tag <b>

<style> = Mendefinisikan informasi style untuk dokumen HTML

<tbody> = Untuk mengelompokkan isi body di dalam sebuah tabel

<textarea> = Mendefinisikan sebuah kontrol input multiline

<tfoot> = Untuk mengelompokkan isi footer di dalam sebuah tabel

<th> = Mendefinisikan sel header di dalam sebuah tabel

<thead> = Untuk mengelompokkan isi header di dalam sebuah tabel

<tt> = Mendefinisikan teletype text

<ul> = Mendefinisikan daftar dalam format bullet

<var> = Mendefinisikan sebuah variabel

Sekian dari saya,semoga ini bermanfaat bagi kita semua...

Trima kasih... :)

Fungsi tag dan atribut dalam HTML

Senin, 01 April 2013

Tag HTML