Jika Sobat Jagoan berniat ingin mendalami dunia web design atau bahkan sudah menyandang gelar webmaster berpengalaman yang ingin membuka kembali knowledge bank seputar dasar-dasar HTML, kami memiliki panduan belajar HTML lengkap yang akan proses belajar kamu.
Sekilas Tentang HTML
HTML (Hyper Text Markup Language) adalah bahasa markah yang digunakan untuk membuat sebuah website sesuai dengan standar pengkodean tag HTML.
Meskipun HTML tidak termasuk ke dalam bahasa pemrograman, namun HTML merupakan dasar yang wajib diketahui sebelum memulai pemrograman web.
HTML menyediakan bermacam-macam tag untuk mendeskripsikan tipe konten atau elemen pada website kamu, misalnya <header>, <link>, dan <div>.
Hal ini memungkinkan browser kamu untuk membaca dan menginterpretasikan tiap-tiap tag.
Meskipun HTML tidak termasuk ke dalam bahasa pemrograman, namun HTML merupakan dasar yang wajib diketahui sebelum memulai pemrograman web.
Hal ini memungkinkan browser kamu untuk membaca dan menginterpretasikan tiap-tiap tag.
"In conclusion, HTML is like a place where all the languages are written."
Macam-Macam Editor HTML
Setelah paham sekilas tentang HTML, maka langkah yang patut Sobat Jagoan ambil adalah mengenal masing-masing editor HTML yang tersedia di market.
Berikut adalah macam-macam editor yang harus kamu ketahui.
Kelebihan: Cocok digunakan untuk pemula, easily customizable, dan memiliki banyak skema warna yang bisa dipilih.
Kekurangan: Tidak dapat mencetak dokumen atau kode dan tidak adanya toolbar dan dashboard.
Kelebihan: Distraction-free interface, fitur auto-completion, dan tersedianya plugin-options.
Kekurangan: Kurang cocok digunakan untuk pemula dan tidak dapat digunakan pada sistem operasi Mac.
Kelebihan: Memiliki coding interface yang mudah dipahami, dapat digunakan pada sistem operasi Mac, Windows, dan Linux, dan tersedianya language support yang mumpuni.
Kekurangan: Tidak memiliki fitur auto-completion dan tampilan settings yang sulit dipahami.
Berikut adalah macam-macam editor yang harus kamu ketahui.
- Sublime Text
Kelebihan: Cocok digunakan untuk pemula, easily customizable, dan memiliki banyak skema warna yang bisa dipilih.
Kekurangan: Tidak dapat mencetak dokumen atau kode dan tidak adanya toolbar dan dashboard.
- Notepad ++
Kelebihan: Distraction-free interface, fitur auto-completion, dan tersedianya plugin-options.
Kekurangan: Kurang cocok digunakan untuk pemula dan tidak dapat digunakan pada sistem operasi Mac.
- Komodo Edit
Kelebihan: Memiliki coding interface yang mudah dipahami, dapat digunakan pada sistem operasi Mac, Windows, dan Linux, dan tersedianya language support yang mumpuni.
Kekurangan: Tidak memiliki fitur auto-completion dan tampilan settings yang sulit dipahami.
Tag dan Atribut HTML
HTML membutuhkan cara untuk mendeskripsikan text−baik berupa list, paragraf, atau link−yang ditulis di dalamnya kepada browser.
Di sinilah dibutuhkan peran tag. Tag adalah kode yang dipakai untuk menginformasikan pada browser untuk apa HTML ditulis.
Berikut contoh tag yang sering digunakan beserta dengan fungsinya.
Atribut memiliki dua bagian yaitu nama dan nilai yang ditulis name=“value”. Penulisan atribut pada HTML diawali dengan tag, misalnya <h2 align=“center”>Panduan Belajar HTML</h2>
Dalam kasus di atas, h2 adalah tag heading 2 dan align dan center adalah nama atribut.
Di sinilah dibutuhkan peran tag. Tag adalah kode yang dipakai untuk menginformasikan pada browser untuk apa HTML ditulis.
Berikut contoh tag yang sering digunakan beserta dengan fungsinya.
- <body> berfungsi untuk menunjukkan isi dokumen HTML;
- <div> berfungsi untuk menunjukkan halaman;
- <tr> berfungsi untuk membuat baris dalam sebuah tabel; dan sebagainya.
Atribut memiliki dua bagian yaitu nama dan nilai yang ditulis name=“value”. Penulisan atribut pada HTML diawali dengan tag, misalnya <h2 align=“center”>Panduan Belajar HTML</h2>
Dalam kasus di atas, h2 adalah tag heading 2 dan align dan center adalah nama atribut.
Cara Membuat HTML Page untuk Pemula
Pada
kolom ini, kami akan menjelaskan lebih lanjut cara membuat HTML Page
dengan mudah, terlebih jika Sobat Jagoan adalah orang awam yang
sebelumnya belum pernah mencoba membuat HTML.
Tag <header> paling tepat diletakkan di bagian atas web di mana kita biasa meletakkan judul situs, misalnya Jagoan Hosting, seperti contoh berikut ini:
<h1>Jagoan Hosting</h1>
<h1>Jagoan Hosting</h1><p>Selamat pagi, Sobat Jagoan!<p>
Kamu perlu menyisipkan <li> di dalam <ul>. Berikut adalah contoh sederhananya.
<ul> <li>Package A</li> <li>Features</li> <li>Price</li></ul>
Sobat Jagoan bisa menggunakan <img> untuk menampilkan gambar pada website kamu. <img> memiliki atribut lain yang berisi informasi lanjutan dari sebuah gambar seperti sumber, tinggi, lebar, dan sebagainya.
Untuk kamu yang masih kebingungan dalam mencari sebuah gambar yang berkualitas, kami mempunyai daftar situs yang menyediakan layanan tersebut.
Berikut adalah contoh sederhana yang bisa Sobat Jagoan dengan mudah lakukan.
<input type=“text” placeholder=“Enter your email” />
Berikut contoh penggunaan tag tabel pada HTML.
<table>
<tr>
<td>Baris A – Kolom A</td>
<td>Baris A – Kolom B </td>
</tr>
<tr>
<td>Baris B – Kolom A</td>
<td>Baris B – Kolom B</td>
</tr>
</table>
Nah, setelah Sobat Jagoan memahami dan mencoba menerapkan langkah-langkah dasar di atas, kamu sebenarnya telah siap untuk terjun di area web development.
Namun, kamu masih memerlukan informasi-informasi tambahan untuk mengembangkan wawasan dan kemampuan kamu.
Untuk itu, ada baiknya kamu melakukan follow up pada website Jagoan Hosting untuk mendapatkan artikel-artikel bermanfaat lainnya.
- Header
Tag <header> paling tepat diletakkan di bagian atas web di mana kita biasa meletakkan judul situs, misalnya Jagoan Hosting, seperti contoh berikut ini:
<h1>Jagoan Hosting</h1>
- Paragraf
<h1>Jagoan Hosting</h1><p>Selamat pagi, Sobat Jagoan!<p>
- List
Kamu perlu menyisipkan <li> di dalam <ul>. Berikut adalah contoh sederhananya.
<ul> <li>Package A</li> <li>Features</li> <li>Price</li></ul>
- Gambar
Sobat Jagoan bisa menggunakan <img> untuk menampilkan gambar pada website kamu. <img> memiliki atribut lain yang berisi informasi lanjutan dari sebuah gambar seperti sumber, tinggi, lebar, dan sebagainya.
Untuk kamu yang masih kebingungan dalam mencari sebuah gambar yang berkualitas, kami mempunyai daftar situs yang menyediakan layanan tersebut.
- Input Fields
Berikut adalah contoh sederhana yang bisa Sobat Jagoan dengan mudah lakukan.
<input type=“text” placeholder=“Enter your email” />
- Tabel
| Tag Tabel | Definisi | Posisi |
| <thead> | Table Head | Bagian atas tabel |
| <tbody> | Table Body | Konten tabel |
| <tfoot> | Table Foot | Bagian bawah tabel |
| <colgroup> | Column Group | Di dalam tabel |
| <th> | Table Header | Sel data untuk header tabel |
<table>
<tr>
<td>Baris A – Kolom A</td>
<td>Baris A – Kolom B </td>
</tr>
<tr>
<td>Baris B – Kolom A</td>
<td>Baris B – Kolom B</td>
</tr>
</table>
Nah, setelah Sobat Jagoan memahami dan mencoba menerapkan langkah-langkah dasar di atas, kamu sebenarnya telah siap untuk terjun di area web development.
Namun, kamu masih memerlukan informasi-informasi tambahan untuk mengembangkan wawasan dan kemampuan kamu.
Untuk itu, ada baiknya kamu melakukan follow up pada website Jagoan Hosting untuk mendapatkan artikel-artikel bermanfaat lainnya.
0 Komentar