3 pemrograman internet html (1)
1 like446 views
Dokumen ini adalah panduan dasar mengenai HTML yang mencakup cara menulis kode dasar, struktur utama dokumen HTML, serta cara memformat teks dan menambahkan gambar. HTML didefinisikan sebagai bahasa yang menggambarkan bagaimana konten sebuah halaman web ditampilkan di browser. Panduan ini juga mencakup beberapa tips praktis dan alat bantu yang dapat digunakan untuk membuat situs web.
3 pemrograman internet html (1)
- 1. HyperTextMarkupLanguage sesi 1 HTML
- 2. Toni Tegar Sahidi tonitegarsahidi@gmail.com STT Stikma Internasional, Malang
- 4. HTML adalah “bahasa” yang mendefinisikan bagaimana sebuah web ditampilkan di layar browser
- 5. Ketikkan Kode di bawah ini <html> <head> <title>Lihat aku di tittlebar browser</title> </head> <body> Aku adalah konten dan aku berada di kotak utama web browser. </body> </html>
- 6. HTML OVERVIEW #1 Menulis kode HTML #2 Price... eh HTML Tag! #3 Komponen Utama HTML #4 Memformat Teks dengan HTML #5 Utak-atik Gambar dengan HTML
- 7. #1 MENULIS KODE HTML 1/6
- 8. :: praktek :: Buka Text Editor 'Kesayangan' Anda (Notepad, Kwrite, Vim, Emacs)
- 10. simpan dengan nama coba.html, Opsi pilihan penyimpanan ganti dari Text Files menjadi All Files.
- 11. Ganti jadi All Files Isi dengan sebuahnama, dibelakangnya kasih .html Notepad di Windows
- 12. buka file manager (misal Windows Explorer), lalu buka file coba.html yang telah Anda buat tersebut
- 13. Akan terbuka Web Browser menampilkan file coba.html
- 15. MEMBUAT WEBSITE TIDAK HARUS MEMAKAI DREAMWEAVER!
- 16. DREAMWEAVER, CODELOBSTER, EPIPHANY, NETBEANS, KATE, DLL HANYALAH TOOL UNTUK MEMPERMUDAH!
- 17. versus
- 18. #2 PRICE, EH.. HTML TAGS! 2/5
- 19. Setiap kode HTML berbentuk sebuah tag
- 20. Tag selalu diapit dengan tanda < dan > contoh <html> , <body>, dll
- 21. Pada umumnya, tag bersifat berpasangan, ada tag pembuka, dan ada tag penutup
- 22. Tag pembuka diapit tanda < dan > contoh <title> sedangkan Tag penutup diapit tanda </ dan > contoh </title>
- 23. Contoh <title>Lihat aku di tittlebar browser</title>
- 24. Namun beberapa tag, hanya satu jenis saja (tak ada tag pembuka & penutup) contoh <br />
- 25. #3 KOMPONEN UTAMA HTML 3/5
- 26. <html> <head> <title>Lihat aku di tittlebar browser</title> </head> <body> Aku adalah konten dan aku berada di kotak utama web browser. </body> </html>
- 27. mulai dengan <html> dan akhiri dengan </html>
- 28. <html> <head> <title>Lihat aku di tittlebar browser</title> </head> <body> Aku adalah konten dan aku berada di kotak utama web browser. </body> </html>
- 29. <head></head>
- 30. wadah / Kontainer untuk semua element head. Element head dapat berupa title, script, link CSS, informasi meta, dll.
- 31. <body></body>
- 32. Mendefinisikan badan(body) dari dokumen. tempat semua konten dari dokumen HTML, seperti teks, image, links, dlsb.
- 33. tempat mendefinisikan Background dari halaman
- 34. <html> <head> <title>mencoba lebih keren lagi...</title> </head> <body bgcolor="#a340f4"> halooo..... </body> </html>
- 37. #a340f4 adalah warna heksadesimal
- 38. Warna heksadesimal paling rendah adalah #000000 dan tertinggi adalah #ffffff
- 40. selain background warna, body juga bisa diberikan background gambar...
- 42. #4 MEMFORMAT TEKS DENGAN HTML 4/5
- 43. Heading untuk sesuatu yang lebih BESAR
- 44. Tulis kode berikut diantara tag <body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6>
- 47. mari coba tags berikut ini
- 48. try these! <b>saya tebal</b> <i>saya miring</i> <u>saya garis bawah</u>
- 49. and these! <font size="3" color="red">This is some text!</font> <font size="2" color="blue">This is some text!</font> <font face="verdana" color="green">This is some text!</font>
- 50. #5 UTAK ATIK GAMBAR DENGAN HTML 5/5
- 51. Cari gambar apapun, simpan di folder yang sama dengan file coba.html. Misal file gambar 'kucing.jpg'
- 53. Tulis kode berikut diantara tag <body> <img src="kucing.jpg" alt="kucing imut" height="200" width="180">
- 55. tag <img>
- 56. mendefinisikan gambar dalam halaman web.
- 57. 2 parameter yang wajib ada.... src & alt.
- 58. 2 parameter yang wajib ada.... src & alt.
- 59. src mendefinisikan sumber gambar
- 60. gambar tidak masuk kedalam kode tapi dihubungkan (linked) ke dalam halaman web.
- 61. tag <img> hanya memberikan sebuah space, tempat untuk image tersebut dimunculkan.
- 62. 2 parameter yang wajib ada.... src & alt.
- 63. alt mendefinisikan apa yang ditampilkan jika gambar gagal dimuat
- 64. misal gambar kucing tadi kehapus...
- 67. next session HTML Link HTML Table HTML Paragraph CSS