Seri Tutorial Belajar Pemrograman Web Tingkat Dasar


Perkenalan HTML

HTML adalah singkatan dari Hypertext Markup Language yang dibuat dan dikolaborasikan oleh ilmuwan di bidangnya yaitu Caillau TIM dan Berners-lee Robert ketika mereka bekerja di sebuah lembaga fisika CERN di tahun 1989 di Jenewa.

HTML memungkinkan seseorang untuk membuat dan menyusun bagian-bagian tertentu atau seluruh halaman di dalam sebuah dokumen html seperti form, paragraf, heading, link, video, teks, blockquote dan lain sebagainya untuk halaman web dan aplikasi.

HTML dapat memuat informasi yang ditampilkan oleh peramban informasi yang ditampilkan sesuai dengan apa yang di tulis di dalam file html, perlu di ingat bahwa tag tag yang di tulis di dalam html tidak akan di tampilan yang di tampilkan hanyalah isi informasi

HTML bukanlah bahasa pemrograman HTML adalah bahasa markah (penandaan), berarti HTML tidak mempunyai kemampuan untuk membuat fungsionalitas yang dinamis seperti bahasa pemrograman pada umumnya salah satu contohnya PHP. Akan tetapi HTML memungkinkan seseorang untuk mengatur dan memformat dokumen, sama halnya seperti Microsoft Word, excel, power point dan lain sebagainya.

HTML terdiri dari banyak tag-tag yang disusun, nanti kita akan pelajari mengenai tag-tag html yang akan digunakan dalam membangun sebuah halaman website, anda dapat mengunduhnya di halaman github kami.

Apa itu Tag dan Atribut?

Tag dan atribut adalah dasar dari HTML. Keduanya bekerja bersama sama akan tetapi melakukan fungsi yang berbeda beda. banyak sekali tag-tag dalam html dan banyak juga atribut yang mengisi tag-tag tertentu di dalam dokumen html.

Apa itu Tag HTML?

Tag digunakan untuk menandai awal elemen HTML dan biasanya diapit tanda kurung sudut seperti ini (< >). Contoh tag adalah: <h1>. Tag <h1> adalah heading1 biasanya digunakan untuk sebuah judul artikel, tag heading biasanya sampai dari <h1> - <h6> dengan susunan seperti di bawah ini :

<h1>heading 1</h1>

<h2>heading 1</h2>

<h3>heading 1</h3>

<h4>heading 1</h4>

<h5>heading 1</h5>

<h6>heading 1</h6>

Sebagian besar tag harus dibuka <h1> dan ditutup </h1> agar berfungsi penutupan tag diawali dengan backsalah (/) tanpa tanda kurung.

Kesimpulannya adalah tag diawali dengan tag pembuka dan diakhiri dengan penutup yang diawali dengan backslash / .

Tag ini tidak akan muncul yang di munculkan adalah heading 1 contohnya <h1>Heading 1 </h1> maka halaman akan memunculkan Heading 1, kamu dapat mencobanya dengan cara membuay file html dengan isi h1 sampai dengan h6 dan lihat perbedaannya.

Apa itu Atribut HTML?

Atribut berisi informasi tambahan yang ditelakan didalam tag. Contoh penggunaan tag dengan atribut adalah memanggil sebuah gambar, berikut contohnya :

<img src="https://images.unsplash.com/photo-1531469535976-c6fc3604014f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=675&q=80" alt="wanita berbikini.">

Contoh diatas adalah cara memanggil gambar menggunakan url, contoh dibawah adalah cara memanggil gambar yang gambarnya ada didalam folder lokal.

<img src=".../images/contoh gambar.jpg" alt="contoh gambar">

Penjelasan

Dalam contoh ini, sumber gambar (src) dan teks alt (alt) adalah atribut dari tag <img>. src menyatakan sumber dari sebuah file dan alt menyatakan propertis gambar atau keterangan dari sebuah gambar.

Aturan Yang Harus Di Ingat

Sebagian besar tag harus dibuka (<tag>) dan ditutup (</tag>) jangan pernah melupakannya jika tidak memakai tag penutup maka tag tidak akan berjalan, dan sebaliknya jika menggunkan tag penutup tapi tidak menggunakan tag pembuka hasilnya akan sama tag tidak bisa berfungsi baik itu tag pembuka dan penutup harus sama sama di tulis.

Jika menggunakan multiple tag maka tag pembuka dan penutup haruslah beraturan seperti contoh dibawah ini :

<strong> <em> Ini sangat penting! </em> </strong>

HTML Editor

HTML Editor sangat diperlukan untuk menulis sebuah halaman web statis dengan susunan kode html, ada beberapa pilihan yang dapat kamu pilih dalam membangun sebuah halaman website statis, seperti :

Sublime Text 3
Notepad ++
Notepad
Visual Code Editor
Komodo Edit

Saya merekomendasikan kamu menggunakan sublime text 3 selain ringan kode editor ini juga mudah digunakan dan tidak membebani kinerja cpu anda.

Membuat Halaman Web HTML

Pertama, kamu perlu membuka kode editor HTML pilihan anda. lalu bukalah ketika terbuka maka tampilannya blank tanpa ada kode.


<! DOCTYPE html> - Tag ini menekankan bahwa anda akan menulis file html

<html> - Tag ini menjelaskan bahwa anda akan menulis file html.

<head> - Di sinilah semua metadata ditulis.

<body> - Di sinilah konten halaman ditulis


Sebelum melanjutkan pastika kamu telah memahami struktur kode html.

