Pertemuan 3:
File Structure, HTML & Supporting Languages
Pemrograman Web 1
Lesson for Today
File Structure
HTML
Supporting Languages
Useful Websites
1
2
3
4
Code Behind a Website
The short key is
CTRL + U or Command + U
Jenis Dokumen
Judul Dokumen
Alamat/Letak Dokumen
Teks dalam badan Dokumen
• <HTML> ... </HTML> menandai
awal dan akhir dokumen HTML
• <HEAD> … </HEAD> menandai
awal dan akhir header dokumen
• <TITLE> … </TITLE> memberi
judul pada dokumen
• <BODY> … </BODY> menandai
awal dan akhir isi dokumen
HTML
HyperText Markup Language (HTML) adalah sebuah markup language (Bahasa dalam
bentuk informasi tambahan) berupa kode-kode tag yang menginstruksikan web
browser untuk menghasilkan tampilan sesuai dengan yang diinginkan.
HTML menjadi standar yang digunakan secara luas dan dikelola oleh World Wide
Web Consortium (W3C). Bahasa ini layaknya fondasi dan kerangka halaman web.
HTML Tag
• Nama tag ditulis dalam tanda < dan >
• Boleh ditulis dengan huruf besar maupun kecil (case insentisive), kecuali tag
<DOCTYPE!>
• Ada yang berpasangan (ada pembuka & penutup), contoh: <p> … </p>
Ada pula yang tidak berpasangan, contoh: </br>
• Ada yang memiliki atribut, contoh: <p align=“center”> … </p>
CSS
Cascading Style Sheets (CSS) adalah kode yang
digunakan untuk memperindah halaman website,
sehingga kita dapat dengan mudah mengubah
keseluruhan warna dan tampilan yang ada di website
Penambahan pada dokumen HTML ada 3 cara:
1. Inline: menggunakan attribute style pada HTML
tag
2. Internal: menggunakan <style> pada header
3. External: menggunakan <link> untuk
menyambung file CSS terpisah
JavaScript
JavaScript (JS) adalah Bahasa
pemrograman tingkat tinggi dan
dinamis yang membantu membuat
halaman web interaktif, seperti
menampilkan pop up peringatan,
mengambil data waktu dari system,
dan lain-lain.
Simple
Example
Color Picker Online
Bermanfaat untuk mencari kode warna RGB dan HEX dari
gambar, serta membuat variasi dan palette warna untuk
website.
https://imagecolorpicker.com/
Flaticon
Bermanfaat untuk mencari icon atau gambar untuk
website.
https://www.flaticon.com/
Favicon
Bermanfaat untuk membuat favorite
icon (favicon), gambar kecil 16x16 yang
terdapat pada tab di tiap website.
https://www.favicon.com/
Thank You!
References:
• “CSS”. Wikipedia, 2016. Web. 11 Okt 2021
• “JavaScript”. Wikipedia, 2016. Web. 11 Okt 2021

File Structure, HTML & Supporting Languages.pptx

  • 1.
    Pertemuan 3: File Structure,HTML & Supporting Languages Pemrograman Web 1
  • 2.
    Lesson for Today FileStructure HTML Supporting Languages Useful Websites 1 2 3 4
  • 3.
    Code Behind aWebsite The short key is CTRL + U or Command + U
  • 4.
    Jenis Dokumen Judul Dokumen Alamat/LetakDokumen Teks dalam badan Dokumen • <HTML> ... </HTML> menandai awal dan akhir dokumen HTML • <HEAD> … </HEAD> menandai awal dan akhir header dokumen • <TITLE> … </TITLE> memberi judul pada dokumen • <BODY> … </BODY> menandai awal dan akhir isi dokumen
  • 5.
    HTML HyperText Markup Language(HTML) adalah sebuah markup language (Bahasa dalam bentuk informasi tambahan) berupa kode-kode tag yang menginstruksikan web browser untuk menghasilkan tampilan sesuai dengan yang diinginkan. HTML menjadi standar yang digunakan secara luas dan dikelola oleh World Wide Web Consortium (W3C). Bahasa ini layaknya fondasi dan kerangka halaman web. HTML Tag • Nama tag ditulis dalam tanda < dan > • Boleh ditulis dengan huruf besar maupun kecil (case insentisive), kecuali tag <DOCTYPE!> • Ada yang berpasangan (ada pembuka & penutup), contoh: <p> … </p> Ada pula yang tidak berpasangan, contoh: </br> • Ada yang memiliki atribut, contoh: <p align=“center”> … </p>
  • 6.
    CSS Cascading Style Sheets(CSS) adalah kode yang digunakan untuk memperindah halaman website, sehingga kita dapat dengan mudah mengubah keseluruhan warna dan tampilan yang ada di website Penambahan pada dokumen HTML ada 3 cara: 1. Inline: menggunakan attribute style pada HTML tag 2. Internal: menggunakan <style> pada header 3. External: menggunakan <link> untuk menyambung file CSS terpisah
  • 7.
    JavaScript JavaScript (JS) adalahBahasa pemrograman tingkat tinggi dan dinamis yang membantu membuat halaman web interaktif, seperti menampilkan pop up peringatan, mengambil data waktu dari system, dan lain-lain.
  • 8.
  • 9.
    Color Picker Online Bermanfaatuntuk mencari kode warna RGB dan HEX dari gambar, serta membuat variasi dan palette warna untuk website. https://imagecolorpicker.com/
  • 10.
    Flaticon Bermanfaat untuk mencariicon atau gambar untuk website. https://www.flaticon.com/
  • 11.
    Favicon Bermanfaat untuk membuatfavorite icon (favicon), gambar kecil 16x16 yang terdapat pada tab di tiap website. https://www.favicon.com/
  • 12.
    Thank You! References: • “CSS”.Wikipedia, 2016. Web. 11 Okt 2021 • “JavaScript”. Wikipedia, 2016. Web. 11 Okt 2021