Jumat, 13 Maret 2020

Belajar Pemrograman Web dengan Kode CSS (Cascending Style Sheet)

Pertemuan : III
Hari/Tanggal : Kamis, 5 Februari 2020

Materi  :
- Cascending Style sheet (CSS)
- Pesan Domain dan Hosting

Pengantar

CSS merupakan bahasa web yang digunakan untuk Memformat tag tag pada Html.
Ada 3 (Tiga) Jenis CSS :
1. CSS Inline
2. CSS Internal
3. CSS Eksternal

HTML dan Javascrip Otomatis Sudah dikenal oleh web Browser. Seperti Google chrome, Internet Explorer, Mozila Firefox, chromium dan lainnya lagi.

Materi 1 : Cascending Style Sheet

1. Cara Penggunaan CSS Inline
    --> CSS inline adalah melakukan pengaturan CSS tepat pada garis dari tag-tag yang akan kita format. atau bisa di katakan Segaris/ inline dengan tag yang hendak di ganti formatnya.

Contoh Penggunaan CSS Inline :

<html>
  <head>
    <title></title>
  </head>
  <body style ="background-color : silver;">
     <h1 style="color            : yellow;
                background-color : black;
                border           : 5px solid #0000ff;
                font-size        : 100px;
                font-family      : Algerian;
                                background-image : url(none);">             FIKOM</h1>
    <p style = "text-align  : justify;
                        line-height : 36px;
                                text-indent : 50px;
                                font-size   : 24pt;
                                color       : #00ff3a;"> Selamat pagi kami ucapkan kepada kita semua, Kiranya kita semua
        Tetap dalam lindungan Tuhan dan sehat selalu. terima kasih Kami ucapkan
                Atas keringanan langkah bapak dan ibu sekalian , Untuk menghadiri
                Acara Sederhana kami yang di selenggarakan oleh mahasiswa Tehnik Informatika univesitas katolik Santo thomas Medan.
                Acara ini hanya bentuk dari kreatifitas kami , yng muncul dari ide ide sederhana untuk  hiburan semata.
                Semoga bapak ibu sekalian terhibur dengan acara
                kami. Terima Kasih </p>              
   
  </body>
</html>


Berikut Hasil Dari Kode program yang kita buatkan di atas : 


2. Cara penggunaan CSS Internal
    --> CSS Internal adalah melakukan pengaturan CSS tepat berada pada tag <head>. Atau bisa dikatakan CSS nya bedarada tepat dibawah <title>.

Berikut contoh Penggunaan CSS Internal :
<html>
  <head>
    <title> Belajar CSS Internal</title>
    <style>
    h1{
                                color            : yellow;
                background-color : black;
                border           : 5px solid #0000ff;
                font-size        : 100px;
                font-family      : Algerian;
                                background-image : url("fikom.jpg") no-repeat center center fixed;
    }
    p{
                text-align  : justify;
                        line-height : 36px;
                                text-indent : 50px;
                                font-size   : 24pt;
                                color       : #00ff3a;
     }
    body{
     background-color : silver;
     margin           : 10px 50px ;
     }
    </style> 
</head>
  <body>
     <h1>                 FIKOM</h1>
    <p> Selamat pagi kami ucapkan kepada kita semua, Kiranya kita semua
        Tetap dalam lindungan Tuhan dan sehat selalu. terima kasih Kami ucapkan
                Atas keringanan langkah bapak dan ibu sekalian , Untuk menghadiri
                Acara Sederhana kami yang di selenggarakan oleh mahasiswa Tehnik Informatika univesitas katolik Santo thomas Medan.
                Acara ini hanya bentuk dari kreatifitas kami , yng muncul dari ide ide sederhana untuk  hiburan semata.
                Semoga bapak ibu sekalian terhibur dengan acara
                kami. Terima Kasih </p>              
   
  </body>
</html>

  Dan hasil Output pada web browser adalah sebagai berikut :

3. Cara pengaturan CSS Eksternal
   -->  CSS Eksternal adalah melakukan pengaturan dengan CSS tapi file CSS nya berbeda dengan code html yg akan di foormat.
Berikut adalah contoh penggunaan CSS Eksternal :

<html>
  <head>
    <title> Belajar CSS Internal</title>
    <link rel="stylesheet" href="css1.css">
</head>
  <body>
     <h1>                 FIKOM</h1>
    <p> Selamat pagi kami ucapkan kepada kita semua, Kiranya kita semua
        Tetap dalam lindungan Tuhan dan sehat selalu. terima kasih Kami ucapkan
                Atas keringanan langkah bapak dan ibu sekalian , Untuk menghadiri
                Acara Sederhana kami yang di selenggarakan oleh mahasiswa Tehnik Informatika univesitas katolik Santo thomas Medan.
                Acara ini hanya bentuk dari kreatifitas kami , yng muncul dari ide ide sederhana untuk  hiburan semata.
                Semoga bapak ibu sekalian terhibur dengan acara
                kami. Terima Kasih </p>              
   
  </body>
</html>

    h1{
                                color            : yellow;
                background-color : black;
                border           : 5px solid #0000ff;
                font-size        : 100px;
                font-family      : Algerian;
                                background-image : url("fikom.jpg") no-repeat center center fixed;
    }
    p{
                text-align  : justify;
                        line-height : 36px;
                                text-indent : 50px;
                                font-size   : 24pt;
                                color       : #00ff3a;
     }
    body{
     background-color : silver;
     margin           : 10px 50px ;
     }


Dan hasil tampilan Pada web browser  : 


Kesimpulan yang dapat Kita ambil adalah : Ketiga CSS di atas semua sama fungsinya , perbedaannya hanya ada pada letak dari setiap CSS.
Jika Dia CSS inline ( Kita membuat code CSS nya berada segaris dengan tag yang akan di format), jika dia CSS Internal ( code CSS nya kita letakkan pada tag <head>),
dan Jika dia CSS Eksternal Kita bisa membuat code CSS -nya dalam file yang berbeda .
pada

Materi II : Domain dan hosting

Domain adalah nama di internet dan Hosting adalah kapasistas penyimpanan di internet.



Nama   :  Irwan amriando Purba
Npm     :  180840001
Dosen Pengampu   :  Wasit Ginting S.Kom,M.Kom

Tidak ada komentar:

Posting Komentar