Berkenalan dengan HTML

1.1 pengertian HTML

HTML adalah bahasa standar pemrogaman yang digunakan untukmembuat halaman website, yang
diakses melalui internet. Singkatan dari "Hypertext Markup Language" atau "bahasa markup".

Dilansir Techterms, "Hypertext" mengacu pada hyperlink yang mungkin terdapat dalam halaman HTML.
Bahasa markup ini mengacu pada cara tag yang digunakan, untuk menentukan tata letak halaman dan
elemen di dalam halaman.

HTML disusun berdasar kode dan simbol tertentu, yang dimasukkan dalam sebuah file atau dokumen.
Sehingga bisa ditampilkan pada layar komputer. Dan bisa dipahami oleh para pengguna internet.

Memahami setiap kata yang terkandung, hypertext sendiri dimaksudkan sebagai metode yang
digunakan untuk berpindah laman web ke laman lain. Usai mengklik tulisan atau simbol yang muncul di
halaman website.

Lalu istilah markup, diartikan sebagai suatu hal yang dilakukan tag HTML terhadap teks didalamnya.
Contoh jika mengetik suatu teks dengan tanda tag.

1.2 fungsi HTML

1. Fungsi utama HTML, untuk membuat suatu halaman website yang bisa dibaca dan dipahami
dengan lebih mudah. Seluruh laman website yang ada di internet, dibuat dengan HTML dan tak ada
pengecualian.

2. Menandai teks pada suatu laman. HTML ditulis pada suatu halaman dokumen dengan tag atau simbol
tertentu. Simbol dan tag tersebut akan membuat tampilan teks menjadi tebal, miring, bergaris tebal dan
sebagainya. Semisal jika membuat suatu teks menjadi teks miring atau italic, di laman HTML harus ditulis
kode , untuk teks tebal dan - - untuk teks bergaris bawah.

3. Sebagai dasar website. Website yang dibuat tentu memiliki beberapa fitur. Dibuat menggunakan java
script untuk mengatur perilaku web, implemetasi bahasa pemrograman server PHP, dan mendesain web
menggunakan CSS. Semua bahasa ini dapat diaplikasikan jika web memiliki bahasa HTML sebagai
dasarnya.

4. Menampilkan tabel, gambar, video dan lainnya. Umumnya di halaman website atau blog kita tidak
bisa langsung meletakkan tabel, gambar maupun video. Sehingga butuh komponen yang diletakkan
pada web menggunakan bahasa HTML.

5. Menandai elemen dan membuat online form. HTML berfungsi menandai bagian-bagian dalam
website di antaranya header, footer, main, navigation dan sebagainya. Selain itu HTML juga digunakan
sebagai bahasa dalam membuat formulir digital atau online form.
1.3 melihat sekilas HTMLHTML

• Belajar HTML dengan Editor HTMLDari tadi, kita sudah mempelajari teori belajar HTML dasar. Pasti,
Anda sudah tidak sabar untuk segera mempraktikkannya.

Kalau begitu, sekarang saatnya Anda menyiapkan editor HTML. Editor HTML merupakan lembar kerja
untuk membuat dan mengedit dokumen HTML.

Ada berbagai editor HTML yang bisa Anda gunakan secara gratis. Seperti Notepad++, Atom, Bracket, dan
banyak lagi. Namun sebelum memilih editor HTML, pastikan OS komputer Anda kompatibel.

Nah setelah menginstal editor HTML, Anda bisa belajar HTML dengan lebih mudah. Sebab, fitur yang
ditawarkan editor HTML akan mempercepat proses kerja Anda.

• Memilih Browser TerbaikSetelah membuat dokumen HTML, Anda pasti ingin melihat hasilnya, bukan?
Karena itu, pastikan Anda sudah memiliki web browser. Web browser merupakan aplikasi untuk
mengakses dan menampilkan halaman website.

Oleh web browser, bahasa komputer yang telah Anda buat di editor HTML akan diterjemahkan ke dalam
tampilan yang dipahami manusia.

Nah untuk berjaga-jaga, sebaiknya siapkan minimal dua web browser. Meski sudah ada standarisasi
HTML, bisa saja terjadi error sehingga tampilan antara satu web browser dengan browser lainnya
berbeda.

•Membuat Halaman Website PertamaSekarang, Anda sudah bisa membuat dan melihat eksekusi syntax
HTML pada browser Anda. Sayangnya, halaman HTML Anda belum bisa diakses oleh publik. Alasannya,
file HTML masih tersimpan dalam direktori komputer Anda saja.

Karena itu, perlu untuk mengonlinekan project tersebut. Jalan tercepatnya yaitu dengan membuat
website melalui layanan web hosting.

