Pada bagian sebelumnya, saya sudah menjelaskan tentang cara untuk membuat sebuah dokumen HTML dan bagaimana HTML dibangun menggunakan <tag>teks</tag>. Masih ingat struktur yang ini kan
<html>
<head>
<title>Ini Judul</title>
</head>
<body>
Di sini tempat menuliskan isi utama dokumen HTML.
</body>
</html>
Pada bagian ini, saya akan menunjukkan cara membuat sebuah homepage sederhana dan bagaimana menambahkan teks pada homepage anda tersebut plus cara menampilkan huruf dengan berbagai variasi.
<head>
<title>Ini Judul</title>
</head>
<body>
Di sini tempat menuliskan isi utama dokumen HTML.
</body>
</html>
Pada bagian ini, saya akan menunjukkan cara membuat sebuah homepage sederhana dan bagaimana menambahkan teks pada homepage anda tersebut plus cara menampilkan huruf dengan berbagai variasi.
Homepage adalah halaman utama yang ada di web site yang anda bangun. Kalau anda perhatikan, semua web sita yang pernah anda kunjungi selalu memiliki link yang berjudul Home. Nah, itulah yang disebut homepage.
Hal yang pertama akan kita lakukan adalah mengubah judul halaman yang semula tertulis Ini Judul menjadi :.
Homepage Pribadi Saya
Untuk melakukan hal tersebut anda cukup mengubah tag berikutini:
<title>Ini Judul</title>
menjadi
<title>Homepage Pribadi Saya</title>
Untuk melakukan hal tersebut anda cukup mengubah tag berikutini:
<title>Ini Judul</title>
menjadi
<title>Homepage Pribadi Saya</title>
Catatan: Karena keterbatasan sistem browser, maka perubaha n judul ini tidak dapat anda praktekkan di sini. Sebagai pengingat, perubaha n judul ini akan muncul di bagian kiri paling atas browser anda.
Tag <font>
Tag <font></font> adalah salah satu tag yang paling sering digunakan. Penggunaan tag tersebut tanpa tamb
Kita akan mulai dengan contoh sederhana yang hanya menampilkan teks:
Selamat datang di Homepage Saya
Nah, untuk menampilkan tulisan tersebut di layar, anda cukup menambahkan baris berikut ini di antara tag <body> dan </body>:
<font>Selamat datang di Homepage Saya</font>
Silahkan lakukan perubaha n tersebut di jendela kode di samping kiri. Keseluruhan kode anda akan menjadi seperti ini:
Nah, untuk menampilkan tulisan tersebut di layar, anda cukup menambahkan baris berikut ini di antara tag <body> dan </body>:
<font>Selamat datang di Homepage Saya</font>
Silahkan lakukan perub
<html>
<head>
<title>Homepage Pribadi Saya</title>
</head>
<body>
<font>Selamat datang di Homepage Saya</font>
</body>
</html>
<head>
<title>Homepage Pribadi Saya</title>
</head>
<body>
<font>Selamat datang di Homepage Saya</font>
</body>
</html>
Setelah selesai, tekan tombol eksekusi untuk melihat hasilnya. Anda akan melihat teks tersebut ditampilkan menggunakan font Times New Roman berukuran standar, warna hitam. Mungkin tidak terlalu menarik sebagai tampilan awal. Tetapi itu merupakan permulaan yang bagus.Kita akan lakukan sesuatu nanti untuk membuatnya lebih menarik.
Size, Color dan Face (Ukuran, Warna dan Jenis Huruf)
Judul tersebut menggambarkan 3 hal yang bisa anda lakukan terhadap teks anda. Sesuai janji saya, kita akan mulai menggunakan atribut pada tag <font> ini.
Judul tersebut menggambarkan 3 hal yang bisa anda lakukan terhadap teks anda. Sesuai janji saya, kita akan mulai menggunakan atribut pada tag <font> ini.
Atribut adalah tambaha n keterangan pada tag, dan formatnya adalah sebagai berikut:
<tag atribut=”nilai atribut”, atribut2=”nilai atribut 2”, …>
Nah, kita akan mulai dengan atribut face yang sangat berguna untuk menyesuaikan jenis huruf dengan keinginan kita. Sesuai dengan format atribut yang baru saja kita baha s, maka penambaha n atribut face ini akan menjadi seperti ini:
<font face="Arial">Selamat datang di Homepage Saya</font>
Jangan lupa untuk mengapit nilai atribut dengan tanda kutip ganda setelah tanda sama dengan. Perhatikan juga bahwa anda tidak perlu menuliskan atribut tersebut pada tag penutup.
Tentu saja anda bisa menambahkan atribut lain dalam sebuah tag, dan dalam contoh berikutnya kita akan melakukannya untuk mengubah ukuran huruf. Hal yang penting untuk anda ketahui, bahwa ukuran huruf dalam HTML berbeda dari ukuran huruf yang biasa anda gunakan di MS-WORD atau aplikasi lainnya.
Umumnya, ukuran huruf menggunakan satuan point (pt). Pada prakteknya anda akan melakukan trial & error pada ukuran huruf ini untuk melihat komposisi yang tepat untuk dokumen anda.
Setelah menyesuaikan jenis huruf menjadi Arial tadi, anda juga bisa membuat sebuah judul besar bagi dokumen anda dengan mengubah baris tag font menjadi seperti ini (bedakan judul dokumen dengan judul halaman, judul halaman mengacu pada penggunaan tag <title> sedangkan judul dokumen letaknya di dalam dokumen utama):
<font face="Arial" size="7">Selamat datang di Homepage Saya</font>
Seperti yang anda lihat, begitu anda mengetahui kegunaan sebuah tag, maka akan sangat mudah bagi anda untuk menambahkan hal menarik lainnya pada tag tersebut.
<font face="Arial" size="7">Selamat datang di Homepage Saya</font>
Seperti yang anda lihat, begitu anda mengetahui kegunaan sebuah tag, maka akan sangat mudah bagi anda untuk menambahkan hal menarik lainnya pada tag tersebut.
Kita akan mencoba menggunakan atribut penting terakhir dari tag <font> ini yang akan memperindah huruf yang anda tuliskan yaitu yaitu permainan warna.
Perhatikan, bahwa anda harus menggunakan penulisan warna dalam baha sa Inggris Amerika. Atribut color (warna) ini berbeda dari atribut lainnya. Anda bisa menggunakan 2 cara untuk menuliskan nilai atribut color ini yaitu menggunakan kata-kata (nama warna standar dalam baha sa inggris) dan menggunakan kode Hexadesimal. Saya akan jelaskan lebih lanjut.
Penggunaan kata-kata memiliki keterbatasan dalam jumlah warna yang bisa anda tuliskan. Misalnya anda tidak mungkin menuliskan warna “agak kuning sedikit” untuk menampilkan warna huruf kuning muda. Untuk bisa menuliskan dalam semua gradasi warna kuning dan warna lainnya, anda harus menuliskannya dalam hexadesimal.
Kita akan lihat contoh penulisan menggunakan kedua cara tersebut. Untuk menampilkan judul halaman tadi dalam warna merah, kita bisa melakukannya dengan cara berikut:
<font face="Arial" size="7" color="red">Selamat datang di Homepage Saya</font>
atau
<font face="Arial" size="7" color="#FF0000"> Selamat datang di Homepage Saya </font>
Perhatikan bahwa kode Hexadesimal dituliskan dalam format #000000 (tanda # diikuti oleh 6 angka Hexadesimal). Masing-masing angka Hexadesimal tersebut adalah angka 1-9, A, B, C, D, E dan F.
atau
<font face="Arial" size="7" color="#FF0000"> Selamat datang di Homepage Saya </font>
Perhatikan bahwa kode Hexadesimal dituliskan dalam format #000000 (tanda # diikuti oleh 6 angka Hexadesimal). Masing-masing angka Hexadesimal tersebut adalah angka 1-9, A, B, C, D, E dan F.
Dua angka pertama adalah jumlah warna merah, 2 angka berikutnya warna hijau, dan 2 warna terakhir menunjukkan jumlah warna biru yang akan dicampur untuk menghasilkan warna tertentu.
00 merupakan angka minimum dan FF merupakan angka maksimum. Jika anda perhatikan, untuk menuliskan warna merah saja, kita menggunakan kode Hex #FF0000. Untuk menampilkan warna hijau kita menggunakan kata GREEN atau kode Hex #00FF00. Anda tentu sudah bisa menebak bagaimana cara menuliskan warna biru dalam kode Hex bukan ? Ya…. #0000FF.
Praktek:
Anda sudah mempelajari bagaimana caranya menampilkan teks di halaman web anda. Kemudian anda sudah mengetahui bagaimana caramenyesuaikan jenis, ukuran dan warna huruf sesuai keinginan anda.
Silahkan pelajari kode berikut dan lihat hasilnya di browser anda.
<html>
<head>
<title>Homepage Pribadi Saya</title>
</head>
<body>
<font face="Arial" size="7" color="red"> Selamat datang di Homepage Saya </font>
</body>
</html>
<head>
<title>Homepage Pribadi Saya</title>
</head>
<body>
<font face="Arial" size="7" color="red"> Selamat datang di Homepage Saya </font>
</body>
</html>
Penjelasan:
Tag <font> memiliki 3 atribut utama yaitu face untuk menentukan jenis huruf, size untuk mengubah ukuran huruf dan color untuk mengubah warna huruf.
Latihan:
Sebagai latihan, silahkan buat judul dokumen anda berada di tengah halaman sehingga menjadi seperti ini:
Selamat datang di Homepage Saya
Petunjuk: Ingatlah penggunaan tag <center> di pelajaran terdahulu.
Post a Comment