pemrograman internet - html (1)
DESCRIPTION
Slide Pemrograman Internet (Pembukaan) membahas tentang Pengenalan HTML dan tag-tag dasarTRANSCRIPT
![Page 1: Pemrograman Internet - HTML (1)](https://reader034.vdocuments.net/reader034/viewer/2022042521/559569c61a28ab292c8b466d/html5/thumbnails/1.jpg)
HTML (1)
Praktikum Pemrograman Internet
Oleh : Arifin (101401024)
S1 Ilmu Komputer USU
![Page 2: Pemrograman Internet - HTML (1)](https://reader034.vdocuments.net/reader034/viewer/2022042521/559569c61a28ab292c8b466d/html5/thumbnails/2.jpg)
Sekilas sejarah Internet.
![Page 3: Pemrograman Internet - HTML (1)](https://reader034.vdocuments.net/reader034/viewer/2022042521/559569c61a28ab292c8b466d/html5/thumbnails/3.jpg)
Awalnya internet dikembangkan oleh akademisi dan militer Amerika Serikat pada tahun 1969
melalui proyek ARPA yang disebut ARPANET. ARPANET secara umum dikenalkan pada tahun
1972.
![Page 4: Pemrograman Internet - HTML (1)](https://reader034.vdocuments.net/reader034/viewer/2022042521/559569c61a28ab292c8b466d/html5/thumbnails/4.jpg)
Web, set aplikasi yang dapat diakses melalui browser.
![Page 5: Pemrograman Internet - HTML (1)](https://reader034.vdocuments.net/reader034/viewer/2022042521/559569c61a28ab292c8b466d/html5/thumbnails/5.jpg)
![Page 6: Pemrograman Internet - HTML (1)](https://reader034.vdocuments.net/reader034/viewer/2022042521/559569c61a28ab292c8b466d/html5/thumbnails/6.jpg)
![Page 7: Pemrograman Internet - HTML (1)](https://reader034.vdocuments.net/reader034/viewer/2022042521/559569c61a28ab292c8b466d/html5/thumbnails/7.jpg)
Apa itu HTML?
![Page 8: Pemrograman Internet - HTML (1)](https://reader034.vdocuments.net/reader034/viewer/2022042521/559569c61a28ab292c8b466d/html5/thumbnails/8.jpg)
HTML dikembangkan oleh W3C (World Wide Web Consortium)
![Page 9: Pemrograman Internet - HTML (1)](https://reader034.vdocuments.net/reader034/viewer/2022042521/559569c61a28ab292c8b466d/html5/thumbnails/9.jpg)
HTML (Hyper Text Markup Language) adalah sebuah bahasa yang dikembangkan oleh W3C
sebagai standar penulisan dokumen web.
![Page 10: Pemrograman Internet - HTML (1)](https://reader034.vdocuments.net/reader034/viewer/2022042521/559569c61a28ab292c8b466d/html5/thumbnails/10.jpg)
DASAR HTML
![Page 11: Pemrograman Internet - HTML (1)](https://reader034.vdocuments.net/reader034/viewer/2022042521/559569c61a28ab292c8b466d/html5/thumbnails/11.jpg)
TAG HTML
● HTML tersusun atas tag-tag.
Contoh:
<html> … <body> … </body>
</html>
![Page 12: Pemrograman Internet - HTML (1)](https://reader034.vdocuments.net/reader034/viewer/2022042521/559569c61a28ab292c8b466d/html5/thumbnails/12.jpg)
Percobaan 1
● Tulislah kode berikut di dalam text editor (Notepad atau Notepad++) kemudian simpan dalam format .htm atau .html
![Page 13: Pemrograman Internet - HTML (1)](https://reader034.vdocuments.net/reader034/viewer/2022042521/559569c61a28ab292c8b466d/html5/thumbnails/13.jpg)
STRUKTUR HALAMAN HTML
![Page 14: Pemrograman Internet - HTML (1)](https://reader034.vdocuments.net/reader034/viewer/2022042521/559569c61a28ab292c8b466d/html5/thumbnails/14.jpg)
Tag <head>
● Tag Head berisi informasi general dari sebuah halaman HTML.
Tag yang biasanya ada di dalam tag head:● <title>
mendefinisikan judul halaman web.● <link>
menghubungkan file tersebut ke file lain. (contoh: css atau layout html.)
![Page 15: Pemrograman Internet - HTML (1)](https://reader034.vdocuments.net/reader034/viewer/2022042521/559569c61a28ab292c8b466d/html5/thumbnails/15.jpg)
Tag <body>
● Tag body mendefinisikan tubuh / isi dari dokumen HTML.
● Mulai dari paragraf, gambar-gambar, data-data, dsb yang menyangkut isi halaman web.
![Page 16: Pemrograman Internet - HTML (1)](https://reader034.vdocuments.net/reader034/viewer/2022042521/559569c61a28ab292c8b466d/html5/thumbnails/16.jpg)
BEBERAPA TAG DASAR HTML
![Page 17: Pemrograman Internet - HTML (1)](https://reader034.vdocuments.net/reader034/viewer/2022042521/559569c61a28ab292c8b466d/html5/thumbnails/17.jpg)
HTML HEADINGS
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
![Page 18: Pemrograman Internet - HTML (1)](https://reader034.vdocuments.net/reader034/viewer/2022042521/559569c61a28ab292c8b466d/html5/thumbnails/18.jpg)
HTML Paragraph
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
Note:● Untuk melakukan pindah baris tulisan
pada halaman HTML, gunakan tag <br />
![Page 19: Pemrograman Internet - HTML (1)](https://reader034.vdocuments.net/reader034/viewer/2022042521/559569c61a28ab292c8b466d/html5/thumbnails/19.jpg)
HTML LINKS
Link yang jika di-klik, maka akan membuka halaman web lain.
<a href="http://iklcusu.blogspot.com">
This is a link</a>
![Page 20: Pemrograman Internet - HTML (1)](https://reader034.vdocuments.net/reader034/viewer/2022042521/559569c61a28ab292c8b466d/html5/thumbnails/20.jpg)
HTML Images
Untuk menampilkan gambar pada halaman web
<img src="light.jpg" width="104" height="142" />
![Page 21: Pemrograman Internet - HTML (1)](https://reader034.vdocuments.net/reader034/viewer/2022042521/559569c61a28ab292c8b466d/html5/thumbnails/21.jpg)
HTML Lists
● Ada 2 jenis HTML List:
– Ordered List
– Unordered List
● Contoh Ordered List
1) Nyalakan Komputer
2) Klik DashHome
3) Ketik Geany
● Contoh Unordered List
– Teh
– Susu
– Kopi
![Page 22: Pemrograman Internet - HTML (1)](https://reader034.vdocuments.net/reader034/viewer/2022042521/559569c61a28ab292c8b466d/html5/thumbnails/22.jpg)
Penulisan Ordered List
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
![Page 23: Pemrograman Internet - HTML (1)](https://reader034.vdocuments.net/reader034/viewer/2022042521/559569c61a28ab292c8b466d/html5/thumbnails/23.jpg)
Penulisan Unordered List
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
![Page 24: Pemrograman Internet - HTML (1)](https://reader034.vdocuments.net/reader034/viewer/2022042521/559569c61a28ab292c8b466d/html5/thumbnails/24.jpg)
KERJAKAN!
![Page 25: Pemrograman Internet - HTML (1)](https://reader034.vdocuments.net/reader034/viewer/2022042521/559569c61a28ab292c8b466d/html5/thumbnails/25.jpg)
HTML Elements
Semua yang berada di antara tag pembuka dan tag penutup HTML disebut elemen HTML.
<p> ini disebut elemen </p>
![Page 26: Pemrograman Internet - HTML (1)](https://reader034.vdocuments.net/reader034/viewer/2022042521/559569c61a28ab292c8b466d/html5/thumbnails/26.jpg)
HTML Attributes
● Atribut HTML memberikan informasi tambahan mengenai sebuah tag/elemen
● Atribut selalu berada pada start tag● Atribut ditulis dengan pasangan name dan
value. Contoh: name=”value”● <a href="http://www.w3schools.com">This is
a link</a>
![Page 27: Pemrograman Internet - HTML (1)](https://reader034.vdocuments.net/reader034/viewer/2022042521/559569c61a28ab292c8b466d/html5/thumbnails/27.jpg)
LATIHAN!
![Page 28: Pemrograman Internet - HTML (1)](https://reader034.vdocuments.net/reader034/viewer/2022042521/559569c61a28ab292c8b466d/html5/thumbnails/28.jpg)
Latihan! (cont..)
![Page 29: Pemrograman Internet - HTML (1)](https://reader034.vdocuments.net/reader034/viewer/2022042521/559569c61a28ab292c8b466d/html5/thumbnails/29.jpg)
Latihan! (cont..)
![Page 30: Pemrograman Internet - HTML (1)](https://reader034.vdocuments.net/reader034/viewer/2022042521/559569c61a28ab292c8b466d/html5/thumbnails/30.jpg)
Sekian.Terima Kasih. :)
![Page 31: Pemrograman Internet - HTML (1)](https://reader034.vdocuments.net/reader034/viewer/2022042521/559569c61a28ab292c8b466d/html5/thumbnails/31.jpg)
Untuk mendapatkan slide ini, kunjungi:
vynprogram.blogspot.com