Langsung ke konten utama

Membuat tulisan blok di webpage hanya dengan Tabel dan CSS (HTML Programming)




Kali ini saya ingin berbagi contoh kodingan menampilkan tulisan blok di webpage dengan hanya menggunakan tabel dan CSS. Selamat menyimak. Semoga bermanfaat :)

<html>
     <head>
           <title>Tugas Pelatihan HTML Nurmalita Sari</title>
           <style>
           table{
                margin:150px 200px 100px 200px;
           }
           .a1{
                background-color:darkblue;
                width:40px;
                height:60px;
           }
           .a2{
                background-color:darkblue;
                width:80px;
                height:60px;

           }
           .a3{
                background-color:darkblue;
                width:120px;
                height:40px;
           }
           .a4{
                background-color:darkblue;
                width:160px;
                height:40px;
           }
           .b2{
                background-color:darkblue;
                width:40px;
                height:80px;
           }
           .b5{
                background-color:darkblue;
                width:40px;
                height:200px;
           }
           .b6{
                background-color:darkblue;
                width:40px;
                height:240px;
           }
           </style>
     </head>

     <body bgcolor="darkblue" text="deepskyblue">
           <abbr title="A R E M A">
           <table  bgcolor="deepskyblue" align="center" cellspacing="0px">
               
                <tr>                
                     <td></td>
                     <td class="a2"></td>
                     <td></td>
                     <td>12</td>
                     <td></td>
                     <td class="a2" colspan="2"></td>
                     <td></td>
                     <td>12</td>
                     <td class="b6" rowspan="6"></td>
                     <td class="a3" colspan="3"></td>
                     <td>12</td>
                     <td class="b6" rowspan="6"></td>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td class="b6" rowspan="6"></td>
                     <td>12</td>
                     <td></td>
                     <td class="a2" colspan="2"></td>
                </tr>
                <tr>
                     <td class="b5" rowspan="5"></td>
                     <td></td>
                     <td class="b5" rowspan="5"></td>
                     <td></td>
                     <td class="b5" rowspan="5"></td>
                     <td></td>
                     <td></td>
                     <td class="b2" rowspan="2"></td>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td class="a1"></td>
                     <td></td>
                     <td class="a1"></td>
                     <td></td>
                     <td class="b5" rowspan="5"></td>
                     <td></td>
                     <td></td>
                     <td class="b2" rowspan="5"></td>
                </tr>
                <tr>                
                     <td></td>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td class="a1"></td>
                </tr>
                <tr>
                     <td class="a2"></td>
                     <td></td>
                     <td class="a2" colspan="2"></td>
                     <td></td>
                     <td></td>
                     <td class="a2" colspan="1"></td>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td class="a2" colspan="2"></td>
                </tr>
                <tr>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td class="b2" rowspan="2"></td>
               
                </tr>
                <tr>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td  class="a3" colspan="3"></td>
           </table>
           </abbr>
     </body>

</html>

Komentar

  1. Unknown12 Oktober 2018 pukul 20.44

    kak artikel membuat tulisan blok di webpage hanya dengan tabel dan css ini lumayan sulit karena saya pemula tp tulisan ini sangat bermanfaat..makasih
    Kunjungi website kampus saya http://www.atmaluhur.ac.id/

    Kunjungi website saya https://hiko.mahasiswa.atmaluhur.ac.id

    BalasHapus

Posting Komentar

Postingan populer dari blog ini

Tipe data dalam bahasa C (C Programming)

Hai.. ketemu lagi dengan saya di blog yang sederhana ini.. dalam kesempatan kali ini saya akan memposting tentang tipe data dalam bahasa C. yuk kita simak :) Tipe data adalah suatu pengenal (identifier) yang merupakan bagian program yang paling penting karena tipe data mempengaruhi setiap instruksi yang akan dilaksanakan oleh k omputer. Misalnya saja 5 dibagi 2 bisa saja menghasilkan hasil yang berbeda tergantung tipe datanya. Jika 5 dan 2 bertipe integer maka akan menghasilkan nilai 2, namun jika keduanya bertipe float maka akan menghasilkan nilai 2.5000000. Pemilihan tipe data yang tepat akan membuat proses operasi data menjadi lebih efisien dan efektif. Bahasa C menyediakan 5 macam tipe data dasar, yaitu 1. Tipe data integer yaitu bilangan bulat dideklarasikan dengan int . 2. Floating point yaitu bilangan pecahan dideklarasikan dengan float . 3. Double precision yaitu bilangan pecahan ketepatan ganda dideklarasikan dengan double . 4. karakter dideklaras...
20 komentar
Baca selengkapnya

Kimia (Polimer)

A.    DEFINISI POLIMER DAN PEMBENTUKAN POLIMER 1.    Pengertian Polimer Polimer adalah suatu makromolekul yang terbentuk dari molekul-molekul sederhana yang kita sebut sabagai monomer. Monomer adalah bagian terkecil dari suatu polimer. 2.    Pembentukan Polimer Proses pembentukan polimer dari monomer-monomernya disebut polimerisasi. Reaksi polimerisasi adalah reaksi penggabungan beberapa monomer. a.    Reaksi Polimer Adisi Polimerisasi terjadi pada monomer yang memiliki ikatan rangkap. Adalah perkaitan langsung antarmonomer berdasarkan reaksi adisi. 1)    Pembentukan Polietilena (Polietena) Polietilena dibentuk oleh monomer-monomer etena. Etena diperoleh dari hasil perengkahan (cracking) minyak bumi atau gas bumi. Pembentukan polimer ini digambarkan sebagai berikut CH 2 =CH 2   +   CH 2 =CH 2    →    --CH 2 -- CH 2 -- CH 2 -- CH 2 -- →   ( --CH 2 --...
1 komentar
Baca selengkapnya

Apa itu using namespace std?

Assalamu’alaikum.. Hai teman-teman.. dalam posting kali ini saya akan sedikit menjelaskan tentang namespace std. using namespace std , perintah ini digunakan untuk mendeklarasikan/ memberitahukan kepada compiler bahwa kita akan menggunakan semua fungsi/class/file yang terdapat dalam namespace std. namespace sendiri memiliki kesamaan dengan paket pada bahasa Java yang berisi pengelompokan fungsi, class dan yang sejenis. Pada C++ library- library umumnya disimpan dalam namespace std, seperti perintah cin dan cout. Perbedaan penulisan apabila kita menggunakan namespace std atau tidak adalah : Tanpa using namespace std               std::cout << " Tanpa menggunakan namespace std " ;       std::cin >> pil; Menggunakan using namespace std      #include <iostream>      using namespace std;      ...
2 komentar
Baca selengkapnya

MEMBACA DAN MENGIDENTIFIKASIKAN MOS,CMOS DAN FET

1)       Komponen MOS, CMOS dan FET diidentifikasi tipenya, rating operasinya .     MOSFET ( Metal Oxide Semiconductor Field Effect Transistor ) MOSFET disebut juga Transistor Efek Medan Oksida Logam, hal ini karena pada Gate di isolasi dari saluran mayoritas pembawa muatan hal ini mengakibatkan arus Gate sangat kecil dan tidak dipengaruhi oleh Positif atau Negatifnya Gate tersebut. MOSFET sering juga disebut sebagai IGFET (Insulated Gate Field Effect Transistor) , mempunyai elektroda Source, Drain dan Gate . Bekerjanya MOSFET berbeda dengan JFET, pada MOSFET Gate/Gerbang di isolasi dari kanal sehingga dapat dioperasikan menggunakan tegangan positif (+), sedang pada JFET menggunakan tegangan negatif (-). Tegangan positif tersebut memeberi manfaat mempertinggi konduktifitas kanal. Makin positif tegangan gerbang, semakin besar konduktifitas dari Source ke Drain (Sumber ke Cerat). Keuntungan utama menggunakan FET adalah, imped...
Posting Komentar
Baca selengkapnya

Mengenal Tipe data dan Operator di VB .net (VB Programming)

Assalamu'alaikum.. pada tutorial kali ini saya ingin berbagi tentang tipe data danoperator yang digunakan dalam pemrograman Visual Basic. selamat menyimak.. :) Teori 2.1. Variabel Variabel   adalah pengalokasian tempat di memory komputer dengan type data tertentu dan datanya dapat diubah. Aturan pendefinisian variabel -           Harus dimulai dengan huruf -           Tidak boleh menggunakan spasi -           Tidak melebihi 255 karakter -           Untuk vb. Net tidak case sensitive (tidak membedakan huruf kecil dan besar -           Boleh menggunakan underscore Contoh penulisan variabel yang benar : -           Dim Dataku as integer -         ...
3 komentar
Baca selengkapnya