Pengenalan Web D3 dan S1 semua jurusan. List dan Link

Pengenalan Web D3 dan S1 semua jurusan

List dan Link

1

 HTML   

memiliki 3 macam bentuk list

ordered list (biasa disebut numbered) ; unordered list (biasa disebut bulleted) definition list (Untuk pasangan istilah dan definisinya / term and definition).

 Ordered

list menampilkan list item dengan angka,huruf, angka romawi  Unorderd list menampilkan list item dengan bullet dan gambar  Definition List setiap itemnya berisi sepasang (term dan definition) List dan Link

2

  

Tag

…………..

List item

……….

Contoh :

An Ordered List:

1. Coffee
2. Tea
3. Milk

List dan Link

3





Digunakan attribut type Type

Bentuk

Contoh

1 (default)

1,2,3

A

A, B, C




a

a, b, c




I

I, II, III, IV




i

i, ii, iii, iv




Untuk mengatur awal urutan : Tambahkan attribut start = “angka awal” untuk mengatur awalan urutan,  Contoh untuk memulai dari huruf C : 


List dan Link

4

Daftar bahasa untuk membuat software:
1. Visual C++
2. Visual Basic
3. Borland Delphi
4. Lain-lain
List dan Link

5

  

Tag
…………..
List item
1. ……….
Contoh :

An Unordered List:

• Coffee
• Tea
• Milk
List dan Link

6

  

Digunakan attribut type Pilihan berupa : disc, circle, square, none Contoh : Bentuk "disc" (default)
• Mangga
• Pisang
Bentuk "circle"
• Mangga
• Pisang
Bentuk "square"
• Mangga
• Pisang
List dan Link

7

 Dengan

menggunakan style,
dan
dapat ditampilkan dengan berbagai variasi  Untuk
bisa menggunakan berbagai character  Untuk
bisa menggunakan image/gambar 

HTML
• Item one
• Item two
• Item three
• Item four
• Item five
CSS #navlist { list-style-image: url(images/arrow.gif); }

List dan Link

8

   

Tag

……………

Untuk Term / Istilah
…………
Untuk Definition / Definisi
…………
Contoh :

A Definition List:

Coffee

Black hot drink

Milk

White cold drink

List dan Link

9

 

Berisi Tampilan dengan format bertingkat Contoh

Kebutuhan Sistem

1. Software
1. Bahasa Pemrograman
   • PHP
   • ASP.NET
2. Database
• MySQL
• Oracle
• PostgreSQL
2. Hardware
List dan Link

10

 Hyperlink

(atau link) adalah suatu kata, sekumpulan kata, atau gambar yang dapat digunakan (diklik) untuk menuju ke dokumen baru atau bagian lain yang dari dokumen html tersebut  link menghubungkan satu dokumen dengan dokumen lain  Ketika kursor diarahkan pada suatu link di halaman web, maka tanda panah kursor akan berubah menjadi bentuk tangan yang menunjuk  Tag yang digunakan : List dan Link

11

 Terdapat  

2 komponen link :

Descriptor Reference target (berbentuk url)

 Bentuk

Umum Link : descriptor  Descriptor bisa berupa text atau image  url_of_target bisa berisi protokol :   

http ftp mailto List dan Link

12



http : STMIK AKAKOM



ftp: Bab 1 Pendahuluan



mailto: 

Sederhana : 



Contact Me

Kompleks : 

Kirim e-mail!

List dan Link

13

 Absolute  

url target menggunakan full path termasuk berisi protokol dan alamat server Contoh : 

foto

 Relative   

Link

Link

url target tidak detail, relatif terhadap dokumen yang memanggil target tersebut Untuk memanggil di dalam direktori (maju 1 direktori) tinggal disebutkan nama direktorinya Untuk mundur 1 direktori, gunakan tanda “..” List dan Link

14

 Struktur

    

folder :

Di direktori dir1 terdapat file : filedir1.html Di direktori dir2 terdapat file : filedir2.html Di direktori dir3 terdapat 2 buah file yaitu : teslink.html dan dirsama.html Di direktori dir4 terdapat file : filedir4.html File yang dijalankan adalah file teslink.html yang terletak di dalam direktori dir3 List dan Link

15



Isi File teslink.html Tes :
Di Direktori yang sama
Maju 1 direktori
Mundur 1 direktori
Mundur 2 direktori


List dan Link

16

 Atribut

target menentukan dimana dokumen yang dituju itu akan dibuka/ditampilkan

target

Deskripsi

_blank

Membuka link di jendela browser baru atau tab baru (tergantung browser yang dipakai)

_self

Membuka link di halaman / frame yang sama

_parent

Membuka link di frame di atasnya

_top

Membuka link di jendela utama dari browser

Nama jendela

Membuka link di jendela browser dengan nama tertentu (diperlukan javascript)

 Contoh

:

Google

List dan Link

17

 Jika

suatu halaman web sangat panjang, adakalanya halaman tersebut dilengkapi dengan sejumlah hyperlink yang mengacu ke area tertentu pada halaman itu sendiri.  Hal seperti itu diimplementasikan dengan menggunakan bookmark (tanda #) sehingga pemakai tidak perlu naik-turun halaman secara manual untuk mendapatkan bagian tertentu dalam halaman tersebut List dan Link

18

 Anchor

dibuat dengan menambahkan atribut name atau id (lebih disarankan untuk masa depan) pada tag  Contoh pada file dengan url www.myweb.com/laporan.html terdapat: Atau  Contoh pembuatan linknya : Baca BAB 10 Atau baca BAB 10 List dan Link

19

 Link 

bisa juga digunakan untuk :

Membuka gambar

Foto 

Gambar/image (bukan teks) yang dijadikan descriptor link



Membuat link untuk download file

Zip File List dan Link

20