Kamis, 25 Agustus 2016

Dasar Dasar HTML (7)

DASAR LINK HTML
HTML sesuai dengan sifatnya yaitu hypertext yang artinya dengan menggunakan teks yang pendek bias menjadi acuan untuk pindah dari satu halaman yang satu ke halaman yang lain untuk mendapatkan informasi. Dikatakan  hypertext apabila dalam sebuah tampilan website terdapat hyperlink. Hyperlink sifatnya ada dua yaitu :
1.             Berpindah dari satu halaman ke halaman lain
2.             Berpindah tetapi hanya dalam satu halaman saja
Tag yang digunakan untuk membuat hyperlink adalah pasangan tag <A>……</A> yang biasa disebut tag jangkar atau anchor tag bentuk yang biasa dipakai dalam hyperlink adalah
<a href =URL”>NAMA LINK</a> , URL ( Uniform Resource Locator ) dapat berupa alamat suat dokumen web, gambar, ataupun alamat situs lain.
Berikut ini langkah-langkah yang perlu anda lakukan dalam membuat situs dengan link
1.                  Siapkan tema atau isi yang ada buat situs tersebut termasuk berapa halaman yang akan anda buat.
2.                  Tentukan nama-nama file yang akan anda buat biar memudahkan anda dalam membuat link.
3.                  Halaman utama dalam website selalu menggunahan nama file index.html kemudian tentukan nama file yang lain. Dengan extention html ( contoh profile.html )
4.                  Susun file html tersebut dalam satu folder nama anda atau nama yang lain.








BERIKUT INI PRAKTIKUM DALAM MEMBUAT LINK
1.                  Buat situs  pribadi anda dengan yang berisi , halaman utama dengan file index.html, profile anda dengan nama profil.html, Cita-Cita anda dengan file cita.html, pengalaman anda dengan file pengalaman.html , keempat file tersebut disimpan pada satu folder. Jadi anda akan menyediakan 4 file dalam 4 halaman
2.                  Pada halaman utama masukkan nama-nama  link, untuk menuju link yang akan anda tuju
3.                  Berikut ini langkah yang harus anda ikuti

1.      Buat halaman  utama dengan file index.html simpan pada folder nama anda2 ( contoh : AHMAD2)
<html>
<head>
<title>Situs pribadi</title>
</head>
<body>
<div align="center">SELAMAT DATANG DISITUS PRIBADI
  <br>
      <hr>
</div>
Situs ini kami persembakan buat teman teman saya yang lagi asik belajar membuat link, semoga saya mendapatkan apa yang saya inginkan. Juga kami mengharap teman-teman juga mau memperhatikan pengetahuan yang sangat berharga ini .
</body>
</html>
2.      Buat halaman dengan file profil.html simpan pada folder nama anda2
<html>
<head>
<title>Profil</title>
</head>
<body>
<div align="center">SELAMAT DATANG DISITUS PRIBADI
  <br>
     <hr>
  PROFIL PRIBADI SAYA
</div>
<p>NAMA : SALSABILA</p>
<p>ALAMAT ; Jl Samanhudi 30 Jakarta </p>
<p>STATUS : Jomblo </p>
</body>
</html>
3.      Buat halaman dengan file cita.html simpan pada folder nama anda2
<html>
<head>
<title>Cita-cita</title>
</head>
<body>
<div align="center">SELAMAT DATANG DISITUS PRIBADI
      <br>
      <hr>
      CITA-CITA</div>
<p>Jika aku telah dewasa nanti saya ingimn menjadi ahli design komputer yang handal, sehingga aku dapat mengembangkan keilmuan an membantu orang tua dalam permasalahan ekonomi </p>
</body>
</html>
4.      Buat halaman dengan file pengalaman.html simpan pada folder nama anda2

<html>
<head>
<title>pengalamanku</title>
</head>
<body>
<div align="center">SELAMAT DATANG DISITUS PRIBADI
      <br>
      <hr>
     PENGALAMAN KU </div>
<p>Di Pondok Pesantren Sunan Drajat aku telah mendapatkan banyak yang aku pelajari selama ini, begitu juga selama sekolah saya juga merasakan rasa menyenagkan juga kadang-kadang menyebalkan terutama pada bapak guru yang ngajar komputer &quot; ADUH GALAK BENAR GURU INI ' </p>
</body>
</html>
5.      Buka kembali file index.html, kemudian buat link pada file yang lain dengan link sebagai berikut :
<a href=”profil.html”>PROFILKU</a>
<a href=”cita.html”>CITA-CITAKU</a>
<a href=”pengalaman.html”>PENGALAMANKU</a>



<html>
<head>
<title>Situs pribadi</title>
</head>
<body>
<div align="center">SELAMAT DATANG DISITUS PRIBADI
  <br>
      <hr>
      <br>
