Kode-kode Dasar HTML - Hallo sahabat pawang bisnis, Pada sharing INFO TEKNIK berjudul Kode-kode Dasar HTML, saya telah menulis sebuah artikel. mudah-mudahan isi postingan dapat bermanfaat dan mudah anda pahami. okelah, ini dia isi contennya.

Artikel : Kode-kode Dasar HTML
Judul : Kode-kode Dasar HTML


Kode-kode Dasar HTML

Artikel Tugas Sekolah,
    Okee, di sini saya akan memberikan beberapa kode-kode dasar pada HTML. Untuk menjalankannya simpan setiap kode pada aplikasi notepad/notepad++ dengan akhiran format ".html".
  1. Membuat Judul pada HTML
    2. My Vision Kode HTML :
    <html>
    <head>
    <title>Letakan Judul Anda di sini</title></head>
    <body>
    </body>
    </html>
  2. Membuat tulisan pada body HTML
    3. Letakan Tulisan Anda di sini
    Kode HTML :
    <html>
    <head>
    <title>Letakan Judul Anda di sini</title> </head>
    <body>
    <font>Letakan Tulisan Anda di sini</font></body>
    </html>
  1. Memberi warna background pada body HTML
    2. Letakan Tulisan Anda di sini                                                                                                          
    Kode HTML(background body warna biru) :
    <html>
    <head>
    <title>Letakan Judul Anda di sini</title></head>
    <body bgcolor="blue">
    <font>Letakan Tulisan Anda di sini</font></body>
    </html>
  1. Mengubah jenis font pada tulisan
    2. Letakan Tulisan Anda di sini
    Kode HTML (menggunakan jenis huruf georgia) :
    <html>
    <head>
    <title>Letakan Judul Anda di sini</title></head>
    <body>
    <font face="georgia">Letakan Tulisan Anda di sini</font>
    </body>
    </html>
  1. Mengubah ukuran font pada tulisan
    2. Letakan Tulisan Anda di sini
    Kode HTML (ukuran huruf = 3) :
    <html>
    <head>
    <title>Letakan Judul Anda di sini</title></head>
    <body>
    <font size="3">Letakan Tulisan Anda di sini</font>
    </body>
    </html>
  1. Mencetak huruf tebal (bold) pada tulisan
    2. Letakan Tulisan Anda di sini
    Kode HTML :
    <html>
    <head>
    <title>Letakan Judul Anda di sini</title></head>
    <body>
    <font><b>Letakan Tulisan Anda di sini</b></font>
    </body>
    </html>
  1. Mencetak huruf miring (italic) pada tulisan
    2. Letakan Tulisan Anda di sini
    Kode HTML :
    <html>
    <head>
    <body>
    <title>Letakan Judul Anda di sini</title></head>
    <body>
    <font><i>Letakan Tulisan Anda di sini</i></font>
    </body>
    </html>
  1. Memberi efek garis bawah (underline) pada tulisan
    2. Letakan Tulisan Anda di sini
    Kode HTML :
    <html>
    <head>
    <title>Letakan Judul Anda di sini</title></head>
    <body>
    <font><u>Letakan Tulisan Anda di sini</u></font>
    </body>
    </html>
  1. Memberi efek superscript pada tulisan
    2. Letakan Tulisan Anda di sini
    Kode HTML :
    <html>
    <head>
    <title>Letakan Judul Anda di sini</title></head>
    <body>
    <font>Letakan <sup>Tulisan</sup> Anda di sini</font>
    </body>
    </html>
  1. Memberi efek subscript pada tulisan
    2. Letakan Tulisan Anda di sini
    Kode HTML :
    <html>
    <head>
    <title>Letakan Judul Anda di sini</title></head>
    <body>
    <font>Letakan <sub>Tulisan</sub> Anda di sini</font>
    </body>
    </html>
  1. Mencoret/memberi efek striketrought pada tulisan
    2. Letakan Tulisan Anda di sini
    Kode HTML :
    <html>
    <head>
    <title>Letakan Judul Anda di sini</title></head>
    <body>
    <font>Letakan <s>Tulisan</s> Anda di sini</font>
    </body>
    </html>
  1. Memberi efek blink pada tulisan
    2. Letakan Tulisan Anda di sini
    Kode HTML :
    <html>
    <head>
    <title>Letakan Judul Anda di sini</title></head>
    <body>
    <font><blink>Letakan Tulisan Anda di sini</blink></font>
    </body>
    </html>
  1. Membuat baris baru pada tulisan/paragraf
    2. Letakan Tulisan Pertama Anda di sini 
    Letakan Tulisan Kedua Anda di sini
    Kode HTML :
    <html>
    <head>
    <title>Letakan Judul Anda di sini</title></head>
    <body>
    <font>Letakan Tulisan pertama Anda di sini<br>Letakan Tulisan kedua Anda di sini</font>
    </body>
    </html>
  1. Membuat paragraf rata kiri kanan (justify)
    2. Letakan Tulisan Anda di sini Letakan Tulisan Anda di sini Letakan Tulisan Anda di sini Letakan Tulisan Anda di sini. Letakan Tulisan Anda di sini Letakan Tulisan Anda di sini Letakan Tulisan Anda di sini Letakan Tulisan Anda di sini.
    Kode HTML :
    <html>
    <head>
    <title>Letakan Judul Anda di sini</title></head>
    <body>
    <font align="justify">Letakan Tulisan Anda di sini Letakan Tulisan Anda di sini Letakan Tulisan Anda di sini Letakan Tulisan Anda di sini. Letakan Tulisan Anda di sini Letakan Tulisan Anda di sini Letakan Tulisan Anda di sini Letakan Tulisan Anda di sini.</font>
    </body>
    </html>
  1. Membuat paragraf rata kanan
    2. Letakan Tulisan Anda di sini Letakan Tulisan Anda di sini Letakan Tulisan Anda di sini Letakan Tulisan Anda di sini. Letakan Tulisan Anda di sini Letakan Tulisan Anda di sini Letakan Tulisan Anda di sini Letakan Tulisan Anda di sini.
    Kode HTML :
    <html>
    <head>
    <title>Letakan Judul Anda di sini</title></head>
    <body>
    <font align="right">Letakan Tulisan Anda di sini Letakan Tulisan Anda di sini Letakan Tulisan Anda di sini Letakan Tulisan Anda di sini. Letakan Tulisan Anda di sini Letakan Tulisan Anda di sini Letakan Tulisan Anda di sini Letakan Tulisan Anda di sini.</font>
    </body>
    </html>
  1. Membuat paragraf rata tengah (center)
    2. Letakan Tulisan Anda di sini Letakan Tulisan Anda di sini Letakan Tulisan Anda di sini Letakan Tulisan Anda di sini. Letakan Tulisan Anda di sini Letakan Tulisan Anda di sini Letakan Tulisan Anda di sini Letakan Tulisan Anda di sini.
    Kode HTML :
    <html>
    <head>
    <title>Letakan Judul Anda di sini</title></head>
    <body>
    <font align="center">Letakan Tulisan Anda di sini Letakan Tulisan Anda di sini Letakan Tulisan Anda di sini Letakan Tulisan Anda di sini. Letakan Tulisan Anda di sini Letakan Tulisan Anda di sini Letakan Tulisan Anda di sini Letakan Tulisan Anda di sini.</font>
    </body>
    </html>
  1. Membuat perataan tabulasi antar baris
    Nama                 : XXXXX
    Alamat               : XXXXXXXXXX
    Tempat Tanggal Lahir : XXXXX, XX-XX-XXXX
    Kode HTML :
    <html>
    <head>
    <title>Letakan Judul Anda di sini</title></head>
    <body>
    <pre>
    <font>
    Nama : XXXXX
    Alamat : XXXXXXXXXX
    Tempat Tanggal Lahir : XXXXX, XX-XX-XXXX
    </font>
    </pre>
    </body>
    </html>
  1. Memberi warna pada tulisan
    2. Letakan Tulisan Anda di sini
    Kode HTML (memberi warna merah) :
    <html>
    <head>
    <title>Letakan Judul Anda di sini</title></head>
    <body>
    <font color="red">Letakan Tulisan Anda di sini</font>
    </body>
    </html>
  1. Memberi warna pada background tulisan
    2. Letakan Tulisan Anda di sini
    Kode HTML (memberi background warna merah) :
    <html>
    <head>
    <title>Letakan Judul Anda di sini</title></head>
    <body>
    <font bgcolor="red">Letakan Tulisan Anda di sini</font>
    </body>
    </html>
  1. Membuat tulisan berjalan
    2. Letakan Tulisan Anda di sini
    Kode HTML :
    <html>
    <head>
    <title>Letakan Judul Anda di sini</title></head>
    <body>
    <marquee><font>Letakan Tulisan Anda di sini</font></marquee>
    </body>
    </html>
  1. Memberi background warna pada tulisan berjalan
    2. Letakan Tulisan Anda di sini
    Kode HTML (background marquee warna hijau) :
    <html>
    <head>
    <title>Letakan Judul Anda di sini</title></head>
    <body>
    <marquee bgcolor="green"><font>Letakan Tulisan Anda di sini</font></marquee>
    </body>
    </html>
  1. Mengatur kecepatan tulisan berjalan
    2. Letakan Tulisan Anda di sini
    Kode HTML (kecepatan marquee = 20) :
    <html>
    <head>
    <title>Letakan Judul Anda di sini</title></head>
    <body>
    <marquee scrollamount="20"><font>Letakan Tulisan Anda di sini</font></marquee>
    </body>
    </html>
  1. Mengatur arah tulisan berjalan
    2. Letakan Tulisan Anda di sini
    Kode HTML (tulisan berjalan ke arah kanan) :
    <html>
    <head>
    <title>Letakan Judul Anda di sini</title></head>
    <body>
    <marquee direction="right"><font>Letakan Tulisan Anda di sini</font></marquee>
    </body>
    </html>
  1. Mengatur arah, tinggi marquee, dan background marquee
    2. Letakan Tulisan Anda di sini
    Kode HTML (tulisan berjalan ke atas, tinggi = 30 dan background hijau) :
    <html>
    <head>
    <body>
    <title>Letakan Judul Anda di sini</title></head>
    <body>
    <marquee direction="up" height="30" bgcolor="green"><font>Letakan Tulisan Anda di sini</font></marquee>
    </body>
    </html>
  1. Mengatur arah, tinggi & lebar marquee, dan background marquee
    2. Letakan Tulisan Anda di sini
    Kode HTML (tulisan berjalan ke bawah, kecepatan = 5, tinggi = 40, lebar = 200, dan background hijau) :
    <html>
    <head>
    <title>Letakan Judul Anda di sini</title></head>
    <body>
    <marquee direction="down" height="40" width="200" bgcolor="green" scrollamount="5"><font>Letakan Tulisan Anda di sini</font></marquee>
    </body>
    </html>
  1. Membuat tabel
    2. Caption Tabel
    Baris 1 Kolom 1 Baris 1 Kolom 2
    Baris 2 Kolom 1
    Kode HTML (memberi background warna merah) :
    <html>
    <head>
    <title>Letakan Judul Anda di sini</title></head>
    <body>
    <table border=3 cellspacing=5 cellpadding=5 bgcolor=grey bordercolor=yellow bordercolorlight=blue bordercolordark=black> <caption><b>Caption Tabel</b></caption> <tr> <th>Baris 1 Kolom 1</th> <th>Baris 1 Kolom 2</th> </tr> <tr> <td>Baris 2 Kolom 1</td> <td> </table>
    </body>
    </html>
  1. Menggabungkan antara kedua elemen baris pada tabel
    2. baris 1 kolom 1 baris 1 kolom 2
    baris 2 dihapus
    Kode HTML (memberi background warna merah) :
    <html>
    <head>
    <title>Letakan Judul Anda di sini</title></head>
    <body>
    <table border=3 cellspacing=5 cellpadding=5 bgcolor=grey bordercolor=yellow bordercolorlight=blue bordercolordark=black> <caption><b>Caption Tabel</b></caption> <tr> <th>Baris 1 Kolom 1</th> <th>Baris 1 Kolom 2</th> </tr> <tr> <td>Baris 2 Kolom 1</td> <td> </table>
    </body>
    </html>
  1. Memasukan gambar
    2. Untuk memasukan gambar ke dalam HTML file gambar harus berada dalam satu folder serta penamaan gambar dengan formatnya harus sama persis. Misal "gambar 1.jpg" seperti pada contoh di bawah.
    Kode HTML (dengan ukuran gambar lebar = 300 pixel dan tinggi =300 pixel) :
    <html>
    <head>
    <title>Letakan Judul Anda di sini</title> </head>
    <body>
    <img src="Picture 018.jpg" width=300px height=300px>
    </body>
    </html>
  1. Membuat hyperlink
    2. Untuk membuat hyperlink maka diperlukan minimal dua buah file ".html" yang berada dalam satu folder. File html pertama difungsikan sebagai halaman 1 yang kemudian akan dibuat link menuju file html kedua (halaman 2) dan juga terdapat link dari html halaman 2 ke halaman 1. Hyperlink ini berfungsi untuk menghubungkan antara file ".html" yang terpisah. Namun bisa juga digunakan sebagai link ke alamat web lainnya.
    Kode HTML (file html pertama/halaman 1) :
    <html>
    <head>
    <title>Letakan Judul Halaman 1 Anda di sini</title> </head>
    <body>
    <a href="halaman 2.html">klik disini untuk ke halaman 2<a/>
    </body>
    </html>
    Kode HTML (file html kedua/halaman 2) :
    <html>
    <head>
    <title>Letakan Judul Halaman 2 Anda di sini</title> </head>
    <body>
    <a href="halaman 1.html">klik disini untuk ke halaman 1<a/>
    </body>
    </html>
Semoga bermanfaat postingan kali ini.


      Demikianlah Artikel Kode-kode Dasar HTML

      Sekian Kode-kode Dasar HTML, mudah-mudahan bisa memberi manfaat untuk anda semua.

      Anda sedang membaca artikel Kode-kode Dasar HTML dan artikel ini url permalinknya adalah https://pawang-bisnis.blogspot.com/2014/05/kode-kode-dasar-html.html Semoga artikel ini bisa bermanfaat.

      Tag : ,