Just a Funny Sloth: Januari 2017

Belajar HTML&CSS: Table & List

Assalamu'alaikum warrahmatullahi wabarakatuh.

Pada postingan kali ini, Saya akan menjelaskan tentang table dan list pada HTML.

Seperti biasa, buka software Sublime Text 3. Selanjutnya, buatlah struktur dasar HTML.

Berikut adalah instruksi-instruksi yang akan dilakukan :

Table :

Tabel menyimpan 4 informasi: No, Nama (Nama Depan, Nama Belakang), Deskripsi.
Judul kolom "No." dan "Deskripsi" menggabungkan 2 baris tabel.
Judul Kolom "Nama" menggabungkan 2 kolom tabel.
Tulisan pada Kolom Judul dibuat rata tengah.
Tabel memiliki batas (border) yang bergabung menjadi satu (collapsed).
Tabel memiliki caption: 10 Dosen Favorit Saya ('Dosen Favorit' bisa diganti dengan yang lain)
Data yang diisi pada tabel memiliki warna background yang berbeda antara baris genap dan baris ganjil.

List :

Buatlah sebuah daftar (list) yang mencantumkan 3 barang yang terdapat di tas Anda dengan menggunakan bullet bertipe: circle.
Buatlah sebuah daftar (list) yang mencantumkan 3 cita-cita terbesar Anda dengan menggunakan poin berupa huruf kecil a, b, c.

TABLE

Pada instruksi 1, hal pertama yang harus dilakukan adalah membuat tag tabel yang terdiri dari tag row (tr), dimana pada tiap-tiap tr terdapat tag data (td) kecuali untuk row pertama, terdapat tag heading (th).

Outputnya :

Instruksi ke-2 dapat dilakukan dengan menambahkan rowspan="2" pada tag th. Untuk instruksi ke-3, gunakan colspan="2" pada tag th seperti contoh di bawah ini. Lalu untuk instruksi ke-4, tambahkan properti style=text-align:center pada tag tr.

Outputnya :

Selanjutnya, untuk instruksi ke-5 tambahkan properti style= border-collapse:collapse pada tag table, tr, th dan td agar border pada table terlihat menjadi satu seperti dibawah ini :

Outputnya :

Sesuai instruksi ke-6, tambahkan tag caption di dalam tag table (sebelum tag tr yang pertama) seperti ini :

Outputnya :

Lalu, untuk instruksi ke-7 tambahkan dua property style yang berbeda, odd(untuk ganjil) dan even(untuk genap) seperti di bawah ini :

Outputnya :

LIST

Untuk membuat list sesuai instruksi ke-1 yang menginginkan list bertipe undordered list (ul) circle saya akan menambahkan tag ul bertipe circle dan tag li seperti ini :

Outputnya :

Terakhir, instruksi ke-2 menginginkan list berbentuk ordered list (ol) tipe lowercase "a".

Outputnya :

Langkah terakhir, tambahkanlah style dan properti lain agar tampilan lebih menarik!
Berikut ini adalah sourcecode yang telah saya selesaikan :

