:: Web Programming
Kami memberikan jasa tutorial/bimbingan untuk mempelajari pemprograman Web, baik untuk individu (private) maupun untuk kalangan usaha (corporate). Web terbagi menjadi tiga bagian, yaitu bagian jaringan, bagian aplikasi, dan bagian media. Bagian jaringan web terkait pada struktur dan infrastrukturnya. Pada bagian aplikasi web terdiri dari: HTML, CSS, Javascript (pemprograman client-side), dan PHP (pemprograman server-side). Sedangkan media web sangat luas, mulai dari teks, grafis raster, grafis vector, hingga animasi audial/visual, dan tak tertingal juga dengan alam virtual 3D. Dan berikut ini adalah materi dasar bahan tutorial pemprograman web kami.
Sebelum memulai tutorial ini, siapkan beberapa software yang dibutuhkan. Pertama yang dibutuhkan adalah software web-browser, yang berfungsi untuk menampilkan halaman-halaman file web. Untuk menampilkan web dengan tampilan yang sempurna dan ideal, pilihlah browser web dengan kemampuan standar W3C (World Wide Web Consorsium). Setelah web-browser, yang dibutuhkan berikutnya adalah text-editor untuk menyunting file-file web (HTML, CSS, Javascript, dan PHP).
Ada beberapa software yang berfungsi untuk membangun web secara instant atau yang sering disebut dengan editor WYSIWYG (What You See Is What You Get), seperti SeaMonkey Composer, Amaya, BlueGriffon, dan Dreamweaver. Bagi yang ingin menggunakannya diperbolehkan, tetapi tak disarankan. Web yang dibuat secara instant sangat tak mendidik dan juga membuat malas menyelami source code, tetapi jika memang butuh agar development web lebih cepat silahkan saja. Lebih disarankan untuk menggunakan text editor tanpa fasilitas membangun secara instant, agar hasil karya menjadi dikuasai luar dalam. Contohnya seperti Notepad++ atau yang sejenisnya, sedangkan saya sendiri selalu menggunakan text-editor Mousepad (Linux).
› Beda Text Dengan HyperText
Regular text (Teks biasa) atau sering disebut sebagai teks linier adalah teks yang ditulis secara berurutan dan hanya memiliki satu dimensi atau arah pembacaannya, yaitu dari kiri ke kanan atau dari kanan ke kiri. Teks ini hanya terdiri dari kata-kata, kalimat, dan paragraf, tanpa adanya formasi tulisan atau tautan atau keterkaitan dengan teks/dokumen lain.
Sementara itu, hyperteks adalah teks yang memiliki tautan atau hyperlink yang menghubungkan teks dengan dokumen/resource lainnya, seperti gambar, video, halaman web, atau dokumen lain. Ketika pengguna mengklik tautan tersebut, ia akan langsung diarahkan ke dokumen/resource yang terkait dengan tautan tersebut. Dengan demikian, hyperteks memungkinkan pengguna untuk berpindah dari satu bagian teks ke bagian teks lainnya atau ke dokumen lain dengan mudah dan cepat.
Contoh dari hyperteks adalah halaman web (HTML/XHTML/SVG), di mana teks dan gambar terhubung dengan hyperlink ke halaman web lain seperti video dan file dokumen. Hal ini memudahkan pengguna untuk menemukan informasi yang lebih terperinci tentang topik yang sedang dibaca atau bahkan mengakses sumber daya lain yang mungkin dibutuhkan.
» HTML
Teknologi HTML adalah bagian utama dari teknologi web, yang berfungsi sebagai antarmuka program web (melalui web-browser) dengan penggunanya. Antarmuka ini keseluruhannya dienkapsulasi dalam HTML, yang di dalamnya bisa ikut mengikut-sertakan CSS, Javascript, dan media-media (gambar/audio/video) web lainnya.
› Apa itu HTML?
HTML (Hypertext Markup Language) adalah teknik bahasa penanda HyperText. File HTML adalah file text murni, berisi teks yang disertai penandaannya. File HTML jika dibuka pada perambah web (web-browser), akan tampil dengan tampilan yang sesuai maksud penandaan. Untuk menyunting/edit file text murni seperti HTML cukup hanya menggunakan text-editor sejenis notepad. Dapat dilihat pada SS berikut ini, file text berisi 28 karakter (huruf dan spasi masing-masing 1 karakter) berukuran 28 Byte, yang artinya 1 karakter = 1 Byte. Hal ini pun berlaku juga pada file CSS, Javascript, dan PHP.
» HTML Introduction
Yang dibutuhkan untuk menjalankan/menampilkan HTML, CSS dan Javascript, beserta media-media web lainnya, cukup hanya dengan web-browser tanpa web-server. Untuk menampilkan/memainkan dan mendefinisikan sesuatu, HTML menggunakan serangkaian element yang direpresentasikan dengan berupa tag. Sebagai contoh: <p></p> untuk representasi paragraf, <h1></h1> untuk representasi judul/heading, <img/> untuk representasi image/gambar, <audio/> untuk representasi audio/suara, dan lainnya.
› HTML Tag
Adalah penanda teks untuk merepresentasikan suatu maksud. Dan tag ini bisa bersarang/nested di dalam tag lainnya. Contoh:
<p>Ini adalah paragraf</p> <div>Ini adalah blok teks non paragraf, <b>dan teks ini tebal/bold</b></div>
Ini adalah paragraf
› HTML Attribute
Adalah penanda tambahan pada tag atas tujuan/maksud tertentu. Terdiri dari 2 bagian, nama atribut dan isi atribut. Contoh tag angkor/tautan menggunakan atribut href:
<a href="https://wikipedia.org">Link ke web wikipedia.org</a>
› HTML Text
Adalah teks di dalam tag, yang bukan berupa tag lainnya.
› HTML Layout
Tata letak/layout pada HTML bisa berupa teks inline, tabel, kolom, atau bahkan variasi ragam lainnya. Penampilan konten/isi menjadi rata kiri, atau rata kanan, rata tengah, juga arah peampilannya bisa dari kiri ke kanan (contoh:alfabet) atau dari kanan ke kiri (contoh:hijaiyah). Contoh layout pada teks di dalam tabel:
<table> <tr> <td>--------------------</td> <td>--------------------</td> <td>--------------------</td> </tr> <tr> <td><div align="left">kiri</div></td> <td><div align="center">tengah</div></td> <td><div align="right">kanan</div></td> </tr> </table>
| -------------------- | -------------------- | -------------------- |
kiri
| tengah |
kanan |
› HTML Display
Element HTML yang direpresentasikan dalam bentuk tag dapat ditampilkan, dan juga dapat disembunyikan. Ketika disembunyikan pun bisa tetap mengalokasikan tempat tampilnya, ataupun meniadakan lokasi tampilnya. Display/tampilan element ini akan berkaitan dengan styling CSS, dan dibahas pada tutorial CSS.
› HTML Content
Adalah bagian isi dari element HTML, bisa berupa teks, gambar, suara, file, atau jenis lainnya yang dapat diembed oleh web browser.
› HTML Head dan Body
File HTML terbagi menjadi 2 bagian, yaitu bagian kepala yang ditandai dengan tag <head>, dan bagian tubuh <body>. Bagian kepala berisi pendeklarasian segala kebutuhan dokumen HTML. Sedangkan bagian tubuh adalah bagian element-element yang ditampilkan.
» HTML Beginner
Dibagian ini adalah materi belajar HTML bagi Beginer (Pemula).
› HTML Heading
Tag-tag untuk merepresentasikan blok heading (judul).
<h1>Heading 1<h1>
Heading 1
<h2>Heading 2<h2>
Heading 2
<h3>Heading 3<h3>
Heading 3
<h4>Heading 4<h4>
Heading 4
› HTML Paragraph
Tag yang merepresentasikan blok paragraf <p></p>. Jika dibutuhkan blok dasar selain paragraf, dapat digunakan <div></div>
› HTML Image
Element <img/> adalah element yang digunakan untuk menampilkan gambar pada halaman web. Element ini tidak memiliki tag penutup (closing tag) karena termasuk dalam kategori element mandiri atau self-closing element.
<img src="nama_file_gambar" alt="deskripsi_gambar">
Pada atribut src untuk mendefinisikankan file gambar yang akan ditampilkan pada halaman web. Sedangkan pada atribut alt untuk mendeskripsikan gambar atau sebagai teks alternatif untuk gambar tersebut. Teks alternatif ini akan ditampilkan ketika gambar gagal dimuat atau ketika pengguna tidak dapat melihat gambar yang didefinisikan oleh element, misalnya karena masalah koneksi internet atau pengaturan browser. Atribut alt juga memiliki peran penting dalam meningkatkan aksesibilitas web bagi pengguna dengan kebutuhan khusus, seperti tunanetra atau pengguna screen-reader.
› HTML Link
Ada dua jenis link (tautan) pada HTML, yaitu <link/> dan <a/>, dan keduanya memiliki fungsi yang berbeda.
Elemen <link/> digunakan untuk menautkan dokumen HTML dengan dokumen eksternal, seperti dokumen CSS, dokumen ikon situs, atau dokumen skrip lainnya. Elemen ini ditempatkan di dalam tag pembuka <head/> dari dokumen HTML.
<!DOCTYPE html> <html> <head> <title>Contoh HTML dengan Elemen Link</title> <link rel="stylesheet" href="styles.css"/> </head> <body> <h1>Halo, Dunia!</h1> <p>Ini adalah contoh halaman web dengan elemen link.</p> </body> </html>
Pada contoh di atas, dokumen CSS eksternal ditautkan ke halaman web dengan menambahkan element <link/> dengan atribut "rel" yang berisi "stylesheet" dan atribut "href" yang berisi "styles.css". Dokumen CSS ini kemudian akan digunakan untuk mengatur tampilan halaman web. Element ini juga dapat digunakan untuk menautkan dokumen ikon situs atau juga untuk menautkan dokumen skrip eksternal.
<link rel="icon" href="favicon.ico" type="image/x-icon">
Dalam contoh di atas, atribut "rel" berisi "icon" untuk mendefinisikan maksud sebagai tautan kepada icon, atribut "href" diatur ke lokasi file ikon situs, dan atribut "type" diatur ke jenis mime file ikon situs.
Element <a> adalah singkatan dari "anchor" yang berarti "angkur/jangkar". Element ini digunakan dalam HTML untuk membuat tautan atau link pada halaman web. Tautan dibuat dengan menempatkan elemen <a> di sekitar teks/gambar/element di dalam <body/> yang akan dijadikan tautan, dan menambahkan atribut "href" (hypertext reference) yang menunjukkan alamat URL yang akan diakses ketika tautan diklik.
<a href="https://www.contoh.com">Kunjungi Contoh.com</a>
Dalam contoh di atas, element <a/> digunakan untuk membuat tautan dengan teks "Kunjungi Contoh.com", dan atribut "href" menunjukkan alamat URL yang akan dibuka ketika tautan tersebut diklik. Selain atribut "href", ada beberapa atribut lain yang dapat digunakan pada elemen <a/>, seperti "target" untuk menentukan di mana halaman baru akan dibuka (misalnya di jendela baru atau di dalam frame), dan atribut "title" untuk memberikan informasi tambahan tentang tautan ketika kursor mouse diarahkan ke atas tautan tersebut.
› HTML List
Ada dua jenis element list, <ol/> (Ordered List) yang diurutkan dan <ul/> (Unordered List) yang tak diurutkan.
Element <ul/> digunakan untuk membuat daftar yang tidak memiliki urutan tertentu, didefinisikan dengan tag pembuka <ul> dan tag penutup </ul>. Sedangkan element <ol/> digunakan untuk membuat daftar yang memiliki urutan tertentu, didefinisikan dengan tag pembuka <ol> dan tag penutup </ol>. Lalu, element <li/> digunakan untuk mendefinisikan item dalam daftar, ditempatkan di dalam elemen <ul/> atau <ol/>, didefinisikan dengan tag pembuka <li> dan tag penutup </li>.
<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> <ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol>
› HTML Table
Element <table/> digunakan untuk membuat tabel di halaman web. Elemen ini didefinisikan dengan tag pembuka <table> dan tag penutup </table>. Setiap baris dalam tabel didefinisikan menggunakan element <tr/> (Table Row), dan setiap sel dalam tabel didefinisikan menggunakan element <td/> (Table Data).
<table> <tr> <td>Kolom 1, Baris 1</td> <td>Kolom 2, Baris 1</td> <td>Kolom 3, Baris 1</td> </tr> <tr> <td>Kolom 1, Baris 2</td> <td>Kolom 2, Baris 2</td> <td>Kolom 3, Baris 2</td> </tr> <tr> <td>Kolom 1, Baris 3</td> <td>Kolom 2, Baris 3</td> <td>Kolom 3, Baris 3</td> </tr> </table>
Pada elemen <table> juga dapat ditambahkan atribut, seperti atribut "border" untuk menambahkan garis tepi pada tabel, atau atribut "cellpadding" dan "cellspacing" untuk mengatur jarak antar sel dalam tabel.
› HTML Input
...
› HTML Option
...
› HTML Button
...
› HTML Form
...
› HTML Tags
...
› HTML Attributes
...
» HTML Intermediete
...
› HTML Viewport
...
› HTML Assets
...
› HTML iFrame
...
› HTML Media
...
› HTML SVG
...
› HTML Entities
...