<a href=”profil.html”>PROFILKU</a>
<a href=”cita.html”>CITA-CITAKU</a>
<a href=”pengalaman.html”>PENGALAMANKU</a>
</div>
Situs ini kami persembakan buat teman teman saya yang lagi asik belajar membuat link, semoga saya mendapatkan apa yang saya inginkan. Juga kami mengharap teman-teman juga mau memperhatikan pengetahuan yang sangat berharga ini .
</body>
</html>

MACAM-MACAM LINK
1.             Mailto, link yang langsung menuju ke alamat e-mail.
<a href=”mailto:saya@gmail.com”>Kirim E-mail</a>
2.             Link ke situs lain
 <a href=”http://www.google.com”> Google</a>
3.             Link untuk file Download
<a href=”cerita.doc>Download</a>
4.             Link ke halaman lain.
<a href=”profil.html>PROFIL</a>

WARNA  HYPERLINK
Teks atau label yang menadi hyperlink atau penghubung ke halaman yang web lain secara otomatis akan diberi warna tertentu ( biasanya biru ) bergaris bawah. Namun warna tersebut sebenarnya dapat diubah sesuai dengan keinginan kita. Cara nya dengan menggunakan atribut LINK yang terdapat pada tag body .
Selain menngunakan link untuk pemberian warna , terdapat dua atribut lagi yang digunakan untuk memberikan warna pada hyperlink yaitu :
  1. ALINK berguna untuk menentukan link aktif, yaitu link yang telah diklik pemakai, tetapi halaman belum selesai dibuka
  2. VLINK  berguna untuk menentukan warna link yang halaman web terkait atau yang di link telah dikunjungi

PRAKTIKUM 18
<html>
<head>
<title>membuat link</title>
</head>
<body link=”green”>
<a href=”http://www.google.com”> Google</a>
<a href=”http://www.mmasunandrajat.net”> Madrasah Mu’allimin Mu’allimat</a>
</body>
</html>

1.                  Selanjutnya simpan  PRAKTIKUM 18  dalam  FOLDER  NAMA ANDA dengan  file name : “  praktikum18.html  “
2.                  Lihat hasilnya  dan kesimpulan apa yang dapat anda peroleh dari latihan tersebut

PRAKTIKUM 19
<html>
<head>
<title>membuat link</title>
</head>
<body link=”green” alink=”red” vlink=”pink”>
<a href="http://www.google.com"> Google</a>
<a href="http://www.mmasunandrajat.net"> Madrasah Mu’allimin Mu’allimat</a>
</body>
</html>

1.                  Selanjutnya simpan  PRAKTIKUM 19  dalam  FOLDER  NAMA ANDA dengan  file name : “  praktikum19.html  “
2.                  Lihat hasilnya  dan kesimpulan apa yang dapat anda peroleh dari latihan tersebut


Variasi lain dari model hyperlink adalah apabila kita mengklik suatu link, dokumen utama tidak menghilang melainkan akan terbuka jendela lain yang menampilkan informasi suatu halaman. Hal ini dapat kita kerjakan dengan menambah kode : target="_blank"
Contoh pada praktikum link pada pembahasan sebelumnya
<a href="profil.html" target="_blank">PROFIL</a>
<a href="cita.html" target="_blank">CITA-CITAKU</a>
<a href="pengalaman.html" target="_blank">PENGALAMAN</a>

LINK DENGAN GAMBAR
Link selain dapat dilakukan dengan teks juga dapat dilakukan dengan gambar. Sebelumnya buat gambar pada Photoshop dengan file name profil.jpg. cita.jpg dan pengalaman.jpg kemudian buat link  dengan tag <img src=" nama file.jpg"> pada contoh link  diatas
<a href="profil.html"><img src="profil.jpg"></a>
<a href="cita.html"><img src="cita.jpg"></a>
<a href="pengalaman.html"><img src="pengalaman.jpg"></a>

MENYISIPKAN GAMBAR
1)         Atribut ukuran gambar, bila tidak dituliskan, maka ukuran gambar sesuai ukuran aslinya. Namun ukuran gambar bisa dibuat dengan nilai tertentu dengan cara menuliskan atribut height dan width.
<img src=”foto.fpg” height=”200” width=”100”>
2)         Pelurusan gambar, posisi gambar terhadap teks sebelum dan sesudahnya bisa fleksibel, misalnya lurus atas :
<img src=”foto.bmp” align=”top”>
3)         Teks alternatif untuk gambar, dimaksudkan untuk mengganti gambar apabila browser tidak mampu menampilkan gambar tersebut.
<img src=”foto.jpg” alt=”Foto”>
4)         Atribut border dan spasi, jika atribut ini tidak disertakan, maka gambar ditampilkan tanpa garis tepi.
<img src=”foto.gif” border=”10”>
5)         Gambar sebagai hyperlink.
<a href=”registrasi.html”><img src=”foto.gif”></a>
6)         Gambar sebagai background
<body background=”file_gambar.jpg”>
7)         Background warna

<body bgcolor=”red” text=”white” link=”green”>