Showing posts with label Desain. Show all posts
Showing posts with label Desain. Show all posts

Home » Posts filed under Desain

Friday, July 1, 2011

Belajar membuat Website - Basic HTML

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
tutorial dreamweaver
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:
tutorial dreamweaver
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:
tutorial dreamweaver
Alhamdulillah, selesailah latihan pertama Belajar Membuat Website - HTML.
Selamat belajar HTML di Dreamweaver
Sampai ketemu lagi di Tutorial berikutnya
READ MORE - Belajar membuat Website - Basic HTML
Posted by fghtfhyju at 8:25 PM 0 comments
Labels:

Membuat Logo Apple Computer Inc

Siapa yang tidak pernah makan Apel? eh salah maksud saya siapa yg tidak mengenal Apple, Inc. (sebelumnya bernama Apple Computer, Inc.) perusahaan Silicon Valley berbasis di Cupertino, California yang bergerak dalam bidang teknologi komputer. Apple berperan dalam revolusi komputer pribadi pada tahun 1970-an dengan produknya Apple II dan memajukannya sejak tahun 1980-an hingga sekarang dengan Macintosh. Apple terkenal akan perangkat keras ciptaannya, seperti iMac, Macbook, perangkat pemutar lagu iPod, dan telepon genggam yang saat ini banyak menuai kontroversi yaitu iPhone 4 karena "Antena"nya bermasalah. Beberapa perangkat lunak ciptaanya pun mampu bersaing di bidang kreatif seperti penyunting video Final Cut Pro, penyunting suara Logic Pro dan pemutar lagu iTunes yang sekaligus berfungsi sebagai toko lagu online.

Cukup dengan sejarah Apple, mari kita lanjutkan dengan Tema kita yaitu Membuat Logo Apple. Tutorial kali ini saya mencoba membuat logo apple dengan gradasi-gradasi sederhana, transperancy dan beberapa tools yang lain, perlu diketahui, disini kita tidak mementingkan hasilnya, tapi bagaimana mengembangkan tehnik dasar untuk membuat logo yang sedikit sulit. Ada beberapa langkah yang memang harus saya Skip karena sudah ada pada koleksi tutorial sebelumnya di ilmugrafis.com juga dan karena saya tidak mau memperpanjang dan memperlebar tutorial ini karena mengulang-ulang langkah yang sudah tertutorialkan, bukan begitu? Jadi mohon bagi yang benar-benar belum mengenal tools Corel, silahkan pelajari dan kenali tools dari dasar pada Coreldraw Dasar.

Langkah-langkahnya :

1. Buka corel seperti biasanya lalau tekan Ctrl+N


2. Buat garis tegak lurus dengan menggunakan Bezier Tools, garis ini yang akan kita jadikan mirror.


3. Lalu buat bentuk seperti dibawah ini dengan menggunakan Bezier Tools lagi.
image ilmugrafis
Perhatikan bidang yang beroutline merah, dan yang hitam adalah Mirror yang tadi kita buat pertama kali. Setelah anda buat bangun seperti itu, lalu klik Shape Tool, kemuadian seleksi semua node yang terlihat pada bangun beroutline merah, klik convert to curve(ini yang saya maksud skip, ditutorial sebelumnya telah ada penjelasan untuk langkah ini, mohon dibaca!) kemudian sesuaikan curvenya menjadi seperti gambar dibawah ini.
image ilmugrafis


4. Kemudian klik Smart Fill Tool image ilmugrafis
Setelah itu klik pada bagian dalam object beroutline merah, maka akan jadi seperti ini
image ilmugrafis
Lalu copy mirror bagian yang berwarna biru gelap diatas
image ilmugrafis
Seleksi kedua object diatas lalau Klik Weld (Cara inipun sudah pernah ada di ilmugrafis.com, jadi mohon kesabarannya untuk bisa)


5. Kemudian buat lingkaran seperti pada gambar dibawah ini
image ilmugrafis
Seleksi lingkaran outline merah >> Tekan Shift (Tahan) >> Klik object berwarna biru >> Klik Trim (Trim Tools sebelumnya telah saya jelaskan juga di tutorial lain.) lalu warnai dengan warna Biru Cerah (light blue) maka akan menjadi seperi ini
image ilmugrafis


