Mulai Belajar HTML

Ini adalah bagian awal kita dalam mempelajari pemrograman web dan membuat halaman web.

Hal yang perlu kita persiapkan:

Text Editor : Vs Code atau yang lainnya 

Web Browser : Google Chrome atau yang lainnya

Yang akan kita pelajari disini adalah:

1.  Memulai dengan HTML
2.  Judul dan Paragraf
3.  Komentar
4.  Tautan
5.  Gambar
6.  Daftar

1. Memulai dengan HTML

HTML (Hyper Text Markup Language) adalah bahasa yang digunakan sebagian besar situs web, dengan mempelajari bahasa html dan css kita akan mampu membuat sebuah tampilan web.

Aturan pertama menulis code html adalah dengan mengapit teks dengan tag. Tag bisa kita artikan sebagai tautan atau judul pada teks, sebagai contoh code dibawah bahwa h1 adalah tag <h1> adalah tag pembuka dan </h1> adalah tag penutup dan Hello World adalah teksnya.

Mari kita mulai ngoding dengan membuka text editor dan tuliskan code dibawah:

<h1>Hello World</h1>

kemudian lihat hasilnya dengan membuka browser:

2. Judul dan Paragraf

Pertama kita harus memahami yang namanya Tag Judul, kegunaan tag judul adalah untuk memformat atau mengganti ukuran font dari judul seperti judul biasanya menggunakan ukuran yang lebih besar dari sub judul. Tag ini memulai dari code <h> yang berarti heading di mulai dari <h1> dengan ukuran yang paling besar hingga <h6> dengan ukuran yang paling kecil, dan jangan lupa setiap tag pembuka harus ada tag penutup dengan menambahkan slash sebelum heading seperti contoh gambar dibawah:

Kemudian yang kedua kita harus memahami Tag Paragraf, tag paragraf yang di tulis dengan code <p> yang p berarti paragraf biasanya tag ini berada di antara tag <h2>. Contoh biasanya kita membuat judul dengan tag berukuran <h2> dan di bawah tag <h2> terdapat judul yang lebih kecil dengan menggunakan tag <p>. 

Mari kita implementasikan kedalam coding dalam menggunakan judul dan paragraf, mari kita gunakan text editor sebelumnya kemudian tambahkan coding coding di bawah ini:

<h1>Hello World</h1>

<h2>Selamat Datang</h2>

<p>Selamat Datang di Pelajaran HTML</p>

Kemudian kita lihat hasilnya:

3. Komentar

Komentar adalah bagian yang cukup penting dalam mengerjakan coding, komentar tidak di tampilkan di browser tapi sangat berguna  untuk menjelaskan tentang coding yang kita kerjakan. Untuk membuat komentar teks harus di apit oleh <!--  teks  --> untuk lebih jelas bisa dilihat pada code di bawah:

<!-- Ini adalah komentar <h1> -->

<h1>Hello World</h1>

<!-- Ini adalah komentar <h2> -->

<h2>Selamat Datang</h2>

<!-- Ini adalah komentar <p> -->

<p>Selamat Datang di Pelajaran HTML</p>

4.Tautan

Selanjutnya kita harus mengenal Tag Tautan, tag tautan bisa juga pahami sebagai penambat, kita bisa membuat tautan dengan tag <a> a yang mewakili kata anchor atau penambat. Teks yang di apit oleh tag <a> di tampilkan di browser sebagai tautan.

Seperti yang sudah di jelaskan bahwa tautan ini adalah sebagai penambat artinya harus ada yang di tambatkan atau di kaitkan oleh tag ini. Kita bisa menambatkan tag ini ke url yang ingin kita tuju dengan menambahkan atribut 'href'. Lansung saja kita coba di text editor dan tuliskan code di bawah ini.

<!-- Tambahkan tautan yang menuju ke "http://www.andyusuf.site" -->

<a href="http://www.andyusuf.site">Ke situs andyusuf.site</a>

<br>

<!-- Tambahkan tautan yang menuju ke "https://google.com" -->

<a href="https://google.com">Ke situs Google</a>

dan lihat hasilnya, jika kita klik pada tulisan atau alamat tersebut maka akan menuju ke url yang sudah kita tambatkan.

5. Gambar

Selanjutnya kita akan mengenal Tag Gambar, tag ini berguna untuk menampilkan gambar. Kita bisa menambahkan gambar dengan menggunakan tag <img> yang berarti image. Untuk menampilkan gambar kita juga harus mengaitkan ke url gambar tersebut dengan menambahkan 'src'. Tag ini tidak memerlukan tag penutup karna tidak ada teks yang di apit. Mari kita coba di text editor, dan tuliskan code di bawah ini:

<!-- Tambahkan gambar menggunakan URL yang ditentukan -->

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0TOUs4ucFYbZ0mzQshGTZFXIdjusZYlcxZxU5NndhRU6HU6g7Xzq4GTpiHL3av9SAgBFxu4TPi1hHZnojR50U66qs0-AlkVMfs1zBCaTBXhP4UTgByfimQ6B7kjOtCqe2GO1oovGZ-eM/w400-h200/html+css.PNG">

<!-- Tambahkan gambar menggunakan URL yang ditentukan -->

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV-ewJCseom-p9_DD7252fTPZhqEaIVaWeozPeA4KwtZ3GofL4cTCTsRId2zvE3YXH2JINLO0obE3PUwW9t_WcCS7wWlt2XFbLVSM26YEi1nD93USB2Y86PdRTNw99mx-jq6esq9FyjB0/s1600/1.PNG" alt="ini gambar" />

dan lihat hasilnya, gambar yang ditampilkan berasal dari link url yang kita kaitkan.

6. Daftar

Terakhir yang perlu kita pelajari adalah daftar, kita bisa membuat daftar dengan menggunakan tag <li> tapi sebelum itu kita harus mengenal tag <ul> dan dimana letak tag tersebut. Tag <ul> berfungsi untuk mengapit daftar yang terdapat pada tag <li>, dengan tag <ul> kita dapat membuat daftar dengan bullet, atau bisa juga kita artikan tag <ul> adalah sebagai element induk dan tag <li> sebagai element anak. 

Mari kita implementasikan ke text editor, tuliskan code di bawah ini:

<!-- Membuat Daftar -->

<ul>

    <li>HTML</li>

    <li>CSS</li>

    <li>JavaScript</li>

</ul>

Kemudian lihat hasil dari daftar yang sudah kita buat:

Banyak hal yang perlu kita pelajari lagi namun ini adalah bagian awal yang perlu kita pahami dalam bahasa html. Kemudian tahapan dasar yang perlu kita pelajari adalah CSS.