LAPORAN PRAKTIKUM PENGENALAN WEB Modul 7b CSS Lanjut

11
                LAPORAN PRAKTIKUM
PENGENALAN WEB
Modul 7
CSS Lanjut




Disusun Oleh :

HERI PURNAMA
125410101
TI 03


UPT LABORATORIUM
Sekolah Tinggi Manajemen Informatika dan Komputer
AKAKOM
Yogyakarta
2014



CSS Lanjut

1).PEMBAHASAN
A.LISTING

  HTML
Pengaturan Font

CSS (Cascading Style Sheets) digunakan dalam kode HTML untuk menciptakan suatu kumpulan style yang dapat digunakan untuk memperluas kemampuan html. Singkatnya CSS digunakan untuk mengatur html supaya tampil lebih baik dan lebih menarik.



Ø  Disini dapat dilihat adalah bahwa di sini adalah SINTAK untuk membuat halaman Web yakni pada SINTAK htmlnya yang mana pada Sintak ini mencakup beberapa hal yakni :
1.       Menggunakan judul halaman Web yang dituliskan pada tag yakni dengan judul halaman Web “Pengaturan Font”
2.       Pada halaman Web ini CSS dipanggil dengan metode Eksternal yang mana dipanggil di dalam tag head.Ini bisa dilihat pada tag yang mana fungsi dari tag ini adalah informasi hubungan (relationship) dari tag link tersebut, yaitu sebagai stylesheet. Href  diisi  dengan  lokasi  file  CSS  yang  ingin  dimuat.  Pemanggilannya  sama dengan pemanggilan gambar atau link.
3.       Tag digunakan untuk penulisan yang mana yang diterapkan pada tag tag Body sendiri digunakan untuk menampilkan apa yang ada di dalam halaman Web.
Ø  Format penulisan ini juga menggunakan bahasa HTML yang mana semua tag tersusun rapi dan sewajarnya.
 CSS
p {
            font-family:"Comic Sans MS";
            font-size:24px;
            font-weight:bold;
            color:#33cc00;
            text-transform:capitalize;
}
Ø  Disini dapat dilihat bahwa ini adalah sebuah Sintak untuk halaman Web yang ada diatas yang mana pada Sintak ini menggunakan sebuah peraturan yaitu :
1.       Apabila bertemu dengan tag maka perintah atau kode pada halaman HTML akan dikerjakan.Atau CSS dipanggil untuk menggerjakan pada suatu tag yang mana pada hal ini untuk menggerjakan tag
Ø  Pada CSS ini menggunakan Font untuk penggaturan Halaman Webnya,yang mana  menggunakan urut-urutan properti dan valuen fontnya adalah :
1)      Untuk penggaturan jenis front menngunakan properti “font-family” dengan nilai atau valuenya “Comic Sans MS”
2)      Untuk penggaturan ukuran fontnya menngunakan properti “font-size” dengan nilai atau valuenya “24px” Pd berarti menngunakan ukuran PIXEL
3)      Untuk penggaturan ketebalan fontnya menggunakan properti “front-weight” dengan nilai atau valuenya “bold”
4)      Untuk penggaturan warna fontnya menngunakan properti yakni “Color” yang mana pada properti ini menggunakan valuenya adalah “#33cc00” atau bisa juga dibilang sebagai warna yang akan tampil adalah warna HIJAU.
5)      Untuk penggaturan transform fontnya menggunakan properti  yakni ”text-transform” yang mana properti ini menggunakan nilai atau valuenya adalah “capitalize”


·         RUNNING
Ø  Dapat dilihat pada tampilan halaman Web ini yang ditampilkan sesuai dengan apanya dinginkan.

2.Latihan

HTML
Pengaturan Font

Contoh berikut menggunakan font : 'browalia new' untuk menyertakan font yang dapat digunakan untuk halaman web yang sedang dikembangkan.


