HTML – Pengenalan

Postingan ini dibikin dalam rangka gw nyiapin materi untuk tutor tentang web ke anak-anak komunitas computer security di kampus gw. Soalnya besok gw udah harus ngajar & gw belum bener-bener nyiapin materinya, jadi gw mau nulis tentang HTML di sini & mungkin gw bakal dapet lebih banyak ide tentang apa aja yang mau gw ajarin besok, lusa, & seterusnya.

Buat yang belum tau, HTML itu bahasa scripting yang dipake untuk tampilan web. Browser bakal ngebaca script HTML yang diterima dari web server, lalu dirender sampe jadi tampilan visual yang biasa kita liat kalo lagi buka website. Script HTML ditulis pake tag buat nandain bagian mana aja dari script yang bakal kena efek dari tag yang bersangkutan. Penjelasan barusan mungkin agak susah dimengerti, berhubung gw yang nulis juga agak bingung gimana cara ngejelasinnya dengan kata-kata. Mungkin paling bagus itu langsung gw kasih contoh aja.

<html>
    <head>
        <title>Ini Judul Halaman</title>
    </head>
    <body>
        <h1>Contoh Pemakaian HTML</h1>
    </body>
</html>

File HTML biasanya dibuka dengan tag <html>, lalu ditutup tag </html>. Di dalam file HTML ada dua bagian utama: <head> & <body>. Di <head> biasanya didefinisiin judul halaman, pemasangan script CSS & JavaScript, & penggunaan tag <meta>. Sementara itu <body> diisi konten-konten yang mau ditampilin di halaman web, misalnya teks, hyperlink, & gambar.

Nggak semua tag HTML harus ada tag penutupnya, misalnya tag-tag ini.

<br />
<img src="http://lindsayolson.com/wp-content/uploads/2012/05/html.jpg" />

Tag <br /> berfungsi mirip kayak tombol enter di keyboard. Kalo kita nulis teks panjang di source code HTML & pengen lanjut nulis di baris bawahnya, kasih tag <br /> buat ngakhirin baris yang sebelumnya & mulai nulis di baris yang baru.

Tag <img /> berfungsi buat nampilin gambar di web. Gambarnya dipanggil dari lokasi yang kita masukin di property src.

Daftar tag HTML di HTML 4.01 bisa diliat di sini, tapi di postingan ini gw bakal fokus ke tag-tag ini: <b>, <i>, <h1>, <h2>, <h3>, & <table>.

Tag <b> berfungsi untuk mempertebal tulisan, bikin font yang dikasih tag jadi bold. Efek pemakaian tag <b> itu kira-kira kayak begini. Atau bisa juga pake tag <strong>.

Tag <i> berfungsi untuk bikin tulisan miring, font yang bersangkutan dibuat jadi italic. Efek pemakaian tag <i> itu kira-kira begini deh. Bisa juga pake tag <em> untuk bikin tulisan miring.

Tag <h1>, <h2>, & <h3> berfungsi untuk penanda header dalam teks. Kalo dipake di blog gw ini kira-kira jadinya begini.

Ini <h1>

Ini <h2>

Ini <h3>

Tapi kalo dipake di halaman web yang nggak ada CSSnya, yang dikasih tag <h1> tulisannya bakal gede banget. Yang dikasih tag <h2> bakal lebih kecil dari <h1>, lalu yang dikasih tag <h3> lebih kecil dari <h2>. Berhubung blog gw pake CSS, yang berfungsi buat modifikasi tampilan web, jadi tag <h1>, <h2>, & <h3> di postingan ini tampilannya jadi lebih bagus. Tampilan aslinya tag-tag itu tanpa campur tangan script CSS bisa diliat di sini.

Lalu bagian yang terakhir, tag <table>. Tag ini berfungsi untuk ngegambar tabel di halaman web, & ada beberapa tag lagi yang harus dipake di dalamnya.

Tag Keterangan
<tr> Table row, menambah baris baru di tabel
<th> Table header, membuat cell yang berfungsi sebagai header tabel
<td> Table data, membuat cell yang berfungsi untuk menunjukkan data dalam tabel

Contoh kode pemakaian tag

<table>
    <tr>
        <th>Nama</th>
        <th>Keterangan</th>
    </tr>
    <tr>
        <td>Agung Hercules</td>
        <td>Terkenal lewat video klip Astuti di YouTube</td>
    </tr>
    <tr>
        <td>Tukul Arwana</td>
        <td>Pembawa acara Bukan Empat Mata</td>
    </tr>
</table>

Kalo ditampilin di blog gw, source code HTML itu bakal jadi begini.

Nama Keterangan
Agung Hercules Terkenal lewat video klip Astuti di YouTube
Tukul Arwana Pembawa acara Bukan Empat Mata

Tapi di blog gw tampilannya udah dimodifikasi script CSS yang terpasang di sini. Tampilan yang sebenarnya tanpa CSS itu bisa diliat di sini.

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