Membuat Halaman Web dengan Tag HTML Sederhana

Membuat Halaman Web Dengan Tag HTML Sederhana

Setelah mempelajari artikel sebelumnya yaitu tag-tag dasar HTML, sekarang kita akan membuat halaman web dengan menggunakan tag-tag tersebut. Seperti apa jadinya jika kita menggabungkan tag-tag tersebut? CTO:

1. Membuat Background

Tulis struktur HTML, lalu di tag body tambahkan attribute background atau bgcolor.

A. Attribute background

Fungsinya untuk membuat background suatu halaman web bergambar. Caranya tuliskan script HTML berikut: <body background="alamatgambar.ekstensi">.

Cara memasukan file ke dalam script HTML:

Alamat gambar dapat berupa URL atau direktori dari PC. Untuk gambar yang memiliki folder terpisah dengan file HTML yang dibuat, maka tuliskan alamatnya dengan benar. Contoh jika ingin memasukan gambar yang berjudul Adik.jpg yang berada di:

Alamat file Adik.jpg

Maka alamat yang ditulis <body background="D:/Tefanz/Multimedia/Images/Keluarga/Adik.jpg>

Sedangkan untuk gambar dan file HTML yang dibuat berada di folder yang sama, maka alamat yang ditulis <body background="Adik.jpg">

B. Attribute bgcolor

Caranya cukup mudah hanya menambahkan bgcolor="warna" di tag body. Contoh: <body bgcolor="#1acbe9">

2. Menggunakan Tag title

Tag title ditulis di antara tag head. Fungsi dari tag ini adalah memberi judul halaman web yang ditampilkan di title bar. Contoh:

<head>

</head>

3. Menggunakan Tag heading

Cara membuat heading dengan menuliskan script: <h...>...</h...>. diisi dengan angka 1-6. Semakin besar angkanya semakin kecil tulisannya. Contoh:

<h1>Taufan Prihantoro</h1>

Jika Anda ingin heading ini berada di tengah, tinggal tambahkan tag center, menjadi:

<center><h1>Taufan Prihantoro</h1></center>.

4. Paragraf dan Line Break(enter)

Untuk membuat paragraf tinggal ketik ...isi paragraf. Sedangkan untuk enter atau pindah baris ketik , tag ini tidak mempunyai tag end.

5. Memformat Teks

1. Membuat tulisan bold: Tulisan bold
2. Membuat tulisan bergaris bawah: Tulisan bergaris bawah
3. Membuat tulisan italic: Tulisan miring
4. Membuat tulisan dicoret: <s>Tulisan yang dicoret</s>
5. Membuat garis horizontal: <hr>, tag ini juga tidak mempunyai tag penutup.
6. Membuat teks bergerak: <marquee>Teks bergerak</marquee>
Di tag marquee ada beberapa attribute dan value:

Attribute	Value	Keterangan
behavior	alternate	Teks bergerak memantul
	scroll	Teks bergerak terus menerus
	slide	Teks bergerak Sekali
direction	left	kiri
	top	atas
	right	kanan
	bottom	bawah
loop	n	Perulangan yang bernilai n
bgcolor	color	Warna latar belakang cell

7. Membuat tulisan subscript: O2
8. Membuat tulisan superscript: 23=8
9. Membuat keterangan alamat: <address>...</address>

6. Membuat Daftar (List)

Setiap list memiliki tag li, fungsinya untuk menandakan bahwa teks yang diapit oleh tag li adalah bagian dari list. Ada 2 jenis list yaitu:

A. Ordered List

Yaitu daftar yang terurut, seperti penomorannya menggunakan angka, huruf, angka romawi, huruf kapital. Tag yang digunakan adalah tag ol. contoh:

<ol>

<li>Javasctipt</li>

</ol>

Untuk mengatur penomoran list mulai dari mana bisa ditambahkan attribute: start.

Untuk mengatur model penomoran apakah menggunakan nomor atau huruf tambahkan attribute: type.

Contoh:

<li>Javasctipt</li>

</ol>

B. Unordered List

Yaitu List yang menggunakan simbol. Tag yang digunakan adalah <ul>. Contoh:

<ul>

<li>Javasctipt</li>

</ul>

Apa Jadinya Jika Kita Menggabungkan tag-tag diatas?

Inilah hasilnya apabila Anda menyatukan tag-tag diatas:

Penggunaan tag HTML dasar di halaman web

Hasil

Dengan script:
<html>
<head>
<title>My Web</title>
</head>
<body bgcolor="#1acbe9>
<center><h1>Taufan Prihantoro</h1></center>
Isi Paragraf 
Baris Baru
 Tulisan dengan style bold
 Tulisan dengan style italic
 Tulisan dengan style underline
 <s>Tulisan dengan style strike out</s>
<hr>
<marquee behavior="alternate">Tulisan Bergerak Memantul</marquee>
CO2
52
<address>Bandung, Jawa Barat, Indonesia</address>
<ol>
<li>HTML</li>
<li>HTML5</li>
<li>Javascript</li>
<li>C++</li>
<li>Java</li>
</ol>
 
<ul>
<li>HTML</li>
<li>HTML5</li>
<li>Javascript</li>
<li>C++</li>
<li>Java</li>
</ul>
</body>
</html>

Coba Anda perhatikan tag-tag yang ada. Pahami apa fungsi dari tag tersebut. Jika Anda sudah paham, maka Anda akan tahu kapan tag tersebut digunankan.

Sekian dari saya, Terima Kasih Sudah Membaca.

Baca juga: Hal yang Harus dilakukan Saat Sandal Jepit Putus

Taufan Prihantoro

Membuat Halaman Web dengan Tag HTML Sederhana