Downloaded 17 times
Uploaded byDenny Yahya
Html dasar 123
Dokumen ini adalah makalah tentang HTML yang menguraikan cara menuliskan tag, atribut, dan struktur dasar dokumen HTML. Penulis menjelaskan berbagai tag seperti <br>, <p>, <h1>-<h6>, <hr>, <center>, dan <div>, beserta fungsinya dalam pembuatan halaman web. Selain itu, dokumen ini juga membahas cara mengatur teks, termasuk ukuran, warna, dan jenis font.
More Related Content
Html dasar 123
- 1. MAKALAH MODUL HTML Nama :Denny Yahya S.W. Kelas : X RPL 1 No. : 11 SMK NEGERI 8 SEMARANG TAHUN AJARAN 2013-2014
- 2. Daftar isi PENGERTIAL HT M L (HyperText Mark-up Language) ...........................................................2 Cara Menuliskan Tag.....................................................................................................................3 Atribut dalam Tag...........................................................................................................................3 Komentar..........................................................................................................................................3 Tag <BR> .............................................................................................................................................4 Tag <P>.............................................................................................................................................4 Tag Judul..........................................................................................................................................5 Tag <HR>..........................................................................................................................................6 Tag <CENTER> ...............................................................................................................................7 Tag DIV..............................................................................................................................................8 MENGATUR TEKS..............................................................................................................................8 Mengatur Teks Secara Fisik...........................................................................................................9 MENGATUR FONT .............................................................................................................................9 Jenis Font.......................................................................................................................................10 Ukuran Font...................................................................................................................................10 Warna Font.....................................................................................................................................10 Mengatur Default Font ................................................................................................................12 PENGERTIAL H T M L (HyperText Mark-up Language)
- 3. HTML adalah sebuahbahasa pemrograman yang digunakan untuk membuat sebuah halaman Web. Untuk menulis kode HTML digunakan editor teks seperti NotePad atau FrontPage. Contoh kode HTML yang sangat sederhana : <HTML> <HEAD> <TITLE>Latihan Pertama</TITLE> </HEAD> <BODY> Selamat Belajar HTML </BODY> </HTML> � Pasangan tag <HTML> dan </HTML> menandakan bahwa kode yang terdapat di dalamnya adalah kode HTML sehingga browser akan menerjemahkan sebagai dokumen HTML � Bagian yang terdapat dalam <HTML> dan </HTML> umumnya terbagi atas : 1. kepala, ditandai dengan pasangan tag <HEAD> dan </HEAD> 2. badan, ditandai dengan pasangan tag <BODY> dan </BODY> � Pada bagian kepala, bisa ditentukan judul dokumen HTML. Judul ini ditulis dalam pasangan tag <TITLE> dan </TITLE>. Pada contoh di atas, judul dokumen HTML adalah Latihan Pertama. Judul ini diletakkan di bagian atas jendela browser. Cara Menuliskan Tag Nama tag ditulis di dalam tanda < dan >. Antara nama tag dan tanda < ditulis tanpa spasi sama sekali. Nama tag boleh ditulis dengan huruf kecil, huruf kapital, ataupun kombinasi antara huruf kecil dan huruf kapital. Dengan kata lain, penulisan : <HTML> <html> <Html> dianggap sama. Namun umumnya nama tag ditulis dengan huruf kecil saja atau huruf kapital saja. Atribut dalam Tag Beberapa tag mengandung atribut di dalamnya. Contoh : <P ALIGN=”CENTER”> Pada contoh ini, P adalah nama tag sedangkan ALIGN adalah nama atribut. Pada umumnya, atribut melibatkan nilai. Pada contoh di atas, “CENTER” adalah nilai untuk atribut ALIGN. Komentar Komentar adalah bagian dari kode HTML yang diabaikan oleh browser. Kegunaan komentar dalam kode HTML adalah sebagai keterangan. Sebuah komentar diawali dengan <!-- dan diakrhiri dengan -->. Contoh : <!— File komentar.htm Dibuat pada tanggal 4 Agustus 2002 --> <HTML> <HEAD> <TITLE>Komentar</TITLE> </HEAD> <BODY> <!-- Ini juga komentar --> Selamat Belajar HTML
- 4. </BODY> </HTML> Tag <BR> Fungsi tag<BR> adalah untuk membuat baris baru atau berpindah baris. Contoh : <HTML> <HEAD> <TITLE>Tag BR</TITLE> </HEAD> <BODY> Selamat Belajar HTML<BR> Semoga Sukses ! </BODY> </HTML> Tag <P> Tag <P> digunakan untuk membuat paragraf. Contoh : <HTML> <HEAD> <TITLE>Contoh Paragraf</TITLE> </HEAD> <BODY> Pesona Tanaman Hias<P> Keindahan tanaman hias<BR> membawa suatu pesona tersendiri<BR> Warna-warni bunga<BR> aneka rupa corak daun<BR> membuat orang dengan senang hati mengoleksinya </BODY> </HTML> Di dalam tag <P> bisa disertakan atribut ALIGN yang berguna untuk mengatur peletakan teks di dalam masing-masing baris. Salah satu nilai yang dapat diberikan pada ALIGN adalah CENTER, yang menempatkan teks berada di tengah-tengah layar pada baris yang bersangkutan. Selain CENTER, nilai lain yang dapat diisikan pada ALIGN yaitu : � LEFT, mengatur teks rata kiri terhadap halaman � RIGHT, mengatur teks rata kanan terhadap halaman � JUSTIFY, mengatur teks rata kiri dan rata kanan. Efeknya terlihat untuk teks yang sangat panjang. Contoh : <HTML> <HEAD> <TITLE>Contoh tag P dengan ALIGN</TITLE> </HEAD> <BODY>
- 5. PUISIKU: <P ALIGN ="CENTER"> Mataharipun mulai terbangun dari mimpi<BR> menyemburatkan sinarnya yang hangat<BR> Burung-burung berkicau riang<BR> mengucapkan selamat pagi<BR> </P> Yogyakarta, 2002 </BODY> </HTML> Tag Judul HTML menyediakan 6 buah tag yang digunakan untuk mengatur ukuran teks yang dijadikan sebagai judul dalam badan dokumen. Tag-tag judul ini berupa : � <H1> ... </H1> � <H2> ... </H2> � <H3> ... </H3> � <H4> ... </H4> � <H5> ... </H5> � <H6> ... </H6> Contoh : <HTML> <HEAD> <TITLE>Tag H1-H6</TITLE> </HEAD> <BODY> <H1>Tag H1</H1> <H2>Tag H2</H2> <H3>Tag H3</H3> <H4>Tag H4</H4> <H5>Tag H5</H5> <H6>Tag H6</H6> </BODY> </HTML> Seperti halnya pada tag <P>, tag judul atau heading ini juga memiliki atribut ALIGN. Nilai yang dapat diberikan pada ALIGN adalah : � LEFT (default), mengatur teks rata kiri terhadap halaman � RIGHT, mengatur teks rata kanan terhadap halaman � CENTER, menempatkan judul di tengah-tengah layar pada baris yang bersangkutan � JUSTIFY, mengatur teks rata kiri dan rata kanan. Efeknya terlihat untuk teks yang sangat panjang. Contoh : <HTML> <HEAD> <TITLE>Atribut ALIGN</TITLE> </HEAD>
- 6. <BODY> <H1>Pesona Tanaman Hias</H1> <H1ALIGN = "LEFT">Pesona Tanaman Hias</H1> <H1 ALIGN = "RIGHT">Pesona Tanaman Hias</H1> <H1 ALIGN = "CENTER">Pesona Tanaman Hias</H1> </BODY> </HTML> Tag <HR> Untuk mempercantik halaman, seringkali pembuat dokumen Web menambahkan garis horisontal. Garis ini sebenarnya dapat dibuat dengan mudah, yakni dengan menyertakan tag <HR>. Contoh : <HTML> <HEAD> <TITLE>Tag HR</TITLE> </HEAD> <BODY> <H2>Aneka Tanaman Hias</H2> <HR> Aglaonema atau Sri rejeki <HR> Begonia <HR> Bromelia <HR> dll <HR> </BODY> </HTML> Daftar Atribut tag <HR> Atribut Keterangan SIZE Menentukan ketebalan garis WIDTH Menentukan lebar garis ALIGN Menentukan peletakkan teks dalam baris NOSHADE Mengatur agar garis tidak disertai bayangan Contoh penggunaan atribut SIZE : <HTML> <HEAD> <TITLE>Atribut SIZE pada Tag HR</TITLE> </HEAD> <BODY> <H1>KEBUN PESONA</H1> <HR SIZE = "10"> Jl. Solo Km 14<BR> Yogyakarta<BR> Indonesia<BR> </BODY> </HTML> Contoh penggunaan atribut NOSHADE :
- 7. <HTML> <HEAD> <TITLE>Atribut NOSHADE padaTag HR</TITLE> </HEAD> <BODY> <H1>KEBUN PESONA</H1> <HR SIZE = "10" NOSHADE> Jl. Solo Km 14<BR> Yogyakarta<BR> Indonesia<BR> </BODY> </HTML> Contoh penggunaan atribut WIDTH : <HTML> <HEAD> <TITLE>Atribut WIDTH dan ALIGN pada Tag HR</TITLE> </HEAD> <BODY> <HR ALIGN = "CENTER" WIDTH = "5%" SIZE = "10" NOSHADE> <HR ALIGN = "CENTER" WIDTH = "10%" SIZE = "10" NOSHADE> <HR ALIGN = "CENTER" WIDTH = "20%" SIZE = "10" NOSHADE> <HR ALIGN = "CENTER" WIDTH = "35%" SIZE = "10" NOSHADE> <HR ALIGN = "CENTER" WIDTH = "20%" SIZE = "10" NOSHADE> <HR ALIGN = "CENTER" WIDTH = "10%" SIZE = "10" NOSHADE> <HR ALIGN = "CENTER" WIDTH = "4%" SIZE = "10" NOSHADE> </BODY> </HTML> Tag <CENTER> Untuk menengahkan suatu teks, bisa juga digunakan tag <CENTER>. Tentu saja, untuk mengakhiri penengahan teks (yakni agar teks berikutnya tidak ditengahkan), perlu disertakan </CENTER>. Contoh : <HTML> <HEAD> <TITLE>Tag CENTER</TITLE> </HEAD> <BODY> <CENTER> <H2>Berbagai Jenis Keladi yang mempesona:</H2> Red Flash <BR> Red Fire <BR> Fannie Munson <BR> Pink Beauty <BR> Hilo Beauty <BR> Jackie Suthers <BR> </CENTER> ***** </BODY>
- 8. </HTML> Tag DIV Tag divisi(<DIV>) berguna untuk mengelompokkan sejumlah baris teks yang memiliki karakteristik yang sama. Contoh : <HTML> <HEAD> <TITLE>Tag DIV</TITLE> </HEAD> <BODY> <DIV ALIGN = "RIGHT"> <H1><U>PRIMASOFT KREASINDO</U></H1> <H2>Jl. Kalasan KM 14</H2> <H2>Yogyakarta</H2> </DIV> <HR> </BODY> </HTML> MENGATUR TEKS
- 9. Mengatur Teks SecaraFisik Pemakaian Tag Keterangan <B>Teks</B> Teks ditampilkan dalam keadaan ditebalkan <BIG>Teks</BIG> Teks ditampilkan dengan ukuran lebih besar dari ukuran normal <I>Teks</I> Teks ditampilkan dalam keadaan miring <SMALL>Teks</SMALL> Teks ditampilkan dengan ukuran lebih kecil dari ukuran normal <SUB>Teks</SUB> Teks ditampilkan sebagai subskrip <SUP>Teks</SUP> Teks ditampilkan sebagai superskrip <TT>Teks</TT> Teks ditampilkan dalam bentuk seperti ketikan mesin tik <U>Teks</U> Teks ditampilkan dengan diberi garis bawah Contoh: MENGATUR FONT
- 10. Tag <FONT>…</FONT> bergunauntuk mengatur jenis, ukuran, maupun warna font. Jenis Font Untuk menentukan jenis font, digunakan atribut FACE. Contoh : Ukuran Font Untuk font ditentukan oleh atribut SIZE. Contoh : Warna Font Atribut pada tag <FONT> yang berkaitan dengan warna teks yaitu COLOR, yang berguna untuk menentukan warna . Jika warna latar belakang yang akan diatur, pengaturan perlu dilakukan melalui tag <BODY> dengan properti berupa
- 11. BGCOLOR. Tag BODYjuga memiliki atribut bernama TEXT yang dapat digunakan untuk mengatur warna teks pada keseluruhan tubuh dokumen. Daftar nama warna pada atribut penentu warna Nama Warna RGB Nama Warna RGB aqua 00FFFF navy 000080 black 000000 olive 808000 blue 0000FF purple 800080 fuchsia FF00FF red FF0000 gray 808080 silver C0C0C0 green 008000 teal 008080 lime 00FF00 yellow FFFF00 maroon 800000 white FFFFFF Contoh: Contoh penggunaan atribut BGCOLOR dan TEXT pada tag BODY :
- 12. Mengatur Default Font HTMLmenyediakan tag bernama <BASEFONT> yang berfungsi untuk menentukan ukuran default font untuk seluruh halaman. Contoh : Entitas Karakter dan Numerik