Kamis, 06 Juli 2017

Tutorial Cara Belajar Pemrograman Web HTML Dasar

Bagi pembaca yang baru mengenal HTML, untuk membuat dokumen web dengan HTML cukup mudah dilakukan. Namun sebelumnya, baiknya pembaca mengenal terlebih dahulu struktur yang dimiliki oleh HTML. Di bawah ini akan dijelaskan mengenai strukur dan bagaimana menggunakan HTML.

Untuk mulai memahami cara menggunakan HTML, silahkan lihat gambar struktur halaman HTML di bawah ini:

Tutorial Cara Belajar Pemrograman Web HTML Dasar

Pada intinya halaman HTML terdiri dari tag, element, dan attribute atau halaman HTML itu disusun oleh element-element seperti body, paragraph, table, list, dan lain-lain. Penandaan setiap element menggunakan tag dengan format penulisan dengan menggunakan tanda baca “<”, “>”, “/” atau<tag>content</tag> .Pada contoh di atas <h1>Heading 1</h1> merupakan tag.

Untuk lebih jelasnya, mari kita praktekan dengan membuat sebuah halaman HTML menggunakan editor teks yang sudah pembaca miliki. Pada contoh ini saya menggunakan editor teks Visual Studio Code. Silahkan buatfile baru kemudian salin kodingan HTML di bawah ini.

<html>
<head>
<title>Halaman HTML</title>
</head>
<body>
<h1>Hello World</h1>
<p>Ini adalah paragraf pertama di halaman html</p>
</p>
</body>
</html>

Setelah itu, silahkan simpan filetersebut pada folder yang yang diinginkan serta berikan nama pada file tersebut dengan akhiran .html atau.htm . Pada contoh ini, saya berikan nama file tersebut adalah index.html. Silahkan klik file tersebut untuk melihat halaman HTML yang sudah dibuat.

Tutorial Cara Belajar Pemrograman Web HTML Dasar

Contoh di atas memperlihatkan title, heading 1, dan paragraph. Untuk menambahkan informasi terhadap element atau tag, kita menggunakan attribute. Element HTML dapat memiliki attribute, hal ini yang memberikan informasi terhadap element  tersebut. Selain itu, attribute selalu ditentukan dalam awal tag. Contoh di bawah ini merupakan kodingan HTML yang menampilkan gambar dengan attribute yang memberikan ukuran gambar atau width dan height.

<img src = "mr-update.jpg" width ="104" height="142">

Contoh lainnya adalah tag untuk menampilkan link yang mempunyai href attribute. Ini berfungsi untuk menampilkan halaman lain dengan cara melakukan klik pada kata “ini adalah link”. Pada contoh ini ketika di klik maka akan menampilkan halaman dari situs resminya mr-update.net

<a href ="http://mr-update.net" > ini adalah link</a>

Jika kita gabungkan semua kodingan dalam satu halaman HTML, makan kodingannya akan seperti di bawah ini. Jangan lupa untuk menampatkan gambar pada folder yang sama dengan index.html agar gambar dapat ditampilkan.

<html>
<head>
<title> Halaman HTML </title>
</head>
<body>
<h1> Hello World </h1>
<p> Ini adalah paragraf pertama di Halaman HTML</p>
<img src ="cake.jpg" width= "140 height="140"><br>
<a href ="http://mr-update.net">Ini adalah link</a>
</body>
</html>

Untuk melihat hasilnya, silahkan jalankan file index.html yang sudah dibuat dengan cara diklik. Maka tampilan akhirnya akan seperti di bawah ini.

Tutorial Cara Belajar Pemrograman Web HTML Dasar

Dalam pemrograman web HTML, ada banyak tag dan element selain dari penjelasan di atas. Bagi pembaca yang tertarik untuk mempelajari lebih lanjut, bisa mengunjungi situs pembelajaran pemrograman web seperti W3Schools atau yang lainnya.

Itulah beberapa dasar pemrograman web html jika ada kekurangan dalam menulis mohon di maafkan. Jika ada seputar pertanyaan silahkan berkomentar insyaalloh saya akan membantu. Terima kasih sudah berkunjung sobat.

Artikel Terkait

Seseorang blogger pemula masih baru dalam menekuni dunia blogging, Yang tujuanya jelas dalam menulis blog.

17 komentar

jadi ini dasarnya gan. cukup mudah dimengerti

Ternyata dasrnya mudah juga ya gan tapi gak tau lanjutannya kaya apa kalau bisa update trus gan

makasih gan ilmunya, kebetulan ane lagi belajar pemrograman web nih. lanjutkan :)

Thanks untuk ilmunya, saya dapat wawasan baru...

Prnah blajar kek gni nih wktu klas 2 smk :D ,brmanfaat gan

ternyata mudah juga memperdalam html ini yah, thanks artikelnya. sangat membantu

woaah mungkin saya harus memperdalam lagi dihtml 😁 bermanfaat bgt dan 😊

Harus di perdalam gan (y)

Silahkan berkomentar jika ada pertanyaan seputar topik pembahasan diatas.
Dilarang Keras!!!:
1. No Spam
2. Jangan sisipkan link aktif
3. Komentar berbau sara
Langsung saya hapus!!!
EmoticonEmoticon