WEB DESIGN “HTML”
description
Transcript of WEB DESIGN “HTML”
![Page 1: WEB DESIGN “HTML”](https://reader035.fdocument.pub/reader035/viewer/2022081416/56814c46550346895db9479b/html5/thumbnails/1.jpg)
WEB DESIGNWEB DESIGN“HTML”“HTML”
LPIA CileungsiLPIA Cileungsi
Team KreTeam Kre@@tif Div-Kom ‘10tif Div-Kom ‘10
![Page 2: WEB DESIGN “HTML”](https://reader035.fdocument.pub/reader035/viewer/2022081416/56814c46550346895db9479b/html5/thumbnails/2.jpg)
Pengertian Internet
Internet berasal dari Interconnection Networking yang memiliki arti hubungan komputer dengan berbagai tipe yang membentuk sistem jaringan yang mencakup seluruh dunia, dengan melalui jalur telekomunikasi seperti Telephone, satelit, radio link dll.
![Page 3: WEB DESIGN “HTML”](https://reader035.fdocument.pub/reader035/viewer/2022081416/56814c46550346895db9479b/html5/thumbnails/3.jpg)
Dalam pengaturan integrasi & komunikasi jaringan komputer ini digunakan sebuah protocol yang dikenal (TCP/IP)
Transmission Control Protocol bertugas memastikan bahwa semua hubungan bekerja dengan benar
Internet Protocol yang mentransmisikan data dari satu komputer ke komputer lain.
![Page 4: WEB DESIGN “HTML”](https://reader035.fdocument.pub/reader035/viewer/2022081416/56814c46550346895db9479b/html5/thumbnails/4.jpg)
PENGANTAR HTML
HTML (Hypertext Markup Language) Untuk menuliskan kode HTML kita memerlukan sebuah program teks editor (notepad) penyimpanan berexitensi “.htm”Untuk mempublikasikannya kita membutuhkan sebuah web browser (Internet Explorer/netscape/mozila)
![Page 5: WEB DESIGN “HTML”](https://reader035.fdocument.pub/reader035/viewer/2022081416/56814c46550346895db9479b/html5/thumbnails/5.jpg)
Pengenalan HTML pada Notepad
Struktur HTML dapat di tuliskan dengan menggunakan Notepad / Wordpad. Yang perlu diperhatikan adalah pada saat penyimpanan file, yaitu berexitensi *.htm / *.html
![Page 6: WEB DESIGN “HTML”](https://reader035.fdocument.pub/reader035/viewer/2022081416/56814c46550346895db9479b/html5/thumbnails/6.jpg)
STRUKTUR DOKUMEN HTML
<HTML><Head></head><BODY></body></HTML>
<Html> => Awal</Html> => akhir “/”
Struktur html tidak menggunakan cese sensitive
Secara garis besar struktur web pada HTML terdiri dari dua bagian (head & Body)
![Page 7: WEB DESIGN “HTML”](https://reader035.fdocument.pub/reader035/viewer/2022081416/56814c46550346895db9479b/html5/thumbnails/7.jpg)
LATIHAN 1
![Page 8: WEB DESIGN “HTML”](https://reader035.fdocument.pub/reader035/viewer/2022081416/56814c46550346895db9479b/html5/thumbnails/8.jpg)
LATIHAN 2
![Page 9: WEB DESIGN “HTML”](https://reader035.fdocument.pub/reader035/viewer/2022081416/56814c46550346895db9479b/html5/thumbnails/9.jpg)
LATIHAN 3
Menentukan warna latar pada halaman web<body bgcolor = “yellow”
Penulisan warna dapat pula dengan menggunakan kode warna yang dapat dilihat pada PhotoShop
![Page 10: WEB DESIGN “HTML”](https://reader035.fdocument.pub/reader035/viewer/2022081416/56814c46550346895db9479b/html5/thumbnails/10.jpg)
Penulisan dengan kode warna
![Page 11: WEB DESIGN “HTML”](https://reader035.fdocument.pub/reader035/viewer/2022081416/56814c46550346895db9479b/html5/thumbnails/11.jpg)
Tabel Konstanta warna pada HTML
BLACK WHITE GREEN MAROON
OLIVE NAVY PURPLE GRAY
RED YELLOW BLUE TEAL
LIME AQUA FACHSIA SILVER
![Page 12: WEB DESIGN “HTML”](https://reader035.fdocument.pub/reader035/viewer/2022081416/56814c46550346895db9479b/html5/thumbnails/12.jpg)
Heading / penulisan JUDUL
Hheading digunakan untuk menampilkan nama bab yg dianggap sebagai topik utama. Pada HTML terdapat (6) enam level heading dengan penulisan tag sebagai berikut
<h3>text judul</h3>
![Page 13: WEB DESIGN “HTML”](https://reader035.fdocument.pub/reader035/viewer/2022081416/56814c46550346895db9479b/html5/thumbnails/13.jpg)
Latihan Heading
![Page 14: WEB DESIGN “HTML”](https://reader035.fdocument.pub/reader035/viewer/2022081416/56814c46550346895db9479b/html5/thumbnails/14.jpg)
![Page 15: WEB DESIGN “HTML”](https://reader035.fdocument.pub/reader035/viewer/2022081416/56814c46550346895db9479b/html5/thumbnails/15.jpg)
<BR> = Break lineTag <br> berfungsi untuk membuat baris baru tanpa memberi garis kosong
=> contoh...<Body>Text pada baris pertama <br>Text pada baris kedua<BR></body>...
![Page 16: WEB DESIGN “HTML”](https://reader035.fdocument.pub/reader035/viewer/2022081416/56814c46550346895db9479b/html5/thumbnails/16.jpg)
![Page 17: WEB DESIGN “HTML”](https://reader035.fdocument.pub/reader035/viewer/2022081416/56814c46550346895db9479b/html5/thumbnails/17.jpg)
ALIGN “Perataan TEXT”ALIGN “Perataan TEXT”
![Page 18: WEB DESIGN “HTML”](https://reader035.fdocument.pub/reader035/viewer/2022081416/56814c46550346895db9479b/html5/thumbnails/18.jpg)
<P> = Paragraph Tag <p> berfungsi untuk membuat “Paragrap”/
baris baru dengan memberi garis kosong=> contoh...<Body>Paragraph pertama <p>Paragraph kedua<BR></body>...
![Page 19: WEB DESIGN “HTML”](https://reader035.fdocument.pub/reader035/viewer/2022081416/56814c46550346895db9479b/html5/thumbnails/19.jpg)
![Page 20: WEB DESIGN “HTML”](https://reader035.fdocument.pub/reader035/viewer/2022081416/56814c46550346895db9479b/html5/thumbnails/20.jpg)
TUGAS …TUGAS …
![Page 21: WEB DESIGN “HTML”](https://reader035.fdocument.pub/reader035/viewer/2022081416/56814c46550346895db9479b/html5/thumbnails/21.jpg)
FORMAT FONTTag untuk menentukan Ukuran font<FONT size =2>
Tag untuk menentukan Warna font<FONT color =“warna”>
Tag untuk menentukan Jenis font<FONT Face =“nama font”>
<B>TEXT</B> “Cetak Tebal”<i>TEXT</i> “Cetak Miring”<U>TEXT</U> “Cetak Garis Bawah”
![Page 22: WEB DESIGN “HTML”](https://reader035.fdocument.pub/reader035/viewer/2022081416/56814c46550346895db9479b/html5/thumbnails/22.jpg)
Latihan…
![Page 23: WEB DESIGN “HTML”](https://reader035.fdocument.pub/reader035/viewer/2022081416/56814c46550346895db9479b/html5/thumbnails/23.jpg)
TUGAS…
![Page 24: WEB DESIGN “HTML”](https://reader035.fdocument.pub/reader035/viewer/2022081416/56814c46550346895db9479b/html5/thumbnails/24.jpg)
Bullet & NumberingBullet & NumberingUnordered LISTUnordered LIST
![Page 25: WEB DESIGN “HTML”](https://reader035.fdocument.pub/reader035/viewer/2022081416/56814c46550346895db9479b/html5/thumbnails/25.jpg)
Tugas...Tugas...
![Page 26: WEB DESIGN “HTML”](https://reader035.fdocument.pub/reader035/viewer/2022081416/56814c46550346895db9479b/html5/thumbnails/26.jpg)
ORDERED LISTORDERED LIST
![Page 27: WEB DESIGN “HTML”](https://reader035.fdocument.pub/reader035/viewer/2022081416/56814c46550346895db9479b/html5/thumbnails/27.jpg)
![Page 28: WEB DESIGN “HTML”](https://reader035.fdocument.pub/reader035/viewer/2022081416/56814c46550346895db9479b/html5/thumbnails/28.jpg)
![Page 29: WEB DESIGN “HTML”](https://reader035.fdocument.pub/reader035/viewer/2022081416/56814c46550346895db9479b/html5/thumbnails/29.jpg)
DEFINITION LIST
![Page 30: WEB DESIGN “HTML”](https://reader035.fdocument.pub/reader035/viewer/2022081416/56814c46550346895db9479b/html5/thumbnails/30.jpg)
![Page 31: WEB DESIGN “HTML”](https://reader035.fdocument.pub/reader035/viewer/2022081416/56814c46550346895db9479b/html5/thumbnails/31.jpg)