Pengenalan HTML, Cara Kerja & Kegunaanya Bagi Website

Pengenalan HTML

Setelah sebelumnya kita sudah belajar Cara Kerja Sebuah Website, sekarang saatnya kita membahas HTML, sebenarnya apa itu HTML dan bagaimana kita menggunakan html untuk menstruktru suatu website.

Web Browser apapun yang kamu gunakan saat ini, entah itu Chrome, Safari, Firefox atau bahakn Opera, mereka semua memiliki satu tujuan yang sama, yaitu menrender website dengan cara mengolah file HTML, CSS dan juga Javascript, dengan begini kamu bisa melihat website pada web browsermu.

web browser in the world

Jadi sebagai contoh kita memiliki sebuah kode HTML dimana kode ini akan membuat website kita memiliki judul/title misalnya "Hello Teman" dan pada bagian body atau halamnya akan ada heading yaitu "Selamat Datang Di Tresnadev.com".

<head>
 <title>Hello Teman</title>
</head>

<body>
 <h1>Selamat Datang Di Tresnadev.com</h1>
</body>
Jadi misalkan kita membuka file html ini dengan web browser maka tampilanya akan sebagai berikut.

html example code

Jadi seperti yang kalian lihat, pada bagian tab atas ada keterangan tiitle Hello Teman, dan untuk bagian body dimana ada tulisan besar disitu tertulis "Selamat Datang Di Tresnadev.com" sesuai dengan apa yang kita inginkan.

Nah sampai sini sebelum kita mengetahui lebih dalam tentang HTML kita harus ingat bahwa html adalah pondasi awal dari semua website, jadi kamu tidak akan melihat website yang dibuat hanya dengan menggunakan CSS saja dan juga kamu tidak akan bisa melihat website yang hanya dibuat dengan hanya Javascript, akan tetapi kamu bisa melihat website yang hanya menggunakan HTML saja.

HTML adalah kepanjangan dari HyperText Markup Language, dan hal yang perlu kita garis bawahi disini ialah kata "Markup" dikarenakan cukup banyak Markup language yang ada sekarang ini.

Mungkin kamu pernah mendengar XML kependekan Exstensible Markup Language dan juga GML Generalized Markup Language.

Pada html kamu bisa membuat struktur website dan layoutnya sekaligus menggunakan tag html, hanya sebagai info, coba kamu kunjungi codepen.io dimana website tersebut memberikan layanan pengcodingan html secara realtime, dimana kamu mengetik kode dan kode tersebut akan berjalan secara realtime, tanpa perlu me refresh halaman website.

cidepen 2020

Di codepen.io kamu juga tidak perlu melakukan sign-up (daftar) kamu bisa langsung mencoba coding dengan membuka link ini Coding codepen.io

Nah sekarang saya mau kamu membuka link berikut Books Example HTML, disini kamu akan melihat dua versi buku yaitu plain text dan HTML.

book example

Silahkan kamu buka kedua file tadi di browser dengan cara klik kanan dan open in new tab, maka kamu akan meilhat isi dari buku ini dalam versi plaint text dan html, berikut adalah perbedaanya.

comparisem plain text and html

Seperti yang kamu lihat, untuk versi html dia memiliki struktur dan tersusun rapih, sedangkan yang satunya yaitu versi plain text tidak ada strukturnya sama sekali.

Nah untuk sekarang kita akan membuat struktur website yang sama dengan versi html di atas, dan berikut adalah kodenya.

<h1>The Adventures of <br> Sherlock Holmes</h1>
<br>
<h2>by Arthur Conan Doyle</h2>
Berikut adalah hasilnya.

cara run html

Jadi mari saya jelaskan, untuk bagian pertama kita menemui kode :

<h1>The Adventures of <br> Sherlock Holmes</h1>
Di html, ada yang namanya h1, dimana h1 ini bisa dikatakan sebagai judul halaman atau heading, semakin besar angka setelah h maka semakin kecil besar hurufnya, misal kalian lihat gambar di bawah ini.

