Cari Tulisan

Minggu, 21 Desember 2008

Membuat Website sendiri (part 2)

--- sambungan tulisan Membuat Website sendiri (part 1) ---
--- seperti tulisan lain, tulisan ini pun dapat anda copy, edit dan sebarkan sesuka anda ---


Ternyata, membuat website tidak susah ya.... Dan bisa pakai notepad lagi.
Pada tulisan sebelumnya telah diberikan contoh membuat sebuah webpage yang berisikan "Selamat.... ini adalah web pertama saya".
Apa cuma begitu saja....? Tentu tidak, ini baru contoh pertama. Selanjutnya kita akan mengenal lebih banyak tag html. Yang perlu diperhatikan adalah tidak ada seorang pun yang mahir membuat web hanya dengan membaca tutorial html. Yang terpenting adalah berlatih dan membuat web sendiri berdasarkan apa yang sudah anda pelajari. Jadi lekas bangun, cuci muka dan berlatih membuat web dengan kreatifitas!!!!


Beberapa tag html
Sebelumnya telah dikenalkan tag <html>, <head> dan <body>. Selanjutnya akan dikenalkan beberapa tag lain.

Pertama, tag header <h1>,<h2>, s/d <h6>. Seperti namanya, tag ini digunakan untuk membuat judul (header) dan sub judul. Tag <h1> memiliki font yang lebih besar dari tag <h2>, sedangkan tag <h2> memiliki font yang lebih besar dari tag <h3>, demikian seterusnya. Tag header juga memiliki tag penutup yang bentuknya sama dengan tag pembuka ditambah dg "/" didepannya, misal </h1>.
Kedua, tag paragraph <p>....</p>. Tag paragraph juga memiliki tag pembuka dan penutup seperti yang ditunjukkan sebelunya. Tag ini digunakan untuk membuat sebuah paragraph. Untuk lebih jelasnya, mari kita simak contoh penggunaan kedua tag ini,


<!--coba2.htm-->
<html>
<head>
<title>Header & Paragraph</title>
</head>
<body>
<h1>Ini adalah header H1</h1>
<h2>Ini adalah header H2</h2>
<h3>Ini adalah header H3</h3>
<h4>Ini adalah header H4</h4>
<h5>Ini adalah header H5</h5>
<h6>Ini adalah header H6</h6>
<p>Ini adalah paragraph pertama. Paragrah terdiri atas satu atau lebih kalimat. Paragram memiliki inti paragraph dan penjelasan. </p>
<p>Ini adalah paragraph kedua. Dengan tag paragraph, maka tulisan dalam tag tersebut dianggap dalam satu paragraph. </p>
</body>
</html>

Setelah itu simpan berkas tersebut di folder "latihan" yang telah anda buat sebelumnya, caranya sama dengan latihan terdahulu yakni kik menu File ->Save. Pada file name ketik "coba2.htm", dan pilih "All file" pada save as type.
Setelah itu anda buka browser anda (IE atau Firefox). Klik menu File -> Open File. Pada window yang terbuka pada bagian “look in” arahkan ke folder "Latihan", kemudian pilih file coba2.htm. Lalu tekan enter atau open. Maka pada browser akan tampil (kurang lebih) seperti gambar berikut.
gb.2 Hasil coba2.htm


Review
Sejauh ini apa saja yang telah kita pelajari...?
  • Kita telah belajar membuat web dengan menampilkan judul di pojok atas dengan menggunakan tag <title>.
  • Kita telah belajar membuat judul dan sub judul, dengan menggunakan tag <h1> s/d <h6>.
  • Kita juga telah belajar membuat paragraph menggunakan tag <p>.

Apa cuman itu aja...? Tentu saja tidak, namun sesungguhnya dengan apa yang telah dipelajari anda sudah bisa membuat web yang cukup menarik, tentunya dengan kreativitas.


Bersambung......

Jumat, 19 Desember 2008

Membuat Website sendiri (part 1)

--- Setiap tulisan di blog ini bisa dan boleh anda copy, modifikasi dan sebarkan dengan bebas ---

Internet sangat populer dewasa ini. Hampir semua orang memiliki akses ke internet, baik melalui internet berlangganan, tv kabel, line telefon maupun lewat HP. Dan tidak sedikit orang yang ingin membuat webnya sendiri.
Dan dari sekian banyak orang yang ingin membuat web sendiri beranggapan bahwa membuat web sangat susah dan memerlukan software khusus yang mahal. Dan saya adalah satu diantara yang beranggapan demikian, tapi itu dulu. Saya tidak mengatakan bahwa membuat web adalah pekerjaan gampang. Namun saya hanya ingin mengatakan bahwa tidak ada sesuatu yang susah jika kita belajar. Dan jika kita mempelajarinya dengan benar maka kita pun PASTI bisa membuat web sendiri. Mahal...? Tentu tidak karena pada tulisan ini akan dibahas cara membuat web menggunakan software yang biasa anda gunakan tiap hari.
Pada tulisan kali ini akan dibahas bagaimana cara membuat web, cara meninjaunya di pc sendiri sampai dengan cara menguploadnya ke webserver.
Webmail yang kita lihat sekarang memiliki banyak bahasa, mulai dengan html, asp maupun php. Namun pada dasarnya semuanya bersumber dari satu bahasa, yakni html sebagai 'bahasa ibu' bagi internet.
Satu hal yang ingin saya tekankan bahwa, untuk cepat bisa maka hanya ada satu cara yakni belajar dan mempraktekkannya. Inget donk sama pepatah "Ala bisa karena biasa". Jadi biasakan diri anda menuliskan kode html dari tiap contoh yang diberikan. Sekali lagi menuliskan, bukan sekedar copy and paste.

