Belajar membuat website

BELAJAR Membuat WEBSITE - Basic HTML
Publish: 20 Desember 2010 | Author & Copyright: Johan | Status: FREE tutorial

Bagaimana cara membuat website? Ada beberapa tahapan dan langkah yang harus kita lalui untuk membuat sebuah Website yang baik. Lain halnya dengan instan CMS maupun instan blog yang kita tinggal mendaftar saja di penyedia layanan blog seperti Blogspot, Wordpress, dll. Maupun CMS seperti Joomla, Mambo, dll yang tinggal instal saja seperti. Disini kita belajar manual web (membuat website secara manual) walaupun masih sederhana dan statis. Untuk membuat website pertama-tama kita harus belajar bahasa HTML yaitu sebuah "bahasa program" yang memungkinkan kita membuat halaman web yang bisa ditampilkan dalam browser (Chrome, Firefox, Internet Explorer, Netscape, Opera, dll).

Nah, kini kita mulai dari langkah awal yaitu belajar bahasa HTML.
BELAJAR WEBSITE
Dewasa ini, hampir semua dokumen web dibuat dengan bahasa HTML (Hypertext Mark-up Language). Meskipun anda bisa saja membuat web page (halaman web) tanpa mengerti sedikitpun HTML, Sangat disarankan bahkan nyaris diharuskan, agar anda mengerti bahasa HTML. Untuk itu langkah pertama bagi Anda yang bercita-cita memiliki website sendiri adalah belajar HTML.

HTML (Hypertext Markup Language) adalah bahasa program yang digunakan untuk menulis format dokumen yang dapat digunakan dalam Web. Dengan HTML, teks ASCII (file *.txt) dapat dipoles (di-mark-up) dengan kode-kode tertentu yang disebut tag untuk menjadi dokumen HTML (file *.htm atau *.html). Oleh karena itu, untuk membuat dokumen HTML, anda bisa menggunakan semua program teks editor biasa, mulai dari Notepad hingga Dreamweaver. Untuk mudahnya, kita gunakan program Dreamweaver.
Apa yang dimkasud dengan file HTML?

- HTML merupakan kependekan dari Hyper Text markup Language

- Sebuah file HTML merupakan sebuah file teks yang berisi tag-tag markup

- Tag markup memberitahukan browser bagaimana harus menampilkan sebuah halaman

- File HTML harus memiliki ekstensi htm atau html

- File HTML dapat dibuat menggunakan editor teks yang biasa kamu pakai.
PENGENALAN KODE HTML
>>New >> Basic Page >> HTML , setelah itu atur ke mode Code

disini anda akan menemui tag - tag semacam ini:
(HTML)
(/HTML)
Penjelasan:
Masing-masing baris di atas disebut tag. Tag adalah kode yang digunakan untuk me-mark-up (memoles) teks ASCII menjadi file HTML. Setiap tag diapit dengan tanda kurung runcing.
Ada tag pembuka yaitu (HTML) dan ada tag penutup yaitu (/HTML) yang ditandai dengan tanda slash (garis miring) di depan awal tulisannya.
Tag di atas memberikan faidah bahwa yang akan ditulis diantara kedua tag tersebut adalah isi dari dokumen HTML. Perlu anda ketahui bahwa tag-tag html dapat ditulis dengan huruf besar ataupun huruf kecil. Artinya, penulisan (HTML) atau (html) atau (Html) sama saja hasilnya. Namun perlu selalu diingat bahwa penulisan tag yang salah meskipun hanya satu karakter akan berpengaruh terhadap dokumen HTML anda, bahkan bisa berakibat dokumen HTML anda tidak bisa ditampilkan dalam browser.

Sekarang kita akan beralih pada tag selanjutnya.
(HTML)
(BODY)
(/BODY)
(/HTML)
Isi dari dokumen HTML yang sesungguhnya adalah yang ditulis diantara tag (BODY). Coba tuliskan:
(HTML)
(BODY)
Tulisan ini akan tampak dalam browser by ilmugrafis.
(/BODY)
(/HTML)
Sekarang simpanlah file ini dengan meng-klik menu File lalu Save. Nah, lihatlah hasil karya anda yang pertama dengan menekan F12 disitu akan muncul tulisan "Tulisan ini akan tampak dalam browser by ilmugrafis." tanpa tag HTML. Sekarang anda mungkin mulai mengerti cara kerja HTML dan markup tag, begitulah cara kerjanya, jadi yg muncul di broser hanya tulisan saja sedangkan tagnya hanya merupakan suatu perintah bagi browser untuk menampilkan perintah kita.

