HTML - 2

Arita Witanti
Informatika - UMBY
Hyperlink ,IMG,List Table Form

Bahasan
HYPERLINK , IMG ,
LIST
  Tag <a> dapat digunakan dalam 2 cara:
 Untuk membuat link dengan dokumen baru, menggunakan atribut
Hyperlinks href
 Untuk membuat penanda (bookmark) di dalam dokumen,
menggunakan atribut name
  Kode HTML untuk membuat link:
<a href=“url”>Teks Link</a>
 Atribut href untuk menentukan link yang dituju.
 Contoh:
Sintaks Link
<a
HTML href=“http://www.google.com/”>
Buka Google</a>
 Sehingga akan ditampilkan seperti berikut:
Buka Google
  url dalam atribut href juga bisa merujuk pada dokumen HTML
lainnya.
 Contoh:
<a href=“dokumen.html”>
Sintaks Link Teks Link</a>
HTML  Dalam elemen anchor, Teks Link tidak harus berupa teks, namun
bisa gambar atau elemen HTML lainnya.

<a href=“url”><img
src=“Tulips.jpg”/></a>
  Atribut target digunakan untuk menentukan letak dokumen yang
di-link-kan untuk dibuka
 Contoh berikut menunjukkan bahwa dokumen yang di-link-kan
akan dibuka di window baru atau tab baru
Link HTML –  Contoh:
Atribut Target <a
href=“http://www.google.com/”
target=“_blank”>Buka
Google</a>
  Atribut title digunakan untuk memberikan teks penjelasan yang
lebih detil mengenai sebuah link.
 Title muncul sebagai tooltip.
 Contoh:
Link HTML –
Atribut Title <a href=“http://www.google.com/”
title=“Ini adalah link google”>
Buka Google</a>
tooltip
  Atribut name menentukan nama sebuah anchor
 Atribut ini digunakan untuk membuat penanda dalam sebuah
dokumen HTML

Link HTML –  Dalam HTML5 → lebih menggunakan id daripada name

 Contoh:
Atribut Name
<a name=“tips”>Tips</a>
 Buat link menuju bagian Tips di dalam dokumen yang sama
<a href=“#tips”>Buka Tips</a>
  Tag <img> merupakan empty element, yang berarti bahwa tag ini
hanya memiliki atribut dan bisa tidak memakai tag penutup.
Tag <img> dan  Untuk menampilkan gambar, gunakan atribut src (source).
Atribut src  Contoh:
<img src=“Tulips.jpg”/>
  Atribut alt digunakan untuk memberikan informasi tambahan
tentang gambar,.
Tag <img> dan  Teks ini akan muncul jika kursor diatas gambar atau jika gambar
tidak dapat ditampilkan (misalkan akibat koneksi yang lemah).
Atribut alt  Contoh:
<img src=“Tulips.jpg” alt=“Bunga Tulips”/>
  Atribut height → digunakan untuk mengatur tinggi gambar
 Atribut width → digunakan untuk mengatur lebar gambar
Mengatur
 Nilai atribut ini secara default ditentukan dengan satuan pixel
Tinggi dan  Contoh:
Lebar Image <img src=“Tulips.jpg” alt=“Bunga
Tulips” height=“200” width=“300”/>
  Secara umum, List HTML ada 2 macam:
 Ordered List
 Unordered List

 Ada 3 macam tipe list, yaitu:

Lists HTML  Ordered list, tag <ol> - numbers
 Unordered list, tag <ul> - bullets
 Definition list, tag <dl> - dictionary
 Ordered List: Unordered List:
1. Item pertama  Item
Lists HTML 2. Item kedua  Item
3. Item ketiga  Item
  Ordered list diawali dengan tag <ol> dan diakhiri dengan tag </ol>.
 Tiap item, diawali dengan tag <li> dan ditutup dengan tag </li>.
Ordered Lists
 Atribut type dalam elemen ol digunakan untuk menentukan tipe
numbering (contoh tipe numbering: 1, A, a, I, i) → tipe default = 1.
  Ordered list diawali dengan tag <ol> dan diakhiri dengan tag </ol>.
 Tiap item, diawali dengan tag <li> dan ditutup dengan tag </li>.
Ordered Lists
 Atribut type dalam elemen ol digunakan untuk menentukan tipe
numbering (contoh tipe numbering: 1, A, a, I, i) → tipe default = 1.
  Contoh:
<ol type=“A”>
<li>Makanan</li>
<li>Minuman</li>
</ol>

Ordered Lists
 Tampilan dalam web browser:

A. Makanan
B. Minuman
  Unordered list diawali dengan tag <ul> dan diakhiri dengan tag
</ul>.
 Tiap item, diawali dengan tag <li> dan ditutup dengan tag </li>.
Unordered
 Atribut type dalam elemen ul digunakan untuk menentukan tipe
