HTML Dasar [part 2]

HTML Tingkat Dasar
Latihan Membuat Web Untuk Pemula


► Font

     Untuk mengatur penggunaan font pada sebuah halaman web, beberapa atribut dalam elemen font yaitu face (jenis huruf), color (warna), dan size (ukuran, dimulai dari 1-7).
Untuk latihan ketikkan script berikut dan simpan dengan nama "font.html"

<html>
     <head>
          <title>Font</title>
     </head>

     <body>
        <p>
          <font face="arial" color="blue" size="3">
          Tulisan ini arial berwarna biru dan berukuran 3
        </p>
        <p>
          <font face="verdana" color="red">
          Tulisan ini verdana dan berwarna merah
        </p>
     </body>
</html>

Hasil dari script di atas :


font.html

► Begin row (br)

     Untuk memulai baris baru pada sebuah halaman web tanpa memberi baris kosong di bawahnya (sama dengan tombol enter pada keyboard).
Untuk latihan ketikkan script berikut dan simpan dengan nama "begin_row.html"

<html>
     <head>
          <title>Begin Row</title>
     </head>

     <body>
        <p>
          Contoh <br />penggunaan tag br <br />untuk memotong <br />baris dalam <br /> suatu paragraph
        </p>
     </body>
</html>

Hasil dari script di atas :


► Horizontal rule (hr)

     Untuk menggambar garis horizontal pada sebuah halaman web. Elemen <hr /> memiliki beberapa atribut seperti size (ukuran), width (lebar), color (warna), dan lain lain.

tabel atribut horizontal rule
AtributDeskripsi
sizeUntuk menentukan tebal dari <hr /> dalam pixel
positionUntuk menentukan posisi dari <hr />
widthUntuk menentukan panjang <hr />
noshadeMenampilkan garis horizontal tanpa bayang bayang 3D
colorMemberi warna pada garis horizontal

Untuk latihan ketikkan script berikut dan simpan dengan nama "horizontal rule.html"

<html>
     <head>
          <title>Horizontal Rule</title>
     </head>

     <body>
        <p>
          Horizontal Rule <hr />
          Horizontal Rule 10 pixel <hr size="10px" />
          Horizontal Rule warna merah <hr color="red" />
        </p>
     </body>
</html>

Hasil dari script di atas :


► Preformatted text (pre)

     Untuk menampilkan teks sesuai dengan format aslinya atau seperti yang diketikkan di dalam dokumen HTML.
Untuk latihan ketikkan script berikut dan simpan dengan nama "preformatted text.html"

<html>
     <head>
          <title>Preformatted text</title>
     </head>

     <body>
        <pre>
ini contoh
     text yang menggunakan
          Preformatted text </pre>
     </body>
</html>

Hasil dari script di atas :


► Komentar

     Untuk memberikan sebuah komentar dalam HTML maka menggunakan tag <!-- isi komentar -->. Isis komentar yang berada di dalam tag tersebut tidak akan ditampilkan ke browser.
Untuk latihan ketikkan script berikut dan simpan dengan nama "komentar.html"

<html>
     <head>
          <title>komentar</title>
     </head>

     <body>
     <p><!-- Ini hanya komentar, tidak tampil di browser -->
     Ini adalah contoh penggunaan komentar dalam HTML. <br />
     Tulisan yang berada dalam tag komentar tidak akan ditampilkan di browser.
     </p>
     </body>
</html>

Hasil dari script di atas :


► Blockquote

     Untuk membuat indentasi paragraph. Dengan <blockquote> ini browser akan menampilkan teks menjorok ke dalam.
Untuk latihan ketikkan script berikut dan simpan dengan nama "blockquote.html"

<html>
     <head>
          <title>Blockquote</title>
     </head>

     <body>
     <p>
       <blockquote>
         ini adalah contoh text yang menggunakan blockquote
       </blockquote>
         ini adalah text yang tidak menggunakan blockquote
     </p>
     </body>
</html>

Hasil dari script di atas :









Visit Wahyudi Blog !


1 komentar:

Plisss...
Jangan nyepam (spam), jangan promosi (apapun itu), jangan SARA, jangan OOT...

Mohon kerja samanya, berikan komentar yang berbobot dan bermanfaat bagi semua... ^^

Artikel Unggulan

Panduan Makan Sehat bagi Generasi Z: Tips Mudah untuk Menjaga Energi dan Kesehatan

Menjaga Kesehatan dan Energi saat Berlatih: Nutrisi Penting untuk Atlet Generasi Z Gaya hidup aktif dan olahraga merupakan hal yang sangat p...

Paling Populer dalam Sebulan