HTML Untuk Pemula
Belajar HTML sangatlah perlu bagi anda yang ingin mempelajari pondasi website,saat ini sudah banyak orang yang bisa membuat website dengan hanya menginstall tema atau plugin dari luar,namun cara ini biasanya ada ketidaksesuaian antara tema yang kita install dengan keinginan kita misalnya, font yang terlalu besar,header yang kurang pas,warna yang tidak cocok dan lain lain,maka dari itu mempelajari HTML sangatlah penting agar masalah masalah seperti ini mudah diselesaikan.
Dibawah ini saya akan menjelaskan beberapa tutorial HTML untuk pemula,yang akan dibagi dalam beberapa sub judul yaitu.
1.Penjelasan HTML.
2.Sejarah HTML.
3.Kerangka HTML.
4.Tag Element dan Atribut.
5.Editor HTML
6.Membuat Halaman HTML.
7.Kode Warna Untuk HTML.
8.Membuat tabel di HTML
Apa itu HTML?
HTML merupakan singkatan dari Hypertext Markup Language,gabungan dari dua istilah yaitu Hypertext dan markup language.
Hypertext adalah dokumen berisi tautan yang memungkinkan pengguna terhubung ke halaman lain
markup language adalah bahasa komputer yang terdiri dari sekumpulan kode yang mengatur struktur dan menyajikan informasi.
maka dapat disimpulkan bahwa HTML adalah bahasa markup untuk membuat halaman website.
Sejarah HTML
HTML lahir pada tahun 1991,diciptakan oleh seorang ilmuan bernama Tim Berners-Lee,awalnya HTML digunakan untuk memudahkan para ilmuan dalam mengakses dokumen satu sama lain,namun sekarang ini HTML berkembang menjadi pondasi website untuk era sekarang.
Dibawah ini tabel singkat perjalanan HTML
bisa dilihat pada tabel ,untuk sekarang HTML5 adalah versi yang paling update dimana HTML5 memiliki sistem yang lebih sempurna dari pendahulunya,dengan syntax yang lebih sederhana maka HTML5 cocok untuk pemula.
Kerangka inti HTML
Dibawah ini saya akan memberikan bentuk sederhana pada kerangka inti HTML,bentuk sederhana inilah yang menyusun dokumen dokumen HTML.
- <!DOCTYPE html> suatu deklarasi untuk mengidentifikasi jenis dokumen HTML
- <html></html> tag untuk menandai mulai dan berakhirnya dokumen dalam HTML.
- <head></head> tag untuk mengisi hetadata dari dokumen HTML,biasanya diisi dengan judul tab, dll.
- <body></body> diisi dengan isi halaman web.
Tag Element dan Attribute
- Tag,adalah awalan instruksi atau perintah yang akan dibaca oleh browser,tag tidak punya pasangaan penutup dengan </>.contohnya adalah <p>,<a>,<bold>.
- Element,adalah komponen yang menyusun html,kadang disebut node misalnya <h1></h1>
- Attribute,perintah tambahan dalam elemen.misalnya,ingin menambahkan link pada tag <a>,kita tinggal menuliskan <a href=”https://www.unikom.ac.id”>Link Unikom</a>
Editor HTML
Jika kita ingin membuat dokumen html tentu kita butuh Editornya,berikut dibawah ini saya berikan beberapa contoh editor yang patut dicoba
- Notepad++
merupakan sebuah aplikasi yang dibuat untuk sistem operasi windows,notepad++ memiliki tampilan yang sederhana dan juga ringan.
2. Atom
Atom merupakan salah satu HTML editor terbaik,atom bersifat opensource dan juga gratis,tidak hanya itu atom dapat dijalankan di semua sistem operasi.
3.Brackets
Brackets juga merupakan salah satu editor HTML yang baik,ringan,dapat berjalan di semua sistem operasi,dan juga merupakan HTML editor yang gratis.
4.Visual Studio Code
Dikembangan oleh microsoft,editor ini dapat digunakan untuk semua sistem operasi dan juga ediotr HTML ini gratis,HTML editor ini juga dapat menambahkan extension untuk fungsi fungsi lain kita tinggal memasangnya dan pilih melalui marketplacenya.
Membuat halaman HTML
yang pertama kali anda lakukan tentu menginstall salah satu text editor yang tersebar,disini saya menggunakan notepad++,lalu menginstall xampp atau aplikasi sejenis.
setelah menginstall keduanya lalu buka notepad++ dan xampp,lalu start apache dan MySQL.
setelah itu kita coba dengan membuat halaman web sederhana menggunakan html dengan kerangka intinya saja.
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML</title>
</head>
<body>
<H1><center>Belajar HTML Untuk Pemula</center></h1>
</body>
</html>
setelah itu save file dengan format .html lalu simpan di folder htdocs,biasanya di Local Disk C/xampp/htdocs
setelah di safe buka browser lalu ketikan di address bar localhost/namafile.html .disini kita ketikan dengan localhost/belajarhtml.html.
Kode Warna Untuk HTML
Dalam html kita dapat mengubah warna pada font background dll.dimana warna warna tersebut memiliki kode kode tertentu,namun jika itu hanya warna basic kita dapat menuliskan warnanya saja kedalam bahasa inggris.
contohnya kita ingin fontnya menggunakan warna merah,maka kita tuliskan
<font color =”red”>Belajar HTML Untuk Pemula</font>
hasilnya:
namun jika kita ingin menggunakan warna yang lebih spesifik kita dapat menggunakan kode kode yang terdapat disini.
misalnya kita menggunakan warna aqua maka kita tambahkan kode tersebut seperti:
<font color =”#00FFFF”>Belajar HTML Untuk Pemula</font>
maka masilnya:
Membuat Tabel di HTML
Tabel merupakan salah satu tag penting dalam html,dengan tabel kita dapat berapikan suatu konten agar lebih terorganisir dan enak untuk dilihat,tabel pada html menggunakan tag <table> dan diakhiri dengan </table>,dimana didalam <table> kita dapat mengatur baris dan kolomnya sesuai yang kita inginkan dengan menggunakan tag <tr> untuk menambah baris dan tag <td> untuk kolom.
berikut contoh penggunaan tabel :
Code:
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML</title>
</head>
<body>
<H1><center><font color =”#00FFFF”>Belajar HTML Untuk Pemula</font></center></h1>
<table border = “1”>
<tr><td>Nama</td><td>Muhammad Aulia Rahman</td>
<tr><td>Hobi</td><td>Gaming</td>
</table>
</body>
</html>
hasilnya:
kita dapat menambah ketebalan garis dengan menambah angka pada tanda petik 2 di <table border=”1”>misalnya <table border=”2”>.
kita juga dapat menghilangkan garis pada tabel bila kita hanya ingin membuat tampilan kita rapi dengan tabel,dengan cara menghilangkan border pada <table>:
Code:
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML</title>
</head>
<body>
<H1><center><font color =”#00FFFF”>Belajar HTML Untuk Pemula</font></center></h1>
<table>
<tr><td>Nama</td><td>Muhammad Aulia Rahman</td>
<tr><td>Hobi</td><td>Gaming</td>
</table>
</body>
</html>
hasilnya :
Penutup
Dalam belajar html tentu masih banyak yang perlu dipelajari,yang saya sampaikan sekarang hanyalah dasar atau permukaannya saja,teruslah belajar dengan mencari referensi referensi lain agar kita semakin mahir dalam mendesain suatu website.
Akhir kata saya ucapkan terima kasih karena telah membaca,
Wassalamualaikum Wr. Wb.
10118111 - Muhammad Aulia Rahman
Program Studi Teknik Informatika
Fakultas Teknik Dan Ilmu Komputer
Universitas Komputer Indonesia
referensei :
- HTML,https://en.wikipedia.org/wiki/HTML
- Belajar HTML Lengkap Untuk Pemula (Oktober 2020),Benefita,diakses dari https://www.niagahoster.co.id/blog/belajar-html/
- HTML,https://id.wikipedia.org/wiki/HTML
