Membuat Dokumen HTML

Oleh: Zikwan, S.Pd.

(Pengajar pada SMPN 1 Way Tenong Lampung Barat)

Bahasa HTML merupakan bahasa markup (pelekat) untuk menampilkan teks. Gambar dan multi media. Dalam html terdapat tag-tag yang mampu dibaca oleh browser web sehingga tampilan informasi dapat kita nikmati dengan mudah dan dapat diakses melalui berbagai media.

Berikut kita akan mempelajari bagaimana membuat web sederhana dengan bantuan HTML mulai dari tingkat dasar tutorial ini akan mengajari anda dari tidak mengerti sama sekali tentang pembutan situs sampai anda dapat membuat web sendiri dan anda akan belajar bagaimana membuat situs yang menarik dengan bahasa sederhana ini.

Mulai Menulis HTML

Penulisan bahasa HTML dapat dilakukan dengan software word processor seperti Microsoft word, word pad, kword atau notepad, demi kecepatan dalam penulisan penulis sarankan untuk menggunkan Notepad,lalu bagaimana menggunakan NotePad ?, untuk memulai menggunakan notepad pada   windows, klik start, lalu program kemudian accessories lalu klik notepad, perhatikan gambar dibawah

Tampilan dari notepad adalah :

Untuk menyimpan file kedalam format HTML klik menu file. Lalu pilih save as ketikkan nama file anda dan akhiri dengan extension html, misalnya index.html

biasanya dalam menulis kode – kode html akan menghasilkan baris yang panjang dan biasanya akan melebar kearah baris, untuk mengatasi hal tersebut dalam menu notepad terdapat menu word warp yang akan memformat baris baris tersebut ke dalam ukuran window, sehingga lebih mudah dibaca, untuk mengaktifkannya klik menu edit lalu pilih Word Wrap.

Dalam menulis tag HTML kita selalu membutuhkan tag awal dan tag akhir namun ada beberapa tag HTML yang tidak membutuhkan tag akhir misalnya tag paragraph.

Document web sederhana

Dalam bab ini anda akan membuat file html paling sederhana yang terdiri dari dua tag yaitu tag untuk html <html> dan  bodi <body>, untuk memulainya buka notepad anda, ketikkan pada notepad kode html berikut :

<html>

<body>

Guru Pavoritku !!!

</body>

</html>

Selanjutnya simpan dengan nama index.html, panggil dengan browser anda misalnya internet explorer, caranya pada menu internet explorer klik file lalu open dan pilih dimana file index.html disimpan klik open, tampilan dari kode diatas saat dipanggil oleh browser adalah :

Sampai disini anda sudah bisa membuat file berformat html dengan kata lain anda telah  membuat sebuah halaman web.

Menggunakan Tag Head dan Body

Pada bagian head kita dapat memasukkan judul, tag judul dipakai secara luas oleh mesin pencari web, selain itu dalam penulisan judul usahakan sesingkat mungkin namun masih bisa mencerminkan isi dari web anda.

Untuk memulainya buka notepad, ketikkan <HTML>  untuk menambahkan bagian head ketikkan tag pembuka <HEAD>, pada bagian head kita dapat mengetikkan judul dari homepage yang kita buat, judul ini akan tampil saat web anda ditampilkan oleh browser, kode yang perlu ditulisakan adalah :

<HTML>

<HEAD>

<TITLE> Guru Pavoritku </TITLE>

</HEAD>

</HTML>

Save as dalam extension html, panggil lewat browser web, tulisan “Guru Pavoritku” akan tampil pada browser web.

Memformat Huruf dan Paragraf

Secara umum setiap tag pembentuk pada HTML bekerja dengan cara yang sama, masing – masing tag mempunyai tag pembuka dan tag penutup, semua text diantara tag tersebut akan mengikuti format tag yang telah ditentukan.

Huruf Tebal dan miring

Huruf tebal (bold) mempunyai tag dengan awalan <B> dan diakhiri dengan tag

</B>, jadi seluruh karakter yang berada diantara tag tersebut mempunyai format text tebal,

sedangkan tag untuk huruf miring adalah <I> dan diakhiri dengan </I>, text bergaris bawah

(underlined text) mempunyai pasangan tag <U> dan </U>.lebih jelasnya ketikkan code

dibawah ini pada notepad, lalu panggil lewat browser

<HTML>

<HEAD>

<TITLE> Tebal dan miring </TITLE>

</HEAD>

<Body> <B> huruf tebal</B> <I> Huruf miring</I> huruf biasa <U>Garis bawah</U>

<B><I> huruf tebal dan miring </B></I>

</Body>

</HTML>

tampilan dari code HTML diatas adalah

Sub Script dan Super Script

Tag SubScript dan Superscript banyak digunakan dalam persamaan matematis, tag <SUP> dan </SUP> merupakan tag untuk Superscript (sedikit diatas baris) sedangkan <SUB> dan </SUB> adalah pasangan tag untuk subscript (sedikit dibawah baris), contohnya:

<HTML>

<HEAD>

<TITLE> Sub dan super </TITLE>

</HEAD>

Disini contoh untuk <SUP> Superscript</SUP> dan satunya <SUB> subscript</SUB>

</Body>

</HTML>

simpan dengan nama contoh.html lalu pangil lewat browser, tampilan code HTML diatas

Format Paragraph

Tag paragraph dan format huruf merupakan tag yang paling sering dalam pembuatan web, sebab informasi pada umumnya berupa text, tag paragraph <P> merupakan tag penunjuk setiap paragraph baru, perhatikan code HTML  dibawah ini

<HTML>

<HEAD>

<TITLE> Memahami Paragraf </TITLE>

</HEAD>

<Body>

<P> tulisan ini merupakan paragraph pertama  dalam document yang saya tulis </P>

<P> baris ini merupakan paragraph kedua, paragraph kedua, silahkan buat tag paragraph

sebanyak mungkin sebagai contoh agar lebih mudah memahami tentang paragraph, dalam

paragraph anda dapat mengubah format sebagian huruf atau karakter misalnya <I> text

miring </I> <b>test tebal <b></P>.

</Body>

</HTML>

tampilan dari kode diatas adalah :

Tag <P> akan membuat text selalu rata kiri, untuk membuat rata kanan tambahkan align kemudian jenis format yang diinginkan, misalnya untuk rata kanan <P Align = Right>, untuk membuat rata kiri <P Align = Left>,untuk rata tengah <P Align = Center> sedangkan rata kedua sisi gunakan <P Align = justify>

Perhatikan contoh berikut :

<HTML>

<HEAD>

<TITLE> Memahami Paragraf </TITLE>

</HEAD>

<Body>

<P Align = Center> tulisan ini merupakan paragraph pertama  dalam document yang saya

tulis, paragraph diformat dalam agar tepat di tengah, dengan cara menambahkan properti

tag p align center, silahkan mencoba, asyik kok</P>

<P align = right> baris ini merupakan paragraph kedua, paragraph kedua, silahkan buat tag

paragraph sebanyak mungkin sebagai contoh agar lebih mudah memahami tentang

paragraph, dalam paragraph anda dapat mengubah format sebagian huruf atau karakter

misalnya <I> text miring </I> <b>test tebal, paragraph dibuat rata kanan supaya kelihatan

bagus, coba aja klo gak percaya<b></P>.

</Body>

</HTML>

hasil dari kode HTML diatas adalah :

Untuk format HTML lainnya,nantikan tulisan saya berikutnya. Selamat Mencoba !!!

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s