Home Hasil penelusuran untuk bahasa-pemrograman-untuk-membuat-aplikasi-website.html
CARA Membuat Website Sendiri Mudah: Langkah dasar yang harus anda pelajari

CARA Membuat Website Sendiri Mudah: Langkah dasar yang harus anda pelajari

      Comment   
CARA Membuat Website Sendiri Mudah: Langkah dasar yang harus anda pelajari - Website adalah salah satu teknologi yang sangat populer di era teknologi informasi saat ini, adanya teknologi ini tidak lepas dari keberadaan teknologi internet, yaitu teknologi jaringan internasional yang menghubungkan komputer di seluruh dunia, salah satu teknologi yang menggunakan teknologi internet yang paling pesat perkembangannya dan banyak digunakan saat ini adalah website, yaitu sekumpulan halaman informasi yang disediakan melalui jalur internet sehingga bisa diakses di dimanapun dan kapanpun di seluruh dunia selama terkoneksi dengan jaringan internet.

Website merupakan sebuah komponen yang terdiri dari teks, gambar, suara animasi sehingga menjadi media informasi yang menarik untuk dilihat oleh orang lain. sedangkan yang berperan memfasilitasi antara internet dengan pengelolaan halaman website adalah  aplikasi web. halaman yang terdapat dalam website lebih kita kenal dengan sebutan web page sedangkan aplikasi yang mengelola web page adalah aplikasi web. Aplikasi Web adalah aplikasi yang hanya dapat berjalan dengan menggunakan bantuan browser, browser adalah aplikasi desktop untuk menampilkan web page atau halaman situs yang dikelola oleh aplikasi web, contoh browser yang saat ini populer yang biasa kita pakai sehari-hari untuk berselancar diinternet diantaranya adalah internet explorer, mozila firefox, google croome, opera dan browser-browser yang lainnya.

Bagaimana cara membuat website

Untuk membuat halaman website baik itu gratis maupun berbayar, dengan tujuan yang hendak dicapai sebenarnya ada beberapa teori yang harus dipelajari, yang paling pokok yang harus kita pelajari adalah bahasa pemrograman web, untuk pemula barangkali akan sedikit membingungkan, namun jika kita hendak membuat website sendiri mau tidak mau kita harus menguasai bahasa pemrograman web tersebut, dengan menguasainya kita bisa membuat halaman situs atau website apapun bentuknya, dan apapun tujuannya, baik itu halaman website sederhana untuk tujuan membuat website sekolah, membuat website toko online atau website lainnya baik itu resmi ataupun tidak resmi, apapun itu bisa kita buat. yang penting kita sudah menguasai intruksi bahasa pemrograman untuk membuat aplikasi web.

Pada saat ini sebenarnya untuk membuat website bisa sangat mudah dan cepat, karena banyak tersedia framework gratis yang bisa kita gunakan untuk membuat website, framework adalah krangka kerja, yaitu aplikasi setengah jadi yang diatur secara dinamis dan sudah dipermudah untuk bisa dikembangkan menjadi program jadi yang lebih lengkap sesuai dengan yang kita inginkan , sehingga jika kita memutuskan untuk membuat website sendiri dengan cepat dan mudah kita bisa menggunakan framework, dengan menggunakan framework pekerjaan bisa lebih cepat karena tidak harus membuat dari titik 0, kita tinggal merangkai kerangka kerja yang ada menjadi aplikasi yang lebih lengkap seperti yang kita inginkan, tidak seperti kita membuat website dari titik 0, biasanya akan membutuhkan waktu yang relative lama. namun tetap teori dasar bahasa pemrograman web harus tetap kita kuasai.

Bahasa Pemrograman Apa yang harus dikuasai untuk membuat website

Jika kita memutuskan untuk mempelajari bagaimana cara membuat website sendiri dengan mudah dan cepat, ada beberapa bahasa pemrograman web yang harus kita kuasai, banyak sekali bahasa pemrograman yang bisa kita pilih, namun karena website itu adalah aplikasi client server artinya ada komputer server yang mengelola sumber data untuk memenuhi permintaan client, dan client yang meminta sumber data pada server, oleh karena itu untuk membuat website bahasa pemrograman juga akan terfokus pada 3 bagian pokok, yaitu bahasa pemrograman untuk client dan bahasa pemrograman untuk server, kemudian ditambah dengan Database manajemen sistem (DBMS) untuk media penyimpanan datanya, kesimpulannya untuk membuat website kita harus menguasai 3 bagian pokok yaitu:

# Bahasa pemrograman Server
#Bahasa pemrograman Client
#DBMS (Database manajemen system.

berikut secara detail bagian-bagian yang harus kita pelajari agar pandai membuat website atau aplikasi web:

1. Bahasa pemrograman server untuk aplikasi web

Bahasa pemrograman server yaitu script yang di eksekusi disisi komputer server, untuk bahasa pemrograman server banyak sekali yang bisa kita gunakan, diantaranya adalah ASP, J2EE, PHP dan lain-lain, tapi kalo menurut saya pribadi lebih baik menggunakan PHP, pertama PHP open source gratis , PHP bersifat multiflatform (tidak terikat satu flatform saja) artinya php bisa digunakan dilingkungan semua sistem operasi, baik itu window, linux, mcOS maupun sistem operasi lainnya, PHP akan bisa jalan secara otomatis. dan PHP saat ini didukung dengan banyak referensi yang sudah tersedia di internet, sehingga tidak perlu khawatir, apalagi sudah banyak tersedia framework gratis untuk memudahkan mengembangkan aplikasi web dengan PHP, salah satu yang terkenal adalah code ignitor, apapun program aplikasi web yang akan dibuat baik itu untuk toko online, CMS, media belajar media sosial baik resmi maupun tidak, itu bisa kita buat dengan hanya mengandalkan referensi yang tersedia didunia internet.


2. Bahasa Pemrograman Client, untuk apliakasi web

Bahasa pemrograman client adalah script yang akan di eksekusi di sisi kompuer client dalam hal ini bahasa pemrograman client akan diterjemahkan oleh browser itu sendiri menjadi sebuah tampilan halam situs atau website, untuk bahasa pemrograman client, ada beberapa yang wajib kita kuasai yaitu:

a. Script HTML

Adalah script yang terdiri dari kumpulan tag (kode tertentu) yang dapat diterjemahkan oleh aplikasi browser, fungsi dari script HTML adalah dia sebagai fondasi dan pembungkus script lainnya yang membentuk struktur kode halaman situs.

b.  Script CSS, 

script css atau cascade style sheet adalah script yang berfungsi untuk mendekorasi atau menghias dan mengatur tata letak setiap tag script HTML, mewarnai, tata letak halaman situs adalah peran dari script CSS ini, script css adalah salah satu script yang mudah untuk dikuasai, jadi anda jangan berkecil hati untuk mempelajarinya. script CSS nanti akan di masukan atau dibungkus oleh script HTML dan diterjemahkan oleh web browser.

c. Java Script

Java script adalah bahasa pemrograman web yang berjalan disisi client,fungsi script ini adalah untuk memberikan sentuhan interaktif terhadap halaman situs, semacam animasi perubahan warna ketika mouse menyentuh sebuah button dan aksi interaktif lainnya, untuk java script memang akan sedikit sulit untuk dipelajari karena javascript berorientasi object, namun jangan khawatir, ternyata saat ini untuk menggunakan script ini sangat mudah dan sudah diserhanakan, yaitu dengan menggunakan framework, salah satu yang paling populer adalah JQuery, dan harus anda pelajari.

Bagaimana Proses Script web sehingga bisa menghasilkan tampilan halaman situs.

Setelah kita selesai membuat aplikasi web, kumpulan script atau kode yang menyusun aplikasi web tersebut seluruhnya akan disimpan di komputer server pada lokasi tertentu, dimana pada komputer server tersebut  sudah terinstal software server web didalamnya, Aplikasi web yang terdidi dari kombinasi kode server, kode client dan basis data akan diproses oleh web server sesuai dengan permintaan komputer client,

