PEMROGRAMAN WEB: PRAK PERTEMUAN V Transparent Sexy Pink Heart

Minggu, 21 April 2013

PRAK PERTEMUAN V

Materi :
1.   Cascading Style Sheet (CSS)
2.   Desain Web Dengan CSS

Ada 3 Jenis CSS yaitu :
1.   Inline css
2.   Internal css
3.   External css


v  Inline css
à css yang dituliskan di dalam tag html
Contoh format tag <body> untuk warna putih dan warna latar belakang hitam

<body style="color:white;background-color:black;">

à setiap attribut dipisahkan tanda ; (semicolon)

Latihan 1.
1.   Jalankan notepad
2.   Ketikkan struktur HTML
<html>
  <head>
    <title>Inline CSS</title>
  </head>
  <body>
  </body>
</html>

3.    format tag <body> warna tulisan putih dan warna latar belakang hitam
<html>
  <head>
    <title>Inline CSS</title>
  </head>
  <body style="color:white;background-color:black;">
  </body>
</html>

4.   Ketikkan tulisan dalam tag <body>
<html>
  <head>
    <title>Inline CSS</title>
  </head>
  <body style="color:white;background-color:black;">
    Selamat Datang di Program Studi Sistem Informasi
    Fakultas Ilmu Komputer, Universitas Katolik St. Thomas
    Sumatera Utara Medan. 
  </body>
</html>

5.   Masukkan tag <h1> dan format tag <h1>
<html>
  <head>
    <title>Inline CSS</title>
  </head>
  <body style="color:white;background-color:black;">
    Selamat Datang di Program Studi Sistem Informasi
    Fakultas Ilmu Komputer, Universitas Katolik St. Thomas
    Sumatera Utara Medan.
   <!-- Tag h1 tanpa style -->
   <h1>Pemrograman Web</h1>
   <!-- Tag h1 dengan style -->
   <h1 style="color           : yellow;
              font-size       : 50px;
              background-color: teal;
              border          : 5px solid cyan;
              text-align      : center;">Prodi Sisfo</h1>
  </body>
</html>

6.   Format tag <p>
<html>
  <head>
    <title>Inline CSS</title>
  </head>
  <body style="color:white;background-color:black;">
    Selamat Datang di Program Studi Sistem Informasi
    Fakultas Ilmu Komputer, Universitas Katolik St. Thomas
    Sumatera Utara Medan.
   <!-- Tag h1 tanpa style -->
   <h1>Pemrograman Web</h1>
   <!-- Tag h1 dengan style -->
   <h1 style="color           : yellow;
              font-size       : 50px;
              background-color: teal;
              border          : 5px solid cyan;
              text-align      : center;">Prodi Sisfo</h1>
   <p  style="color           : gold;
              background-color: magenta;
              font-size       : 14pt;
              font-face       : Arial Verdana MS-Sanserif;
              text-align      : justify;
              text-indent     : 30px;
              line-height     : 50px;">
      Terima Kasih Saya Ucapkan Kepada Bapa di Surga Atas
      Limpahan <b>KASIH</b> Yang Telah Diberikan. Mulai Dari
      Pagi Hari Pada Saat Bangun Tidur Hingga Saat Ini Bapa
      Tetap Menjagai Saya. Saya Sadar Bapa Dalam Ucapan,
      Pikiran dan Tindakan Saya Banyak Kesalahan Yang Telah
      Saya Perbuat. Oleh Karena Itu Ampunilah Saya Ya Bapa,
      Kasihanilah Saya Selama-Lamanya. Amin.</p>
   </p>
  </body>
</html>



v  Internal CSS
è Css yang dituliskan di dalam tag <head>
è Ditandai dengan kata <style </style>
Kode CSS Internal
<html>
  <head>
    <title>Internal CSS</title>
     <style>
        h1 {
              color           : yellow;
              font-size       : 50px;
              background-color: teal;
              border          : 5px solid cyan;
              text-align      : center;
           }

        p.a  {
              color           : gold;
              background-color: magenta;
              font-size       : 14pt;
              font-face       : Arial Verdana MS-Sanserif;
              text-align      : justify;
              text-indent     : 30px;
              line-height     : 50px;
           }

        p.b  {
              color           : blue;
              background-color: magenta;
              font-size       : 14pt;
              font-face       : Arial Verdana MS-Sanserif;
              text-align      : justify;
              text-indent     : 30px;
              line-height     : 50px;
           }

     </style>
  </head>
  <body style="color:white;background-color:black;">
    Selamat Datang di Program Studi Sistem Informasi
    Fakultas Ilmu Komputer, Universitas Katolik St. Thomas
    Sumatera Utara Medan.
   <!-- Tag h1 tanpa style -->
   <h1>Pemrograman Web</h1>
   <!-- Tag h1 dengan style -->
   <h1>Prodi Sisfo</h1>
   <p class="a">
      Terima Kasih Saya Ucapkan Kepada Bapa di Surga Atas
      Limpahan <b>KASIH</b> Yang Telah Diberikan. Mulai Dari
      Pagi Hari Pada Saat Bangun Tidur Hingga Saat Ini Bapa
      Tetap Menjagai Saya. Saya Sadar Bapa Dalam Ucapan,
      Pikiran dan Tindakan Saya Banyak Kesalahan Yang Telah
      Saya Perbuat. Oleh Karena Itu Ampunilah Saya Ya Bapa,
      Kasihanilah Saya Selama-Lamanya. Amin.</p>
   </p>
   <p class="b">
      Terima Kasih Saya Ucapkan Kepada Bapa di Surga Atas
      Limpahan <b>KASIH</b> Yang Telah Diberikan. Mulai Dari
      Pagi Hari Pada Saat Bangun Tidur Hingga Saat Ini Bapa
      Tetap Menjagai Saya. Saya Sadar Bapa Dalam Ucapan,
      Pikiran dan Tindakan Saya Banyak Kesalahan Yang Telah
      Saya Perbuat. Oleh Karena Itu Ampunilah Saya Ya Bapa,
      Kasihanilah Saya Selama-Lamanya. Amin.</p>
   </p>
  </body>
</html>


                      <<< SELAMAT BERLATIH >>>

Diposting oleh Bernadetha Meliala