Muchammad Andre Prasetya: WebProgramming










WELCOME TO MY BLOG'S

DON'T FORGET FOR SUBSCRIBE, COMMENT AND ETC

NEW UPDATE

Post Top Ad

Tampilkan postingan dengan label WebProgramming. Tampilkan semua postingan
Tampilkan postingan dengan label WebProgramming. Tampilkan semua postingan

Rabu, 22 November 2017

Cara Membuat Halaman Web Sederhana

November 22, 2017 0

Cara membuat halaman web sederhana sangatlah mudah, dikarenakan perangkat membuat web sangat mudah ditemui di internet dan rata-rata program tersebut gratis. Dalam tutorial kali ini perangkat yang dibutuhkan antara lain:

  • Notepad, atau anda bisa mencoba notepad ++ yang mana dalam program ini tersedia fitur yang lebih baik ketimbang notepad bawaan windows.
  • Browser sebagai program penampil halaman web. Jika anda pengguna windows, biasanya browser IE(Internet Explorer) akan terinstall otomatis. Anda juga bisa menggunakan browser dari google, yaitu Chrome.
yang pertama, buka program notepad dari komputer anda dengan cara:
  • Mengeklik tombol windows
  • Setelah itu klik tulisan All Program
  • Maka akan muncul berbagai folder dan pilih folder yang bernama Accessories
  • Klik folder Accessories, setelah muncul berbagai program dalam folder tersebut, klik program notepad.
Untuk lebih jelasnya silahkan perhatikan gambar dibawah ini.
cara membuka halaman notepad
Pada gambar diatas terdapat dua blok, blok pertama yang bewarna hijau adalah tempat tombol Windows, dan yang kedua blok yang bewarna merah muda adalah tempat program Notepad.
Setelah program Notepad terbuka, silahkan ketikkan skrip dibawah ini atau jika ingin cepat anda bisa langsung mengkopi dan mempaste di notepad anda.
Setelah anda mengetik skrip diatas silahkan anda save dengan cara klik file dan save, ketika muncul halaman save ketikkan nama file ” index.html ” atau terserah anda, yang terpenting adalah nama file diakhiri .html.
Setelah itu lihat kolom dibawah file name, disitu terdapat kolom Save as Type dan pilih All Files. Langkah selanjutnya tinggal klik tombol Save. Untuk lebih jelas silahkan lihat gambar dibawah ini.

cara save file di notepad – nyekrip
Pada gambar diatas terdapat area yang diblok dengan warna hijau, diarea tersebut terdapat tulisan save, dengan mengeklik tulisan ini maka akan muncul halaman Save seperti gambar dibawah ini:

cara save file di notepad 2 
Perhatikan gambar diatas, terdapat dua area yang diblok. Pada area yang diblok dengan warna hijau adalah tempat untuk memberi nama file dan pastikan nama file berakhiran .html. sedangkan area yang diblok bewarna merah muda adalah dropdown untuk memilih jenis file yang akan disimpan, pastikan pilihan berisi All files.
Setelah file html terbentuk dan tersimpan (dalam tutorial ini file disimpan dalam folder yang bernama ” new folder “) maka buka file tersebut dengan cara mengeklik dua kali, setelah itu akan ada browser yang menampilkan halaman web yang telah kita buat. Halaman web tersebut akan terlihat seperti gambar dibawah ini:

ELEMEN DALAM LAYOUT HALAMAN WEB head body
Pada gambar diatas terdapat dua area yang diblok, yang diblok dengan warna hijau adalah letak tulisan yang di ketik dalam Tag Title sedangkan yang bewarna merah muda adalah letak tulisan yang diketik didalam Tag Body.
Tutorial diatas adalah cara bagaimana membuat halaman web yang sederhana, semoga bermanfaat readers.
Read More

Jumat, 10 November 2017

Kelebihan dan Kekurangan CSS (Cascading Style Sheet)

November 10, 2017 0

   CSS Singkatan dari Cascading Style Sheets, cascading itu artinya air terjun. Tapi dalam hal  desain web, CSS diartikan sebagai  aliran dari suatu kode ke kode lain yang saling berhubungan secara sistematis.
   Dalam kamus bahasa Indonesia kira-kira arti CSS adalah : kumpulan kode-kode yang berurutan dan saling berhubungan untuk mengatur format / tampilan suatu halaman HTML. Jadi CSS mampu mengatur tampilan website kita menjadi lebih rapi, dan mempercantik website. Namun, CSS dalam website mempunyai kelebihan dan kekurangan. Berikut penjelasan keuntungan dan kekurangan CSS dalam halaman website:

Kelebihan CSS pada website (Cascading Style Sheets)

  Suatu halaman website dimana menggunakan font times new roman untuk tulisannya, dan warnanya coklat semua. lalu suatu hari kita bosan dengan warna coklat dan ingin mengganti ke warna hitam, kita harus merubah satu per satu halaman website kita dan merubah warna font dari coklat menjadi hitam.
Dengan menggunakan perintah css di website, jika kita ingin menganti semua warna huruf di halman website atau blog,  kita cukup merubah satu baris kode css saja untuk merubah warna font di semua halaman web/blog dari coklat ke hitam.
   Jadi keuntungan CSS terutama lebih praktis dalam perubahan tampilan web. CSS mampu memisahkan desain dengan konten halaman web. Selain itu kelebihan CSS lainnya adalah lebih cepat diakses daripada menggunakan atribut pada html. Lebih cepat lebih baik bukan? CSS menghadirkan sesuatu yang tidak dapat dilakukan oleh HTML. Itu tadi kelebihan/keunggulan menggunakan CSS.