ketika komputer client meminta suatu halaman melalui web browser seprti mozila firefox, google croome, sapari, opera dan browser lainnya, baik itu dari pencarian google atau langsung dengan mengetikan pada address bar web browser, permintaan tersebut akan diteruskan ke server yang dituju, server kemudian akan memproses permintaan client tersebut, mencari dan memproses sesuai dengan permintaan komputer client melakukan akses basis data jika ada data yang dilibatkan dari basisdata, server pada umumnya akan menterjemahkan bahasa kode pemrograman yang tersedia, jika pemrograman tersebut mengandung script server, server kemudian akan memprosesnya dan menterjemahkannya kedalam bahasa HTML dan jika server menemukan bahasa pemrograman client server tidak akan memprosesnya dan membiarkannya untuk dikirim langsung, setelah seluruh permintaan client selesai diproses, hasil proses oleh komputer server kemudian akan langsung dikirimkan dalam bentuk bahasa pemrograman client (HTML, CSS dan javascript) ke komputer client, script yang dikirmkan oleh server kemudian akan diterima oleh komputer client melalui web browser semisal mozila, google croome atau web browser lainnya, web browser kemudian akan menterjemahkan script client yang diterima dari server tersebut menjadi tampilan halaman situs atau website.
 

Tool Untuk Mendukung Pembuatan Website