Apakah tag BODY fungsinya sekedar penanda tubuh atau isi dari dokumen web? Tidak, dalam tag BODY ini bisa kita sisipkan bermacam-macam atribut yang akan berpengaruh terhadap format atau tampilan halaman web secara keseluruhan. Pada kesempatan ini kita mengambil contoh bagaimana mengubah warna latar belakang dan warna tulisan dari halaman web dengan penambahan atribut ke dalam tag BODY.
(HTML)
(BODY BGCOLOR="yellow" TEXT="red")
Tulisan ini akan tampak dalam browser by ilmugrafis.
(/BODY)
(/HTML)
Simpanlah kembali file ini (klik File lalu Save). Untuk melihat bagaimana hasilnya tekan F12 atau klik tombol Refresh pada browser atau bisa juga dengan menekan tombol F5 pada keyboard. Dengan demikian, browser akan memanggil ulang file yang kini sudah mengalami perubahan. Maka akan tampaklah hasilnya:

Perlu diketahui bahwa penentuan warna pada HTML bisa dengan nama warna (dalam bahasa Inggris) dan bisa pula dengan kode warna. Kode warna ditulis dalam format heksa contohnya seperti #rrggbb.

Ok setelah menguasai tag di atas maka kita lanjutkan ke inspeksi tag HEAD dan TITLE. Di sini terlihat bahwa kita mempunyai tag (HEAD) dan tag (TITLE). Tag HEAD berfungsi untuk mengapit berbagai macam fungsi dan informasi yang berkenan dengan halaman web yang bersangkutan. Pada latihan kali ini, kita memasukkan tag TITLE diantara tag HEAD. Sesuai namanya, tag TITLE ini berfungsi untuk mengapit kalimat yang menjadi judul dari halaman web tersebut. Sekarang mari kita tuliskan judul halaman web ini:
(HTML)
(HEAD)
(TITLE)WEBSITE BUATANKU(/TITLE)
(/HEAD)
(BODY BGCOLOR="yellow" TEXT="red")
Tulisan ini akan tampak dalam browser.
(/BODY)
(/HTML)
Simpan lagi file ini dengan meng-klik File lalu Save. Sekarang kita akan melihat bagaimana perubahannya dalam browser. Lakukan lagi Refresh seperti di atas. Maka anda akan melihat di baris teratas (yang dinamakan Title Bar) dari program browser akan menampilkan judul atau titel dari halaman web anda yaitu: WEBSITE BUATANKU
previewnya kurang lebih seperti ini, disini saya menggunakan browser Firefox:

Alhamdulillah, selesailah latihan pertama Belajar Membuat Website - HTML.
Selamat belajar HTML di Dreamweaver
Sampai ketemu lagi di Tutorial berikutnya
Semoga Bermanfaat ^_^/
Share URL Share the URL of this Tutorial in IM, Email or post in forums

* Klik Link, copy (ctrl + c) dan paste (ctrl + v)
Indahnya Berbagi Via

<> Info dan Kontak Penulis
Johan Felisitas
Tentang Penulis : Lahir di Surabaya 1986, Lulusan D3 Perkantoran Universitas Negeri di Surabaya dan sangat menyukai Sepakbola dan Wisata Kuliner
Motto : Impian Bisa Terwujud Jika Benar-benar kita Inginkan

Penulis dapat dihubungi via:
YM : tomuramaster
Email : johan.felisitas[at]gmail[dot]com
Twitter : www.twitter.com/johanfel

Saya (Penulis) bersedia mematuhi ketentuan dan peraturan di IG
- Tutorial / Artikel ini resmi saya diberikan untuk dipublikasikan di www.ilmugrafis.com
- Kritik, Saran, maupun Pertanyaan seputar Tutorial bisa menghubungi Penulis
Semoga Bermanfaat, Terima kasih


Copy by http://www.ilmugrafis.com

mengedit website menggunakan dremweaver

Pengenalan Dreamweaver dan Layout
Publish: 17 Februari 2009 | Author & Copyright: Johan | Status: FREE tutorial

Karena banyaknya request dari sana sini dan situ aduh pokoknya dari mana - mana tentang web desain dengan Dreamweaver maka saya akhirnya melaunching tutorial Dreamweaver di ilmugrafis rubrik web desain...

Seperti kata Pak Patah eh salah itu nama tetangga saya :) maksudnya Kata PEPATAH "Tak kenal maka tak sayang" oleh karena itu alangkah baiknya bila kita menilik apa itu Dreamweaver?
DREAMWEAVER (dulu milik dari macromedia namun sekarang menjadi milik dari Adobe) adalah software aplikasi desain web visual yang biasa dikenal dengan istilah WYSIWYG — What You See Is What You Get — dalam bahasa sansekerta artinya ( Apa yang kamu lihat akan menjadi seperti apa yang kamu inginkan) masih bingung ya intinya Kita tidak harus berurusan dengan tag-tag HTML untuk membuat sebuah situs karena sudah disiapkan secara instant seperti membuat Table, Membuat Hyperlink, Memasukkan Gambar, termasuk memasukkan Flash Animasi, dll. Dreamweaver tidak hanya dapat digunakan oleh para desainer web, namun juga dapat digunakan oleh programer untuk membangun halaman internaktif karena Dreamweaver mendukung pula PHP, ColdFusion, ASP.NET dan lain-lain. Mantab Bukan!!!