Lalu Apa Kekurangan CSS pada website?

   Tidak semua browser dapat mengartikan kode CSS dengan cara yang sama. Artinya terdapat browser yang tidak support CSS (browser lama). Jadi terkadang tampilan web/blog dengan CSS terlihat baik di browser mozilla forefox tapi berantakan di browser  internet explorer, dll. Oleh kerena itu anda harus memeriksa tampilan situs anda di masing-masing browser dan menyesuaikannya supaya terlihat baik di semua browser dan menambahkan kode-kode khusus browser tertentu jika memang dibutuhkan agar tampilan web anda terlihat baik di semua browser.
   Selain itu kekurangan CSS adalah pembuatannya lumayan lama dalam arti pemberian selektor div, id, class,dll. Tetapi selanjutnya akan mudah jika ada perubahan dari halaman website.
   Semoga informasi kelebihan dan kekurangan CSS pada halaman website bisa dijadikan ilmu baru bagi yang sedang belajar membuat website.
Read More

Konsep Dasar WebProgramming

November 10, 2017 0
Pada bagian ini kita akan memulai mengenal tentang Web Programming, tapi sebelumnya ada baik nya kita mulai dari konsep-konsep dasar dalam web.

1. Konsep Dasar Web 
Sebelumnya anda pasti pernah mendengar kata Web atau WWW. WWW adalah singkatan dari World Wide Web, yaitu suatu ruang informasi dimana sumber-sumber daya yang berguna untuk di indentifikasi oleh pengenal global yang disebut Uniform Resource Identifier (URI).



enter image description here  
URI dibagi menjadi URL dan URN




Uniform Resource Identifier (URI), yaitu terdiri atas string karakter yang digunakan untuk identifikasi atau memberi nama suatu sumber / Source di internet. Jadi fungsinya adalah untuk memungkinkan interaksi dengan representasi dari resource melalui jaringan dengan menggunakan protokol tertentu seperti HTTP.



Hasil gambar untuk HTML



Hypertext Transfer Protocol (HTTP), yaitu salah satu protokol yang digunakan untuk melakukan transfer dokumen dalam WWW. Protokol ini adalah protokol yang ringan yang tidak berstatus dan generik / umum yang dapat digunakan berbagai macam tipe dokumen.


Selain istilah dalam web diatas, ada juga istilah Web Agent yaitu orang atau perangkat lunak yang menambil peran dalam Web/Ruang Informasi.Jadi Web Agent itu ada dua :
  • User Agent       : Users
  • Software Agent : Servers, Proxies, spiders, browsers, dan multimedia players.
2. Perangkat Lunak Web Server

Sebelumnnya saya sudah memberi tahu istilah dari dasar-dasar web dimana terdapat Software Agent, jadi salah satunya adalah Server.


Web Servers adalah sebuah perangkat lunak servers yang berfungsi menerima permintaan dari HTTP/HTTPS dari Client yang dikenal dengan web browser dan kemudian dikirim kembali hasilnya dalam bentuk halaman-halaman web yang pada umumnya berbentuk HTML. Server web yang terkenal diantaranya adalah :
  • Apache, Web server antar platform
  • XAMPP
  • Nginx
  • PHPTriad
  • Apache2Triad
  • Internet Information Service (IIS), hanya dapat berjalan di sistem operasi MS Windows.
Jadi itulah dasar-dasar yang harus diketahui kurang lebih untuk memulai Web Programming. Pada Post selanjutnya kita coba mulai untuk mengerti tentang Web Programming dengan HTML.

3. Penjelasan dan Penerapan Teori HTML
HTML/XHTML merupakan format tampilan yang digunakan untuk menampilkan halaman website. HTML terdiri dari simbol­simbol tertentu yang sering disebut dengan tag. Sebuah halaman website yang valid selalu diapit tag <html></html>. File HTML umumnya memiliki akhiran *.htm atau *.html. Tag­tag pada HTML selalu diawali dengan <x>...</x>, dimana x tag HTML seperti <strong>, <p>, <div>, dan lain­lain. Dibawah ini adalah tabel beberapa tag HTML yang sering digunakan.

Tag HTML beserta keterangannya:
<html></html>       : Tag untuk mengapit halaman HTML
<head></head>      : Tag yang berisi informasi umum dari halaman
<title></title           : Judul Halaman *
<body></body>      : Akan ditampilkan di browser
<style></style>       : Untuk CSS *
<strong></strong>  : Untuk menebalkan teks
<div></div>             : Untuk membuat layer
<a></a>                   : Untuk membuat hyperlink
<p></p>                   : Untuk membuat paragraf
<hn></hn>               : Untuk membuat header **
<span></span>        : Untuk inline style (manipulasi teks)
<!…..>                       : Komentar


* Tag tersebut harus berada didalam tag <head>...</head>
** n dapat berupa angka dari 1 – 5, contoh <h1>...</h1>


1. Buka editor anda (gedit(Linux), Notepad++(Windows), dsb))
2.Ketik kode berikut:
 - <html>
 - <head>
 - <title> Website Pertamaku </title>
 - </head>
 - <body>
 - <h1> Hello World!! </h1>
 - </body>
 - </html>
3. Simpan pada dengan nama hello­world.html
4. Buka browser anda(Firefox, IE, dsb) dan buka file yang baru saja anda buat.

Dikembangkan Oleh: Muchammad Andre P
Read More

Post Top Ad

Add Your Spot Ads There!!