AndriTeguhWeb

Belajar HTML Dasar

2017-03-25T19:09:00.000-07:00

HTML

Singkatan dari HyperText Markup Language yaitu bahasa pemrograman standar yang digunakan untuk membuat suatu halaman web yang kemudian dapat diakses untuk menampilkan berbagai konten yang dimuat halaman web tersebut. HTML juga dapat digunakan sebagai link atar situs ataupun file yang dapat dihubungkan langsung ke jaringan internet maupun jaringan localhost.

HTML menggunakan kode-kode tertentu (tag) untuk menyatakan konten yang akan diterjemahkan oleh browser agar halaman yang diakses menampilkan konten yang sesuai dengan tag yang telah dibuat, contohnya jenis, ukuran dan warna huruf.

jadi, fungsi utama HTML adalah :

1. Membuat halaman web

2. Menampilkan berbagai konten dalam sebuah browser

3. Membuat Link menuju halaman web atau file lain menggunakan kode tertentu

Struktur Penulisan HTML

Tidak case sensitive, artinya penulisan huruf besar ataupun kecil dalam script HTML sama saja dan tidak menjadi masalah.
Penulisan dibatasi oleh tag (penanda) yang diberi lambang <…> dan diakhiri atau ditutup dengan lambing </…> isi titik-titik adalah tag yang dikenal dalam HTML, namun terdapat pula tag yang tidak perlu ditutup dengan </…>.

Contoh dari struktur penulisan HTML adalah sebagai berikut :

jika di tampikan dalam browser, maka HTML di atas akan terlihat seperti ini :

Dari contoh struktur penulisan HTML diatas, terdapat tag-tag HTML diantarany

<html>

Setiap dokumen html biasanya diawali dan diakhiri dengan tag HTML, yang berfungsi untuk memberi tahu browser bahwa didalam tag tersebut terdapat dokumen HTML.

<head>

Merupakan tempat disimpannya bagian header dari suatu website, header juga memuat tag meta yang biasa digunakan untuk menemukan informasi tertentu mengenai dokumen HTML.

<title>

Digunakan untuk menyimpan judul dari halaman suatu website yang nantinya akan ditampilkan pada titlebar browser, perhatikan titlebar pada contoh gambar.

<body>

Seperti namanya, tagini merupakan tubuh dari suatu halaman web. Digunakan untuk meletakan content (text, gambar, link) dan semua yang hendak ditampilkan pada webpage atau halaman suatu website.

Setiap tag biasanya merupakan suatu pasangan yang disebut dengan :

tag awal, dinyatakan dengan bentuk <namaTag>

tag akhir , dinyatakan dengan bentuk </namaTag> (terdapat tanda slash)

formatnya : <namaTag>konten yang akan ditampilkan</namaTag>, seperti contoh yang telah kita lihat di atas

<title>Mari Belajar Pemrograman Web</title>

Gampang kan, nah.. selain itu, setiap tag juga memiliki atribut.

Atribut

Apa itu atribut ? mari ubah skrip latih1 menjadi seperti berikut.

Setelah skrip disimpan dan di panggil melalui browser maka akan terlihat seperti ini

Ada perbedaan dengan skrip sebelumnya kan.? Yup.. warna teksnya berubah dari hitam menjadi biru, itu karena kita menambahkan atribut pada tag <body>, adapun aturan penulisan atribut adalah :

Mengatur Latar Belakang Website

Selain merubah warna teks, kita juga bisa merubah warna latar belakang dengan menggunakan atribur pada tag <body> seperti ini

Dan hasilnya jadi seperti berikut :

Tentunya nilai atribut bisa disesuaikan dengan keinginan kita, untuk warna contohnya, kita bisa menuliskannya langsung dengan teks (dalam bahasa inggris) atau bisa juga denga menuliskan kode warna yang di tulis dengan format heksa #000000, untuk contoh di atas kita bisa mengganti nilai atribut dengan #0000FF untuk warna biru, jadi kodenya seperti ini

Berikut ini 16 warna dalam bentuk kode dengan format heksa :

Black	#000000	White	#FFFFFF	Red	#FF0000
Blue	#0000FF	Yellow	#FFFF00	Gray	#808080
Green	#008000	Lime	#00FF00	Navy	#000080
Aqua	#00FFFF	Fuchsia	#FF00FF	Maroon	#800000
Orange	#FFA500	Olive	#808000	Purple	#800080
Teal	#008080	Silver	#C0C0C0