<!DOCTYPE html>
<html>
 <head>
  <title>TABEL - <09031281621039></title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
   @font-face {
      font-family: jackfrost;
      src: url(jackfrost.otf);
   }
   @font-face {
      font-family: nexalight;
      src: url(nexalight.otf);
   }
   @font-face {
      font-family: snekregular;
      src: url(snekregular.otf);
   }
   .tabelnya, .listnya {
    padding: 40px;
    margin: auto;
    margin-top: 50px;
    max-width: 500px;
    border: 10px solid #6495ED;
   }
   .about {
    float: right;
    max-width: 250px;
    position: fixed;
    top: 90px;
    right: 80px;
    border: 10px dotted #6495ED;
    background-color: #fff;
    color: #6495ED;
    padding: 20px;
    text-align: center;
   }
   .welcome {
    float: left;
    width: 250px;
    height: 110px;
    position: fixed;
    top: 90px;
    left: 80px;
    border: 10px dotted #6495ED;
    background-color: #fff;
    color: #6495ED;
    padding-left: 20px;
    padding-right: 20px;
   }
   .welcome:hover {
    height: 90px;
   }
   .illustration {
    float: right;
    position: fixed;
    max-width: 250px;
    top: 360px;
    right: 80px;
    border: 10px dotted #6495ED;
    background-color: #fff;
    color: #6495ED;
    padding: 20px;
   }
   .sosmed {
    float: left;
    position: fixed;
    top: 270px;
    left: 80px;
    border: 10px dotted #6495ED;
    background-color: #fff;
    color: #6495ED;
    padding: 20px;
    max-width: 250px
   }
   table, th,td {
    border: 2px solid #4169E1;
    border-collapse: collapse;
    font-family: nexalight;
   }
   th,td {
    padding: 10px;
    text-align:center;
   }
   tr {
    color: #fff;
    font-weight : bold;
   }
   tr:hover {
    color: #FF6347;
    font-style : italic;
    font-size: 80%;
   }
   tr:nth-child(odd) {
    background-color: #FFD700;
   }
   tr:nth-child(even) {
    background-color: #6495ED;
   }
   body {
    background-color: #E0FFFF;
   }
   h1 {
    text-align: center;
    font-family: jackfrost;
    margin-bottom: 40px;
    padding: 15px;
    background: #fff;
    border: 5px solid #ffd700;
    color: #6495ED;
   }
   h1:hover {
    font-size: 25px;
    background: #6495ED;
    border: 5px dotted #ffd700;
    color: #fff;
   }
   ul {
    font-size: 20px;
    font-weight: bold;
    font-family: nexalight;
    background-color: #FF6347;
    color: #fff;
    margin: auto;
    vertical-align: middle;
    padding-top: 30px;
    padding-bottom: 30px;
    padding-left: 180px;
    padding-right: 150px;
    border: 6px solid #6495ED;
   }
   li:hover {
    font-style: italic;
    font-size: 130%;
    text-decoration: overline;
   }
   ol {
    font-size: 20px;
    font-weight: bold;
    background-color: #FF6347;
    font-family: nexalight;
    color: #fff;
    margin: auto;
    vertical-align: middle;
    padding-top: 30px;
    padding-bottom: 30px;
    padding-left: 110px;
    padding-right: 30px;
    border: 6px solid #6495ED;
   }
   img {
    max-width: 250px;
    max-height: 300px;
   }
   h3 {
    font-family: snekregular;
    font-size: 200%;
    text-decoration: underline;
    color: #FFD700;
   }
   h3:hover {
    font-size: 180%;
    text-decoration: none;
    color: #4169E1;
   }
   p {
    font-family: nexalight;
    font-size: 16px;
   }
   span:hover {
    background-color: #FFD700;
    font-size: 30px;
   }
   img:hover {
    max-width: 200px;
    display: block;
    margin: auto;
   }
  </style>
 </head>

<body>
  <div class="tabelnya">
  <table style="width:100%">
  <div>
<caption><h1>
List of Favorite Colors</h1>
</caption></div>
<tr style="background-color: #fff; color: #FF6347">
    <th rowspan="2">No.</th>
    <th colspan="2">Name</th>
    <th rowspan="2">Description</th>

</tr>
<tr style="background-color: #fff; color: #FF6347">
    <td><b>First name</b></td>
    <td><b>Surname</b></td>
   </tr>
<tr>
    <td>1.</td>
    <td>Tisa</td>
    <td>Monita</td>
    <td>Pink</td>
   </tr>
<tr>
    <td>2.</td>
    <td>Hedi</td>
    <td>Yunus</td>
    <td>Chocolate</td>
   </tr>
<tr>
    <td>3.</td>
    <td>Mutia</td>
    <td>Mariam F.</td>
    <td>Pink</td>
   </tr>
<tr>
    <td>5.</td>
    <td>Dea</td>
    <td>Tri Ananda</td>
    <td>Red</td>
   </tr>
<tr>
    <td>6.</td>
    <td>Annisa</td>
    <td>Raidatul J.</td>
    <td>Cream</td>
   </tr>
<tr>
    <td>7.</td>
    <td>Ratih</td>
    <td>Dewi S.</td>
    <td>Blue</td>
   </tr>
<tr>
    <td>8.</td>
    <td>Dedi</td>
    <td>Ramadhan</td>
    <td>Black</td>
   </tr>
<tr>
    <td>9.</td>
    <td>Arni</td>
    <td>Fira N.</td>
    <td>Pink</td>
   </tr>
