Web

Pendahuluan Pemrograman Web Front End

Apa itu Web?

Web adalah adalah kumpulan halaman yang saling berhubungan dan umumnya di simpan di dalam sebuah server. Umumnya sebuah website berisikan informasi yang disediakan secara perorangan, kelompok, atau organisasi.

Manfaat Web Programming

Bisa mengembangkan cara berfikir yang sistematis.Membuat solusi dari suatu masalah dengan menggunakan teknologi. Contoh, banyak orang kesulitan mencari informasi tentang koding, maka kita bisa mengembangkan web yang membahas tentang hal itu. Contoh lainnya, UMKM (Usaha Mikro Kecil dan Menengah) kesulitan menemukan konsumen, maka kita bisa membuat web yang mempertemukan pelaku usaha dengan konsumennya dari seluruh Indonesia yang mana telah dilakukan oleh Achmad Zaky dengan Bukalapak-nya. Bisa kah kamu menemukan sendiri suatu masalah yang terjadi di sekitarmu dan perlu diselesaikan dengan teknologi web?

Mengapa Belajar Web Programming

Ada banyak hal yang membuat kita harus belajar web programming. Yang pertama, teknologi web adalah teknologi yang masih terus berkembang hingga saat ini. Alasan kedua, meski banyak yang mengatakan mobile akan menggantikan web, namun nyatanya web masih dipakai oleh banyak orang. Bahkan aplikasi mobile sesungguhnya banyak bergantung pada sistem web sebagai pusat penyimpanan data. Alasan yang terakhir, web programming relatif lebih mudah untuk dipelajari untuk orang awam yang masih buta dengan pemrograman. Karena tingkat kesulitan yang lebih rendah, banyak orang yang sebelumnya tidak mengerti programming sama sekali bisa sukses menjadi seorang web programmer.

Konsep Client dan Server

Bedasarkan fungsinya, pemrograman web dibagi menjadi dua yaitu frontend dan backend. Frontend adalah bagian web yang bisa dilihat secara langsung oleh pengguna. Misalnya, saat kita membuka Facebook atau Twitter, maka halaman-halaman yang muncul merupakan bagian dari frontend. Saat kita mendaftar, melakukan login, mengirim pesan, mengunggah gambar, dan aksi dimana kita perlu mengambil atau menyimpan data, maka aksi-aksi tersebut akan terjadi di backend yang tidak bisa kita lihat bagaimana aksi-aksi tadi terjadi.

Frontend dan backend sangat erat kaitannya. Jika sebauh web hanya memiliki frontend, maka ia tidak bisa melakukan sesuatu yang dinamis. Kita tidak bisa mencari data atau menyimpan data di sebuah web yang tidak memiliki backend. Sebaliknya, jika kita hanya membuat backend-nya saja, pengguna tidak bisa berinteraksi dengan web yang kita buat yang menyebabkan web kita tidak ada yang memakai.

Web Server / Hosting

Hosting adalah penyewaan tempat untuk menampung data-data yang dibutuhkan oleh sebuah website yang bisa berbentuk gambar, email, script, file, atau database. Hosting biasanya berbayar dengan pilihan paket-paket yang bisa dipilih dari rentang harga belasan ribu hingga jutaan rupiah tergantung spesifikasi yang dibutuhkan.

Hosting memiliki peran yang sangat penting bagi sebuah web karena hosting lah yang menbuat web kita bisa diakses oleh orang lain melalui internet. Jika web yang dibuat hanya disimpan di komputer/laptop kita saja, maka tidak ada orang lain yang bisa menggunakan web tersebut.

Apa itu HTML ?

