Tag, Elemen, Atribut fileadalah bagian mendasar yang merupakan kerangka halaman website dan pasti...
54
Materi HTML SMA KELAS X 1
Transcript of Tag, Elemen, Atribut fileadalah bagian mendasar yang merupakan kerangka halaman website dan pasti...
Materi HTML SMA KELAS X
1
Tag, Elemen, Atribut
2
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> 3
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>.
4
Contoh tag yang ada dalam Kerangka dasar HTML.
5
Elemen Elemen 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.
6
Contoh Elemen Kerangka HTML:
7
Penjelasan Contoh Elemen Kerangka HTML: <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
8
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. 9
Atribut Atribut 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.
10
11
Atribut Contoh 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
12
PARAGRAF, FORMAT TEKS, dan KOMENTAR HTML
13
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.
14
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.
15
Contoh:
16
Hasil:
17
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".
18
Komentar HTML Komentar 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 -->
19
Contoh:
20
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. 21
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.
22
23
List HTML List 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.
24
<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:
25
HASIL
KE 1
Hasil:
26
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.
29
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.
30
Tag Div: Atribut ID ID : 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.
31
Tag Div: Atribut Class Class : 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.
32
KONTEN SIDEBAR SIDEBAR
HEADER
FOOTER
Gambaran Umum Tag Div
34
Link HTML
35
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.
Beberapa hal yang perlu diperhatikan dalam pemberian nama dokumen web, agar link dapat
berfungsi dengan baik :
1. Penamaan file dengan huruf kecil semua
2. Jangan ada spasi serta hindari non-karakter alphabet
36
Jenis-jenis Link dalam HTML Dalam HTML, link dibedakan menjadi 3 jenis, yaitu :
•LINK ABSOLUT
adalah link yang akan menunjuk ke halaman dari situs web lain. Penulisan alamatnya pun harus ditulis
secara lengkap. Contoh : <a href=http://www.w3.org/>W3</a>
•LINK RELATIF
adalah link yang tujuannya mengarah ke dokumen-dokumen lain yang masih berada di dalam satu situs web
yang sama (komputer yang sama). Penulisan alamat tujuannya pun tidak perlu ditulis secara lengkap, cukup
nama dokumennya saja, dan nama direktorinya (jika ada).
Perhatikan contoh kode berikut :
<a href=”kontak.html”>Kontak</a>
<a href=”images/jeep/sahara.jpg”>Lihat Foto Jeep Wrangler Sahara</a>
Tidak perlu ditulis lengkap seperti berikut :
<a href=http://www.situskita.com/kontak.html>Kontak</a>
<a href=http://www.situskita.com/images/jeep/sahara.jpg>Lihat Foto Jeep Wrangler Sahara</a>
•LINK KE BAGIAN DOKUMEN TERTENTU
37
Tag dan Atribut Link HTML • Tag <a> untuk mendefinisikan tautan
• atribut href untuk menentukan alamat tautan
• atribut target untuk menentukan tempat membuka dokumen yang ditautkan
• atribut id (id = "value") untuk mendefinisikan bookmark di halaman
• atribut title untuk menentukan informasi tambahan tentang suatu elemen. Informasi ini paling sering ditampilkan sebagai teks tooltip ketika mouse bergerak di atas elemen.
Contoh penulisan Link Anchor:
<a href="http://www.w3schools.com" title=“Belajar Web“ target=“_blank”>W3SCHOOLS</a>
<a href=”index.html”>Home</a>
38
Contoh:
39
Image HTML
40
Image HTML Image 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>.
41
Atribut Image HTML Tag <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 dapat ditampilkan.
title : Digunakan untuk memberi nama / judul suatu gambar.
align : Digunakan untuk mengatur posisi teks disekitar gambar. Nilai yang dipakai adalah Top, Middle, Bottom, Left, Right. Atribut ini tidak dikenali di HTML5 dan mulai ditinggalkan di HTML4.
42
Contoh
43
Tabel HTML
44
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 dan bagus secara desain. Tampilan data yang berasal dari database pun akan lebih nyaman dilihat jika ditampilkan dalam bentuk table. Oleh karena itu, sangatlah penting utuk mempelajari bagaimana pembuatan table didalam website.
45
Untuk membuat Table, HTML sudah menyediakan tag khusus untuk digunakan dalam membuatnya, 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.
46
<caption>
<th> <th> <th>
<td> <td> <td>
<td> <td> <td>
<table>
</table>
<tr>
<tr>
</tr>
</tr>
<tr>
</tr>
47
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
48
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. 49
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.
50
Contoh Kode Table dan Hasil Keluarannya
51
FORM
52
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.
53
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
54
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".
55
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.
56
Contoh Kode Form dan Hasil Keluarannya
57