heading
Seperti yang kalian lihat heading disini memiliki tingkat ukurang yang berbeda-beda, mulai dari h1 sampai h6.

Dan kode yang kedua yang akan saya jelaskan ialah <br> kode <br> sendiri digunakan untuk pindah baris, jika kamu lihat gambar tadi kamu bisa melihat bahwa ada kata "The Adventure of Sherlock Holmes" ini pada kode kita tuliskan sejajar di antara tag <h1> dan </h1> akan tetapi pada browser kata "Sherlock Holmes malah turun kebawah dan tidak menyambung dengan kata " The Adventure of", itulah kegunaan <br>.

Untuk <h2> saya rasa kamu sudah tahu kegunaanya, jadi saya tidak akan menjelaskanya lagi.

Untuk tag sendiri akan kita bahas di post terpisah dimana kita akan mempelajarinya lebih dalam, selain itu kita juga akan membahas berbagai maca tag yang sangat berguna sekali untuk kedepanya dalam belajar web development.

Mungkin ada yang bingung dengan postingan tentang html ini dan memiliki pertanyaan "kenapa tutorial awal html kok rasanya langsung lompat ke bagian yang rada susah, tidak dimulai dari awal, dan juga kenapa tidak ada sejarahnya dulu biar kita semua tahu?".

Karena ini hanyalah permulaan atau sebatas pengenalan saja makanya saya langsung menjelaskan sedikit mengenai kode yang saya buat tadi, dan untuk sejarah saya rasa tidak terlalu penting saya kasih di website ini karena sudah banyak yang memposting sejarah html di internet.

Tenang saja di tutorial html berikutnya kita akan benar-benar belajar dari awal, untuk saat ini kamu hanya perlu tahu dan belum perlu melakukan coding html apapun.

Tutorial berikutnya kita akan membahas mengenai tag.

Cara Kerja Website Dalam Menampilkan Data Pada Layar

Cara Kerja Website Dalam Menampilkan Data Pada Layar

Setelah sebelumnya kita belajar mengenai Internet di postingan Cara Kerja Internet dan kita sudah mengetahui bahwa sebenarnya internet itu sangat simpel selain itu kita juga sudah tahu bahwa internet backbone di dunia sangatlah banyak.

Kali ini kita akan mencoba untuk belajar bersama tentang Cara Kerja Website.

Jadi sebenarnya apa sih yang dilakukan oleh HTML, CSS dkk, untuk mengakses suatu website kita membutuhkan Web Browser bukan, seperti Chrome dan Mozila dimana browser ini akan me lookup ip addres dari website yang ingin kamu lihat sehingga browser bisa menerima data dan dapat menampilkan tampilan website keren ke layar monitormu.

Sekarang data yang diterima oleh web browser biasanya memiliki tiga jenis tipe file yaitu HTML, CSS, dan Javascript.

Mungkin kamu sering mendengar ke tiga jenis tipe file tadi akan tetapi apakah kamu tahu kegunaanya? Kenapa juga ada cukup banyak tipe file untuk bisa menampilkan sebuah website, kenapa tidak menggunakan satu file saja seperti yang kita tahu yaitu misalnya file website.

Jadi di setiap file ini mereka memiliki tanggung jawabnya masing-masing, seperti halnya HTML ia memiliki peran sebagai struktur dari sebuah website, jadi jikalau website adalah sebuah rumah, maka HTML adalah seorang pekerja yang bertugas untuk membuat pondasi awal seperti membangun tembok, pilar penyangga dan atap.

Jadi pada dasarnya HTML adalah file yang berguna untuk membangun struktur rumahmu.

Oleh karena itu ketika kamu menulis kode HTML kamu sama saja membuat struktur website yang kamu kelola, kamu bisa menambahkan gambar, membuat link, button maupun text box.

Dan yang kedua adalah file CSS dimana tugasnya ialah mendekorasi website yang kamu miliki, jadi jika website adalah rumah maka CSS adalah orang yang melakukan dekorasi ruangan seperti mengecat tembok dll, intinya dia bertugas untuk melakukan styling sesuai dengan apa yang kamu inginkan.