Di tahun 1989, Tim Berners Lee dari organisasi European Organization for Nuclear Research (CERN) mencetuskan ide untuk menciptakan suatu script bahasa pemrograman pada suatu dokumen yang kemudian dikenal sebagai html.Tim Berners Lee diketaui sebagai orang yang menciptakan Html. Saat ini penggunaan dan pengembangan Html diatur oleh World Wide Web Consortium (W3C) dan versi terakhir dari Html yang sekarang digunakan adalah HTML5 dimana jenis Html ini memiliki fitur yang lebih baik dari versi html sebelumnya. HTML adalah kepanjangan dari HyperText Markup Language, merupakan bahasa interpretasi yang digunakan pada sebuah halaman web. Html itu sendiri bukanlah sebuah bahasa pemrograman pada umumnya, seperti Java, C, C++, visual basic dan sejenisnya. Html mendeskripsikan struktur halaman web yang ditulis dengan element atau tag yang yang mengapit konten atau teks didalamnya yang akan ditampilkan pada sebuah halaman web oleh browser. Jadi apapun website yang kita lihat pasti awalnya dibangun menggunakan Html.

Apa Kegunaan HTML ?

HTML berguna untuk menampilkan konten, menghubungkan (link) antar halaman, memberi struktur dan informasi terkait dengan sebuah halaman web. Konten sebuah web tidak hanya terbatas pada teks saja, melainkan konten interaktif lainnya seperti video, audio, gambar dan animasi dapat disisipkan dan ditampilkan pada halaman web.

Untuk memulai membuat konten menggunakan HTML maka kita perlu mempersiapkan tools seperti dibawah ini :

• Text Editor : yaitu software aplikasi yang digunakan untuk menulis kode-kode markup dan juga program. Contohnya : Notepad, Notepad ++, Sublime Text dan lainnya.

• Web Browser : digunakan untuk membuka file html yang sudah dibuat pada text editor.Contohnya : Google Chrome, Mozilla Firefox, dan lainnya

Struktur dasar HTML memiliki susunan file seperti berikut ini :

<html> <head> <title>Judul halaman</title> </head> <body>  <h1>Selamat datang</h1> </body> </html>

Tag dan Attribut pada HTML

Tag HTML adalah suatu penanda untuk menandai elemen-elemen dalam suatu dokumen HTML dan Fungsi Tag adalah untuk memberikan instruksi atau memberitahu kepada browser bagaimana suatu objek di tampilkan berdasarkan Tag yang di gunakan, objek disini bisa berupa teks, video, audio dan gambar.

Tag HTML pada umumnya dibuat berpasangan, ada tag pembuka dan ada tag penutup. Format umum tag HTML adalah :

<nama_tag>Konten html</nama_tag>

Tag di <head>

<head> <title>Judul halaman</title> <style> Style </style> <script> Javascript </script> <meta> </head>

Tag di <body>

Teks

<h1>,<h2>,<h3>,<h3>,<h4>,<h5>,<p>,....

Formatting

<b>,<i>,<strong>,<em>,<mark>,<del>,....

