MAKALAH DESAIN WEB PEMBELAJARAN

MAKALAH

DESAIN WEB PEMBELAJARAN

Oleh

PAJRIN

431 810 814

PROGRAM STUDI TEKNOLOGI PENDIDIKAN

STKIP MUHAMMADIYAH SIDENRENG RAPPANG

TAPEL 2017/2018

1.      Pengertian HTTP, Sejarah HTTP dan Cara Kerja HTTP

HTTP (Hypertext Transfer Protocol) adalah suatu protokol yang digunakan untuk mentransfer dokumen/halaman dalam WWW (World Wide Web). HTTP mendefinisikan bagaimana suatu pesan dapat diformat dan dikirimkan dari client ke server atau sebaliknya. HTTP mengatur aksi apa saja yang harus dilakukan oleh web server dan web browser sebagai respon atas perintah-perintah yang ada pada protokol HTTP ini.

HTTP merupakan sebuah protokol untuk meminta/menjawab antara klien dan server. Sebuah klien HTTP (seperti web browser atau robot dan lain sebagainya), biasanya memulai permintaan dengan membuat hubungan ke port tertentu di sebuah server Webhosting tertentu (biasanya port 80). Klien yang mengirimkan permintaan HTTP juga dikenal dengan user agent. Server yang meresponsnya, yang menyimpan sumber daya seperti berkas HTML dan gambar, dikenal juga sebagai origin server. Di antara user agent dan juga origin server, bisa saja ada penghubung, seperti halnya proxy, gateway, dan juga tunnel. Sumber yang hendak diakses dengan menggunakan HTTP diidentifikasi dengan menggunakan Uniform Resource Identifier (URI), atau lebih khusus melalui Uniform Resource Locator (URL), menggunakan skema URI http: atau https:.

Protokol yang digunakan untuk melayani fasilitas web/www ini mengunakan HTTP.Akhir-akhir  ini, hampir setiap lembaga mempunyai website yang digunakan sebagai sarana informasi yang up-to-date. Untuk dapat menghasilkan fasilitas tersebut, harus menyimpan dokumen web di web server agar dapat dibuka dari client.  Hal ini sering disebut dengan hosting, Untuk dapat membangun webserver dibutuhkan software sebagai web server, sofware ini sangat banyak sekali namun untuk platform Linux, web server yang terkenal handal adalah Apache.

Sejarah Protokol HTTP pertama kali dipergunakan dalam WWW pada tahun 1990. Pada saat tersebut yang dipakai adalah protokol HTTP versi 0.9. Versi 0.9 ini adalah protokol transfer dokumen secara mentah, maksudnya adalah data dokumen dikirim sesuai dengan isi dari dokumen tersebut tanpa memandang tipe dari dokumen.

Kemudian pada tahun 1996 protokol HTTP diperbaiki menjadi HTTP versi 1.0. Perubahan ini untuk mengakomodasi tipe-tipe dokumen yang hendak dikirim beserta enkoding yang dipergunakan dalam pengiriman data dokumen.Sesuai dengan perkembangan infrastruktur internet maka pada tahun 1999 dikeluarkan HTTP versi 1.1 untuk mengakomodasi proxy, cache dan koneksi yang persisten.

Bagaimana cara kerja dari HTTP tersebut?

Bila kita mengklik link hypertext atau kita mengetikkan suatu alamat atau URL pada internet browser, maka Anda sedang mentransfer URL ke browser, dan Dari URL ini browser Anda tahu server mana yang akan dihubungi dan file apa yang diminta kemudian web browser akan mengirimkan perintah HTTP ke web server. Web server selanjutnya akan menerima perintah ini dan melakukan aktivitas sesuai dengan perintah yang diminta oleh web browser. Hasil aktivitas tadi akan dikirimkan kembali ke web browser untuk ditampilkan kepada kita.

Bagaimana proses transaksi data HTTP?

Selama transaksi http, para pemohon atau yang dikenal sebagai klien, meminta file ke server melalui web browser.