Tak hanya cepat, cara pengoperasiannya juga mudah, lho. Anda bisa segera mengupload file HTML ke
WordPress ataupun langsung melakukan kustomisasi melalui WordPress Editor.

•Melengkapi Halaman WebsiteSupaya ilmu belajar HTML dasar Anda semakin top, cobalah membuat
komponen tambahan pada halaman website. Masukkan bumbu-bumbu pelengkap agar halaman
website Anda makin sedap dan informatif.
Anda bisa memasukkan gambar, tabel, form, ataupun komponen pelengkap lainnya. Dijamin, halaman
website yang Anda sajikan akan lebih mudah dipahami, lebih menjaring peminat, dan mendatangkan
keuntungan yang tidak Anda duga.

•Mengatur Template Halaman WebsiteMeski sudah bisa membuat halaman website yang lengkap,
perjalanan belajar HTML dasar ini belum tamat. Karena, Anda juga perlu mengatur template halaman
website sehingga project tampil lebih kece.

Untuk mengatur template halaman website, Anda bisa membuat sendiri tema HTML-nya ataupun
menggunakan template HTML yang sudah siap pakai. Kedua cara ini sama-sama akan mempercantik
layout halaman website Anda.

•Kode Warna HTML

Mengetahui kode warna HTML merupakan hal yang penting, apalagi saat belajar HTML pemula. Dengan
begitu, Anda dapat memodifikasi warna teks, border, dan media lain dalam dokumen HTML.

Mengapa harus dalam bentuk kode warna?

Katakanlah Anda sedang duduk dalam sebuah restoran. Setelah membaca menu, Anda memesan nasi
goreng. Oleh pelayan, kertas order akan dibawa ke dapur untuk dieksekusi oleh koki agar hidangan bisa
lekas disajikan. Ini artinya, bukan Anda sendiri yang terjun langsung untuk menggoreng nasi, kan?

Nah, kira-kira seperti itulah cara kerja kode warna HTML. Kita membutuhkan pelayan atau perantara
supaya permintaan kita dapat disajikan alias tampil pada browser.

Berhubung komputer berbicara dalam bahasa mark up, mereka tidak paham jika Anda langsung
memerintah dengan bahasa manusia. Karena itu, Anda harus memberikan perintah berupa kode warna.
Setelah kode warna tersebut diproses, browser akan menampilkan warna yang Anda inginkan.

1.4 mengenal jenis jenis bahasa pemrograman web

[Link]

Merupakan bahasa pemrograman yang multifungsi. Java bisa dengan mudah kalian temukan diberagam
sistem operasi, entah itu yang berbasis mobile atau desktop. Sampai saat ini, Java banyak dipakai bikin
software dan aplikasi.
Karena kemampuan ini, Java masih jadi favorit banyak kalangan. Apalagi Java mudah dipelajari
dibanding bahasa lain. Kecuali sistem operasi dari Apple, Java bisa diaplikasikan pada platform apapun.

2. HTML

Saat kalian utak-atik source code dari suatu website, seringnya yang kalian temui yaitu kode HTML.
Wajar, karena kebanyakan website memang memakai HTML. Inilah bahasa paling dasar untuk
mengembangkan situs website.

Pengguna HTML terbesar saat ini tentunya Blogspot. Dengan HTML, website yang kalian kembangkan
bisa lebih interaktif, dan lebih menarik. Generasi paling anyar yaitu HTML5 yang juga mulai banyak
dipakai.

3. PHP

Sama seperti HTML, PHP juga bahasa pemrograman berbasis website. Mudahnya, PHP adalah generasi
yang lebih modern dari HTML. Kode perintah yang ditulis juga lebih manusiawi, dan sudah banyak
memasukkan unsur bahasa manusia.

PHP saat ini lagi populer di kalangan pengembang website. Selain mudah dipahami, PHP juga bisa
dipakai secara gratis. Secaratampilan, website dengan PHP tampak lebih dinamis dengan navigasi yang
mudah.

4. C

Sedikit menoleh ke belakang, selain pemrograman Java, ada pula bahasa pemrograman C. Inilah satu
diantara bahasa tertua dalam pemrograman. Bahasa C lalu ditinggalkan, tapi bahasa turunannya justru
makin banyak dipelajari.

C++ dan C# merupakan bahasa turunan dari C yang paling banyak dipelajari. Bahkan, C++ biasa
dimasukkan kurikulum akademik jika ingin belajar pemrograman. Secara fungsi, bahasa jenis ini bisa
dimanfaatkan untuk bikin aplikasi.

5. Javascript

Masih saudara dengan Java, Javascript punya fungsi berbeda. Kalau Java fokus ke software dan aplikasi,
Javascript dikhususkan untuk mengembangkan situs online atau website. Meski kalah pamor dari HTML
atau PHP, tapi Javascript nyatanya masih banyak dipakai.