6. Kemudian mari kita buat daun untuk apple ini, Klik Bezier tools lalu buat object diatas apple sebelah kanan seperti pada gambar dibawah ini.
image ilmugrafis
Dengan menggunakan Shape Tool, ubah object outline merah diatas menjadi seperti gambar dibawah ini
image ilmugrafis
Warnai dengan Light Blue seperti object pertama.


7. Langkah selanjutnya adalah membuat gradasi-gradasi yang telah saya singgung diatas tadi. Pertama kita akan mewarnai object applenya, buat copy lalu perkecil didalam object apple tersebut, perhatikan outline merah apda gambar dibawah ini
image ilmugrafis
Lalu warnai dengan warna putih, kemudian klik Transperancy Tool, klik warna putih lalu transperancykan dari bawah ketas, seperti pada gambar dibawah ini
image ilmugrafis
Saya kira sayapun tidak harus menjelaskan tentang transperancy tool karena memang di tutorial lain sudah pernah dibahas.


8. Klik Bezier Tool lalu buat garis seperti pada gambar dibawah ini
image ilmugrafis
Lalu dengan shape tool ubah menjadi seperti pada object kanan pada gambar diatas. Klik Smart Fill Tool, klik diatas Outline merah, maka akan menjadi seperti pada gambar dibawah ini.
image ilmugrafis
Lalu beri warna putih kemudian Transperacykan dengan arah kebalikan dari yang pertama, perhatikan gambar diatas.


9. Setengah jadi, mari kita gradasi daun dari Apple ini. Perhatikan gambar dibawah ini.
image ilmugrafis
Gambar 1, buatlah Copy seperti yang kita lakukan diatas tadi, gambar 2, warnai dengan putih lalu Transperancykan seperti gambar 3. Selanjutnya Klik Bezier Tools lalu buat garis, perhatikan kembali gambar dibawah ini.
image ilmugrafis
Gambar diatas sudah cukup menjelaskan, karena langkahnya sama seperti apa  kita lakukan pada object pertama tadi.


10. Jika kita lihat secara keseluruhan, ini sudah jadi, tapi mari kita buat variasi. Seleksi kedua background object yang berwarna biru tadi (Apple dan daun) Object lalu tekan Ctrl+G kemudian Ctrl+F9 (Contour) lalu set seperti pada gambar dibawah ini
image ilmugrafis
Klik Apply lalu sudah, jadi tinggal bagaimana kita mengkreasikannya, seperti yang saya buat dibawah ini.
image ilmugrafis
[klik gambar untuk memperbesar tampilan]
Apple by Ervyn "Bie" Jeleck
Demikian Tutorial Coreldraw membuat logo Apple gan, semoga bermanfaat..... Merdeka... :D
READ MORE - Membuat Logo Apple Computer Inc
Posted by fghtfhyju at 8:23 PM 0 comments
Labels:

Tutorial Desain Web untuk Pemula

Kata-kata Web sebenarnya penyederhanaan dari sebuah istilah dalam dunia komputer yaitu WORLD WIDE WEB yang merupakan bagian dari tekhnologi Internet. World wide Web atau disingkat dengan nama www, merupakan sebuah sistem jaringan berbasis Client-Server yang mempergunakan protokol HTTP (Hyperteks Transfer Protocol) dan TCP/IP (Transmisson Control Protocol / Internet Protocol) sebagai medianya.  Karena kedua sistem ini sedemikian erat hubungan nya, maka untuk saat ini sulit untuk membedakan antara HTTP dengan WWW, mungkin Anda punya pengertian yang lebih spesifik mengenai kedua istilah tersebut..?, Bila demikian berbagilah dengan yang lain melalui SSC Forum.
Pada awalnya Internet atau WEB hanya dipergunakan untuk kepentingan Militer yaitu suatu tekhnologi yang dipergunakan untuk mengirimkan pesan rahasia melalui satelit. Akan tetapi lama kelamaan tekhnologi tersebut akhirnya meluas, dan bahkan Internet pada saat ini sudah sama populernya dengan Telephone. Informasi yang dikirimkan lewat Internet dapat diakses keseluruh dunia hanya dalam hitungan menit bahkan detik. Sehingga tekhnologi ini menjadi sangat populer dan cepat sekali perkembangan nya. Boleh dikatakan saat ini Internet sudah tidak menjadi istilah yang asing lagi ditelinga. Suatu Informasi yang dikirimkan lewat Internet dapat berupa Teks, gambar maupun multimedia sehingga Internet juga dimanfaatkan oleh perusahaan-perusahaan untuk mempromosikan Produk-produknya dengan cepat dan mudah.