Setelah kita mengetahui bahasa pemrograman yang harus dikuasai untuk membuat aplikasi web, kemudian bagaimana interaksi komputer client server dalam memproses aplikasi web sehingga bisa menghasilkan halaman situs, langkah berikutnya adalah mengetehui bagaimana website tersebut dibuat dari mulai pengetikan kode program sampai website itu di uji coba sehingga hasilnya bisa kelihatan meskipun belum selesai 100%.
ketika kita sudah mengethui bahasa pemrograman yang harus dipersiaplan untuk mengembangkan aplikasi web untuk website, berikutnya kita harus memikirkan alat untuk mengembangkannya, karena perlu kita kethui bahasa pemrograman biasanya terpisah dengan editornya, yang harus kita persiapkan setelah mengetahui bahasa pemrograman yang harus dipersiapkan tool yang mendukung untuk pembuatan website yaitu:

 1.  IDE (Editor yang digunakan untuk menulis script bahasa pemrograman,
Pertama adalah kita harus menyiapkan editornya, untuk editor banyak sekali tersedia baik gratis maupun berbayar. diantarnya:

a. NetBean (Salah satu tool Editor terbaik gratis untuk menulis script html php maupun java)

b. Note Pad ++ (Editor gratis sederhana untuk menulis bahasa pemrograman web).

c. Dreamweaver tool untuk desain website dengan cepat, tool ini sangat tidak dianjurkan untuk pemula, kemudahan tidak akan membuat kita menjadi profesional, sebaiknya untuk pemula harus mulai memahami struktur dari dasar, yang cocok untuk pemula adalah Netbean meskipun harus mengetikan program satu persatu, itu akan membuat kita lebih memahami struktur kode yang paling dasar mengenai aplikasi web, dan itu yang akan membuat kita menjadi profesional.

d. dan lain-lain



2. Web Server Bundle (Apache, MySQL, PHP Interpreter)
Webserver adalah tool yang kita pasang instal di komputer server, tool ini berfungsi sebagai hosting, yaitu untuk meletakan file-file aplikasi web, dan juga yang sekaligus menterjemahkan atau memproses scriptweb menjadi halaman-yang diminta oleh komputer client. Webserver biasanya diinstal di komputer server, kemudian file-file aplikasi web nanti diharuskan disimpan di lokasi yang sudah disediakan oleh webserver tersebut.

Pada saat ini banyak tersedia webserver boundle yang sudah mengintegrasikan antara Apache, MySQL, PHP Interpreter secara otomatis, sehingga kita tinggal instal dan start mesinnya, tanpa harus mengintegrasikan ketiga boundle tersebut secara manual, salah satunya yaitu Xampp, untuk mulai membuat website xampp harus diinstalkan pada komputer yang akan digunakan untuk mengembangkan website.

Jenis Halaman Website

Lantas bagaimanakah kita membuat halaman website, untuk membuat halaman website gratis, ada beberapa framework yang bisa kita gunakan tergantung dari website seperti apa yang akan kita kembangkan, karena kalo dilihat dari isinya ada beberapa jenis website yang bisa kita gunakan tergantung keperluan, jenis- jenis halaman website diantaranya:

1. Sistem Informasi, yaitu halaman situs yang digunakan untuk pengolahan sistem informasi, misal untuk administrasi rumah sakit, perpunstakaan dan administrasi lainnya, halaman website seperti ini harus kita buat secara khusus, karena pada umumnya sistem informasi bersifat spesifik maka mau tidak mau untuk membuat halaman website untuk sistem informasi sebaiknya kita harus buat sendiri menyesuaikan dengan kebutuhan sistem yang akan dikembangkan.

2. CMS (Content manajemen System) halaman situs atau website yang dikhususkan untuk mengelola artikel, pada umumnya karena sifatnya standar, aplikasi website seperti ini bisa dikatakan paling banyak ditemukan dan banyak tersedia baik itu gratis maupun berbayar.



Membuat Halaman Website Gratis Sendiri


Dara beberapa jenis halaman website diatas, sebenarnya banyak tersedia halaman web gratis yang bisa kita gunakan. terutama untuk CMS banyak sekali tool atau penyedia layanan gratis yang siap kita gunakan tanpa mengeluarkan dana sepeserpun. jika kita memutuskan untuk membuat halaman situs CMS sendiri, beberapa penyedia layanan yang bisa kita gunakan adalah blog, antara lain:

1. Blogger
 Blogger adalah layanan CMS gratis milik google yang memungkinkan kita untuk membuat halaman situs dengan cepat dan mudah tanpa mengeluarkan dana sepeserpun, tugas kita biasanya hanya membuat artikel, menerbitkan artikel dan melakukan optimasi seo onpage dan offpage pada blog yang sudah kita daftarkan, untuk melakukan pendaftaran anda bisa mengikuti pandungan tentang cara membuat blog dengan mudah.

2. Wordpress
Sama halnyadengan blogger, wordpress adalah salah satu layanan blog, yang cukup terkenal dan digemari bagi kalangan blogger, karena wordress di gadang-gadang, salah satu blog yang memiliki optimasi seo yang baik yang difasilitasi dengan banyak plugin, wordpress memiliki DA (Domain Authority) yang lebih tinggi dari blogger, ini menunjukan otoritas domain dimata mesin pencari lebih baik dari pada blogger, namun blogger juga tidak kalah karena blogger anak emas dari mesin pencari terpopuler saat ini yaitu google, jika harus memilih menurut saya dua-duanya juga bagus.

3. Tumblr
Tumbler sama halnya dengan kedua blog diatas, namun tumbler boleh dibilang masih baru, tumbler saat ini dimiliki oleh yahoo. anda bisa mencobanya.



Demikian informasi yang bisa saya share mengenai CARA Membuat Website Sendiri Mudah: Langkah dasar yang harus anda pelajari, semoga bermanfaat.


Bahasa Pemrograman yang harus dikuasai Untuk membuat aplikasi web

Bahasa Pemrograman yang harus dikuasai Untuk membuat aplikasi web

      Comment   
Bahasa Pemrograman yang harus dikuasai Untuk membuat aplikasi web - untuk pemula yang masih awam yang berkeinginan ingin membuat sebuah halaman web, tentunya akan kebingungan ketika mereka memutuskan untuk mempelajari hal-hal apa saja yang harus dipersiapkan untuk membangun aplikasi web.

Pertanyaan yang paling umum adalah, harus mulai dari mana? apa yang harus saya persiapkan? dan apa yang harus saya pelajari?, artikel berikut mudah-mudahan bisa menjawab rasa penasaran anda tersebut.

Artikel ini khusus dibuat untuk pemula yang baru mulai mau belajar cara membuat website, sebenarnya hal utama yang harus anda pelajari untuk membuat aplikasi web adalah bahasa pemrograman web itu sendiri, yang harus diperhatikan adalah, bahasa pemrograman web yang menyusun struktur kode halaman situs, ternyata itu lebih dari satu bahasa pemrograman, jika anda ingin menjadi seorang ahli, mau tidak mau bahasa pemrograman tersebut wajib anda kuasai meskipun libih dari satu bahasa pemrograman.

Tetapi tenang saja karena bahasa pemrograman penyusun web adalah bahasa pemrograman yang paling mudah untuk dikuasai dibandingkan dengan bahasa pemrograman lainnya, yang penting, jika anda benar-benar serius ingin mempelajarinya, silahkan anda persiapkan diri anda, dan saya sarankan jangan mudah putus asa, jangan terburu-buru dan ingat anda harus tetap konsisten untuk terus mempelajari bahasa pemrograman web, saya yakin anda akan cepat menguasainya.

Bahasa Pemrograman yang harus dikuasai Untuk membuat aplikasi Web untuk Pemula

Berikut saya jabarkan bahasa pemrograman apa saja yang harus anda kuasai agar mempu membuat halaman web sendiri, yaitu:

1. HTML, Ada yang berpendapat bahwa ini bukan bahasa pemrograman namun lebih menganggap sebagai bahasa markup, apapun itu jika berhubungan dengan halaman situs, html merupakah salah satu script  pokok yang wajib di kuasai untuk mengembangkan aplikasi web, struktur dasar html biasanya terdiri dari kumpulan tag, tag adalah perintah html yang dapat di terjemahkan oleh browser, penulisan nama tag biasanya diapit oleh tanda siku, tag pada umumnya terdiri dari tag pembuka dan penutup, contoh <nama_tag> .......isi........</nama_tag>, yang warna biru adalah tag pembuka dan yang warna merah adalah tag penutup, untuk isi pada umumnya diletakan diatara tag pembuka dan tag penutup.

2. CSS (Cascade Style Sheet), ada banyak pendapat mengenai css, ada yang mengkategorikan ini kedalam bahasa pemrograman, ada juga yang mengkategorikan ini kedalam bahasa markup dan ada juga yang menganggap bukan dua-duanya, yang jelas cascade style sheet adalah script code webyang berfungsi  untuk mendekorasi dan mengatur tata letak tag-tag html, seperti mewarnai tulisan, mewarnai background, mengatur tata letak dan lain sebagainya yang berkaitan dengan mendekorasi dan mengatur tata letak tag html.

3. Bahasa Pemrograman Java Script, adalah script code web yang digunakan untuk membuat halaman web lebih interaktif, seperti membuat menu ketika diklik menu tersebut scroll kebawah, sebuah tombol ketika mouse diarahkan berubah warna, reaksi-reaksi lainnya ketika pengguna berinteraksi dengan halaman web, intinya java script digunakan untuk membuat halaman situs menjadi lebih interaktif.

4. Bahasa Pemrograman Server Web, adalah Script yang di eksekusi di sisi server yang berguna untuk membantu mempermudah dan mempercepat manipulasi script HTML, jika dalam script web terdapat bahasa server, bahasa server tersebut akan diterjemahkan oleh webserver menjadi kode HTML.

Contoh bahasa server yang bisa anda kuasai adalah bahasa pemrograman PHP, ASP, JSP, tapi yang paling populer adalah bahasa pemrograman PHP (facebook juga dibuat dengan PHP). saya lebih menyarankan untuk menguasai PHP jika anda punya minat ingin membuat halaman website sendiri.

Beberapa kelebihan PHP:
a. PHP bersifat multiflatform, kita bisa menjalankan PHP di sistem operasi apapun, window/linux/ macOS dan sistem operasi lainnya.

b. PHP bersifat open source dan gratis, dengan menggunakan php kita tidak perlu membayar license, karena php opensource.

Untuk membangun aplikasi web, ke empat bahasa pemrograman diatas wajib anda kuasai, Khusus untuk bahasa pemrograman CSS, Java Script dan Bahasa pemrograman Server Web, nanti akan dibungkus oleh bahasa pemrograman HTML. ke tiga bahasa pemrograman tersebut akan disisipkan kedalam script HTML untuk menyusun sebuah halaman web.


Saran membuat apliasi Web Bagi Pemula

Ada yang mengatakan jangan pusing-pusing memahami bahasa pemrograman tersebut, biar cepat dan lebih mudah, kita gunakan saja  software untuk mengenerate halaman situs yang kita inginkan, kita tinggal drag dan temple selesai, halaman situs secara otomatis akan di generate dan  siap digunakan, misal salah satu software untuk mengatasi masalah tersebut adalah DreamWeaver,

Memang tidak salah menggunakan software tersebut, tetapi software tersebut lebih di khususkan untuk yang sudah benar-benar mahir, dengan tujuan untuk mempercepat membuat halaman situs. sedangkan untuk pemula itu adalah langkah yang buruk, sebaiknya untuk pemula jangan memulai dengan hal-hal gampang dan instan, pemula sebaiknya mempelajari struktur dasar lebih dalam, dengan memahaminya penggunaan tool semisal DreamWeaver itu perkara mudah, yang penting kita benar-benar memahami bahasa pemrograman web secara mendalam. saya yakin anda akan menjadi programmer web yang handal.


Demikian artikel sederhana tentang Bahasa Pemrograman yang harus dikuasai Untuk membuat aplikasi web, semoga bermanfaat untuk anda.

Ingin Membuat Website Sendiri, Ini Script yang harus anda pelajari!

      Comment   
Sebelum saya uraikan tentang script yang harus dipelajari untuk membuat website sendiri, saya ingin memastikan bahwa yang anda cari memang benar-benar referensi untuk membuat halaman website dan bukan mencari cara untuk membuat halaman blog, karena ternyata tidak sedikit pengguna internet yang mencari referensi tentang bagaimana cara membuat website sendiri padahal apa yang ingin mereka temukan sebenarnya adalah cara membuat halaman blog, begitu juga sebaliknya. Jadi harap untuk diperhatikan bahwa apa yang anda cari memang benar cara membuat website bukan cara membuat blog sesuai dengan yang anda inginkan

Perlu anda ketahui bahwa untuk dunia aplikasi web, memang ada 2 istilah yang kerap sekali digunakan terutama terkait halaman web, yaitu website dan blog, jika anda masih menganggap antara website dan blog itu sama, maka anda salah besar karena keduanya ternyata berbeda.

Sebelum saya uraikan tentang script yang harus dipelajari untuk membuat website sendiri Ingin Membuat Website Sendiri, Ini Script yang harus anda pelajari!


Kenali Perbedaan Website dan blog!

Baik website maupun blog keduanya memang merupakan aplikasi web yaitu aplikasi komputer yang dapat diakses melalui browser seperti mozila, google chrome, safari, opera, internet explorer dan browser-browser lainnya, meskipun sama-sama merupakan halaman web, ternyata keduanya adalah 2 hal yang berbeda. terutama dari sisi fungsi dan ruang lingkupnya.

Website adalah halaman web yang fungsinya lebih dinamis dapat digunakan untuk berbagai keperluan yang sifatnya administratif sesuai dengan yang diinginkan, misalnya untuk toko online atau online shop yang dilengkapi dengan fasilitas input data barang dan pemesanan barang serta informasi pendukung lainnya, sistem informasi perpustakaan sekolah, aplikasi keuangan dan aplikasi lainnya dan biasanya selalu melibatkan basis data di dalamnya untuk menyimpan, mengedit, menghapus dan dan memanipulasi data, disertai dengan penyajian informasi hasil pengolahan data yang dibutuhkan oleh penggunanya.

Sedangkan blog adalah halaman situs sederhana yang difungsikan sebagai sistem pengelola konten (content management sistem atau CMS), biasanya disajikan dalam bentuk tulisan atau text, gambar, video maupun suara, blog secara fungsi memang sangat terbatas berbeda dengan website yang memiliki ruang lingkup lebih luas.

Jika apa yang anda cari ternyata adalah tentang cara membuat website sendiri untuk keperluan tertentu, maka artikel ini adalah artikel yang tepat yang akan menjelaskan kepada anda apa saja yang harus anda pelajari agar dapat membuat website sendiri.

Yang harus dipelajari untuk Membuat Website Sendiri

Membuat halaman website sendiri memang bukanlah perkara mudah, kecuali anda sudah sangat mahir, ada beberapa script yang harus dipelajari yaitu sebagai berikut:

#1 - Script HTML

Script HTML adalah script client (script yang dapat diterjemahkan oleh browser) untuk menciptakan halaman website sendiri yang sifatnya standar, script ini disebut sebagai script utama multiflatfom dapat dijalankan di berbagai sistem operasi yang dapat digunakan untuk menyusun halaman web baik blog maupun website, script ini adalah salah satu script yang bisa diterjemahkan oleh browser untuk diproses sehingga menjadi tampilan halaman web sesuai dengan yang diinginkan.

Untuk membuat halaman website sendiri, maka script HTML ini benar-benar harus anda pelajari, script ini tidak terlalu sulit untuk dipelajari kok.... jadi jangan khawatir bahkan menurut pendapat banyak programmer termasuk saya pribadi, script HTML adalah script yang paling mudah untuk dipelajari jika dibandingkan dengan script bahasa pemrograman lainnya.

Panduan dasar untuk memahami HTL anda bisa baca: Cara membuat struktur HTML untuk pemula

#2 - Script CSS (Cascade Style Sheet)

Jika script HTML adalah script utama yang menyusun kerangka halaman website ataupun blog, maka lain halnya dengan script CSS, script ini adalah script client yang fungsinya untuk mendekorasi  atau mendesaian dan juga mengatur tata letak halaman situs sehingga sesuai dengan tampilan yang diinginkan.

Script ini mampu memanipulasi kode tag-tag script HTML sehingga tag-tag html bisa di dekorasi dan diatur tata letaknya sedemikian sehingga tampilannya sesuai dengan yang diinginkan. jika anda ingin mampu membuat halaman website sendiri maka script ini adalah salah satu script yang benar-benar wajib anda kuasai.

Untuk mempelajari script ini, saya merekomendasikan anda belajar di w3school. Sebuah situs yang cukup lengkap dengan dokumentasi gratis script-script web seperti HTML, Javascript dan CSS.

#3 - Javascript

Jika fungsi CSS adalah untuk mendekoarsi dan mengatur tata letak halaman web, maka javascript adalah script khusus yang diproses di sisi client oleh browser yang dapat digunakan untuk membuat halaman web lebih interaktif, artinya jika ada aksi dari pengujung terhadap bagian-bagian tertentu pada halaman web, maka halaman bereaksi, misalnya tombol di arahkan mouse di atasnya warnanya berubah dari merah ke biru, menu diclick scroll ke bawah dan lain sebagainya sehingga halaman blog kelihatan lebih hidup.

Javascript mampu memanipulasi tag-tag HTML agar responsif terhadap aksi pengguna sesuai dengan yang diinginkan. Untuk mempelajari script ini, saya merekomendasikan anda belajar di w3school JS. Sebuah situs yang cukup lengkap dengan dokumentasi gratis script-script web seperti HTML, Javascript, CSS dan script-script lainnya.

Untuk menguasai javascript pada dasarnya memang perlu kemampuan khusu, namun saat ini banyak sekali framework-framework atau library javascript atau kerangka kerja yang dapat mempermudah pekerjaan anda dalam membuat website sendiri, peranan framework ini mampu membantu anda dalam pengkodean javascript untuk mendesain website anda, dengan adanya framework maka anda tidak perlu melakukan pekerjaan dari nol, bayangkan saja seperti halnya anda ingin membuat sebuah gambar yang sudah memiliki garis-garis bantu yang siap anda rangkai menjadi gambar yang utuh, begitu juga dengan fungsi framework.

#4 -  Pelajari Script Server.

Sebuah website profesional tidak lepas dari keterlibatan script server di dalamnya, jika script client seperti HTML, CSS javascript adalah script dapat diproses dan diterjemahkan oleh browser sehingga menghasilkan tampilan halaman situs, beda halnya dengan script server, script server hanya dapat diproses dan diterjemahkan oleh webserver yang tersimpan di mesin server.

Peranan script server adalah untuk membantu membuat struktur pengkodean halaman situs menjadi lebih mudah dan lebih praktis, script server ini nanti akan diproses oleh server dan diterjemahkan ke dalam script HTML dan hasilnya dikirim ke mesin client yang mengaksesnya untuk diterjemahkan oleh browser yang menggunakannya.

Berikut beberapa script server yang bisa anda pelajari untuk membuat sendiri halaman website:

  • PHP (Hypertext Preprocessor)
  • Java Server Page (JSP)
  • Active Server Page ASP
  • dan masih banyak yang lainnya.

Namun jika anda ingin fokus saya merekomendasikan untuk mempelajari PHP, karena saat ini PHP adalah salah satu script web yang sangat populer dan paling banyak penggunanya. banyak situs-situs besar dan profesional menggunakan script PHP di dalamnya.

Agar dapat mempermudah Melakukan pengkodean script PHP, anda bisa memanfaatkan penggunaan framework atau library kerangka kerja yang sudah banyak tersedia dan siap digunakan secara gratis, sehingga anda tidak harus membuatnya dari nol, dan dapat mempercepat pekerjaan anda dalam membuat website atau halaman situs, beberapa framework berbasis PHP yang cukup dikenal saat ini dan sudah banyak digunakan beberapa diantaranya adalah sebagai berikut:


Saya pribadi lebih suka menggunakan Code Ignitor, karena merasa sangat cocok dan cukup mudah dipakai. Anda bisa mereview kelebihan dan kekurangan framewok-framewok yang ada yang akan anda gunakan agar lebih mantap untuk mempelajarinya.

#5 - Pelajari Basis data 

Basis data adalah pengolah data yang nanti anda akan libatkan di halaman website anda, seperti misalnya anda membuat website toko online, maka aplikasi harus memiliki fasilitas untuk menginput data barang, data pelanggan dan lain sebagainya, begitu juga jika anda ingin membuat aplikasi perpustakaan, dan aplikasi web lainnya, untuk menyimpan menghapus dan memelihara data maka website harus terintegrasi ke basis data, Jika anda ingin mampu membuat website sendiri maka anda harus mempelajari hal-hal yang berkaitan dengan basis data, bagaimana cara mengoperasikan basis data dan bagaimana cara memanipulasi data untuk menampilkan informasi yang diinginkan.

Basis data yang paling banyak digunakan pada aplikasi website diantaranya adalah:

  • MySQL, ini sangat cocok sekali disandingkan dengan script PHP
  • Postgres dan
  • Basis data lainnya.

#6 - Kenali dan Pelajari Editor untuk membuat halaman webstite.

Selanjutnya apa yang harus anda persiapkan untuk membuat halaman website sendiri adalah editor untuk mengetikan perintah script halaman web atau untuk mendesain halaman website yang akan anda bangun, ada banyak sekali editor untuk membuat halaman website. beberapa diantaranya dalah:

  • Netbean, ini adalah editor gratis yang saya sukai untuk editor membuat halaman website dengan projek medium ke atas, berbasis PHP atau java, kaya akan fitur dan pure koding, artinya murni menggunakan perintah text, jadi anda harus sudah bisa memahami script-script website sehingga dapat anda ketikan  di netbean ini
  • Notepad ++, tool gratis dan sederhana berbasis text kaya akan plugin, tool ini ringan dan anda bisa menginstal plugin-plugin yang dibutuhkan, tool ini cukup baik digunakan sebagai editor website ataupun blog. saya sering menggunakan tool ini untuk keperluan yang sederhana, karena cukup cepat dan mudah sekali digunakan.
  • Dream weaver, dream weaver adalah tool berbayar dari adobe yang banyak digunakan untuk membuat desain web, tool ini bisa kita gunakan dalam mode text maupun mode desain drag and drop, jika anda ingin membuat tampilan website cepat, anda bisa menggunakan tool ini, namun tetap pada prakteknya anda harus sudah menguasai script-script web, terutama HTML, Javascript dan CSS. tool ini sebenarnya tool yang cocok sekali untuk programmer berpengalaman untuk membantu mempermudah dalam mendesain tampilan halaman situs, anda juga bisa mencobanya walaupun anda pemula.
  • Dan masih banyak yang ainnya...tretet...

Baca juga: Software yang dibutuhkan untuk membuat website

#7. Gunakan Xampp untuk PHP

Untuk membuat website menggunakan PHP maka anda perlu menyiapkan webserver, php interpreter yang akan menterjemahkan script php dan tool lainnya, tool ini bisa anda dapatkan secara terpisah kemudian anda harus menginstalnya di komputer anda, namun anda akan kesulitan untuk melakukan konfigurasinya, tenang saja, ada kabar baik ternyata ada banyak sekali pihak ke 3 yang sudah membundel tool-tool yang dibutuhkan untuk mengembangkan halaman situs menggunakan PHP, salah satu yang paling terkenal saat ini adalah software Xampp.

Xampp adalah bundel software atau kumpulan software-software yang dibutuhkan untuk mengembangkan website menggunakan PHP yang bisa anda instal di komputer local untuk menguji website yang anda buat dengan PHP, dengan menggunakan xampp anda akan sangat terbantu dan tidak perlu melakukan konfigurasi yang cukup ribet.

Saya tidak akan panjang lebar bagaimana cara membuat website dengan bantuan xampp, anda bisa mencarinya diinternet langkah apa yang harus anda tempuh ketika ingin menggunakan xampp untuk mengembangkan website.

Sedangkan untuk cara instalnya anda bisa baca di artikel di bawah ini:

Jadi Xampp dan juga tool Editor seperti netbean atau notepad++ harus anda instal pada komputer anda, editor digunakan untuk mengetikan perintah atau script web yang akan anda buat, sedangkan xampp semacam webserver local yang dapat anda gunakan untuk mengetes halaman web yang sedang anda buat, sebelum halaman website anda di release untuk dipublis ke internet. Xampp sama halnya seperti server hosting yang dapat anda gunakan untuk menyimpan file-file website yang sudah anda buat.

Waduh ternyata repot juga ya membuat website sendiri, banyak yang harus dipelajari dan disipakan!

Jika anda tidak mau repot-repot membuat website sendiri anda bisa menggunakan situs-situs penyedia pembuatan layanan website yang siap digunakan, sehingga anda lebih mudah dan cepat dalam mencipkan halaman website anda.

Ada banyak sekali situs-situs yang menyajikan bantuan untuk membuat layanan website sendiri terutama untuk online shoop, ada yang gratisan ada juga yang berbayar, jika itu yang anda perlukan, anda bisa cari layanan-layanan jasa pembuatan website yang banyak sekali bertebaran diinternet.


Bagaimana dengan Halaman Blog? 

Sekali lagi saya tegaskan bahwa blog tidak sama dengan website, jika yang anda cari adalah cara untuk membuat blog, maka ini justru lebih mudah, ada banyak sekali situs-situs penyedia layanan blog gratis yang tersdia di internet yang siap anda gunakan, beberapa diantaranya adalah:


Anda bisa menggunakan situs-situs di atas untuk membuat halaman blog yang anda inginkan, silahkan buka situs di atas kemudian buat halaman blog yang anda inginkan, oh ya, saat ini banyak orang membuat halaman blog bukan hanya bertujuan untuk menuangkan tulisan saja, namun saat ini blog sudah banyak digunakan untuk menghasilkan uang dari internet. jika anda tertarik anda bisa baca artikel di bawah ini sebagai referensi:


Namun jika anda membuat blog di layanan blog tersida, alamat blog anda akan berakhiran nama situs layanan blog yang anda gunakan, misalnya jika anda membuat halaman blog di blogspot maka, alamat blog anda akan berakhiran nama_blog_anda.blogspot.com, atau jika anda membuat blog di wordpress, maka nama alamat blog anda akan berakhiran nama_blog.wordpress.com begitu juga untuk layanan blog lainnya.

Oh Tapi saya ingin membuat blog dengan alamat sendiri, misalkan berakhiran .com, .org, .co.id dan lainya bagaimana caranya?

Jika apa yang anda cari cara membuat halaman blog dan anda ingin membuat halaman blog dengan domain sendiri atau Top Level Domain (TLD), domain pribadi dengan akhiran .com, .org, .co.id, .net dan lain sebagainya, maka anda harus membeli layanan domain dan juga layanan hosting.

Untuk memahami apa itu hosting dan domain silahkan baca dulu : apa perbedaan hosting dan domain!

Anda bisa menggunakan Conten Management System (CMS) seperti cms wordpress.org, htmly dan lain sebagainya yang bisa anda download dan gunakan secara gratis untuk halaman blog anda, kemudian anda tinggal membeli layanan hosting dan juga membeli layanan nama domain, hosting untuk menyimpan file-file halaman blog anda, sedangkan nama domain  digunakan untuk alamat blog anda.

Saya sarankan menggunakan cms dari wordpress.org, cms ini menggunakan script PHP dan cms ini cukup mudah digunakan, flexible, dan penggunanya sangat banyak diseluruh dunia serta didukung dengan tutorial-tuorial yang banyak bertebaran diinternet.

Anda bisa membuatnya menggunakan komputer yang terhubung ke internet ataupun memuatnya menggunakan hp namun anda akan kerepotan. jadi disarankan menggunakan komputer atau laptop untuk membuatnya.


Demikian tentang Apa yang harus anda persiapkan untuk membuat website sendiri, baik script yang harus anda pelajari dan juga tool-tool yang harus anda persiapkan, semoga membantu dan anda bisa mewujudkan keinginan anda sehingga berhasil membuat halaman website sendiri.
Cara Membuat struktur program HTML: khusus Pemula

Cara Membuat struktur program HTML: khusus Pemula

      Comment   
Cara Membuat struktur program HTML: khusus Pemula - HTML (hyper text markup langeuage) adalah bahasa standar dengan pengkodean khusus yang digunakan untuk menyusun halaman situs atau halaman aplikasi web, HTML akan diterjemahkan oleh browser menjadi sebuah tampilan dengan format-format tertentu bisa menjadi text, link, gambar dan lain sebagainya sesuai dengan perintah html yang digunakan. lantas apa itu browser?, browser adalah software yang memiliki kemampuan menterjemahkan kode-kode html untuk  ditampilkan menjadi  tampilan halaman situs.
ketika kita membuat kode html, maka file html harus disimpan dengan akhiran .htm atau .html, keduanya sama saja baik .htm ataupun .html keduanya dapat dikenali oleh browser dan kode-kode didalamnya akan diterjemahkan menjadi sebuah tampilan halaman situs.

Memahami Struktur HTML

Jika anda ingin mampu untuk membuat sebuah website, pertama kali yang harus anda pelajari dan harus anda fahami benar-benar adalah struktur perintah HTML silahkan anda bisa baca tentang bahasa pemrograman yang harus dikuasai untuk membuat aplikasi web. mengapa harus HTML?, itu karena html adalah  pondasi dasar pada sebuah situs, bahasa pemrograman utama yang menyusun tampilan situs adalah HTML .  Untuk mempelajari HTML tidaklah terlalu sulit yang penting kita mengetahui bagaimana struktur dasarnya, jika kita sudah mengetahui struktur dasarnya tugas kita selanjutnya adalah menguasai dan memahami kode-kode HTML lainnya yang jumlahnya cukup banyak, wah gimana menghapalnya?, untuk masalah kode itu tidak perlu kita sengaja hapalin, lantas bagaimana kita bisa hapal, semakin sering kita gunakan maka kita akan semakin hapal, lambat-laun perintah-perintah HTML tanpa kita sadari jika sering digunakan dan dipraktekan kode-kode tersebut akan tertanam di ingatan jangka panjang kita.

Struktur Dasar HTML

Struktur dasar html terdiri dari dua blok, yang pertama adalah blok header, dan yang kedua adalah blok body, blok header digunakan untuk meletakan title, mendeskripsikan CSS untuk dekorasi tampilan, mendeskripsikan JavaScript untuk membuat halaman situs interaktif, meletakan meta, title dan lainnya. sedangkan blok body adalah area untuk meletakan kode-kode yang nanti akan menjadi tampilan halaman situs atau web, apapun yang kita letakan di blok body itu akan muncul pada tampilan di browser (mozila, google croome, internet explorer dll), berikut struktur dasar HTML yang harus anda ketahui:

<html>

      <head>
            <title>contoh html</title>
                   ...
                   ...
                   perintah-perintah head lainnya...
                   ...
                   ...
      </head>

       <body>

              <p>ini adalah kontent html</p>
               .....
               ....
               perintah-perintah body lainnya, 
               yang diletakan diarea body ini akan ditampilkan oleh browser...
               ...
               ...
      </body>

</html>

struktur dasar html selalu dimulai dengan tag <html> dan diakhiri dengan tag penutup </html>, untuk blok head selalu dimulai dengan  perintah <head> dan diakhiri dengan perintah </head>, sedangkan untuk blok body selalu diwali dengan perintah <body> dan diakhiri dengan perintah </body>, adapun untuk karakter perintah-perintah kode HTML, kita bisa menggunakan huruf besar saja, huruf kecil saja atau kombinasinya, semuanya tidak dibedakan, masih bisa dibaca dan sama saja. ingat ketika kita membuat script HTML file harus kita simpan dengan akhiran .html atau .htm.

Editor HTML

Untuk membuat html banyak tool editor gratis yang yang bisa kita gunakan, untuk hanya sekedar latihan kita bisa menggunakan notpad atau notpad++, tetapi untuk tujuan profesional, sebaiknya kita menggunakan tool yang khusus, misal saya sendiri menggunakan NetBean sebagai editor untuk membuat web, atau tool lainnya yang memang handal, tool sekelas NetBean, sudah dilengkapi dengan code highlighter, membedakan warna text atau kode-kode html yang digunakan, juga sudah dilengkapi dengan autocompleter, kode saran ketika kita mengetikan perintah, autocompleter berguna sekali membantu kita mengingat kode yang lupa. 

Oh Ya bagaimana dengan editor yang drag n drop, yang memudahkan kita untuk membuat halaman web, seperi misal DreamWeaver, bolehkah digunakan?,  menurut hemat saya tergantung, jika kita sudah profesional sudah memahami secara mendalam struktur web, tool semacam dream weaver untuk urusan agar halaman lebih cepat dibuat itu tidak jadi masalah, tetapi khusus untuk PEMULA, tool semacam dream weaver harus dihindari, kenapa?, tools itu membuat anda tidak mau berfikir keras, padahal pemula sebaiknya memahami lebih dalam struktur dasar html atau bahasa pemrograman lainnya, agar faham yang paling dianjurkan adalah anda mengetikan program secara langsung tanpa bantuan tool instan yang membantu membuatkannya untuk anda, itu akan lebih baik, dan akan membuat anda menjadi programmer yang handal nantinya. jika anda sudah benar-benar paham mengenai pengkodean halaman situs terutama HTML, tidak jadi masalah kita menggunakan tool semacam dream weaver.


Contoh sederhana program HTML

untuk contoh program berikut anda bisa mengetiknya atau coba kopi paste perintah program html dibawah ini kedalam notepat:

<html>
<head>
<title>contoh html</title>
</head>
<body>
<i>ini contoh tulisan miring</i><br/>
<b>ini contoh tulisan ditebalkan</b><br/>
<u>ini contoh tulisan digarisbawahi</u><br/>
<i><b><u>ini contoh tulisan miring ditebalkan dan digarisbawahi</u></b></i>
</body>
</html>

silahkan anda kopi program diatas ke dalam notpad, kemudian simpan, sebelum disimpan pada kotak dialog simpan silahkan atur save as type:  pilih All Files (*.*), kemudian filename atau nama file anda bisa masukan apa saja, jangan lupa untuk memberi akhiran .html atau .htm, misal contoh.html kemudian sialahkan anda simpan.

Untuk melihat outputnya atau hasilnya, silahkan anda menuju lokasi penyipanan file anda tersebut, file berakhiran .htm atau .html, kemudain double klik file tersebut, biasanya file berektensi .htm atau .html itu akan terintegrasi dengan aplikasi browser default, jadi anda tinggal klik file html anda tersebut, nanti akan ditampilkan hasilnya pada browser default anda. misal mozila atau google croome atau bisa juga internet explorer, silahkan anda amati, bahwa kode yang diletakan diantara tag <body> dan</body> itu akan ditampilkan, jika anda sudah menguasai perintah-perintah lainnya, anda akan bisa menampilkanapapun sesuai dengan keinginan.


Demikian informasi yang bisa saya share mengenai Cara Membuat struktur program HTML: khusus Pemula, semoga bermanfaat.

Teknik dasar cara memodifikasi desain tampilan blog untuk pemula

      Comment   
Sebuah halaman web baik itu blog maupun website ketika anda akses sehingga tampil di halaman browser yang anda gunakan (seperti: mozila firefox, google chrome, internet explorer dll) pada umumnya tersusun dari gabungan beberapa script client web, script tersebut dapat difahami dan diterjemahkan oleh browser menjadi tampilan halaman situs, script-script tersebut adalah script HTML, script CSS (Cascade style sheet) dan Javascript, script-script tersebut sebenarnya saling berkolaborasi satu sama lain yang sengaja diprogram sedemikian rupa sehingga menampilkan halaman situs sesuai dengan yang diinginkan oleh si empunya situs atau blog tersebut.

Sebenarnya ketika anda membuat atau mengembangkan sebuah halaman blog atau website profesional seperti blog, pada umumnya ada dua kategori script yang dilibatkan, script client dan script server, script client adalah HTML, CSS dan javascript sedangkan script server misalnya bahasa khusus widget blog (seperti layaknya kode khusus yang sering kita gunakan di blogspot, ), script PHP seperti yang biasa digunakan di template wordpress, script ASP, JSP dll.

Sebuah halaman web baik itu blog maupun website ketika anda akses sehingga tampil di halam Teknik dasar cara memodifikasi desain tampilan blog untuk pemula
 Web design

Perbedaan kedua script tersebut terletak pada lokasi pemrosesnya, script client hanya diproses dan diterjemahkan oleh browser, sedangkan script server diproses dan diterjemahkan oleh mesin server yang merupakan sebuah mesin komputer di mana script halaman website atau blog diletakan, jika server membaca script server, maka server akan menterjemahkannya kedalam script HTML, jika server membaca script client (HTML CSS Javascript) maka server akan membacanya namun tidak akan memprosesnya, scripthasil pemrosesan dari script server hasilnya akan dikirm ke computer client melalui browser dalam bentyk script client dan script tersebut diterjemahkan oleh browser yang mengaksesnya sehingga menghasilkan tampilan halaman website.

Artikel terkait: Bahasa pemrograman yang harus dikuasai untuk membuat aplikasi web

Mengenal Script yang menyusun tampilan halaman blog

Di artikel kali ini saya akan jelaskan bagaimana teknik dasar cara memodifikasi desain tampilan blog, namun sebelum saya uraikan panjang lebar anda harus tau dulu fungsi dari script-script yang menyusun tampilan halaman blog, diantarnaya:

A. Script server

Script server pada umumnya akan diterjemahkan oleh mesin server menjadi script client, contoh dari script server beberapa diantaranya adalah sebagai berikut:

a. kode khusus widget blogspot, contohnya  di blogspot (sebuah framework yang hanya dapat dimengerti oleh penterjemah mesin blogspot, kode ini akan diproses diserver oleh mesin blogspot dan diterjemahkan menjadi script html sebelum dikirim ke client)

b. PHP, contoh biasa digunakan di Wordpress (wordpress menggunakan framework khusus dengan script PHP, dengan framework wordpress anda tidak perlu mengembangkan halaman web dari nol, karena library sudah disediakan oleh framework wordpress itu sendiri)

c. dll, tergantung template blog, bisa saja menggunakan bahasa pemrograman berbeda.

B. Script Client.


a. Script CSS
Script ini fungsinya adalah untuk mengatur hal-hal yang berkaitan dengan tata letak dan memodifikasi desain tampilan halaman situs (pewarnaan, gambar dll), cara kerjanya sebenarnya memodifikasi tag html, baik melalui nama tag, id atau clsss tag html tertentu yang ingin di atur tata letaknya dan ingin dimodifikasi.

b. Javascript
Script ini fungsinya adalah agar halaman blog terlihat lebih interaktif (ketika anda berikan aksi maka bereaksi), misal ketika diklik halaman scroll sendiri, ketika mouse diarahkan ke sebuah tombol, warna tombol berubah dll, cara kerjanya mirip dengan CSS yaitu memodifikasi tag html, baik melalui nama tag, id atau classs tag html tertentu.

c. Script HTML
Script ini berfungsi sebagai pondasi atau cover yang menggabungkan seluruh script yang digunakan, terdiri dari kode-kode berupa tag atau perintah khusus yang dapat dibaca oleh web browser, script html akan membungkus script css, javascript dan juga script server jika ada, semuanya dibungkus oleh script HTML ini, sifatnya wajib, artinya setidaknya halaman situs yang memperhatikan struktur kode yang baik harus mengandung script HTML didalamnya.

Artikel terkait: Cara membuat struktur program HTML untuk pemula

Apa itu tag?
ketika anda memodifikasi template blog anda pasti akan menemukan kode-kode khusus yang diletakan diantara tanda kurung siku (< dan >), itu adalah tag.
 

Tag adalah kode khusus yang  pada umumnya dibungkus diatara karakter "<" dan "/>", yang biasanya terdiri dari tag pembuka dan penutup, format tag adalah sebagai berikut:
<nama_tag atribut_1='isi atribut 1' atribut_2='isi atribut2' atribut_N='isi atribut N'> isi </nama_tag>

ada banyak sekali kode tag html.
Contoh tag misalnya tag body <body> tag <html> dan tag-tag lainnya.

Tag bisa memiliki lebih dari satu atribut dengan fungsi yang berbeda-beda, ada untuk mewarnai, menentukan lebar dll, tag satu dengan tag lainnya memiliki atribut berbeda satu sama laim, namun ada atribut spesial yang bisa dimiliki oleh semua tag yaitu Atribut ID dan CLASS, atribut itulah yang  biasanya digunakan oleh script CSS dan juga Javascript untuk memodifikasi tag tersebut baik untuk mengatur tataletak tag tersebut maupun mendekorasi tag tersebut.

Cara Mendesain blog menggunakan CSS

Disini saya akan jelaskan bagaimana cara memodifikasi dan mendesain tampilan blog, ketika berurusan dengan desain tampilan blog maka script yang dilibatkan adalah script HTML dan CSS saja. anda bisa juga melibatkan Javascript untuk membuat halaman situs lebih interaktif, namun di sini saya hanya akan lebih fokus ke HTML dan CSS saja, oh ya di sini saya tidak akan terlalu panjang lebar menjelaskan tentang apa itu script HTML dan CSS, namun disini saya akan jelaskan prosedurnya saja, jika anda mengerti anda bisa kembangkan dengan mudah dan lebih detail.

Bagaimana Script CSS Bekerja

Script CSS adalah script untuk mengatur tataletak dan mendekorasi halaman web, yang didekorasi oleh CSS adalah Tag-Tag HTML itu sendiri.

Lantas bagaimana cara kerja script css ini?

Cara kerja Script CSS begitu juga berlaku untuk javascript sangat sederhana, secript ini akan mngakses data yang terdapat didalam tag HTML kemudian memodifikasi Tag HTML melalui data yang terdapat pada tag tersebut:
a. Bisa melalui Nama tag.
b. bisa melalui Attribut Class yang dimiliki tag tersebut atau
c. bisa melalui Attribut ID yang dimiliki tag tersebut.

Jadi ketika anda ingin memodifikasi tag HTML dalam sebuah halaman situs, maka setidaknya anda harus tau terlebih dulu nama tag, atribut class atau atribut Id yang dimiliki oleh tag yang ingin anda modifikasi tersebut. jika anda sudah tau nama tag atau attribut ID atau attribut Class yang dimiliki oleh tag yang ingin dimodifikasi, maka anda bisa dengan mudah mendekorasi dan mengatur tataletak dari tag tersebut melalui 1 dari 3 cara diatas  (bisa melalui nama tag-nya, attribut id, atau atribut class).

1. Jika tag didekorasi menggunakan nama tag maka format perintahnya adalah:
nama_tag{perintah-perintah_css}
jika tag tersebut didekorasi melalui nama tag, maka cukup menggunakan nama tag saja didepannya.

2. Jika tag didekorasi melalui Atrribut class maka format perintahnya adalah:
.nama_attribut_class{perintah-perintah_css} 
Jika tag tersebut didekorasi melalui attribut class, maka perintah css harus dimulah dengan "." (baca titik) atau dot.

3. Jika tag didekorasi melalui Atribut ID, maka format perintahnya adalah:
#nama_attribut_id{perintah-perintah_css}
Inaget ketika kita mendekorasi tag melalui atribut ID, maka perintah CSS untuk mendekrasi tag tersebut harus dimulai dengan tanda # (baca: pagar).

Sebagai contoh:
Misalkan saja saya punya struktur html yang ingin dimodifikasi adalah sebagai berikut:
<html>
     <head>
         <title>contoh</title>
     </head>
     <body>
          <div id='main_content' class='main_content'>
               <h1 class='titleku' id='xxx'>Teknik dasar memodifikasi tampilan blog</h1>
          </div>
    </body>
</html>

Struktur html diatas jika dibaca oleh browser maka kan menampikan tulisan besar tebal dengan ukuran H1:
 Teknik dasar memodifikasi tampilan blog 

 Misalkan saja, saya ingin memberikan warna biru pada tulisan tersebut dan tulisannya ingin dirubah menjadi besar semua, ingat urusan mendesain adalah keja script CSS, maka salah satu cara adalah dengan menggunakan kode CSS sebagai berikut:

a. jika menggunakan attribut class (lihat attribut class untuk h1 diatas adalah titleku [class='titleku']), bisa dilihat bahwa atribut class yang dimiliki oleh tag h1 diatas namanya adalah titleku, maka untuk memodifikasi tulisan H1 tersebut kita bisa menggunakan nama class dari tag tersebut sebagai berikut:
.title{color : red; text-transform:uppercase}
b. atau bisa juga menggunakan nama tagnya (h1) menjadi
h1{color:red; text-transform:uppercase}
atau bisa juga melalui attrbut ID nya lihat h1 memiliki id='xxx' jadi nama attribut id nya xxx
#xxx{color:red; text-transform:uppercase}

kode css untuk memodifikasi halaman situs tersebut bisa disimpan diantara kode <head> pada struktur template blog anda
<head>
...
     kode-css
...
</head>

Sebenarnya CSS adalah script yang paling mudah jika dibandingkan dengan script atau bahasa pemrograman lainnya, agar anda bisa secara mudah mendekorasi halaman situs atau halaman blog anda, maka Anda harus mengusai CSS.

Ada banyak sekali teknik CSS untuk memodifikasi halaman situs, contoh diatas adalah contoh sederhana saja, yang jelas jika anda sudah tau tekniknya kode CSS itu mudah sekali dipelajari dan asik ketika dipraktekan.

Sebagai recomendasi untuk belajar CSS anda bisa belajar di situs W3School.com/css tutorial sangat lengkap untuk anda sebagai pemula.

Juga anda bisa belajar tutorial HTML juga disana w3school.com/html

Silahkan anda pelajari di situs tersebut sampai anda paham.

Bagaimana cara Memodifikasi Blog Anda Sendiri

Setelah memahami bagaimana cara kerja script CSS memodifikasi tag html, ini bisa diterapkan untuk blog anda manakala anda memiliki keinginan ingin memodifikasi tampilan halaman blog anda.

Caranya hampir sama kunci utamanya anda terlebih dahulu harus memahami instruksi-instruksi CSS.

Mungkin anda akan sedikit bingung bagaimana cara memodifikasi tampilan blog anda, sementara kalo dilihat template blog itu memiliki strukturkode yang begitu banyak, wah bisa pusinng dong!.

Mungkin bisa pusing jika anda tidak tau caranya.

Tutorial ini saya sajikan untuk blogger pemula yang kebetulan belum memahami bagaimana cara memodifikasi tampilan blog. saya akan kasih tau caranya.

Teknik Sederhana cara memodifikasi Tamplan Blog Anda?

Apapun bagian blog yang tampilannya bisa anda lihat, itu bisa anda modifikasi, misalkan menu, background, gambar, text, jenis tulisan, warna tulisan, tata letak dll, tapi anda harus tau nama tag atau atribut ID atau attribut class dari Tag yang ingin anda modifikasi.

langkah-langkah untuk memodifikasi halaman blog anda adalah sebagai berikut:

Silahkan anda buka Tampilan blog yang ingin anda modifikasi, misal untuk blog saya pribadi:



Misal dari tampilan blog diatas saya akan memodifikasi warna background menunya yang awalnya   berwarna orange saya akan modifikasi menjadi warna hitam.

Langkah-langkahnya adalah sebagai berikut:

a. Langkah pertama, kita harus cari tau tag apa yang digunakan oleh tampilan menu tersebut, kita bisa lihat juga attribut class atau attribut id yang digunakan oleh menu tersebut jika memang ada.

Untuk mencari tag yang digunakan oleh menu tersebut pasti akan sulit jika dilakukan secara manual, silahkan saja anda coba akses kode template blog anda pasti anda akan pusing melihat rangkaian kode template yang begitu banyak.

Cara termudah adalah dengan menggunakan bantuan dari browser, browser saat ini sudah menyediakan fasilitas yang bisa digunakan oleh pengembang. salah satunya adalah fasilitas inspect element,


b. Klik kanan pada tampilan halaman yang ingin dimodifikasi, kemudian pilih menu inspect elemet
sebagai contoh disini saya menggunakan browser mozila firefox. tampilannya seperi gambar dibawah ini:

Sebuah halaman web baik itu blog maupun website ketika anda akses sehingga tampil di halam Teknik dasar cara memodifikasi desain tampilan blog untuk pemula

Dengan memilih menu inspeksi elemen, fasilitas inspeksi elemen akan membantu anda untuk mempermudah  mendapatkan informasi nama TAG yang digunakan eleh sebuah tampilan (misalkan menu, logo warna text dll) yang akan anda modifikasi dan juga script CSS yang sedang digunakan oleh tag tersebut.

Akan muncul tampilan fasilitas inspeksi elemen seperti gambar dibawah ini:

Sebuah halaman web baik itu blog maupun website ketika anda akses sehingga tampil di halam Teknik dasar cara memodifikasi desain tampilan blog untuk pemula

Akan ada 3 bagian dari fasilitas inspeksi elemen yang nanti dapat digunakan untuk memodifikasi tampilan desain blog anda:

1. Tool Inspektor (untuk memudahkan menemukan tag html yang anda ingin modifikasi)
2. Struktur HTML window, menampilkan kode html halaman situs.
3. CSS window, yang memperlihatkan struktur script css yang menyusun tampilan tag yang dipilih.

Untuk memodifikasi tampilan, ada dua cara, memilih tag di bagian struktur html window, kemudian memodifikasi cssnya untuk melihat tapilan secara temporary. atau dengan menggunakan bantuan tool inspektor.

Agar mudah memilih tag yang tepat sesuai dengan bagian tampilan yang ingin kita modifikasi kita akan menggunakan Tool Inspektor,

Silahkan tekan tool Inspektor, kemudian arahkan pada bagian tampilan blog anda yang ingin anda modifikasi.

Sebagai contoh diatas, karena saya akan merubah tampilan background menu maka saya akan mengarahkan tool inspektor tersebut ke menu pada tampilan blog saya kemudian saya klik menu tersebut untuk melihat Tag html dan juga CSS yang menyusun tag tersebut. akan terlihat seperti gambar dibawah ini:

Sebuah halaman web baik itu blog maupun website ketika anda akses sehingga tampil di halam Teknik dasar cara memodifikasi desain tampilan blog untuk pemula

karena saya ingin merubah warna background menu blog saya, maka saya arahkan tool inspektor ke menu Home blog saya, menu tersebut akan terseleksi, dan terdapat informasi ukuran dari menu tersebut, silahkan anda klik jika seleksi sudah benar.

Anda akan melihat informasi di bagian bagah fasilits inspek elemen mengenai TAG HTML untuk menu tersebut dan juga CSS yang sedang digunakan oleh menu tersebut.

Sebuah halaman web baik itu blog maupun website ketika anda akses sehingga tampil di halam Teknik dasar cara memodifikasi desain tampilan blog untuk pemula


Anda akan diperlihatkan  tag HTML yang digunakan menu tersebut, dan juga script CSS yang sedang digunakan oleh tag HTML tersebut,

Di bagian HTML window
ternyata diketahui bahwa menu tersebut mengunakan tag a, yang letaknya di dalam tag li dengan attribut class="dropdown", dan tag li letaknya didalam tag Nav dengan id="navbarsecond"

Di CSS WIndow
Kita bisa lihat script css untuk tag a tersebut dibagian CSS Window. ternyata diketahui tag tersebut dimodifikasi dengan perintah CSS:
#navbarsecond .dropdown   a {
    color: #fff;
    font-size: 14px;
    font-weight: normal;
    padding: 5px 10px;
    background-color: #ea5e00;
    line-height: 1.2;
    margin-bottom: 10px;
}

untuk memodifikasi tag tersebut menggunakan #navbarsecond .dropdown   a, diakses menggunakan struktur dari tag orang tuanya dulu.

Karena kita akan memodifikasi background dari menu tersebut, maka kita tinggal ubah di bagian background-color menjadi :black atau #000

 silahkan anda edit (double click di bagian css window) di baris background-color: #ea5e00;
Kemudian silahkan anda ganti menjadi black atau #000. sperti ilustrasi gambar dibawah ini:

Sebuah halaman web baik itu blog maupun website ketika anda akses sehingga tampil di halam Teknik dasar cara memodifikasi desain tampilan blog untuk pemula

Kemudian tekan enter, maka anda akan melihat perubahan pada menu yang awalnya berwarna orange menjadi hitam, terlihat seperti gambar dibawah ini:

Sebuah halaman web baik itu blog maupun website ketika anda akses sehingga tampil di halam Teknik dasar cara memodifikasi desain tampilan blog untuk pemula

Penting :
Tampilan di atas hanya bekerja pada memory alias tidak permanen, jika blog anda direfresh maka tampilannya akan kembali ke awal seperti semula.

langkah tersebut harus anda tempuh sebelum anda menerapkan perubahan pada template blog anda, jika perubahan yang anda lakukan sesuai dengan yang anda inginkan maka anda bisa langsung menerapkannya pada template blog anda.

