SEKOLAH TINGGI MANAJEMEN DAN ILMU KOMPUTER MUSI RAWAS
S T M I K - M U R A
Jurusan Teknik Informatika Modul Algoritma dan Pemrograman III Pertemuan Ke 01 Jln. Yos Sudarso Kel. Lubuk Kupang Kec. Lubuk Linggau Selatan I Lubuk Linggau Telp/Fax. 0733-452218 helfaz@yahoo.co.id Helmi Fauzi 1 Dasar-dasar HTML World Wide Web (WWW) atau web saat ini menjadi layanan internet terpopuler. Melalui web,beragam informasi, data, transaksi bisnis, hingga catatan harian seseorang dapat ditayangkan dan diakses oleh semua orang di seluruh dunia. Untuk membuat dan mengelola website atau web blog, hal pertama yang harus dipahami adalah mengenai teknik membuat halaman web.Pembuatan halaman web tentunya tidak terlepas dari bahasa pengkodean web, yaitu HTML(Hyper Text Markup Language). Apa itu HTML ? Ingin membuat halaman web ? Ingin mengelola website sendiri ? Pelajarilah HTML. Hyper Text Markup Language (HTML) adalah bahasa pengkodean yang digunakan untuk membuat sebuah halaman web dan menampilkan berbagai informasi di sebuah program web browser Internet.HTML sebenarnya bukanlah bahasa pemrograman,melainkan sebuah standar tata cara penyajian teks dan materi pendukungnya agar dapat tersaji secara terstruktur di halaman web.Meskipun dewasa ini sudah banyak program bantu untuk membuat halaman web secara cepat dan praktis, namun untuk kebutuhan tertentu, penguasaan dasar-dasar pengkodean HTML tetap diperlukan. Mengenal Dokumen HTML Dokumen HTML adalah file halaman web. Jadi misalnya jika Anda membuka halaman Beranda, lalu berpindah ke halaman Kontak, maka sebenarnya Anda sedang mengakses file HTML Beranda lalu berpindah ke file HTML Kontak.Cara paling mudah untuk mengetahui kode HTML sebuah halaman web adalah dengan perintah View > Source / Page Source pada web browser. Di sana akan ditampilkan kode sumber HTML yang digunakan untuk menyusun halaman web yang tampil di browser. Berikut contoh kode HTML halaman web mesin pencari Google. Gambar 1.1 Kode Sumber HTML
SEKOLAH TINGGI MANAJEMEN DAN ILMU KOMPUTER MUSI RAWAS
Jurusan Teknik Informatika Modul Algoritma dan Pemrograman III Pertemuan Ke 01 Jln. Yos Sudarso Kel. Lubuk Kupang Kec. Lubuk Linggau Selatan I Lubuk Linggau Telp/Fax. 0733-452218 helfaz@yahoo.co.id Helmi Fauzi 2 Ekstensi file HTML adalah .htm atau .html. Dokumen HTML dapat disusun secara manual melalui program pengolah teks seperti Notepad, atau menggunakan program bantu Visual HTML Editor seperti Microsoft Frontpage atau Dreamweaver.Pengkodean HTML tidak terlepas dari penggunaan tag. Tag adalah standar frase tertentu yang digunakan untuk mengatur halaman web. Tag dipakai untuk mengatur apa saja yang ada di dalamnya. Oleh sebab itu, tag biasanya berupa sepasang frase yang disebut dengan tag pembuka dan tag penutup.Sebagai contoh, untuk mengatur judul halaman web, digunakan tag pembuka <TITLE> dan diakhiri dengan tag </TITLE>. Sebagai catatan, penggunaan huruf kapital atau huruf normal sama saja, tidak berpengaruh pada hasil halaman web. Perhatikan contoh struktur dokumen HTML sebagai berikut : Gambar 1.2 Struktur Dokumen HTML 1. Dokumen HTML diawali tag <HTML> dan diakhiri tag </HTML>.
2. Judul halaman dan beberapa informasi mengenai dokumen HTML berada di antara tag <HEAD>...</HEAD>.
3. Isi halaman web yang nantinya ditampilkan di web browser berada di antara tag <BODY>...</BODY>.
Coba susun kode contoh di atas menggunakan program
pada
Jalankan pada web browser, maka akan muncul hasilnya seperti berikut.
S T M I K - M U R A 2. Judul halaman dan beberapa informasi mengenai dokumen HTML berada di antara tag <HEAD>...</HEAD>.
3. Isi halaman web yang nantinya ditampilkan di web browser berada di antara tag <BODY>...</BODY>.
Coba susun kode contoh di atas menggunakan program
pada
Jalankan pada web browser, maka akan muncul hasilnya seperti berikut.
SEKOLAH TINGGI MANAJEMEN DAN ILMU KOMPUTER MUSI RAWAS
Jurusan Teknik Informatika Modul Algoritma dan Pemrograman III Pertemuan Ke 01 Jln. Yos Sudarso Kel. Lubuk Kupang Kec. Lubuk Linggau Selatan I Lubuk Linggau Telp/Fax. 0733-452218 helfaz@yahoo.co.id Helmi Fauzi 3 Gambar 1.3 Contoh Dokumen Web
Melayout Teks Untuk memformat atau mengatur layout teks di halaman web, digunakan tag-tag sebagai berikut :
• <H1>, <H2>, hingga <H6> : untuk mengatur judul dan sub judul artikel di halaman web.
• <P> : untuk menetapkan sekelompok kalimat menjadi sebuah paragraf.
• <BR /> : untuk memenggal teks ke baris selanjutnya.
• <HR /> : memberikan garis pemisah.
• <B> : untuk memberi efek cetak tebal pada huruf.
• <I> : untuk memberi efek cetak miring pada huruf.
Silakan susun kode berikut di Notepad untuk mencoba tag-tag di atas. Simpan sebagai teks.html dan lihat hasilnya di web browser. Gambar 1.4 Contoh Melayout teks dengan HTML
Notepad. Simpan dengan Save As, File name isi latihan.html dan pada Save as type pastikan terpilih All Files (*.*). S T M I K - M U R A Melayout Teks Untuk memformat atau mengatur layout teks di halaman web, digunakan tag-tag sebagai berikut :
• <H1>, <H2>, hingga <H6> : untuk mengatur judul dan sub judul artikel di halaman web.
• <P> : untuk menetapkan sekelompok kalimat menjadi sebuah paragraf.
• <BR /> : untuk memenggal teks ke baris selanjutnya.
• <HR /> : memberikan garis pemisah.
• <B> : untuk memberi efek cetak tebal pada huruf.
• <I> : untuk memberi efek cetak miring pada huruf.
Silakan susun kode berikut di Notepad untuk mencoba tag-tag di atas. Simpan sebagai teks.html dan lihat hasilnya di web browser. Gambar 1.4 Contoh Melayout teks dengan HTML
SEKOLAH TINGGI MANAJEMEN DAN ILMU KOMPUTER MUSI RAWAS
Jurusan Teknik Informatika Modul Algoritma dan Pemrograman III Pertemuan Ke 01 Jln. Yos Sudarso Kel. Lubuk Kupang Kec. Lubuk Linggau Selatan I Lubuk Linggau Telp/Fax. 0733-452218 helfaz@yahoo.co.id Helmi Fauzi 4 <HTML>
<HEAD>
<TITLE>
</HEAD>
<BODY>
<H1>
<P>Mengatur Teks</TITLE> Judul Artikel</H1> Ini isi paragraf pertama. Paragraf ini ada di bawah judul artikel</P> <P>
<H2>
<H3>
<P>Ini isi paragraf kedua. Paragraf ini ada di bawah paragraf pertama.</P> Ini Subjudul</H2> Ini Sub Subjudul</H3> Ini teks sebelum dipenggal. <BR/> Ini teks setelah dipenggal</P>
<P>
<P><B>
</BODY>
</HTML> <HR/> Ini teks di bawah garis.</P> Ini Cetak Tebal</B> dan <I>Ini Cetak Miring</I></P> Dapat Anda lihat, tag <H1>, <H2>, dan <H3> secara otomatis ditampilkan dengan ukuran huruf yang berbeda. Anda juga dapat melihat perbedaan perpindahan baris kata yang dipenggal dengan tag <BR />. Perhatikan juga hasil penggunaan tag garis pemisah, tag cetak tebal dan tag cetak miring.
S T M I K - M U R A <HEAD>
<TITLE>
</HEAD>
<BODY>
<H1>
<P>Mengatur Teks</TITLE> Judul Artikel</H1> Ini isi paragraf pertama. Paragraf ini ada di bawah judul artikel</P> <P>
<H2>
<H3>
<P>Ini isi paragraf kedua. Paragraf ini ada di bawah paragraf pertama.</P> Ini Subjudul</H2> Ini Sub Subjudul</H3> Ini teks sebelum dipenggal. <BR/> Ini teks setelah dipenggal</P>
<P>
<P><B>
</BODY>
</HTML> <HR/> Ini teks di bawah garis.</P> Ini Cetak Tebal</B> dan <I>Ini Cetak Miring</I></P> Dapat Anda lihat, tag <H1>, <H2>, dan <H3> secara otomatis ditampilkan dengan ukuran huruf yang berbeda. Anda juga dapat melihat perbedaan perpindahan baris kata yang dipenggal dengan tag <BR />. Perhatikan juga hasil penggunaan tag garis pemisah, tag cetak tebal dan tag cetak miring.
