1 / 62

HTML (Hyper Text Markup Language)

HTML (Hyper Text Markup Language). Siti Mukaromah, S.Kom. Informasi di dalam www (Word Wide Web) menggunakan format HTML. Didalam HTML kita mengenal Hyper Text yaitu adanya link ke suatu dokumen, suatu alamat mesin bahkan ke suatu gambar, suara.

dalton-whitehead
Download Presentation

HTML (Hyper Text Markup Language)

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. HTML(Hyper Text Markup Language) Siti Mukaromah, S.Kom

  2. Informasi di dalam www (Word Wide Web) menggunakan format HTML. • Didalam HTML kita mengenal Hyper Text yaitu adanya link ke suatu dokumen, suatu alamat mesin bahkan ke suatu gambar, suara. • Banyak software yang digunakan untuk membuat www dengan format HTML. Yang akan kita bahas disini adalah yang paling dasar, yaitu menggunakan notepad, dimana notepad-lah software yang biasanya langsung sudah ada di komputer pada saat komputer aktif, dan notepad biasanya terletak pada accesories.

  3. Langkah Pertama • Klik notepad • Simpan file dalam suatu folder dalam format nama_file.HTML atau nama_file.htm • Kemudian jalankan dengan Internet Explorer

  4. Definisi ELEMEN • Dokumen HTML disusun oleh beberapa elemen • Elemen merupakan komponen-komponen dasar pembentuk dokumen HTML • Elemen dapat berupa teks murni, atau bukan teks, atau keduanya • Contoh elemen: head, body, table, paragraph, dan list

  5. Definisi TAG • Untuk menandai berbagai elemen dalam suatu dokumen HTML • Tag HTML terdiri atas sebuah kurung sudut kiri (<, tanda lebih kecil), sebuah nama tag, dan sebuah kurung sudut kanan (>, tanda lebih besar) • Tag umumnya berpasangan (misal <H1> dengan </H1>)

  6. Tag-tag Dasar HTML • HTML • Head • Title • Body • Paragraph • Line Break • Heading • Mengatur Letak Heading • Garis Datar • Komentar

  7. HTML • Merupakan tag dasar yang mendefinisikan bahwa dokumen ini adalah dokumen HTML. Tag ini merupakan satu keharusan bagi pemrograman web untuk menuliskannya sebagai tag pertama dalam dokumen HTML. <html> di awal dokumen dan </html> di akhir dokumen.

  8. head • Merupakan tag berikutnya setelah <html> untuk menuliskan keterangan tentang dokumen web yang akan ditampilkan. <head> di awal setelah <html>, dan </head> di akhir section head.

  9. Title • Merupakan tag di dalam head yang harus dituliskan untuk memberikan judul/informasi pada caption browser web tentang topik atau judul dari dokumen web yang ditampilkan dalam browser. <title> Judul dokumen </title>

  10. Body • Merupakan section utama dalam dokumen web. Pada section ini semua dokumen yang akan ditampilkan dalam browser harus dituliskan. <body> di awal, segera setelah tag </head> </body> di akhir, diletakkan sebelum </html>

  11. Paragraph • Informasi yang disajikan dalam dokumen harus mengikuti kaidah-kaidah dalam penulisan. Misalnya satu pikiran utama disimpan dalam satu paragraph. <p> tulisan dalam paragraph </p>

  12. Line Break • Kita dapat memaksakan ganti baris pada dikumen web (mirip dengan fungsi enter pada ms office). Namun masih dalam satu paragraph. <p> Memotong <br> baris dalam suatu <br> paragraph, gunakan tag br. </p>

  13. Heading • Heading tulisan akan ditampilkan dengan huruf yang lebih besar atau ditebalkan. • Ada 6 tingkat heading dalam HTML, dinomori 1 sampai 6. Nomor 1 adalah heading terbesar. <h1> ini adalah heading 1 </h1>

  14. Mengatur Letak Heading • Untuk mengatur letak heading dalam baris (alignment), bisa rata kiri, rata kanan, atau tengah. • <align> </align> <h1 align=“right”> heading 1 rata kanan </h1>

  15. Garis Datar • Sebuah garis dapat disisipkan dalam dokumen web, umumnya digunakan sebagai pemisah antar bagian atau paragraf. <p> Ini adalah paragraf pertama </p> <hr> <p> Ini adalah paragraf kedua </p>

  16. Contoh html dasar <html> <head> <title> Judul Halaman</title> </head> <body> Ini adalah homepage pertamaku. <b> Ini adalah teks tebal </b> </body> </html>

  17. Hasilnya

  18. Format Teks HTML • Pemformatan Teks • Teks Preformat • Arah Teks • dll

  19. Pemformatan Teks Beberapa pemformatan teks: • Huruf tebal <b> </b> • Huruf miring <i></i> • Superscript <sup></sup> • Subscript <sub></sub>

  20. Teks Preformat • Jarak antar kata suatu teks atau kalimat dalam dokumen web adalah satu spasi. Agar browser web menampilkan sesuai dengan dokumen web tersebut dalam editor teks, maka harus diberi tag <pre></pre>

  21. Contoh teks preformat

  22. Hasil teks preformat

  23. Arah Teks • Cara penulisan teks dapat diubah dari kiri ke kanan menjadi dari kanan ke kiri. • Tag <bdo> - bidirectional override.

  24. Contoh mengubah arah teks

  25. Hasil mengubah arah teks

  26. Link HTML – Tag Anchor • HTML menggunakan tag <a> untuk membuat link pada dokumen lain dalam web. Atribut href digunakan untuk mendefinisikan lokasi link. <a href="http://www.google.com"> Teks ini yang akan ditampilkan </a>

  27. List HTML • Ordered List • Unordered List • Nested List

  28. Ordered List • Nomor item secara default adalah secara ascending atau secara urut, misal 1,2,3,..., dst. • Tag yang digunakan adalah <ol> • Berikut adalah nilai-nilai yang dapat digunakan untuk mengubah penomoran dalam ordered list:

  29. Contoh Ordered List

  30. Hasil Ordered List

  31. Unordered List • Unordered list sering disebut sebagai bulleted list. • Untuk mengubah jenis bullet dapat didefinisikan pada atribut type pada tag <ul>. • Contoh mengubah jenis bullet menjadi kotak: <ul type=“box”>...</ul>

  32. Contoh Unordered List

  33. Hasil Unordered List

  34. Nested List • Bullet dapat digunakan secara bersarang, maksudnya di dalam list ada list lg. • Contoh nested List:

  35. Hasil Nested List

  36. Table HTML

  37. Perintah – perintah Dasar HTML • <H1> sampai <H6> <H1> </H1> font ukuran besar <H2> </H2> .... .... <H6> </H6> font semakin kecil

  38. <HR> Fungsi: perintah untuk membuat garis horisontal penuh layar. contoh:

  39. <I> Fungsi: membuat teks miring • <B> Fungsi: membuat teks tebal • <U> Fungsi: membuat teks bergaris bawah • <CENTER> Fungsi: membuat teks ke tengah layar

  40. 7. <ALIGN> Fungsi: Membuat text reta kiri dan rata kanan Sintak: <P ALIGN=right>untuk rata kanan <P ALIGN=left> untuk ratakiri <P ALIGN=center> untuk rata tengah <P ALIGN=justify> untuk rata kiri dan rata kanan Atau <H? ALIGN=right>untuk rata kanan < H? ALIGN=left> untuk ratakiri < H? ALIGN=center> untuk rata tengah < H? ALIGN=justify> untuk rata kiri dan rata kanan Contoh pemakaian: <H2 Align=right>Selamat Datang di Website Kami</H2>

  41. 8. <BR> Fungsi: memasukkan fungsi enter Contoh: Jika perintah <BR> diberikan di awal atau di akhir baris, maka kalimat berikutnya akan dicetak pada baris berikutnya. 9. <!> Fungsi: membuat komentar Semua teks atau perintah yang diapit oleh perintah ini tidak akan dijalankan

  42. 10. <P> Fungsi: memisahkan paragraph yang satu dengan paragraph yang lain 11. <DD> Fungsi: membuat teks atau sebuah paragraph agak masuk ke dalam 12. <BASEFONT> Fungsi: Mengubah ukuran font Contoh: <BASEFONT SIZE=6> WELCOME TO MY WEBSITE <B> WELCOME TO MY WEBSITE DAN TEBAL</B>

  43. 13. <FONT> Fungsi: mengubah ukuran font, tetapi angka yang terdapat dalam size yang merupakan ukuran font harus diberi tanda kutip 14. <FACE> Fungsi: mengubah jenis font 15. <SUP> Fungsi: membuat cetak naik suatu teks Contoh: Kami adalah yang pertama: 1st in the world

  44. 16. <SUB> Fungsi: membuat cetak naik suatu teks Contoh: teks cetak turun H2O (disebut air) dan C2127No (disebut Methadon) 17. <UL> atau Unorder List Fungsi: membuat bullet

  45. 18. <LI> • Fungsi: juga untuk membuat bullet • Catatan: perintah <LI> harus berada dalam perintah OL, UL, DIR, Menu • Contoh: • <UL> • <LI> • <H2> Jawa Timur </H2> • <UL> • <LI> Surabaya </LI> • <LI> MALANG </LI> • <LI> GRESIK </LI> • </UL> • </LI> • </BR> • <LI> • <H2> Jawa Barat </H2> • <UL> • <LI> Bandung </LI> • < LI> Sukabumi </LI> • <LI> Bogor </LI> • </UL> • </LI> • </UL>

  46. 19. <IMGSRC> Fungsi: memasukkan gambar ke dalam Website Anda dapat juga memasukkan gambar berakhiran *.Jpg, *.Gif, *.Bmp, dll Sintak: <IMG BORDER=”5”> “5” merupakan ukuran border (bingkai), ganti angka ini sesuai keinginan Anda 20. <BGSOUND> Fungsi: memasukkan suara atau musik ke dalam Website Sintak: <BGSOUND loop=infite Src=”d:/Selamat datang.WAV”>

  47. Link dengan sorot • Berikut ini adalah contoh program bagaimana membuat link hanya dengan sorot saja (link tidak perlu diklik, tetapi cukup disorot dengan mouse).

  48. <HTML> <HEAD> <TITLE> </TITLE> <META Name=”description”Content=” ”> <META Name=”keywords”Content=” ”> <META Name=”generator”Content=” ”> </HEAD> <BODY BG Color=“#FFFFFF”Text=”#000000” =”#0000FF” VLink=”#800080”> <Center> <A href=” ”target=main on mouse over=”Window.open(‘c:/html/keterangan.html’):”> <Font Size=3 FACE=Arial Color=#804000> Keterangan </FONT> </e> </CENTER> </BODY> </HTML>

  49. Link dengan tombol: Berikut adalah contoh program link dengan tombol Sintak: <Input type=”button”Value=”Nama Tombol” On Click=”parent.location=”Link Anda disini”> Contoh: Buatlah link dengan nama: About.html Produk_Kami.html Cara_Memesan.html

More Related