Gambar 1 . Tampilan LogoDreamweaver



Gambar 2 . Tampilan / Layout Dreamweaver


Berikut ini penjelasan untuk elemen-elemen workspace seperti telah tertera pada gambar.
- LEMBAR KERJA DREAMWEAVER adalah tempat di mana Anda dapat membuat halaman web secara visual, kode, atau keduanya.
- INSERT TOOLBAR adalah tempat Anda dapat memasukan image, Flash movie, table, atau elemen lain. Untuk memunculkan panel ini, klik Windows > Insert atau tekan Ctrl-F2.
- PENGATURAN HALAMAN berguna untuk melakukan pengeditan pada suatu elemen di Document Window.
- PANEL GROUP merupakan kumpulan dari panel-panel Dreamweaver.

Tunggu Edisi Selanjutnya...

Semoga Bermanfaat
Share URL Share the URL of this Tutorial in IM, Email or post in forums

* Klik Link, copy (ctrl + c) dan paste (ctrl + v)
Indahnya Berbagi Via

<> Info dan Kontak Penulis
Johan Felisitas
Tentang Penulis : Lahir di Surabaya 1986, Lulusan D3 Perkantoran Universitas Negeri di Surabaya dan sangat menyukai Sepakbola dan Wisata Kuliner
Motto : Impian Bisa Terwujud Jika Benar-benar kita Inginkan

Penulis dapat dihubungi via:
YM : tomuramaster
Email : johan.felisitas[at]gmail[dot]com
Twitter : www.twitter.com/johanfel

Saya (Penulis) bersedia mematuhi ketentuan dan peraturan di IG
- Tutorial / Artikel ini resmi saya diberikan untuk dipublikasikan di www.ilmugrafis.com
- Kritik, Saran, maupun Pertanyaan seputar Tutorial bisa menghubungi Penulis
Semoga Bermanfaat, Terima kasih

Rekomendasi Resmi ilmugrafis.com
Video Tutorial Metode Belajar Cepat dan Mudah:

- Dijamin Bagus dan Berkualitas Bagi Pemula Maupun Mahir
- Video Tutorial ini BAHASA INDONESIA
- Lebih Murah dan Praktis
- Keunggulan: Tinggal Lihat - Praktek - Mahir
- add by ilmugrafis.com -

Video Tutorial Web DESIGN Dreamweaver + Photoshop

Mendesain sebuah web ternyata tidak sulit seperti yang dibayangkan. Anda tidak perlu lagi harus mempelajari bahasa-bahasa pemrograman seperti yang dilakukan saat terdahulu...
Selengkapnya...
________________________________________
CD Video Tutorial Membuat Toko Online Joomla + Virtuemart

Untuk membuat dan mengelola toko online secara mandiri, tidak perlu menguasai bahasa pemrograman yang memusingkan. Ada banyak aplikasi toko online siap pakai yang bisa kita gunakan
Selengkapnya...
________________________________________
CD Video Tutorial Joomla 1.5

Video Tutorial Bahasa Indonesia berisi Panduan Penggunaan Joomla 1.5, Content Management System adalah Sebuah sistem yang digunakan untuk mengatur isi website dengan baik dan mudah
Selengkapnya...
________________________________________
CD Tutorial Pemrograman Website dengan PHP - Web Programming

Kabar gembira buat anda yang ingin membuat website dinamis dengan cms buatan sendiri memakai Pemrograman PHP dan Aplikasi PHP karena kini telah hadir CD tutorial Web Programing yang akan mengajarkan dari Pemula hingga menjadi Mahir membuat Website dinamis...
Selengkapnya...



Aturan dan Kebijakan di IG
• Semua Konten di ilmuGRAFIS bertujuan sebagai media pendidikan dan pembelajaran, oleh karena itu dimohon tidak menyalahgunakan informasi dan pengetahuan yang diperoleh untuk hal - hal yang merugikan diri sendiri maupun orang lain
• Kami melakukan segala upaya untuk memastikan bahwa informasi di ilmuGRAFIS tersaji seakurat dan sebaik mungkin. Anda bisa melaporkan jika ada konten ataupun informasi yang tidak berkenan di tab kontak kami
• Jika anda ingin memposting ulang atau mengcopy konten baik itu Tutorial maupun Artikel dari ilmuGrafis maka dimohon untuk mencantumkan sumber dari Artikel dan Tutorial tersebut yaitu ilmuGrafis.com serta dilarang mengubah maupun mengedit ulang tanpa ijin dari penulis yang bersangkutan


copy by www.ilmugrafis.com