Materi Ilmu_Komputer {23}: Pertemuan WEB VI

PERTEMUAN VI

MATERI :
                    Cascading Style Sheet
                           1. Inline CSS
                                        2. Internal CSS

3. External CSS

1. Inline css adalah css yang dituliskan langsung di dalam tag.

Soal :

      Formatlah tag h1 dengan css sehingga memiliki ciri sbb:
        1.       Ukuran teks 50px
        2.       Jenis tulisan verdana
        3.       Perataan teks tengah
        4.       Warna tulisan biru
        5.       Latar belakang warna merah
        6.       Border : 10px solid green

Jawab:
1. Buka lembaran baru di notepad

2. Ketikkan struktur html
3. Simpan kode dengan nama css1.html

<head>

<title>CSS Dasar</title>

</head>

<body>

<h1 style="font-size : 50pt;

font-family : verdana;

text-align : center;

color : blue;

background-color : red
border
: 10px solid green;">FIKOM UNIKA</h1>

<h1>Prodi Sistem Informasi</h1>

<p style="text-align : justify;

text-indent : 50px;

font-family : arial;

font-size : 16pt;

color : red;">

Selamat Datang di Program Studi Sistem Informasi, Unika

St. Thomas Medan Sumatera Utara. Program Studi Sistem

            Informasi Telah Terakreditasi BAN-PT. Jumlah Mahasiswa
             Hingga Tahun 2013 Tercatat 350 Orang. Dosen Yang
             Mengajar Lebih Kurang 20 Orang, Dibantu oleh Pegawai
             dan Tenaga Laboran Lebih Kurang 7 Orang.
             Program Studi Sistem Informasi Terus Berbenah Diri
             Untuk Meningkatkan Mutu Lulusannya seperti
             Melakukan Penetapan Kurikulum Baru Ta.2013/2014. </p>

</body>

</html>

Soal 2:

Formatlah tag <p> sehingga memiliki attribut sbb:

         1.      Perataan teks : justif
                  2. Awal paragraph indent : 50 px
               3.   Jenis huruf : arial
                 4.   Besar huruf : 16 pt;

2. Internal CSS adalah css yang dituliskan di dalam tag <head> dan penulisan diapit oleh tanda:

<style>

</style>

      Contoh :
   <html>
     <head>
        <title>CSS Internal</title>
         <style>
           h1
            {
               text-align : center;
               font-size : 50pt;
            }
           h1.umum
            {
               text-align : center;
               font-size : 30pt;
            }
           p
            {
              text-align    : justify;
              text-indent : 50px;
              font-family : arial;
              font-size     : 16pt;
            }
          body {
              background-color : #00ff11;
              font-family           : verdana;
              font-size               : 30pt;
          }
         </style>
     </head>
     <body>
          Pemrograman Web - Prodi Sistem Informasi.
        <h1>Unik St. Thomas</h1>
        <h1 class="umum">Prodi Sistem Informasi</h1>
        <h1>Pemrograman Web</h1>
         <p>Fikom Ok - Fikom Ok - Fikom Ok - Fikom Ok - Fikom Ok -
               Fikom Ok - Fikom Ok - Fikom Ok - Fikom Ok - Fikom Ok -
               Fikom Ok - Fikom Ok - Fikom Ok - Fikom Ok - Fikom Ok -
               Fikom Ok - Fikom Ok - Fikom Ok - Fikom Ok - Fikom Ok -
               Fikom Ok - Fikom Ok - Fikom Ok - Fikom Ok - Fikom Ok -
               Fikom Ok - Fikom Ok - Fikom Ok - Fikom Ok - Fikom Ok - </p>
           <p>Fikom Ok - Fikom Ok - Fikom Ok - Fikom Ok - Fikom Ok -
               Fikom Ok - Fikom Ok - Fikom Ok - Fikom Ok - Fikom Ok -
               Fikom Ok - Fikom Ok - Fikom Ok - Fikom Ok - Fikom Ok -
               Fikom Ok - Fikom Ok - Fikom Ok - Fikom Ok - Fikom Ok -
               Fikom Ok - Fikom Ok - Fikom Ok - Fikom Ok - Fikom Ok -
               Fikom Ok - Fikom Ok - Fikom Ok - Fikom Ok - Fikom Ok - </p>
     </body>
</html>

Materi Ilmu_Komputer {23}

Pages

Sunday, 9 February 2014

Pertemuan WEB VI

No comments :

Post a Comment