Belajar HTML #1

HTML atau Hypertext Markup Language adalah bahasa pemformatan untuk membuat halaman web.
Untuk informasi tambahan, kalian dapat melihat di sini.

Untuk menyunting dan menyimpan script HTML kamu dapat menggunakan program teks editor, seperti notepad, wordpad, dan lain sebagainya.

Hal utama yang harus kamu persiapkan untuk membuat dokumen html adalah:
1. Buat folder. Folder ini nantinya tempat kamu meletakkan file induk, yaitu file html dan file pendukung seperti foto, gambar, musik, dan lain-lain.
2. Simpan file induk dengan format html.

Struktur dasar dokumen HTML
Dokumen HTML disimpan dalam format teks reguler dan mengandung tag-tag.
Tag-tag ini berfungsi untuk memerintahkan web browser menjalankan perintah yang telah ditetapkan.

Berikut ini struktur penulisan html

<html>
<head>
<title>ini adalah judul dokumen HTML</title>
</head>
<body>
Disini penulisan semua konten web
</body>
</html>

Keterangan:
a. Tag
tag ditandai oleh dua karakter “<” dan “>”
contoh:
<html>
tag umumnya ditulis berpasangan, terdiri dari tag pembuka dan tag penutup dengan tambahan karakter “/”
contoh:
<font face=”arial” color=”yellow”>

b. Element
Element terdiri dari 3 bagian: tag pembuka, isi, tag penutup
contoh:
<center>Hello World</center>

tag yang ditulis berpasangan pada elemen html, tidak boleh saling tumpang tindih dengan pasangan tag lainnya.

Penulisan tag yang benar
<h1><b>Hello World</b></h1>

Penulisan tag yang salah
<h1><b>Hello World</h1></b>

c. Attribute
Atribute mendefinisikan property dari suatu elemen HTML, terdiri atas nama dan nilai.
Umumnya nilai attribute harus berada dalam tanda petik satu atau dua.

<font face=”arial” color=”yellow”>

artinya, jenis huruf yang kita inginkan (nama) adalah arial (nilai)
warna huruf (nama) kuning (nilai)

Dalam struktur penulisan HTML ada 3 elemen dasar, yaitu: html, head, title, dan body.

catatan:
jika menginginkan latar belakang halaman web dengan warna, contoh scriptnya:
<body bgcolor=”blue”>   atau
<body bgcolor=”#ffccdd”>

catatan: warna dengan kode #ffccdd seperti contoh di atas dapat dilihat melalui bantuan program editing Photoshop.

Jika latar belakang halaman web yang diinginkan berupa gambar, scriptnya adalah:
<body background=”nama file”>
contoh
<body background=”images.gif”>

catatan: jangan lupa simpan dahulu file gambar di tempat atau lokasi folder yang sama dengan ketika kamu menyimpan file htmlnya.

Yuk, kita coba menyunting dokumen html berikut ini.

<html>
<head>
<title>Tempat Menarik</title>
</head>
<body bgcolor=”blue”>
<h1><b>Taman Wisata Bunga dan Buah, Mekar Sari</b></h1>
<p>
<img src=”jeruk.jpg”>
<p>
<marquee>designed by:admin</marquee>
<p>
<h3>Mekar Sari</h3>
<font face=”verdana” color=”white”>Di Mekarsari sendiri terdapat begitu banyak Atraksi wisata seperti Family Garden di mana keluarga bisa belajar menanam padi, memancing, petik sayur, dan mengunjungi Baby Zoo.
<br>
Tidak jauh dari lokasi Family Garden terdapat sebuah Kanal yang menghubungkan antara Danau Wiratama dan Danau Mekarsari dan dapat dilayari oleh perahu-perahu naga yang nyaman. Di ujung kanal kita dapat menemui lokasi permainan ketangkasan Outbound yang dapat melayani pengunjung secara grup maupun reguler. Tepat berhadapan dengan lokasi Outbound terdapat danau Mekarsari yang total luasnya mencapai 27,5 hektar. Di area danau ini pun terdapat berbagai macam permainan air yang sangat menarik, mulai dari Floating Donut, Canoeing, Banana Boat, Bebek Air, Kayak, Water Bike dan lainnya.
</font>
</body>
</html>

==

Inilah tampilan webmu yang sudah jadi.
web2

Leave a Reply

Your email address will not be published. Required fields are marked *