Mengubah Latar Belakang Website Dengan Gambar

Naah.. pada contoh di atas latar belakang web kan pake warna, terus kalo mau pake gambar bisa gak ya.? Bisa banget tentunya. Kita tinggal ubah lagi atribut tag <body> nya menjadi :

Dengan catatan gambar (dalam contoh ini corefight.jpg) bedara satu folder dengan file html yang menggunakan gambar tersebut sebagai background nya, kita bisa salin manual gambar yang ingin di pakai kedalam folder yang berisi file html yang akan mengunakan gambar tersebut, mmmhhh.. agak ribet ya.. tapi kalau kita menggunakan editor sekelas Adobe Dreamweaver tentu tidak perlu repot-repot seperti itu, karena saat kita menuliskan atribut pada tag, kita langsung disuguhkan menu browse, seperti berikut

Dengan menekan enter atau mengklik menu Browse, kita tinggal memilih gambar yang akan di pakai dan jika gambar yang kita pilih berada pada folder yang berbeda dengan file html yang kita buat maka akan muncul pesan seperti ini :

dengan meng-klik "Yes" maka gambar yang kita pilih akan otomatis tersalin ke folder tempat disimpannya file html yang kita buat. Gak peke repot kaan.. dan hasilnya pun akan jadi seperti :

Sepertinya sekian dulu perkenalan kita mengenai HTML serta tag tag yang dapat kita gunakan didalamnya. Semoga bermanfaat.

Adobe Dreamweaver CS6

2017-03-24T05:19:00.001-07:00

Web Editor

Dalam membuat suatu web tentunya kita membutuhkan editor atau aplikasi untuk menulis script html, sebenarnya editor sederhana seperti notepad pun dapat kita gunakan, namun tentu dari sisi fitur masih kurang memadai untuk penulisan kode program. Disini saya menggunakan adobe dreamweaver sebagai edior dalam penulisan program, mari kira bahas lebih detil mengenai adobe dreamweaver.

Adobe Dreamweaver CS6

Salah satu aplikasi yang dapat digunakan untuk melakukan perancangan web baik pemrograman maupun desain secara visual adalah Adobe Dreamweaver. Aplikasi ini secara umum sudah sangat popular. Aplikasi Adobe Dreamweaver menyediakan banyak fasilitas yang dapat digunakan user dalam merancang dan menghasilkan website yang interaktif dan menarik.

Saat pertama dijalankan tampilan awal atau starter page dari Adobe Dreamweaver adalah sebagai berikut:

Bagian-bagian yang terdapat pada Starter Page Adobe Dreamweaver CS5 diantaranya sebagai berikut:

Bagian kiri, yaitu Open a Recent Item merupakan alternatif untuk membuka file, atau recent file. Untuk membuka file, pilih Open pada Starter Page.

Bagian tengah yaitu Create New digunakan untuk membuat halaman web baru. Terdapat beberapa macam tipe file untuk format halaman web yang dapat Anda buat seperti HTML, Coldfusion yang merupakan bahasa script yang digunakan oleh Adobe Coldfusion, Bluedragon, dan sebagainya yang digunakan untuk scripting server-side, PHP (HyperText Preprocessor) serta ASP VBScript (ASP Visual Basic Script). VBScript merupakan bahasa scripting turunan dari bahasa pemrograman Visual Basic.

Jika pada starter page tersebut kita memilih salah satu pilihan bahasa pemrograman pada Create New, maka tampilan dari Adobe Dreamweaver akan menjadi seperti berikut:

Keterangan Gambar :

Document Toolbar

Dokumen Toolbar berisi tombol-tombol yang digunakan untuk mengatur layar kerja dokumen pada dengan cepat, diantaranya Show Code view, Show Code and Design views, dan Show Design view.

Show Code view (Code)

Mode pada mode Code hanya akan menampilkan kode-kode script dari halaman web. Di sebelah kiri layar kerja terdapat Coding tool yang digunakan untuk mengatur kode atau script tersebut.

Show Code and Design views (Split)

Mode tampilan layar ini dikenal dengan mode Split, yaitu menampilkan atau menggabungkan secara bersamaan tampilan layar code dan tampilan layar design.

Show Design view (Design)

Tampilan layar mode Design hanya akan menampilkan dokumen halaman web secara grafis atau visual tampa terlihat script pada Document Windows.

