Tag, Elemen, Atribut - tiksmadd.files.wordpress.com · Tag akan membentuk baris baru kebawah dan...
52
Materi HTML SMA KELAS X
Transcript of Tag, Elemen, Atribut - tiksmadd.files.wordpress.com · Tag akan membentuk baris baru kebawah dan...
Materi HTMLSMA KELAS X
Tag, Elemen, Atribut
Tag, Elemen, Atribut Kerangka HTML Pada HTML ada yang namanya Tag, Elemen dan Atribut HTML. Semua itu merupakan bahasa HTML yang
harus dipahami. Untuk tag, elemen dan atribut kerangka HTML adalah bagian mendasar yang merupakan
kerangka halaman website dan pasti ada di setiap halaman HTML. Semuanya tidak bisa ditinggalkan karena
sudah merupakan kesatuan didalam halaman HTML.
Apa saja yang merupakan kerangka HTML? Kerangka HTML bisa dimulai dari:
<html> </html>
<head> </head>
<title> </title>
<body> </body>
Tag Tag HTML adalah definisi kode HTML yang digunakan untuk memenggal, mengelompokkan
atau memisahkan antara kode satu dengan yang lainnya.
Contoh penulisan Tag HTML:
Contoh: kode <html> </html>, <head> </head>, <title> </title>, <body> </body>
Kode Tag <html> ditutup dengan </html>, Kode Tag <head> ditutup dengan </head>, Kode
Tag <title> ditutup dengan </title>, Kode Tag <body> ditutup dengan </body>.
Contoh tag yang ada dalamKerangka dasar HTML.
ElemenElemen HTML merupakan implementasi dari definisi Tag HTML. Tag HTML adalah juga merupakan
Elemen dari HTML. Jika Tag adalah hanya definisi atau pendefinisian sedangkan Elemen adalah
implementasi atau kode sesungguhnya.
Contoh Elemen Kerangka HTML: <html> </html>, <head> </head>, <title> </title>, <meta> </meta>,
<link> </link>, <body> </body>
Contoh kode Elemen HTML lainnya: <h1> </h1>, <p> </p>, <b> </b>, <i> </i>, <u> </u>, <br/>, <div>
</div>, <span> </span>, <table> </table>, <form> </form> dan masih banyak lagi.
Contoh Elemen Kerangka HTML:
Penjelasan Contoh Elemen KerangkaHTML: <head> </head>: adalah Eleman HTML yang berfungsi untuk bagian tempat pengelompokan kode
head/kepala. Atau kode bagian awal yang akan diload.
<title> </title>: adalah Eleman HTML yang berfungsi untuk tempat menuliskan judul halaman.
<meta> </meta>: adalah Elemen HTML yang berfungsi untuk mendefinisikan informasi-informasi yang
terkandung didalam halaman website. Kalian bisa isi Author dengan nama kalian, maksudnya adalah
memberitahukan informasi tentang halaman website yang dibuat oleh seorang "Author".
<link> </link>: adalah Elemen HTML yang berfungsi untuk mendefinisikan link yang dituju, biasanya ada link
penyambung untuk pergi ke file-file, seperti file CSS, file renderan.
<body> </body>: adalah Eleman HTML yang berfungsi untuk menempatkan bagian konten atau isi halaman
website.
Penjelasan Contoh Elemen HTML lainnya:<h1> : adalah Elemen header yang digunakan untuk membuat ukuran size font teks berukuran h1.
<p> : adalah Elemen yang berfungsi untuk membuat paragraf baru.
<b> : Elemen yang berfungsi untuk mempertebal teks.
<i> : Elemen yang berfungsi untuk membuat teks miring.
<br> : berfungsi untuk membuat baris baru.
<div> : berfungsi untuk membuat elemen baru sehingga mudah untuk memisahkan dengan elemen yang lainnya.
<span> : mirip dengan elemen <div> yaitu untuk memisahkan dengan elemen baru, tetapi default dari span sudah
dibekali dengan display:inline-block pada CSS nya.
<table> : Elemen yang digunakan untuk membuat table dalam halaman website.
<form> : Elemen yang digunakan untuk membuat list form.
AtributAtribut pada kerangka HTML adalah kode-kode pelengkap atau pendukung didalam Elemen HTML.
Contoh Atribut HTML:
- Didalam tag elemen <meta> terdapat atribut seperti: name, content.
- Didalam tag elemen <link> terdapat atribut seperti: type, href, rel.
Atribut name didalam tag <meta> adalah nama definisi dari maksud meta yang bersangkutan.
Biasanya selalu berhubungan dengan atribut didalam meta tersebut.
Atribut href didalam tag <link> adalah alamat link yang dituju.
Atribut type didalam tag <link> adalah type atribut yang dimaksud didalam tag.
Atribut rel didalam tag <link> adalah style atau gaya bahasa yang dipakai didalam tag tersebut.
AtributContoh Atribut HTML lainnya:
Didalam elemen <table> terdapat Atribut cellpadding, cellspacing, width, height
Didalam elemen <form> terdapat Atribut name, class, action.
- cellspadding : adalah menentukan jarak isi cell dengan bingkai.
- cellspacing : adalah menentukan jarak spasi antar cell.
- width : adalah menentukan lebar table.
- height : adalah menentukan tinggi table.
- name : adalah membuat atribut nama untuk form tersebut.
- class : adalah nama class untuk kode CSS.
- action : adalah link render tujuan untuk memproses suatu aksi
PARAGRAF, FORMAT TEKS, dan KOMENTAR HTML
PARAGRAF dan FORMAT TEKS HTML
Paragraf HTML adalah kalimat baru atau baris baru yang ada didalam halaman HTML.
Penulisan paragraf HTML bisa dilakukan dengan tag kode <p> dan ditutup dengan
</p>. Tag <p> akan membentuk baris baru kebawah dan membentuk paragraf.
Sedangkan Format Teks HTML adalah pengaturan gaya teks yang bisa digunakan
didalam halaman HTML. Penulisan gaya teks HTML bisa dilakukan dengan bermacam-
macam tag elemen HTML. Dengan gaya teks tersebut kita bisa menyesuaikan sesuai
keperluan yang sedang kita pakai.
Contoh Format Teks HTML:<b> : Digunakan untuk membuat teks tercetak tebal.
<em> : Digunakan untuk membuat penekanan pada teks.
<i> : Digunakan untuk membuat teks tercetak miring.
<u> : Digunakan untuk membuat teks bergaris bawah.
<small> : Digunakan untuk membuat teks tercetak kecil.
<strong> : Digunakan untuk menyatakan bahwa teks tersebut penting.
<sub> : Digunakan untuk membuat teks tercetak sebagai subscript.
<sup> : Digunakan untuk membuat teks tercetak sebagai superscript / pangkat.
<ins> : Digunakan untuk menyatakan bahwa teks yang diapit oleh tag <ins> itu disisipkan.
<del> : Digunakan untuk menyatakan teks yang diapit oleh tag <del> itu dihapus / teks dicoret.
<mark> : Digunakan untuk menyatakan teks yang ditandai (highlighted) atau teks diberi efek stabilo.
Contoh:
Hasil:
Format Teks Paragraf
Catatan: Browser menampilkan <strong> sebagai <b>, dan <em>
sebagai <i>. Namun, ada perbedaan dalam arti tag ini: <b> dan <i>
mendefinisikan teks tebal dan miring, tapi <strong> dan <em> berarti
bahwa teks adalah "penting".
Komentar HTMLKomentar HTML adalah kalimat berita yang diberikan di antara baris kode HTML yang berfungsi
untuk memberikan komentar atau maksud dari arti baris kode HTML tersebut, agar mudah
diingat dan dimengerti lebih lanjut. Baris komentar ini tidak akan di eksekusi sebagai baris kode
HTML, sehingga aman jika diletakkan di potongan kode HTML.
Penulisan Komentar HTML:
<!-- baris komentar HTML -->
Contoh:
Hasil:
Lihat antara kode HTML dengan
hasil tampilan di Browser, kode ini
<!-- Dibawah ini baris Judul baru -->
tidak muncul di browser, artinya
kode tersebut sebagai Komentar
HTML dan tidak dieksekusi.
Komentar HTML
Manfaat dari Komentar HTML:
Mempermudah arti dari pada kode yang dibuat.
Mempermudah pencarian dan maksud untuk kode HTML yang panjang.
Mempermudah untuk para Developer/Programmer jika kode HTML sudah
diberikan kepada Programmer lain.
List HTMLList HTML adalah kode HTML yang berfungsi untuk menampilkan daftar dalam halaman web.
HTML memiliki tag khusus untuk menampilkan list. Jika daftar tersebut tidak urut bisa
menggunakan "bullet", maka tag yang digunakan adalah <ul> yang berarti Unordered List.
Namun jika daftar tersebut adalah daftar yang penting urutannya "angka", maka tag yang
digunakan adalah <ol> yang berarti Ordered List.
<html><body>
<h2>An ordered HTML list</h2>
<ol><li>Coffee</li><li>Tea</li><li>Milk</li>
</ol>
</body></html>
<html><body>
<h2>An unordered HTML list</h2>
<ul><li>Coffee</li><li>Tea</li><li>Milk</li>
</ul>
</body></html>
1
Contoh:
HASILKE 1
Hasil:
Tag Div
Tag Div adalah tag yang ada didalam pengkodean HTML, berfungsi untuk
mempermudah pemformatan dengan melakukan satu tag yaitu Div. Tag Div
mempunyai dua macam atribut yaitu Class dan Id. Atribut ini berhubungan
dengan script CSS. Intinya pembuatan tag Div sangat membantu dalam custom
kode HTML, yang memang semakin rapi dan simple kode program terutama
HTML akan semakin powerfull juga terhadap halaman website.
Tag Div
Tag ini digunakan untuk mengelompokkan bagian header, content, sidebar,
footer, dan lainnya secara terpisah namun dalam satu tampilan tertentu.
Div biasanya digunakan untuk membuat layer yang akan memudahkan kita
untuk membuat layout sesuai dengan design yang di inginkan. Untuk membuat
layer kita menggunakan tag Div dan diberi atribut ID ataupun Class.
Tag Div: Atribut IDID : Atribut ini digunakan untuk penamaan elemen pada HTML yang memiliki karakteristik yang unik
atau berbeda. Tidak diperkenankan ada dua elemen yang memiliki ID yang sama. Salah penggunaan
ID, maka akan berdampak pada hasil tampilan web itu sendiri.
Tag Div: Atribut ClassClass : Digunakan untuk memberikan penamaan elemen yang memiliki karakteristik atau struktur yang
dapat digunakan secara berulang-ulang dalam tag HTML. Sebagai contohnya, silahkan perhatikan
atribut Class pada script HTML berikut ini :
Dalam script di atas, terdapat dua Class yang sama dalam tag HTML yang berbeda. Biasanya contoh ini
digunakan saat kita akan memberikan style css tertentu pada setiap tag yang diberikan Class menu-on
atau yang lainnya.
KONTENSIDEBAR SIDEBAR
HEADER
FOOTER
GambaranUmumTag Div
Link HTML
Link HTML
Link Anchor HTML adalah link aktif atau teks aktif yang bisa dibuka atau diklik dan
akan menuju alamat tujuan link tersebut. Link menjadi penghubung antara satu
halaman dengan halaman yang lain. Dengan Link kita bisa membuat alamat tujuan
kemana saja, hanya masukan alamat link saja didalam kode link anchor HTML nya.
Link ditandai dengan nama Anchor dengan Tag <a>.
Tag <a> mempunyai atribut href yang artinya digunakan untuk link tujuan.
Contoh penulisan Link Anchor: <a hef="http://www.w3schools.com" title=“Belajar Web">w3schools</a>
Contoh:
Image HTML
Image HTMLImage HTML atau disebut Gambar adalah gambar yang ditampilkan didalam halaman website
dengan cara memanggil file gambar yang bersangkutan. Tampilan halaman website akan lebih
menarik jika ditambahkan media gambar. HTML mendukung banyak format gambar seperti : GIF,
JPEG, PCX, PNG, WMF, dan lain-lain. Namun kebanyakan pengguna menggunakan format GIF,
JPEG, PNG. Untuk menggunakan atau menampilkan gambar digunakan tag <img>.
Atribut Image HTMLTag <img> mempunyai banyak atribut, seperti :
src : Digunakan untuk menunjukkan URL atau direktori tempat file gambar berada.
width : Digunakan untuk mengatur lebar gambar.
height : Digunakan untuk mengatur tinggi gambar.
alt : Digunakan untuk menampilkan teks pengganti gambar jika gambar tidak dapatditampilkan.
title : Digunakan untuk memberi nama / judul suatu gambar.
align : Digunakan untuk mengatur posisi teks disekitar gambar. Nilai yang dipakaiadalah Top, Middle, Bottom, Left, Right. Atribut ini tidak dikenali di HTML5 danmulai ditinggalkan di HTML4.
Contoh
Tabel HTML
Table sering digunakan didalam halaman website, misalnya saja dalam menampilkan data siswa, rekap keuangan, dan masih banyak lagi. Dengan table, tampilan website akan lebih rapi danbagus secara desain. Tampilan data yang berasal dari database pun akan lebih nyaman dilihatjika ditampilkan dalam bentuk table. Oleh karena itu, sangatlah penting utuk mempelajaribagaimana pembuatan table didalam website.
Untuk membuat Table, HTML sudah menyediakan tag khusus untuk digunakan dalammembuatnya, antara lain :
<table> : Digunakan untuk mendefinisikan sebuah table.<tr> : Digunakan untuk mendefinisikan baris table.<th> : Digunakan untuk mendefinisikan judul pada sel dalam table.<td> : Digunakan untuk mendefinisikan isi tiap sel dalam table.<caption> : Digunakan untuk membuat judul table.
<caption>
<th> <th> <th>
<td> <td> <td>
<td> <td> <td>
<table>
</table>
<tr>
<tr>
</tr>
</tr>
<tr>
</tr>
Judul Tabel
Judul kolom 1 Judul kolom 2 Judul kolom 3
Baris 1 Kolom 1 Baris 1 Kolom 2 Baris 1 Kolom 3
Baris 2 Kolom 1 Baris 2 Kolom 2 Baris 2 Kolom 3
Sedangkan atribut-atribut dalam membuat Table seperti :
align : Digunakan untuk mendefinisikan posisi horisontal table, center, justify, left, right.
Valign : Digunakan untuk mendefinisikan posisi vertikal teks dalam sel, baseline, top, bottom, middle.
Background : Digunakan untuk mendefinisikan gambar latar belakang table.
Bgcolor : Digunakan untuk mendefinisikan warna latar belakang table.
border : Digunakan untuk mendefinisikan tebal bingkai table.
Bordercolor : Digunakan untuk mendefinisikan warna bingkai table.
Cellspacing : Digunakan untuk mendefinisikan jarak spasi antar sel.
Cellpadding : Digunakan untuk mendefinisikan jarak isi sel dengan bingkai.
Height : Digunakan untuk mendefinisikan tinggi table.
Weight : Digunakan untuk mendefinisikan lebar table.
Untuk tag <td> ada tambahan atribut, yaitu :
colspan : Digunakan untuk mendefinisikan jumlah kolom yang digabung.
rowspan : Digunakan untuk mendefinisikan jumlah baris yang digabung.
nowrap : Digunakan untuk mendefinisikan agar teks tetap satu baris.
Contoh Kode Table dan Hasil Keluarannya
FORM
Form adalah lembar pengisian atau daftar pengisian data. Daftar pengisian ini biasanya
untuk meminta data informasi dari user untuk kemudian disimpan. Setelah data
disimpan biasanya data tersebut akan diolah lebih lanjut sesuai kebutuhan. Umumnya
pengolahan form dilakukan pada server dengan menggunakan script yang bersifat
server-side. Bahasa Pemrograman yang bersifat server-side adalah seperti : PHP,
Phyton, ASP.Net dan lain-lain.
Form sering digunakan didalam website. Contoh saja: Pendaftaran Akun, Form Login,
Form pengajuan pinjaman, Form pesan dan masih banyak lagi.
Tag Form HTML:<form> : digunakan untuk pendefinisian awal pembuatan form.
<input> : digunakan untuk membuat suatu inputan data. Biasanya jumlah huruf dari data
"input" yang dipakai berkisar 1- 255 huruf, seperti inputan nama, alamat dan lainnya.
<textarea> : digunakan untuk membuat suatu inputan data seperti tag <input>, tetapi untuk
<textarea> besaran huruf/angka yang dipakai bisa lebih banyak. Seperti inputan
pesan, yang bisa membutuhkan ratusan bahkan ribuan suku kata.
<select> : digunakan untuk inputan pilihan data yang sudah diatur oleh membuat program.
Seperti pilihan data Agama, tanggal lahir.
<option> : Tag ini berpasangan dengan tag <select> untuk membuat list inputannya,
Atribut Form HTML<form name="">digunakan untuk memberikan nama form.
<form class="">digunakan untuk menghubungkan dengan file CSS yaitu nama class.
<form action="">digunakan untuk menghubungkan dengan script pemrosesan inputan data.
Nilai atribut action bersifat server-side yang dapat menghubungkan ke
database.
<form method="">digunakan untuk memberikan cara request bagaimana proses data
tersebut akan diolah. Nilainya bisa berupa "GET/POST".
Atribut Form HTML<input type=""> digunakan untuk membuat jenis inputan yang dibuat. Jenis atau
valuenya bisa berupa: text, email, number, checkbox, radio button,
submit, reset.
<input name=""> digunakan untuk memberikan nama pada inputan tersebut.
<textarea name="">digunakan untuk memberikan nama pada textarea.
<select name=""> digunakan untuk memberikan nama pada inputan select.
<option value=""> digunakan untuk memberikan "nilai" yang ada dalam tag <option>.
Contoh Kode Formdan Hasil Keluarannya
