16 July 2011

Membuat File HTML (Website) dengan CorelDRAW

Untuk kesempatan kali ini kita mengulas cara membuat file HTML (Hyper Text Markup Language) yang sederhana dari desain yang kita buat dengan CorelDRAW, sehingga dapat dipublikasikan ke alamat WWW (World Wide Web) di Internet, disarankan Mas Bro sekalian  menggunakan CorelDRAW X5, karena tutorial ini aku menggunakan CorelDRAW X5, sebab kalau Mas Bro sekalian menggunakan versi dibawahnya ada kemungkinan langkah-langkah dan kotak dialognya beda sehingga Mas Bro mungkin mengalami kesulitan untuk memulainya.

Ok.. ini agak serius dikit !!! ,,,,, kita asumsikan HARDDISK komputer kita adalah server internet, ikuti langkah2 sebagai berikut:

1. Kita buat sebuah desain dengan 3 halaman yang berisi object : Text Paragraph, Text Artistic, Image Bitmap, seperti gambar dibawah ini (ini hanya contoh, untuk desain terserah kreasi sampeyan pokoknya ada ke 3 unsur object seperti diatas)






2. Selanjutnya  pemberian nama pada halaman langkahnya; satu persatu klik kanan pada Page > kemudian pada kotak dialog Rename Page isikan nama halaman contohnya > page1 = Belajar CorelDRAW (yang nantinya akan menjadi homepage,  page2 = Belajar CorelDRAW : Halaman1,  page3 =  Belajar CorelDRAW : Halaman2


 


3. Selanjutnya kita lakukan perubahan material dengan Convert To Bitmap pada Text Artistic (seperti tulisan Home, Watermark tulisan Belajar CorelDRAW) dan untuk Paragraph Text, Klik Text > Make Text HTML Compatible, seperti gambar dibawah






4. Langkah selanjutnya kita membuat Link (tautan) caranya klik kanan pada object yang akan di beri link (bisa object bitmap atau text dengan di blok) > pilih Internet Link dan Mas Bro atur sendiri halaman mana yang akan di beri link.





Contoh paragraph text yang diberi link




Contoh image Bitmap yang di beri link







5. Kemudian langkah terakhir; pada menu File pilih > Export HTML > klik OK...... maka file HTML kita sudah jadi dan siap publish.....





Maka kalau langkah sampeyan benar hasil direktori-nya/folder-nya seperti gambar dibawah ini, kemudian coba double klik pada salah satu file HTML  yang sudah kita buat, maka akan tampil pada Broswer kita dengan tampilan selayaknya Website.........



Untuk Contoh bisa download file HTML berikut;

DOWNLOAD




Pengelola Blog

Zainoel Arifin Isa'i : Penulis Blog. Ketika aku tidak nongkrong di warung kopi atau menyusuri hutan atau juga mendaki gunung, aku sibuk menjadi tukang desain lepas yang bermarkas di sudut kamar belakang rumah di daerah pelosok desa terpencil lereng Gunung Arjuno.
Machfudz Arif : Teknisi Blog. Pekerjaan sebagai Web and Mobile App Developer yang bermarkas di Lembah Tlogo Krabyaan di sebuah dusun yang dikelilingi perbukitan nan elok dan berudara segar.

29 comments:

  1. numpang save gan
    artikel bgs kabeh

    ReplyDelete
  2. gan,saya sdh desain website lewat coreldraw X5, setelah saya export html.. dan saya buka lewat browser mozila kenapa posisi web nya gak di tengah??
    gimana pengaturan posisi yang benar.. tolong di jawab !

    ReplyDelete
    Replies
    1. sampeyan buka kodenya dengan apa saja... dengan notepad juga bisa... pada DIV STYLE="position: absolute; left: 0px; top:0px; dst...... rubah dengan DIV STYLE="margin:0 auto; dst...... maksudnya margin:0 auto; adalah untuk memposisikan di tengan browser kita..

      Delete
    2. maksudnya yang dirubah hanya yg terlihat itu saja yg dst...... tidak dirubah lo masbro.. hehehe sory..

      Delete
  3. sangat membantu nih tutorialnya buat newbie seperti saya

    ReplyDelete
  4. Tutorialnya oke banget, dan dengan sangat ikhlas di bagikan, bahkan tidak harus menyebut sumber...wah hebat tenan Mas Bro!

    ReplyDelete
  5. @Anonymous:di buat tabel aja guys...baru di masukan file dari Corel

    ReplyDelete
    Replies
    1. ngapain musti susah2 buat tabel segala bro.. lawong ini html sudah jadi kok.. sampeyan hanya menambahkan meta tag untuk SEO dan beberapa style CSS saja sudah jadi website..

      Delete
  6. terima kasih gan, banyak sekali pengetahuannya, terima kasih atas share ilmunya.

    ReplyDelete
  7. gan, ane dh buat pkai corel, tpi pas udh di export menjdi html, file nya tidak terpisah.,.
    atau memang kyak gitu ya.,.,?

    ReplyDelete
    Replies
    1. file terpisah tapi dalam satu folder yang merupakan satu paket website, apabila mau nambah halaman, sampeyan harus edit semua halaman untuk menambah tombol tautan/link

      Delete
  8. hmm istimewah gan ,,, makasi yak nambah ilmu bener nie

    http://ismaelleather.tk/

    ReplyDelete
  9. mas... saya pake corel draw x6.
    kok pas saya coba ngasih link ke gambar bitmap , pas udah saya export ke HTML kok gak berpengaruh, tapi kalo ngasih link ke text malah bisa berpengaruh ke file htmlnya ...
    kenapa ya ...?

    ReplyDelete
  10. terima kasih telah membagikan ilmunya. semoga jadi amal saleh.

    ReplyDelete
  11. Belum punya masternya X5, musti download dulu berarti ya....
    Makasih-makasih!

    ReplyDelete
  12. Makasih mas, buat tambahan ilmunya.. Saya masih pemula dalam hal disain

    ReplyDelete
  13. setelah export html nya, dimana melihat hasilnya

    ReplyDelete
  14. terimakasih kang atas tutornya semoga amal dan ilmunya bertambah

    ReplyDelete
    Replies
    1. di mozilla, IE, opera, crome bisa... atau di klik enter atau dobel klik file tersebut, maka akan terlihat hasilnya.

      Delete
  15. kang apakah ini bisa di pakai di blogger, maksud saya templatenya di upload dijadikan tema blogger?? maaf newbie (-/\-)

    ReplyDelete
  16. gan mau tanya kenapa di coreldraw x3 gak ada export html . itu pake apa yah supaya ada. terimakasih artikelnya sangat bermanfaat sekali gan.

    ReplyDelete
  17. mau tanya mas kenapa fontny tidak bs dirubah ya yang paragraf q sdh ganti jadi font arial.dia waktu dibuka dibrowser mozila tetap jadi font times newroman mohon bantunany trima ^

    ReplyDelete
  18. thanks Master sudah ane coba ternyata berhasil 100% :D :v

    ReplyDelete
  19. A very nice guide. I will definitely follow these tips. Thank you for sharing such detailed article. I am learning a lot from you.
    school signs uk

    ReplyDelete
  20. kalau caranya agar responsive websitenya gimana caranya mas?

    ReplyDelete

Berkomentarlah yang bijak, iklan/spam langsung dihapus