HTML atau Hypertext Markup Language menjadi pondasi dalam pembuatan sebuah situs web, ibaratkan html merupakan sebuah kerangka dari sebuah web. Banyak orang tau dan paham bagaimana cara membuat web, antarmuka yang bagus dan menarik, namun tak banyak yang bisa mahir html dan teman-temannya. Pada bab ini kita akan belajar dan membahas dasar-dasar HTML yang akan diimplementasikan oleh teman-teman nantinya pada saat belajar setelah pada bab-bab sebelumnya sudah belajar mengenai bagaimana membangun sebuah desain yang baik dan benar, sekarang saatnya kita memahami coding dan mengimplementasikan apa yang sudah kita pelajari sebelumnya.
HTML (Hypertext Markup Language) merupakan gabungan dari dua istilah: hypertext dan markup language. Apa sih itu? Hypertext yaitu dokumen berisi tautan yang memungkinkan pengguna terhubung ke halaman lain. Sedangkan markup language merupakan bahasa komputer yang terdiri dari sekumpulan kode untuk mengatur struktur dan menyajikan informasi
Jadi, HTML adalah bahasa markup untuk membuat struktur halaman website. untuk saat ini, versi paling terbaru dari HTML merupakan versi HTML5, dengan syntax yang lebih sempurna, sangat cocok untuk dipelajari. Coba perhatikan gambar berikut:
Mengenal 3 komponen pembentuk HTML
Sebelum anda benar-benar mempelajari bagaimana cara menulis kode html, bagaimana cara memahami cara kerjanya, anda harus paham dan tau dulu apa itu TAG, ELEMENT, dan ATTRIBUTE
- Tag, digunakan sebagai awalan instruksi atau perintah yang akan dibaca web browser. Misalnya: tag <bold>. Tag ini akan meminta browser menampilkan teks dalam format tebal
- Element, merupakan keseluruhan kode yang terdiri dari tag pembuka (<>) hingga tag penutup (</>). Contohnya: <h1> Contoh Elemen </h1>. Meski demikian, tidak semua tag HTML memiliki pasangan penutup, ada juga yang tidak memiliki pasangan penutup misalnya <br> untuk menambah bari baru (enter)
- Attribute, yaitu informasi atau perintah tambahan yang berada di dalam elemen. Misalnya: <img src=”pantai.jpg” alt=”Pantai Baron.”> Elemen ini menggunakan tag <img> dengan atribut sumber gambar (src) dan alt text (alt).
Kerangka inti HTML
Kerangka inti dari HTML merupakan struktur pembentuk utama yang digunakan dalam menulis kode HTML. Maka dari itu dalam setiap dokumen html wajib memiliki struktur atau kerangka ini.
- <!DOCTYPE html> berfungsi untuk mendeklarasikan kepada komputer bahwa Anda akan menuliskan perintah dalam kode HTML;
- <html></html> merupakan tag yang menandakan bahwa Anda memulai dan mengakhiri dokumen dalam kode HTML;
- <head><head> diisi dengan metadata dari dokumen HTML. Seperti judul tab, deskripsi, dan lain-lain;
- <body></body> diisi dengan konten halaman website.
- Berikut merupakan contoh struktur HTML bila kita susun sesuai urutannya.
<!DOCTYPE html><html><head></head><body></body></html>
Penjelasan bagian kerangka HTML
DOCTYPE HTML adalah suatu deklarasi yang digunakan untuk mengidentifikasi jenis dokumen HTML
yang digunakan sehingga browser dapat menentukan bagaimana memperlakukan kode tersebut.
- <html></html> HTML TAG merupakan bagian dimana isi dari keseluruhan syntax pada web diproses oleh web browser, tidak hanya syntax namun keseluruhan isi dari sebuah halaman web. Ibaratkan html tag adalah tempat untuk menampung semua struktur html.
- <head></head> HEAD merupakan bagian untuk menentukan judul laman website yang nantinya akan diletakan pada bagian teratas ketika website di akses. Untuk menampilkan judul dibutuhkan sebuah title tag yaitu <title></title>.
- Setiap tag memiliki tag pembuka dan tag penutup yang ditandai karakter garing miring (/)
- HEAD juga biasanya digunakan untuk menyimpan kebutuhan-kebutuhan lain yang digunakan oleh developer sebagai aksesoris tambahan pada sebuah lama website. Misalnya untuk megimport kode CSS, menerapkan metadata, menerapkan pilihan bahasa, dan lain lain.
- <body></body> BODY adalah bagian utama atau jantung pada sebuah website. Semua konten pada laman website harus diletakan pada bagian <body>, maka dari itu body merupakan bagian terpanjang, terbanyak, dan terkompleks diantara bagian html yang lain.
Struktur syntax pada HTML
Pada dasarnya, dalam penulisan syntax HTML terdapat dua bagian penting yang saling bergandengan, yaitu opening tag dan closing tag. Bagian yang terletak antara opening tag dan closing tag biasanya merupakan konten atau isi yang nantinya akan dimunculkan pada laman website. Atribut pendukung biasanya akan diletakan pada bagian opening tag. Misalnya ketika akan menyisipkan kode css untuk tampilan agar lebih menarik, atau untuk mengatur jenis huruf, maka syntax nya akan diletakan pada bagian opening tag.
Contohnya:
Belajar HTML dengan Code Editor
Pernah mendengar notepad? atau anda pernah tau? biasanya sudah terinstall secara default pada sistem operasi windows. Notepad bisa dikatakan sebuah code editor, tapi versi yang paling minim fiturnya. Code editor merupakan aplikasi yang dirancang khusus untuk memproses dan menyusun sebuah web atau aplikasi yang terdiri dari kode kode yang disusun oleh programmer untuk di proses menjadi sebuah produk nantinya. Code editor sifatnya luas dan banyak, bisa digunakan oleh bahasa pemrograman apapun, bisa juga digunakan untuk memproses HTML. Terdapat banyak sekali code editor yang bisa digunakan secara gratis maupun berbayar, berikut saya rangkum code editor terpopuler yang dikenal orang-orang ialah Notepad++, Sublime Text, Atom, Visual Studio Code.
RWD vs AWD
- Metode untuk mengoptimalkan tampilan website (optimal viewing experience) pada ukuran layar yang berbeda untuk meningkatkan kenyamanan user saat melihat dan mengakses situs web
- RWD (Responsive Web Design)
Menggunakan fluid grid. Satu tampilan web dirancang langsung menyesuaikan dengan ukuran layar.
Relatif lebih sulit ketika di-develop
Desain responsif lebih mudah dan membutuhkan lebih sedikit pekerjaan untuk diterapkan nantinya. Misalnya memberikan sedikit kendali atas desain anda pada setiap ukuran layar, tetapi sejauh ini merupakan metode yang disukai untuk membuat situs baru saat ini. Benar tidak? Kebanyakan orang lebih memilih desain responsif daripada adaptif. Ini mungkin juga ada hubungannya dengan sejumlah besar template murah yang tersedia untuk sebagian besar Sistem Manajemen Konten (CMS) seperti WordPress, Joomla, dll.
Desainer responsif membuat desain tunggal untuk digunakan di semua layar dan umumnya akan mulai di tengah resolusi dan menggunakan kueri media untuk menentukan penyesuaian apa yang akan dibuat untuk skala resolusi yang lebih rendah dan lebih tinggi. Hal ini cenderung membuat pengguna senang, karena desain web yang sudah dikenal tersebut tampaknya dijamin dapat diterjemahkan ke layar perangkat apa pun. Keseragaman dan kelancaran adalah pertimbangan penting dalam memberikan pengalaman pengguna yang baik.
AWD (Adaptive Web Design)
- Tampilan untuk tiap-tiap ukuran layar yang berbeda dirancang secara terpisah.
- Load lebih berat karena tampilan dirancang terpisah
Adaptive Web Design diperkenalkan pada tahun 2011 oleh desainer web Aaron Gustafson dalam bukunya, Adaptive Web Design: Crafting Rich Experiences With Progressive Enhancement. Ini juga dikenal sebagai peningkatan progresif situs web.
Jika desain responsif bergantung pada perubahan pola desain agar sesuai dengan perangkat yang tersedia, desain adaptif memiliki beberapa ukuran tata letak tetap. Saat situs mendeteksi ruang yang tersedia, situs akan memilih tata letak yang paling sesuai untuk layar. Jadi, saat Anda membuka browser di desktop, situs memilih tata letak terbaik untuk layar desktop tersebut, mengubah ukuran browser tidak akan berdampak pada desain.
Beberapa situs dengan cepat menggunakan desain adaptif. Amazon, USA Today, Apple, dan About.com mengonfigurasi diri mereka sendiri untuk menjadi situs web yang dioptimalkan untuk seluler. Tata letak yang ditampilkan di situs versi seluler yang menggunakan desain adaptif mungkin berbeda dari versi desktop. Namun, ini karena perancang memilih tata letak yang berbeda untuk layar ponsel daripada meninggalkan desain untuk mencoba mengatur ulang sendiri.
Dalam desain adaptif, mengembangkan enam desain untuk enam lebar layar yang paling umum adalah hal yang normal misalnya 320, 480, 760, 960, 1200, dan 1600 piksel.
