HTML ~ Indahnya Berbagi

HTML

Membuat halaman website dengan menggunakan HTML gampang-gampang susah. Gampang karena pelaksanaannya cukup sederhana, susah karena banyak kode yang perlu dipahami agar sebuah halaman website terlihat indah dipandang mata dan informatif. Pemahaman dasar untuk membuat halaman website dengan menggunakan HTML adalah memahami kode HTML dasar dan memahami bagaimana kode-kode tersebut bekerja. Pada post ini saya ingin berbagi bagaimana cara membuat halaman website dengan menggunakan HTML dari yang paling dasar yang saya ketahui.

HTML adalah singkatan dari HyperText Markup Language yang merupakan bahasa untuk membuat tampilan halaman website dengan format tertentu.

Penggunaan kode HTML yang baik dan baku akan menghasilkan sebuah halaman website yang rapi dan terstruktur. Secara manual, pembuatan halaman website menggunakan HTML tidak memerlukan software khusus. Cukup berbekal Notepad, browser, dan memahami kode-kode HTML. Persiapan yang perlu dilakukan adalah membuat file dengan Notepad (atau software lain pengolah text seperti notepad++, KEdit, dsb) kemudian mengganti ekstensi .txt menjadi .html. Setelah itu, isi file tersebut dengan kode HTML.

Mari kita mulai belajar membuat halaman website dengan HTML. Beri nama file yang kamu buat tadi dengan nama pilihan masing-masing. Saya misalkan nama filenya adalah index.html.

Kode yang wajib ada pada halaman website HTML adalah sebagai berikut.

<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
...
</body>
</html>

DOCTYPE maksudnya adalah Document Type atau jenis dokumen, dalam hal ini adalah html. Kata yang berada di antara < dan > disebut tag. Kode HTML terdiri dari pembuka dan penutup. Pada keduanya terdapat tag yang sama, yang membedakan bahwa kode tersebut pembuka atau penutup adalah terletak pada tanda garis miring. Pada pembuka kodenya hanya berupa <tag> sedangkan pada penutup, dengan tag yang sama ditambahkan garis miring menjadi </tag>. Pada kode di atas, tag pembuka utama adalah html. Di antara tag html terdapat tag head dan tag body. Kode yang diletakan di antara tag head tidak akan muncul dan terlihat pada halaman. Kode di antara tag head berupa informasi seperti tag title (muncul sebagai judul pada browser), meta tag, CSS, Javascript, dan sebagainya. Di antara tag body kita bisa meletakan konten yang ingin kita tampilkan pada hamalan web.

Menambahkan Tag Title
Telah dijelaskan sebelumnya bahwa di antara tag head diletakan tag yang tidak muncul pada halaman. Salah satu tag yang diletakan di antara tag head adalah tag title. Tulisan di antara tag title muncul sebagai judul pada browser.

Contoh penggunaannya adalah sebagai berikut.

<title>Judul Website<title>

Judul, Paragraf, dan Garis Baru
Pengaturan tampilan tulisan pada halaman web HTML tidak seperti membuat tulisan di Ms Word. Secara garis besar, tampilan tulisan dibagi dalam dua bagian yaitu judul dan paragraf. Judul diletakan di antara tag h (heading). Sedangkan tulisan yang dibagi-bagi ke dalam beberapa paragraf di bawahnya diletakan di antara tag p.

Adakalanya kita butuh menuliskan baris baru pada suatu paragraf. Garis baru tersebut tidak bisa dibuat dengan hanya menekan enter, tapi harus diawali dengan tag br. Tag br ini tidak seperti kode HTML pada umumnya yang terdiri atas bagian pembuka dan bagian penutup. Tag br hanya terdiri dari satu bagian saja dan diletakan di depan tulisan yang ingin tampil sebagai garis baru.

Berikut adalah contoh penggunaan judul, paragraf, dan garis baru pada halaman website HTML.

<h1>Judul</h1>
<p>Paragraf pertama.
<br/>Garis baru pada paragraf pertama.</p>

Formating Teks
Pada sebuah tulisan, kadang diperlukan adanya penegasan terhadap suatu kata, frase, atau kalimat tertentu. Penegasan tersebut biasanya dilakukan dengan cara menebalkan huruf, memiringkan huruf, atau mengarisbawahi huruf. Untuk menebalkan huruf, caranya adalah dengan menambahkan tag b atau tag strong pada huruf/kata/frase/kalimat yang hendak ditebalkan. Untuk memiringkan huruf adalah dengan menggunakan tag i atau tag em. Sedangkan untuk mengarisbawahi huruf adalah dengan menggunakan tag u.