Skema normal :

a.    Klien terhubung ke host,

b.   Server menerima koneksi,

c.    Klien permintaan file,

d.   Server mengirimkan respon (termasuk file atau tidak).

Contoh permintaan dan penerimaan HTTP

Pertama, Anda ingin http header halaman contoh (halaman ini). Jadi, Anda mengisi alamat URL pada browser yaitu “http://ww
w.randyseptian.web.id/2011/03/pengertian-dan-cara-kerja-http/” kemudian browser Anda akan tersambung dan mengirimkan: Connect to 116.199.xxx.xxx on port 80 … ok GET /2011/03/pengertian-dan-cara-kerja-http/ HTTP/1.1 Host: http://www.randyseptian.web.id Connection: keep-alive User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.15) Gecko/20110303 AlexaToolbar/alxf 2.11 Firefox/3.6.15 GTB7.1 Accept-Encoding: gzip Accept-Charset: ISO-8859-1,UTF 8;q=0.7,*;q=0.7 Cache-Control: no-cache Accept-Language: de,en;q=0.7,en-us;q=0.3

Penjelasan: browser Anda meminta halaman yang disebut “/2011/03/pengertian-dan-cara-kerja-http/” menggunakan protokol http1.1. Browser Anda menggunakan bahasa Inggris dan Firefox 3.6.15. Browser Anda menginginkan koneksi (socket) tetap terbuka antara Anda dan http://www.randyseptian.web.id, sehingga dapat meminta file lebih lanjut.

Status: HTTP/1.1 200 OK Date:Wed, 23 Mar 2011 03:01:08 GMT Server:Apache/2.2.13 (Unix) mod_ssl/2.2.13 OpenSSL/0.9.8e-fips-rhel5 mod_auth_passthrough/2.1 mod_bwlimited/1.4 FrontPage/5.0.2.2635 PHP/5.2.10
X-Powered-By:PHP/5.2.10 X-Pingback:http://www.randyseptian.web.id/xmlrpc.php Connection:close Transfer-Encoding:chunked Content-Type:text/html; charset=UTF-8
[ISI FILE…]

Pertama, web server mengetahui halaman yang Anda inginkan dan bisa mengirimkannya: kode 200. Lalu, Anda memiliki beberapa info lebih lanjut tentang server: Apache di Unix, socket ditutup setelah halaman html, tanggal modifikasi terakhir. Dan akhirnya, file yang diminta.

2.      Penggunaan Website Untuk Kepentingan Dunia Bisnis

a.       Usaha Kecil Anda Dapat Kredibilitas

Hari ini, konsumen semakin banyak menggunakan internet untuk mencari produk atau layanan yang mereka butuhkan. Usaha kecil Anda akan mendapatkan kredibilitas dengan memiliki website. Tanpa website, pelanggan potensial akan pergi ke pesaing Anda yang memiliki website. Jika Anda sudah memiliki situs web tetapi masih apa adanya, ada baiknya Anda desain ulang dengan tampilan yang lebih profesional, sehingga akan memberikan bisnis Anda kepercayaan yang lebih besar. Untuk bisnis rumahan, ini sangat menguntungkan karena Anda tidak harus memiliki toko offline terlebih dahulu untuk mempromosikan produk atau jasa.

b.      Website Bisa Menghemat Uang Anda

Sebagai pemilik usaha kecil, Anda mungkin berpikir Anda tidak mampu membuat sebuah website yang profesional. Meskipun biaya merancang sebuah situs web bervariasi, sebuah situs web untuk usaha kecil umumnya berbiaya di bawah Rp.500.000,- per bulan. Coba bandingkan dengan biaya iklan di surat kabar, ketika Anda mempertimbangkan pasar potensial Anda dapat dicapai dengan website, itu adalah cara yang sangat efektif untuk mempromosikan bisnis Anda.

c.       Bisa Selalu Memberikan Informasi Terbaru Kepada Pelanggan

