HTML

HTML merupakan singkatan dari HyperText Markup Language adalah script untuk menyusun dokumen-dokumen Web. Dokumen HTML disimpan dalam format teks reguler dan mengandung tag-tag yang memerintahkan web browser untuk mengeksekusi perintah-perintah yang dispesifikasikan.

Struktur Dasar Html

<html>
<head>
<title>Disini Judul Dokumen HTML</title>
</head>
<body>
Disini penulisan informasi Web
</body>
</html>

Penjelasan :

  1. Tag 
    Berupa dua karakter ‘<’ dan ‘>’. Sebagai contoh, <title> adalah sebuah tag dengan nama title. sebuah tag di tulis secara berpasangan yang terdiri atas tag pembuka dan tag penutup. Pada tag penutup harus ditambahan simbol ‘/’ setelah ‘<’. Sebagai contohnya tag <title> akan di tutup dengan </title>
  2. Element Html
    Merupakan sebagai pernyataan bahwa dokumen tersebut adalah dokumen HTML.

<html>
……
…….
</html>

  1. Element Head
    Merupakan element yang di mulainya kepala dari sebuah file html yang letaknya diantara tag <html> dan </html>

<head>
………
……….
</head>

  1. Element Title
    Merupakan judul dari sebuah file html yang nantinya akan tampil ketika halaman tersebut sedang dibuka. Element title berada tag <head> dan </head>.

<title>
html pertamaku
<title>

  1. Element Body
    Merupakan Element yang berfungsi untuk menampillan semua isi yang berada pada file html yang bersangkutan. Element ini terletak pada pas di bawah tag <head> </head> dan masih berada di dalam tag <html> </html>.

Berikut ini adalah tag-tag yang di gunakan dalam HTML :

<!– — > Tag HTML Untuk Memberi Komentar Atau Keterangan. Kalimat Yang Terletak Pada Tag Kontainer Ini Tidak Akan Terlihat Pada Browser
<html> Tag HTML Sebagai Tag Pembuka Pada Dokumen HTML
</html> Tag HTML Sebagai Tag Penutup Tag <html> Pada Dokumen HTML
<head> Tag HTML Pembuka Yang Menjadi Head Dari Halaman Web
</head> Tag HTML Penutup Dari Tag <head> Pada Halaman Web
<title> Tag HTML Titel Pada Dokumen HTML
</title> Tag HTML Penutup Tag <title> Pada Dokumen HTML
<meta> Tag HTML Untuk Memberikan Informasi Penting Atau Deklarasi Tentang Halaman Web Kepada ODP Atau SE
<link href> Tag HTML Untuk Memanggil Fungsi Lain Seperti CSS
<script> Tag HTML Untuk Memanggil Fungsi Lain Seperti Java Script
</script> Tag HTML Penutup Tag <script>
<body> Tag HTML Sebagai Isi Atau Content Dari Halaman Web
</body> Tag HTML Sebagai Penutup Tag <body> Pada Halaman Web
<center> Tag HTML Untuk Untuk Perataan Tengah Terhadap Teks Atau Gambar
</center> Tag HTML Penutup Dari Tag <center>
<hr> Tag HTML Untuk Membuat Garis Horizontal Pada Halaman Web
<a href> Tag HTML Untuk Membuat Link Ke Halaman Lain Atau Ke Bagian Lain Dari Halaman
</a> Tag HTML Penutup Dari Tag <a href>
<a name> Tag HTML Untuk Membuat Nama Bagian Yang Didefinisikan Pada Link Pada Halaman
<applet> Tag HTML Sebagai Awal Dari Java Applets
<area> Tag HTML Untuk Mendefinisikan Daerah Yang Dapat Diklik(Link)Pada Image Map
<b> Tag HTML Untuk Membuat Teks Tebal
</b> Tag HTML Penutup Dari Tag <b>
<basefont> Tag HTML Untuk Membuat Atribut Teks Default Seperti Jenis,Ukuran Dan Warna Font
<font> Tag HTML Untuk Membuat Atribut Teks Default Seperti Jenis,Ukuran Dan Warna Font
</font> Tag HTML Penutup Dari Tag <font>
<bgsound> Tag HTML Untuk Memberi (Suara Latar) Background Sound PadaHalaman Web
<big> Tag HTML Untuk Memperbesar Ukuran Teks Sebesar Satu PointDari Defaultnya
<blink> Tag HTML Untuk Membuat Teks Berkedip
</blink> Tag HTML Tag Penutup Dari Tag <blink>
<br /> Tag HTML Untuk Pindah Baris
<caption> Tag HTML Untuk Membuat Caption Pada Tabel
<dd> Tag HTML Untuk Indents Teks
<div> Tag HTML Untuk Menyatakan Awal Suatu Divisi
</div> Tag HTML Penutup Dari Tag <div>
Tag HTML Untuk Menambahkan Sound Atau File Avi Ke Halaman Web
<form> Tag HTML Untuk Mendefinisikan Awal Dari Tag Formulir
</form> Tag HTML Penutup Dari Tag <form>
<frame> Tag HTML Untuk Mendefinisikan Awal Dari Tag Frame
</frame> Tag HTML Penutup Dari Tag <frame>
<frameset> Tag HTML Untuk Mendefinisikan Attribut Frame Dari Halaman Yang Menggunakan Frame
</frameset> Tag HTML Penutup Dari Tag <frameset>
<h1> Tag HTML Pembuka Ukuran Font Yang Terbesar Pada Header
</h1> Tag HTML Penutup Dari Tag <h1>
<h2> Tag HTML Pembuka Ukuran Font Yang Ke-2 Dari Yang Terbesar Pada Header
</h2> Tag HTML Penutup Dari Tag <h2>
<h3> Tag HTML Pembuka Ukuran Font Yang Ke-3 Dari Yang Terbesar Pada Header
</h3> Tag HTML Penutup Dari Tag <h3>
<h4> Tag HTML Pembuka Ukuran Font Yang Ke-4 Dari Yang Terbesar Pada Header
</h4> Tag HTML Penutup Dari Tag <h4>
<h5> Tag HTML Pembuka Ukuran Font Yang Ke-5 Dari Yang Terbesar Pada Header
</h5> Tag HTML Penutup Dari Tag <h5>
<h6> Tag HTML Pembuka Ukuran Font Yang Terkecil Pada Header
</h6> Tag HTML Penutup Dari Tag <h6>
<i> Tag HTML Untuk Membuat Bentuk Teks Italic Atau Teks Miring
</i> Tag HTML Penutup Dari Tag <i>
<img> Tag HTML Pembuka Sebagai Fungsi Penempatan Gambar, Fhoto Atau Animasi
<input> Tag HTML Yang Mendefinisikan Bentuk Pemasukan Pada Form
<li> Tag HTML Pembuat List Atau Bullet Point Berpasangan Dengan Tag <ol> Dan <ul> )
</li> Tag HTML Penutup Dari Tag <li>
<ol> Tag HTML Pembuat List Berurutan
</ol> Tag HTML Penutup Dari Tag <ol>
<ul> Tag HTML Pembuat List Tidak Berurutan
</ul> Tag HTML Penutup Dari Tag <ul>
<map> Tag HTML Untuk Mendefinisikan Client-Side Map
<marquee> Tag HTML Membuat Scrolling Teks (Teks Berjalan)
</marquee> Tag HTML Penutup Dari Tag <marquee>
<nobr> Tag HTML Untuk Mencegah Ganti Baris Pada Teks Atau Images
<noframes> Tag HTML Untuk Menyatakan Tidak Menggunakan Frame Jika Browser User Tidak Mendukung Frame
<p> Tag HTML Paragraf
</p> Tag HTML Penutup Dari Tag <p>
<pre> Tag HTML Untuk Membuat Ketikan Kita Ditampilkan Apa Adanya Seperti Yang Kita Ketik
</pre> Tag HTML Penutup Dari Tag <pre>
<table> Tag HTML Pembuat Tabel Pada Halaman Web
</table> Tag HTML Penutup Dari Tag <table>
<td> Tag HTML Pembuat Kolom Pada Tabel
</td> Tag HTML <td>
<tr> Tag HTML Pembuat Baris Pada Tabel
</tr> Tag HTML Penutup Dari Tag <tr>
<u> Tag HTML Pembuat Teks Bergaris Bawah
</u> Tag HTML Penutup Dari Tag <u>

 