Lists bulleting (contoh tipe bulleting: circle, square, disc) → tipe default
= circle.
  Contoh:
<ul type=“square”>
<li>Makanan</li>
<li>Minuman</li>
</ul>
Unordered
Lists  Tampilan dalam web browser:

■ Makanan
■ Minuman
  Definition list adalah sebuah list dari item, dengan deskripsi tiap
item.
 List ini menggunakan tag <dl>.
Definition Lists
 Tag <dl> untuk mendefinisikan bentuk list, tag <dt> untuk
mendefinisikan item, dan tag <dd> untuk mendeskripsikan item
dalam list.
  Contoh:

 Tampilan di browser:
<dl>
<dt>Makanan</dt>
Makanan
<dd>Berat</dd>
Berat
<dd>Ringan</dd Ringan
Definition Lists > Minuman
<dt>Minuman</dt> Kaleng
Soda
<dd>Kaleng</dd
>
<dd>Soda</dd>
</dl>
TABLE
  Tabel didefinisikan dengan tag <table>
 Sebuah tabel terdiri dari baris (dengan tag <tr>) dan tiap baris
Tabel HTML terdiri dari data cell (dengan tag <td>).
 Tag <td> dapat berisi teks, link, image, list, form, tabel lainnya, dll.
  Contoh kode HTML:
<table>
<tr>
<td>baris 1, kolom 1</td>
<td>baris 1, kolom 2</td>

Tabel HTML </tr>

<tr>
<td>baris 2, kolom 1</td>
<td>baris 2, kolom 2</td>
</tr>
</table>
Tabel HTML  Tampilan dalam web browser

baris 1 kolom 1 baris 1 kolom 2

baris 2 kolom 1 baris 2 kolom 2
  Elemen table dalam HTML jika tidak diberi atribut border, maka
tabel akan ditampilkan tanpa border.
Tabel HTML  Untuk menampilkan border, perlu ditambah atribut border pada
dan Atribut start tag.
Border  Contoh:
<table border=“1”>
  Header dalam sebuah tabel didefinisikan dengan tag <th>.
Header Tabel
 Teks yang berada di dalam elemen th akan dicetak tebal dan rata
HTML tengah.
  Contoh:
<table border=“1”>
<tr>
<th>Header 1</th>
Header 1 Header 2
<th>Header 2</th> baris 1, baris 1,
kolom 1 kolom 2
</tr>
Header Tabel
<tr>
HTML <td>baris 1, kolom 1</td>
Tampilan
<td>baris 1, kolom 2</td>
</tr>
</table>
Menggabungk
an Beberapa  Gunakan atribut rowspan untuk menggabungkan beberapa baris
Baris dan menjadi satu.

Beberapa  Gunakan atribut colspan untuk menggabungkan beberapa kolom

menjadi satu.
Kolom
(Spanning)
  Contoh kode HTML

<table border=“1”>
<tr>
<td rowspan=“2”>baris 1, kolom 1</td>
<td>baris 1, kolom 2</td>
<td>baris 1, kolom 3</td>
Row Spanning
</tr>
<tr>
<td>baris 2, kolom 2</td>
<td>baris 2, kolom 3</td>
</tr>
</table>
Row Spanning  Tampilan dalam browser

baris 1, kolom 2 baris 1, kolom 3

baris 1, kolom 1
baris 2, kolom 2 baris 2, kolom 3
  Contoh kode HTML

<table border=“1”>
<tr>
<td colspan=“3”>baris 1, kolom 1</td>

Column </tr>
<tr>
Spanning <td>baris 2, kolom 1</td>
<td>baris 2, kolom 2</td>
<td>baris 2, kolom 3</td>
</tr>
</table>
  Tampilan dalam browser

Column
Spanning
baris 1, kolom 1

baris 2, kolom 1 baris 2, kolom 2 baris 2, kolom 3

  Dengan atribut cellpadding maka dapat ditentukan jarak isi kolom
Atribut Cell dengan border.
Padding dan  Atribut cellspacing digunakan untuk menentukan jarak antar
kolom (ketebalan border).
Spacing  Nilai dari atribut padding dan spacing menggunakan satuan pixel.
  Contoh kode HTML

<table border="1" cellpadding="10">

<tr>
<td>baris 1, kolom 1</td>
<td>baris 1, kolom 2</td>

Cell Padding </tr>

<tr>
<td>baris 2, kolom 1</td>
<td>baris 2, kolom 2</td>
</tr>
</table>
  Tampilan dalam browser

Cell Padding
  Contoh kode HTML

<table border="1" cellspacing="10">

<tr>
<td>baris 1, kolom 1</td>
<td>baris 1, kolom 2</td>
</tr>
Cell Spacing
<tr>
<td>baris 2, kolom 1</td>
<td>baris 2, kolom 2</td>
</tr>
</table>
Cell Spacing  Tampilan dalam browser
  Atribut width digunakan untuk menentukan lebar tabel, lebar header tabel