Coba pikirkan website Anda sebagai brosur online atau katalog. Adalah jauh lebih mudah dan lebih cepat untuk memperbarui informasi tentang produk dan layanan di situs Anda daripada dalam bahan cetak, sehingga cara yang efektif untuk membiarkan pelanggan Anda tahu tentang kedatangan produk baru, acara mendatang, promosi khusus, atau layanan baru yang sedang Anda tawarkan. Tidak seperti iklan cetak yang cepat menjadi usang, situs web Anda dapat memberikan informasi terbaru.

d.      Mudah Dijangkau

Sebuah website bisa dijangkau oleh Anda dan pelanggan potensial selama 24 jam sehari, 7 hari seminggu, dan 365 hari dalam setahun. Mereka bisa dengan nyaman melihat produk dan jasa Anda ketika toko atau kantor offline ditutup. Dengan gaya hidup yang selalu sibuk di masa kini, ini adalah selling point yang besar ketika membuat keputusan pembelian.

e.       Website Memungkinkan Untuk Menarget Pasar Yang Lebih Luas

Sebagai penjual eceran suatu produk, sebuah situs web eCommerce atau toko online adalah tempat yang bagus untuk menjual produk Anda ke pasar yang lebih luas, bahkan jasa dapat dibuat tersedia secara global.

f.       Memberikan Tempat Untuk Memperlihatkan Karya Anda

Tidak peduli apa pun jenis usaha yang Anda jalani, sebuah situs web adalah tempat yang bagus untuk memperlihatkan karya Anda. Dengan memasukkan portofolio atau galeri foto, serta testimonial tentang pekerjaan Anda, Anda dapat menunjukkan apa yang membuat bisnis anda unik.

g.      Website Bisa Menghemat Waktu

Tahukah Anda, memberikan informasi kepada pelanggan pasti membutuhkan waktu, apakah itu lewat telepon, bertatap muka, melalui brosur, ataupun dalam email. Dengan katalog online, Anda dapat memberikan banyak informasi tentang produk dan jasa Anda. Setelah website Anda jadi, maka itu akan tersedia untuk para pelanggan Anda tanpa batas, dan sangat menghemat waktu Anda.

h.      Bisa Meningkatkan Layanan Pelanggan

Mungkin Anda menjual produk ramah lingkungan dan ingin berbagi tips tentang cara mendaur ulang. Atau mungkin Anda seorang akuntan dan ingin memberikan nasihat kepada klien Anda tentang cara untuk menyederhanakan praktik pembukuan mereka. Nah, dengan menambahkan halaman tanya jawab, menambahkan artikel, atau mengunggah newsletter untuk menjawab semua pertanyaan pelanggan Anda, maka Anda dapat membuat para pelanggan selalu up-to-date.

3.      Program Apikasi Web

a.      Adobe Dreamweaver

Pengertian Adobe Dreamweaver

Adobe Dreamweaver adalah program yang digunakan untuk membuat atau menyunting halaman web. Software Dreamweaver dikeluarkan oleh Adobe System. Aplikasi ini banyak digunakan oleh para programmer, desainer dan developer web dikarenakan kemudahan dalam penggunaanya, kelengkapan fiturnya dan juga dukungannya terhadap teknologi terkini.

Adobe Dreamweaver menyediakan fitur editor WYSIWYG (What You See is What You Get) atau dalam bahasa kesehariannya disebut Design View. Maksudnya adalah, tampilan hasil akhir web kita nanti akan sama dengan tampilan pada saat proses perancangan halaman web. Dengan segala fitur yang ada pada Adobe Dreamweaver, membuat suatu web bukanlah hal yang sulit. Kita tidak perlu menguasai berbagai macam bahasa pemrograman web seperti HTML, CSS, Javascript, PHP, dan sebagainya. Cukup mengetahui dasar dasarnya saja, karena didalam aplikasi ini sudah disediakan alat alat otomatis.

