Beberapa kode dasar html

Berikut ini adalah beberapa kode dasar html yang sering digunakan dan cara mudah menggunakannya. Cara-cara berikut ini dapat digunakan untuk semua WYSIWYG editor (misalnya CKEditor, TinyMCE, Summernote, NicEdit, dll) atau untuk native html.

Untuk menuliskan kode html secara manual, jangan lupa ubah mode penulisan dalam mode html/Teks atau Source (jika menggunakan CKEditor)

1. Menyisipkan gambar

<img alt="teks" src="url_gambar" style="width: apx; height: bpx;" />

Contoh: <img alt=”desktop2″ src=”http://surya.blogchem.com/wp-content/uploads/2016/05/desktop2.png” style=”width: 500px; height: 281px;” />

desktop2

Catatan: untuk mengambil url gambar, klik kanan gambar kemudian Copy Image Location

2. Teks dengan link

<a href="link" target="_blank">Teks dengan link</a>

Maksud dari target=”_blank” agar ketika link diklik akan terbuka di tab baru.

Contoh: <a href=”http://surya.blogchem.com/” target=”_blank”>Surya Blog (CyberChem)</a>

Surya Blog (CyberChem)

3. Iframe (menampilkan halaman web lain)

<iframe frameborder="a" width="b" height="c" scrolling="no" src="url"></iframe>

Contoh: <iframe frameborder=”0″ width=”700″ height=”460″ scrolling=”no” src=”http://surya.blogchem.com/apps/kontak/kontak.php”></iframe>

Untuk video dari Youtube (iframe) bisa menggunakan cara berikut: Cara Mudah Menyisipkan Video dari Youtube

Dokumen (*.docx atau *.pdf) dari Drive (iframe) bisa menggunakan cara berikut: Cara Mudah Menyisipkan Dokume dari Google Drive

4. Teks tebal, miring, garis bawah, garis tengah

    <strong>Teks tebal</strong>
    <em>Teks miring</em>
    <u>Teks garis bawah</u>
    <s>Teks garis tengah</s>

Teks tebal  –  Teks miring –  Teks garis bawahTeks garis tengah

5. Paragraf

<p>teks</p>

Contoh: <p>Menulis paragraf disini. Paragraf terdiri atas satu kalimat utama dan beberapa kalimat penjelas. Berarti paragraf minimal terdiri atas tiga kalimat. Qwerty uiop asdf ghjkl zxcv bnm.</p>

Menulis paragraf disini. Paragraf terdiri atas satu kalimat utama dan beberapa kalimat penjelas. Berarti paragraf minimal terdiri atas tiga kalimat. Qwerty uiop asdf ghjkl zxcv bnm.

6. Bullets dan Numbering

Bullets

<ul>
    <li>
        Abcd
    </li>
    <li>
        Efgh
    </li>
    <li>
        Ijkl
    </li>
    <li>
        Mnop
    </li>
</ul>
  • Abcd
  • Efgh
  • Ijkl
  • Mnop

Numbering

<ol>
    <li>
        Abcd
    </li>
    <li>
        Efgh
    </li>
    <li>
        Ijkl
    </li>
    <li>
        Mnop
    </li>
</ol>
  1. Abcd
  2. Efgh
  3. Ijkl
  4. Mnop

 

Leave a Reply

Your email address will not be published. Required fields are marked *