Informasi dari Internet dapat diakses
Keseluruh dunia hanya dalam hitungan detik.
Bahasa dasar dari pemrograman web yaitu HTML (Hyperteks Markup Language). Jadi sebelum Anda mempelajari bahasa pemrograman Internet yang lain seperti, PEARL, PHP, JAVASCRIPT, ASP dan lain sebagainya. Anda diharuskan menguasai dahulu teknik-teknik dasar pemrograman web yaitu HTML.
Untuk mempelajari HTML tidaklah begitu sulit, Karena HTML hanyalah sebuah bahasa yang berbasis teks dengan perintah-perintah yang mudah di ingat dan dimengerti oleh kita. Sehingga Anda tidak memerlukan sebuah Compiler (penerjemah bahasa pemrograman ke bahasa mesin) seperti bahasa-bahasa pemrogaman yang lain. Anda cukup menuliskan program-program HTML dengan teks editor apa saja seperti NOTEPAD atau yang sejenisnya, kemudian file itu Anda beri akhiran HTM atau HTML dan dijalankan atau dipanggil melalui sebuah program browser seperti, Internet Explorer, FireFox, Opera, Netscape dan sebagainya. File tersebut langsung diterjemahkan dan ditampilkan di monitor melalui program browser tersebut.
S E B U A H     P E R M U L A A N
Anda tentunya sudah tidak sabar lagi untuk segera mempelajari dasar-dasar design web, dan enggan untuk membaca pengantar-pengantar yang membosankan. Bila demikian OK kita langsung saja pada pokok bahasan kita yaitu mempelajari teknik dasar pemrograman web dengan HTML, yang tentunya bila dasar-dasar HTML ini sudah dikuasai akan mudah mempelajari Bahasa pemrogrman web yang lainnya yaitu JavaScript, PHP, Perl, ASP, Ruby dan sebagainya.
Sekarang siapkan Program text editor Anda, bila Anda pengguna WINDOWS jalankan program Notepad atau klik kanan area kosong pada dekstop Komputer Anda pilih NEW -- TEXT DOCUMENT maka file newtext document.txt akan terbentuk dengan sendirinya. Klik dua kali file itu maka Anda akan masuk di text editor dari Notepad dan siap untuk mengetikan perintah-perintah dari program HTML.
Bila Anda pengguna LINUX, OS2, MACHINTHOS dan lainnya, Anda dapat menjalankan program text editor yang ada pada Operating System tersebut. atau Anda Dapat mendownload program NOTEPAD++ dari http://www.sourceforge.net, Link untuk mendownload NOTEPAD PLUS ada di pilar kiri situs ini. NOTEPAD PLUS ini bisa juga berjalan di WINDOWS, dan sangat dianjurkan oleh saya untuk memakai NOTEPAD PLUS. sebab program ini selain FREEWARE juga mempunyai fasilitas dan perlengkapan yang lebih baik dari teks editor yang disediakan oleh Operating system.
PROGRAM PERTAMA

OK saya anggap anda sudah siap untuk mengetikan program-program HTML di text editor. Perintah HTML diawali dengan menuliskan tag/perintah <html> dan diakhiri oleh tag/perintah </html>. Penulisan perintah boleh memakai huruf kecil maupun huruf besar, tak akan ada pengaruhnya. Akan tetapi untuk memudahkan sebaiknya Anda gunakan huruf kecil saja.   Sekarang Anda ketik perintah dibawah ini di text editor Anda.
<html>
<body>
Ini adalah program HTML pertamaku.
</body>
</html>
Simpan file tersebut dan beri nama file tersebut dengan nama latihan1.html, lalu jalankan program tersebut dengan browser Anda, kemudian Anda lihat hasilnya, bila Anda menggunakan NOTEPAD++ Anda dapat memilih perintah RUN kemudian pilih Launch in IE bila Anda memakai Internet Explorer sebagai browser Anda, Pilih FireFox bila Anda menggunakan FireFox sebagai browser Anda, atau pilih browser yang Anda inginkan untuk menjalankan file tersebut.
Mudah..., Hmm memang mudah. Anda dapat membuat teks diatas lebih panjang lagi kalau Anda mau. Pada Latihan diatas, terdapat perintah <body> dan </body>, peritah yang ada diantara tag itu adalah content atau isi yang ditampilkan di browser. sedangkan tag <html> dan </html> hanya sebagai penanda bahwa file tersebut adalah file HTML, bisakah tag <html> dan tag </html> dihilangkan..?. Hmm.. Bisa saja. bahkan tag <body> dan tag </body> juga bisa Anda hilangkan. Kalau tidak percaya coba hapus semua tag yang ada pada latihan1 diatas, kemudian Anda simpan file tersebut kembali setelah itu Anda jalankan di Browser. Wow.., ternyata bisa juga toh. Lalu untuk apa perintah tersebut dipasang kalau tanpa perintah itu juga hasilnya sama.?
Dalam dunia internet terdapat kesimpang siuran dalam hal kompatibelitas antara operating system yang satu dengan yang lainnya, dan antara browser yang satu dengan yang lainnya. Nah karena masalah kampatiblitas inilah maka ada suatu badan atau biro yang memberikan aturan mengenai kompatibelitas dalam penulisan kode-kode HTML Biro tersebut di dibentuk dengan nama W3C. (World Wide Web Consortium), Biro ini yang menentukan apakah suatu document HTML itu valid atau tidak valid. Selain itu biro ini mempunyai hak untuk mengeluarkan aturan mengenai kode-kode HTML.
Jadi Walaupun pada dasarnya program browser mengerti dan tetap menjalankan file HTML tanpa adanya tag / perintah <html>, </html>, <body> dan </body> , mengingat masalah kompatibelitas ini penting jadi yah tetap saja Anda harus memulai sebuah file HTML dengan tag <html>, kemudian mengakhiri file HTML dengan tag </html>.
Mengenai W3C ini saya pribadi masih sedikit bingung dan sedikit agak ragu, masalah nya begini ;   Pada suatu waktu saya mencoba mengecek file HTML yang saya buat melalui W3C ini, dengan mengirimkan file saya ke http://www.w3c.org/. setelah saya kirimkan file saya ke situs nya W3C tersebut, kemudian didapatkan hasil dari validasi file yang saya kirimkan tersebut. pada hasil result tersebut, didapat bahwa file yang saya kirimkan ke W3C banyak terdapat error. Disana dituliskan baris-baris File HTML yang saya kirimkan tersebut beserta error result nya. Setelah mengetahui hal itu saya mencoba mengecek kembali file HTML saya dan saya perbaiki menurut ketentuan W3C tersebut kemudian saya kirimkan lagi. Setelah dikirimkan lagi untuk yang kedua kalinya, hasil result nya juga sama masih banyak yang error tetapi sedikit berkurang.
Saya merasa bingung dan sekaigus heran. Padahal saya sudah mengecek semua tag-tag file HTML yang saya buat itu berdasarkan ketentuan yang diberlakukan oleh W3C tersebut, bahkan saya sempat menggunakan sebuah program utility untuk HTML yaitu HTML TIDY yang saya download dari gudang Open Source http://www.sourceforge.net, setelah di cek oleh program tersebut ternyata file yang saya buat valid dan memenuhi standar W3C, tetapi begitu saya kirimkan kembali file tersebut masih saja terdapat error. Karena penasaran kemudian saya mencari situs-situs yang memasang logo W3C pada situsnya. Konon bila sebuah situs memasang logo tersebut Halaman-Halaman Web nya telah mendapat pengakuan dari biro tersebut. Iseng-iseng saya lihat source file nya. Dimanakah gerangan kesalahan saya tersebut, dengan membandingkan dengan source file dari situs tersebut. Hmm..., setelah saya bandingkan secara teliti ternyata toh tak ada yang istimewa dari situs tersebut, perintah-perintah HTML nya sama saja dengan yang saya buat.
Lebih iseng lagi saya mencoba mengirimkan source file yang saya download dari situs tersebut ke situsnya W3C untuk mengecek validasinya, dan Wooooow..!, suatu hal yang sudah saya duga sebelumnya, file HTML tersebut pun masih terdapat error result dari W3C, Nah Loh..!. Bagaimana mungkin situs tersebut berani memasang logo tervalidasi oleh W3C, bila file-file HTML nya pun masih terdapat error result dari W3C. Masih penasaran , Kemudian saya download source file dari situsnya W3C sendiri.., kemudian saya kirimkan kesitus nya sendiri untuk divalidasi. Dan.... Senjata makan Tuan..., file nya juga dilaporkan masih terdapat error result. Wew.. wong file dari situsnya sendiri saja masih ada error result, apalagi file orang lain, begitu pikir saya berprasangka buruk. Entahlah.. mengapa bisa demikian, ada yang tahu..?, tolonglah sekali lagi berbagi di SSC Forum Mengenai hal ini. Ok mari kita lanjutkan materi kita, untuk sementara lupakan saja cerita histeris ini, mungkin nanti Akan saya Lanjutkan lagi mengenai bug atau kesalahan apa dan bagaimana solusinya pada akhir cerita saya nanti.
Sampai dimana yah tadi.., Oh iya mengenai tag <html> dan </html>, Jadi pada umumnya sebuah file HTML mempunyai urutan-uratan perintah sebagai berikut:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 Perintah ini sebagai penanda bahwa dokumen yang kita buat berdasarkan aturan yang dikeluarkan oleh W3C dan sesuai dengan perintah HTML 4.0. Perintah ini wajib Anda tuliskan diatas file HTML bila Anda ingin mem validasi kan file Anda ke W3C. Tanpa adanya perintah ini file HTML Anda dijamin akan error 100% bila dikirimkan ke W3C.
<html>
<head>
 Isi dari Header atau pembuka yang berisi tag-tag berikut:
