in

Belajar Membuat Paragraf, Link, Gambar, dan Tombol Pada HTML

Belajar membuat paragraf, gambar, link, dan tombol pada HTML – Halo, selamat datang kembali di seri belajar HTML bersama kodedev.com.

Pada artikel kali ini kita akan belajar membuat halaman web sederhana yang menampilkan paragraf, gambar, link, dan tombol. Tapi sebelum lanjut ke tahap ngoding, Anda bisa melihat dua artikel sebelumnya yang membahas mengenai cara membuat dokumen html dan menggunakan text editor.

Salah satu tujuan utama dari pembuatan halaman web adalah untuk menampilkan suatu informasi. Entah itu informasi yang terkait dengan branding produk, cerita pengalaman, atau untuk sekedar membagikan pengetahuan dan ide. Informasi tersebut biasa dikemas menjadi sebuah artikel yang terdiri dari teks paragraf, gambar, dan sebagainya. Oleh karena itu membuat komponen tersebut merupakan hal dasar dalam pembuatan web. Oke, kita langsung saja mencoba membuatnya, Anda bisa siapkan tag-tag yang diperlukan untuk membuat dokumen html terlebih dahulu seperti di bawah ini.

belajar-html
Menyiapkan dokumen html

Membuat Heading dan Paragraf

Dalam typografi heading biasa digunakan untuk membuat sebuah judul dan memudahkan pembaca untuk menemukan poin-poin yang ingin kita jelaskan dalam artikel. Penggunaan heading juga lumayan berpengaruh untuk SEO sebuah website. Untuk membuat heading dalam html, tag yang digunakan adalah <h1>...</h1>. Angka 1 dapat diganti dengan ukuran heading lain yang didefinisikan dari angka 1 sampai 6. Sedangkan untuk membuat paragraf kita bisa menggunakan tag <p>...</p>. Anda juga bisa menggunakan tag <br> untuk memberikan perintah enter. Contoh penggunaan kedua tag tersebut adalah seperti dibawah ini.

heading_dan_paragraf
Membuat Heading dan Paragraf

Membuat Link

Tag link didefinisikan dengan <a></a>, diikuti dengan atribut href untuk memberikan tujuan link saat di klik dan teks yang ingin dibuat. Masih ada atribut lain yang bisa digunakan pada tag link contohnya seperti target, title, rel, dan sebagainya. Contoh sederhana pembuatan link adalah seperti gambar di bawah ini.

membuat-link
Membuat Link

Menambahkan Gambar

Tag untuk menambahkan gambar <img>, tag ini sedikit berbeda karena tidak memerlukan tag penutup. Tag <img> diikuti oleh beberapa atribut seperti src, alt, width, dan height. Atribut src digunakan untuk memanggilkan file gambar yang diinginkan. Perlu diperhatikan juga folder tempat Anda menyimpan file gambar, saya sarankan letakkan saja di folder yang sama dengan Anda menyimpan file html. Contoh penggunaannya adalah seperti berikut.

menambahkan-gambar
Menambahkan Gambar

Membuat Tombol

Tombol merupakan media yang biasa digunakan pada sebuah web untuk berinteraksi dengan pengunjungnya. Untuk membuat tombol, tag yang digunakan adalah <button></button>. Tetapi umumnya dalam pembuatan tombol ini dipadukan dengan css agar tombol menjadi lebih bagus dan menarik pengunjung untuk berinteraksi. Contoh sederhana penggunaan tag ini adalah seperti pada gambar.

menambahkan-tombol
Membuat Tombol

Untuk melihat hasilnya Anda bisa menyimpan file html yang sudah dibuat kemudian berikan ekstensi .html pada file. Klik dua kali, maka hasilnya akan otomatis terlihat di browser. Jika Anda mengikuti tutorial di atas dengan benar maka kurang lebih hasilnya adalah seperti gambar ini.

hasil

Kesimpulan

Paragraf, gambar, link, dan tombol merupakan komponen atau elemen dasar yang pasti ada di semua website. Dengan memahami cara membuatnya, Anda bisa berimprovisasi dan mendesain tampilan sederhana dari halaman web pertama Anda.

What do you think?

0 points
Upvote Downvote

Written by dedy wira

Leave a Reply

Your email address will not be published. Required fields are marked *

java method

Penjelasan Method di Bahasa Pemrograman Java