yes
no
10/Promotion/slider
no

Format Paragraf Banyak Kolom dengan CSS

Tidak ada komentar
Pernah melihat paragraf dengan banyak kolom ? Biasanya paragraf seperti ini banyak dijumpai pada koran atau majalah. Tujuannya untuk meminimalisasi tempat agar artikel atau berita dapat dimuat secara optimal. Kita dapat dengan mudah mengatur layout berita tersebut, apalagi jika berita atau artikel yang dimuat cukup banyak dan panjang. Dalam sebuah website  biasanya terdapat artikel, baik itu artikel tentang informasi teknologi terkini, tutorial, pelayanan dan lain-lain. Arikel atau berita akan lebih menarik tampilannya apabila tulisan pada paragraf/artikel tersebut diformat dengan beberapa format tertentu, baik itu tebal, miring, garis bawah dan lain-lain.

Pada artikel ini penulis akan membahas format paragraf dengan CSS agar paragraf tersebut terdiri dari banyak kolom (kolom Koran). Biasanya pembuatan kolom koran dilakukan dengan menggunakan Ms. Word.  Ms. Word merupakan salah satu software program Aplikasi Perkantoran (Ms. Office), sedangkan CSS adalah salah satu bahasa pemrograman untuk membuat website. Selain Ms. Word dan CSS, terdapat beberapa software dan bahasa pemrograman lainnya. Software-software dan bahasa-bahasa pemrograman tersebut dapat dipelajari di lembaga pendidikan Kursus Komputer/IT Training Center.

Computer First adalah lembaga pendidikan Kursus Komputer yang membuka kursus software-software/bahasa-bahasa pemrograman tersebut.  Agar format yang dilakukan dapat dibaca oleh beberapa browser, maka kita harus memformat paragraf tersebut dengan skrip yang dapat dibaca/diterjemahkan oleh browser tersebut. Untuk memformat paragraf dengan CSS, kita memerlukan artikel dan skrip CSS. Skrip CSS dapat dibuat secara internal atau eksternal. Untuk lebih memahami tentang pembuatan kolom koran dengan CSS, penulis sudah membuat skrip pembuatan kolom Koran dengan CSS sebagai berikut :

File css : css/kolom_koran.css (simpan di folder css)

.kolom {
                /*Untuk Browser Mozila Firefox*/
               /* jumlah kolom*/
                -moz-column-count:2;
               /*jarak antar kolom*/
                -moz-column-gap:40px;  
               /*jenis garis pemisah antar kolom*/
                -moz-column-rule-style:outset;  
               /* ketebalan garis pemisah antar kolom*/
                -moz-column-rule-width:3px;
               /*warna garis pemisah antar kolom*/
                -moz-column-rule-color:red;  

                /*Untuk Browser Google Chrome dan Safari*/
                -webkit-column-count:2;
                -webkit-column-gap:40px;
                -webkit-column-rule-style:outset;
                -webkit-column-rule-width:3px;
                -webkit-column-rule-color:red;

                /*Untuk Browser Internet Explore*/
                column-count:2;
                column-gap:40px;
                column-rule-style:outset;
                column-rule-width:3px;
                column-rule-color:red;

}


File HTML : artikel.html
<html>
<head>
<title>Kolom Koran</title>
<link href="css/kolom_koran.css" rel="stylesheet">
</head>
<body>
           <h3 align="center">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Selamat Datang di Web Computer             First</h3>
           <p align="justify"><blockquote>
            <div class="kolom">
<img src="gambar/Penguins.jpg" width="50" height="50" hspace="5" vspace="10"   align="left" class="zoom">
<big><strong>Selamat Datang</strong></big> di <em>Official Web</em>    <b>Computer First</b>.
<strong><em>Computer First</em></strong> adalah <i>lembaga pendidikan kursus komputer</i> yang berpusat di Kelapa Gading Jakarta Utara. Saat ini <strong><em>Computer First</em></strong> membuka <i>Seminar</i>  dan <i>Workshop</i> untuk program tertentu selain kelas biasa. Program <u>kursus</u> yang dibuka di Computer First untuk <i>anak-anak, remaja</i> maupun <i>dewasa</i>.
  Selain itu <strong><em>Computer First</em></strong> membuka program <i><b>In House Training</b></i> (<i>IHT</i>).
          </div>
           </blockquote>
         </p>
      </body>
</html>

Jika file artikel.html dijalankan di web browser, maka akan tampil hasilnya seperti berikut ini :

Demikian artikel ini penulis buat, semoga bermanfaat bagi semua pembaca blog Computer First. Jangan lupa untuk dicoba dan beri komentarnya.....
author profile image
Abdelghafour

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Tidak ada komentar

Posting Komentar

no
Computer First - First Choice in IT Training Center - menyediakan jasa pelatihan Kursus Komputer di Jakarta sejak dari usia dini yaitu sejak anak-anak sampai dengan dewasa. Computer First berdiri pada tahun 2001, Visi Computer First ingin menjadi First Choice in IT Training Center melalui pendidikan dan pelatihan komputer yang berkualitas terbaik [Computer First Indonesia] (http://computerfirst.co.id/images/logo/logo1.png)