Dasar-dasar HTML Part 2 ( Styles, Formatting, Quotation)

Assalamu'alaikum wr.wb.

Hai teman-teman semua.. Udah lihat postingan yang pertama belum ? Kalau belum silahkan kunjungi yang pertama disini. Dikesempatan yang kedua ini saya akan sharing ilmu yang saya dapatkan selama saya prakerin di BLC Telkom Klaten ini. Masih dalam lingkup HTML dasar tahap II. Langsung saja masuk ke materi ya..

A. Tahap Pelaksanaan

• Buka Sublime Text pada menu
• Pilih View -> Sintaks -> HTML dan akan muncul sintaks dasar dari HTML tapi jangan lupa ketikkan "html -> tekan tab" langsung akan muncul secara otomatis.
• 1. Yang pertama kita akan membuat Style dalam HTML terlebih dahulu
• Kita akan membuat Text Color, masukkan sintaks seperti dibawah ini 

• Hasil dari coding yang dimasukkan

                           

• Kedua, membuat background color. Masukkan coding seperti dibawah ini.

                               

• Hasil coding diatas seperti ini.

                                

• Ketiga, membuat font dalam HTML.

                           

• Hasil coding diatas seperti ini.

                             

• Keempat, membuat warna font dalam HTML.

                                

• Hasil dari coding tersebut seperti dibawah ini.

                               

• Kelima, membuat font size dalam HTML.

                             

• Hasil dari coding diatas.

                               

• Keenam, membuat text-align dalam HTML.

                                      

• Hasil dari coding diatas.

                             

     2. Selanjutnya ada formatting dalam HTML. Berikut ini penjelasannya.

• Buka Sublime Text dalam Menu.
• Pilih View-> Sintaks -> HTML
• Bagian-bagian dari sintaks formatting diatas yaitu 

         * <del></del>

         * 

         * 

         * <em></em>

         * <b></b>

         * <i></i>

         * <small></small>

         * <strong></strong>

         * <mark></mark>

         * <ins></ins>

• Hasil setelah pengcodingan seperti dibawah ini.

 

    3. Selanjutnya ada Quotations dalam HTML. Berikut penjelasannya.

                               

• Buka Sublime Text dalam Menu.
• Pilih View-> Sintaks -> HTML
• Bagian-bagaian dari quotations diatas yaitu 

        ^<blockquote></blockquote> :  mendefinisikan bagian yang dikutip dari sumber lain.

        ^<abbr></abbr> : mendefinisikan singkatan atau akronim.

        ^<address></address> : mendefinisikan informasi kontak (pemilik) dari dokumen/artikel.

        ^<cite></cite> : mendefinisikan judul sebuah karya.

        ^<bdo></bdo> : untuk mengesampingkan arah teks.

•  Hasil setelah pengcodingan seperti dibawah ini.

                        

E. Kesimpulan

    Dari pemaparan saya tersebut dapat kita simpulkan bahwa kita bisa mengcoding HTML dengan mudah menggunakan Sublime Text. Dan kita bisa lebih memahami seperti apa dasar dari HTML itu sendiri.

 

F. Referensi 

• http://www.w3schools.com/html/html_styles.asp
• http://203.130.243.185/data/

Sekian dan Terimakasih.

SMK Bisa !!

Wasalamu'alaikum wr.wb.