DomaiNesia

Friday, 5 February 2016

Tutorial Membuat Link Dan List Mengunakan Kode HTML Dan CSS

       7 comments

Link adalah tujuan kata Hypertext dari kepanjangan HTML. Dalam tutorial belajar HTML dasar kali ini kita akan membahas cara membuat link di HTML.

Cara Membuat link di HTML

Tujuan kata Hypertext dari HTML adalah membuat sebuah text yang ketika di-klik akan pindah ke halaman lainnya. HTML menggunakan tag <a>untuk keperluan ini.

Link ditulis dengan <a> yang merupakan singkatan cari anchor (jangkar). Setiap tag <a> setidaknya memiliki sebuah atribut href. Dimana href berisi alamat yang dituju (href adalah singkatan darihypertext reference).
Berikut foldernya atau filenya untuk penempatanya Untuk cssnya saya mengunakan css buatan sendiri kemudian di tambah  framework dari bootstrap.


Untuk folder img


Selanjutnya scripnya untuk cssnya sbb:

body{
 font-family: sans-serif;
 font-size: 14px;
}
@media screen and (max-width: 700px) {
 #isi {
  width: auto;
  float: none;
 }
 #canvas {
  width: auto;
  float: none; 
 }
 #header {
  width: auto;
  float: none;
 }
 #menu {
  width: auto;
  float: none;
 }
 #isi {
  width: auto;
  float: none;
 }
 #footer {
  width: auto;
  float: none;
 } 
}
#canvas{
 margin: 0 auto;
 border:1px solid silver;
}
#header{
 background-color: blue;
 height: 80px;
 width: 99%;
 padding: 10px 0px 0px 10px;
 
}
#menu{
 background-color: aqua;

}
#menu ul{
 list-style: none;
 margin: 0;
 padding: 0; 
 text-align: right;
}
#menu ul li{
 display: inline-table; 
}
#menu ul li:hover{
 background-color: #0033cc;
}

#menu ul li a{
 display: block;
 text-decoration: none;
 line-height: 40px;
 padding: 0 20px;
 color: #000000;

}
.utama ul{
 display: none;
 position: absolute;
 z-index: 2;
}
.utama:hover ul{
 display: block;
}
.utama ul li{
 display: block;
 background-color: #6cf;
 width: 140px; 
}
#isi{
 padding: auto;
 max-width: 100%;
 max-height: 100%;
 min-height: 400px;
 margin: 10px 10px 10px 10px;
 color: black;
}
#isi a {
 margin: 20px;
 margin: 10px 10px 10px 10px;
}
#isi a img {
 border: 1px;
}
#footer{
 text-align: center;
 padding: 30px;
 background-color: #ccc;

}


Selanjutnya Untuk index.html

<!DOCTYPE html>
<html>
<head>
 <title>Link and list</title>
 <link rel="stylesheet" type="text/css" href="style.css">
 
</head>

<body>
 <div id="canvas">
  <div id="header">    
    <center>Contoh Header</center>

  </div>
  <div id="menu">
   <ul>
    <li class="utama"><a href="index.html">Beranda</a></li>
    <li class="utama"><a href="profile.html">Profile</a></li>
    <li class="utama"><a href="event.html">Event</a></li>
    <li class="utama"><a href="galery.html">galery</a></li>
    <li class="utama"><a href="contact.html">Contact</a></li>
   </ul>
  </div>
  <div id="isi">
   
   <center>Selamat Datang Di Halaman Kami. Selamat Menjelajah He</center>
  </div>
  <div id="footer">
   Copyright 2015 - All Reserved By Putu Ariana
  </div>
 </div>
</body>
</html>
Hasilnya.




Kemudian Untuk profile.html

<!DOCTYPE html>
<html>
<head>
 <title>Link and list</title>
 <link rel="stylesheet" type="text/css" href="style.css">
 <link href="css/bootstrap.css" rel="stylesheet">

</head>

