Belajar HTML&CSS: Style

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.

  1. Buka text editor, bisa menggunakan Sublime Text 3 atau Notepad++.
  2. Seperti biasa, untuk memudahkan membedakan antar sintax, klik Menu View, lalu klik sintax dan pilih HTML. 
  3. Agar sesuai dengan perintah tugas, saya akan melakukan tahapan sesuai point - point di bawah ini :
    1. Buat background dengan warna tertentu dengan nama (i.e: red, green)
    2. Buat sebuah judul tulisan dengan warna tertentu dengan cara selain dengan nama (gunakan HEX)
    3. Judul dibikin rapat tengah.
    4. Buat tulisan minimal 2 paragraf dengan font tertentu tentang tempat makan favorit Anda di Palembang dan sekitarnya.
    5. Dalam tulisan tersebut, huruf pertama setiap paragraf dibikin dengan huruf kapital dan font berukuran lebih besar.
    6. Gunakan ke-10 element berikut di dalam tulisan Anda:
      1. <b> Defines bold text
      2. <em> Defines emphasized text
      3. <i> Defines italic text
      4. <small> Defines smaller text
      5. <strong> Defines important text
      6. <sub> Defines subscripted text
      7. <sup> Defines superscripted text
      8. <ins> Defines inserted text
      9. <del> Defines deleted text
      10. <mark> Defines marked/highlighted text.
  4. 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 :


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


    6. berikut tampilan pada browser 



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


    7. Ini adalah yang terlihat di browser saya :



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


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


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


    10. Untuk membuat font lebih besar, saya mengganti size default menjadi 550%.



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


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

    12. dan ini adalah hasil akhir yang sudah ditambahkan beberapa style lain dan kelebihan lainnya :

Silahkan download file hasil akhir di sini.
Wassalamu'alaikum warahmatullah wabarakatuh.


Fadilah Nur Imani.

Share This Story

Tags: , , ,

You Might Also Like

0 komentar