Scribd
Unggah
13 tayangan41 halaman

Materi HTML

Materi HTML

Diunggah oleh

Bambang Purwanto
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PPTX, PDF, TXT atau baca online di Scribd
13 tayangan41 halaman

Materi HTML

Materi HTML

Diunggah oleh

Bambang Purwanto
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PPTX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 41

HTML

PERTANYAAN EXPLORASI
1. Bagaimana cara membuat paragraf menggunakan HTML?
Tuliskan jawaban dalam bentuk tag ( contoh : <abbr></abbr> )
2. Tuliskan Struktur dasar HTML ! Tuliskan dalam bentuk tag
3. Sebutkan dan jelaskan 2 jenis list pada HTML !
4. Bagaimana cara memberikan judul pada halaman Website
menggunakan HTML !
Tuliskan jawaban dalam bentuk tag ( contoh : <abbr></abbr> )
5. Bagaimana cara menghubungkan file CSS dengan file HTML?
6. Apa kepanjangan dari CSS dan HTML ?
7. Apakah di dalam HTML terdapat attribute ( attr )? ( yes or no )?
PERTANYAAN EXPLORASI
8. Jelaskan pengertian dari website ! Dan sebutkan 4 contoh
website yang bisa dijalankan di system operasi windows saja!
9. Bagaimana cara kita menentukan kecepatan di web?
Tuliskan dalam bentuk teks prosedur !
10. Bagaimana cara memberi warna pada sebuah teks di CSS
Tuliskan jawaban dalam bentuk tag ( contoh : <abbr></abbr> )
11. Jelaskan Sejarah CSS secara singkat !
12. Sebutkan dan Jelaskan 3 struktur kode CSS !
13. Bagaimana cara menuliskan komentar di CSS ?
PERTANYAAN EXPLORASI
14. Sebutkan dan jelaskan 6 macam selector di CSS !
15. Sebutkan dan jelaskan 2 macam pseudo selector di CSS !
PERTANYAAN 2
1. Apa arti dari penulisan <!doctype html> ?
2. Apakah didalam HTML seluruh tag harus berpasangan ?
3. Sebutkan 2 tag utama dalam HTML !
4. Dibagian manakah kita harus menuliskan kata Hello World
agar bisa tampil di browser ?
5. Tag apa yang digunakan untuk membuat paragraf pada HTML?
6. Apa yang bisa kalian simpulkan dari video diatas?
PENGENALAN HTML DAN CSS
PENGENALAN HTML
Merupakan sebuah marukup language yang dikembangkan untuk
membuat sebuah halaman website yang dapat di tampilkan atau
diakses melalui web browser.

Didalam HTML juga terdapat tag pembuka dan penutup


Tag pembuka : <>
Tag penutup : </>

Didalam HTML juga terdapat tag pembuka HTML


Cara menuliskan tag pembuka HTML : <HTML></HTML>
PENGENALAN HTML
Dan untuk HTML sendiri ia mempunyai beberapa tag yang tidak
mempunyai tag pembuka dan penutup atau disebut single tag
contoh salah satunya adalah tag break yang dituliskan seperti
dibawah ini :
<br/>
Didalam HTML juga terdapat Element,dan Atrribute.
Perbedaan Element dan Atrribute :
Element : semua data atau isi yang berada dalam sebuah tag
Attribute :sebuah informasi yang diberikan pada tag sebagai
catatan atau bisa juga pengaturan untuk tag tersebut, biasanya
dituliskan pada tag pembuka atau awal tag(untuk single tag)
PENGENALAN HTML
Contoh Penggunakan Attribute :
<p align=“center”>……………..</p>
Perhatikan teks yang saya beri warna merah teks diatas merupakan
attribute. Sedangkan teks yang saya beri warna biru muda diatas
merupakan Element.
Strukutur dasar HTML :
1. Tag head
2. Tag body
Dan lain sebagainya.
PENGENALAN HTML
Contoh implementasi Struktur HTML :
<!DOCTYPE html>
<html>
<head>
<title>Your Title</title>
</head>
<body>
//Code Here
</body>
</html>
PENGENALAN HTML
Selain itu didalam HTML kita juga bisa mengubah bahasa di web
yang kita buat dengan menggunakan attribute lang yang merupakan
kepanjangan dari language.
Contoh : <html lang=“en”></html>
Namun di HTML kita juga bisa membuat teks di web yang kita
buat dengan cara mengetikan tag paragraf seperti contoh dibawah
ini :
<p>Your Text</p>
Kita juga bisa membuat multipage di HTML dengan cara
menggunakan HyperLink. Kita bahas di next slide ya
PENGENALAN HTML
Cara membuat link ke halaman browser orang lain:
<a href=“youtube.com”></a>
Perhatikan teks yang berwarna hijau itu digunakan untuk
mengarahkan user ke halaman browser orang lain namun jika ingin
membuat multipage juga bisa dilakukan dengan hal yang sama
tetapi itu nanti dulu karena kita belum belajar JavaScript.
Selain itu di HTML kita juga bisa memberikan class atau dalam
bahasa indonesia kelas
Contoh pembuatan class pada HTML :
<p class=“teks1”>Your Text Here</p>
PENGENALAN HTML
Okey kita bahas mengenai class pada HTML.
Ada beberapa aturan yang harus di ikuti pada saat kalian membuat
class di HTML sebagai berikut
1. Harus diawali dengan huruf ( a-z atau A-Z )
2. Bisa mengandung angka,dash(-),dan underscore( _ )
3. Tidak boleh menggunakan spasi
4. Tidak boleh dimulai dengan karakter angka
5. Untuk mendefinisikan beberapa kelas pisahkan nama kelas
dengan spasi.
PENGENALAN HTML
Class di HTML umumnya digunakan untuk memberi style atau
gaya pada element HTML yang kita buat.
Selain class ada juga id atau identifier atau identifity yang
digunakan untuk memberi style juga tetapi beberdanya disini id
juga bisa digunakan untuk memanipulasi element HTML dengan
menggunakan bahasa pemrograman JavaScript.
Lalu pertanyaan nya bisa ga sih kita membuat tombol seperti yang
umumnya kalian lihat di halaman browser orang lain ?
Jawabannya tentu bisa ya
Contoh cara membuat tombol di HTML :
<button>My Button</button>
PENGENALAN HTML
Namun di HTML juga tag nya masih banyak ya tidak sebatas itu
saja kalian bisa baca sendiri melalui link di bawah ini :
www.w3schools.com
Okey lanjut ke membuat table di HTML.Namun sebelum kita
membuat table di HTML kita harus tahu terlebih dahulu bagian
table itu apa saja.
Didalam table terdapat 2 bagian yaitu table row dan table data.
Perbedaan table row dan table data :
Table row digunakan untuk membuat baris table
Sedangkan table data digunakan untuk memasukan data pada table
PENGENALAN HTML
Implementasi table pada HTML Perhatikan kode disamping!
Pada kode tersebut terdapat tag table
untuk mengawali pembuatan table.
Tag table ini wajib kalian gunakan
Sebelum memasukan table row dan
table data ke dalam nya.
Nah berikutnya saya membuat tag
<tr></tr> yang artinya saya membuat
row/baris pada table tersebut.
Pembahasan mengenai table data
di slide berikutnya.
PENGENALAN HTML
Implementasi table pada HTML Perhatikan kode disamping!
Nah berikutnya ada yang nama nya
tag
<td></td>
Itu artinya saya mengisi data pada
table dengan angka 1 – 5.
Namun jangan puas dulu sampai sini
karena masih ada yang belum selesai
kode nya.
PENGENALAN HTML
Nah kode dibawa jika dijalankan akan menghasilkan seperti
gambar disamping kanan kode

Kalian belum bisa melihat table nya


