3 pemrograman internet html (1)
TRANSCRIPT
![Page 1: 3 pemrograman internet html (1)](https://reader033.vdocuments.site/reader033/viewer/2022042503/55946a151a28ab972b8b45a0/html5/thumbnails/1.jpg)
HyperTextMarkupLanguage sesi 1 HTML
![Page 3: 3 pemrograman internet html (1)](https://reader033.vdocuments.site/reader033/viewer/2022042503/55946a151a28ab972b8b45a0/html5/thumbnails/3.jpg)
![Page 4: 3 pemrograman internet html (1)](https://reader033.vdocuments.site/reader033/viewer/2022042503/55946a151a28ab972b8b45a0/html5/thumbnails/4.jpg)
HTML adalah “bahasa” yang mendefinisikan bagaimana sebuah web ditampilkan di layar browser
![Page 5: 3 pemrograman internet html (1)](https://reader033.vdocuments.site/reader033/viewer/2022042503/55946a151a28ab972b8b45a0/html5/thumbnails/5.jpg)
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>
![Page 6: 3 pemrograman internet html (1)](https://reader033.vdocuments.site/reader033/viewer/2022042503/55946a151a28ab972b8b45a0/html5/thumbnails/6.jpg)
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
![Page 7: 3 pemrograman internet html (1)](https://reader033.vdocuments.site/reader033/viewer/2022042503/55946a151a28ab972b8b45a0/html5/thumbnails/7.jpg)
#1 MENULIS
KODE HTML
1/6
![Page 8: 3 pemrograman internet html (1)](https://reader033.vdocuments.site/reader033/viewer/2022042503/55946a151a28ab972b8b45a0/html5/thumbnails/8.jpg)
:: praktek :: Buka Text Editor 'Kesayangan' Anda
(Notepad, Kwrite, Vim, Emacs)
![Page 9: 3 pemrograman internet html (1)](https://reader033.vdocuments.site/reader033/viewer/2022042503/55946a151a28ab972b8b45a0/html5/thumbnails/9.jpg)
![Page 10: 3 pemrograman internet html (1)](https://reader033.vdocuments.site/reader033/viewer/2022042503/55946a151a28ab972b8b45a0/html5/thumbnails/10.jpg)
simpan dengan nama coba.html, Opsi pilihan penyimpanan ganti dari Text Files menjadi
All Files.
![Page 11: 3 pemrograman internet html (1)](https://reader033.vdocuments.site/reader033/viewer/2022042503/55946a151a28ab972b8b45a0/html5/thumbnails/11.jpg)
Notepad di Windows
Ganti jadi All Files
Isi dengan sebuahnama, dibelakangnya kasih .html
![Page 12: 3 pemrograman internet html (1)](https://reader033.vdocuments.site/reader033/viewer/2022042503/55946a151a28ab972b8b45a0/html5/thumbnails/12.jpg)
buka file manager (misal Windows Explorer), lalu buka file coba.html yang telah Anda buat
tersebut
![Page 13: 3 pemrograman internet html (1)](https://reader033.vdocuments.site/reader033/viewer/2022042503/55946a151a28ab972b8b45a0/html5/thumbnails/13.jpg)
Akan terbuka Web Browser menampilkan file coba.html
![Page 14: 3 pemrograman internet html (1)](https://reader033.vdocuments.site/reader033/viewer/2022042503/55946a151a28ab972b8b45a0/html5/thumbnails/14.jpg)
![Page 15: 3 pemrograman internet html (1)](https://reader033.vdocuments.site/reader033/viewer/2022042503/55946a151a28ab972b8b45a0/html5/thumbnails/15.jpg)
MEMBUAT WEBSITE TIDAK HARUS MEMAKAI
DREAMWEAVER!
![Page 16: 3 pemrograman internet html (1)](https://reader033.vdocuments.site/reader033/viewer/2022042503/55946a151a28ab972b8b45a0/html5/thumbnails/16.jpg)
DREAMWEAVER, CODELOBSTER, EPIPHANY, NETBEANS, KATE, DLL
HANYALAH TOOL UNTUK MEMPERMUDAH!
![Page 17: 3 pemrograman internet html (1)](https://reader033.vdocuments.site/reader033/viewer/2022042503/55946a151a28ab972b8b45a0/html5/thumbnails/17.jpg)
versus
![Page 18: 3 pemrograman internet html (1)](https://reader033.vdocuments.site/reader033/viewer/2022042503/55946a151a28ab972b8b45a0/html5/thumbnails/18.jpg)
#2 PRICE, EH..
HTML TAGS!
2/5
![Page 19: 3 pemrograman internet html (1)](https://reader033.vdocuments.site/reader033/viewer/2022042503/55946a151a28ab972b8b45a0/html5/thumbnails/19.jpg)
Setiap kode HTML berbentuk sebuah tag
![Page 20: 3 pemrograman internet html (1)](https://reader033.vdocuments.site/reader033/viewer/2022042503/55946a151a28ab972b8b45a0/html5/thumbnails/20.jpg)
Tag selalu diapit dengan tanda < dan > contoh <html> , <body>, dll
![Page 21: 3 pemrograman internet html (1)](https://reader033.vdocuments.site/reader033/viewer/2022042503/55946a151a28ab972b8b45a0/html5/thumbnails/21.jpg)
Pada umumnya, tag bersifat berpasangan, ada tag pembuka, dan ada tag penutup
![Page 22: 3 pemrograman internet html (1)](https://reader033.vdocuments.site/reader033/viewer/2022042503/55946a151a28ab972b8b45a0/html5/thumbnails/22.jpg)
Tag pembuka diapit tanda < dan > contoh <title> sedangkan
Tag penutup diapit tanda </ dan > contoh </title>
![Page 23: 3 pemrograman internet html (1)](https://reader033.vdocuments.site/reader033/viewer/2022042503/55946a151a28ab972b8b45a0/html5/thumbnails/23.jpg)
Contoh <title>Lihat aku di tittlebar browser</title>
![Page 24: 3 pemrograman internet html (1)](https://reader033.vdocuments.site/reader033/viewer/2022042503/55946a151a28ab972b8b45a0/html5/thumbnails/24.jpg)
Namun beberapa tag, hanya satu jenis saja (tak ada tag pembuka & penutup)
contoh <br />
![Page 25: 3 pemrograman internet html (1)](https://reader033.vdocuments.site/reader033/viewer/2022042503/55946a151a28ab972b8b45a0/html5/thumbnails/25.jpg)
#3 KOMPONEN
UTAMA HTML
3/5
![Page 26: 3 pemrograman internet html (1)](https://reader033.vdocuments.site/reader033/viewer/2022042503/55946a151a28ab972b8b45a0/html5/thumbnails/26.jpg)
<html>
<head>
<title>Lihat aku di tittlebar browser</title>
</head>
<body>
Aku adalah konten dan aku berada di kotak
utama web browser.
</body>
</html>
![Page 27: 3 pemrograman internet html (1)](https://reader033.vdocuments.site/reader033/viewer/2022042503/55946a151a28ab972b8b45a0/html5/thumbnails/27.jpg)
mulai dengan <html> dan akhiri dengan </html>
![Page 28: 3 pemrograman internet html (1)](https://reader033.vdocuments.site/reader033/viewer/2022042503/55946a151a28ab972b8b45a0/html5/thumbnails/28.jpg)
<html>
<head>
<title>Lihat aku di tittlebar browser</title>
</head>
<body>
Aku adalah konten dan aku berada di kotak
utama web browser.
</body>
</html>
![Page 29: 3 pemrograman internet html (1)](https://reader033.vdocuments.site/reader033/viewer/2022042503/55946a151a28ab972b8b45a0/html5/thumbnails/29.jpg)
<head></head>
![Page 30: 3 pemrograman internet html (1)](https://reader033.vdocuments.site/reader033/viewer/2022042503/55946a151a28ab972b8b45a0/html5/thumbnails/30.jpg)
wadah / Kontainer untuk semua element head. Element head dapat berupa title, script, link
CSS, informasi meta, dll.
![Page 31: 3 pemrograman internet html (1)](https://reader033.vdocuments.site/reader033/viewer/2022042503/55946a151a28ab972b8b45a0/html5/thumbnails/31.jpg)
<body></body>
![Page 32: 3 pemrograman internet html (1)](https://reader033.vdocuments.site/reader033/viewer/2022042503/55946a151a28ab972b8b45a0/html5/thumbnails/32.jpg)
Mendefinisikan badan(body) dari dokumen. tempat semua konten dari dokumen HTML,
seperti teks, image, links, dlsb.
![Page 33: 3 pemrograman internet html (1)](https://reader033.vdocuments.site/reader033/viewer/2022042503/55946a151a28ab972b8b45a0/html5/thumbnails/33.jpg)
tempat mendefinisikan Background dari halaman
![Page 34: 3 pemrograman internet html (1)](https://reader033.vdocuments.site/reader033/viewer/2022042503/55946a151a28ab972b8b45a0/html5/thumbnails/34.jpg)
<html> <head> <title>mencoba lebih keren lagi...</title> </head> <body bgcolor="#a340f4"> halooo..... </body> </html>
![Page 35: 3 pemrograman internet html (1)](https://reader033.vdocuments.site/reader033/viewer/2022042503/55946a151a28ab972b8b45a0/html5/thumbnails/35.jpg)
![Page 36: 3 pemrograman internet html (1)](https://reader033.vdocuments.site/reader033/viewer/2022042503/55946a151a28ab972b8b45a0/html5/thumbnails/36.jpg)
bgcolor="#a340f4"
![Page 37: 3 pemrograman internet html (1)](https://reader033.vdocuments.site/reader033/viewer/2022042503/55946a151a28ab972b8b45a0/html5/thumbnails/37.jpg)
#a340f4 adalah warna heksadesimal
![Page 38: 3 pemrograman internet html (1)](https://reader033.vdocuments.site/reader033/viewer/2022042503/55946a151a28ab972b8b45a0/html5/thumbnails/38.jpg)
Warna heksadesimal paling rendah adalah #000000 dan tertinggi adalah #ffffff
![Page 39: 3 pemrograman internet html (1)](https://reader033.vdocuments.site/reader033/viewer/2022042503/55946a151a28ab972b8b45a0/html5/thumbnails/39.jpg)
www.colorpicker.com
![Page 40: 3 pemrograman internet html (1)](https://reader033.vdocuments.site/reader033/viewer/2022042503/55946a151a28ab972b8b45a0/html5/thumbnails/40.jpg)
selain background warna, body juga bisa diberikan background gambar...
![Page 41: 3 pemrograman internet html (1)](https://reader033.vdocuments.site/reader033/viewer/2022042503/55946a151a28ab972b8b45a0/html5/thumbnails/41.jpg)
caranya? Lihat di www.w3schools.com
![Page 42: 3 pemrograman internet html (1)](https://reader033.vdocuments.site/reader033/viewer/2022042503/55946a151a28ab972b8b45a0/html5/thumbnails/42.jpg)
#4 MEMFORMAT TEKS
DENGAN HTML
4/5
![Page 43: 3 pemrograman internet html (1)](https://reader033.vdocuments.site/reader033/viewer/2022042503/55946a151a28ab972b8b45a0/html5/thumbnails/43.jpg)
Heading untuk sesuatu yang lebih BESAR
![Page 44: 3 pemrograman internet html (1)](https://reader033.vdocuments.site/reader033/viewer/2022042503/55946a151a28ab972b8b45a0/html5/thumbnails/44.jpg)
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>
![Page 45: 3 pemrograman internet html (1)](https://reader033.vdocuments.site/reader033/viewer/2022042503/55946a151a28ab972b8b45a0/html5/thumbnails/45.jpg)
![Page 46: 3 pemrograman internet html (1)](https://reader033.vdocuments.site/reader033/viewer/2022042503/55946a151a28ab972b8b45a0/html5/thumbnails/46.jpg)
practices makes perfect!
![Page 47: 3 pemrograman internet html (1)](https://reader033.vdocuments.site/reader033/viewer/2022042503/55946a151a28ab972b8b45a0/html5/thumbnails/47.jpg)
mari coba tags berikut ini
![Page 48: 3 pemrograman internet html (1)](https://reader033.vdocuments.site/reader033/viewer/2022042503/55946a151a28ab972b8b45a0/html5/thumbnails/48.jpg)
try these!
<b>saya tebal</b>
<i>saya miring</i>
<u>saya garis bawah</u>
![Page 49: 3 pemrograman internet html (1)](https://reader033.vdocuments.site/reader033/viewer/2022042503/55946a151a28ab972b8b45a0/html5/thumbnails/49.jpg)
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>
![Page 50: 3 pemrograman internet html (1)](https://reader033.vdocuments.site/reader033/viewer/2022042503/55946a151a28ab972b8b45a0/html5/thumbnails/50.jpg)
#5 UTAK ATIK GAMBAR
DENGAN HTML
5/5
![Page 51: 3 pemrograman internet html (1)](https://reader033.vdocuments.site/reader033/viewer/2022042503/55946a151a28ab972b8b45a0/html5/thumbnails/51.jpg)
Cari gambar apapun, simpan di folder yang sama dengan file coba.html. Misal file gambar 'kucing.jpg'
![Page 52: 3 pemrograman internet html (1)](https://reader033.vdocuments.site/reader033/viewer/2022042503/55946a151a28ab972b8b45a0/html5/thumbnails/52.jpg)
![Page 53: 3 pemrograman internet html (1)](https://reader033.vdocuments.site/reader033/viewer/2022042503/55946a151a28ab972b8b45a0/html5/thumbnails/53.jpg)
Tulis kode berikut diantara
tag <body>
<img src="kucing.jpg" alt="kucing imut"
height="200" width="180">
![Page 54: 3 pemrograman internet html (1)](https://reader033.vdocuments.site/reader033/viewer/2022042503/55946a151a28ab972b8b45a0/html5/thumbnails/54.jpg)
![Page 55: 3 pemrograman internet html (1)](https://reader033.vdocuments.site/reader033/viewer/2022042503/55946a151a28ab972b8b45a0/html5/thumbnails/55.jpg)
tag <img>
![Page 56: 3 pemrograman internet html (1)](https://reader033.vdocuments.site/reader033/viewer/2022042503/55946a151a28ab972b8b45a0/html5/thumbnails/56.jpg)
mendefinisikan gambar dalam halaman web.
![Page 57: 3 pemrograman internet html (1)](https://reader033.vdocuments.site/reader033/viewer/2022042503/55946a151a28ab972b8b45a0/html5/thumbnails/57.jpg)
2 parameter yang wajib ada.... src & alt.
![Page 58: 3 pemrograman internet html (1)](https://reader033.vdocuments.site/reader033/viewer/2022042503/55946a151a28ab972b8b45a0/html5/thumbnails/58.jpg)
2 parameter yang wajib ada.... src & alt.
![Page 59: 3 pemrograman internet html (1)](https://reader033.vdocuments.site/reader033/viewer/2022042503/55946a151a28ab972b8b45a0/html5/thumbnails/59.jpg)
src mendefinisikan sumber gambar
![Page 60: 3 pemrograman internet html (1)](https://reader033.vdocuments.site/reader033/viewer/2022042503/55946a151a28ab972b8b45a0/html5/thumbnails/60.jpg)
gambar tidak masuk kedalam kode tapi dihubungkan (linked) ke dalam
halaman web.
![Page 61: 3 pemrograman internet html (1)](https://reader033.vdocuments.site/reader033/viewer/2022042503/55946a151a28ab972b8b45a0/html5/thumbnails/61.jpg)
tag <img> hanya memberikan sebuah space, tempat untuk image tersebut dimunculkan.
![Page 62: 3 pemrograman internet html (1)](https://reader033.vdocuments.site/reader033/viewer/2022042503/55946a151a28ab972b8b45a0/html5/thumbnails/62.jpg)
2 parameter yang wajib ada.... src & alt.
![Page 63: 3 pemrograman internet html (1)](https://reader033.vdocuments.site/reader033/viewer/2022042503/55946a151a28ab972b8b45a0/html5/thumbnails/63.jpg)
alt mendefinisikan apa yang ditampilkan jika gambar gagal dimuat
![Page 64: 3 pemrograman internet html (1)](https://reader033.vdocuments.site/reader033/viewer/2022042503/55946a151a28ab972b8b45a0/html5/thumbnails/64.jpg)
misal gambar kucing tadi kehapus...
![Page 65: 3 pemrograman internet html (1)](https://reader033.vdocuments.site/reader033/viewer/2022042503/55946a151a28ab972b8b45a0/html5/thumbnails/65.jpg)
![Page 66: 3 pemrograman internet html (1)](https://reader033.vdocuments.site/reader033/viewer/2022042503/55946a151a28ab972b8b45a0/html5/thumbnails/66.jpg)
further references : http://www.w3schools.com
![Page 67: 3 pemrograman internet html (1)](https://reader033.vdocuments.site/reader033/viewer/2022042503/55946a151a28ab972b8b45a0/html5/thumbnails/67.jpg)
next session
HTML Link
HTML Table
HTML Paragraph
CSS