Lakukan perubahan pada template blog anda 

Setelah anda melihat perubahan yang terjadi melalui menu inspek element jika modifikasi yang anda lakukan sudah kelihatan cocok dengan desain yang anda inginkan, maka selanjutnya agar perubahan tersebut permanen untuk blog anda anda harus melakukan perubahan pada tempalte blog anda.

Langkah-langkahnya adalah sebagai berikut:

a. Pastikan anda sudah masuk ke akun blogspot anda

b. Aktifkan dengan memilih blog yang anda ingin modifikasi

c. Pada bilah menu sisi kiri pilih menu template > edit HTML untukmengaktifkan editor template.

d. Tekan CTRL+F untuk menampilkan mode pencarian

karena css yang kita modifikasi tadi menggunakan kunci #navbarsecond .dropdown   a, silahkan anda cari menggunakan text tersebut,

Setelah text tersebut ditemukan silahkan anda ubah di bagian yang sama ketika anda melakukan modifikasi menggunakan inspeksi element. yaitu untuk bagian
background-color:#.....
menjadi
background-color:#000

e. Simpan template blog anda.

Jika berhasil maka perubahan pada desain template blog anda akan permanen.



Kesimpulan.

Contoh diatas hanya sekedar ilustrasi sederhana bagaimana anda bisa melakukan modifikasi pada desain tampilan blog anda, sebenarnya banyak yang bisa anda lakukan yang penting anda mengusai perintah-perintah CSS dan juga HTML, dengan mengusai perintah CSS anda akan bisa memodifikasi tampilan yang meliputi tata-letak dan juga perwarnaan tampilan blog anda sesuai dengan yang anda inginkan.

Apapun flatform template blog yang anda gunakan untuk memodifikasi tampilan dan teta letak yang digunakan adalah kode CSS, namun mungkin cara meletakannya mungkin akan sedikit berbeda. 


Demikian artikel tentang Teknik dasar cara memodifikasi desain tampilan blog, semoga bermanfaat. dan selamat mencoba.