Untuk lebih lengkapnya tag html dapat dilihat di [https://www.w3schools.com/tags/]

Attribut HTML

Elemen, Tag dan atribut pada HTML sebenarnya saling berkaitan, hanya saja disini atribut memiliki tugas khusus untuk memberikan informasi atau sifat tambahan yang akan diberikan kepada tag dan elemen yang mengandung atribut tersebut.

Dari tag dan atribut tersebut yang dimaksud dengan atribut adalah name="value". Untuk lebih lengkapnya tag html dapat dilihat di [https://www.w3schools.com/html/html_attributes.asp]

Apa itu CSS ?

CSS dibuat untuk memisahkan konten utama dengan tampilan dokumen yang meliputi layout, warna dan font. Pemisahan ini dapat meningkatkann daya akses konten pada web, memungkinkan untuk membagi halaman untuk sebuah formatting dan mengurangi kerumitan dalam penulisan kode dan struktur dari konten.

Dengan adanya CSS, konten dan desain web akan mudah dibedakan, jadi memungkinkan untuk melakukan pengulangan pada tampilan-tampilan tertentu dalam suatu web, sehingga akan memudahkan dalam membuat halaman web yang banyak, yang pada akhirnya dapat memangkas waktu pembuatan web.

Saat ini penggunaan CSS udah semakin berkembangkan. Hal ini juga akan mempermudah seorang web designer dalam mengembangkan suatu halaman web (situs). Ada 3 cara untuk memasang Script CSS pada dokumen HTML yaitu:

External Style Sheet (file CSS berbeda dari file HTML),

style di definisikan didalam file namafile.css

h1{ font-size:40px; color:orange; }

kemudian namafile.css ditautkan didalam dokumen html

<!-- file index.html> <link href="style.css" rel="stylesheet" type="text/css" /> <h1>Teks Judul</h1>Internal Style Sheet (Kode CSS dipasang di dalam tag head HTML),<style> h1{font-size:40px; color:orange; } </style> <h1>Teks Judul</h1>Inline Style Sheet (Kode CSS langsung dipasang di tag HTML).<h1 style="font-size:40px; color:orange;"> Teks Judul </h1>

Selector

Pada css terdapat selector yang digunakan untuk memilih elemen HTML yang akan dikenai style , pemilihan elemen menggunakan nama tag, nilai atribut, atau pola tertentu.

Berikut adalah salah contoh selector

h1{color : red}

Cara membaca selector diatas adalah "Pilih elemen h1 pada document, lalu set property colornya menjadi red"

Terdapat dua macam tag selector yaitu single selector dan multiple selector (menargetkan tag yang berbeda dengan style yang sama), bisa kita lihat pada contoh dibawah ini:

Contoh single selector

h1{color : red} p{font-size: 16px}

Contoh multiple selector (menargetkan tag yang berbeda dengan style yang sama)

h1,h2,h3,p{ font-family : "arial", sans-sarif; color:#666; }

Selector dengan id dan class

Selector class digunakan untuk menentukan style juga sama seperti id. Bedanya adalah jika id hanya boleh dipanggil satu kali saja, class bisa dipanggil berkali kali pada satu halaman. Selector ini ditulis dengan awalan titik atau dot “.” pada css dan class=“nama-class” pada HTML. Sedangkan selector id hanya boleh dipanggil satu kali, selain itu untuk Selector ini ditulis dengan awalan pagar “#” pada css dan id=“nama-id” pada HTML.

Berikut contoh implementasi selector id dan class

CSS Properties

Property digunakan untuk memilih jenis style apa yang akan diterapkan pada tag, class, atau id yang telah dipilih pada selector, dan pada satu selector bisa berisi beberapa property. Pada CSS terdapat banyak sekali property yang dapat digunakan untuk menghias webisite

Jenis propery css diantaranya adalah

backgroundborderbox modellayoutingfont & text, dll.

Karena ada begitu banyak property css, maka kita tidak perlu menghafal semuanya , cukup memahami apa fungsi dari property itu, untuk referensi property css lebih lengkap bisa diliat di [https://www.w3schools.com/cssref/]

Bagaimana cara membuat tabel?

Untuk menampilkan data yang terstruktur memiliki banyak cara, mulai dari menggunakan grafik,sampai dengan menggunakan tabel, namun pada pembahasan ini kita akan sedikit mengulas tentang menampilkan data menggunakan tabel.

Sebuah tabel terdiri dari dua elemen utama, yaitu baris dan kolom. HTML sudah menyediakan beberapa elemen untuk membuat sebuah tabel, yaitu <table>, <tr>, <td>. Sebelum membuat baris dan kolom maka kita harus inisialisasi tabel terlebih dahulu menggunakan elemen <table>.

Selanjutnya, kita menambahkan baris ke dalam tabel tersebut dengan menggunakan elemen <tr>.

Kemudian setiap baris dari tabel tentunya harus diisikan dengan data yang akan menghasilkan kolom tabel. untuk mengisi data pada kolom tabel pada html menggunakan elemen <td>.Tetapi, jika ingin membuat baris pertama pada tabel sebagai header, kita dapat mengisikan baris pertama dengan elemen <th> Dapat kita lihat hasil akhir dari tabel yang kita buat sebagai berikut:

<!DOCTYPE html> <html> <head> <title>Dasar Html</title> </head> <body> <table> <tr> <th>No</th> <th>Nama</th> <th>Alamat</th> </tr> <tr> <td>1</td> <td>Roy</td> <td>Bandung</td> </tr> <tr> <td>2</td> <td>Si Boy</td> <td>Jakarta</td> </tr> <tr> <td>3</td> <td>Roni</td> <td>Surabaya</td> </tr> </table> </body> </html>

Bila kita buka halaman html tersebut di browser, maka akan muncul seperti ini:

Dapat kita lihat dari gambar diatas, tabelnya belum memiliki border, maka kita perlu menambahkan border="1" pada elemen tabel tersebut

<!DOCTYPE html> <html> <head> <title>Dasar Html</title> </head> <body> <table border="1"> <tr> <th>No</th> <th>Nama</th> <th>Alamat</th> </tr> <tr> <td>1</td> <td>Roy</td> <td>Bandung</td> </tr> <tr> <td>2</td> <td>Si Boy</td> <td>Jakarta</td> </tr> <tr> <td>3</td> <td>Roni</td> <td>Surabaya</td> </tr> </table> </body> </html>

Bila kita buka halaman html tersebut di browser, maka hasilnya akan muncul seperti ini:

Seperti itu kira-kira bentuk table pada HTML. Sekarang kita lanjut pada fungsi penggabungan baris dan kolom. Pada HTML terdapat perintah colspan dan rowspan. Colspan adalah perintah untuk menggabungkan beberapa kolom menjadi satu. Contohnya kalian bisa rubah htmlnya menjadi seperti ini.

<!DOCTYPE html> <html> <head> <title>Dasar Html</title> </head> <body> <table border="1"> <tr> <th colspan="2">No</th> <th>Alamat</th> </tr> <tr> <td>1</td> <td>Roy</td> <td>Bandung</td> </tr> <tr> <td>2</td> <td>Si Boy</td> <td>Jakarta</td> </tr> <tr> <td>3</td> <td>Roni</td> <td>Surabaya</td> </tr> </table> </body> </html>

Bila kita buka halaman html tersebut di browser, maka hasilnya akan menjadi seperti ini:

Lalu ada rowspan yang berfungsi untuk menggabungkan beberapa baris menjadi satu. Contohnya seperti ini

<!DOCTYPE html> <html> <head> <title>Dasar Html</title> </head> <body> <table border="1"> <tr> <th>No</th> <th>Nama</th> <th>Alamat</th> </tr> <tr> <td>1</td> <td>Roy</td> <td rowspan="3">Bandung</td> </tr> <tr> <td>2</td> <td>Si Boy</td> </tr> <tr> <td>3</td> <td>Roni</td> </tr> </table> </body> </html>

Bila kita buka halaman html tersebut di browser, maka hasilnya akan menjadi seperti ini:

Selain itu kita juga dapat menambahkan atribut border dan yang lainya kedalam tag <style>, coba kita lihat contoh dibawah ini
Membuat List dengan HTML

List/daftar biasanya mengarah pada pengurutan sebuah kata yang didalamnya terdiri dari point-point tersendiri. Sebagai contoh pada tutorial pembuatan makanan dimana terdapat tahapan-tahapan yang perlu dituliskan secara terurut. Dalam pembuatan list dibagi menjadi 2 yaitu ordered list dan unordered list. Ordered list atau daftar terurut memberikan fasilitas untuk membuat daftar data secara terurut, sedangkan unordered list digunakan untuk menampilkan daftar data yang tidak memiliki urutan tertentu, atau yang tidak mementingkan urutan.

Untuk pembuatan ordered list kita menggunakan elemen <ol>(ordered list) dan isi dari list sendiri dibuat dengan menggunakan elemen <li> (list item), sedangkan untuk membuat ordered list menggunakan elemen <ul> (unordered list), dan untuk mengisikan daftar, kita dapat menggunakan elemen <li> (list item).

Berikut contoh penggunaan ordered list dengan tag <ol>

<ol> <li>Ini adalah contoh daftar ordered list</li> <li>Ini adalah contoh daftar ordered list</li> <li>Ini adalah contoh daftar ordered list</li> <li>Ini adalah contoh daftar ordered list</li> <li>Ini adalah contoh daftar ordered list</li> </ol>

Berikut contoh penggunaan unordered list dengan tag <ul>

<ul> <li>Ini adalah contoh daftar unordered list</li> <li>Ini adalah contoh daftar unordered list</li> <li>Ini adalah contoh daftar unordered list</li> <li>Ini adalah contoh daftar unordered list</li> <li>Ini adalah contoh daftar unordered list</li> </ul>

CSS Float

CSS Float digunakan untuk memposisikan elemen dalam sebuat layout halaman website. Sebuah elemen bisa diposisikan seakan-akan berada mengapung diantara elemen setelahnya. Beberapa value yang digunakan untuk property float yaitu : left, right, none. Secara default float memiliki nilai none.

float: none menentukan bahwa sebuah elemen tidak boleh mengapung (float).

float: none;<!DOCTYPE html> <html> <head> <title>CSS Float</title> </head> <body> <img src="codepolitan.jpg"> <p>CodePolitan adalah media edukasi dan informasi tentang pemrograman dan teknologi. CodePolitan dibangun untuk memfasilitasi para developer dalam mendapatkan informasi dan pengetahuan seputar pemrograman dan teknologi. Konten-konten yang ada di CodePolitan disusun sedemikian rupa dan dalam bahasa Indonesia agar mudah dipahami oleh para developer Indonesia. </p> </body> </html>

Bila kita lihat pada kode diatas float tidak di inisialisasi valuenya maka secara defaultbernilai none, sehingga tampilannya akan seperti di bawah ini

float: left digunakan untuk menentukan bahwa sebuah elemen harus mengapung (float) disebelah kiri dari elemen blok yang menampugnya .

float: left;<!DOCTYPE html> <html> <style> img{ float: left; padding-right: 10px; } </style> <head> <title>CSS Float</title> </head> <body> <img src="codepolitan.jpg"> <p>CodePolitan adalah media edukasi dan informasi tentang pemrograman dan teknologi. CodePolitan dibangun untuk memfasilitasi para developer dalam mendapatkan informasi dan pengetahuan seputar pemrograman dan teknologi. Konten-konten yang ada di CodePolitan disusun sedemikian rupa dan dalam bahasa Indonesia agar mudah dipahami oleh para developer Indonesia. </p> </body> </html>

Bila kita lihat pada kode diatas kita meletakan float: left pada elemen gambar sehingga secara otomatis gambar akan diletakan disamping kiri dan text akan menjorok mengikuti elemen gambar.

float: right digunakan untuk menentukan bahwa sebuah elemen harus mengapung (float) disebelah kanan dari elemen blok yang menampugnya .

float: right;<!DOCTYPE html> <html> <style> img{ float: right; padding-right: 10px; } </style> <head> <title>CSS Float</title> </head> <body> <img src="code.jpg"> <p>
</p> </body> </html>

Bila kita lihat pada kode diatas kita meletakan float: right pada elemen gambar sehingga secara otomatis gambar akan diletakan disamping kanan.

Cari Blog Ini

Welcome To My BLOG

Web

Komentar

Posting Komentar

Postingan populer dari blog ini

Command Line

7+ Tipe Data C++ Berserta Contoh Program dan Jangkauannya

Mengenal Fitur CSS3