Selain itu, aplikasi ini juga menyediakan 3 macam tampilan yaitu Code View, Design View dan Split View. Code View cocok untuk para programmer yang terbiasa dengan kode kode pemrograman web. Sedangkan Design View cocok untuk para Designer yang terbiasa dengan visual. Jika ingin menggunakan keduanya, bisa memilih Split View.

Fungsi Adobe Dreamweaver

-          Untuk mendesain situs web

-          Untuk membuat program berbasis web

-          Untuk membuat template blog

-          Untuk membuat situs web tanpa bersentuhan langsung dengan bahasa pemrograman

Sejarah Adobe Dreamweaver

Dulunya, program ini bernama Macromedia Dreamweaver, dan dikelola oleh Macromedia. Versi pertamanya dirilis pada Desember 1997 dengan nama Macromedia Dreamweaver 1.0 untuk sistem operasi Mac. Kemudian pada Maret 1998, muncul versi pertama untuk sistem operasi windows yaitu Macromedia Dreamweaver 1.2 Macromedia Dreamweaver terus berkembang sampai dengan tahun 2005 dengan versi terbarunya yaitu Macromedia Dreamweaver 8.

Kemudian Dreamweaver diambil alih oleh Adobe System sehingga namanya berubah menjadi Adobe Dreamweaver. Pada 16 April 2007, Dreamweaver mengeluarkan versi terbarunya dengan nama Adobe Dreamweaver CS3. Dengan hadirnya HTML5, Dreamweaver kembali merilis versi terbarunya dengan nama Adobe Dreamweaver CS5.5 . Sedangkan sekarang ini, versi terakhir Dreamweaver adalah Dreamweaver CC yang dirilis pada 21 April 2012.

Kelebihan Adobe Dreamweaver Dreamweaver

-          Dapat membuat kerangka website dengan mudah dan cepat Tersedia berbagai macam tema/template Memiliki 3 tampilan yaitu Code View, Design View dan Split View

-          Memiliki Fitur Preview/Live View Kode yang dihasilkan ditulis secara rapi Memiliki alat alat khusus untuk membuat program berbasis web.

-          Mudah dioperasikan oleh pemula

Kekurangan Adobe Dreamweaver 

-          Harga software original-nya mahal

-          Fitur Terbaru Adobe Dreamweaver CC Adobe Dreamweaver terus melakukan pembaharuan.

Fitur fitur terbaru yang disertakan dalam Adobe Dreamweaver CC CSS Designer

Fitur visual editing untuk membantu membuat standar kode web dan menerapkan properti CSS seperti gradient dan shadows. Starter Templates : Template khusus web yang bersifat responsif dan dapat diubah tata letaknya Extract : Dapat mengubah desain web yang sudah dibuat di photoshop menjadi kode web secara otomatis Live View : Tersedia berbagai penambahan fitur seperti insert panel, keyboard shortcut dan HTML Tag Editor yang membuat proses editing lebih cepat dari sebelumnya Full Support HTML5 : Mendukung secara penuh penggunaan HTML5, seperti streaming audio dan video. dan masih banyak lagi fitur lainnya.

b.      CoffeCup  Free Html Editor

CoffeeCup Free HTML Editor adalah Software yang di kembangkan oleh CoffeeCup Inc. Software ini terdiri dari dua versi, yaitu versi gratis (free) dan berbayar (pro). Perbedaan yang terletak antara versi gratis dan berbayar antara lain adalah fitur CSS Menu Designer, Image Mapper, Website Color Schemer, dan FTP Upload yang hanya bisa kamu dapatkan melalui versi berbayar.

CoffeeCup HTML Editor adalah sebuah software yang akan membantu kamu mendesain sebuah Website dengan bahasa HTML secara lebih mudah. Selain mendukung WYSIWYG (what you see is what you get) Software editor ini juga sudah mendukung HTML5 dan CSS3 yang tentunya akan membuat Website kamu jadi lebih hidup dan menarik.