Software yang diperlukan
Seperti yang dituliskan sebelumnya, bahwa software yang diperlukan adalah software yang tidak jauh dengan anda dan GRATIS. Yakni sebuah text editor sederhana (notepad) dan browser (IE). Untuk text editor sangat disarankan menggunakan text editor sederhana tanpa markup seperti notepad (yang sudah ada di komputer berbasis windows) atau notepad++. Text editor digunakan untuk menuliskan kode html.
Sedangkan browser diperlukan untuk me-review kode yang telah dituliskan tadi. Hal ini diperlukan untuk memastikan hasil dari kode yang telah dituliskan. Disarankan menggunakan Firefox dengan dukungan add-on untuk keperluan debug website. Namun menggunakan IE juga bisa. Add-on firefox yang dimaksudkan adalah Html Validator.

Penguasaan bahasa pemrograman
Pada dasarnya tidak diperlukan penguasaan bahasa pemrograman tertentu untuk mempelajari html. Namun jika anda memiliki kemampuan bahasa pemrograman, maka pola pikirnya dapat diterapkan di html.


Bentuk dasar HTML
Html memiliki pengenal yakni tag <html>. Html memiliki 2 bagian yakni <head> dan <body>. Isi sesungguhnya dari html ada di dalam tag <body>, sedangkan isi tag <head> lebih ke deskripsi isi web tersebut. Berikut ini adalah bentuk umum dari html:

<html>
<head>

</head>
<body>

</body>

</html>



Seperti yang anda lihat pada contoh di atas bahwa tiap tag memiliki pembuka dan penutup. Tag pembuka misalnya <html>, <head> dan <body>. Sedangkan tag penutup misalkan </html>, </head> dan </body>. Jadi bentuk dari tag penutup adalah tag pembuka yang diberi ‘/’ di depannya. Saya ingatkan untuk jangan sampai lupa menuliskan tag penutup. Dan supaya tidak lupa, sebaiknya anda langsung menuliskan tag penutup begitu anda selesai membuat tag pembuka.
Namun sebenarnya tidak semua tag terdiri dari pembuka dan penutup. Ada tag yang hanya terdiri dari 1 bagian saja, seperti tag </ br> untuk membuat baris baru, dsb.

Web pertamaku
Sekarang tiba saatnya kita langsung saja mencoba membuat sebuah file html. Untuk itu silahkan buka “notepad”. Bisa anda temukan di start menu -> Programs -> Accessories -> Notepad. Atau Start menu -> RUN -> ketik “notepad” -> Enter.
Setelah itu ketikkan kode berikut ini:

<!--coba1.htm-->
<html>
<head>
<title>My first page</title>
</head>
<body>
Selamat…. Ini adalah web pertama saya.
</body>
</html>

Setelah itu simpan berkas tersebut dengan cara klik menu File -> Save.
Penting… pada Save as type pilih All File. Lalu ketikkan “coba1.htm” (tanpa tanda petik) pada bagian file name. Catatan: extensi file html bisa .html atau .htm. Terserah anda mau menggunakan yang mana, kalau saya sih lebih suka yang singkat. Lebih baik anda kelompokkan file-file latihan yang dibuat dalam satu folder khusus. Saya sarankan anda membuat folder dengan nama “Latihan” pada “My Document” anda.

Setelah itu anda buka browser anda (IE atau Firefox). Klik menu File -> Open File. Pada window yang terbuka pada bagian “look in” arahkan ke folder anda (misalkan My Document -> Latihan), kemudian pilih file coba1.htm. Lalu tekan enter atau open. Tring tring…. Selamat, anda telah bisa membuat web sendiri.

Dan jika tampilan di IE adalah seperti gbr berikut, maka anda sudah bisa membuat web (sederhana).

gb 1. Hasil coba1.htm

Apa cuma begitu saja....? Tentu tidak, ini baru contoh pertama. Selanjutnya kita akan mengenal lebih banyak tag html.

Bersambung......
(mo ngopi dulu nich, dilanjutin di tulisan berikutnya ya....)


Tulisan terkait:
next: Membuat website sendiri (part 2)