Jadi saat menulis CSS kamu bisa mengubah tampilan website sesuka hatimu, misalnya saja saya ingin button ini berwarna merah, saya ingin gambar ini memiliki border radius sehingga gambar tidak kotak tetapi bulat atau oval.

Dan file yang terakhir adalah file javascript yang berekstensi .js, javascript ialah bahasa pemrogramman yang mengizinkanmu untuk melakukan sesuatu di dalam sebuah webste. Jika kita asumsikan sekali lagi kalau website adalah rumah, maka Javascript ini adalah orang yang melakukan penyetelan yang berhubungan dengan interaksi manusia, misalnya melakukan pemasangan lampu dimana lampu ini bisa nyala mati sesuai dengan interaksi yang kita berikan.

Contoh mudahnya di dalam website ialah PopUp, kalau kalian sering searching di google kemudian membuka website atau blog yang ada iklanya kalian mungkin akan sering menemukan iklan pop up dimana ia mneggunakan javascript sebagai interaksinya digabung dengan HTML untuk struktur popipnya dan CSS untuk stylenya.

Berikut lebih jelasnya, gambar di bawah ialah halaman google tanpa css dan javascript.

JUST html

Dan ini halaman google dengan HTML dan CSS.

google with css and html

Dan ini halaman google dengan HTML, CSS dan Javascript.

with js

Seperti yang kalian lihat jika javascript dinyalakan maka fitur search suggestion akan aktif sehingga di dalam halaman ini terlihat adanya aktivitas atau behavior yang berjalan tidak serta merta diam.

Nah sekarang coba kalian buka www.tresnadev.com dan kalian coba inspect element dengan cara klik kanan dan pilih inspect.

inspect element

Maka kalian akan melihat berbagai maca kode, nah kode ini merupakan kode HTML, CSS dan Javascript, kalian bisa melakukan editing disini secara langsung, misalnya mengganti tulisan pada halaman website sesuai dengan keinginan, akan tetapi hal ini hanya berlaku di komputermu saja, ketika kamu me refresh halaman maka tulisanya akan berubah seperti sedia kala.

edit relatime html

Itulah tutorial Web Development mengenai Cara Kerja Website, semoga bisa membantu dan bermanfaat, dan jangan lupa bertanya jika masih ada kendala dalam mempelajari materi ini, salam hangat dari Tresnadev Team.

Apa Itu Internet Dan Bagaimana Cara Mereka Bekerja

Apa Itu Internet Dan Bagaimana Cara Mereka Bekerja

Sebelumnya kita sudah melakukan instalasi Visual Studio Code dan Chrome Browser, sekarang kita akan belajar lebih dalam mengenai internet, kenapa ini penting?

Karena hampir setiap saat kita menggunakan internet di kehidupan sehari-hari, jadi akan kurang lengkap jika kita tidak tahu sama sekali bagaiman si internet ini bekerja untuk itu di sini kita akan mempelajarinya.

Mungkin ada beberapa di antara kalian menganggap bahwa internet itu merupakan suatu hal yang sangat sukar untuk dipelajari/dimengerti, mungkin kalian pernah mendengar istilah cloud di kehidupan kalian, dan kalian berpikir sebenarnya istilah cloud di internet itu seperti apa?

Sebenarnya internet sendiri merupakan hal yang sangat simpel untuk dimengerti, internet ialah suatu koneksi jalur kabel yang sangat panjang yang saling menghubungkan satu komputer ke komputer lain, jadi misalnya kalian punya komputer di jakarta dan satunya lagi milik teman kalian di singapore, kedua komputer ini bisa saling terkoneksi dan berbagi informasi/data melalui jalur kabel tadi.

Walaupun sebenarnya kita yang menggunakan perangkat mobile atau laptop mungkin tidak akan menggunakan koneksi via kabel, dimana kebanyakan kita sering menggunakan koneksi wireles, tapi pada awalnya koneksi internet itu terhubung melalui kabel sebelum pihak provider internet memancarkanya dengan signal wireles.

Dan sekarang di dunia internet ada satu pekerjaan penting yang dilakukan komputer dimana ia harus online selama 24 jam per hari untuk menyediakan layanan data yang kamu minta saat dalam keadaan online seperti ketika kamu akan mengakses website.

Komputer yang melakukan tugas ini dinamakan Server dan untuk komputer yang digunakan user untuk mengakses internet dinamakan Client.

server and client

Sekarang kamu bisa bayangkan jika internet merupakan sebuah ruang perpustakan yang  sangat besar dimana ia buka 24 jam kemudian kamu meminta untuk melihat halaman google.com atau kamu ingin melihat post terbaru di tresnadev.com, maka perpustakaan tadi akan melayanimu dengan memberikan semua data yang kamu butuhkan untuk melihat website apapun yang kamu minta.

Sekarang kalau perpustakan ini menyimpan banyak data yang bertebaran dimana-mana, pasti akan menyulitkan kita dalam mencari website yang ingin kita lihat, sama halnya di internet, lalau bagaiman masalah ini terpecahkan di internet?

Jadi mari kita asumsikan kamu sedang duduk dirumah lalu mengetikan google.com di laptop/komputermu karena kamu ingin melihat halaman awal google.

Jadi apa yang sebenarnya terjadi dibalik layar ialah, web browser akan mengirim request ke Internet Service Provider (ISP) dimana isp merupakan sebuah layanan internet yang kamu gunakan dengan membayar layananya setiap bulan, untuk di indonesia kamu sendiri pasti tahu Telkom dengan IndiHome nya, kemudia First Media, Biznet, MyRepublic, mereka adalah isp penyedia layanan internet yang cukup populer belakangan ini terutama Telkom yang sudah kita kenal sejak dulu.

Sekarang request yang dikirim oleh web browser ke isp ialah "saya ingin mengunjungi halaman google.com" karena kamu mengetikan google.com tadi, lalu isp akan menyampaikan requestmu ke DNS Server (Domain Name System) dan bisa kita bayangkan bahwa DNS ini hanyalah kumpulan dari nomor telepon rumah  yang sering kamu jumpai, dimana didalamnya berisi daftar alamat telepon/nomor. Begitu juga DNS dimana didalamnya berisi banyak sekali alamat IP dimana ip ini dimiliki oleh setiap komputer, entah itu server maupun client, dan untuk server sendiri ia memiliki ip dari website yang di kelolanya.

Misalkan googel sendiri memiliki ip 216.58.210.26 dan tentunya perangkatmu juga memiliki ip address, dan tentu saja setiap perangkat memiliki ip address yang berbeda-beda.

Lalu setelah DNS menemukan ip address dari google (yang mana kamu inginkan tadi) maka DNS akan mengirim kembali informasi ini ke isp kemudian dari isp data akan dikirim ke web browsermu, dan sekarang browsermu tahu alamat ip dari google yang ingin kamu kunjungi.

Sekarang browsermu akan melakukan direct request ke internet melalui isp kemudian masuk ke internet backbone, internet bacbone sendiri ialah jaringan kabel bawah laut yang ada di samudra yang menghubungkan koneksi antar negara, jadi jika server yang ingin kamu tuju ada di negara lain maka request ini akan dikirim ke luar negeri, sedangkan jika tidak ya sudah pasti data request tidak akan sampai ke luar jika server yang ingin di tuju masih di indonesia.

Sebagai gambaran kamu bisa mengunjungi Submarine Cable Map disini kamu bisa melihat jalur internet di seluruh dunia termasuk di indonesia.

submarinecable

Setelah itu jika request sudah sampai ke server tujuan maka server akan memberikan data yang kamu butuhkan melalui internet backbone tadi dan kemudian masuk ke isp lalu sampailah ia di browsermu, dan sekarang kamu bisa melihat halaman awal google di layar monitor.