Software ini sangat cocok untuk kamu yang memiliki pengetahuan bahasa HTML ataupun kamu yang baru mempunyai pengetahuan HTML dasar, kalau pun sama sekali tidak mengerti Bahasa HTML maka sebaiknya kamu mempelajari terlebih dahulu dasar-dasar HTML, karena walaupun ada fitur drag dan drop namun sedikit banyak pasti membutuhkan pemahaman tentang Bahasa HTML untuk kamu dapat membangun sebuah Website yang baik.

Setelah selesai mengunduh dan menginstall CoffeeCup HTML Editor, bisa langsung kamu buka program tersebut dan akan muncul tampilan seperti di bawah ini.

Kamu bisa memulai membangun Website kamu dengan memulai halaman kosong melalui tombol New Blank Page atau memulainya dengan menggunakan tema standar bawaan CoffeeCup, yang mana tema ini nantinya bisa kamu ubah lagi sesuai keinginan kamu. Setelah memilih lembar kerja seperti gambar yang ada di atas, maka kamu akan masuk ke halaman utama CoffeeCup HTML Editor mendapatkan tampilan seperti gambar yang ada di bawah ini.

1.      Merupakan pilihan fitur-fitur dari CoffeeCup HTML Editor yang bisa kamu gunakan secara mudah, kamu bisa menggunakan nya hanya dengan meng’klik nya pada area dimana perubahan itu akan kamu terapkan.

2.      Masih merupakan fitur tambahan dari CoffeeCup HTML Editor, yang mana terdapat banyak sekali bermacam-macam tambahan script-script penting yang bisa kamu masukkan ke dalam Website kamu hanya dengan menggunakan double klik. khusus untuk tab My Computer dan My Websiste, adalah merupakan tab informasi mengenai di mana letak dan file-file apa saja yang kamu gunakan.

3.      Adalah screen view atau tampilan Website kamu di lihat dari sisi kode (coding).

4.      Adalah tampilan Website kamu secara WYSIWYG, dimana perubahan tampilan akan langsung terlihat pada tab ini ketika ada script yang kamu tambahkan atau kamu hapus.

c.       PageBreeze Free HTML Editor

PageBreeze Free HTML Editor merupakan aplikasi perangkat lunak yang sangat handal yang dapat Anda gunakan sebagai aplikasi Editor HTML yang memiliki tag visual WYSIWYG dan HTML dasar. PageBreeze Free HTML Editor ini dirancang dengan sangat sederhana, karena sejak awal pengembangannya senantiasa mengusung kesederhanaan dan kemudahan.

Para pengembang memastikan setiap pengguna dengan tingkat kemampuan yang berbeda-beda memiliki kesempatan yang sama untuk dapat membuat websitenya sendiri dengan sangat mudah dan menarik. hanya beberapa kali klik, Anda dapat langsung membuatnya seperti seorang web master profesional.

Catatan: Aplikasi PageBreeze Free HTML Editor ini GRATIS untuk digunakan secara pribadi, pendidikan dan non-profit lainnya.

Berikut ini adalah beberapa fitur kunci dari PageBreeze Free HTML Editor :

1.      Dilengkapi dengan fitur-fitur lengkap yang sangat mudah digunakan, karena menyediakan tampilan dengan mode WYSIWYG HTML editor untuk membuat halaman web.

2.      Dilengkapi sebuah editor visual yang didukung oleh Microsoft Internet Explorer, jadi ANda akan dengan mudah melihat hasil karya Anda sendiri pada browser ini

3.      Memungkinkan Anda menggunakan teks berwarna untuk source code pada editor. Sehingga Anda dapat beralih dari satu source code HTML dan mode visual setiap kali mengklik mouse

4.      Terdapat modus preview yang memungkinkan Anda langsung dapat melihat hasil karya Anda

5.      Memungkinkan Anda untuk dapat mengakses langsung ke ratusan website gratis penyedia template untuk memundahkan Anda mendesain halaman web

6.      Memungkinka Anda melakukan fungsi drag and drop yang membuat proses semakin cepat dan mudah

