Parbada ILMU: HTML TUTORIAL

Tampilkan postingan dengan label HTML TUTORIAL. Tampilkan semua postingan

� �

Tampilkan postingan dengan label HTML TUTORIAL. Tampilkan semua postingan

Kamis, 01 Maret 2012

�

Format Font HTML

Tag <font> termasuk salah satu (Deprecated tags) dimana saat ini sudah jarang digunakan karena sudah ada alternatif pengganti yang lebih baik untuk tag tersebut. Untuk Tag <font> sebagai gantinya digunakan atribut style atau CSS. Untuk penjelasan singkat tentang CSS ini bisa di baca di Belajar CSS.
Pada tulisan sebelumnya tentang Belajar HTML dengan topik Format Font HTML telah dibuat beberapa contoh format font dengan menggunakan tag <font>. Di tutorial HTML ini kita akan melupakan tag tersebut dan beralih menggunakan atribut style.
Untuk mengganti jenis font digunakan properti font-family:

<p style="font-family:Georgia">Tulisan dengan font-family Georgia</p>

Hasil:

Tulisan dengan font-family Georgia

Untuk melakukan eksperimen lebih lanjut anda bisa mengganti jenis font-nya dengan font-font yang bisa dilihat di Jenis-jenis Font Family untuk CSS
Untuk membuat tulisan miring digunakan properti font-style:

<p style="font-style:italic">Membuat tulisan miring</p>

Hasil:

Membuat tulisan miring

Untuk membuat tulisan tebal digunakan properti font-weight:

<p style="font-weight:bold">Membuat tulisan tebal</p>

Hasil:

Membuat tulisan tebal

Untuk mengatur ukuran font digunakan properti font-size:

<p style="font-size:16px">Tulisan dengan ukuran font 16px</p>

Hasil:

Tulisan dengan ukuran font 16px

Untuk pengaturan ukuran font-size dapat menggunakan satuan px, em, % atau pt. Kode HTML berikut akan menghasilkan ukuran font yang sama.

<p style="font-size:16px">Tulisan dengan ukuran 16px</p>
<p style="font-size:100%">Tulisan dengan ukuran 100%</p>
<p style="font-size:1em">Tulisan dengan ukuran 1em</p>
<p style="font-size:12pt">Tulisan dengan ukuran 12pt</p>

Hasil:

Tulisan dengan ukuran 16px

Tulisan dengan ukuran 100%

Tulisan dengan ukuran 1em

Tulisan dengan ukuran 12pt

Untuk membuat warna font digunakan properti color:

<p style="color:blue">Tulisan ini akan berwarna biru</p>

Hasil:

Tulisan ini akan berwarna biru

Untuk kode warna bisa menggunakan nilai RGB, Hexadecimal atau Nama Warna. Kode HTML berikut akan menghasilkan warna tulisan yang sama.

<p style="color:rgb(0,128,0)">Membuat warna tulisan dengan Nilai RGB</p>
<p style="color:#008000">Membuat warna tulisan dengan Kode Hexadecimal</p>
<p style="color:green">Membuat warna tulisan dengan Nama Warna</p>

Hasil:

Membuat warna tulisan dengan Nilai RGB

Membuat warna tulisan dengan Kode Hexadecimal

Membuat warna tulisan dengan Nama Warna

Ikuti link berikut untuk melihat Kode Hexadecimal dan Nama Warna atau gunakan tool kode warna untuk melihat nilai RGB.
Atribut style dapat memiliki beberapa properti dengan dibatasi oleh tanda titik koma.

<p style="font-family:Georgia;font-size:16px;font-weight:bold;">Contoh tulisan dengan font-family, font-size dan font-weight</p>

Hasil:

Contoh tulisan dengan font-family, font-size dan font-weight.

Kemudian style tersebut diatas dapat di persingkat dengan menggunakan properti font.

<p style="font:bold 16px Georgia">Contoh tulisan dengan properti font.</p>

�

Tag Dasar HTML