Satu diantara keunggulan utama Javascript yaitu bisa bikin tampilan visual website jadi lebih menarik.
Selain itu, website jadi lebih mudah dikreasikan karena kode yang dipakai juga tak terlalu rumit.

Sejarah dan perkembangan HTML

1. sejarah HTML
 HTML pertama kali dikembangkan oleh Tim Berners-Lee dari organisasi European Organization
for Nuclear Research (CERN) tahun 1990. Markup language atau HTML ini diciptakan oleh suatu
perusahaan penjual perangkat keras dan lunak yakni IBM atau International Bussiness Machines.

Sekitar era 1980an, IBM menciptakan sebuah bahasa yang menggabungkan tag atau simbol dengan teks
dalam sebuah dokumen. Bahasa yang diciptakan oleh IBM ini dikenal dengan sebutan markup language
atau Generalized markup language (GML).

Kemudian rilis versi pertama HTML ditulis oleh Tim Berners-Lee pada 1993. Dikutip dari
[Link], sejak itu, mulai banyak versi HTML yang berbeda. Versi yang paling banyak digunakan
sepanjang tahun 2000-an adalah HTML 4.01, yang menjadi standar resmi sejak bulan Desember 1999.

Versi lain, XHTML, adalah penulisan ulang HTML sebagai bahasa XML. XML adalah bahasa markup
standar yang digunakan untuk membuat bahasa markup lainnya. Ratusan bahasa XML masih digunakan
saat ini, termasuk GML (Geography Markup Language), MathML, MusicML, dan RSS (Really Simple
Syndication).

HTML menjadi standar resmi pada tahun 2000, dan diperbarui pada tahun 2002. XHTML sangat mirip
dengan HTML, tetapi memiliki aturan yang lebih ketat. Aturan yang ketat diperlukan untuk semua
bahasa XML, karena tanpanya, interoperabilitas antar aplikasi tidak mungkin dilakukan.

Sebagian besar halaman di Web saat ini dibuat menggunakan HTML 4.01 atau XHTML 1.0. Namun,
dalam beberapa tahun terakhir, W3C bekerja sama dengan organisasi lain, WHATWG. Mereka telah
mengerjakan versi baru dari HTML, yakni HTML5. Sejak 2011, HTML5 masih berupa spesifikasi draf dan
belum menjadi standar resmi.

2. Teknologi dan fitur baru dalam HTML5

Kepanjangan HTML adalah Hypertext Markup Language.

Secara definitif, HTML adalah bahasa markup untuk mendefinisikan struktur halaman web dan tautan
antar halaman (hypertext).

Dengan kata lain, bahasa ini merupakan kode yang jadi dasar dari tampilan suatu web.

Bahasa web ini bisa Anda kolaborasikan dengan CSS. CSS adalah bahasa pemrograman khusus front-end
untuk membuat visual web lebih menarik.

Bahasa web ini bersifat statis. Untuk bisa membuat web dinamis, Anda perlu mengkombinasikannya
dengan JavaScript, PHP atau sejenisnya.

HTML sendiri terus berkembang untuk menunjang banyak fitur di era modern ini. Nah, HTML5
merupakan versi terakhir yang saat ini umum digunakan oleh orang-orang.

Berikut ini adalah beberapa fitur unggulan dari HTML5.

1. Syntax Lebih Sederhana

Pada struktur web yang kompleks, hal ini akan sedikit merepotkan bagi programmer.

2. Menunjang Pengembangan Web Responsive

Salah satu pembaruan pada versi ini untuk menjawab peningkatan jumlah pengguna perangkat seluler.

Mau tidak mau suatu web harus bisa responsive di berbagai ukuran layar, terutama pada perangkat
seluler.

Versi terbaru ini lebih mobile-friendly daripada versi terdahulu.

Jadi, saat Anda menggunakan bahasa web versi terbaru, Anda tidak perlu melakukan banyak konfigurasi
supaya web tersebut bisa terbuka dengan optimal di perangkat seluler.

3. Sudah Menunjang Konten Video & Audio secara Default

Versi terdahulu belum support konten video atau audio.

Salah satu pembaruan pada versi terbaru adalah untuk menunjang konten video dan audio yang sudah
semakin lazim.

Konten video dan audio sudah jadi bagian esensial dari versi terbaru ini. Anda bisa menggunakan tag
elemen <Audio>, <Video> untuk mendeklarasikannya.

4. Sudah Mendukung Graphic Vector

Pada versi lama, graphic vector mungkin Anda aplikasikan dengan dukungan teknologi lain seperti VML
atau Flash.

Pada versi terkini, graphic vector seperti file SVG dan Canvas sudah jadi bagian integral. Anda bisa
langsung mendeklarasikannya dengan tag elemen <svg> dan <canvas>.