atau lebar kolom dalam tabel.
 Atribut width menggunakan satuan pixel atau persen.
 Contoh kode HTML

<table border="1" width=“600px">

<tr>
Atribut width <td width=“100px”>baris 1,kolom 1</td>
<td width=“500px”>baris 1, kolom 2</td>
</tr>
<tr>
<td>baris 2,kolom 1</td>
<td>baris 2, kolom 2</td>
</tr>
</table>
  Atribut bgcolor dalam tabel digunakan untuk menentukan warna
latar dalam sebuah tabel.
Atribut bgcolor  Atribut ini juga bisa secara khusus digunakan untuk memberi
warna latar pada baris tertentu atau kolom tertentu.
  Contoh kode HTML
Atribut bgcolor
<table border="1" bgcolor="yellow">
<tr bgcolor="magenta">
<td>baris 1, kolom 1</td>
<td>baris 1, kolom 2</td>
</tr>
<tr>
<td>baris 2, kolom 1</td>
<td>baris 2, kolom 2</td>
</tr>
<tr>
<td>baris 3, kolom 1</td>
<td bgcolor="cyan">baris 3, kolom 2</td>
</tr>
</table>
 Tampilan dalam browser

Atribut bgcolor
form
  Form HTML digunakan untuk memasukkan data ke server.
 Sebuah form berupa elemen input seperti: text field, checkbox,
radio-button, submit button dll.
Form HTML  Form juga dapat berupa select list, textarea, fieldset, legend, dan
elemen label.
 Form HTML dibuat dengan menggunakan tag <form>.
  Struktur Elemen Form

<form>
Form HTML .
Elemen input
.
</form>
 <form>

• Attribute :
–Action
–Method = “post” or “get”
–Name
  Elemen dalam form yang terpenting adalah elemen input.
 Elemen input digunakan untuk memasukkan informasi yang
Elemen Input dipilih oleh user.
 Elemen input dapat digunakan dengan beberapa cara, tergantung
dari tipe atributnya.
  Tag yang digunakan adalah
<input type=“text”/>
 Lebar text field (size), default = 20 karakter
 Contoh kode HTML:
Text Field <form>
Nama depan:<input type=“text”
name=“namadepan”/><br/>
Nama belakang:<input type=“text”
name=“namabelakang”/>
</form>
Text Field  Tampilan dalam browser
  Tag yang digunakan adalah
<input type=“password”/>
 Karakter dalam field ini akan disembunyikan.
Password Field  Contoh kode HTML:
<form>
Password:<input type=“password”
name=“pwd”/>
</form>
Password Field  Tampilan dalam browser
  Tag yang digunakan adalah
<input type=“radio”/>
Radio Buttons
 User hanya dapat memilih satu dari beberapa
pilihan yang tersedia.
  Contoh kode HTML:
<form>
Jenis kelamin:<br/>
<input type=“radio” name=“jeniskelamin”
Radio Buttons value=“pria”>Pria</input><br/>
<input type=“radio” name=“jeniskelamin”
value=“wanita”>Wanita</input>
</form>

 Tampilan dalam browser

  Tag yang digunakan adalah
<input type=“checkbox”/>
Checkbox
 User dapat memilih satu atau lebih dari
beberapa pilihan yang tersedia.
  Contoh kode HTML:
<form>
Kendaraan pribadi:<br/>
<input type=“checkbox” name=“kendaraan”
Checkbox value=“motor”>Sepeda Motor</input><br/>
<input type=“checkbox” name=“kendaraan”
value=“mobil”>Mobil</input>
</form>

 Tampilan dalam browser

  Tag yang digunakan adalah
<input type=“submit”/>
 Submit button digunakan untuk mengirim data dalam form ke
server.
 Contoh kode HTML:
Submit Button <form>
Username:
<input type=“text” name=“user”/>
<input type=“submit” value=“submit”/>
</form>
Submit Button  Tampilan dalam browser
  Digunakan untuk membuat daftar pilihan (seperti dalam combo
box)
 Contoh Kode HTML
<form>
<select name=“propinsi”>
<option>Jawa Barat</option>
Select List <option>Jawa Tengah</option>
<option>Jawa Timur</option>
</select>
</form>
  Tampilan dalam browser

FORM
Terima Kasih
  1. Purnomo, Sidiq , Pemrograman Web 2020
 2. Kurniawan, Yogiek, Web dan Internet 2021
 3. https://dimbleweb.com/blog/read/sejarah-dan-perkembangan-website
 4. https://harmonipermata.com/bagaimana-sejarah-perkembangan-website-dalam-
Referensi dunia-teknologi-informasi/
 5. https://roadmap.sh/roadmaps
 6. https://accuratesalescenter.com/pindahkan-server-di-accurate/
 7.Galih, sandhika, HTML 2020