Hypertext
Markup
Language
HTML
Apa itu Hypertext Markup Language (HTML)?
HTML adalah singkatan dari Hypertext Markup Language, HTML merupakan salah
satu bahasa pengkodean atau pemograman yang digunakan untuk membuat
halaman website yang ditampilkan pada web browser. Sebagian besar halaman
yang kamu temukan pada internet kebanyakan menggunakan Bahasa HTML.
Hal. 1/22 By : Mustofa Luthfi
Sejarah singkat bahasa pemrograman HTML
HTML diciptakan oleh Sir Tim Berners-lee pada
akhir tahun 1991 namun tidak dirilis secara
resmi. Sir Tim Berners-lee merilis HTML versi
pertama pada tahun 1993 dengan tujuan untuk
berbagi informasi yang dapat dibaca dan
diakses melalui web browser.
Hingga saat ini versi HTML sudah mencapai
versi 5 yang dirilis pada tahun 2012, Versi
HTML 5 ini merupakan terusan dari
perpanjangan versi HTML 4.01 yang
sebelumnya digunakan oleh kebanyakan
orang.
Hal. 2/22 By : Mustofa Luthfi
Kelebihan Bahasa HTML
Memiliki banyak sumber dan Bersifat Open Source sehingga
1. 2.
komunitas yang sangat besar. gratis untuk digunakan
Mudah diintegrasikan dengan
Memiliki Bahasa Markup yang Bahasa backend seperti PHP ,
3. 4.
konsisten dan rapi Node.js dan javascript
Bisa dijalankan oleh semua Dapat dipelajari dengan mudah
5. Browser. 6. oleh web developer pemula.
Hal. 3/22 By : Mustofa Luthfi
Kekurangan Bahasa HTML
Terdapat fitur baru yang tidak
Bahasa pemograman HTML hanya dapat dijalankan dengan cepat
dapat diimplementasikan untuk 2.
oleh web browser.
halaman web static . jika ingin
menambah fitur dinamis, pengguna
1.
dapat menggunakan bahasa
pemograman back-end seperti Bahasa pemograman HTML tidak
javascript atau Bahasa mendukung logic sehingga semua
pemograman back-end lainnya. 3. halaman website harus dibuat
secara terpisah.
Hal. 4/22 By : Mustofa Luthfi
Table of contents
0 Membuat Project Baru – Visual Studio Code
1
0 Hello World – Project PertamaKu
2
0 Menjalankan Web Pertamaku di Browser
3
Hal. 5/22 By : Mustofa Luthfi
1.1 Membuat Folder Project
Buat lah sebuah folder baru dengan nama “Project_1”
Buka Visual Studio Code
Hal. 6/22 By : Mustofa Luthfi
Tampilan Visual Studio Code
Hal. 7/22 By : Mustofa Luthfi
Pilih Menu File -> Open Folder, lalu arahkan directory ke folder yang sudah
dibuat sebelumnya “Project_1”.
Hal. 8/22 By : Mustofa Luthfi
Selanjutnya buat lah file baru dengan cara klik pada icon new file
Hal. 9/22 By : Mustofa Luthfi
Beri nama file tersebut dengan nama index.html dan tekan tombol enter
sehingga isi file akan di tampilkan pada panel content di sebelah kanan.
Hal. 10/22 By : Mustofa Luthfi
Pada area/panel content di sebelah kanan tulislah baris kode barikut ini!
Hal. 11/22 By : Mustofa Luthfi
Untuk melihat hasil halaman web yang telah dibuat pilihlah menu “run” pada
menu bar atau tekan F5 di keyboard untuk menggunakan shortcut.
Hal. 12/22 By : Mustofa Luthfi
Browser akan terbuka dan menampilkan hasil seperti berikut ini
Hal. 13/22 By : Mustofa Luthfi
Cascading Style
Sheet
CSS
Apa itu Cascading Style Sheet (CSS)?
CSS adalah bahasa Cascading Style Sheet dan biasanya digunakan untuk mengatur
tampilan elemen yang tertulis dalam bahasa markup, seperti HTML. CSS berfungsi
untuk memisahkan konten dari tampilan visualnya di situs.
Hal. 15/22 By : Mustofa Luthfi
Sejarah singkat CSS
CSS dibuat dan dikembangkan oleh W3C (World Wide Web Consortium) pada tahun
1996 untuk alasan yang sederhana. Dulu HTML tidak dilengkapi dengan tags yang
berfungsi untuk memformat halaman. Anda hanya perlu menulis markup untuk
situs.
Tags, seperti <font>, diperkenalkan di HTML versi 3.2, dan ketika itu menyebabkan
banyak masalah bagi developer. Karena website memiliki berbagai font, warna
background, dan style, maka untuk menulis kembali (rewrite) kode memerlukan
proses yang sangat panjang dan sulit. Oleh sebab itu, W3C membuat CSS untuk
menyelesaikan masalah ini.
Hal. 16/22 By : Mustofa Luthfi
Kelebihan CSS
mengatur tampilan semua aspek
pada file yang berbeda, lalu
menentukan style, kemudian tidak perlu mendeskripsikan
1. 2. tampilan dari masing-masing
mengintegrasikan file CSS di atas
markup HTML elemen secara berulang-ulang.
Hal. 17/22 By : Mustofa Luthfi
Table of contents
0 Menambahkan Style
1
0 Menambahkan Class CSS Kedalam HTML
2
0 Menjalankan Web Berbasis CSS
3
Hal. 18/22 By : Mustofa Luthfi
1.1 Menambahkan Style CSS
Sisipkan Tag Style CSS dan scriptnya seperti pada gambar berikut
Hal. 19/22 By : Mustofa Luthfi
Tambahkan Class CSS pada Tag HTML yang telah dibuat sebelumnya,
perhatikan gambar!
Hal. 20/22 By : Mustofa Luthfi
Untuk melihat hasil halaman web yang telah ditambahkan CSS pilihlah menu
“run” pada menu bar atau tekan F5 di keyboard untuk menggunakan shortcut.
Hal. 21/22 By : Mustofa Luthfi
Browser akan terbuka dan menampilkan hasil seperti berikut ini
Hal. 22/22 By : Mustofa Luthfi
Selamat Belajar
By : Mustofa Luthfi