5. Menggunakan Local Storage untuk Mengganti Cookie

Pada versi lama, sistem penyimpanannya masih menggunakan cookie.

Sistem penyimpanan ini memiliki sejumlah kelemahan. Misalnya, kapasitas penyimpanan yang kecil
(4kb), hanya mengizinkan penyimpanan data string, memperlambat server web, dan data cepat
kedaluwarsa.

Versi terbaru sudah menggunakan local storage atau penyimpanan web yang mengatasi beberapa
kelemahan tadi.

Dengan sistem ini, data akan tersimpan di komputer client dengan kapasitas penyimpanannya mencapai
5 MB. Sistem penyimpanan ini juga tidak akan membebani server.
6. Kompatibel dengan Browser Terkini

Saat ini sudah ada banyak jenis browser bermunculan. Versi terbaru dari bahasa pemrograman ini sudah
kompatibel dengan berbagai browser baru. Baik itu aplikasi browser di desktop maupun perangkat
mobile.

Karena bahasa web ini sudah dioptimasi untuk berbagai jenis web browser terkini, Anda tidak perlu
melakukan banyak konfigurasi untuk menampilkan web di berbagai jenis browser.

7. Memungkinkan Javascripts Berjalan di Browser

Versi terbaru memiliki JS Web Worker API. API tersebut membuat antarmuka browser bisa berjalan di
beberapa threads (multiple threads).

Dengan demikian, memungkinkan bagi Anda untuk menjalankan JavaScripts di background.

8. Memungkinkan Efek Drag & Drop

Fitur drag & drop adalah salah satu sistem yang sudah lazim di era ini. Fitur ini sangat memudahkan user
pada saat mengupload file.

Nah, dengan bahasa web ini, Anda bisa menghadirkan fitur drag & drop dengan lebih mudah.

3. Apa yang harus saya kuasai?

[Link] Pemrograman HTML

HyperText Markup Language (HTML) adalah bahasa markup standar yang digunakan untuk membuat
layout halaman web.

2. Bahasa Pemrograman CSS

Cascading Style Sheet (CSS) adalah bahasa pemrograman yang digunakan untuk membuat style web.

3. Bahasa Pemrograman JavaScript

JavaScript berfungsi untuk membuat web menjadi lebih interaktif seperti membuat animasi pada
halaman web.

4. Framework CSS dan Javascript

Jangan lupa belajar framework CSS (Bootstrap, Foundation, Materialize, dll) dan framework Javascript
(Angular, React, Vude, Node, dll.).

5. CSS Preprocessing
Preprocessor CSS seperti Sass, LESS, atau Stylus berfungsi untuk melakukan preprocessing kode CSS.

Contoh anda ingin mengubah warna merah yang anda gunakan di seluruh situs. Dengan preprocessor
CSS, anda hanya perlu mengubah nilai hex di satu tempat saja dan itu akan mengubah nilai hex di mana-
mana.

6. Responsive Design

Setelah paham dengan HTML, CSS dan JavaScript, silahkan pelajari tentang Responsive Design.

Responsive design membuat aplikasi web yang anda buat dapat terlihat rapi dan menarik di semua
ukuran layar.

Popularitas smartphone dan tablet dengan ukuran layar yang berbeda, penting untuk menjadikan desain
responsif sebagai prioritas di setiap situs web atau aplikasi yang anda buat.

7. Browser Developer Tool

Belajar juga cara menggunakan developer tool pada browser.

Pengguna pada akhirnya akan berinteraksi dengan situs web anda melalui browser web. Cara situs anda
dirender oleh peramban/web browser ini akan menjadi bagian besar apakah pekerjaan anda berhasil
atau tidak.

Semua browser web modern dilengkapi dengan alat pengembang. Alat-alat ini memungkinkan anda
untuk menguji dan menyempurnakan halaman web anda di browser itu sendiri, dengan cara-cara
khusus bagaimana browser menginterpretasikan kode anda.

Spesifikasi akan bervariasi pada tiap-tiap browser, tetapi alat pengembang setiap browser umumnya
terdapat inspector dan konsol JavaScript.

Inspector memungkinkan anda untuk melihat seperti apa runtime HTML pada halaman anda, seperti apa
CSS yang dikaitkan dengan setiap elemen pada halaman, dan juga memungkinkan anda untuk mengedit
HTML dan CSS anda dan melihat perubahan langsung saat terjadi.

Konsol JavaScript memungkinkan anda melihat kesalahan apa pun yang terjadi saat browser mencoba
mengeksekusi kode JacaScript anda.

8. Automation Tools

Program-program seperti Grunt dan Gulp dapat digunakan untuk mengotomatiskan pengoptimalan
gambar, CSS dan JS minifying, dan web lainnya.