Itu saja tutorial kali ini mengenai internet semoga bisa bermanfaat dan jangan lupa untuk terus belajar dan berkarya, salam hangat dari Tresnadev Team.

Selanjutnya kita akan belajar Mengenai Website, bagaimana ia bekerja dan apa saja yang sebenarnya terjadi di balik layar..

Perlengkapan Untuk Belajar Web Development (HTML, CSS, Javascript)

Belajar Web Dev

Di sini saya akan memberikan beberapa hal penting yang harus kalian ketahui sebelum mulai belajar web development, pertama kita membutuhkan text editor dan yang kedua adalah web browser.

Untuk kalian yang ingin kembali ke menu Tutorial Web Development silahkan klik disini!
Di tutorial ini kalian bebsa memilih text editor apa yang ingin kalian gunakan, tapi rekomendasi dari saya adalah:

Atom
Visual Studio Code
Sublime Text

Ketiga text editor di atas memiliki interface yang bagus dan bisa kalian ganti temanya semau kalian, dan yang terpenting gratis, terkecuali Sublime, walaupun begitu sublime bisa tetap kamu gunakan tanpa mengeluarkan biaya sepeserpun.

Nah di tutorial ini saya akan menggunakan Visual Studio Code dalam memberikan materi dan contoh dari hasil coding.

Untuk yang berikutnya ialah Web Browser, untuk bagian ini saya memilih Chrome karena Chrome sangat cepat dalam update'anya sehingga kita tidak akan mengalami bugs yang mengganggu dikarenakan versi broser yang out date, untuk alternatif lain kalian bisa coba menggunakan Mozila Firefox.

Instalasi Visual Studio Code

Pertama kalian bisa kunjungi halaman resminya disini Visual Studio Code.

Visual Studio Code homepage

Di sini kalian bisa langsung klik tombol "Download for Windows" atau jika kalian menggunakan versi os yang lain silahkan ganti versi visual studio code nya dengan cara klik arah panah ke bawah da pilih versi sesuai os kalian masing-masing.

Untuk langkah selanjutnya tidaklah sulit, kalian hanya perlu buka file hasil download an tadi dan ikuti intruksi yang ada, kebanyakan kalian hanya diharuskan untuk klik "Next".

Jika sudah tersintall maka kalian akan melihat jendela VS Code seperti pada gambar di bawah ini.

visual studio code app

Kalian bisa mengganti thema VS Code dengan menggantinya melalui Color Theme.

Color Theme VS Code

Sampai disini Kalian sudah siap untuk menulis script HTML & CSS, langkah selanjutnya ialah Instalasi Chrome.

Instalasi Chrome

Kalian bisa mendownload Google Chrome melalui halaman resminya disini Chrome Download.

Kalian akan melihat halaman google chrome seperti pada gambar.

chrome homepage

Silahkan klik tombol download chrome, maka proses download akan berjalan, setelah file terdownload buka filenya dan kalian akan melakukan proses download lagi, tunggu sampai selesai dan secara otomatis chrome akan terinstall di laptop/komputer kalian, ikuti saja intruksi yang ada tidak susah kok.

Oh saya lupa, kegunaan dari kedua software tadi, untuk VS Code berguna untuk menulis kode atau script yang kita buat, sedangkan Chrome berguna untuk melihat tampilan dari hasil coding kita.

Itu saja tutorial Web Development kali ini, semoga bisa membantu kalian dan jangan lupa untuk bertanya jika kalian mengalami kendala saat mengikuti tutorial ini.

Selanjutnya kita akan belajar mengenai Bagaimana Internet Bekerja.

Belajar Web Development HTML, CSS, Javascript, MongoDB, jQuery

Belajar Web Development

Di zaman yang sudah modern ini sudah dipastikan perkembangan teknologi bergerak sangat cepat, bukan hanya di bidang perangkat keras, gadget, chip, dan AI tetapi juga bahasa pemrograman menjadi salah satu bidang teknologi yang paling cepat perkembanganya.