Tag lanjutan

Tag lanjutan
Di dalam tag <head>, ada satu tag yang selalu disertakan yaitu <title> dan tag <meta>.

Penjelasan

<title>
Tag title untuk memberikan judul atau memberitahu kepada user mengenai judul dokumen yang sedang dibuka, judul ini biasanya akan muncul di tab peramban.

<meta>
Di sinilah informasi tentang dokumen disimpan seperti pengkodean karakter, nama (konteks halaman), deskripsi dan lain sebagainya.

Mari kita coba membuat bagian <head> dasar, tulislah kode dibawah ini lalu simpan dengan format html:

<head>

<title>My First Webpage</title>

<meta charset="UTF-8">

<meta name="description" content="This field contains information about your page. It is usually around two sentences long.">

<meta name="author" content="Conor Sheils">

</head>

Menambahkan Konten

Selanjutnya, kita akan menulis tag <body>.
Tag <body> adalah tempat dimana konten akan ditampilkan oleh peramban dan disajikan kepada pengguna, konten akan tampil dengan apa yang telah ditulis.
Didalam tag body anda bisa menuliskan tag gambar, paragraph, teks, form, musik, video bahkan peta.

Cara Menambahkan Judul (Heading) HTML ke Halaman Web

Dalam HTML, judul ditulis dalam elemen-elemen berikut:

<h1>

<h2>

<h3>

<h4>

<h5>

<h6>

Jangan lupakan tag penutup

</h1>

</h2>

</h3>

</h4>

</h5>

</h6>

Seperti yang kita ketahui, tag <h1> dan tag <h2> harus digunakan untuk judul yang paling penting, sedangkan tag yang tersisa harus digunakan untuk sub-judul saja.
Contoh penggunaan heading perhatikan:


<!DOCTYPE html>

<html>

<head>

<title>Heading</title>

<meta charset="UTF-8">

</head>

<body>

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<h6>Heading 6</h6>

</body>

</html>

Untuk melihat hasilnya tulislah kode di atas lalu simpan dengan nama heading.html lalu klik open with chrome, maka hasilnya akan terlihat. Tag heading mendukung sebuah atribut yaitu atrubut align left, align right, align center dan align justify, cara menggunakannya cukup mudah, lihat contoh dibawah ini :

<h1 align="right">Heading 1</h1>

Contoh penggunaannya :

<!DOCTYPE html>

<html>

<head>

<title>My First HTML</title>

<meta charset="UTF-8">

</head>

<body>

<h1 align="center">Penerapan Teks</h1>

<p><b>The HTML head element</b> contains meta data.</p>

<p>Meta data is data about the HTML document.</p>

<p>suhu disini 2<sup>o</sup>C</p>

</body>

</html>

Kamu dapat bereksperimen dengan mengganti tag-tag yang berwarna hijau atau kamu bisa menambahkannya sendiri.
Di bawah ini adalah kode cheat sheet untuk memudahkan kamu dalam memahami tag-tag lanjutan.

Cara Menambahkan Link

Menambahkan link menggunakan tag (<a>) tanpa tanda kurung ini adalah contoh penerapan link
<a href="link disini"> dan jangan lupa pakai penutup tag penutup </a> kamu dapat menambahkan anchor text seperti ini <a href="linkkamudisini">Di sini ada link</a>, berikut contoh lengkapnya :
  • Aplhanumeric dan symbol link <a href="https://www.guegaut.com">Website Keren Nih</a>
Penjelasan : kalimat Website Keren Nih akan mempunyai link jika di klik maka kamu akan di bawa ke halaman link tersebut jika kamu ingin menggunakan symbol kamu dapat mengubah anchor textnya yaitu "Website Kere Nih" dengan symbol yang kamu inginkan.
  • Link Gambar
<a href="guegabut.com"> <img src="https://s3.freefoto.com/images/04/03/04_03_1_web.jpg" alt="HTML tutorial" style="width:42px;height:42px;border:0;"></a>

Penjelasan : Dalam menyisipkan link kedalam gambar kamu harus meletakan tag <img> didalam tag <a> seperti contoh di atas.

Jika kamu menginginkan link internal alias memindahkan link antara satu halaman dengan halaman lainnya gunakanlah cara di bawah ini :


<a href="*folder(s)*/page2.html">Page2</a>
atau kamu bisa gunakan :
<a href="*folder(s)*/page2.html">Page2</a>

Cara Menambahkan Gambar

Gambar adalah properti yang dapat mempercantik website mu berikut ini adalah beberapa cara menambahkan gambar dengan atribut dan tanpa atribut, contohnya :

Gambar tanpa atribut (gambar online)
<img src="https://s3.freefoto.com/images/04/03/04_03_1_web.jpg">
Gambar tanpa atribut (gambar offline)
<img src="...images/gambargue.jpg">

Gambar dengan atribut (gambar online)
<img src="https://s3.freefoto.com/images/04/03/04_03_1_web.jpg" alt="gambar gue" style="width:500px;height:600px;>

Gambar dengan atribut (gambar offline)
<img src=".../images/gambargue.jpg" alt="gambar gue" style="width:500px;height:600px;>


Penjelasan gambar dengan atribut dan tanpa atribut terlihat sangat jelas jika anda menambahkan atribut style maka anda dapat mengatur tinggi x lebar, jika anda menginginkan gambar yang responsif anda hanya perlu menggani nilai yang berada di width dan height contohnya : 

<img src=".../images/gambargue.jpg" alt="gambar gue" style="width:100%;height:auto;>

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

loading...