Latihan Bikin HTML😉

1)            Ketikkan kode berikut ini untuk latihan dasar :

2)             Simpan file tersebut dengan nama index.html

3)             Setelah itu browse dimana file index.html tadi anda simpan

4)             Buka kembali file notepad kode index tersebut, berikan warna background biru dengan menambahkan perintah bgcolor=”blue” pada body.

5)             Kemudian tambahkan perintah <MARQUEE> sebelum perintah <center> agar tulisan bergerak, dan jangan lupa tutup dengan perintah </MARQUEE>.

6)             Lihat hasilnya dengan cara me-refresh browser yang membuka file index kita tadi.

7)             Ubah jenis, warna, dan ukuran font dengan menghilangkan Heading level <h2> dan menggantinya dengan kode berikut :

8)             Kemudian lihat hasilnya pada browser.

9)             Dalam menyusun webpage, sering sekali kita membutuh list, baik itu dengan nomer maupun dengan symbol tertentu. Hal itu dapat saja anda lakukan manual dengan mengetikannya sebagai text, akan tetapi untuk praktik yang baik sebaiknya anda gunakan tag-tag list yang sudah disediakan oleh HTML guna portabilitas antar browser tetap dapat terjaga. Dibawah ini merupakan kode dalam menyusun menu.

10)         Buat file baru pada notepad

11)         Kemudian ketikkan kode berikut ini :

12)         Kemudian simpan file tersebut dengan nama menu.html dan lihat hasilnya pada browser.

13)         Setelah dapat membuat list menu maka kita akan membuat gambar menjadi file gambar atau background

14)         Buat file notepad baru lagi, kemudian ketikkan kode program berikut ini :

15)         Simpan dengan nama galeri.html dan lihat hasilnya dengan membukanya pada browse

16)         Di HTML kita akan mengenal dua buah tag yang menangani linking, yaitu tag <a> dan <link>. Tag <a> digunakan untuk berpindah dari satu page ke page lainnya, dari satu website ke website lainnya atau berpindah dari satu bagian dalam page kebagian lainnya yang masih dalam page tesebut. Agar lebih jelas, berikut kita praktikan kedalam kode.

17)         Buatlah file notepad baru kemudian ketikkan kode berikut ini :

18)         Kemudian save dengan nama navigasi.html

19)         Setelah itu kita membuat frame dengan coding sbb :

21)         Simpan dengan nama frame.html

Selesai ! Lihat hasil pada browser yang kamu punya .

Selanjutnya kamu bisa berkreasi dan mengembangkan coding dasar tadi. Selamat Mencoba😉

About Anti

Simple :)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: