19803226 dasar-dasar-html
Upcoming SlideShare
Loading in...5
×
 

19803226 dasar-dasar-html

on

  • 744 views

ooooooo

ooooooo

Statistics

Views

Total Views
744
Views on SlideShare
744
Embed Views
0

Actions

Likes
0
Downloads
9
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    19803226 dasar-dasar-html 19803226 dasar-dasar-html Document Transcript

    • 1 | Buletindo ● Download Gratis Buletin Komputer Terbaru di : http://komputer.buletindo.com Edisi 010 | Web Development | Rabu, 26 Agustus 2009 Buletindo BULETIN KOMPUTER ● Jurnal Pembelajaran Komputer ● www.buletindo.com Dasar-dasar HTML Oleh : Zaenal ArifinWorld Wide Web (WWW) atau web saat ini menjadi layanan internet terpopuler. Melalui web,beragam informasi, data, transaksi bisnis, hingga catatan harian seseorang dapat ditayangkandan diakses oleh semua orang di seluruh dunia. Untuk membuat dan mengelola website atauweb 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 ? Mengenal Dokumen HTMLIngin membuat halaman web ? Dokumen HTML adalah file halaman web. Jadi misalnya jikaIngin mengelola website Anda membuka halaman Beranda, lalu berpindah kesendiri ? Pelajarilah HTML. halaman Kontak, maka sebenarnya Anda sedang mengakses file HTML Beranda lalu berpindah ke file HTML Kontak.Hyper Text Markup Language(HTML) adalah bahasa Cara paling mudah untuk mengetahui kode HTML sebuahpengkodean yang digunakan halaman web adalah dengan perintah View > Source / Pageuntuk membuat sebuah Source pada web browser. Di sana akan ditampilkan kodehalaman web dan sumber HTML yang digunakan untuk menyusun halaman webmenampilkan berbagai yang tampil di browser. Berikut contoh kode HTML halamaninformasi di sebuah program web mesin pencari Google.web browser Internet.HTML sebenarnya bukanlahbahasa pemrograman,melainkan sebuah standartata cara penyajian teks danmateri pendukungnya agardapat tersaji secaraterstruktur di halaman web.Meskipun dewasa ini sudahbanyak program bantu untukmembuat halaman web secaracepat dan praktis, namununtuk kebutuhan tertentu,penguasaan dasar-dasarpengkodean HTML tetapdiperlukan.
    • 2 | Buletindo ● Download Gratis Buletin Komputer Terbaru di : http://komputer.buletindo.comEkstensi file HTML adalah .htm atau .html.Dokumen HTML dapat disusun secara manualmelalui program pengolah teks sepertiNotepad, atau menggunakan program bantuVisual HTML Editor seperti MicrosoftFrontpage atau Dreamweaver.Pengkodean HTML tidak terlepas daripenggunaan tag. Tag adalah standar frasetertentu yang digunakan untuk mengaturhalaman web.Tag dipakai untuk mengatur apa saja yangada di dalamnya. Oleh sebab itu, tagbiasanya berupa sepasang frase yang disebutdengan tag pembuka dan tag penutup.Sebagai contoh, untuk mengatur judul Melayout Tekshalaman web, digunakan tag pembuka Untuk memformat atau mengatur layout teks<TITLE> dan diakhiri dengan tag </TITLE>. di halaman web, digunakan tag-tag sebagaiSebagai catatan, penggunaan huruf kapital berikut :atau huruf normal sama saja, tidakberpengaruh pada hasil halaman web. • <H1>, <H2>, hingga <H6> : untuk mengatur judul dan sub judul artikel diPerhatikan contoh struktur dokumen HTML halaman web.sebagai berikut : • <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.• Dokumen HTML diawali tag <HTML> dan Silakan susun kode berikut di Notepad untuk diakhiri tag </HTML>. mencoba tag-tag di atas. Simpan sebagai• Judul halaman dan beberapa informasi teks.html dan lihat hasilnya di web browser. mengenai dokumen HTML berada di <HTML> antara tag <HEAD>...</HEAD>. <HEAD>• Isi halaman web yang nantinya ditampilkan di web browser berada di <TITLE>Mengatur Teks</TITLE> antara tag <BODY>...</BODY>. </HEAD>Coba susun kode contoh di atas menggunakan <BODY>program Notepad. Simpan dengan Save As,pada File name isi latihan.html dan pada <H1>Judul Artikel</H1>Save as type pastikan terpilih All Files (*.*). <P>Ini isi paragraf pertama. Paragraf ini ada di bawah judulJalankan pada web browser, maka akan artikel.</P>muncul hasilnya seperti berikut. BULETIN BEBAS DIGANDAKAN DAN DIDISTRIBUSIKAN KEMBALI UNTUK KEPENTINGAN NON KOMERSIAL
    • Dasar-dasar HTML | 3<P>Ini isi paragraf kedua. Paragraf ini ada di bawah Membuat Daftarparagraf pertama.</P> Anda bisa mengatur beberapa baris teks<H2>Ini Subjudul</H2> menjadi sebuah daftar, baik daftar berurut<H3>Ini Sub Subjudul</H3> maupun daftar tidak berurut.<P>Ini teks sebelum dipenggal. Daftar Berurut<BR /> Daftar berurut adalah daftar yang disajikanIni teks setelah dipenggal.</P> dalam urutan angka. Tag yang dipakai adalah tag <ol> dan <li>. Penulisannya :<HR /> <ol><P>Ini teks di bawah garis.</P> <li>Ini baris nomor satu</li><P><B>Ini Cetak Tebal</B> dan <I>Ini CetakMiring</I></P> <li>Ini baris nomor dua</li></BODY> </ol></HTML> Jika dijalankan, maka akan tampil menjadi : 1. Ini baris nomor satu 2. Ini baris nomor dua Daftar Tidak Berurut Daftar tidak berurut adalah daftar yang disajikan dalam list bullet. Tag yang dipakai adalah tag <ul> dan <li>. Penulisannya : <ul> <li>Ini item</li> <li>Ini item lainnya</li> </ul> Jika dijalankan, maka akan tampil menjadi : • Ini item • Ini item lainnya Membuat Link Untuk menyisipkan link, digunakan tag <a>. Susunan sederhananya adalah : <a href=”URL”>Teks</a>Dapat Anda lihat, tag <H1>, <H2>, dan <H3> Contoh penulisannya :secara otomatis ditampilkan dengan ukuran <a href=”http://www.buletindo.com”>Ini Link Menuju kehuruf yang berbeda. Anda juga dapat melihat Buletindo</a>perbedaan perpindahan baris kata yangdipenggal dengan tag <BR />. Perhatikan juga Hasilnya, sebaris kata “Ini Link Menuju kehasil penggunaan tag garis pemisah, tag Buletindo” akan berubah menjadi objek linkcetak tebal dan tag cetak miring. yang siap di-klik pengunjung. DILARANG MENGUBAH SEBAGIAN ATAU SELURUH ISI BULETIN TANPA IJIN TERTULIS DARI BULETINDO
    • 4 | Buletindo ● Download Gratis Buletin Komputer Terbaru di : http://komputer.buletindo.com Membuat TabelMenyisipkan Gambar Untuk membuat tabel, diguna-Untuk menyisipkan gambar, digunakan tag <img>. Susunan kan tag <table>. Selain itu, di-sederhananya adalah : perlukan tag <tr> untuk mem-<img src=”URL GAMBAR” /> buat baris tabel dan tag <td> untuk membagi baris tabelContoh penulisannya : menjadi beberapa kolom.<img src="http://www.google.co.id/intl/id_id/images/logo.gif" /> Contoh penulisannya :Hasilnya, gambar logo Google akan tampil di browser. <table border="1"> <tr>Gambar juga bisa dijadikan sebuah link, caranya cukupmenempatkan tag <img> di antara tag <a> : <td>baris 1, kolom 1</td><a href=”URL”><img src=”URL GAMBAR” /></a> <td>baris 1, kolom 2</td> </tr>Mengenal Atribut <tr>Beberapa tag HTML menggunakan atribut. Atributmerupakan informasi tambahan yang disisipkan ke sebuah <td>baris 2, kolom 1</td>tag pembuka. Susunannya adalah namaatribut=”nilai”. <td>baris 2, kolom 2</td>Jika Anda perhatikan kembali, contoh tag <a> dan <img> di </tr>atas disertai atribut : </table>href=http://www.buletindo.com Hasilnya akan diperoleh tabelsrc=" http://www.google.co.id/intl/id_id/images/logo.gif seperti berikut :Atribut href dipakai untuk merujuk URL target link,sedangkan atribut src dipakai untuk merujuk URL targetgambar yang akan ditampilkan. Tag <a> dan <img> jugadapat diberi beberapa atribut lainnya.Sebagian besar tag HTML dapat disisipi atribut. Ada Pada contoh, dipakai atributbeberapa atribut yang bisa diterapkan di berbagai tag, border=”1” untuk mengaturnamun ada juga atribut yang hanya bisa diterapkan ke tag ketebalan garis batas tabel.tertentu, seperti tag <a>dan <img> di atas. Anda dapat mengisikan nilai 0 jika tidak ingin menampilkanAtribut antara lain lazim dipakai untuk memformat style garis tabel, atau mengisikanteks dan gambar, mengatur warna, dan mengatur tabel. nilai yang lebih besar untukstyle="background-color:red" (mengatur warna latar menjadi merah) mempertebal garis tabel.style="font-size:12px" (mengatur ukuran hurud menjadi 12 piksel)style="font-family:Verdana" (mengatur teks menggunakan font Verdana) Buletindostyle="text-align:center" (mengatur teks menjadi rata tengah) www.buletindo.com Kontak:Contoh pemakaiannya, coba sisipkan atribut style pada tag Jl. Abimanyu VI / 22<BODY> agar warna halaman menjadi merah : Semarang - 50131<BODY style="background-color:red"> Telp. (024) 3560597 Redaksi:Sebagai referensi, daftar lengkap tag HTML dan atribut yang redaksi @ buletindo.comdapat menyertainya bisa Anda lihat di : Kerjasama & Iklan: marketing @ buletindo.comhttp://www.w3schools.com/tags/default.asp BULETIN BEBAS DIGANDAKAN DAN DIDISTRIBUSIKAN KEMBALI UNTUK KEPENTINGAN NON KOMERSIAL