Sabtu, 24 Desember 2016

Dasar-dasar HTML Part 4 (Link, Image, Table)

Assalamu'alaikum wr.wb.
   Nah, bagaimana teman-teman sudah belajar HTML dasar belum ? Kalo belum bisa memulai dasarnya disini park 1, park 2 dan park 3. Pada kesempatan kali ini saya akan sharing masih tetap seperti yang kesempatan yang lalu tapi yaitu HTML dasar yang selanjutnya.

 A. Tahap Pelaksanaan

   Sekarang kita mulai kesempatan kali ini dengan membuat link, images dan tables.
   1. Link
   
        Adalah sebuah acuan dalam dokumen hiperteks ke dokumen yang lain atau sumber lain. Fungsi dari link yaitu setiap bagian tautan informasi ke bagian informasi yang lain melalui internet.
        Langkah-langkah membuat link dan macam-macamnya :
  • Link Local 
            1. Buka Sublime Text
            2. Masukkan coding seperti dibawah ini
                               
        3. Link local yang linknya akan ke situs web yang sama ditentukan dengan URL relatif (tanpa http: // www ....).
        4. Hasil dari coding tersebut seperti ini.
                                   
  • Link Color 
        1. Buka Sublime Text 
        2. Masukkan coding seperti dibawah ini.
                              
        3.  Hasil nya akan seperti dibawah ini.
        4. Jika di klik akan masuk ke halaman login facebook.

  •  Link dengan Atribut
        1. Buka Sublime Text 
        2. Masukkan coding seperti dibawah ini.
                             

       3. Akan muncul tampilan seperti diatas dan jika di klik akan muncul kosong karena atribut yang kita masukkan adalah blank.
    2. Image 

         Image digunakan untuk objek form yang bisa diklik oleh user.
  •  Image dengan width dan height
        1. Buka Sublime Text 
        2. Masukkan coding seperti dibawah ini.
                                 
 
         3. Hasil setelah dibuka di browser. Gambar yang atas menggunakan styles dan gambar bawah tanpa menggunakan style.
  •  Image animasi 
         1. Buka Sublime Text 
         2. Masukkan coding seperti dibawah ini.
                                      
          3. Hasil dari coding diatas akan menghasilkan seperti tersebut.

  •  Image sebagai link
          1. Buka Sublime Text.
          2. Masukkan coding seperti dibawah ini.                                 


           3. Hasil dari coding diatas sebagai berikut. 


   3. Table
       Digunakan untuk membuat tabel seperti di MS.excel tapi cara membuat tabelnya menggunakan bahasa html.
  • Table dasar 
        1. Buka Sublime Text 
        2. Masukkan coding seperti dibawah ini.
                     


                           
           3. Hasilnya seperti ini.
                                  
     
  • Menambahkan border table
           1. Buka Sublime Text 
           2. Masukkan coding seperti dibawah ini.
                                  
    
             3. Hasilnya seperti dibawah ini.

  • Membuat border runtuh 
             1. Buka Sublime Text 
             2. Masukkan coding seperti dibawah ini.
                            
            
             3. Hasilnya seperti ini.

  • Table Padding
            1. Buka Sublime Text 
            2. Masukkan coding seperti dibawah ini.

                            

            3. Hasilnya akan seperti ini.
  • Table Special
           1. Buka Sublime Text 
           2. Masukkan coding seperti dibawah ini.
                                


             3. Hasilnya seperti tersebut. 

  
B. Kesimpulan

      Nah, dari yang saya paparkan diatas dapat disimpulkan dari setiap bagian dasar HTML memiliki berbagai macam atribut dan jenis maka kita harus selalu belajar dan berlatih dasar HTML.

C. Referensi 
  • http://www.w3schools.com/

Sekian dan Terimakasih.

SMK Bisa!!

Wasalamu'alaikum wr.wb.

0 komentar:

Posting Komentar

Diberdayakan oleh Blogger.