Chapter 1 introduction html (shared)

2. PROFIL Nama : Yusra Fernando, 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 WEB DEVELOPMENT UNIVERSITAS TEKNOKRAT INDONESIA FAKULTAS TEKNIK DAN ILMU KOMPUTER YUSRA FERNANDO, S.KOM., M.KOM by: 3

4. TUJUANBELAJAR? • Dapat membuat/mengembangkan berbagai program/aplikasi berbasis Web mulai dari membuat Website sederhana sampai dengan Website dinamis. 4

5. WORLD WIDEWEB(WWW) • Biasa disebut 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 ditulis dalam 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 atau Link 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 disebut dengan browser saja. • Adalah sebuah program yang digunakan untuk menampilkan halaman web. • Contoh browser : • Internet Explorer • Netscape • Opera • Mozilla • Firefox • dll. 9

10. WEB BROWSER 10

11. APLIKASIWEB •Web Statis •Web Dinamis 11

12. WEBSTATIS • Dibentuk dengan menggunakan 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 Web Server Permintaan (Request) HTTP Tanggapan (Response) HTTP 13

14. WEB DINAMIS • Tidak hanya 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 Markup Languages) UNIVERSITAS TEKNOKRAT INDONESIA FAKULTAS TEKNIK DAN ILMU KOMPUTER YUSRA FERNANDO, S.KOM., M.KOM by: 16

17. PENGENALANHTML • Merupakan bahasa standard 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 adalah kode-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 : , <hr>, <img>, dll. 18

19. STRUKTUR DASARDOKUMENHTML <html> <head> <title> ... </title> </head> <body> ... </body> </html> 19

20. STRUKTUR DASAR DOKUMEN HTML • 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 DOKUMEN HTML • 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>Teknokrat Online</title> </head> <body> UNIVERSITAS TEKNOKRAT INDONESIA </body> </html> 22

23. BERPINDAH KEBARIS BERIKUTNYA Digunakan tag , contoh penggunaan : <html> <head> <title>:: Teknokrat Online ::</title> </head> <body> UNIVERSITAS TEKNOKRAT INDONESIA </body> </html> 23

24. MENGATURPELETAKKAN TEKS • Digunakan tag <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 • Contoh penggunaan : <html> <head> <title>:: Teknokrat Online ::</title> </head> <body> <div align="center"> UNIVERSITAS TEKNOKRAT INDONESIA </div> </body> </html> 25

26. MENGATURFONT • Untuk mengatur jenis, ukuran, maupun warna font digunakan pasangan tag …. 26

27. MENGATURJENIS FONT • Digunakan atribut 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"> UNIVERSITAS TEKNOKRAT INDONESIA </div> </body> </html> 28

29. MENGATURUKURAN FONT Digunakan atribut size. Contoh penggunaan : ...... <div align="center"> UNIVERSITAS TEKNOKRAT INDONESIA </div> ...... 29

30. MENGATURWARNAFONT • Digunakan atribut color. • 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 nama warna 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"> UNIVERISTAS TEKNOKRAT INDONESIA </div> ...... 32

33. MENGATUR WARNA LATAR BELAKANG Digunakan atribut bgcolor pada tag <body>, contoh penggunaan : ...... <body bgcolor="#FFFF99"> ...... 33

34. MEMFORMATTEKS • Tag atau agar text ditampilkan dalam keadaan ditebalkan. • Tag atau agar teks ditampilkan dalam keadaan miring. 34

35. MEMFORMATTEKS • Contoh penggunaan : ...... <div align="center"> UNIVERISTAS TEKNOKRAT INDONESIA </div> ...... 35

36. MEMBUAT GARISHORIZONTAL • Digunakan tag <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 • Contoh penggunaan : ...... <hr color="#000000"> Selamat Datang di Website Universitas Teknokrat Indonesia <hr color="#000000"> ...... 37

38. MEMBUAT ANIMASI TEKSBERJALAN Digunakan pasangan tag <marquee>…</marquee>. Contoh penggunaan : ...... <hr color="#000000"> <marquee>Selamat Datang di Website Universitas Teknokrat Indonesia</marquee> <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"> <marquee direction="right"> Selamat Datang di Website Universitas Teknokrat Indonesia </marquee> <hr color="#000000"> ...... 40

41. MEMBUAT ANIMASI TEKSBERJALAN Atribut behavior dengan nilai alternate dapat digunakan jika ingin arah teks bolak-balik dari kanan ke kiri dan sebaliknya, contoh penggunaan : ...... <hr color="#000000"> <marquee behavior="alternate"> Selamat Datang di Website Universitas Teknokrat Indonesia </marquee> <hr color="#000000"> ...... 41

42. MEMBUAT ANIMASI TEKSBERJALAN Jika ingin mengatur warna latar belakang teks yang dibuat animasi, digunakan atribut bgcolor, contoh penggunaan : ...... <hr color="#000000"> <marquee behavior="alternate" bgcolor="blue"> Selamat Datang di Website Universitas Teknokrat Indonesia </marquee> <hr color="#000000"> ...... 42

43. TERIMAKASIH ... UNIVERSITAS TEKNOKRAT INDONESIA FAKULTAS TEKNIK DAN ILMU KOMPUTER YUSRA FERNANDO, S.KOM., M.KOM oleh : 43

Chapter 1 introduction html (shared)

Du liest eine Vorschau.

Hier ansehen

Chapter 1 introduction html (shared)

Weitere Verwandte Inhalte

Ähnlich wie Chapter 1 introduction html (shared) (20)

Weitere von YUSRA FERNANDO (20)

Aktuellste (20)

Chapter 1 introduction html (shared)