<body>
 <div id="canvas">
  <div id="header">    
  </div>
  <div id="menu">
   <ul>
    <li class="utama"><a href="index.html">Beranda</a></li>
    <li class="utama"><a href="profile.html">Profile</a></li>
    <li class="utama"><a href="event.html">Event</a></li>
    <li class="utama"><a href="galery.html">galery</a></li>
    <li class="utama"><a href="contact.html">Contact</a></li>
   </ul>
  </div>
  <div id="isi">
   <div class="row">
    <center><h3><b>Profile Qu ces</b></h3></center>
    <div class="col-sm-5 col-md-3">
     <div class="thumbnail">
      <a href="Movie/Fifth Harmony - Worth It ft. Kid Ink - YouTube.mp4" target="blank"><img src="img/profile.jpg" width="200px"></a>
      <p align="justfy" style="text-indent:80px;"><a href="Musik/puspa.mp3" target="blank">Profile Qu</a></p>
     </div>
    </div>

    <div class="row">
     <div class="col-sm-5 col-md-5">
      <div class="thumbnail">
       <p>
        Nama saya putu ariana.<br>
        Saya berasal dari mamuju.<br>
        Saya seorang mahasiswa Teknik Informatika Yang masi duduk di bagku kuliah semester III di Universitas Indonesia Timur. Saya angkatan 2014.
       </p>
      </div>
     </div>
    </div>
   </div>
  </div>

  <div id="footer">
   Copyright 2015 - All Reserved By Putu Ariana.
  </div>
 </div>
</body>
</html>
Hasilnya.


Kemudian untuk Event.html

<!DOCTYPE html>
<html>
<head>
 <title>Link and list</title>
 <link rel="stylesheet" type="text/css" href="style.css">
 <link href="css/bootstrap.css" rel="stylesheet">

</head>

<body>
 <div id="canvas">
  <div id="header">    
   <center><h5>Header</h5></center>
  </div>
  <div id="menu">
   <ul>
    <li class="utama"><a href="index.html">Beranda</a></li>
    <li class="utama"><a href="profile.html">Profile</a></li>
    <li class="utama"><a href="event.html">Event</a></li>
    <li class="utama"><a href="galery.html">galery</a></li>
    <li class="utama"><a href="contact.html">Contact</a></li>
   </ul>
  </div>
  <div id="isi">
   <br>
   <center><h3><b>Tugas-Tugas Kuliah Semester III</b></h3></center><br>
   <div class="row">
    <div class="col-sm-3 col-md-2">
     <div class="thumbnail">
      <a href="../Tgas leb 2/format html.docx"><img src="img/word.png" width="200px"></a>
      <p align="justfy" style="text-indent:-10px;"><a href="../Tgas leb 2/format html.docx">Membuat Heading Paragraf</a></p>
     </div>
    </div>

    <div class="row">
     <div class="col-sm-3 col-md-2">
      <div class="thumbnail">
       <a href="../Tgas leb 2/Membuat absen.docx"><img src="img/word.png" width="200px"></a>
       <p align="justfy" style="text-indent:10px;"><a href="../Tgas leb 2/Membuat absen.docx">Membuat Absen Kuiah</a></p>
      </div>
     </div>
     
     <div class="row">
      <div class="col-sm-3 col-md-2">
       <div class="thumbnail">
        <a href="../Gambar/tgs doc/Menampilkan image.docx"><img src="img/word.png" width="200px"></a>
        <p align="justfy" style="text-indent:30px;"><a href="../Gambar/tgs doc/Menampilkan image.docx">Menampilkan image</a></p>
       </div>
      </div>

      <div class="row">
       <div class="col-sm-3 col-md-2">
        <div class="thumbnail">
         <a href="../pendaftaran/Form Pendaftaran.docx"><img src="img/word.png" width="200px"></a>
         <p align="justfy" style="text-indent:30px;"><a href="../pendaftaran/Form Pendaftaran.docx">Form Pendaftaran</a></p>
        </div>
       </div>
      </div>
     </div>
    </div>
   </div>
   <div id="footer">
    Copyright 2015 - All Reserved By Putu Ariana.
   </div>
  </div>
 </body>
 </html>

Hasilnya.




Selanjutnya untuk galery.html

<!DOCTYPE html>
<html>
<head>
 <title>Link and list</title>
 <link rel="stylesheet" type="text/css" href="style.css"> 
 <link href="css/bootstrap.css" rel="stylesheet">
</head>