Ø  Disini dapat dilihat adalah bahwa di sini adalah SINTAK untuk membuat halaman Web yakni pada SINTAK htmlnya yang mana pada Sintak ini mencakup beberapa hal yakni :
a.       Menggunakan judul halaman Web yang dituliskan pada tag yakni dengan judul halaman Web “Pengaturan Font”
b.      Pada halaman Web ini CSS dipanggil dengan metode Eksternal yang mana dipanggil di dalam tag head.Ini bisa dilihat pada tag yang mana fungsi dari tag ini adalah informasi hubungan (relationship) dari tag link tersebut, yaitu sebagai stylesheet. Href  diisi  dengan  lokasi  file  CSS  yang  ingin  dimuat.  Pemanggilannya  sama dengan pemanggilan gambar atau link.
c.       Tag digunakan untuk penulisan yang mana yang diterapkan pada tag tag Body sendiri digunakan untuk menampilkan apa yang ada di dalam halaman Web.
Ø  Format penulisan ini juga menggunakan bahasa HTML yang mana semua tag tersusun rapi dan sewajarnya.


CSS
@font-face
{
font-family: 'Browallia New';
src: local('?'),url('font/Browallia-New.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

p
{
font-family: 'Browallia New';
}

Ø  Pada CSS ini digunakan Untuk menyertakan font dalam sebuah halaman web yang mana menggunakan “@font-face”.Dalam css developer / programmer dapat menyertakan font untuk digunakan dalam web walaupun font tersebut tidak terinstall dalam komputer client Yang mana menggunakan properti sebagai berikut :
a.       Menggunakan jenis front yakni “Browalia New”
b.      Src digunakan untuk mencari dimanakah font tersebut disimpan dalam folder dan Url digunakan untuk Memanggil font tersebut.denda format “tua type”
c.       Untuk menentukan ketebalan font digunakan properti “font-weight” yang mana menggunakan ketebalan Noya adalah “normal”
d.      Untuk menentukkan style yang digunakan menngunakan properti “font-style” yang mana dengan menggunakan nilai atau valuenya adalah “normal”.
Ø  Disini dapat dilihat bahwa ini adalah sebuah Sintak untuk halaman Web yang ada diatas yang mana pada Sintak ini menggunakan sebuah peraturan yaitu :
1.Apabila bertemu dengan tag maka perintah atau kode pada halaman HTML akan dikerjakan.Atau CSS dipanggil untuk menggerjakan pada suatu tag yang mana pada hal ini untuk menggerjakan tag
Ø  Pada ID P akan menngerjakan yaitu :
    1.akan menampilkan font dalam halaman Web yakni akan bertipe “Browalia New”

RUNNING

Ø  Dapat dilihat Pada tampilan Web diatas font yang ditampilkan “Browalia-New”

2).TUGAS

HTML
 
   
      Pariwisata Kota Jogja
                 
                 
   

  
     
       
          logo
         
           





  • Home
  •            





  • Galeri
  •            





  • Video
  •                                                





  • Kontak
  •                                                





  • Login
  •                                

          
             
                                         
                
             

            

                                   
      
           
             
                Gambar Artikel
               

    TAMAN SARI

                JUN 01, 2014Dilihat : 3,487,497
                Menjelajah Kesejukan Istana Air Tamansari Jogjakarta (Water Castle).Dalam sejarah kerajaan jawa terutama di sekitar propinsi Yogyakarta (jogja) tak bisa dilepaskan dari yang bernama kerajaan mataram islam
                Lihat Selengkapnya
             

                                     
             
               
              alt="Gambar Artikel"/>
               

    PANTAI INDRAYANTI

                JUN 01, 2014Lihat : 3,487,497
                Pantai Indrayanti merupakan salah satu pantai yang berada di Kabupaten Gunung Kidul Daerah Istimewa Yogyakarta. Pantai yang terletak di Desa Tepus ini bersebelahan dengan Pantai Sundak.
                Lihat Selengkapnya
             

                                     
             
               
              alt="Gambar Artikel"/>
               

    CANDI PRAMBANAN

                Feb 12, 2007Views : 3,487,497
                Sekilas Candi Prambanan Candi Rara Jonggrang atau Lara Jonggrang yang terletak di Prambanan adalah kompleks candi Hindu terbesar di Indonesia. Candi ini terletak di propinsi Jawa Tengah, di pulau Jawa
                Lihat Selengkapnya
             

                                            
           

                                   
      
           
             

    Apakah Ini ?

              Pariwisata kota Yogyakarta adalah website yang mengupas tuntas tempat-tempat Pariwisata Kota Yogyakarta dan sekitarnya.
             

    Artikel berdasarkan kategori

             
               





  • Pariwisata Kebudayaan
  •            





  • Pariwisata Peningalan Sejarah
  •            





  • Pariwisata Pendidikan
  •            





  • Pariwisata Pantai
  •            





  • Pariwisata Petualangan
  •  
             

           

           
              Pariwisata kota Yogyakarta.net copyright 2014
           

         

       

                   

    css
    *{
      margin:0;
      padding:0;
      font-family:calibri, ‚segoe ui‛, arial, tahoma, sans-serif;
    }
    body{
      background-color:#DDDDDD;
    }

    #wrapper{
      width : 780px;
      margin: 0 auto;
      overflow: hidden;
    }
    #header{
      background: url(images/header.jpg) repeat-x #555;
      height : 70px;
      width : 100%;
      padding:5px;
      margin : 20px 0;
      overflow : hidden;
    }
    #header img{ width:800px ; height:38px ;
    }
    #menu-utama{
      margin-top:3px;
      list-style:none;
    }
    #menu-utama li{
      float:left;
      padding:8px 20px;
      border-right:1px solid #555555;
    }
    #menu-utama li a{
      color : #ffffff;
      text-decoration:none;
    }

    #header form{
      float:right;
      margin-top:7px;
      margin-right: 10px;
      color : #ffffff;
    }

    #header form input{
      border:none;
      height:20px;
    }
    #daftar-artikel{
      width:470px;
      float:left;
    }
    .artikel{
      background:#ffffff;
      padding:10px;
      margin-bottom:20px;
      overflow:hidden;
    }
    .artikel img{
      float:left;
      margin-right:10px;
      width:200px;
    height:165px
    }
    .artikel b{
      color:#616060;
      background:#DDDDDD;
      padding:3px;
      font-size:12px;
      font-weight:bold;
      margin-right:10px;
    }
    .artikel p{
      margin:10px 0;
    }
    .artikel a{
      display:block;
      text-align:right;
      color:#636363;
    }
    #sidebar{
      width:270px;
      float:right;
    }
    #sidebar h2{
      font-size:18px;
      margin:10px 0;
    }
    #sidebar p{
      line-height:20px;
      color : #636363;
    }
    #sidebar ul{
      margin-left:10px;
    }
    #sidebar ul li a{
      color:#636363;
      text-decoration:none; 
    }
    #footer{
      clear:both;
      margin:20px 0;
      text-align:center;
      background-color: #f0f0f0;
      padding:5px;
      color:#555555;
    }
    TAMPILAN


    Menampilkan berdasarkan bentuk FONT
    HTML
     
       
          Pariwisata Kota Jogja
                     
                      
          
       

      
         
           
              logo
             
               





  • Home
  •            





  • Galeri
  •            





  • Video
  •                                                





  • Kontak
  •                                                





  • Login
  •                                

          
             
                                         
                
             

           

                                   
      
           
             
                Gambar Artikel
               

    TAMAN SARI

                JUN 01, 2014Dilihat : 3,487,497
                INI MENGGUNAKAN FORMAT FONT "Browallia-New.ttf"
                                                    Menjelajah Kesejukan Istana Air Tamansari Jogjakarta (Water Castle).Dalam sejarah kerajaan jawa terutama di sekitar propinsi Yogyakarta (jogja) tak bisa dilepaskan dari yang bernama kerajaan mataram islam, yang saat ini lebih dikenal dengan keraton Yogyakarta dan Keraton Surakarta. Nah, bercerita tentang jogja maka tak bisa dipisahkan dari keberadaan penciptaan arsitektur yang sangat bagus di sekitar keraton Jogja, selain bangunan Keraton sendiri juga ada bangunan yang menarik, masyarakat biasa menyebutnya dengan Tamansari.
                
                                                     Tamansari merupakan sebuah komplek sistematis yang lebih banyak menonjolkan artistik pada bagian kolam dan air. Hal yang sama ketika Petualang berjalan di sekitar Sumur Gemuling (Gumuling) dimana nilai artistik pada bagunan tersebut lebih banyak menunjukan sisi kesejukan air.

                                                   
                                                     Tamansari kemudian banyak disebut sebagai Istana Air (water castle) yang karena nilai arsitektur dan keunikan pada lekukan bangunan dan air yang terisi dikolam kolam. Dalan sejarahnya yang disampaikan oleh beberapa orang yang menjadi guide Istana Air Tamansari menyebutkan bahwa Taman ini dipergunakan oleh Raja Mataram (Jogja) untuk melakukan mandi pada bulan-bulan tertentu. Ada sedikit kemistikan yang terjadi di sekitar area kolam kala itu. Ketika Raja hendak masuk ke Istana Air Tamansari maka disambut dengan musik gamelan yang dilagukan dari bangunan-bangunan kecil di kanan dan kiri yang ada di depan Istana Air Tamansari. Lalu ada upacara tertentu untuk menyambut Raja dan orang-orang yang hendak masuk ke Istana Air Tamansari Istana Air Tamansari ini dibangun ketika pada tahun 1758-1769 oleh Raja Mataram (Jogja) yang bernama Sultan Hamengku buwono I.

               INI MENGGUNAKAN FORMAT FONT "Eras-Light-ITC.TTF"
            Walaupun kondisinya berbeda dengan ketika Istana Air Tamansari ini dibuat, namun kondisinya masih tetap terjaga dan masih nampak sebagian besar yang bisa menjadi simbol keunikan dan artistik dari bangunan tersebut. Bangunan-bangunan yang masih tersisa misalnya Sumur Gemuling (Gumuling), Gedhong Gapura Hageng ( Hageng = besar) didekat pintu masuk, Umbul Pasiraman (yang sekarang ada kolam-kolam ketika pertama masuk), Gedhong Gapura Panggung ( Kolam yang terdapat bangunan kembar di sisi kanan dan kiri berekatan dengan kolam), dan beberapa bangunan yang hendak menuju ke Sumur Gemuling yang sekarang menjadi tempat bagi masyarakat jogjakarta. Dulu, antara Istana Air Tamansari dan Sumur Gemuling merupakan taman-taman yang indah dan sejuk, namun sekarang hanya tersisa taman kecil yang berada di paling belakang Istana Air Tamansari.
    Walaupun tak seindah dan sesejuk ketika jaman dulu Istana ini dibuat, namun keunikan dan artistik dari bentuk bangunan Tamansari bisa menyenangkan untuk dinikmati. Cuaca yang panas tidak menjadi persoalan, apalagi ketika melihat kolam-kolam air yang menyegarkan dan menyejukan seolah memanggil untuk segera berendam. Namun karena memang Istana Air Tamansari ini merupakan bangunan cagar budaya, tidak lagi diperbolehkan untuk para Petualang nyegur dan berendam. Istana Air Tamansari sangat pas untuk dijadikan alternatif tambahan ketika ingin menyusuri Jogja untuk melihat keindahan dan keunikan Jawa dijamannya hingga sekarang.
    Kalau berpetualang hari ahad, tipsnya adalah datang pagi ke Istana Air Tamasari lalu berjalan beberapa meter ke arah belakang menuju Sumur Gumuling. Nah, sebelum jam menunjukan pukul 10.00 am silakan untuk segera berkunjung ke Keraton Jogjakarta untuk melihat tari dan iringan musik gamelan yang mengugah rasa, kalau boleh dinilai maka tari dan musik di keraton Jogja bisa dinilai sepuluh plus (10+). Selain gerakan tarian yang sangat bagus, juga tabuhan musik gamelan yang membuat pendengarnya untuk tetap terdiam menikmati.
           
             
                            
           
              Pariwisata kota Yogyakarta.net copyright 2014
           

         

       

                   

     CSS
    *{
      margin:0;
      padding:0;
    }

    @font-face {
    font-family: 'Browallia New';
    src: local('?'),url('font/Browallia-New.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    }

    body{
      background-color:#DDDDDD;
    }

    #wrapper{
      width : 780px;
      margin: 0 auto;
      overflow: hidden;
    }
    #header{
      background: url(images/header.jpg) repeat-x #555;
      height : 70px;
      width : 100%;
      padding:5px;
      margin : 20px 0;
      overflow : hidden;
    }
    #header img{ width:800px ; height:38px ;
    }
    #menu-utama{
      margin-top:3px;
      list-style:none;
    }
    #menu-utama li{
      float:left;
      padding:8px 20px;
      border-right:1px solid #555555;
    }
    #menu-utama li a{
      color : #ffffff;
      text-decoration:none;
    }

    #header form{
      float:right;
      margin-top:7px;
      margin-right: 10px;
      color : #ffffff;
    }

    #header form input{
      border:none;
      height:20px;
    }

    .artikel{
      background:#ffffff;
      padding:10px;
      margin-bottom:20px;
      overflow:hidden;
    }
    .artikel img{
      float:left;
      margin-right:10px;
      width:200px;
      height:165px
    }
    .artikel b{
      color:#616060;
      background:#DDDDDD;
      padding:3px;
      font-size:12px;
      font-weight:bold;
      margin-right:10px;

    }
    .artikel p{
      margin:10px 0;
      font-family: 'Browallia New';

    }
    .artikel a{
      display:block;
      text-align:right;
      color:#636363;
    }

    #footer{
      clear:both;
      margin:20px 0;
      text-align:center;
      background-color: #f0f0f0;
      padding:5px;
      color:#555555;
    }

    *{
      margin:0;
      padding:0;
    }

    @font-face {
    font-family: Eras Light ITC;
    src: local('?'),url('font/Eras-Light-ITC.TTF') format('truetype');
    font-weight: normal;
    font-style: normal;
    }

    body{
      background-color:#DDDDDD;
    }

    #wrapper{
      width : 780px;
      margin: 0 auto;
      overflow: hidden;
    }
    #header{
      background: url(images/header.jpg) repeat-x #555;
      height : 70px;
      width : 100%;
      padding:5px;
      margin : 20px 0;
      overflow : hidden;
    }
    #header img{ width:800px ; height:38px ;
    }
    #menu-utama{
      margin-top:3px;
      list-style:none;
    }
    #menu-utama li{
      float:left;
      padding:8px 20px;
      border-right:1px solid #555555;
    }
    #menu-utama li a{
      color : #ffffff;
      text-decoration:none;
    }

    #header form{
      float:right;
      margin-top:7px;
      margin-right: 10px;
      color : #ffffff;
    }

    #header form input{
      border:none;
      height:20px;
    }

    .artikel{
      background:#ffffff;
      padding:10px;
      margin-bottom:20px;
      overflow:hidden;
    }
    .artikel img{
      float:left;
      margin-right:10px;
      width:200px;
      height:165px
    }
    .artikel b{
      color:#616060;
      background:#DDDDDD;
      padding:3px;
      font-size:12px;
      font-weight:bold;
      margin-right:10px;
     

    }
    .artikel p{
      margin:10px 0;
      font-family: 'Eras Light ITC';

    }
    .artikel a{
      display:block;
      text-align:right;
      color:#636363;
    }

    #footer{
      clear:both;
      margin:20px 0;
      text-align:center;
      background-color: #f0f0f0;
      padding:5px;
      color:#555555;
    }

    HTML
     
       
          Pariwisata Kota Jogja
                     
                   
       

      
         
           
              logo
             
               





  • Home
  •            





  • Galeri
  •            





  • Video
  •                                                





  • Kontak
  •                                                





  • Login
  •                                

          
             
                                         
                
             

           

                                   
      
           
             
                Gambar Artikel
               

    PANTAI INDRAYANTI

                JUN 01, 2014Dilihat : 3,487,497
                Pantai Indrayanti merupakan salah satu pantai yang berada di Kabupaten Gunung Kidul Daerah Istimewa Yogyakarta. Pantai yang terletak di Desa Tepus ini bersebelahan dengan Pantai Sundak. Pasir Putih membentang dari timur ke barat di Pantai Indrayanti. Selain pasir putih, para wisatawan sangat dimanjakan dengan keindahan dan kebersihan pantai ini.
                                                    Menuju Pantai Indrayanti anda membutuhkan waktu kurang lebih 2 jam perjalanan dari Kota Yogyakarta. Dari Wonosari ada 2 jalan menuju pantai Indrayanti, pertama melalui jalur Selatan yang melewati Pantai Baron, Kukup, Krakal, Sundak dan ke timur sampai Pantai Indrayanti. Atau bisa melewati pertigaan dari Wonosari mengambil jalur ke kiri arah ke Pantai Sundak, Siung dan Wediombo. Jalan menuju lokasi Pantai sudah cukup baik tetapi harus berhati - hati karena medan yang naik turun melewati perbukitan sewu. Untuk sampai disana anda harus menggunakan kendaraan pribadi dikarenakan belum ada kendaraan umum yang melayani rute tersebut.
     
                                                     
             
                            
           
              Pariwisata kota Yogyakarta.net copyright 2014
           

         

       

                   

    CSS
    *{
      margin:0;
      padding:0;
    }

    @font-face {
    font-family: Dael Calligraphy;
    src: local('?'),url('font/Dael-Calligraphy.TTF') format('truetype');
    font-weight: normal;
    font-style: normal;
    }

    body{
      background-color:#DDDDDD;
    }

    #wrapper{
      width : 780px;
      margin: 0 auto;
      overflow: hidden;
    }
    #header{
      background: url(images/header.jpg) repeat-x #555;
      height : 70px;
      width : 100%;
      padding:5px;
      margin : 20px 0;
      overflow : hidden;
    }
    #header img{ width:800px ; height:38px ;
    }
    #menu-utama{
      margin-top:3px;
      list-style:none;
    }
    #menu-utama li{
      float:left;
      padding:8px 20px;
      border-right:1px solid #555555;
    }
    #menu-utama li a{
      color : #ffffff;
      text-decoration:none;
    }

    #header form{
      float:right;
      margin-top:7px;
      margin-right: 10px;
      color : #ffffff;
    }

    #header form input{
      border:none;
      height:20px;
    }

    .artikel{
      background:#ffffff;
      padding:10px;
      margin-bottom:20px;
      overflow:hidden;
    }
    .artikel img{
      float:left;
      margin-right:10px;
      width:200px;
      height:165px
    }
    .artikel b{
      color:#616060;
      background:#DDDDDD;
      padding:3px;
      font-size:12px;
      font-weight:bold;
      margin-right:10px;
     

    }
    .artikel p{
      margin:10px 0;
      font-family: 'Dael Calligraphy';

    }
    .artikel a{
      display:block;
      text-align:right;
      color:#636363;
    }

    #footer{
      clear:both;
      margin:20px 0;
      text-align:center;
      background-color: #f0f0f0;
      padding:5px;
      color:#555555;
       font-family:'Dael Calligraphy';
    }
    TAMPILAN

    HTML
     
       
          Pariwisata Kota Jogja
                     
                     
       

      
         
           
              logo
             
               





  • Home
  •            





  • Galeri
  •            





  • Video
  •                                                





  • Kontak
  •                                                





  • Login
  •                                

          
             
                                         
                
             

           

                                   
      
           
             
                Gambar Artikel
               

    CAND PRAMBANAN

                JUN 01, 2014Dilihat : 3,487,497
                Sekilas Candi Prambanan Candi Rara Jonggrang atau Lara Jonggrang yang terletak di Prambanan adalah kompleks candi Hindu terbesar di Indonesia. Candi ini terletak di propinsi Jawa Tengah, di pulau Jawa, kurang lebih 20 km timur Yogyakarta, 40 km barat Surakarta dan 120 km selatan Semarang, persis di perbatasan antara provinsi Jawa Tengah dan Daerah Istimewa Yogyakarta. Candi Rara Jonggrang terletak di desa Prambanan yang wilayahnya dibagi antara kabupaten Sleman dan Klaten.Pembangunan candi ini pada sekitar tahun 850 Masehi. Belum jelas siapa pendirinya, namun salah seorang dari kedua orang ini, yakni: Rakai Pikatan, raja kedua wangsa Mataram I atau Balitung Maha Sambu, semasa Tidak lama setelah dibangun, candi ini ditinggalkan dan mulai rusak.
                                                    Renovasi candi ini dimulai pada tahun 1918, dan sampai sekarang belum selesai. Bangunan utama baru diselesaikan pada tahun 1953. Banyak bagian candi yang direnovasi, menggunakan batu baru, karena batu-batu asli banyak yang dicuri atau dipakai ulang di tempat lain. Sebuah candi hanya akan direnovasi apabila minimal 75% batu asli masih ada. Oleh karena itu, banyak candi-candi kecil yang tak dibangun ulang dan hanya tampak fondasinya saja. Sekarang, candi ini adalah sebuah situs yang dilindungi oleh UNESCO mulai tahun 1991. Antara lain hal ini berarti bahwa kompleks ini terlindung dan memiliki status istimewa, misalkan juga dalam situasi peperangan.

             
                            
           
              Pariwisata kota Yogyakarta.net copyright 2014
           

         

       

                   

    CSS
    *{
      margin:0;
      padding:0;
    }

    @font-face {
    font-family: PRISTINA;
    src: local('?'),url('PRISTINA.TTF') format('truetype');
    font-weight: normal;
    font-style: normal;
    }

    body{
      background-color:#DDDDDD;
    }

    #wrapper{
      width : 780px;
      margin: 0 auto;
      overflow: hidden;
    }
    #header{
      background: url(images/header.jpg) repeat-x #555;
      height : 70px;
      width : 100%;
      padding:5px;
      margin : 20px 0;
      overflow : hidden;
    }
    #header img{ width:800px ; height:38px ;
    }
    #menu-utama{
      margin-top:3px;
      list-style:none;
    }
    #menu-utama li{
      float:left;
      padding:8px 20px;
      border-right:1px solid #555555;
    }
    #menu-utama li a{
      color : #ffffff;
      text-decoration:none;
    }

    #header form{
      float:right;
      margin-top:7px;
      margin-right: 10px;
      color : #ffffff;
    }

    #header form input{
      border:none;
      height:20px;
    }

    .artikel{
      background:#ffffff;
      padding:10px;
      margin-bottom:20px;
      overflow:hidden;
    }
    .artikel img{
      float:left;
      margin-right:10px;
      width:200px;
      height:165px
    }
    .artikel b{
      color:#616060;
      background:#DDDDDD;
      padding:3px;
      font-size:12px;
      font-weight:bold;
      margin-right:10px;
     

    }
    .artikel p{
      margin:10px 0;
      font-family: 'PRISTINA';

    }
    .artikel a{
      display:block;
      text-align:right;
      color:#636363;
    }

    #footer{
      clear:both;
      margin:20px 0;
      text-align:center;
      background-color: #f0f0f0;
      padding:5px;
      color:#555555;
    }

    HTML (SAMA)
    CSS
    *{
      margin:0;
      padding:0;
    }

    @font-face {
    font-family: Lumpbump;
    src: local('?'),url('font/Lumpbump.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    }

    body{
      background-color:#DDDDDD;
    }

    #wrapper{
      width : 780px;
      margin: 0 auto;
      overflow: hidden;
    }
    #header{
      background: url(images/header.jpg) repeat-x #555;
      height : 70px;
      width : 100%;
      padding:5px;
      margin : 20px 0;
      overflow : hidden;
    }
    #header img{ width:800px ; height:38px ;
    }
    #menu-utama{
      margin-top:3px;
      list-style:none;
    }
    #menu-utama li{
      float:left;
      padding:8px 20px;
      border-right:1px solid #555555;
    }
    #menu-utama li a{
      color : #ffffff;
      text-decoration:none;
    }

    #header form{
      float:right;
      margin-top:7px;
      margin-right: 10px;
      color : #ffffff;
    }

    #header form input{
      border:none;
      height:20px;
    }

    .artikel{
      background:#ffffff;
      padding:10px;
      margin-bottom:20px;
      overflow:hidden;
    }
    .artikel img{
      float:left;
      margin-right:10px;
      width:200px;
      height:165px
    }
    .artikel b{
      color:#616060;
      background:#DDDDDD;
      padding:3px;
      font-size:12px;
      font-weight:bold;
      margin-right:10px;
     

    }
    .artikel p{
      margin:10px 0;
      font-family: 'Lumpbump';

    }
    .artikel a{
      display:block;
      text-align:right;
      color:#636363;
    }

    #footer{
      clear:both;
      margin:20px 0;
      text-align:center;
      background-color: #f0f0f0;
      padding:5px;
      color:#555555;
    }


    Html sama
    Css
    *{
      margin:0;
      padding:0;
    }

    @font-face {
    font-family: Flowerpot;
    src: local('?'),url('font/Flowerpot.otf') format('truetype');
    font-weight: normal;
    font-style: normal;
    }

    body{
      background-color:#DDDDDD;
    }

    #wrapper{
      width : 780px;
      margin: 0 auto;
      overflow: hidden;
    }
    #header{
      background: url(images/header.jpg) repeat-x #555;
      height : 70px;
      width : 100%;
      padding:5px;
      margin : 20px 0;
      overflow : hidden;
    }
    #header img{ width:800px ; height:38px ;
    }
    #menu-utama{
      margin-top:3px;
      list-style:none;
    }
    #menu-utama li{
      float:left;
      padding:8px 20px;
      border-right:1px solid #555555;
    }
    #menu-utama li a{
      color : #ffffff;
      text-decoration:none;
    }

    #header form{
      float:right;
      margin-top:7px;
      margin-right: 10px;
      color : #ffffff;
    }

    #header form input{
      border:none;
      height:20px;
    }

    .artikel{
      background:#ffffff;
      padding:10px;
      margin-bottom:20px;
      overflow:hidden;
    }
    .artikel img{
      float:left;
      margin-right:10px;
      width:200px;
      height:165px
    }
    .artikel b{
      color:#616060;
      background:#DDDDDD;
      padding:3px;
      font-size:12px;
      font-weight:bold;
      margin-right:10px;
     

    }
    .artikel p{
      margin:10px 0;
      font-family: 'Flowerpot';

    }
    .artikel a{
      display:block;
      text-align:right;
      color:#636363;
    }

    #footer{
      clear:both;
      margin:20px 0;
      text-align:center;
      background-color: #f0f0f0;
      padding:5px;
      color:#555555;
    }
    tampilan


    3).KESIMPULAN
    a.       Dalam CSS dapat menampilkan jenis font pada halaman Web yang ada walaupun jenis font tersebut belum diinstall pada komputer klien.Dengan menggunakan “font-face”
    b.      Didalam css pun juga dapat digunakan untuk menggatur jenis font sehingga fungsi tag dalam html pun jadi jarang diggunakan.

    4).LISTING TERLAMPIR





      Blogger Comment
      Facebook Comment

    0 komentar:

    Post a Comment

    Thanks For Your Feedback.