Menu Bar

Menu bar yang terdapat pada Adobe Dreamweaver yaitu File, Edit, View, Insert, Modify, Format, Commands, Site, Window, dan Help. Setiap menu mempunyai beberapa submenu sesuai dengan kategorinya, selain itu juga mempunyai fungsi yang berbeda-beda.

Workspace Switcher

Workspace switcher pada Adobe Dreeamweaver berfungsi untuk mengubah atau mengatur jendela kerja sesuai keinginan, sehingga memudahkan Kita dalam membuat halaman web. Tampilan yang terdapat di dalamnya antara lain adalah mode Designer, Classic, Coder dan lain-lain.

Panel Group

Panel group merupakan salah satu fasilitas yang terdapat pada Adobe Dreamweaver yang berfungsi untuk membantu dalam mengedit suatu halaman web. Panel Groups terletak di sebelah kanan layar kerja dan terdiri dari beberapa panel. Untuk menampilkan panel.

Tag Selector

Tag selector berfungsi untuk menampilkan tag HTML dari objek yang terseleksi. Kita dapat meng-klik <body> untuk memilih keseluruhan elemen dokumen. Tag selector ini terdapat pada Document Window, dan terletak di bawah sebelah kiri.

Property Inspertor

Pada Adobe Dreamweaver terdapat fasilitas Property Inspector yang berfungsi untuk mengatur atau mengedit properti objek-objek yang ada pada halaman web. Property Inspector menampilkan semua properti objek misalnya objek teks, objek gambar, objek tabel yang terseleksi pada jendela kerja. Dalam Property Inspector, Kita dapat dengan mudah mengatur atau mengedit properti objek, yaitu dengan memasukkan nilai-nilai parameter yang disediakan. Secara umum, Property Inspector terdiri dari Page Property, Image Property, Table Property, dan Form Property.

Document Windows

Document windows menampilkan dokument dari halaman web yang aktif, atau dokumen yang sedang diedit. Pada Document window terdapat Title Bar yang menampilkan judul halaman, fasilitas Zoom, Document toolbar, dan Tag selector.

Untuk manual lengkapnya mengenai adobe dreamweaver silakan download DISINI.

Mengenal XAMPP

2017-03-04T06:42:00.000-08:00

XAMPP

Sekarang kita akan kenalan dengan XAMPP, apasih XAMPP itu.? XAMPP merupakan paket instalasi yang berfungsi sebagai web server, selain itu XAMPP juga berfungsi sebagai media pemrograman dan penyimpanan, oo ya, kenapa disebut paket instalasi ? karena di dalam XAMPP sudah terkandung apache sebagai web server, MySQL sebagai database setra pengaturan PHP, jika kita bisa merubah versi PHP dalam folder intalasi XAMPP.

Jadi dengan sekali instal kita sudah memiliki ketiga item tersebut, gak perlu instal satu persatu, selain ribet alias gak praktis juga bisa bermasalah, jadi lebih baik pakai paket instalasi seperti XAMPP. Inslater XAMPP bisa kita download disini

Jika sudah di download sekarang kita instal XAMPP nya, berikut langkah-langkah nya:

Klik 2x file instalasinya, Maka akan muncul jendela Setup Wizard seperti di bawah, lalu klik Next
Selanjutnya kita tentukan letak folder XAMPP, secara default instalasi akan dilakukan pada direktori C:/, tentu kita dapat merubahnya sesuai keinginan dengan menekan tombol Browse, tapi saya sarankan default saja, jika sudah, klik Next.
Berikan tanda ceklis pada pilikan “Install Apache as service” dan “Install MySQL as service”, tujuannya agar server berjalan otomatis saat program XAMPP di buka atau dijalankan, lalu klik Next
Tunggu proses instalasi selesai.
Jendela Complete Setup Wizard akan muncul saat proses instalasi selesai dan klik Finish.
Apabila jendela peringatan firewall sistem operasi muncul, pilih saja Allow access.
XAMPP Control Panel akan muncul apabila proses instalasi berhasil. Pada panel terlihat Apache dan MySQL secara otomatis lansung berjalan, itu karena tadi kita menceklis “Install Apache as service” dan “Install MySQL as service” saat instalasi.

Dan selamat XAMPP kita sudah ter instal.