Huruf tebal ini diletakan di antara tag b.
Huruf miring ini diletakan di antara tag i.
Sedangkan Huruf yang bergaris bawah ini diletakan di antara tagu.

Contoh Penggunaan kodenya adalah sebagai berikut.

<b>Tulisan yang mau ditebalkan</b>
<i>Tulisan yang mau dimiringkan</i>
<u>Tulisan yang diberi garis bawah</u>

Perataan Teks
Perataan teks yang dimaksud di sini adalah bagaimana kita menampilkan teks agar terletak di kiri (kalau yang ini otomatis tanpa kode html pun teks pasti terletak di kiri), di tengah, dan di kanan.

Untuk perataan teks ini, kita gunakan tag p yang di dalam tag pembukanya ditambahkan attribute align="left/right/center".

Teks ini berada di tengah halaman

Teks ini berada di kanan halaman

Contoh penggunaannya adalah sebagai berikut.

<p align="center">Membuat teks di tengah</center>
<p align="right">Membuat teks di kiri</right>

Membuat Daftar
Telah dijelaskan sebelumnya, bahwa untuk membuat baris baru adalah dengan menambahkan tag br pada awal tulisan yang ingin ditampilkan di garis baru. Tapi adakalanya kita perlu menuliskan beberapa garis baru tersebut sebagai sebuah daftar yang memiliki tanda di depannya. Dalam HTML, dikenal dua istilah untuk menampilkan daftar bertanda, yaitu unordered list disingkat ul (daftar yang tidak berurutan, tanda depannya bukan berupa urutan nomor) dan ordered list disingkat ol (daftar berurutan dan tanda depannya berupa nomor berurutan).

Contoh Daftar Tidak Berurutan

Bawang Merah
Bawang Putih
Cabe Merah

Contoh Daftar Berurutan
Pancasila

Ketuhanan yang Maha Esa
Kemanusiaan yang Adil dan Beradab
Persatuan Indonesia
Kerakyatan yang Dipimpin oleh Hikmah Kebijaksanaan dalam Permusyawaratan/Perwakilan
Keadilan Sosial Bagi Seluruh Rakyat Indonesia

Berikut ini adalah contoh penggunaannya

<ul>
<li>Daftar pertama</li>
<li>Daftar kedua</li>
</ul>

Untuk daftar berurutan yang ditandai dengan nomor berurut di depannya tinggal ganti ul dengan ol.

Link atau Tautan
Dengan adanya link atau tautan kita bisa membuat sebuah tulisan menjadi hidup dan terhubung dengan halaman atau bagian lain sebuah website. Kode HTML yang digunakan untuk menghubungkan suatu halaman dengan halaman lainnya adalah tag a. Kita bisa menghubungkan suatu halaman dengan halaman lain melalui suatu huruf/kata/frase/kalimat yang terlihat hidup dan jika kita klik akan muncul halaman lain yang dikaitkan. Istilah ini disebut sebagai link atau tautan.

Secara sederhana kode untuk menyisipkan tulisan bertaut adalah sebagai berikut.

Pada kode tersebut terdapat tag a kemudian di bagian pembuka terdapat attribute href yang diikuti oleh tanda sama dengan dan dilanjutkan dengan alamat di dalam tanda "". Alamat yang terdapat di antara tanda "" adalah alamat tujuan dari tautan pada tulisan yang dibuat. Di antara pembuka dan penutup kode HTML ada tulisan Teks Link. Tulisan tersebut adalah tulisan yang muncul berupa tautan menuju alamat yang dituju. Kode tersebut pada post akan tampil sebagai berikut.

Teks Link

Tulisan bertaut tersebut apabila diklik akan menuju halaman tujuan yang terbuka di tab yang sama. Jika kita ingin alamat tujuan terbuka di tab baru, kita tambahkan target="_blank" pada bagian pembuka. Berikut ini adalah contoh penggunaannya.

Tampilan kode tersebut pada post akan menjadi seperti berikut ini.

Teks Link

Silakan dicoba, link tersebut pasti akan terbuka pada tab baru.
Kita juga bisa menambahkan attribute title="..." yang berfungsi untuk menampilkan informasi berupa tulisan ketika link tersebut ditunjuk oleh pointer mouse. Penempatannya diletakan pada pada bagian pembuka.

Kode di atas akan tampil seperti berikut ini.

Teks Link

Silakan coba tunjuk oleh pointer, pasti akan muncul tulisan "Tulisan muncul ketika ditunjuk pointer" sesuai dengan yang kita tuliskan pada kode html di atas.