<body>
 <div id="canvas">
  <div id="header">    
  </div>
  <div id="menu">
   <ul>
    <li class="utama"><a href="index.html">Beranda</a></li>
    <li class="utama"><a href="profile.html">Profile</a></li>
    <li class="utama"><a href="event.html">Event</a></li>
    <li class="utama"><a href="galery.html">galery</a></li>
    <li class="utama"><a href="contact.html">Contact</a></li>
   </ul>
  </div>
  <div id="isi">
    <center><h3><b>Galery Saya</b></h3></center>
   <div class="row">
    <div class="col-sm-3 col-md-2">
     <div class="thumbnail">
      <a href="Musik/puspa.mp3" target="blank"><img src="img/st12.jpg" width="200px"></a>
      <p><a href="Musik/puspa.mp3" target="blank">Puspa-st12</a></p>
     </div>
    </div>
    <div class="row">
     <div class="col-sm-10 col-md-2">
      <div class="thumbnail">
       <a href="Musik/Ada Band - 04 Pemain Cinta.mp3" target="blank"><img src="img/ada-band.jpg" width="200px"></a>
       <br><br><br>
       <p><a href="Musik/Ada Band - 04 Pemain Cinta.mp3" target="blank">Ada band-Pemain cinta</a></p>
      </div>
     </div> 
    </div>
   </div>
  </div>
  <div id="footer">
   Copyright 2015 - All Reserved By Putu Ariana.
  </div>
 </div>
 </body>
 <html>

Hasinya.




Selanjutnya contact.html

<!DOCTYPE html>
<html>
<head>
 <title>Link and list</title>
 <link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>
 <div id="canvas">
  <div id="header">    
  </div>
  <div id="menu">
   <ul>
    <li class="utama"><a href="index.html">Beranda</a></li>
    <li class="utama"><a href="profile.html">Profile</a></li>
    <li class="utama"><a href="event.html">Event</a></li>
    <li class="utama"><a href="galery.html">galery</a></li>
    <li class="utama"><a href="contact.html">Contact</a></li>
   </ul>
  </div>
  <div id="isi">
   <center><h3><b>Contact Persone</b></h3></center>
   <fieldset>
    <legend>Input Data Anda</legend>

    <form action="#" method="GET">
     <table>
      <tr>
       <td>Name</td>
       <td>:</td>
       <td> <input type="text" name="nama" size="20" maxlength="20" /> </td>
      </tr>
      <tr>
       <td>Email Address</td>
       <td>:</td>
       <td> <input type="email" name="email" size="30" maxlength="40" /> </td>
      </tr>
      <tr>
       <td>Phone Number</td>
       <td>:</td>
       <td> <input type="phone" name="phone" size="30" maxlength="40" /> </td>
      </tr>
      <tr>
       <td>Messange</td>
       <td>:</td>
       <td><textarea name="alamat" cols="50" required=""></textarea></td>
      </tr>
      <tr>
       <td>
        <button type="submit" value="simpan">Simpan</button>
        <button type="reset" value="reset">Reset </button>
       </td>

      </tr>
     </table>

    </form>
   </fieldset>
  </div>
  <div id="footer">
   Copyright 2015 - All Reserved By Putu Ariana.
  </div>
 </div>
</body>
</html>

Hasilnya.




Sekian tutorial dari saya semoga bermanfaat bagi temen-temen apabila ada kendala bisa temen-temen bertanya melalui comentar.

Lokasi: Makassar, Makassar City, South Sulawesi, Indonesia

7 comments:

  1. Putu Ariana18 February 2016 at 23:49

    tes

    ReplyDelete
  2. Unknown7 March 2016 at 08:48

    terima kasih gan,,,tutorialnya sangat bermanfaat nih bagi ane yang baru belajar..

    ReplyDelete
  3. Putu Ariana7 March 2016 at 08:50

    iya sama" gan.

    ReplyDelete
  4. muhammad tauiq7 March 2016 at 09:09

    masih kurang mengerti gan, panjang sangat susah di pelajari.... tpi gak masalah gan. thanks

    ReplyDelete
  5. Putu Ariana7 March 2016 at 09:13

    iya gan emang agak panjang codingnya,,tp di baca seksama pasti bisa gan ad juga demonya bisa di download gan.
    makasi atas kunjugannya gan.

    ReplyDelete
  6. Mahendra tutorial.10 March 2016 at 06:31

    ane dah bljar itu di klas 1 SMK, tpi gapapa deh thak's sudah mengingatkan nice artikel.

    ReplyDelete
    Replies
    1. Putu Ariana10 March 2016 at 06:33

      kayakx saya yg harus belajar banyak sama mas hendra

      Delete

luvne.com luvne.com ayeey.com cicicookies.com mbepp.com kumpulanrumusnya.comnya.com.com