Many'ax Script: Pemrograman HTML

Tutorial HTML - Pengenalan HTML

Tutorial HTML

Pengenalan HTML (High Text Language Markup)

HTML adalah singkatan dari (Hypertext Markup Language), salah satu format yang digunakan untuk pembuatan dokumen dan aplikasi yang berjalan di halaman web. HTML terdiri dari sepasang tag yang disisipkan dalam suatu dokumen untuk mengontrol tampilan di layar monitor oleh Web Browser.

Struktur Dasar HTML

Struktur dasar HTML adalah sebagai berikut:

<html>

<body>

Hore… belajar HTML mengasyikkan yach…

</body>

</html>

Demikianlah script HTML yang paling sederhana. Dimulai dengan tag <HTML>, kemudian dilanjutkan dengan tag <BODY>, setelah itu isi kalimat yang ingin kita tampilkan. Terakhir ditutup dengan dua tag berikut, </BODY></HTML>. Lihat ada tanda "/" pada setiap tag penutup.

Tuliskan script tersebut dalam text editor notepad / Word Processing (Pengolah kata) yang anda miliki, kemudian simpan dengan ekstensi “.htm” atau “.html”.

Untuk mencobanya, bukalah Internet Explorer / Browser yang anda miliki, dengan perintah File > Open, kemudia browse nama file dan lokasi di mana file HTML tersebut disimpan.

Untuk menambahkan judul pada halaman web, tambahkan script dibawh ini, penempatannya / letaknya persis di bawah tag <head>.

<html>

<head>

<title>Disinilah tempat kita menaruh judul sebuat arikel</title>

</head>

Gambar Output Program.

Heading, Break dan Horizontal

Browser pada web mengenal enam level dari Header/Judul yaitu <H1> sampai <H6>. Tambahkan script ini di bawah tag <BODY>.untuk melihat tampilannya.

<h2 align=center>GROUP BELAJAR HTML</h2> Sedangkan untuk memberikan baris baru suatu paragraf dalam halaman web dapat menggunakan perintah break . Tag tidak memerlukan tag penutup. Anda juga dapat menyisipkan sebuah garis horisontal (Horisontal Ruler) dalam suatu dokumen dengan menyisipkan sebuah tag <HR>. Tag Horizontal juga tidak memerlukan elemen penutup </HR>. Adapun atribut elemen horisontal rules adalah sebagai berikut:

Align = Perataan garis horisontal (left / center / right). Default Center

Size = Pixel (mengatur ketebalan garis, default 2)

Width = Mengatur panjang (pixel, lebar garis atau persen), default 100%

Noshade = Garis solid

Selanjutnya tambahkan tag <HR> di bawah tag header <H2> seperti dibawah ini :

Gambar Output Programnya adalah sebagai berikut :

Paragraph dan Pemformatan Karakter

Tag paragraph berfungsi untuk pengaturan paragraf dalam halaman web.

Atribut elemen paragraph:

align = (left / center / right) default left.

Sedangkan untuk pemformatan karakter baik untuk ukuran, warna dan jenis karakter menggunakan tag .

Attribut elemen font:

Size = Untuk ukuran huruf, default 3

Color = Untuk warna karakter, default black

Face = Untuk menentukan jenis huruf, default Times New Roman

Selain itu ada elemen karakter, yaitu:

untuk huruf tebal

untuk huruf bergaris bawah

untuk huruf miring

Untuk lebih memahami pemformatan karakter dan paragraph, ubahlah text yang telah kita buat (Hallo... Belajar HTML Sangat Mengasikkan) dengan script berikut ini.

Hore... belajar HTML mengasyikkan yach.

Tulisan ini warnanya merah

lagi

Gambar Output Programnya akan seperti dibawah ini :

Membuat Links

Perintah untuk membuat link adalah sebagai berikut:

<a href=’kepengurusan.html’>Kepengurusan</a>

Untuk membuat link diawali dengan A yang merupakan singkatan dari Anchor, kemudian HREF (hypertext reference), setelah itu dilanjutkan alamat yang dituju. Perlu diingat alamat yang dituju ini harus berada di antara tanda petik. Setelah itu tuliskan nama link-nya. Terakhir menutup dengan tag </A>. Demikianlah cara membuat link.

Untuk latihan kita yang selanjutnya, Tambahkan script di bawah ini pada latihan yang sebelumnya.

<a href=’kepengurusan.html’>Kepengurusan</a>

<a href=’peraturan.html’>Peraturan Anggota</a>

<a href=’pendaftaran.html’>Pendaftaran</a>

Gambar Output Programnya adalah seperti dibawah ini :

Menyisipkan Gambar

Agar tidak membosankan, kita bisa menyisipkan gambar ke web yang kita buat.

Adapun perintahnya adalah sebagai berikut:

Atribut untuk image (gambar) :

Src = Lokasi dan nama gambar.

Alt = Teks (teks alternatif).

Width = Pixel (Lebar gambar).

Weight = Pixel (Tinggi gambar).

Align = [top / middle / bottom / left / right ] Untuk perataan gambar.

Border = Pixel ( Ketebalan Bingkai Gambar).

Gambar bisa juga kita buat sebagai link. Perhatikan script di bawah ini:

Tambahkan script tersebut di atas printah link sebelumnya (di bawah perintah paragraph). Jangan lupa tambahkan agar link text tepat berada di bawah link gambar. Setelah melakukannya, akan didapatkan Output seperti di bawah ini: