Tag HTML Lengkap di Notepad++
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 notepadNah 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 :
<head>
<title> home page saya </title>
</head>
<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
<table border=”1″ valign=”top” align=”center” width=”250″ height=”400″ bgcolor=”blue”> … </table>
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
Komentar ini telah dihapus oleh pengarang.
BalasHapusKode nya sangat lengkap sekali
BalasHapusgreget :'v
BalasHapusthanks gan, its good job...
BalasHapusmantaps surantaps masbrooo, thanks
BalasHapusTerimakasih mas. Cocok buat pemula spt saya. ::>_<::
BalasHapusMakasih Mas. Kodenya sayang membantu bagi pemula seperti saya.
BalasHapusMkasih gan(y)
BalasHapusCuakeeeep,,, thanks, untuk pemula bagus sekali ini...
BalasHapusmantap sekali, sebagai modal awal utk pembelajar pemula dan sangat mudah dimengerti .sungguh lengkap sekali
BalasHapusWTH :'v
BalasHapusNyirr..
Greget :v
maju terus blognya!!
Sipp, keren dah penjelasannya
BalasHapusThanks :D
masih kurang lengkap kang salam anak TKJ
BalasHapusjadi cara nge cek nya gimana???
BalasHapusSangat berguna bagi pemula seperti saya
BalasHapusKomentar ini telah dihapus oleh pengarang.
BalasHapushalo mau tanya, kalau mau buat misalkan jumlah baris 10 dalam 1 kolom gt gmn ya, jd biar barisnya sudah permanen tetap muncul 10 baris gt, walaupun kosong.
BalasHapusLengkap dah THANKS
BalasHapusDi coba dulu ya gan
BalasHapusMy blog
Dicoba dlu yagan
BalasHapusTerima kasih atas artikelnya ,semoga selalu bermanfaat bagi semua
BalasHapusmyblog
terimakasih
BalasHapussangat membantu. terima kasih
BalasHapusKodenya ampuh,lengkap
BalasHapusdan satu lagi ,templatenya suasana indo,batik greget . hehe
visitt ya om http://mudore.bloger.id
matur nuwun ilmunya boss. sukses selalu
BalasHapusSalam kenal dari Tegalgondo, Karangploso, Malang, East Java. kunjungi balik ya :
BalasHapushttp://www.javanesetrans.com
salam kenal ,,, sebelumnya terima kasih banyak pencerahannnya. semangatttttttt
BalasHapusTerima kasih, ini bisa menambah ilmu.
BalasHapuskunjungi..
keren sangat mudah di pahami dan digunkan
BalasHapuskunjungi juga blog saya
terimakasih. Sangat membantu skali
BalasHapusJangan lupa kunjungi blog saya
terima kasih izin share
BalasHapusMy blog
wih..bagus banget tu gan....menarik.
BalasHapussalam lauwba.com
kursus web jogja
Terimakasih.. tulisannya sangat bermanfaat..
BalasHapusMy blog
maksaih mas atas infonya karena sangat membantu buat yang mau belajar html
BalasHapusTerimakasih bos atas infonya karena sangat membantu bagi yg mau belajar html..sangat bermanfaat..
BalasHapusKunjungi website kampus saya http://www.atmaluhur.ac.id dan websites saya https://kawakenakeruce.mahasiswa.atmaluhur.ac.id
mantappp
BalasHapushebat bagus terus kembangkan supaya jadi anak programmer
BalasHapushebat bagus terus kembangkan supaya jadi anak programmer
BalasHapusTerimakasih artikelnya sangat bagus dan membantu saya, ditunggu artikel berikutnya dan terus berkarya, perkenalkan nama saya dela periska mahasiswa dari stmik atma luhur pangkal pinang kunjungi website kampus kami https://www.atmaluhur.ac.id
BalasHapusTerimakasih kak untuk ilmu nya yang di bagi di blog ini, sangat bermanfaat dan berguna bagi saya yang pemula dan memenuhi tugas kuliah saya . Tetap semangat untuk berbagi ilmu nya ya kak. Semoga kedepan dapat memberikan ilmu yang bermanfaat lainnya. Perkenalkan Nim saya 1922500096, Nama Ardila Yunita, Kelompok SI2J,link kampus https://www.atmaluhur.ac.id/
BalasHapusmakasih banyak min
BalasHapussolder uap 4in1