Welcome To My Blog: Mari Belajar HTML

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 dantampilkan 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 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.
Aku sedang membuat paragraf dan ini contohnya.
Ini contoh paragraf yang lainnya.
Ini juga paragraf keduaku, tapi de- 
ngan baris baru. 
Ini baris paragraf baru yang lain.
</body>
</html>

Untuk membuat suatu paragraf, tag elemennya adalah …, dan untuk baris baru adalah  , perlu diketahui bahwa sebagian tag elemen HTML tidak memerlukan tag penutup, sebagai contoh adalah   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>

Objektif :

Setelah mempelajari materi ini diharapkan anda dapat memahami penggunaan element-element untuk pemformatan teks.

Element B (Bold) Element B berfungsi untuk membuat tampilan teks tercetak tebal (bold).

Sintaks:

..........................

Element I (Italic) Element I berfungsi untuk membuat tampilan teks tercetak miring (italic).

Sintaks:

..........................

Element U (Underline) Element U berfungsi untuk membuat tampilan teks tercetak garis bawah (underline).

Sintaks:

..........................

Element HR (Horizontal Rule)

Element HR berfungsi untuk membuat suatu garis horizontal. Element ini tidak mempunyai tag penutup dan mempunyai attribute align untuk menempatkan posisi secara horizontal ("left", "center", "right"), size untuk ukuran ketebalan garis ("pixel"), width untuk ukuran panjang garis ("persen"), dan noshade (garis solid).

Sintaks:

<hr align="left"|"center"|"right" size="pixel" width="persen" noshade>

Begin Row (BR) atau Line Break

Tag ini digunakan untuk menulis teks pada baris berikutnya. Tag   membuat baris baru tanpa memberi baris kosong di bawahnya.

Element BR berfungsi untuk ganti baris. Dan element BR ini tidak mempunyai tag penutup.

Sintaks:

 

Contoh:

<HTML> <HEAD> <TITLE>Begin Row</TITLE> </HEAD> <BODY> Ada 3 jenis payment processor yang sangat direkomendasikan untuk melakukan transaksi bagi pelaku bisnis secara online, contohnya yaitu : PayPal  AlertPay  LibertyReserve </BODY> </HTML>

Element H1,H2,H3,H4,H5,H6 (Header)

Element H1,H2,H3,H4,H5,H6 berfungsi untuk membuat header dengan format 6 jenis ukuran huruf dan tercetak tebal. Nilai ukuran huruf terbesar adalah H1 dan terkecil adalah H6. Element ini mempunyai attribute yaitu align yang bernilai "left", "center", "right" yang menspesifikasikan posisi horizontal dari header (default: "left").

Sintaks:

<hx align="left"|"center"|"right">

Ukuran Font

Untuk mengatur huruf dokumen HTML digunakan tag . Tag memiliki beberapa atribut untuk mengatur ukuran huruf yang akan digunakan.

Contoh:

<HTML>
<HEAD>
<TITLE>Ukuran font</TITLE>
</HEAD>
<BODY>
<FONT SIZE=1>Ukuran font 1</FONT>
<FONT SIZE=2>Ukuran font 2</FONT>
<FONT SIZE=3>Ukuran font 3</FONT>
<FONT SIZE=4>Ukuran font 4</FONT>
<FONT SIZE=5>Ukuran font 5</FONT>
<FONT SIZE=6>Ukuran font 6</FONT>
<FONT SIZE=7>Ukuran font 7</FONT>
</BODY>
</HTML>

Jenis Font

Atribut FACE digunakan untuk mengatur jenis huruf yang diinginkan. Atribut FACE harus diisi dengan string jenis font seperti Arial, Times New Roman,Verdana, dan sebagainya.

Contoh:


<HTML>
<HEAD>
<TITLE>Jenis Font</TITLE>
</HEAD>
<BODY>
<FONT SIZE=5>
<FONT FACE = "Arial">Arial, contoh Hobi ngenet dapat duit<P>
<FONT FACE = "Verdana">Verdana , contoh Tips internet marketing <P>
<FONT FACE = "Times New Roman">Times New Roman, contoh Tips SEO<P>
</BODY>
</HTML>

Warna Font

Atribut COLOR digunakan untuk mengatur warna font yang akan digunakan. Untuk memberi nilai pada atribut color, ada dua cara. Cara pertama dengan menuliskan nama warna seperti Red, Blue, Yellow, White, dll. Sedangkan cara kedua adalah dengan menggunakan nilai RGB (Red Green Blue) dari suatu warna, misalnya FF0000 untuk Red, 00FF00 untuk green, dan 0000FF untuk Blue.

Contoh:

<HTML>
<HEAD>
<TITLE>Warna Font</TITLE>
</HEAD>
<BODY>
<FONT SIZE=5>
<FONT COLOR = "green">AD Network<P>
<FONT COLOR = "#00FF00">Apartement Locator<P>
<FONT COLOR = "#0000FF">Art Supply Store<P>
</BODY>
</HTML>