Matamu.NET – Pada saat belajar HTML ada tiga aspek yang penting untuk diperhatikan sebagai informasi dasar penyusunan code HTML. Tiga aspek adalah Tag, Element, dan Atribute.
1. Tag
Tag adalah text yang berfungsi sebagai penanda khusus (markup) yang memiliki fungsi untuk dijalankan. Misalnya tag <p> ini menjadi penandai bahwa setelah tanda ini akan ada kalimat yang terususn dalam bentuk paragraf. Tag memiliki syntak pembuka <tagName> dan penutup dengan tanda garis miring </tagName>.
Contoh-contoh tag umum dalam html adalah <html>, <body>, <p>, <div>, dan sejenisnya. Contoh penggunaan tag seperti berikut L:
<h2> Latihan HTML </h2>
<p> Disini adalah contoh penggunaan tag P dalam membuat paragfraf di HTML </P>
Pada awal dikembangkan di HTML 1.0, html hanya mengenal 18 tag, namun pada saat ini di HTML 5.2, sudah terdapat lebih dari 250 tag.
Tag disusun dengan tipe nested (bersarang) yakni :
<p><b><u>Contoh penulisan tag HTML yang benar </u></b></p>
Penulisan seperti ini dianggap salah pada struktur tag html.
<p><b><u>Contoh penulisan tag HTML yang salah </p></b></u>
2. Elemen
Elemen adalah semua yang diletakkan di awal pembuka tag sampai penutup tag.
<tagName> <tagName2> isi tag ini adalah bagian dari element </tagName2> </tagName>
Elemen terkadang juga disebut sebagai node. Element digunakan untuk menyusun komponen-komponen document html. Node dalam html terbagi ke dalam tiga jenis :
node elemen
node atribut
node tesk
Elemen adalah satu kesatuan dari dari tag pembuka, isi tag dan penutup tag. Konsep dari elemen adalah bentuk yang tampilkan pada laman webpage ketika document html.
3. Attribute
Atribute adalah modifier yang memberikan informasi tambahan dari sebuah elemen. Posisinya diletakkan pada bagian tag pembuka sebelum tanda “>”. Penulisan attribute selslaui ditulis dalam bentuk nameattribute=”value”
<p>Ini adalah contoh penggunaan atribusi</p>
Setelah diberikan atribute style sseperti contoh berikut ini!
<p style="color:red; font-family:sans-serif; font-size:22pt;">Ini adalah contoh penggunaan atribusi</p>
Perbedaanya dapat dilihat pada compiler html berikut ini
Attribute terbagi ke dalam tiga jenis atribut :
Atribute Global – Atribut yang dapat ditambahkan pada semua html
Atribute Event – Atribut yang ditambahkan sebagai bentuk aksi terhadap sebuah element. Atribut ini banyak digunakan pada penggunaan script tambahan seperti javascript.
Atribute Khusus – Atribut yang hanya bisa dipakai dengan tag yang khusus dan tidak bisa pada tag lain.
Contoh dari atribut khusus :
atribute
tag pengguna
src
<a>, <img>, <audio> <video> dll.
href
<a> <link>
action
<form>
autoplay
<audio> <video>
Catatan : Atribute ditulis dengan huruf kecil dengan nilai yang atribusi diketikan diantara tanda petik “…”
Matamu.NET – Sebenarnya tidak ada struktur dasar dalam pengembangan document HTML tapi ada pola-pola yang sering digunakan secara umum sehingga pola-pola ini selanjutnya disebut sebagai struktur dasar.
Document HTML secara default harus memiliki
Pembuka document dalam bentuk tag deklrasi <!DOCTYPE html>
Document html akan dibuka dengan tag <html> dan ditutup dengan tag </html>
Bagian yang dilihat oleh client saat diterbitakan diletakkan pada bagian <body> … </body>
secara umum struuktur document html dituliskan dalam bentuk :
Declaration
Head
Body
Contoh penulisan :
<!DOCTYPE html>
<html>
<head>
<title>Tutorial Paragraf di HTML #3</title>
</head>
<body>
<h1>Judul Tulisan</h1>
<p>Paragraf diletakkan di tag P atau bis adalam bentuk tag div</p>
</body>
</html>
contoh view dari document :
1. Deklarasi
Bagian deklarasi memberikan jenis document html yang dibuat. Meskipun bisa dibuat tanpa bagian declarasi, namun document yang disusun dianggap tidak valid oleh W3C.
Tag deklarasi pembuka document hanya dituliskan sekali di setiap document. Tag ini tidak sensitive case seperti pada umumnya code html.
Jika kita menghilangkan tag <!DOCTYPE html>, dokumen ini masih menampilkan laman yang sama dengan <!DOCTYPE html>.
Pada contoh tag deklarasi yang digunakan dibagian atas menggunakna dari HTML 5.0 itu <!DOCTYPE html>. Setiap versi HTML berbeda-beda seperti pada HTML 4.0 dideklrasikan dengan tag
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Setelah tag deklarasi, selanjutnya adalah tag html yang dibuka dengan <html> dan ditutup </html>
<html lang="en">
Tag ini adalah tag wajib karena menjadi ruang kita menuangkan tag-tag dan code-code dalam membuat document HTML.
Dalam tag ini terdapat atribut yang menunjukkan lang=”en” yang berarti tulisan dalam documen ini dalam bahasa inggris. Memang sih isi dari documennya tetpa bis adiisi dengan bahasa lain selain bahasa inggris, tapi atribute ini memudahkan browser untuk memberikan referensi bahasa kepada user jika diakses online.
Conothnya biasanya ketika kita mengakses artikel bahasa Inggris dari Indonesia maka akan ada informasi jika laman ini menggunakan bahasa Inggris, apakah anda ingin mengubahnya ke bahasa Indonesia?
2. Head
Bagian Head dimulai dengan tag <head> dan ditutup dengan </head>
Bagian yang di Bold adalah tag Head. Bagian ini berisi informasi yang tidak akan ditampilkan di laman pada saat document diterbitkan, namun tetap ikut diloading oleh browser.
Karena tidak muncul terkadang orang-orang menyebutnya sebagai meta data. Fungsi dari tag ini adalah :
Tempat menaruh meta tag yang membuat webiste lain bisa melacak situs kita. Biasanya untuk kebutuhan SEO
Menempaykan tah title untuk judul website
tempat menuliskan css, javascript, character set, script dan sejenisnya
dan lain-lain
Secara umum bagian Head ini dugunakan untuk mengatur style element secara umum seperti jenis huruf yang digunakan, ukuran, warna background, ukuran kotak box dan sejenisnya :
<style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}
</style>
Contoh penggunaan sebagai berikut :
Head juga berisi metadata yang berisi elemen-elemnt meta yang mengatur penampilan documen secara umum. Adapun contoh-conoth meta element :
Pada bagian Body <body>…</body> adalah bagian yang ditampilkan di web browser atau sebut saja sisi sebagai bagian View. Baik code Head dan Body sebenarnya dua-duanya di loading dari sisi Client.
<body>
<p>Hello World!</p>
</body>
Di bagian body ini, web developer memiliki tugas menata posisi, style, ukuran, dan seluruh hal yang berkaitan dengan User Interface di daerah body. Tag-tag yang disarankan bisa dalam bentuk paragraf <p>…</p> atau tag divisi <div>…</div>
Matamu.NET – HTML adalah singkatan dari HyperText Markup Language yang digunakan sebagai bahsa front en paling popular. Semua stus yang berjalan di browser ditampilakn dengan bahasa HTML, sekeren apapun websitenya.
A. Mengenal HTML
Seperti yang dijelaskan sebelumnya, HTML adalah singkat dari HyperText Markup Language, Prinsip kerjanya sederhana yakni Library HTML menyimpan sebuah script kemudian dipangil dengan code-code yang diberikan dari setiap script yang sudah ada.
Misalkan ketika kita menulis code & phi; dalam HTML maka Browser akan menayangkan simbol φ di tampilan.
Pada saat menyusun Halaman website, sebenarnya kita menyusun code-code HTML untuk menayankan informasi yang banyak kemudian ditampilkan dalam bentuk laman ke user.
1. Sejarah HTML
Konsep HyperText di dunia nyata dapat dianalagikan melalui layanan perpusatakan.
Misalkan sebuah perpustakaan yang memiliki ratusan ribu judul buku yang disimpan dalam gudang yang luas. Jika buku tersebut disimpan berdasarkan abjad saja maka akan membuat pustakawan kesulitan dalam mencari buku jika seseseirang ingin meminjam buku tersebut.
Agar lebih mudah menemukan buku tersebut maka buku disusun berdasarkan kelompok. Langkah awal dibuat berdasarkan kategori Buku, maka kategori ini disebut sebagai heading. Setelah kategori dikelompokkan berdasarkan abjad abjad awal penulisnya. Abjad ini disebut sub heading. Setelah abjad dibuat su heading yang setara dengan sub heading seperti nomor rak dan nomor loker.
Maka kita misalkan Buku Pemograman dubat oleh Tatang Sutarman dilettakkan di lemari 121 lorong c, di loker 13b. Pada bagian admini perpustakan cukup menulis PEM-TS-121C-13B, maka yang akan akan diambil adalah buku yang telah dimaksud. Petugas perpus akan dengan mudah mengambil buku tanpa harus menilaskan seluruh informasi mengenai buku.
Ide ini menjadi dasar pengembangan HTML yang dikembangkan oleh Tim Berners-Lee tahun 1980. Banyaknya dokumen ditempat Tim bekerja membuat pencarian dokumen membutuhkna waktu yang lama sehingga Berners pun memulai membuat code untuk mewakili setiap dokumen.
Code-code ini awalnya disusun berdasarkan tittle, heading, informasi deskrips dan nomor code. Barners akhinya menggunakan tag sebagai code tersebut seperti <tittle>, <h1>, <p> dan seterusnya. Ternyata penggunaan code ini memudahkan pemanggilan informasi. Hal ini yang menjadi dasar pengembangan HTML.
Tag dan code-code html ini kemudian berkembang sesuai dengan kebutuhan pencarian dan penampilan data yang lebih banyak. Akhirnya jumlah code semakin banyak dan agar satu penggunaan dengan pengguna yang lainnya memiliki jenis code yang sama sehingga tidak multi tafsir atau gagal ditafsirkan sebuat Standar Generalised Markup Language (SGML) sebagai patikan pengembangan code html.
[draft] HTML 1.0 dirilis pada Juni 1993, versi HTML pertama namun tidak dirilis secara umum
HTML 2.0 dirilis pada pada tahun 24 November 1995, Versi kedua yang menjadi versi pertama yang dirilis.
[draft] HTML 3.0 dirilis 28 Maret 1995, gagal bereda karena banyak menuai kontroversi.
HTML 3.2 dirilis 14 Januari 1997
HTML 4.0 dirilis 24 Paril 1998
HTML 4.01 dirilis 24 Desember 1999
XHTML 1.0 dirilis 26 Januari 2000
XHTML 2.0 dirilis Agustus 2002
HTML 5 dirilis 28 Oktober 2014
HTML 5.1 dirilis awal 2017
HTML 5.2 dirilis akhir 2017
B. Belajar HTML
Belajar HTML tidak dilakukan dengan menghafal tapi dengan praktik. Pada tingkat lanjut malah kita akan belajar HTML by Case yakni langusng ke masalah yang ingin diselesaikan.
Nah untuk belajar HTML yang pertama yang harus disiakan adalah :
1. Text Editor HTML
Text Editor adalah aplikasi sederhana yang digunakan untuk mengedit code HTML. TExt Editor ini offline seperti Note, Notepad, Notepad ++ dan sejenisnya.
Selain itu bisa juga dengan editor online seperti
w3school online Code Editor
OnlineGdb
Karena digunakan online maka wajib hukumnya memiliki broweser.
Kita cuman butuh dua alat tersebut untuk belajar HTML, ternyata mudah bukan karena pada umumnya Laptop sudah memiliki software tersebut.
C. Membuat Document HTML
Silahkan buka Text Editor lalu copy paste code di bawah ini :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Belajar HTML</title>
</head>
<body>
<p>Hello World!</p>
<p>Ini Adalah dokumen HTML Pertama saya</p>
</body>
</html>
Setelah itu simpan dan beri nama Belajar.html, perhatikan ekstensi filenya adalah .html. Buka file yang kamu simpan dengan Browser maka akan tampil laman statis web seperti berikut :
Jika sudah terbuka, maka selamat ini adalah laman web statis pertama yang kamu buat sendiri, jika punya Server dan IP publik laman ini bisa kamu diakses oleh perangkat orang lain secara online.
Matamu.NET – Membuat Website bisa dilakukan dengan mudah menggunakan text editor loh. Text Editor sudah disiapkan oleh OS secara default seperti Note, NotePad ++ dan sejenisnya.
Ide-nya sederhana hanya dengan merancang tampilan menggunakan Bahasa Hyper Text Mark-up Language (HTML), ditambah dengan CSS, website kamu bisa jadi semakin keren.
Setelah membuat Website dengan Text Editor, File tersebut selanjutnya dijalankan di Aplikasi Browser seperti Google Chrome atau Microsoft Edge.
A. Struktur Dasar Document HTML
Sebenarnya tidak ada format khusus dari Document HTML karena proses pembacaan isi document dilakukan secara tertsrtuktur dari line paling atas ke bawah. Tampilan yang muncul secara default di load dari atas ke bawah.
Namun pengembang Document HTML biasanya membuat struktur yang baku sehingga bisa dengan mudah diedit oleh pengembang lain dalam tim atau diluar tim.
Struktunya paling umum dibangun dari dua bagian yakni Head dan Body. Bagian Head berisi Code dasar dan CSS sedangkan dibagian Body adlaha elemen yang ingin di tampilkan.
Strukutr Documen standar seperti contoh di bawah ini!
<!DOCTYPE html>
<html>
<head>
<title>Membuat Web dengan HTML dan CSS - matamu.net</title>
</head>
<body>
<!--Elemen yang ditampilkan di halaman browser -->
</body>
</html>
Ciri HTML itu adalah penanda yang disebut Tag, setiap taks berisi sintaks yang unik, dan tag dituliskan di dalam kurung siku <head>, tag ini kemudian ditutup dengan </head>. Pada bagian pembuka ada sntak unik <!DOCTYPE html> yang merupakan Sintaks Default pembuka dokumen yang menunjukkan jenis code HTML ynag digunakan.
B. Cara Membuat Website Dengan Text Editor dan HTML
Agar lebih memahami sebaiknya sambil membaca artikel ini silahkan lakukan tahapan berikut :
buka Text Editor
Copy Paste code HTML ke dalam tetxt editor
Save dengan extensi .html
Buka dengan
1. Membuat Laman Website Statis Biodata Diri
<h1>Biodata Pribadi</h1>
<p>
Nama : Ahmad Dahlan </br>
Hobi : Buat Tutorial Coding yang Sesat </br>
Kata Mutiara </br>
“Don’t judge a book by its cover”
</p>
Setelah, dipastikan, Silahkan Save lalu buka file tersebut dengan browser, jika berhasil tampilan akan seperti ini !
2. Memberi Style
Setelah melakukan langkah pada pada point 1, kita hanya menemukan laman statis dengan tampilan sederhan yakni jenis huruf yang standar sesaui bawaan Browser, warna hitam dan membosanka tentunya.
Kita bisa membuat tampilan menjadi sedikit lebh menarik dengan memberikan sentuhan seperti warna, ukuran huruf, jenis hurus dan sejeninya. Hal ini sedbut sebagai CSS atau Cascading Style Sheets.
Langkahnya sebagai Berikut :
<h1 style="text-align:center; color:red; font-family:sans-serif;">
Biodata Pribadi
</h1>
<p style="text-align:center; color:blue; font-family:serif;">
<b>Nama : Ahmad Dahlan</b> </br>
Hobi : Buat Tutorial Coding yang Sesat </br>
Kata Mutiara </br>
“Don’t judge a book by its cover, Judge it, by its prize”
</p>
Setelah Save As dengan tipe file HTML maka akan tampil seperti di bawah :
Pada kasus ini, Code HTML dilengkapi CSS dalam bentuk inline CSS. Metode adalah metode sederhana namun memakan banyak Soruce code, karena setiap kali ada Line baru yang dibuat maka kita harus mengentiikkan ulang setiap CSS yang ada.
2. Membuat Struktur Document per Block
Agar lebih hemat, CSS ini dibuat dalam bentuk grup yang disebut class. Calss selanjutnya disimpan di Head sebagai sumber, lalu dipanggil di Body setiap kali kita ingin menggunakan CSS tersebut kita sisa memanggil classnya.
Adapaun contohnya seperti berikut :
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
<article>
<div class="konten">
<h3 style="color:red; font-family:sans-serif;">Dummy Text</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In neque enim, imperdiet a felis sed, mattis cursus dui. Pellentesque sed arcu sapien. Aliquam luctus velit in mauris interdum, sed tincidunt arcu tempus. Phasellus ut purus ac nisi rhoncus pretium quis pellentesque diam. Curabitur eleifend luctus justo non porta. Vivamus eu urna vitae sem gravida finibus. Pellentesque sit amet neque nec lectus aliquam dignissim eget ut mauris. Mauris nec dapibus sem, nec scelerisque augue. Donec accumsan nibh vel tellus dignissim feugiat. Sed a ultricies augue, sed pulvinar neque. Suspendisse finibus, leo vestibulum lobortis hendrerit, tellus diam consectetur lacus, ac pulvinar velit elit in nibh. Mauris viverra dolor id eros vulputate rhoncus. Vestibulum nec iaculis lacus. Donec sit amet dolor felis.</p>
<p style="color:blue; font-family:sans-serif;">Donec metus ipsum, dictum a ante vel, finibus molestie mi. Donec ut rhoncus ligula, eget dapibus leo. Duis malesuada mauris vitae quam finibus tincidunt. Curabitur rhoncus libero non velit vehicula gravida. Praesent lacus sapien, faucibus et eleifend eleifend, tempor at lacus. Vestibulum blandit tincidunt quam, ut ultricies felis ultrices vel. Ut viverra feugiat dapibus. Quisque hendrerit vehicula nibh at elementum. Praesent ut scelerisque lacus. </p>
<p>Donec sit amet vulputate nulla. Nam mauris dolor, elementum vel vulputate ut, malesuada in ex. Ut vestibulum lobortis fringilla. Suspendisse tincidunt, velit non malesuada ultricies, ipsum justo viverra ligula, sed posuere nibh quam vel tortor. Vestibulum porta lacus magna, at interdum erat auctor nec. Aliquam in neque quis orci ornare tincidunt. Nam fermentum dictum tortor, sed gravida risus sagittis quis. Nulla non convallis elit. Nunc faucibus lectus vitae ipsum laoreet, et laoreet eros pellentesque. Nam condimentum cursus arcu, eget egestas massa pharetra sed. Integer facilisis neque quis sodales sagittis. Duis erat purus, aliquet quis tincidunt quis, tincidunt quis nulla. </p>
</div>
</article>
<footer>
Copyright Matamu.NET
</footer>
</div>
</body>
</html>
Silahkan Save lalu jalankan di Browser dan lihat perubahan yang terjadi.