<tr>
    <td>10.</td>
    <td>Fadilah</td>
    <td>Nur I.</td>
    <td>Blue</td>
   </tr>
</table>
</div>
<div style="margin-bottom: 40px" class="listnya">
   <h1>
3 Items in my bag</h1>
<p>
<ul style="list-style-type: circle; margin-bottom: 40px ">
<li>Schedule book</li>
<li>Pencil case</li>
<li>Wallet</li>
</ul>
</p>
<hr style="border: 1px solid #6495ED">
   <p>
<h1 style="margin-top: 40px">
3 Biggest Dreams of Mine</h1>
<ol type="a">
<li>Inner peace.</li>
<li>Continue my study until having a doctoral degree.</li>
<li>Visit South Korea.</li>
</ol>
</p>
</div>
<div class="welcome">
   <h3 style="text-align: center">
WELCOME !</h3>
</div>
<div class="about">
   <h3 style="text-align: center">
About</h3>
<p style="font-size: 110%">
Hello!
   <span>Ima</span>'s here. Welcome everyone ~</p>
</div>
<div class="illustration">
   <h3 style="text-align: center">
Illust
  -ration</h3>
<a href="http://glowingcarrot.tumblr.com" target="_blank"><img src="okME.png"></a>
  </div>
<div class="sosmed">
   <h3 style="text-align: center">
Social Medias</h3>
<a href="https://www.facebook.com/fadilah.nurimani.31" target="_blank"><img src="facebook.png"></a>
   <br>
   <a href="http://motivatedsloth.blogspot.co.id/" target="_blank"><img src="blogger.png"></a>
  </div>
<br>
  <hr style="border: 5px solid #6495ED; max-width: 500px; margin-bottom: 30px;">
  <footer align="center" style="width: 300px; margin: auto; margin-bottom: 50px;">
  <p style="color:#2f4a7a">
<b style="font-family: jackfrost"><ins>Contact</ins></b> <br><br><a href="mailto:fadilahnurimani@gmail.com"><i style="color: #fff"><b><mark style="color: #6495ed; font-family: nexalight">fadilahnurimani@gmail.com</mark></b></i></a></p>
</footer>
 <div style="display: none">
   <audio controls autoplay loop >
     <source src="EdSheeran_CastleOnTheHill.mp3" type="audio/mpeg">
   </audio>
  </div>
</body>
</html>

Dan ini adalah output setelah melakukan beberapa finishing :

Silahkan download file hasil akhir di sini.

Wassalamu'alaikum warahmatullah wabarakatuh.

Fadilah Nur Imani.

Share |

Belajar HTML&CSS: Style

assignments 08.14

Assalamu'alaikum warrahmatullahi wabarakatuh.

Pada postingan sebelumnya, saya sudah menjelaskan bagaimana cara membuat tampilan web statis menggunakan HTML dasar dan bantuan software Sublime Text 3. Untuk postingan kali in, saya akan menjelaskan tentang membuat tampilan web statis yang membosankan menjadi lebih menarik menggunakan HTML Style & Formatting dan CSS.

Buka text editor, bisa menggunakan Sublime Text 3 atau Notepad++.
Seperti biasa, untuk memudahkan membedakan antar sintax, klik Menu View, lalu klik sintax dan pilih HTML.
Agar sesuai dengan perintah tugas, saya akan melakukan tahapan sesuai point - point di bawah ini :

Buat background dengan warna tertentu dengan nama (i.e: red, green)
Buat sebuah judul tulisan dengan warna tertentu dengan cara selain dengan nama (gunakan HEX)
Judul dibikin rapat tengah.
Buat tulisan minimal 2 paragraf dengan font tertentu tentang tempat makan favorit Anda di Palembang dan sekitarnya.
Dalam tulisan tersebut, huruf pertama setiap paragraf dibikin dengan huruf kapital dan font berukuran lebih besar.
Gunakan ke-10 element berikut di dalam tulisan Anda:

<b> Defines bold text
<em> Defines emphasized text
<i> Defines italic text
<small> Defines smaller text
<strong> Defines important text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
<mark> Defines marked/highlighted text.

Sebelum masuk ke point nomor 1, perlu diketahui bahwa untuk menambahkan style pada HTML ada dua cara, yang pertama : menambahkan elemen style pada tag yang diinginkan. Cara kedua gunakanlah tag style seperti ini :

