IMAGE, LINK, LIST

Anggota:
1. Andyca D.N 12.5.00012
2. Ari Marsono 12.5.00016
3. Dimas Kusuma A 12.5.00029
4. Agheng Yuda T 12.5.00005

IMAGE
Image atau gambar didalam sebuah dokumen HTML berfungsi untuk menambah daya tarik
dari sebuah halaman web. Namun penggunaannya akan mengakibatkan semakin bertambah
besarnya penggunaan byte dari dokumen HTML yang secara otomatis akan berakibat pula
terhadap kinerja atau memperlambat waktu tampil dari halaman web tersebut. Sedangkan fungsi
pengolahan gambar yerdiri atas :
Image Alignment / Perataan Teks Pada Gambar
Image Adjustment / Ukuran Gambar
Image Alternate / Teks Gambar
Image Link / Link Gambar
Image Map / Pemetaan Gambar

Perintah Image dalam HTML
Sintaksnya adalah :

<img src="gambar/sumber gambar">

Pada umumnya gambar yang ditampilkan pada sebuah halaman web akan disajikan bersama
dengan teks dari halaman web tersebut. Format gambar yang banyak digunakan dalam halaman
web, antara lain GIF (Graphics Interchange Format), JPEG (Joint Photographic Experts Group).

Definisi dan Penggunaan
Tag <img> mendefinisikan sebuah gambar dalam sebuah halaman HTML.
Tag <img> memiliki dua atribut yang diperlukan: src dan alt.

Attribut Image
Attribute Value Description
align
top
bottom
middle
left
right

Menentukan alignment gambar sesuai dengan
elemen sekitarnya
alt
text Menentukan teks alternatif untuk gambar
border
pixels
Menentukan lebar perbatasan di sekitar gambar
crossorigin anonymous

use-
credentials
Memungkinkan gambar dari situs pihak ketiga yang
memungkinkan akses lintas-asal untuk digunakan
dengan kanvas
height
pixels Menentukan tinggi dari suatu gambar
hspace
pixels
Menentukan spasi di sisi kiri dan kanan gambar
Attribute Value Description
Tag <img> memiliki dua atribut yang diperlukan: src dan alt.
ismap
ismap Menentukan gambar sebagai server-side image-
map
longdesc
URL
Menentukan URL untuk dokumen yang berisi deskripsi
panjang dari suatu gambar
src
URL Menentukan URL gambar
usemap
#mapname Menentukan gambar sebagai client-side image-
map
vspace
pixels
Menentukan spasi di atas dan bawah gambar
width
pixels Menentukan lebar dari suatu gambar
Contoh Penggunaan Image
HTML Images - The Tag <img> dan Atribut Src

di HTML, gambar didefinisikan dengan tag <img>.

Tag <img> kosong, yang berarti mengandung atribut saja, dan tidak memiliki tag penutup.
Untuk menampilkan gambar pada halaman, Anda perlu menggunakan atribut src. Src singkatan
dari "sumber". Nilai dari atribut src adalah URL dari gambar yang ingin ditampilkan.

Sintaks untuk mendefinisikan gambar:
<img src="url" alt="some_text">

Contoh Penggunaan Image
HTML Images - The Alt Atribut
Alt atribut yang diperlukan menentukan sebuah teks alternatif untuk gambar, jika gambar tidak
dapat ditampilkan.
Nilai atribut alt adalah teks penulis-didefinisikan:
<img src="smiley.gif" alt="Smiley face">

HTML Images - Mengatur Tinggi dan Lebar dari suatu Gambar
Atribut tinggi dan lebar yang digunakan untuk menentukan tinggi dan lebar dari suatu gambar.
Nilai atribut yang ditetapkan dalam piksel secara default:
<img src="smiley.gif" alt="Smiley face" width="42" height="42">

LINK

Definisi Link (atau di sebut juga hyperlink) adalah sebuah acuan dalam dokumen hiperteks
(hypertex) ke dokumen yang lain atau sumber lain. seperti hal nya suatu kutipan di dalam literatur.
dikombinasikan dengan sebuah jaringan data dan sesuai dengan protokol akses, sebuah komputer
dapat diminta untuk memperoleh sumber yang direferensikan. Pengertian Link atau dalam bahasa
Indonesia disebut dengan tautan adalah tulisan atau gambar yang apabila di klik akan menuju
halaman tertentu sesuai dengan yang di tentukan oleh pembuat link.
A
T
R
I
B
U
T

