Rabu, 19 Juni 2013

Laporan CSS Internal dan Eksternal : Fotografi


Langkah langkah membuat CCS

  • Internal
  1. Buka notepad
  2. Ketikkan script seperti berikut
  3. <html>
    <head>
    <title>CSS Internal</title>
    <style type="text/css">
    body{
    background-image:url(http://3.bp.blogspot.com/-rmrHDs5y2NI/Ub7zQrTQKQI/AAAAAAAAATs/0NQva4HO2mE/s1600/naruto-vs-sasuke-shippuden-free-208483~1.jpg); background-repeat:no-repeat;
    background-color:#5cc2e9; font-family:verdana; font-size:12px; color:#0099CC;
    }
    #bungkus{
    border:1px dotted #0099FF; background-color:#FFFFFF;
    background-image:url(lipatan.jpg); background-repeat:no-repeat; background-position:top right;
    margin-left:350px;
    }
    #judul{
    font-family:Geneva; font-size:32px; color:#FF6600; font-weight:bold;
    text-align:center;
    }
    #subjudul{
    font-family:Geneva; font-size:24px; color:#FF6600; font-weight:bold;
    }
    #menu{
    margin-left:15px;
    }
    #menu a:hover{
    background-color:#CCFFFF; font-weight:normal;
    padding:5px;
    }
    a:link{
    color:#FF6600; text-decoration:none;
    }
    a:hover{
    font-weight:bold;
    }
    a:visited{
    color:#FF6600;
    }
    a:active{
    color:#FF6600;
    }
    .gambar1{
    width:120px; height:100px; float:left;
    padding:5px;
    }
    .gambar2{
    width:120px; height:100px; float:right;
    padding:5px;
    }
    ul{
    list-style:none;
    }
    li{
    background-image:url(panah.png); background-repeat:no-repeat; padding:4px 0px 0px 25px;;
    }
    #konten{
    margin:15px;
    }
    .teks{
    text-align:justify;
    }
    #footer{
    margin:10px 0px 0px 350px; border:1px dotted #0099FF;
    padding:5px; text-align:center; color:#0099FF; background-color:#FFFFFF;
    }
    </style>
    </head>
    <body>
    <div id="bungkus">
    <div id="judul">Selamat Datang</div>

    <div id="konten">
    <img src="http://farm4.static.flickr.com/3578/3468765536_74c5c8fae2.jpg">
    <br /><p class="teks">Selamat datang, di website ini saya menjelaskan semua tentang fotografi</p>
    <p class="teks"> Fotografi (dari bahasa Inggris: photography, yang berasal dari kata Yunani yaitu "photos" : Cahaya dan "Grafo" : Melukis/menulis.) adalah proses melukis/menulis dengan menggunakan media cahaya. Sebagai istilah umum, fotografi berarti proses atau metode untuk menghasilkan gambar atau foto dari suatu obyek dengan merekam pantulan cahaya yang mengenai obyek tersebut pada media yang peka cahaya. Alat paling populer untuk menangkap cahaya ini adalah kamera. Tanpa cahaya, tidak ada foto yang bisa dibuat.
    Prinsip fotografi adalah memokuskan cahaya dengan bantuan pembiasan sehingga mampu membakar medium penangkap cahaya. Medium yang telah dibakar dengan ukuran luminitas cahaya yang tepat akan menghailkan bayangan identik dengan cahaya yang memasuki medium pembiasan (selanjutnya disebut lensa).
    Untuk menghasilkan intensitas cahaya yang tepat untuk menghasilkan gambar, digunakan bantuan alat ukur berupa lightmeter. Setelah mendapat ukuran pencahayaan yang tepat, seorang fotografer bisa mengatur intensitas cahaya tersebut dengan mengubah kombinasi ISO/ASA (ISO Speed), diafragma (Aperture), dan kecepatan rana (speed). Kombinasi antara ISO, Diafragma & Speed disebut sebagai pajanan (exposure).
    Di era fotografi digital dimana film tidak digunakan, maka kecepatan film yang semula digunakan berkembang menjadi Digital ISO.
    </p>
    </div>
    <div id="footer">Copyright @ 2012 | <a href="http://facebook.com/muh.widad">facebook</a> | <a href="http://twitter.com/Shuzaku_Sama">twitter</a></div>
    </body>
    </html>
  4. Simpan hasil notepad dengan nama "CSS Internal.html". Ingat. pada kolom nama harus berekstensi .html. Jika tidak maka hasilnya akan berbeda.
  5. Maka hasilnnya seperti berikut


  • Eksternal
  1. Buka notepad seperti biasa.
  2. Ketikkan script berikut
  3. <html>
      <head>
        <title>Fotografi</title>
          <link rel="stylesheet" type="text/css" href="eksternal.css">
            </head>
              <body>
                <ul class="dropmenu">
                      <li><a href='http://myblog-worlds.blogspot.com/'>HOME</a></li>
                        <li><a href='http://myblog-worlds.blogspot.com/'>Blogger</a></li>
                        </ul>
                         
                          <br />
                            <br />
                              <center><h1>Teknik Pada Fotografi</h1></center>
                                <span id="gaya"><p>Berbagai macam teknik fotografi
                                  <br />
                                    1. Depth of field (ruang tajam)<br />
                                      Hal-hal yang mempengaruhi ruang tajam:<br />
                                        -Jarak pemotretan (jauh=luas, dekat=sempit)<br />
                                          -Bukaan diafragma (kecil=luas, besar=sempit)<br />
                                            -Jarak fokus lensa /focal length (tele=sempit, wide=luas, normal=bisa diatur)<br />

                                                <img src="http://1.bp.blogspot.com/_cWyScTjjyBw/S2KRtTxnayI/AAAAAAAAAA4/d-3Jf08bfUk/s400/1.jpg"><br />
                                                  Contoh foto dengan teknik depth of field<br />
                                                    <br />
                                                      2. Panning<br />
                                                        -Panning adalah salah satu cara untuk memberikan kesan gerak pada foto.<br />
                                                          -Ketika melakukan panning, anda harus mengikuti objek selama membidik.<br />
                                                            -Hasil foto menjadikan objek menjadi relatif tajam dibandingkan dengan backgroundnya yang hampir sepenuhnya blur.<br />
                                                              -Untuk mendapatkan foto panning secara maksimal; dengan speed rendah (8-60), dan pakailah tripod (kaki tiga).<br />
                                                                <br />
                                                                  <img src="http://4.bp.blogspot.com/_cWyScTjjyBw/S2KS91sAprI/AAAAAAAAABI/G6a6ZT0YKEA/s400/3.jpg"><br />
                                                                    Contoh foto dengan teknik panning<br />
                                                                      <br />
                                                                        3. Slow & stop action<br />
                                                                          -Slow action : salah satu teknik fotografi yang bertujuan memperlihatkan/menangkap gerakan objek. Biasanya digunakan kecepatan rendah, antara 1/30 sampai 1 detik<br />
                                                                            -Stop action : kebalikan dari slow, yaitu teknik fotografi untuk bertujuan membekukan gerak objek. Biasanya digunakan kecepatan tinggi, antara 1/125 sampai 1/4000 atau lebih.<br />
                                                                              <br />
                                                                                <img src="http://1.bp.blogspot.com/_cWyScTjjyBw/S2KT-1l9kBI/AAAAAAAAABY/Af6x9sEoY5M/s320/4.jpg"><br />
                                                                                  Contoh foto dengan teknik slow action<br />
                                                                                    <br />
                                                                                      Data teknis:<br />
                                                                                        -Kamera : Nikon FM10<br />
                                                                                          -Lensa : 35 – 70 mm<br />
                                                                                            -Speed : 8<br />
                                                                                              -Diafragma : 3,5<br />
                                                                                                -ASA : 200<br />
                                                                                                  -Lokasi : TBS<br />
                                                                                                    <br />
                                                                                                      <img src="http://4.bp.blogspot.com/_cWyScTjjyBw/S2KUX9fU4rI/AAAAAAAAABg/EZkd-j6Fr40/s400/5.jpg"><br />
                                                                                                        Contoh foto dengan teknik slow action<br />
                                                                                                          <br />
                                                                                                            Kamera : Canon 30D, speed : 10, diapragma : 5,6 ASA: 1600<br />
                                                                                                              <br />
                                                                                                                <img src="http://4.bp.blogspot.com/_cWyScTjjyBw/S2KU4_ccqTI/AAAAAAAAABo/sEPIoSUGl4o/s320/6.jpg"><br />
                                                                                                                  Contoh foto dengan teknik stop action<br />
                                                                                                                    <br />
                                                                                                                      Data teknis:<br />
                                                                                                                        -Kamera : Nikon D100 Digital<br />
                                                                                                                          -Lensa : 28 – 105 mm Nikkor D<br />
                                                                                                                            -Speed : 125 (with soft box)<br />
                                                                                                                              -Diafragma : 16<br />
                                                                                                                                -ASA : 200<br />
                                                                                                                                  <br />
                                                                                                                                    4. Zooming<br />
                                                                                                                                      -Zooming adalah teknik foto untuk memberikan kesan gerak dengan mengubah panjang fokus lensa.<br />
                                                                                                                                        -Perubahan panjang fokus hanya dapat dilakukan dengan lensa zoom.<br />
                                                                                                                                          -Untuk mendapatkan kesan gerak, anda harus menggunakan kecepatan rana tidak lebih dari 1/30 detik.<br />
                                                                                                                                            -Untuk mendapatkan foto zooming secara maksimal, pakailah tripod (kaki tiga)<br />
                                                                                                                                              <br />
                                                                                                                                                Data teknis:<br />
                                                                                                                                                  -Kamera : Nikon D100 Digital<br />
                                                                                                                                                    -Lensa : 28 – 80 Nikkor D<br />
                                                                                                                                                      -Speed : 5 (with flash)<br />
                                                                                                                                                        -Diafragma : 3.5<br />
                                                                                                                                                          -ASA : 400<br />
                                                                                                                                                            -White balance : flash<br />
                                                                                                                                                              <br />
                                                                                                                                                                <img src="http://2.bp.blogspot.com/_cWyScTjjyBw/S2KV5TMkCEI/AAAAAAAAAB4/wvEvks6V2L8/s400/8.jpg"><br />
                                                                                                                                                                  Contoh foto dengan teknik zooming<br />
                                                                                                                                                                    <br />
                                                                                                                                                                      5. Bulb<br />
                                                                                                                                                                        -Kecepatan rana dapat diatur sesuai dengan waktu yang kita inginkan.<br />
                                                                                                                                                                          -Teknik ini dilakukan dengan menahan tombol pelepas rana dengan lebih lama.<br />
                                                                                                                                                                            -Untuk mendapatkan hasil foto bulb secara maksimal, dapat digunakan kabel release dan tripod.<br />
                                                                                                                                                                              -Misal, kita mempergunakan kecepatan 30 detik sampai habis waktu perekaman cahaya.<br />
                                                                                                                                                                                <img src="http://2.bp.blogspot.com/_cWyScTjjyBw/S2KW1bDEoLI/AAAAAAAAACY/ToSdYddoaEQ/s400/11.jpg"><br />
                                                                                                                                                                                  </p></span>

                                                                                                                                                                                      <div class='fwidget'>
                                                                                                                                                                                        <div class='fwidget-body'>
                                                                                                                                                                                          <center><font face="algerian" size=7 color="red">Fotografi</font></center>
                                                                                                                                                                                            </div>
                                                                                                                                                                                              </div>
                                                                                                                                                                                                </body>
                                                                                                                                                                                                  </html>
                                                                                                                                                                                                1. Simpan dengan nama CSS Eksternal.html.
                                                                                                                                                                                                2. Buka notepad lagi
                                                                                                                                                                                                3. Ketikkan script berikut
                                                                                                                                                                                                4. .dropmenu {
                                                                                                                                                                                                    background: orange;
                                                                                                                                                                                                          list-style-type: none;
                                                                                                                                                                                                            margin: ;
                                                                                                                                                                                                              padding: 0 auto;
                                                                                                                                                                                                            }
                                                                                                                                                                                                              .dropmenu li {
                                                                                                                                                                                                                    border-top: solid 2px white;
                                                                                                                                                                                                                      float: left;
                                                                                                                                                                                                                        height: 30px;
                                                                                                                                                                                                                      }
                                                                                                                                                                                                                        .dropmenu li a {
                                                                                                                                                                                                                          width: 200px;
                                                                                                                                                                                                                                color: #616161;
                                                                                                                                                                                                                                  display: block;
                                                                                                                                                                                                                                    font: 12px arial, verdana, sans-serif;
                                                                                                                                                                                                                                      font-weight: bold;
                                                                                                                                                                                                                                        padding: 9px 20px;
                                                                                                                                                                                                                                          text-decoration: none;
                                                                                                                                                                                                                                        }
                                                                                                                                                                                                                                          .dropmenu li:hover { background: #616161; position: relative; text-decoration: none; }
                                                                                                                                                                                                                                            .dropmenu li:hover a { text-decoration: none; }
                                                                                                                                                                                                                                              .dropmenu li:hover ul {
                                                                                                                                                                                                                                                    background-color: #3f4a54;
                                                                                                                                                                                                                                                      border: 1px solid grey;
                                                                                                                                                                                                                                                        left: 0px;
                                                                                                                                                                                                                                                          padding: 3px;
                                                                                                                                                                                                                                                            top: 30px;
                                                                                                                                                                                                                                                              width: 160px;
                                                                                                                                                                                                                                                            }
                                                                                                                                                                                                                                                              .dropmenu li:hover ul li { border: none; height: 18px; }
                                                                                                                                                                                                                                                                .dropmenu li:hover ul li a {
                                                                                                                                                                                                                                                                      background-color: #778899;
                                                                                                                                                                                                                                                                        border: 1px solid transparent;
                                                                                                                                                                                                                                                                          color: blue;
                                                                                                                                                                                                                                                                            display: block;
                                                                                                                                                                                                                                                                              font-size: 11px;
                                                                                                                                                                                                                                                                                height: 18px;
                                                                                                                                                                                                                                                                                  line-height: 18px;
                                                                                                                                                                                                                                                                                    padding: 0px;
                                                                                                                                                                                                                                                                                      text-decoration: none;
                                                                                                                                                                                                                                                                                        text-indent: 5px;
                                                                                                                                                                                                                                                                                          width: 158px;
                                                                                                                                                                                                                                                                                            padding: 3px;
                                                                                                                                                                                                                                                                                          }
                                                                                                                                                                                                                                                                                            .dropmenu li:hover ul li a:hover {
                                                                                                                                                                                                                                                                                                  background: silver;
                                                                                                                                                                                                                                                                                                    border: solid 1px #444;
                                                                                                                                                                                                                                                                                                      color: #000;
                                                                                                                                                                                                                                                                                                        height: 18px;
                                                                                                                                                                                                                                                                                                          padding: 3px;
                                                                                                                                                                                                                                                                                                        }
                                                                                                                                                                                                                                                                                                          .dropmenu ul {
                                                                                                                                                                                                                                                                                                                left: -9999px;
                                                                                                                                                                                                                                                                                                                  list-style-type: none;
                                                                                                                                                                                                                                                                                                                    position: absolute;
                                                                                                                                                                                                                                                                                                                      top: -9999px;
                                                                                                                                                                                                                                                                                                                    }
                                                                                                                                                                                                                                                                                                                      element:hover {
                                                                                                                                                                                                                                                                                                                        -moz-box-shadow: 0 0 5px rgba(0,0,0,0.5);
                                                                                                                                                                                                                                                                                                                          -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5);
                                                                                                                                                                                                                                                                                                                            box-shadow: 0 0 0.5px rgba(0,0,0,0.5);
                                                                                                                                                                                                                                                                                                                              }
                                                                                                                                                                                                                                                                                                                                a {background-color: black;
                                                                                                                                                                                                                                                                                                                                  text-decoration: none;
                                                                                                                                                                                                                                                                                                                                    color: blue;
                                                                                                                                                                                                                                                                                                                                      }

                                                                                                                                                                                                                                                                                                                                          a:hover {
                                                                                                                                                                                                                                                                                                                                            text-decoration: none;
                                                                                                                                                                                                                                                                                                                                              text-shadow:
                                                                                                                                                                                                                                                                                                                                                0px 1px 0px blue,
                                                                                                                                                                                                                                                                                                                                                  0px 0px 3px red,
                                                                                                                                                                                                                                                                                                                                                    0px 0px 5px green,
                                                                                                                                                                                                                                                                                                                                                      0px 0px 30px orange,
                                                                                                                                                                                                                                                                                                                                                        0px 3px 50px purple;
                                                                                                                                                                                                                                                                                                                                                          }

                                                                                                                                                                                                                                                                                                                                                              body {background-image: url("onwall.jpg");
                                                                                                                                                                                                                                                                                                                                                                }

                                                                                                                                                                                                                                                                                                                                                                    img:hover {
                                                                                                                                                                                                                                                                                                                                                                          box-shadow: 3px 10px 3px 5px rgba(0,0,0,0.5);
                                                                                                                                                                                                                                                                                                                                                                        }

                                                                                                                                                                                                                                                                                                                                                                            .fwidget{background:#000;
                                                                                                                                                                                                                                                                                                                                                                              border-radius:5px;
                                                                                                                                                                                                                                                                                                                                                                                bottom:-5px;
                                                                                                                                                                                                                                                                                                                                                                                  box-shadow:0 0 5px #fff;
                                                                                                                                                                                                                                                                                                                                                                                    color:#fff;
                                                                                                                                                                                                                                                                                                                                                                                      float:left;
                                                                                                                                                                                                                                                                                                                                                                                        height:25px;
                                                                                                                                                                                                                                                                                                                                                                                          margin-left:95px;
                                                                                                                                                                                                                                                                                                                                                                                            opacity:.8;
                                                                                                                                                                                                                                                                                                                                                                                              overflow:hidden;
                                                                                                                                                                                                                                                                                                                                                                                                padding:auto;
                                                                                                                                                                                                                                                                                                                                                                                                  position:fixed;
                                                                                                                                                                                                                                                                                                                                                                                                    text-shadow:0 0 5px #000;
                                                                                                                                                                                                                                                                                                                                                                                                      width:90px;
                                                                                                                                                                                                                                                                                                                                                                                                        z-index:9;
                                                                                                                                                                                                                                                                                                                                                                                                          -o-transition:all 2s ease-in-out;
                                                                                                                                                                                                                                                                                                                                                                                                            -moz-transition:all 2s ease-in-out;
                                                                                                                                                                                                                                                                                                                                                                                                              -webkit-transition:all 2s ease-in-out}
                                                                                                                                                                                                                                                                                                                                                                                                                .fwidget:hover{background:transparent;
                                                                                                                                                                                                                                                                                                                                                                                                                  border:2px solid #000;b
                                                                                                                                                                                                                                                                                                                                                                                                                    ox-shadow:0 0 15px #000;
                                                                                                                                                                                                                                                                                                                                                                                                                      color:#000;
                                                                                                                                                                                                                                                                                                                                                                                                                        height:450px;
                                                                                                                                                                                                                                                                                                                                                                                                                          margin-left:20px;
                                                                                                                                                                                                                                                                                                                                                                                                                            opacity:1;
                                                                                                                                                                                                                                                                                                                                                                                                                              width:240px}
                                                                                                                                                                                                                                                                                                                                                                                                                                .fwidget-body{-o-transition:all 1s ease-in-out;
                                                                                                                                                                                                                                                                                                                                                                                                                                  -moz-transition:all 1s ease-in-out;
                                                                                                                                                                                                                                                                                                                                                                                                                                    -webkit-transition:all 1s ease-in-out}

                                                                                                                                                                                                                                                                                                                                                                                                                                        #gaya {text-shadow: 0 0 7px #1E90FF;
                                                                                                                                                                                                                                                                                                                                                                                                                                          color: #1E90FF;
                                                                                                                                                                                                                                                                                                                                                                                                                                            }
                                                                                                                                                                                                                                                                                                                                                                                                                                          1. Simpan dengan nama "eksternal.css". Ingat harus berekstensi .css. jangan mengubah nama file css ini karena berakibat html gagal memanggil css eksternalnya.
                                                                                                                                                                                                                                                                                                                                                                                                                                          2. Maka hasilnya seperti berikut. Selesai.


                                                                                                                                                                                                                                                                                                                                                                                                                                                     Sekian laporan CSS saya. Bagi yang berminat bisa didownload pada link dibawah ini.  Dan tolong beri kementar dan follow blog ini ya. Terima kasih.



                                                                                                                                                                                                                                                                                                                                                                                                                                          Download CSS Internal dan Eksternal
                                                                                                                                                                                                                                                                                                                                                                                                                                          Sumber

                                                                                                                                                                                                                                                                                                                                                                                                                                          Archive