Baiklah, sesuai perintah nomor 1 untuk menambahkan background tambahkan elemen ini :

Selain menggunakan nama warna, untuk mengubah warna background, teks maupun lainnya dapat menggunakan kodewarna HEX. Misalnya untuk judul saya ingin menggunakan wana kuning.

Untuk membuat judul menjadi rata tengah gunakan elemen align yang nilainya center.

Untuk perintah selanjutnya, saya menggunakan custom font yang berasal dari file personal saya, berikut adalah HTML nya :

Untuk perintah kelima, saya menggunakan tag span untuk memisahkan antara huruf pertama setiap paragraf dengan huruf dan kalimat lainnya.

Pada perintah ke 6 terdapat 10 perintah yang berisi mengenai HTML formatting, berikut adaah HTMLnya :

Dan ini adalah hasil akhir dan kombinasi dari ke 15 perintah tersebut :

Silahkan download file hasil akhir di sini.

Wassalamu'alaikum warahmatullah wabarakatuh.

Fadilah Nur Imani.

Share |

WOW! I found a very useful website for a programmer ...

random 05.54

Share |

Belajar HTML Dasar

assignments 04.15

Assalamu'alaikum warrahmatullahi wabarakatuh.

Pada postingan kali ini, saya akan menjelaskan tentang membuat tampilan web statis dengan html dasar dan menggunakan software Sublime Text 3.

Download Sublime Text 3 disini dan install.
Buka Sublime Text 3 untuk memudahkan membedakan antar sintax, klik Menu View, lalu klik sintax dan pilih HTML.
Selanjutnya, saya akan melakukan tahapan sesuai 10 point di bawah ini :

Tugas 1 - <nim>
Memiliki judul dengan font lebih besar dari isi. Judul bebas, dibuat terdiri dari 2 baris (gunakan element br)
Memiliki 2 paragraf tulisan tentang pengalaman di Fasilkom UNSRI (gunakan element p)
Memiliki sebuah gambar (gunakan img).
Buat 2 bagian di gambar yang jika di-klik akan membuka situs tertentu pada halaman baru (gunakan usemap)
Memilki garis
Tuliskan paragraf yang menjelaskan tentang jenis-jenis HTML Entities
Tuliskan paragraf yang menjelaskan tentang Jenis-jenis HTML Symbol
Tuliskan paragraf yang menjelaskan tentang Jenis-jenis HTML charset
Buatlah sebuah pantun bebas dengan 4 bait (gunakan element pre. jangan gunakan element br)

Sebelum masuk ke point 1, saya akan menunjukkan struktur utama HTML.
Lalu ketik tag <title></title> di dalam tag <head> dan lakukan sesuai gambar ini.
Untuk judul, bisa menggunakan tag <h></h> agar ukurannya lebih besar dari isi paragraf. Tag <h></h> ada 6 macam, yaitu <h1>,<h2>,...<h6>. Tag <h6> ukurannya adalah yang terkecil. Disini saya akan menggunakan tag <h1>.
Selanjutnya gunakan tag <p> </p> untuk membuat paragraf.
Tag img src digunakan untuk memuat gambar pada HTML.
Untuk membagi sebuah gambar mejadi beberapa bagian, gunakan usemap. Untuk dapat menggunakan usemap, haruslah tau dulu koordinat dari gambar.
Selanjutnya, untuk membuat garis saya menggunakan tag hr.
Untuk perintah nomor 7 sampai 9 gunakanlah tag p untuk membuat sebuah paragraf. Namun disini saya tidak hanya membuat sebuah paragraf, tetapi juga menambahkan sebuah tabel dengan tag table. Pada tag table terdapat tag tr yang digunakan untuk menampilkan row (baris), tag th berisi heading/judul dari tabel, dan tag td untuk menampilkan data di dalam tabel.
Pada perintah nomor 9, saya menambahkan sebuah ordering seperti dibawah ini. Pada tag ul terdapat lagi tag li yang akan membentuk sebuah ordering atau lebih dikenal numbering.
Untuk perintah terakhir, tag

pre digunakan untuk menampilkan teks yang memiliki jarak antar baris tertentu.
Setelah semua perintah terlaksanakan, save file html lalu buka di browser anda. Ini adalah tampilan akhir.