L
I
N
K
Attribute Value Description
charset
char_encoding
Menentukan pengkodean karakter dokumen terkait
href
URL Menentukan lokasi dokumen terkait
hreflang
language_code Menentukan bahasa teks dalam dokumen terkait
media
media_query Menentukan apa perangkat dokumen terkait akan ditampilkan
rel
alternate
archives
author
bookmark
external
first
help
icon
last
license
next
nofollow
noreferrer
pingback
prefetch
prev
search
sidebar
stylesheet
tag
up
Diperlukan. Menentukan hubungan antara dokumen saat ini dan dokumen terkait
rev
reversed relationship Menentukan hubungan antara dokumen terkait dan dokumen saat ini
Sizes New
HeightxWidth
any
Menentukan ukuran sumber daya terkait. Hanya untuk rel = "icon"
target
_blank
_self
_top
_parent
frame_name

Menentukan di mana dokumen terkait yang akan dimuat
type
MIME_type Menentukan tipe MIME dokumen terkait
Contoh penggunaan Link
Link Absolut
Membuat link web page ke web site lain di Internet.
Contoh:
<a href=http://www.Facebook.com> Facebook</a> Membuat link ke Facebook
<a href=http://www.yahoo.com> yahoo</a> Membuat link ke web site yahoo

Link ke Bagian lain dalam Dokumen
Link jenis ini dibuat apabila dokumen html cukup panjang
Contoh:
Ketikan <A HREF="#Sampul Ilmu "> Tentang Sampul Ilmu </A> Pada Halaman kerja anda kemudian ketikan artikel
sebanyak 1 halaman lebih setelah itu ketikan <A NAME="Sampul Ilmu "></A> <B><U>Tentang Sampul Ilmu
:</U></B>kemudian ketikan kembali artikel pada halaman tersebut.

Link ke Windows Baru
Melakukan link ke page lain dan membukanya pada jendela baru
Contoh:
Ketikan <a href=contoh1.htm target=_blank>Tab Baru</a> pada halaman Contoh2.html yang telah dibuat
sebelumnya.

Link yang tidak Tergarisbawahi
Link dapat ditampilkan teks yang tidak digaris bawahi.
Contoh:
Ketikan <a href=" contoh1.html" target ="_blank" Style="text-decoration:none"> Sampul Ilmu</a> pada halaman
LIST
Unordered List (Daftar Tidak Terurut), seperti namanya, memungkinkan kita untuk
membuat daftar dari hal-hal yang tidak memiliki urutan tertentu.
Ordered List (Daftar Terurut), kembali lagi, sesuai namanya, memberikan kita fasilitas
untuk membuat daftar hal-hal yang harus diurutkan dengan benar.
Definition List (Daftar Definisi), digunakan untuk membuat daftar definisi dari istilah-
istilah yang ada dalam dokumen, digunakan terutama untuk glosarium dan indeks.

Attribut LIST
Attribute Description
class Menentukan satu atau lebih nama kelas untuk elemen
id Menentukan sebuah id unik untuk sebuah elemen
style Menentukan gaya inline CSS untuk elemen
title Menentukan informasi tambahan tentang elemen (ditampilkan sebagai tool tip)

gaya
Contoh Order List
Type list ordered (Bukan Angka)
Type bila tidak disebutkan, maka list berbentuk
angka Tag yang digunakan adalah <OL> dan
berpasangan dengan yag <LI> untuk Listnya
Bentuk:
<OL [[TypeTipe_list]/[START=angka]]>
<LI> Teks
..
<LI> Teks
</OL>


Contoh :
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

Contoh Unorder List
Unordered List
List dibuat dengan menggunkana simbol
(bullet)
Type list unordered
Tag yang digunakan adalah
<UL> berpasangan dengan tag <LI>Bentuk:
<UL [TypeTipe_list]>
<LI> Teks
..
<LI> Teks
</UL>


Contoh :
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

Contoh Definition List
Definition List
Untuk mendefinisikan indentasi biasa dan
gantung, Tag yang digunakan

Contoh :
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

TERIMA KASIH