Untuk melihat penjelasan dari Tag Dasar HTML ini anda bisa membacanya di tulisan Belajar HTML dengan sub judul Tag Dasar HTML
Seperti dijelaskan bahwa tag dasar dari suatu dokumen HTML itu terdiri dari 3 elemen utama yaitu: html, head dan body. Yang dalam penulisannya diawali dengan tag pembuka "<…>" dan diakhiri dengan tag penutup "</…>".

<html>
<head>
</head>
<body>
</body>
</html>

Untuk membuktikannya bisa dengan melihat kode sumber (source code) dari suatu halaman website. Caranya adalah dengan membuka salah satu website kemudian bagi yang menggunakan browser Firefox, Google Chrome atau Opera tekan Ctrl+U, untuk Safari tekan Ctrl+Alt+U sedangkan untuk Internet Explorer tekan Alt, V kemudian C.
Dengan cara anda masing-masing mulailah mencari ketiga tag diatas. Dengan melihat kode sumber kita juga bisa belajar tentang tag-tag apa saja yang ada di antara tag <head> maupun yang berada di antara tag <body>.
Pada bagian paling atas atau sebelum tag <html> mungkin anda akan melihat <!DOCTYPE bla… bla…>, ini disebut DOCTYPE deklarasi fungsinya adalah untuk menunjukkan tipe dokumen dan versi yang digunakan.
Walaupun kelihatannya agak rumit ketika kita melihat kode sumber tersebut tetapi kalau diperhatikan secara seksama bahwa rumus penulisan tag-tag html tersebut adalah sama.

<nama-elemen atribut>Konten</nama-elemen>

Untuk nama-elemen anda bisa melihat tabelnya di w3.org HTML Elements, untuk atribut terdiri dari 2 bagian yaitu nama dan nilai, contoh penulisannya adalah: nama="nilai"
Contoh:

<p style="color:blue">p = nama-elemen, style = nama-atribut dan color:blue = nilai-atribut</p>

Hasil:

p = nama-elemen, style = nama-atribut dan color:blue = nilai-atribut

Sebagai referensi untuk atribut-atribut HTML bisa di lihat di w3.org HTML Attributes
Elemen HTML tanpa atribut:

<nama-elemen>Konten</nama-elemen>

Contoh:

<p>Paragraf tanpa ada atribut</p>

Hasil:
Paragraf tanpa ada atribut
Elemen HTML bisa memiliki beberapa atribut dengan dibatasi oleh spasi:

<nama-elemen atribut1 atribut2>Konten</nama-elemen>

Contoh:

<p style="color:blue" title="paragraf">Paragraf dengan atribut style dan title - geser mouse ketulisan ini untuk melihat titelnya.</p>

Hasil:

Paragraf dengan atribut style dan title – geser mouse ke tulisan ini untuk melihat titelnya.

Contoh lainnya:

<input type="button" value="Tombol">

Hasil: YAHOO

Sebagian dari elelen-elemen HTML ada yang tidak memerlukan tag penutup seperti contoh diatas. Contoh lainnya tag <img>, tag <img> digunakan untuk menampilkan gambar (image) di dalam dokumen HTML.
Contoh tag <img> dengan beberapa atribut:

<img src="images/yahoo.gif" width="147" height="31" alt="Yahoo">

Hasil:

Elemen-elemen HTML tanpa tag penutup tersebut biasanya hanya memiliki atribut-atribut tanpa ada konten seperti pada tag <p> diatas.

�

Pengenalan HTML

Pengenalan.

Sebelumnya sudah ada postingan yang berjudul Belajar HTML, disana sudah dijelaskan secara mendasar tentang HTML. Sekedar untuk mengingatkan kembali tentang apa itu HTML anda bisa membacanya di Pengenalan HTML.
Didalam tutorial HTML ini kita akan membahas kembali tentang HTML tersebut termasuk elemen-elemen HTML yang belum kita bahas sebelumnya seperti frame, table, form dan sebagainya.

Apa yang dibutuhkan dalam Belajar HTML ini?

