際際滷

際際滷Share a Scribd company logo
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

More Related Content

Similar to File Structure, HTML & Supporting Languages.pptx (20)

Dasar pembuatan web (html)
Dasar pembuatan web (html)Dasar pembuatan web (html)
Dasar pembuatan web (html)
daffa12
Proyek web html menggunakan notepad
Proyek web html menggunakan notepadProyek web html menggunakan notepad
Proyek web html menggunakan notepad
Samsuri14
Jamal's dokumen
Jamal's dokumenJamal's dokumen
Jamal's dokumen
http://www.facebook.com/SeikatKasihDanSayang
Modul web programing
Modul web programingModul web programing
Modul web programing
Fitra Sani
Modul web programing
Modul web programingModul web programing
Modul web programing
Nepriant Juragantv
Modul webdesign
Modul webdesignModul webdesign
Modul webdesign
Nepriant Juragantv
fdokumen.com_pengantar-html-56a0e352ed109.ppt
fdokumen.com_pengantar-html-56a0e352ed109.pptfdokumen.com_pengantar-html-56a0e352ed109.ppt
fdokumen.com_pengantar-html-56a0e352ed109.ppt
RizkyRamdan2
Belajar HTML: Apa Itu HTML?
Belajar HTML: Apa Itu HTML?Belajar HTML: Apa Itu HTML?
Belajar HTML: Apa Itu HTML?
Sahabat Coding
Materi Dasar-Dasar HTML (struktur, elemen, tabel, formulir).pptx
Materi Dasar-Dasar HTML (struktur, elemen, tabel, formulir).pptxMateri Dasar-Dasar HTML (struktur, elemen, tabel, formulir).pptx
Materi Dasar-Dasar HTML (struktur, elemen, tabel, formulir).pptx
mrFao2
Web html
Web htmlWeb html
Web html
Fajar Baskoro
02 mengenal html
02 mengenal html02 mengenal html
02 mengenal html
Amiroh S.Kom
Laporan Praktikum Basis Data Modul VI-Membuat Website
Laporan Praktikum Basis Data Modul VI-Membuat WebsiteLaporan Praktikum Basis Data Modul VI-Membuat Website
Laporan Praktikum Basis Data Modul VI-Membuat Website
Shofura Kamal
Dasar-dasar H t m l
Dasar-dasar H t m lDasar-dasar H t m l
Dasar-dasar H t m l
MULTIMEDIA 'n BROADCASTING SMKN 1 PUNGGING MOJOKERTO
Bab i. html
Bab i. htmlBab i. html
Bab i. html
Dewa Dwi Antara
Tutoria html mysqdanphp
Tutoria html mysqdanphpTutoria html mysqdanphp
Tutoria html mysqdanphp
Afdi Njomplank
Tutorial html + my sql + php
Tutorial html + my sql + phpTutorial html + my sql + php
Tutorial html + my sql + php
Saikhu Zaenul
Homepage untuk informasi dan komunikasi
Homepage untuk informasi dan komunikasiHomepage untuk informasi dan komunikasi
Homepage untuk informasi dan komunikasi
Resa Firmansyah
Modul web affif
Modul web affifModul web affif
Modul web affif
Sejahtera Affif
Dasar pembuatan web (html)
Dasar pembuatan web (html)Dasar pembuatan web (html)
Dasar pembuatan web (html)
daffa12
Proyek web html menggunakan notepad
Proyek web html menggunakan notepadProyek web html menggunakan notepad
Proyek web html menggunakan notepad
Samsuri14
Modul web programing
Modul web programingModul web programing
Modul web programing
Fitra Sani
fdokumen.com_pengantar-html-56a0e352ed109.ppt
fdokumen.com_pengantar-html-56a0e352ed109.pptfdokumen.com_pengantar-html-56a0e352ed109.ppt
fdokumen.com_pengantar-html-56a0e352ed109.ppt
RizkyRamdan2
Belajar HTML: Apa Itu HTML?
Belajar HTML: Apa Itu HTML?Belajar HTML: Apa Itu HTML?
Belajar HTML: Apa Itu HTML?
Sahabat Coding
Materi Dasar-Dasar HTML (struktur, elemen, tabel, formulir).pptx
Materi Dasar-Dasar HTML (struktur, elemen, tabel, formulir).pptxMateri Dasar-Dasar HTML (struktur, elemen, tabel, formulir).pptx
Materi Dasar-Dasar HTML (struktur, elemen, tabel, formulir).pptx
mrFao2
02 mengenal html
02 mengenal html02 mengenal html
02 mengenal html
Amiroh S.Kom
Laporan Praktikum Basis Data Modul VI-Membuat Website
Laporan Praktikum Basis Data Modul VI-Membuat WebsiteLaporan Praktikum Basis Data Modul VI-Membuat Website
Laporan Praktikum Basis Data Modul VI-Membuat Website
Shofura Kamal
Tutoria html mysqdanphp
Tutoria html mysqdanphpTutoria html mysqdanphp
Tutoria html mysqdanphp
Afdi Njomplank
Tutorial html + my sql + php
Tutorial html + my sql + phpTutorial html + my sql + php
Tutorial html + my sql + php
Saikhu Zaenul
Homepage untuk informasi dan komunikasi
Homepage untuk informasi dan komunikasiHomepage untuk informasi dan komunikasi
Homepage untuk informasi dan komunikasi
Resa Firmansyah

File Structure, HTML & Supporting Languages.pptx

  • 1. Pertemuan 3: File Structure, HTML & Supporting Languages Pemrograman Web 1
  • 2. Lesson for Today File Structure HTML Supporting Languages Useful Websites 1 2 3 4
  • 3. Code Behind a Website The short key is CTRL + U or Command + U
  • 4. 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
  • 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) 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.
  • 9. Color Picker Online Bermanfaat untuk mencari kode warna RGB dan HEX dari gambar, serta membuat variasi dan palette warna untuk website. https://imagecolorpicker.com/
  • 10. Flaticon Bermanfaat untuk mencari icon atau gambar untuk website. https://www.flaticon.com/
  • 11. Favicon Bermanfaat untuk membuat favorite 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