7.      Terdapat built-in yang terintegrasi dengan layanan pengolah web. Sehingga anda tidak perlu menggunakan bahasa pemprograman, scripting atau pengetahuan teknis lainnya sebutar web developing

8.      Dll

d.      Blue Fish

Bluefish merupakan salah satu aplikasi yang mendukung editor teks yang mendukung bahasa pemrograman. Ya memang benar, aplikasi ini sama halnya seperti aplikasi editor teks pada umumnya. Contoh aplikasi yang lain seperti vim, gedit, notepad++, dan masih banyak lagi.

Bluefish juga dapat merupakan sebuah proyek open source dimana kita dapat berkontribusi untuk menyempurnakan aplikasi editor ini. Tentunya apabila kita sebagai seorang developer, tidak ada salahnya mencoba menikmati ikan biru yang support untuk banyak platform seperti Linux, FreeBSD, MacOS-X, Windows, OpenBSD maupun Solaris.

Keunggulan bluefish editor :

·         Ringan, editor ini berukuran kira-kira 4,4 MB

·         Fitur mumpuni,  fitur di dalam Bluefish yang paling dicari dan disukai adalah autocomplete syntax.

·         Dukungan, Bluefish mempunyai keunggulan untuk pemakai yang fokus dalam pemrograman web. Fitur untuk HTML5 hingga CSS telah terselip dengan baik.

·         Cross Platform, Bluefish dapat berjalan baik di Windows, Linux dan MacOS

e.       Bracket

Bracket adalah code editor yang secara khusus dikembangkan untuk tujuan web design dan front-end development. Project Brackets ini diusung oleh Adobe secara open source dan dikembangkan secara aktif oleh komunitas web developer dan benar-benar dibuat untuk kebutuhan web development, khususnya web design dan front-end development.

Kelebihan dari Brackets

-          Live HTML Development

Selalu membosankan untuk mereload halaman browser hanya untuk melihat perubahan yang mungkin tidak terlalu banyak. Nah dengan Bracket, Kamu bisa langsung melihat hasil perubahan dari kode yang Kamu tulis bahkan tanpa harus melakukan save terlebih dahulu.

-          JS Debugging dengan Theseus

Brackets menggunakan Theseus untuk inspeksi dan debugging Javascript-nya. So… ini akan mempermudah Kamu dalam menginspeksi variable dan control flow bahkan secara asynchronous. Tonton ini Jou..

- Linux: New & Improved

Saat ini juga telah dikembangkan Brackets untuk LINUX (Debian & Ubuntu).

-          Effective Development

Brackets adalah kemampuannya untuk bisa melakukan “Quick Edit”, sehingga kita bahkan bisa melakukan perubahan style dan javascript tanpa harus pindah-pindah dokumen.

f.       Kompozer

Kompozer adalah aplikasi dalam linux yang dapat digunakan untuk membuat website berbasis HTML, css, php, dll. Aplikasi ini memiliki kesamaan yang cukup besar dengan aplikasi yang ada diwindows dalam hal fungsi antara lain, Notepad ++, Adobe Dreamweaver, dll.

System Requirements

-          Linux or Windows OS

-          Pentium IV or Higher Processor

-          512 MB minimum RAM

KompoZer menggabungkan antara manajemen web file dan WYSIWYG web editor, jadi preview web dapat anda lihat langsung pada saat pembuatannya. KompoZer dibuat dengan Gecko, layout engine yang sama digunakan didalam Mozilla, ini super cepat, sangat terpercaya, serta terawat dengan update harian yang didukung oleh komunitas developer yang luas. KompoZer merupakan aplikasi yang berdiri sendiri, berukuran file kecil dan cepat.

Bagi anda yang sudah familiar dengan tampilan DreamWeaver yang sudah populer, anda pasti juga akan merasa nyaman dengan tampilan KompoZer:

·         WYSIWYG (What You See Is What You Get) halaman editor, anda membuat website dengan mudah seperti mengetik pada MS-Word.

