HTML Tingkat lanjutan 1
Jika Anda baru terjun di dunia maya khususnya ingin mengikuti bisnis secara online alias pemula (newbie) diharuskan Anda belajar tentang program web HTML. Di blog-bisnisonlinetop1 ini Anda akan mendapatkan tutorial, tips, triks dan artikel-artikel tentang bagaimana cara belajar HTML untuk membantu Anda dalam menjalani bisnis online tentang bagaimana membuat website agar profesional.
Di Internet sebenarnya kita bisa saja mendapatkan banyak template baik yang gratis maupun yang berbayar, namun untuk lebih baiknya agar Anda dapat memanipulasi tampilan website/blog secara elegan dan profesional khususnya script-script HTML yang berkaitan dengan promosi iklan Anda agar Anda tidak mengalami kesulitan untuk me-reposisikan tampilan-tampilan banner atau gambar, teks Link, dan untuk mempercantik tampilan website/blog Anda.
Di blog-bisnisonlinetop1 ini Anda akan mendapatkan tutorial belajar HTML yang disertai dengan contoh-contoh mulai dari dasar, sehingga akan mudah dipahami dan sangat cocok bagi Anda yang masih pemula.
Sebelumnya sudah dijelaskan pada blog ini tentang belajar dasar-dasar HTML untuk pemula dari dasar 1 , dasar 2 sampai dasar 3, agar Anda lebih mahir lagi mengenai HTML silahkan Anda mempelajari tingkat lanjutannya diblog ini , tentunya Anda sudah mengetahui untuk belajar program HTML Anda dapat menggunakan software program HTML seperti Ms FrontPage, Dreamweaver atau Text Editor (Notepad), sesuai dengan selera Anda masing-masing. Namun untuk tutorial ini akan diajarkan dengan menggunakan teks editor yang simpel yaitu Notepad yang sudah dijelaskan sebelumnya di blog ini, jika Anda ingin teks editor yang lebih interaktif Anda bisa menggunakan Notepad.
Dalam belajar sebaiknya Anda langsung praktek di program HTML Anda, sehingga akan lebih mudah untuk dipahami, Anda bisa ketik atau copy/paste contoh-contoh HTML-nya di Notepad program HTML Anda, simpan file dengan extention .html dan tampilkan di browser untuk melihat hasilnya.
Pengenalan HTML lanjutan :
Pengertian singkat tentang HTML
Sebenarnya sudah dijelaskan diblog ini tentang apa itu HTML ? HTML (Hyper Text Markup Language) merupakan bahasa standar untuk membuat suatu dokumen HTML (halaman web) yang terdiri dari kode-kode singkat tertentu, dimana dengan kode-kode tersebut akan memerintahkan Web browser bagaimana untuk menampilkan halaman Web yang terdiri dari berbagai macam format file seperti texs, grafik, animasi link maupun audio-video.
Sedangkan Web browser adalah sebuah progam yang dapat menterjemahkan kode perintah dari dokumen HTML tersebut sehingga dapat kita lihat, baca dan dengar. Contoh dari Web Browser adalah Internet Exsplorer, Netscape Navigator, Mozilla Firefox, Opera, Safari dll.
HTML mempunyai file perluasan (extention) htm atau html. Dimana kedua perluasan tersebut adalah sama, jadi Anda boleh menyimpan file dokumen HTML dengan extention ".htm" atau ".html".
Sebelumnya sudah dijelaskan juga diblog ini tentang contoh suatu dokumen HTML yang sangat sederhana dengan menggunakan software text dokument HTML Notepad, pada bagian ini dijelaskan hanya untuk tingkat lanjutan belajar program HTML.
Format Font HTML
Tag HTML untuk font adalah <font>…</font>, dengan tag ini kita bisa menentukan jenis font (face), warna (color), dan ukuran (size), untuk lebih jelasnya mari kita perhatikan contoh berikut ini:
<html>
<head></head>
<body>
Untuk membuat jenis font (face):
<h1><font face="Verdana">Judul dengan font Verdana</font></h1>
<p><font face="Times">Konten dengan font Times</font></p>
Untuk membuat ukuran (size):
<h1><font size="5">Judul dengan size 5</font></h1>
<p><font size="3">Konten dengan size 3</font></p>
Untuk membuat warna font (color):
<h1><font color="blue">Judul dengan warna biru</font></h1>
<p><font color="red">Konten dengan warna merah</font></p>
Contoh komplit untuk membuat jenis font (face),size dan color:
<h1><font face="Verdana" size="4" color="green">Judulnya Tentang Font</font></h1>
<p><font face="Arial" size="3" color="#660000">Ini adalah contoh tulisan dengan <i>pengaturan font</i> yang menggunakan<br>
tag HTML elemen <b>font</b> dengan atribut face, size dan color...</font></p>
</body>
</html>
Berikut adalah sebagai referensi bagi Anda untuk memanipulasi atribut face, color dan size:
Atribut :
face="Jenis font yang digunakan", contoh: face="Tahoma"
size="Ukuran dari font (1-7)", contoh: size="3"
size="Memperbesar ukuran font", contoh: size="+1"
size="Memperkecil ukuran font", contoh: size="-1"
color="Warna dari font", contoh: color="blue"
color="Warna dari font", contoh: color="#FF0000"
Sesuai dengan recomendasi dari World Web Consortium (W3C), Untuk HTML 4.0 keatas, tag <font> tidak dipergunakan lagi, sebagai gantinya dibuat tag <style> atau disebut dengan Cassading Style Sheets (CSS). Dengan CSS penggunaanya akan lebih kompleks dan lebih luas lagi karena dapat dikombinasikan dengan tag elemen-elemen lainnya di dalam dokumen HTML. Berikut adalah contoh penggunaan tag style sheets:
<html>
<head></head>
<body>
Untuk membuat jenis font (face):
<h1 style="font-family:verdana">Judul Menggunakan font verdana</h1>
<p style="font-family:tahoma">Konten menggunakan font tahoma</p>
Untuk membuat ukuran (size):
<h1 style="font-size:150%">Judul dengan ukuran 150%</h1>
<p style="font-size:80%">Konten dengan ukuran 80%</p>
Untuk membuat warna font (color):
<h1 style="color:blue">Judul dengan warna Biru</h1>
<p style="color:red">Konten dengan warna merah</p>
Contoh komplit untuk membuat jenis font (face),size dan color:
<p style="font-family:verdana;font-size:80%;color:green">
Ini adalah contoh tulisan pengaturan font dengan <i>Cassading Style Sheets</i> (CSS) yang<br>
menggunakan tag HTML elemen <b>style:</b> font-family, font-size dan color...</p>
</body>
</html>
Untuk mengetahui lebih lanjut tentang pemrograman CSS, nanti akan dibuat tutorial khusus untuk membahas hal ini.
Format text HTML
Untuk menulis biasanya ada paragraf dan baris baru, lantas bagaiman cara menuliskannya di dokumen HTML?. Dari contoh yang sudah kita buat sebelumnya, coba tambahkan dengan tag-tag berikut ini:
<html>
<head>
<title>Selamat Datang di Websiteku</title>
</head>
<body>
Ini adalah halaman Program HTML pertamaku.
<p>Aku sedang membuat paragraf dan ini contohnya.</p>
<p>Ini contoh paragraf yang lainnya.</p>
<p>Ini juga paragraf keduaku, tapi de-<br>
ngan baris baru.<br>
Ini baris paragraf baru yang lain.</p>
</body>
</html>
Untuk membuat suatu paragraf, tag elemennya adalah <p>…</p>, dan untuk baris baru adalah <br>, perlu diketahui bahwa sebagian tag elemen HTML tidak memerlukan tag penutup, sebagai contoh adalah <br> ada juga <hr>, apa itu <hr>?, coba lanjutkan lagi dengan contoh berikut ini:
<html>
<head>
<title>Selamat Datang di Websiteku</title>
</head>
<body>
<hr>
<h1>Ini adalah halaman HTML pertamaku.</h1>
Dikerjakan oleh: <!-- Tolong isikan dengan nama Anda -->
<hr>
<p>Aku sedang membuat paragraf dan ini contohnya.</p>
<p>Ini contoh paragraf yang lainnya.</p>
<p>Ini juga paragraf keduaku,…tapi de-<br>
ngan baris baru.<br>
Ini baris baru yang lain.</p>
</body>
</html>
Sampai disini mudah-mudahan Anda memahami apa itu <hr>. Garis Horizontal <hr> juga tidak menggunakan tag penutup. Kemudian ada <h1>…</h1> disebut dengan Heading, merupakan ukuran teks yang biasa di pakai untuk judul, bab, maupun sub-bab lainnya. Ukurannya ada 6 jenis mulai dari <h1> sampai <h6>, ukuran yang paling besar adalah h1 dan yang terkecil adalah h6.
Selanjutnya tag <!–…–> adalah Comments digunakan untuk memasukkan (menyisipkan) suatu komentar di dalam HTML. Suatu comments akan diabaikasn oleh browser. Kamu dapat menggunakan komentar untuk menjelaskan sesuatu hal.
Dibawah ini adalah contoh format teks yang sering digunakan di dalam dokumen HTML :
<html>
<head></head>
<body>
<hr>
<h1>Ini adalah halaman HTML pertamaku.</h1>
Dikerjakan oleh: <!-- Tolong isikan dengan nama anda -->
<hr>
<p>Aku sedang mempelajari format-format teks.<br>
Contoh-contohnya adalah sebagai berikut:</p>
<p>Teks Normal<br>
<tt>Teks mesin ketik</tt><br>
<b>Teks tebal (bold)</b><br>
<strong>Teks tebal dengan perintah Strong</strong><br>
<i>Teks dengan italic (miring)</i><br>
<em>Teks miring dengan perintah Emphasized</em><br>
<u>Teks bergaris bawah (underline)</u><br>
<strike>Teks tercoret (strike)</strike><br>
<big>Teks lebih besar dari normal</big><br>
<small>Teks lebih kecil dari normal</small><br>
Teks menggunakan Subscript: Molekul Air adalah H<sub>2</sub>O<br>
Teks menggunakan Superscript: Hasil dari 10<sup>2</sup>=100<br></p>
</body>
</html>
Kemudian untuk menampilkan teks sesuai dengan yang tertulis kita gunakan tag <pre>…</pre>, misalnya jika anda menuliskan syair sebuah lagu atau puisi:
<html>
<body>
<pre>
<b>BELAJAR ITU INDAH</b>
Hari ini...
Aku sedang belajar HTML...
Belajar tentang HTML itu ternyata mudah.
Tidak sulit 'ntuk dimengerti,
Karena mudah di fahami teks-teks nya.
Tapi saya tetap belajar,… biarlah...
Akan kucoba belajar terus...
Sampai aku mahir.
</pre>
</body>
</html>
Sampai disini semoga Anda benar-benar memahami tentang format font dan paragraf dengan program HTML, untuk lanjutan belajar HTML dengan elemen gambar dan Hypertext silahkan Anda klik disini yaitu Belajar HTML tingkat lanjutan bagian ke 2