html hyper text markup language n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
HTML (Hyper Text Markup Language) PowerPoint Presentation
Download Presentation
HTML (Hyper Text Markup Language)

Loading in 2 Seconds...

play fullscreen
1 / 62
dalton-whitehead

HTML (Hyper Text Markup Language) - PowerPoint PPT Presentation

160 Views
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. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - - 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