·         File Management yang terintegrasi dengan FTP. Cukup login pada website dan tinggal upload atau download file-file anda, melakukan editing secara on-the fyl (online langsung pada web browser).

·         Hasil website menciptakan HTML code yang dapat dipercaya, yang dapat berjalan stabil di berbagai web browser.

·         Berpindah dari tampilan editing WYSIWYG Mode atau HTML Mode menggunakan tab.

·         Editing menggunakan sistem tab, untuk dapat menyimpan banyak halaman secara langsung.

·         Dukungan penuh terhadap pembuatan form, tab

·         le, dan template.

·         Sangat mudah digunakan, aplikasi web editor yang paling canggih dan tersedia untuk sistem operasi Desktop Linux, Microsoft Windows dan Apple Macintosh.

g.      HyperText Markup Language (HTML)

HyperText Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halaman web dengan perintah-perintah HTML.

Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML (Standard Generalized Markup Language), HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web. HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C). HTML dibuat oleh kolaborasi Caillau TIM dengan Berners-lee Robert ketika mereka bekerja di CERN pada tahun 1989 (CERN adalah lembaga penelitian fisika energi tinggi di Jenewa).

4.      Konten dalam Aplikasi Web

a.      Cascading Style Sheet (CSS)

CSS merupakan kumpulan kode program yang digunakan untuk mendesain atau mempercantik tampilan halaman HTML. Dengan CSS kita bisa mengubah desain dari text, warna, gambar dan latar belakang dari hampir semua kode tag HTML. CSS dan HTML saling melengkapi, HTML ditujukan untuk membuat struktur, sedangkan CSS digunakan untuk mengubah tampilan. CSS bukan merupakan bahasa pemograman.

Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file). Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.

CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.

b.      JavaScript

Adalah bahasa skrip yang populer di internet dan dapat bekerja di sebagian besar penjelajah web populer seperti Internet Explorer (IE), Mozilla Firefox, Netscape dan Opera. Kode JavaScript dapat disisipkan dalam halaman web menggunakan tag SCRIPT. JavaScript pertama kali dikembangkan oleh Brendan Eich dari Netscape dibawah nama Mocha, yang nantinya namanya diganti menjadi LiveScript, dan akhirnya menjadi JavaScript.

Navigator sebelumnya telah mendukung Java untuk lebih bisa dimanfaatkan para programmer yang non-Java. Maka dikembangkanlah bahasa pemrograman bernama LiveScript untuk mengakomodasi hal tersebut. Bahasa pemrograman inilah yang akhirnya berkembang dan diberi nama JavaScript, walaupun tidak ada hubungan bahasa antara Java dengan JavaScript.

Javascript pada awalnya berfungsi untuk membuat interaksi antara user dengan situs web menjadi lebih cepat tanpa harus menunggu pemrosesan di web server.  Dalam perkembangan selanjutnya, Javascript dibuat untuk berbagai keperluan yang lebih modern seperti animasi, fitur chatting, efek-efek modern, games, dan lain-lain. Saat ini dalam perkembangannya, Javascript sering sekali mengalami masalah, kode Javascript yang telah kita buat, mungkin bisa saja tidak bekerja di beberapa browser, namun Javascript akan tetap menjadi kebutuhan seorang programmer, apalagi untuk situs yang saat ini mengharuskan memiliki banyak fitur modern sebagai standar.

JavaScript bisa digunakan untuk banyak tujuan, misalnya untuk membuat efek rollover baik di gambar maupun teks, dan yang penting juga adalah untuk membuat AJAX. JavaScript adalah bahasa yang digunakan untuk AJAX.

c.       Hypertext Preprocessor (PHP)

Adalah bahasa skrip yang dapat ditanamkan atau disisipkan ke dalam HTML. PHP banyak dipakai untuk memrogram situs web dinamis. PHP dapat digunakan untuk membangun sebuah CMS.