Komputer dan koneksi ke Internet.
Agar kita bisa membaca dan belajar sambil praktek.
Teks editor.
Teks editor seperti Notepad di Windows adalah pilihan paling mudah karena sudah terintegrasi dengan system kita. Jika ingin menggunakan teks editor yang lebih bagus lagi, bisa men-download Notepad ++
Jika menggunakan software lain seperti MS FrontPage atau Dreamweaver usahakan untuk selalu berada di kode "HTML View" dan gunakan real browser untuk menampilkan atau "preview" dokumen HTML anda.
Dengan kata lain biasakan untuk membuat, mengedit dan memasukkan kode-kode HTML dengan mengetiknya secara manual sehingga nantinya akan terbiasa dan hafal dengan kode-kode HTML.
Browser atau peramban.
Untuk Windows ada Internet Explorer namun jika ingin menggunakan peramban yang lain ada bermacam-macam pilihan seperti Mozilla Firefox, Google Chrome, Opera, Safari dsb.
Kreatif, tekun dan sabar.
Misal jika diberikan contoh-contoh HTML, kemudian berinisiatif membuat contoh-contoh yang berbeda berdasarkan imajinasinya sendiri ini namanya kreatif.
Kemudian lakukan dengan rutin dengan melakukan berbagai macam percobaan, melakukan pencarian informasi dari berbagai macam sumber, menyimak dan memberikan perhatian dengan apa yang sedang di lakukan itu namanya baru tekun.
Kesabaran memang ada batasnya jika ini terjadi sebaiknya anda beralih melakukan hobby-hobby anda yang lainnya lupakan HTML untuk sementara.

Tips lainnya

Jangan menulis tag-tag HTML secara tumpang-tindih.
Penulisan yang salah:

<p><strong>Paragraf dengan tulisan tebal</p></strong>

Penulisan yang benar:

<p><strong>Paragraf dengan tulisan tebal</strong></p>

Hasil dari kedua contoh diatas akan sama:
Paragraf dengan tulisan tebal
Pelajari tapi hindari penggunaan deprecated tag dan atribut, seperti contoh untuk tag <body> deprecated jika menggunakan atribut bgcolor atau background:

<body background="#FFFFFF">...</body>
atau:
<body bgcolor="#FFFFFF">...</body>

Kita dapat menggantinya dengan menggunakan atribut style:

<body style="background-color:#ffffff">...</body>

Dalam tulisan tentang Pengenalan HTML mungkin anda akan mendapati tulisan seperti berikut:

Untuk menuliskan Elemen HTML bisa menggunakan huruf besar maupun huruf kecil. Contoh: <HTML>, <HtMl>, <HTml>, <html>, semuanya adalah sama.

Namun saat ini saya menganjurkan untuk membiasakan diri menggunakan huruf kecil saja baik untuk HTML maupun CSS.
Disamping akan terlihat lebih rapi juga agar nantinya lebih mudah ber-adaptasi dengan XHTML yang memang diharuskan harus menggunakan huruf kecil.
XHTML adalah gabungan dari XML dan HTML jadi tetap menggunakan kode-kode HTML hanya ada peberapa perbedaan yang mudah dipelajari nantinya kalau sudah tahu dan mengerti tentang HTML.

Note : Baca Juga Tutorial Lainnya ea!!!

Kamis, 01 Desember 2011

�

CARA MEMBUAT MACAM JENIS TEKS BERJALAN

Postingan

By : Hendric Marhuarar Sihombing

Dalam postingan kali ini saya mencoba berikan tips tentang Cara membuat animasi teks yang bergerak. Teks berjalan caranya tidaklah begitu rumit, kita hanya perlu memahami mengenai fungsi dari kode-kode yang bisa membuat object tersebut bergerak.seperti marquee, behavior,scroll amount dan lain sebagainya.

Dibawah ini adalah beberapa contoh Animasi Teks yang menggunakan efek marquee. untuk anda yang berminat,silahkan anda copy kodenya kemudian anda paste ke gadget html anda.
Teks Berjalan Bolak Balik dari Kiri - kanan