Download to read offline
Uploaded byYUSRA FERNANDO
Chapter 1 introduction html (shared)
Dokumen ini adalah pengantar untuk pengembangan web yang ditulis oleh Yusra Fernando, S.Kom., M.Kom., di Universitas Teknokrat Indonesia. Ia menjelaskan konsep dasar web, termasuk struktur HTML, istilah-istilah penting, serta cara membuat dan memformat halaman web. Selain itu, dokumen ini mencakup penjelasan tentang web statis dan dinamis serta elemen yang digunakan dalam desain web.
Chapter 1 introduction html (shared)
- 1.
- 2. PROFIL Nama : YusraFernando, S.Kom., M.Kom. Pendidikan : S1, Teknik Informatika/(Ti) (Teknokrat 2004) S2, Ilmu Komputer/(Cs) (IPB 2012) Email : yusra.fernando@teknokrat.ac.id yusra.fernando@teknokrat.ac.id Yusra Fernando, M.Kom CONTACT ME 2
- 3. INTRODUCTION TO WEBDEVELOPMENT UNIVERSITAS TEKNOKRAT INDONESIA FAKULTAS TEKNIK DAN ILMU KOMPUTER YUSRA FERNANDO, S.KOM., M.KOM by: 3
- 4. TUJUANBELAJAR? • Dapat membuat/mengembangkanberbagai program/aplikasi berbasis Web mulai dari membuat Website sederhana sampai dengan Website dinamis. 4
- 5. WORLD WIDEWEB(WWW) • Biasadisebut dengan Web saja. • Layanan Internet yang memungkinkan pengaksesan dan pengolahan informasi melalui pendekatan hypertext. • Menggunakan protokol yang disebut HTTP (HyperText Transport Protocol) yang berjalan pada TCP/IP. 5
- 6. WORLDWIDEWEB(WWW) Dokumen web ditulisdalam format HTML (HyperText Markup Language) yang diletakkan dalam web server dan diakses oleh client melalui browser. Internet Browser HTML ` Client Web Server 6
- 7. ISTILAH-ISTILAHPADAWEB • Halaman web(web page) Halaman yang digunakan untuk menampilkan informasi-informasi yang terdapat di web. • Situs web (web site) Sekumpulan halaman web milik seseorang, perusahaan atau instansi yang dikumpulkan dan diletakkan dalam web server. • Homepage Istilah untuk menyebut halaman pertama yang akan muncul jika sebuah situs web diakses. 7
- 8. ISTILAH-ISTILAHPADAWEB • Hyperlink atauLink adalah penghubung antar halaman web. • URL (Uniform Resource Locator) adalah alamat suatu dokumen atau situs web yang bersifat unik dan khas, contoh : • http://www.ilmukomputer.com • http://64.233.167.99 • http://www.lampung.go.id/profil/sejarah.php 8
- 9. WEBBROWSER • Biasa disebutdengan browser saja. • Adalah sebuah program yang digunakan untuk menampilkan halaman web. • Contoh browser : • Internet Explorer • Netscape • Opera • Mozilla • Firefox • dll. 9
- 10.
- 11.
- 12. WEBSTATIS • Dibentuk denganmenggunakan HTML saja. • Kekurangan aplikasi ini terletak pada keharusan untuk memelihara program secara terus-menerus untuk mengikuti setiap perubahan yang terjadi. 12
- 13. WEB STATIS Browser Kode HTML ` Client WebServer Permintaan (Request) HTTP Tanggapan (Response) HTTP 13
- 14. WEB DINAMIS • Tidakhanya dibentuk dengan menggunakan HTML saja tetapi menggunakan perangkat lunak tambahan (middleware). • Perubahan informasi dalam halaman-halaman web dapat ditangani melalui perubahan data, bukan melalui perubahan program. 14
- 15. WEBDINAMIS Browser Kode HTML ` Client Permintaan (Request) HTTP Tanggapan(Response) HTTP Web Server (Apache, IIS, dsb) Database (MySQL, Oracle, dsb) Middleware (PHP, ASP, dsb) Server 15
- 16. HTML (Hypertext MarkupLanguages) UNIVERSITAS TEKNOKRAT INDONESIA FAKULTAS TEKNIK DAN ILMU KOMPUTER YUSRA FERNANDO, S.KOM., M.KOM by: 16
- 17. PENGENALANHTML • Merupakan bahasastandard yang digunakan untuk membuat dokumen web . • Yang bisa dilakukan dengan HTML adalah : • Mengontrol tampilan dari halaman web dan content-nya. • Membuat online form yang bisa di gunakan untuk menangani pendaftaran dan transaksi secara online. • Menambahkan objek-objek seperti gambar, audio, video, animasi dan juga java applet dalam dokumen HTML. 17
- 18. TAG • Tag adalahkode-kode yang digunakan untuk men-setting dokumen web. • Nama tag ditulis di dalam tanda “<” dan “>” dan untuk tag penutup ditambahkan tanda “/”. • Boleh ditulis dengan huruf besar maupun kecil. • Digunakan sepasang, contoh : <form> dan </form>. • Ada tag yang tidak perlu ditutup, contoh : <br>, <hr>, <img>, dll. 18
- 19. STRUKTUR DASARDOKUMENHTML <html> <head> <title> ...</title> </head> <body> ... </body> </html> 19
- 20. STRUKTUR DASAR DOKUMENHTML • Tag <html>…</html> berfungsi untuk menyatakan bahwa dokumen tersebut adalah dokumen HTML. • Tag <head>…</head> berisi kode-kode untuk menuliskan keterangan/informasi tentang dokumen HTML tersebut. • Tag <title>…</title> digunakan untuk membuat judul halaman Web (web page). • Tag <body>…</body> berisi tag-tag untuk isi atau layout tampilan halaman web. 20
- 21. STRUKTUR DASAR DOKUMENHTML • Penulikan kode HTML : • Secara langsung, misal pada editor Notepad atau EditPlus. • Secara tidak langsung, misal pada Macromedia Dreamweaver atau Microsoft FrontPage. • Dokumen HTML harus disimpan dengan ekstensi “.htm” atau “.html”. 21
- 22. STRUKTURDASAR DOKUMENHTML Contoh : <html> <head> <title>TeknokratOnline</title> </head> <body> UNIVERSITAS TEKNOKRAT INDONESIA </body> </html> 22
- 23. BERPINDAH KEBARIS BERIKUTNYA Digunakantag <br>, contoh penggunaan : <html> <head> <title>:: Teknokrat Online ::</title> </head> <body> UNIVERSITAS<br> TEKNOKRAT<br> INDONESIA </body> </html> 23
- 24. MENGATURPELETAKKAN TEKS • Digunakantag <div> dan atribut align. • Nilai yang dapat disikan adalah sebagai berikut : • Left, untuk mengatur teks rata kiri terhadap halaman. • Center, untuk mengatur teks diletakkan di tengah-tengah halaman. • Right, untuk mengatur teks rata kanan terhadap halaman • Justify, untuk mengatur teks rata kiri dan rata kanan terhadap halaman. 24
- 25. MENGATURPELETAKKAN TEKS • Contohpenggunaan : <html> <head> <title>:: Teknokrat Online ::</title> </head> <body> <div align="center"> UNIVERSITAS<br> TEKNOKRAT<br> INDONESIA </div> </body> </html> 25
- 26. MENGATURFONT • Untuk mengaturjenis, ukuran, maupun warna font digunakan pasangan tag <font>…</font>. 26
- 27. MENGATURJENIS FONT • Digunakanatribut face. • Jenis huruf standar yang digunakan pada Web adalah : • Times New Roman • Verdana • Arial • Helvetica • Sans-serif. 27
- 28. MENGATURJENISFONT • Contoh penggunaan: <html> <head> <title>:: Teknokrat Online ::</title> </head> <body> <div align="center"> <font face="arial">UNIVERSITAS</font><br> <font face="verdana">TEKNOKRAT</font><br> <font face="arial">INDONESIA</font> </div> </body> </html> 28
- 29. MENGATURUKURAN FONT Digunakan atributsize. Contoh penggunaan : ...... <div align="center"> <font face="arial" size="6">UNIVERSITAS</font> <br> <font face="verdana" size="7">TEKNOKRAT</font> <br> <font face="arial" size="5">INDONESIA</font> </div> ...... 29
- 30. MENGATURWARNAFONT • Digunakan atributcolor. • Nilai yang diberikan pada atribut color tersebut dapat berupa : 1. Nama warna dalam bahasa inggris. Contoh : “red”, “blue”, dll. 2. Nilai RGB (Red-Green-Blue) yang dinyatakan dengan “#RRGGBB”. Contoh : “#CC66AA”, “#FF1144”, dll. 30
- 31. MENGATURWARNAFONT • Contoh namawarna dan nilai RGB-nya : • Black = “#000000” • Silver = “#C0C0C0” • Gray = “#808080” • White = “#FFFFFF” • Maroon = “#800000” • Red = “#FF0000” • Purple = “#800080” 31
- 32. MENGATURWARNAFONT • Contoh penggunaan: ...... <div align="center"> <font face="arial" size="6" color="blue"> UNIVERISTAS </font> <br> <font face="verdana" size="7" color="#CC3300"> TEKNOKRAT </font> <br> <font face="arial" size="5"> INDONESIA </font> </div> ...... 32
- 33. MENGATUR WARNA LATARBELAKANG Digunakan atribut bgcolor pada tag <body>, contoh penggunaan : ...... <body bgcolor="#FFFF99"> ...... 33
- 34. MEMFORMATTEKS • Tag <b>atau <strong> agar text ditampilkan dalam keadaan ditebalkan. • Tag <i> atau <em> agar teks ditampilkan dalam keadaan miring. 34
- 35. MEMFORMATTEKS • Contoh penggunaan: ...... <div align="center"> <font face="arial" size="6" color="blue"> <b>UNIVERISTAS</b> </font><br> <font face="verdana" size="7" color="#CC3300"> <b>TEKNOKRAT</b> </font><br> <font face="arial" size="5"> <b><i>INDONESIA</i></b> </font> </div> ...... 35
- 36. MEMBUAT GARISHORIZONTAL • Digunakantag <hr>. • Atribut-atribut pada tag <hr> adalah : • size : untuk menentukan ketebalan garis. • width : untuk menentukan lebar garis. • align : untuk mengatur peletekan garis pada halaman web. • color : untuk menentukan warna garis. • noshade : untuk mengatur agar garis tidak disertai bayangan. 36
- 37. MEMBUAT GARISHORIZONTAL • Contohpenggunaan : ...... <br> <hr color="#000000"> <font face="verdana" color="blue"> Selamat Datang di Website Universitas Teknokrat Indonesia </font> <hr color="#000000"> ...... 37
- 38. MEMBUAT ANIMASI TEKSBERJALAN Digunakanpasangan tag <marquee>…</marquee>. Contoh penggunaan : ...... <hr color="#000000"> <font face="verdana" size="2" color="blue"> <marquee>Selamat Datang di Website Universitas Teknokrat Indonesia</marquee> </font> <hr color="#000000"> ...... 38
- 39. MEMBUAT ANIMASI TEKSBERJALAN •Untuk mengubah arah pergerakkan teks, digunakan atribut direction. • Nilai atribut direction : • Right, teks berjalan dari kiri ke kanan. • Up, teks berjalan dari bawah ke atas. • Down, teks berjalan dari atas ke bawah. 39
- 40. MEMBUAT ANIMASI TEKSBERJALAN •Contoh penggunaan : ...... <hr color="#000000"> <font face="verdana" size="2" color="blue"> <marquee direction="right"> <b>Selamat Datang di Website Universitas Teknokrat Indonesia</b> </marquee> </font> <hr color="#000000"> ...... 40
- 41. MEMBUAT ANIMASI TEKSBERJALAN Atributbehavior dengan nilai alternate dapat digunakan jika ingin arah teks bolak-balik dari kanan ke kiri dan sebaliknya, contoh penggunaan : ...... <hr color="#000000"> <font face="verdana" size="2" color="blue"> <marquee behavior="alternate"> <b>Selamat Datang di Website Universitas Teknokrat Indonesia</b> </marquee> </font> <hr color="#000000"> ...... 41
- 42. MEMBUAT ANIMASI TEKSBERJALAN Jikaingin mengatur warna latar belakang teks yang dibuat animasi, digunakan atribut bgcolor, contoh penggunaan : ...... <hr color="#000000"> <font face="verdana" size="2" color="white"> <marquee behavior="alternate" bgcolor="blue"> <b>Selamat Datang di Website Universitas Teknokrat Indonesia</b> </marquee> </font> <hr color="#000000"> ...... 42
- 43. TERIMAKASIH ... UNIVERSITAS TEKNOKRATINDONESIA FAKULTAS TEKNIK DAN ILMU KOMPUTER YUSRA FERNANDO, S.KOM., M.KOM oleh : 43