Menyisipkan Gambar
Konten sebuah halaman web tidak hanya terdiri dari tulisan. Kita bisa menambahkan berbagai macam komponen seperti gambar, video, animasi dari flash, dan sebagainya. Kode HTML yang perlu diketahui berikutnya adalah bagaimana menambahkan gambar pada halaman website HTML. Tag HTML yang digunakan untuk menyisipkan gambar adalah tag img. Berikut adalah penjelasan mengenai bagaimana menyisipkan gambar pada halaman website HTML.

Untuk menampilkan gambar alakadarnya, kita hanya perlu menggunakan kode berikut ini.

Maksud dari kode tersebut adalah tag img menunjukkan bahwa kode HTML tersebut adalah untuk menampilkan image. Kode src menunjukkan url source (sumber) gambar yang akan ditampilkan. Kode tersebut akan tampil sebagai berikut.

Karena sifat internet yang labil, mungkin saja gambar yang ingin kita tampilkan tidak dapat diatasi dengan baik oleh server dan tidak dapat tampil. Untuk mengatasinya, kita bisa mengganti gambar tersebut dengan teks. Ini juga berfungsi sebagai salah satu metode SEO gambar agar dapat tampil di hasil pencarian mode gambar. Kita bisa menambahkan kode berikut untuk menampilkan alternatif teks menggunakan tag alt jika gambar tidak dapat tampil.

Jika gambar tidak dapat muncul karena server gambar sedang bermasalah, posisi yang seharusnya diisi gambar akan diganti oleh tulisan "Stop-Contact".

Kita juga bisa menambahkan keterangan gambar pada saat gambar tersebut ditunjuk oleh pointer mouse. Caranya adalah dengan menambahkan tag title seperti berikut.

Coba tunjuk gambar berikut, akan muncul tulisan sesuai dengan yang teks yang tertera pada tag title.

Kita juga bisa menggabungkan kode untuk link atau dan gambar sekaligus agar gambar yang kita tampilkan tertaut pada alamat tertentu. Caranya adalah dengan menggunakan kode HTML untuk link dan meletakan kode HTML untuk gambar di antara kode pembuka dan penutup kode HTML link. Berikut adalah contoh kodenya.

Tampilan halaman html yang dibuat akan tampak penuh satu halaman layar. Pada tulisan kali ini saya akan menjelaskan bagaimana membuat tampilan halaman website HTML dengan lebar tertentu tampil secara vertikal di bagian tengah layar.

Katakanlah kita telah membuat halaman website HTML dengan kode sebagai berikut.
<!DOCTYPE html>
<html>
<head>
<title>Judul Tampil di Bar Browser</title>
</head>
<body>
<h1>Judul</h1>
<p>Paragraf</p>
</body>
</html>

Pada browser, kode di atas akan menampilkan tulisan diantara tag title pada bar browser dan menampilkan tulisan diantara tag body pada tampilan utama browser. Tulisan akan tampak memenuhi layar dan ini kurang enak dipandang mata. Untuk membuat tulisan tampil secara vertikal dengan lebar tertentu di tengah layar, kita perlu menambahkan kode css diantara tag head. Metode ini adalah metode menambahkan CSS secara internal (menyatu dengan file HTML). Bisa juga kode CSS diletakan secara eksternal (terpisah dengan file html).

Untuk menambahkan css secara internal adalah dengan menambahkan tag style diantara tag head sebagai berikut.
<!DOCTYPE html>
<html>
<head>
<title>Judul Tampil di Bar Browser</title>
<style type="text/css">
...
</style>
</head>
<body>
<h1>Judul</h1>
<p>Paragraf</p>
</body>
</html>

Titik-titik diantara tag style tersebut adalah tempat diletakannya kode css untuk mengatur tampilan halaman website HTML.

Untuk membuat tulisan (konten) tampil di tengah layar secara vertikal dengan lebar tententu, tambahkan kode css berikut.
body {
width: 800px;
margin: auto;
}

Sekarang tampilan halaman website HTML yang telah dibuat akan tampil dengan lebar 800px secara vertikal di tengah layar pada browser apa pun dan ukuran layar berapa pun.

Untuk membuat CSS secara eksternal, caranya adalah dengan membuat file baru berekstensi CSS, misalnya style.css. Letakan kode diantara tag style pada file style.css tersebut. Kemudian kode style diantara tag head, yaitu
<style type="text/css">
body {
width: 800px;
margin: auto;
}
</style>
ganti dengan
<link rel="stylesheet" type="text/css" href="style.css">
sehingga kode di antara tag head menjadi seperti berikut.
<head>
<title>Judul Tampil di Bar Browser</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

Indahnya Berbagi

Coretan Nur Hakim

menu

Senin, 04 Mei 2015

HTML

HTML

0 komentar:

Posting Komentar