<title> Judul Halaman Web </title>
<meta   name="author"   content="Nama programer atau pembuat file HTML">
<meta   name="description"   content="Keterangan mengenai isi dari halaman Web">
<meta   name="keywords"   content="Kata Kunci yang ada pada Halaman Web">
 Dan sederetan perintah META lainnya yang akan dibahas nanti.
<link   rel="stylesheet"   type="text/css"   href="lokasi file CSS">
 Bila Anda memakai file CSS External perintah diatas dituliskan disini
Untuk perintah CSS (Cascading Style Sheet) akan dibahas nanti.
</head>

<body>
 Isi dari Halaman Web yang akan ditampilkan oleh browser.
</body>
</html>
Perlu diketahui bahwa, program HTML tidak seperti Bahasa pemrograman yang lain yang mengenal perintah JUMP (melompat dari perintah yang satu keperintah yang lainnya), jadi program HTML akan dikerjakan oleh Browser dari atas kebawah dan tidak bisa balik lagi keatas. Dan juga dalam pembuatan file HTML sedapat mungkin hindari karakter-karakter yang merupakan ciri khas dari perintah-perintah HTML seperti, karakter < , > dan  ; .
Sekarang kita kembali pada latihan1.html yang telah kita buat sebelumya tadi. Pada file latihan1.html yang telah Anda buat di muka tadi hanya bentuk perkenalan, setelah Anda mengetahui urut-urutan perintah HTML sekarang coba Anda rubah file latihan1.html tadi menjadi seperti dibawah ini.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Latihan Membuat File HTML</title>
<meta name="author"   content="Malih Tongtong">
<meta name="description"   content="Uji coba pembuatan file HTML yang sederhana">
<meta name="keywords"   content="Latihan,HTML,Malih,berjalan,baik,atau,tidak">
</head>

<body>
Ini adalah program HTML pertamaku.
</body>
</html>
Setelah Anda simpan file diatas, sekarang Anda coba lagi menjalankan nya dengan browser. Apakah Anda melihat perbedaan nya..?, Bila Anda jeli tentunya Anda akan melihat sedikit perbedaan pada tampilan browser Anda, dimana..?.

Tampilan dari file latihan1.html sebelum mengikuti aturan
Sudah menemukan perbedaan nya..?, yah memang ada sedikit perbedaan tampilan pada browser antara file yang pertama kali dibuat dengan yang terakhir ini. Perbedaan nya ada pada bagian atas browser Anda. Pada file pertama sebelum diberi tag <title> , tulisan pada bagian atas browser hanya menyatakan lokasi dari file latihan1.html ditaruh. Sedangkan pada file yang terakhir dibuat setelah memasukan perintah <title> , maka tulisan diatas browser menjadi kata-kata yang dituliskan diantara tag <title> dan </title>. Pada contoh diatas tulisan nya menjadi Latihan Membuat File HTML. Anda dapat merubah judul Halaman ini sesuka hati Anda, yang penting judul tersebut harus ada diantara tag <title> dan </title>. serta penulisan perintahnya harus ada diantara tag <head> dan </head>.
Arti dari perintah-perintah META

