cara mudah dan murah membuat html
kawan. pada coret2 kali ini, saya ingin berbagi sedikit pengalaman tentang html. terutama dalam membuat html di hosting xtgem ini. di dalam pembuatan website xtgem ini, dikenal berbagai macam cara. ada yg langsung menulis tag html lewat creator, ada jg yg memasang css template yg diupload ke xtgem lewat file browser. masing2 cara tsb tidak saya sukai. Sebab, pulsa gprs yg sering ludes karena sering reload webpage untuk melihat preview dari html yg kita edit. Hal ini masalah besar buat gw, mengingat gw adalah wapper berkantong super cekak lol.
Tp tenang plend, ada 1 lg cara menurut saya mudah dan murah dan yg selama ini saya terapkan pd semua website buatan gw. untuk yg satu ini syaratnya adalah, minimal harus hafal semua tag2 html, sukur2 dg css nya :d. Gw katakan murah karena untuk melihat previewnya adalah dg memanfaatkan browser bawaan hp (browser Netfront pada sony ericsson). Jadi, meski ga ada pulsa sama sekali, kita bisa buat html sesuai keinginan kita. Untuk memulai, kalian harus punya salah satu aplikasi text editor di bawah ini (khusus hp java. untuk symbian dicoba aja, sp tau bisa).
kalo app tsb sudah terinstal, buat sebuah file berextensi .html. Untuk mini commander, caranya pencet softkey sbelah kanan > file > new > buat file .html (misal: index.html), lalu klik ok.
kalo file html tsb udah jadi, langkah kedua adalah mengedit file tsb, dan mulai menulis tag html di dalamnya. Sbg contoh, di bwh ini saya sediakan susunan dasar sebuah file html.
<head>
<title>contoh judul</title>
</head>
<body>
<h1>heading1</h1>
<h2>heading2</h2>
<h3>heading3</h3>
<p>membuat paragraf</p>
<b>bold = huruf tebal</b>
<u>underline = huruf miring</u>
<i>italic = huruf miring</i>
<marquee>huruf bergerak</marquee>
<blink>huruf berkedip</blink>
<a href="http://aryakakung.xtgem.com>membuat link url</a>
</body>
</html>
Copas susunan contoh html diatas dan masukkan dalam file html yg kamu buat tadi. Lalu klik save. Kemudian minimalkan aplikasi text editor, dan cari file html yg telah kamu edit tadi. Kalo udah ketemu, langsung klik lihat. Jadi deh sebuah halaman wap utuh dg tampilan mirip dg tampilan di pc. Dan bahkan lebih bagus daripada yg terlihat di opera mini.
Langkah kedua adalah memasukkan css dalam file html tadi. Untuk yg satu ini, sangat saya sarankan untuk mempelajari apa itu css beserta syntak2nya. selengkapnya tentang CSS, silahkan klik disini.
Sesuai dg judul artikel ini, maka saya tidak akan memakai css yg biasanya disediakan oleh para wapmaster, karena kalau kita memakai css dari wap orang lain, otomatis kita akan terkoneksi ke internet untuk mendownload CSSnya. Sebagai gantinya, saya akan menggunakan internal css.
Untuk pemasangan internal css, maka kamu harus memasang tag css
<style type="text/css"></style>
diantara tag
<head></head>.
Ok, daripada bingung2, perhatikan contoh di bawah ini.
<head>
<title>contoh judul</title>
<style type="text/css">
semua kode css ada disini
</style>
</head>
</body>
</body>
</html>
dan untuk contoh lengkapnya, perhatikan di bawah ini.
<head>
<title>contoh judul</title>
<style type="text/css">
body {background:black; font-color:#701212; font-size:12px; }
/* HEADING TEXT */
h1 {background:yellow; color:black; padding:2px; text-align:center; margin:1px 2px; }
h2 {background:black; color:yellow; padding:2px; text-align:center;
margin:1px 2px; border:1px solid yellow; }
/* UNTUK STYLING PARAGRAPH/P */
p {text-align:justify; color:gray; margin:2px 5px; padding:2px; border:1px solid #0f0f0f; }
/* UNTUK STYLING LINK URL */
li {color:green; border-bottom:1px dotted #2f2f2f; }
li a {color:green; text-decoration:none; }
li a:hover {color:yellow; font-weight:bold; }
</style>
</head>
<body>
<h1>welcome</h1>
<p>ini adalah contoh wapsite menggunakan internal css</p>
<h2>judul submenu 1</h2>
<ul>
<li><a href="url-1">link-1</a></li>
<li><a href="url-2">link-2</a></li>
<li><a href="url-3">link-3</a></li>
<li><a href="url-4">link-4</a></li>
<li><a href="url-5">link-5</a></li>
</ul>
<h2>judul submenu 2</h2>
<ul>
<li><a href="url-1">link-1</a></li>
<li><a href="url-2">link-2</a></li>
<li><a href="url-3">link-3</a></li>
<li><a href="url-4">link-4</a></li>
<li><a href="url-5">link-5</a></li>
</ul>
</body>
</html>
copas contoh diatas untuk melihat gimana internal css bekerja. contoh diatas hanyalah sebagian kecil saja dari penggunaan css. kalian bisa menambah dan mengkreasikan css sebanyak dan sesukamu. itulah sebabnya saya sarankan mempelajari css terlebih dahulu. kalo kamu sudah paham betul tentang css, dg hanya melihat tampilan web punya orang, maka kamu pasti tau bagaimana membuat web dg tampilan spt itu tanpa harus mengintipnya terlebih dahulu dg source code viewer.
Kembali ke proses selanjutnya. Bila file html tsb udah kamu edit, dan hasilnya sudah sesuai keinginanmu, selanjutnya adalah proses upload. Langkah2nya adalah login dahulu ke xtgem, klik pada file browser > upload. Jadi deh file html mu terpasang di xtgem. Dan sekarang sudah bisa kamu lihat dg opera mini. Maka biaya membuat sebuah website dg cara diatas hanyalah biaya untuk upload doank. Lebih murah kan daripada harus bolak balik ke creator ^^.
ok plend, tutorial diatas pada intinya hanyalah menulis seluruh tag html dari aplikasi hp, bila udah jadi tinggal menguploadnya. Karena hampir semua hp mid-end keatas biasanya support internal css dan internal javascript. Jadi hasil akhirnya bisa langsung terlihat tanpa harus terkoneksi dg internet.
Sbg pelengkap, nih gw kasih contoh file html 3 kolom yg udah jadi. Tinggal kamu kreasikan sesukamu. Silahkan download di sini.
Bila ada yg kurang atau ada yg ingin menambahkan, silahkan comment... > >