Sekarang kita akan belajar HTML dasar untuk halaman yang ke 2. Disini tidak saya terangkan kode kodenya semua, karena sudah saya jelaskan pada halaman 1. Jadi, jika ada kode yang belum paham, silahkan lihat pada halaman 1. Untuk tutorial halaman 2 ini, isinya agak sama dengan halaman 1 hanya saja ada beberapa hal yang dikembangkan ataupun malah disederhanakan.
Buka kembali program NotePad, lalu tuliskan kode kode program HTML dibawah ini: Sedangkan hasil dari halaman web yang kita buat ini bisa anda lihat pada gambar.
<html>
<head>
<title>halaman 2</title>
</head>
<body text=”white” bgcolor=”green”>
<p align=”center”> <font size=8 >
Biodataku
<hr>
<p align=”left”> <font size=4 >
Nama: <b>Mr.Fulan bin Abu</b>
<br>
TTl: <i>Jakarta, 33 April 2020</i>
<br>
Pekerjaan: <u>Mahasiswa</u>
<br>
<br>
makanan favoritku:
<li>nasi goreng</li>
<li>sate kambing</li>
<li>pecel lele</li>
<br>
<br>
minuman favoritku:
<ol>
<li>bajigur hangat</li>
<li>jus alpukat</li>
<li>es kelapa muda</li>
</ol>
<center> <img src=”C:\gambar\luffy.jpg”>
<p align=”center”>
Ini adalah photoku
<br>
<br>
<a href=”satu.html”>kembali ke halaman 1</a>
<br>
<a href=”tiga.html”>menuju ke halaman 3</a>
</body>
</body>
</body>
</html>
KETERANGAN dari kode program: (sebagian sudah saya jelaskan pada HTML dasar halaman 1, silahkan lihat kembali !).
- Tulis judul pada Title
- Warna dari isi tulisan (body text) adalah putih sedangkan warna dari background (bgcolor)halaman kedua ini adalah hijau.
- Tulisan “biodataku” diletakan pada tengah tengah halaman ( <p align=”center”> ) sedangkan ukuran tulisannya adalah 8 ( <font size=8 > ).
- Membuat sebuah GARIS dengan kode <hr>.
- Untuk tulisan tulisan berikutnya, posisi tulisan terletak disebelah kiri ( <p align=”left”> )dengan ukuran tulisan 4 ( <font size=4 > ).
- Anda bisa merubah format tulisan seperti pada daftar nama orang yang ada di halaman ini dengan cara sebagai berikut:
1. Untuk menebalkan tulisan (BOLD) gunakan kode yang diawali dengan <b> dan diakhiri dengan </b>
2. Untuk memiringkan tulisan (ITALIC) gunakan kode yang diawali dengan <i> dan diakhiri dengan </i>
3. Untuk menggaris bawahi tulisan (UNDERLINE) gunakan kode yang diawali dengan <u> diakhiri dengan </u>
- Anda bisa menambahkan daftar tidak terurut atau BULLETS seperti pada daftar “makanan favoritku” dengan memakai kode yang diawali dengan <li> dan diakhiri dengan </li>. Perhatikan hasilnya pada hasil halaman web yang sudah jadi di gambar. Anda dapat melihat bahwa disamping tulisan daftar “makanan favoritku” muncul sebuah tanda bundar (BULLETS).
- Anda juga bisa menambahkan daftar terurut atau NUMBERING seperti pada daftar “minuman favoritku” dengan memakai kode yang diawali dengan <li> dan diakhiri dengan </li> juga . Tapi berbeda dengan daftar “makanan favoritku”, kode <li> dan </li> yang ada pada daftar “minuman favoritku” ini terdapat di dalam kode <ol> dan diakhiri dengan kode </ol>. Perhatikan hasilnya pada hasil halaman web yang sudah jadi di gambar. Anda dapat melihat bahwa disamping tulisan daftar “minuman favoritku” muncul NUMBERING atau angka yang dimulai dari 1 hingga akhir dari tulisan.
- Selanjutnya saya menambahkan sebuah gambar tokoh film One Piece yaitu LUFFY dengan posisi gambar berada di tengah halaman ke 2 ini ( <center> ).
Letak gambar tersebut ada di Drive C dan di dalam folder Gambar yang ada pada komputer saya. Nama gambar tersebut adalah Luffy sedangkan type dari gambar tersebut adalah .jpg.
- Dibawah gambar Luffy saya menulis tulisan “ini adalah photoku” dengan posisi tulisan berada disebelah tengah dari layar halaman ke 2 ini dengan cara menulis kode <p align=”center”>.
- Jika pada halaman 1 saya mengunakan LINK (untuk menuju ke suatu objek contohnya menuju ke halaman lain) dengan menggunakan gambar, maka pada halaman 2 ini saya menggunakan LINK dengan tulisan. Caranya sama seperti gambar yaitu dengan menulis kode yang diawali dengan <a href=”objek yang dituju”> dan diakhiri dengan </a>. sedangkan tulisan ditambahkan ditengah tengah kode tersebut.
Pada Contoh disini saya menggunakan kode <a href=”satu.html”>kembali ke halaman 1</a> untuk pindah menuju ke halaman 1. dan menggunakan kode <a href=”tiga.html”>menuju ke halaman 3</a> untuk pindah menuju ke halaman 3.
- Demikianlah tutorial untuk belajar HTML halaman kedua untuk selanjutnya kita menuju ke halaman ke tiga. Terima kasih !
By: OPIX HOLMES
opix.holmes@yahoo.com
www.islamicunderground.wordpress.com
Tidak ada komentar:
Posting Komentar