Pada awalnya PHP merupakan kependekan dari Personal Home Page (Situs personal). PHP pertama kali dibuat oleh Rasmus Lerdorf pada tahun 1995. Pada waktu itu PHP masih bernama Form Interpreted (FI), yang wujudnya berupa sekumpulan skrip yang digunakan untuk mengolah data formulir dari web.

Selanjutnya Rasmus merilis kode sumber tersebut untuk umum dan menamakannya PHP/FI. Dengan perilisan kode sumber ini menjadi sumber terbuka, maka banyak pemrogram yang tertarik untuk ikut mengembangkan PHP.

Pada November 1997, dirilis PHP/FI 2.0. Pada rilis ini, interpreter PHP sudah diimplementasikan dalam program C. Dalam rilis ini disertakan juga modul-modul ekstensi yang meningkatkan kemampuan PHP/FI secara signifikan.

d.      jQuery

Adalah pustaka JavaScript kecil bersumber terbuka yang menekankan pada interaksi antara JavaScript dan HTML. Pustaka ini dirilis pada Januari 2006 di BarCamp NYC oleh John Resig dan berlisensi ganda di bawah MIT dan GPL.

jQuery merupakan sebuah library Javascript yang sangat ringkas dan sederhana untuk memanipulasi komponen di dokumen HTML, menangani event, animasi, efek dan memproses interaksi ajax. jQuery dirancang sedemikian rupa supaya membuat program menggunakan Javascript menjadi relatif sangat mudah. Sesuai slogan nya, write less, do more. Menulis kode lebih sedikit, tetapi melakukan pekerjaan lebih banyak.
jQuery ukurannya cukup kecil, sehingga tidak memperlambat proses loading blog yang kita buat. jQuery juga kompatibel dengan CSS3 dan yang tak kalah penting adalah jQuery bisa berjalan di semua browser – cross browser.

Tanpa library seperti jQuery, menerapkan Javascript mungkin akan lebih sulit, terutama untuk pemula yang baru belajar Javascript. Plugin tambahan seperti JQuery UI (User Interface) semakin memudahkan kita mengembangkan blog yang cantik dan interaktif. Selain itu tersedia plugin-plugin lain yang semakin memperkaya kemampuan jQuery.

e.       HTML (Hyper Text Markup Language)

HTML merupakan bahasa dasar pembutan web.  HTML bukan bahasa pemograman (programming language), tetapi bahasa markup (markup language), terdapat banyak bahasa pemograman web yang ditujukan untuk memanipulasi kode HTML, seperti JavaScript dan PHP.  HTML menampilkan berbagai informasi di dalam sebuah penjelajah web internet dan pemformatan hypertext  sederhana yang ditulis dalam berkas format ASCII (American Standard Code for Information Interchange) agar dapat menghasilkan tampilan wujud yang terintegerasi.  

Secara garis besar, terdapat 4 jenis elemen dari HTML:

1.      Struktural. Tanda yang menentukan level atau tingkatan dari sebuah tulisan (contoh, < h1> Rules</h1> akan memerintahkan peramban untuk menampilkan "Rules" sebagai tulisan tebal besar yang menunjukkan sebagai Heading 1

2.      Presentasional . Tanda yang menentukan tampilan dari sebuah tulisan tidak peduli dengan level dari tulisan tersebut (contoh, < b> boldface</b>akan menampilkan bold. Tanda presentasional saat ini sudah mulai digantikan oleh CSS dan tidak direkomendasikan untuk mengatur tampilan tulisan

3.      Hyperteks. Tanda yang menunjukkan pranala ke bagian dari dokumen tersebut atau pranala ke dokumen lain (contoh, < a href="http://www.erudeye.id/"> Erudeye</a> akan menampilkan erudeye.id sebagai sebuah hyperlink ke URL tertentu),

4.      Elemen widget yang membuat objek-objek lain seperti tombol (< button>), list (< li>), dan garis horizontal (< hr>). Konsep hypertext pada HTML memungkinkan pembuatan link pada suatu kelompok kata atau frasa untuk menuju ke bagian manapun dalam World Wide Web