jika kalian hanya mengetikan kode
disamping karena ada kode
tambahannya di tag table kita harus
berikan border supaya terlihat.
Implementasinay di slide berikutnya.
Implementasi border pada table
PENGENALAN HTML
PENGENALAN HTML
Nah dari kode yang sudah kita buat pada slide 35 itu baru benar
seperti itu cara pembuatan table.
Namun kalian perhatikan coba pada tag table terdapat beberapa
attribute baru seperti border, width, height, dan align.
Sebenarnya fungsi keempat attribute tersebut adalah :
1. border : memberikan garis tepi pada halaman browser kita
2. width : mengatur lebar dari border yang sudah kita buat
3. height : mengtur tinggi dari border yang sudah kita buat
4. align : mengatur tata letak table itu sendiri mau ada di mana
Lalu bisa ga kita memasukan gambar ke web kita sendiri ? tentu
bisa. Implementasi nya kita bahas di next slide.
PENGENALAN HTML
Implementasi memasukan gambar pada halaman browser kita
<img src=“pathGambar” alt=“Keterangan bila gambar
hilang”>img>
Nah untuk memasukan gambar kita butuh yang nama nya source
atau disingkat src dan alt yang merupakan kepanjangan dari
alternative. Source digunakan untuk mengarahkan ke lokasi
dimana gambar itu kita letakkan.Sementara itu, alternative atau alt
digunakan apabila komputer tidak dapat menemukan gambar yang
kita tuju atau apabila terdapat kesalahan path yang kita berikan.
Next slide kita akan membuat list di HTML.
PENGENALAN HTML
Sebelum kita masuk ke pembuat list, ada beberapa hal yang perlu
diketahui. Bahwa list di HTML sendiri ada 2 jenis yaitu :
1. Unordered List atau pengurutan berdasarkan simbol
Contoh : <ul></ul>
2. Ordered List atau pengurutan berdasarkan angka
Contoh : <ol></ol>
Nah didalam list sendiri terdapat tag <li></li> yang berfungsi
untuk menampung data di dalam list itu sendiri.Tag <li></li> wajib
ada ketika kalian membuat list.
Implementasi list akan kita bahas di next slide
PENGENALAN HTML
Implementasi pembuatan list pada HTML :

Kode Hasil
PENGENALAN HTML
Kita masuk ke materi berikut nya yaitu cara membuat form pada
HTML.
Contoh membuat form pada HTML :
<form></form>
Okey disini ada satu materi yang ketinggalan yaitu bagaimana cara
membuat input user di HTML.
Contoh membuat input user pada HTML :
<input type=“text” placeholder=“Terserah di isi sesuai keinginan
kamu”></input>
Nah untuk input sendiri mempunyai beberapa tipe yaitu text,
password, email, dll. Bisa kalian cek sendiri pada Visual Studio
Code kalian
PENGENALAN HTML

STUDI KASUS :
Buatlah Tombol sederhana menggunakan HTML
PENGENALAN CSS
CSS ( Cascading Style Sheet ) adalah sebuah bahasa untuk
mengatur tampilan web sehingga terlihat lebih menarik dan indah.

Dengan menggunakan CSS kita juga bisa mengatur layout / tata


letak, font, garis, background, animasi, dan lain sebagainya
SEJARAH CSS
CARA MENULIS CSS
1. Internal CSS
Adalah kode CSS yang ditulis di dalam tag <style>.
Internal CSS juga dikenal dengan sebutan Embedded CSS
2. Eksternal CSS
adalah kode CSS yang ditulis terpisah dengan kode HTML.
Eksternal CSS ditulis di dalam file khusus yang berektensi .css
3. Inline CSS
Adalah kode CSS yang ditulis langsung pada atribut style di elemen
HTML.
IMPLEMENTASI INTERNAL CSS
IMPLEMENTASI EKSTERNAL CSS
IMPLEMENTASI INLINE CSS
Next?
Yakin sudah paham ?
Okey next nya kalian bisa baca
dibawah ini :
https://www.petanikode.com/css-selektor/

Anda mungkin juga menyukai