1 / 24

Dasar-dasar HTML

Mengenal HTML

gitano
Télécharger la présentation

Dasar-dasar HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Mengenal HTML HTML (HyperTex Markup Language) adalah standar informasi yang berbasis hypertext yang dipakai di web. Berdasarkan standar inilah Web Browser bisa memahami isi suatu dokumen yang berasal dari web server. HTML bekerja dengan menggunakan HTTP (HyperText Transfer Protocol), yaitu protokol komunikasi yang memungkinkan web server berkomunikasi dengan web browser. Kode HTML berupa sebuah berkas teks dengan akhiran berupa .HTML, .html, .HTM, atau .htm. Dasar-dasar HTML

  2. Contoh kode HTML: <HTML> <HEAD> <TITLE>Latihan HTML</TITLE> </HEAD> <BODY> Selamat Belajar HTML </BODY> </HTML> Penjelasan dari kode: Pasangan tag <HTML> dan </HTML> menandakan bahwa kode yang terdapat di dalamnya adalah kode HTML sehingga browser akan menerjemahkannya sebagai dokumen HTML.

  3. Bagian yang terdapat dalam <HTML> dan </HTML> umumnya terbagi atas: kepala badan Bagian kepala ditandai dengan pasangan tag <HEAD> dan </HEAD>, sedangkan bagian badan ditandai dengan tag <body> dan </BODY>. Pada bagian kepala, Anda bisa menentukan judul dokumen HTML. Judul ini ditulis dengan pasangan tag <TITLE> dan </TITLE>. Pada contoh di depan, judul dokumen HTML berupa Latihan HTML. Judul ini diletakkan di bagian atas jendela browser.

  4. Cara Menuliskan Tag Setiap tag memiliki nama. Nama tag ditulis di dalam tanda < dan >. Penulisan nama tag dan tanda < tanpa spasi. 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. Tetapi umunya nama tag ditulid dengan huruf kecil saja atau huruf kapital saja. Atribut dalam Tag Beberapa tag mengandung atribut di dalamnya. Contoh:

  5. <p ALIGN = “CENTER”> Pada contoh ini, P adalah tag, sedangkan ALIGN adalah atribut. Pada umumnya atribut melibatkan nilai. Pada contoh di atas, “CENTER” adalah nilai untuk atribut ALIGN. Seperti halnya nama tag, nama ALIGN juga tidak membedakan huruf kecil dan kapital. Tag <BR> Salah satu tag yang biasa digunakan dalam kode HTML yaitu <BR>. Sebagai contoh: <HTML> <HEAD> <TITLE>Tag BR</TITLE> </HEAD>

  6. <BODY> Selamat Belajar HTML<BR> Semoga Sukses! </BODY> </HTML> Fungsi tag <BR> adalah untuk membuat baris baru atau berpindah baris. Dengan demikian, setelah browser menampilkan tulisan Selamat Belajar HTML Maka browser akan menempatkan tulisan berikutnya pada baris baru.

  7. Menggunakan Tag <P> Tag <P> berguna untuk membuat paragraf. Contoh: <HTML> <HEAD> <TITLE>Contoh Paragraf</TITLE> <BODY> Musik Jaz<P> Musik Jazz banyak disukai oleh<BR> Mereka yang menyukai keindahan dan<BR> Kedinamisan bunyi.<BR> </BODY> </HTML>

  8. Menggunakan 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>Contoh Judul</TITLE> </HEAD> <BODY> <H1>Musik Jazz</H1><P> Musik Jazz banyak disukai oleh<BR> Mereka yang menyukai keindahan dan<BR> Kedinamisan bunyi.<BR> </BODY> </HTML>

  9. Contoh lain: <HTML> <HEAD <TITLE>Tag H1-H6</TITLE> </HEAD> <BODY> <H1>Tag H1</H1> <H1>Tag H1</H1> <H1>Tag H1</H1> <H1>Tag H1</H1> <H1>Tag H1</H1> <H1>Tag H1</H1> </BODY> </HTML>

  10. Sebagaimana telah dijelaskan di depan, kebanyakan tag memiliki atribut. Begitu juga halnya tag judul seperti <H1>. Salah satu atribut yang bisa digunakan adalah ALIGN, yang berfungsi untuk mengatur penempatan teks di dalam baris. Salah satu nilai yang dapat diberikan ke ALIGN adalah CENTER, yang berarti judul ditempatkan di tengah-tengah layar pada baris yang bersangkutan. Contoh: <H1 ALIGN = “CENTER”>Musik Jazz</H1> Selain CENTER, nilai lain yang dapat diisikan ke ALIGN yaitu LEFT, RIGHT, dan JUSTIFY. LEFT merupakan nilai bawaan untuk ALIGN, yang mengatur teks rata kiri terhadap halaman.

  11. RIGHT mengatur teks rata kanan terhadap halaman. JUSTIFY mengatur teks rata kiri dan rata kanan. Efeknya terlihat untuk teks yang sangat panjang. Membuat Garis Horizontal Untuk mempercantik tampilan, seringkali pembuat dokumen web menambahkan garis horizontal. Garis ini dapat dibuat dengan mudah dengan menyertakan tag <HR>. Contoh: <HTML> <HEAD> <TITLE>Tag HR</TITLE> </HEAD>

  12. <BODY> <H1>Grup Jazz:</H1> <HR> Rippingtons <HR> Spyro Gyra <HR> Fourplay <HR> Casiopea <HR> </BODY> </HTML>

  13. Menggunakan Tag <CENTER> Untuk menengahkan suatu teks, bisa digunakan tag <CENTER>. Tentu saja untuk mengakhiri penengahan teks (agar teks berikutnya tidak ditengahkan), perlu disertakan </CENTER> <HTML> <HEAD> <TITLE>Tag CENTER</TITLE> </HEAD> <BODY> <CENTER> <H2>Group Jazz Terkenal : </H2> Rippingtons <BR> Spyro Gyra <BR> Fourplay <BR> Casiopea <BR>

  14. </CENTER> ***** </BODY> </HTML> Perhatikan bahwa simbol ***** tidak ditengahkan karena sebelum teks ini terdapat tag pengakhir penengah teks </CENTER> Memformat Teks HTML menyediakan sejumlah tag yang berguna untuk mengatur bentuk teks secara fisik. Lihat tabel berikut:

  15. Daftar tag untuk mengatur teks secara fisik

  16. Contoh: <HTML> <HEAD> <TITLE>Format Teks</TITLE> </HEAD> <BODY> Normal <BR> <B>Tebal</B><BR> <BIG>Big</BIG><BR> <I>Miring</I><BR> <U>Digarisbawahi</U><BR> <I><B>Miring dan tebal</B></I><BR> X<SUB>n</SUB><SUP>2</SUP> </BODY> </HTML>

  17. Teks Praformat Contoh: <HTML> <HEAD> <TITLE>Praformat</TITLE> </HEAD> <BODY> <H1>Menu:</H1> <PRE> Nasi Goreng Spesial ........... 15.000 Nasi Rawon .................... 8.500 Nasi Gudeg Lengkap ............ 8.500 Nasi Langgi ................... 8.500 Nasi Soto Madura .............. 5.000 <PRE> Selamat menikmati. </BODY> </HTML>

  18. Pengaturan Font Tag <FONT>...</FONT> berguna untuk mengatur jenis, ukuran, maupun warna font. * Jenis Font Untuk menentukan jenis font, bisa digunakan atribut FACE. Contoh: <FONT FACE = “Arial”>ABCD</FONT> Pada contoh di atas, tulisan ABCD akan ditampilkan dengan menggunakan font Arial. Contoh:

  19. <HTML> <HEAD> <TITLE>Jenis Font</TITLE> </HEAD> <BODY> Normal: 012345ABCD<BR> <FONT FACE = “Arial”>Arial: 012345ABCD</FONT> <BR> <FONT FACE = “Lucida”>Lucida: 012345ABCD</FONT> <BR> <FONT FACE = “Courier”>Courier: 012345ABCD</FONT> <BR> <FONT FACE = “Verdana”>Verdana: 012345ABCD </FONT> <BR> </BODY> </HTML>

  20. * Ukuran Font Ukuran font ditentukan oleh atribut SIZE. Contoh: <FONT SIZE = “1”>SIZE 1: 012345ABCD </FONT> </BR> Digunakan untuk mengatur teks dg ukuran font sebesar 1. Ukuran font normal adalah 3. Ukuran font juga dapat memakai tanda + atau – di depan angka pada atribut SIZE. Contoh: <FONT SIZE = “+1”>SIZE +1: 012345ABCD </FONT> </BR> menampilkan teks dengan ukuran font lebih besar 1 daripada ukuran normal.

  21. Contoh: <HTML> <HEAD> <TITLE>Ukuran Font</TITLE> Normal: 012345ABCD<BR> <FONT SIZE=”1”>SIZE 1: 012345ABCD</FONT> <BR> <FONT SIZE=”2”>SIZE 2: 012345ABCD</FONT> <BR> <FONT SIZE=”3”>SIZE 3: 012345ABCD</FONT> <BR> <FONT SIZE=”4”>SIZE 4: 012345ABCD</FONT> <BR> <FONT SIZE=”5”>SIZE 5: 012345ABCD</FONT> <BR>

  22. <FONT SIZE=”6”>SIZE 6: 012345ABCD</FONT> <BR> <FONT SIZE=”7”>SIZE 7: 012345ABCD</FONT> <BR> <FONT SIZE=”+1”>SIZE +1: 012345ABCD</FONT> <BR> <FONT SIZE=”+2”>SIZE +2: 012345ABCD</FONT> <BR> <FONT SIZE=”-1”>SIZE -1: 012345ABCD</FONT> <BR> </BODY> </HTML> * Warna Font Atribut pada tag <FONT> yang berkaitan dengan warna teks yaitu COLOR, yang berguna untuk menentukan warna latar belakang teks.

  23. Adapun kalau warna latar belakang teks yang akan diatur, pengaturan perlu dilakukan melalui tag <BODY> dengan properti berupa BGCOLOR. Perlu juga diketahui, tag BODY juga memiliki atribut bernama TEXT yang dapat digunakan untuk mengatur warna teks pada keseluruhan tubuh dokumen. Nilai yang diberikan pada atribut COLOR, BGCOLOR, dan TEXT tersebut berupa: 1. nama warna, atau 2. nilai RGB (Red-Green-Blue) yang dinyatakan dengan “#RRGGBB”.

  24. Daftar nama warna pada atribut penentu warna

More Related