Eiiitttsss.. Tapi untuk memastikan XAMPP sudah benar-benar terinstal dengan baik, sekarang kita coba buka pada halaman browser, ketikan “localhost/xampp” (tanpa tanda petik) pada adress bar, sebelumnya akan muncul logo XAMPP dan pilihan bahasa dibawah logo, setelah bahasa telah di pilih, maka akan terlihat seperti gambar dibawah.

Untuk mengecek versi PHP kita bisa klik menu PHPinfo()

Dan untuk bembuat databade (MySQL) kita tinggal klik menu phpMyAdmin atau ketikan “localhost/phpmyadmin” (tanpa tanda petik pada adress bar.

dan untuk penjelasan mengenai database yang terdapat pada XAMPP yaitu MySQL, akan kita bahas terpisah pada artikel selanjutnya.

Sekian penjelasan mengenai XAMPP yang bisa penulis sampaikan, semoga bermanfaat dan dapat dengan mudah di praktekan, jangan lupa tulis komentar atau berlangganan melalui email untuk mengenahui update artikel terbaru andriteguhweb. Terimakasih.

Pengertian WEB

2017-02-28T23:49:00.001-08:00

World Wide Web (WWW), lebih dikenal dengan web, merupakan salah satu layanan yang didapat oleh pemakai komputer yang terhubung ke internet. Web pada awalnya merupakan ruang informasi dalam internet, dengan menggunakan teknologi hypertext, pemakai internet dituntut untuk menemukan informasi dengan mengikuti link atau tautan yang disediakan dalam dokumen web dan biasa disebut website atau situs web yang ditampilkan pada browser. Website terbagi menjadi dua macam, yakni:

Website Statis

Website statis adalah situs yang bersifat statis. Website statis didukung oleh file HTML yang berdiri sendiri tampa didukung oleh bahasa pemrograman lain. Pengertian statis disini adalah perubahan content atau isi dari website hanya dapat dilakukan dengan mengedit terlebih dahulu file-file HTML tersebut.

Wesite Dinamis

Website dinamis merupakan sebuah situs web yang biasanya tidak hanya terdiri dari file HTML saja, melainkan gabungan dari bahasa pemrograman lain seperti PHP, Java Script, CSS dan sebagainya, website dinamis dapat melakukan perubahan content atau isi dari website melalui halaman admin tanpa harus terlebih dahulu mengedit file-file pembangun website tersebut. Selain itu website dinamis juga memiliki database sebagai media penyimpanan content atau isi website itu sendiri.

HTTP

Merupakan singkatan dari HyperText Transfer Protocol, merupakan aturan yang biasa digunakan untuk berkomunikasi antara browser dengan web server melalui jaringan internet. HTTP memungkinkan kita untuk dapat mengakses suaru situs web dengan mentransfer data dari web server untuk ditampilkan pada browser dan biasa terlihat pada addressbar di browse.

Nah, adapun bahasa pemrograman web yang biasa di pakai untuk membuat website diantaranya adalah HTML, PHP, AJAX dan CSS, mari kita akan bahas satu persatu.

PERSIAPAN PEMBUATAN WEB

Terus apa aja sih yang harus kita siapkan untuk belajar membuat web ?

Hal yang harus dipersiapkan untuk belajar membuat web adalah :

Niat... kalo gak niat, belajarnya pasti kurang semangat.. :P
Paket perangkat lunak untuk membuat server di lingkup local atau komputer sendiri, contohnya XAMPP, WAMPP, MoWes, PHPTriad dan masih banyak lagi, tapi di sini saya menggunakan XAMPP, alasannya ? karena udah terbiasa pake XAMPP.. hee.. nggak gitu dong.. pasti ada alasannya. Untuk penjelasan serta mendownload paket inslatlasi XAMPP silakan klik DISINI
Program untuk mengedit (editor) yang akan kita gunakan untuk membuat atau mengetik kode HTML, PHP, CSS dan teman temannya, kita bisa menggunakan program sederhana seperti NotePade ++, Code Lobster, atau program yang memiliki fitur lebih lengkap seperti Adobe Dreamweaver.
Yang terakhir adalah Browser, seperti Internet Explorer, Windows Edge, Mozilla, Chrome dan lain sebagainya. Kita tinggal pilih saja mau pakai yang mana.

OK, jika semua persiapan sudah lengkap, kita sudah bisa memulai untuk mempelajari pembuata web. Silakan baca juga artikel lain mengenai Belajar HTML Dasar.