Setelah Anda mengenal perintah <title> serta </title> dan mengetahui fungsinya, selanjutnya mungkin Anda akan menanyakan arti dari perintah <meta> . Pengertian META itu sendiri dalam HTML dapat berarti perintah yang tersembunyi, perintah yang menjadi acuan, perintah yang menjadi standar baku, dan sebagainya, sehingga bila diterjemahkan dalam konteks bahasa sedikit sulit menjelaskannya makna dari kata META ini.
Perintah meta dibedakan dari nama (name) yang tertulis, dan isi/arti dari perintah itu (content). Jadi perintah META harus mempunyai atribut NAME dan atribut CONTENT dalam penulisannya. Adapun nama-nama dari perintah META yang sering dipergunkana oleh kebanyakan situs antara lain:
author : Atribut yang menyatakan tentang pembuat atau programer file tersebut.
audience :
Atribut yang digunakan untuk mengaktifkan pilihan multimedia yang ada pada halaman web itu. Biasanya isi content dari perintah meta ini cuma kata ALL atau DISABLE
copyright : Atribut yang menyatakan tentang hak cipta dari file tersebut.
content-type :
Berbeda dengan perintah meta yang lain, perintah meta ini digunakan sebagai pemberitahuan kepada browser tentang standar baku dari format bahasa dan kode yang digunakan, beberapa standar kode yang berlaku antara lain : ANSI, iso-8859-1, UTF-8 dan sebagainya. Penulisan perintah meta ini boleh dikatakan wajib bila kita menggunakan karakter-karakter tertentu yang akan di tampilkan di browser misalnya karakter huruf Arab, jepang, china, dsb. contoh format penulisannya sebagai berikut :
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
description :
Atribut yang digunakan untuk menerangkan isi dari suatu halaman web atau keterangan mengenai maksud dan tujuan situs itu sendiri bisa juga sebagai penjelasan dari suatu produk dan sebagainya.
generator :
Atribut yang digunakan sebagai pemberitahuan bahwa file ini dibuat oleh suatu software atau program yang disebutkan di dalam isi content.
keywords :
Atribut yang digunakan sebagai kata kunci untuk pencarian kata pada file tersebut, masing-masing kata kunci dipisahkan dengan tanda koma.
robots :
Atribut yang digunakan sebagai pemberitahuan kepada Search Engine seperti GOOGLE, agar semua kata yang akan di index mengikuti link-link yang ada pada halaman tersebut, isi content dari perintah meta ini hanya kata ALL yang berarti Semuanya.
revisit-after :
Atribut yang digunakan sebagai pemberitahuan kepada Search Engine seperti GOOGLE, agar kembali mengecek dan mengindex halaman web ini dalam waktu yang ditentukan. isi content nya menunjukan lamanya waktu, Contoh : < meta name="revisit-after"  content="2 days"> , untuk menyatakan 2 hari.
Masih banyak lagi perintah-perintah dari META ini, daftar diatas adalah beberapa perintah META yang sering dipergunakan oleh kebanyakan situs-situs terkenal. Perintah META boleh dituliskan boleh juga tidak, saya hanya menyarankan sebaiknya perintah meta itu tidak dituliskan semuanya karena akan sedikit memperlambat akses dari pembacaan file. Seperti yang telah diberitahukan pada paragraf diatas, bahwa program HTML dikerjakan oleh browser mulai dari bagian atas file secara ber-urutan sampai ke bawah. Sehingga semakin banyak perintah META yang ditulikan diatas maka akan semakin lama juga akses pemuatan file tersebut di browser.
READ MORE - Tutorial Desain Web untuk Pemula
Posted by fghtfhyju at 8:20 PM 0 comments
Labels:
Subscribe to: Posts (Atom)

JADWAL WAKTU SHALAT

 

Minibox 3 Column Blogger Template by James William at 2600 Degrees | Modifica