HTML Dasar


00. Sebelum Belajar
  • Mampu mengoperasikan Komputer (Windows, Mac / Linux)
  • Mampu menginstall aplikasi di Komputer (Windows, Mac / Linux)
  • Mampu mengakses Web
  • Mengerti cara membuat Email

01. Pengenalan Web

Kenapa Web?
  • Saat ini web digunakan oleh jutaan, bahkan mungkin milyaran orang setiap hari
  • Dengan web, kita bisa melakukan belajar online, mendengarkan musik online, nonton video online, belanja online, sampai memesan makanan secara online
  • Namun perlu diperhatikan, Web bukanlah Internet

Internet
  • Internet adalah mekanisme komunikasi antar komputer
  • Awal internet ada, untuk komunikasi antar komputer, kita membutuhkan jaringan kabel telepon
  • Namun sekarang, semenjak berjamurnya jaringan wifi dan sejenisnya, komunikasi antar komputer menjadi lebih cepat dan mudah

Web
  • Web merupakan kumpulan informasi yang tersedia dalam sebuah komputer yang terkoneksi secara terus menerus melalui internet
  • Web bisa berisi informasi dalam bentuk apapun, seperti teks, gambar, audio, video dan lain-lain
  • Web berjalan di aplikasi yang bernama Web Server, yaitu aplikasi yang digunakan untuk menyimpan dan menyampaikan isi informasi Web

Diagram Web


Domain
  • Saat komputer Web terhubung ke internet, biasanya dia memiliki alamat
  • Alamat ini bernama ip address, formatnya misal nya 172.217.194.94
  • Karena alamat ip address sangat menyulitkan untuk diingat
  • Untung saja ada yang namanya nama domain
  • Nama domain adalah alamat yang bisa digunakan sebagai alias ke ip address
  • Misal seperti niagahoster.com, google.com dan lain-lain
  • Dengan nama domain, sebagai manusia kita akan mudah mengingat dibandingkan ip address
  • Namun, saat kita menggunakan nama domain, sebenarnya komputer tetap akan mengakses web menggunakan alamat ip address

Web Browser
  • Jika Web Server adalah aplikasi yang digunakan untuk menyimpan informasi Web
  • Web Browser adalah aplikasi yang digunakan untuk mengakses Web melalui internet
  • Kita bisa saja mengakses Web secara langsung tanpa bantuan Web Browser, namun Web Server hanya akan memberikan informasi bahasa mesin seperti HTML, JavaScript, CSS, Gambar, Video dan lain-lain
  • Dengan menggunakan Web Browser, semua bahasa mesin tersebut bisa ditampilkan secara visual sehingga kita bisa menyerap informasinya dengan lebih mudah

Diagram Web Browser


02. Pengenalan HTML
  • HTML singkatan dari HyperText Markup Language, ini adalah adalah struktur dasar dari halaman web
  • HTML mendeskripsikan struktur dari isi konten halaman Web
  • Selain HTML, terdapat hal lain untuk mendeskripsikan sebuah halaman web, seperti untuk gaya tampilan halaman web menggunakan CSS atau interaksi halaman web menggunakan JavaScript
  • Di materi ini, kita hanya akan fokus membahas HTML, tidak akan membahas tentang CSS atau JavaScript
  • HTML sendiri sebenarnya hanyalah kumpulan kode yang berisikan informasi halaman web
  • Kode HTML akan dibaca oleh Web Browser untuk ditampilkan secara visual

Kode HTML
  • Untuk melihat kode html, kita bisa buka website yang kita mau menggunakan Web Browser
  • Lalu gunakan menu View Source di aplikasi Web Browser nya
  • Misal kita buka website https://www.programmerzamannow.com/ 

Tag
  • Kode HTML, berisikan kumpulan tag-tag yang kita buat
  • Tag adalah perintah dalam html yang memiliki aturan pembuka dan penutup
  • Ada banyak sekali tag di HTML, nanti kita akan pelajari satu per satu
  • Contoh untuk membuat sebuah tulisan paragraf di HTML, kita bisa gunakan tag p, dimana penulisannya :
  • <p> Programmer Zaman Now </p>
  • <p> diawal adalah tag pembuka, </p> di akhir adalah tag penutup. Dan Programmer Zaman Now adalah isi konten dari tag p
  • Tag berisi kontennya bisa kita sebut dengan nama Element

Void Element
  • Pada beberapa kasus, ada tag di HTML yang tidak perlu memiliki isi konten
  • Hal ini bisa kita sebut dengan Void Element
  • Contoh, di HTML terdapat Tag untuk membuat Break Line / Enter, dengan menggunakan tag br
  • Karena tag br tidak memiliki konten, maka kita bisa gunakan perintah :
  • <br> atau <br/>
  • Tanpa harus menggunakan tag pembuka dan tag penutup

Attribute
  • Element memiliki atribut. Atribut adalah informasi tambahan untuk tag yang kita gunakan
  • Kita bisa tambahkan atribut di Element pada tag pembuka
  • Contoh untuk menampilkan gambar di HTML, kita bisa menggunakan tag <img> dengan atribut src yang berisikan lokasi gambar yang ingin kita tampilkan :
  • <img src=”lokasi/gambar/file.jpg”/>
  • Attribute bisa digunakan di Element biasa atau di Void Element

HTML Tidak Case Sensitive
  • Penulisan tag di HTML tidak case sensitive, artinya huruf besar atau kecil tidak masalah
  • Namun sangat disarankan menggunakan huruf kecil semua, misal <p>, jangan <P>

Kode: Contoh HTML

03. Pengenalan Web Hosting

Web Host
  • Pemilik Web, biasanya tidak menjalankan aplikasi Web Server di komputer pribadi nya
  • Biasanya mereka akan menyewa komputer di tempat penyedia data center (kumpulan komputer) yang terjamin keandalan dan kecepatan koneksi internetnya
  • Pihak penyedia komputer untuk Web Server biasa disebut Web Host

Diagram : Web Host


04. Hello World

Hello World
  • Salah satu kebiasaan pengembang Web ketika pertama kali belajar, adalah membuat halaman Hello World (Halo Dunia)
  • Halamannya sederhana, hanya berisikan tulisan Hello World saja
  • Sekarang kita akan coba membuat halaman Web Hello World dengan menggunakan HTML

Tag Body
  • Struktur HTML, dimulai dengan menggunakan tag html
  • Di dalam tag html, terdapat tag body
  • Di dalam tag body, kita bisa memasukkan tag apapun termasuk tulisan, yang nanti secara otomatis akan ditampilkan di halaman web oleh aplikasi Web Browser   
                           
Kode: Hello World

Membuat Halaman Hello World
  • Untuk membuat halaman HTML yang sudah kita buat, kita bisa langsung membukanya menggunakan aplikasi Web Browser Google Chrome

Tampilan : Hello World
05. Menjalankan di Komputer
  • Sebelumnya kita sudah coba membuka file HTML yang sudah kita buat menggunakan Web Browser
  • Namun cara seperti itu bukanlah hal yang baik, karena nanti akan ada beberapa fitur di HTML yang tidak berfungsi, oleh karena itu, disarankan untuk menjalankan Web yang kita buat menggunakan aplikasi Web Server

Live Server
  • Aplikasi Web Server ada banyak sekali, namun kita akan menggunakan yang paling mudah yaitu sebuah extension di Visual Studio Code
  • Kita bisa install extension bernama Live Server, yang bisa digunakan untuk menjalankan Web Server dari Visual Studio Code secara mudah

06. Penamaan File HTML
  • Sebenarnya tidak ada aturan dalam pembuatan nama file untuk HTML
  • Kita bisa menggunakan nama file apapun, dan huruf besar dan kecil apapun
  • Namun karena file HTML akan diakses sebagai URL pada web browser, misal :
  • www.programmerzamannow.com/namafile.html
  • Maka sangat disarankan mengikuti praktek yang baik penamaan URL

Praktek Baik Penamaan File HTML
  • Jangan menggunakan huruf besar, selalu gunakan huruf kecil semua, misal :
  • index.html, home.html, belajar.html, eko.html, dan lain-lain
  • Jangan menggunakan spasi pada nama file, jika butuh pemisah, gunakan - atau _, misal :
  • belajar-html.html, halaman-login.html, belajar_html.html
  • Jika butuh membuat folder di, gunakan aturan yang sama

07. Heading
  • Saat kita membuat dokumen atau buku, biasanya terdapat Heading
  • Heading adalah kata-kata yang mendeskripsikan isi dari tulisan yang kita buat. 
  • Seperti judul, tapi untuk bagian tulisan nya
  • Contoh ketika kita melihat buku, Heading sering digunakan untuk tulisan Bab
  • Di HTML, kita bisa membuat Heading dengan tag h

Tingkatan Heading
  • Heading memiliki tingkatan, paling tinggi adalah tingkatan 1, selanjutnya tingkatan 2, 3, dan seterusnya
  • Yang membedakan biasanya ukuran huruf nya akan semakin kecil
  • Di HTML, kita bisa menggunakan tag h1, h2, h3 dan seterusnya untuk menentukan tingkatan Heading
  • HTML mendukung sampai heading tingkatan ke 6

Heading di Microsoft Word

Kode : Heading

08. Paragraph
  • Saat membuat tulisan, biasanya selain Heading (judul), kita juga biasanya membuat paragraf
  • Di HTML, kita bisa menggunakan tag p untuk membuat paragraf
  • Paragraf selalu mulai dengan baris baru

Kode: Paragraph

Browser Menampilkan HTML
  • Kita tidak bisa mengontrol cara Web Browser menampilkan tulisan, seperti di Paragraph atau Heading misalnya
  • Menambahkan enter atau spasi di tulisan, tidak akan menjadikan tampilannya seperti itu di Web Browser

09. Entities

Reserved Characters
  • Beberapa karakter sudah dipesan oleh HTML, sehingga kita tidak bisa gunakan pada tulisan teks biasa, contoh karakter <, / atau >
  • Oleh karena itu, jika kita memaksakan menuliskan hal tersebut di teks paragraf misal, secara otomatis halaman HTML akan error / rusak / tidak sesuai dengan yang kita mau

Kode : HTML Reserved Characters

Entities
  • Karakter yang sudah dipesan di HTML, dinamakan HTML Entity
  • Ada banyak sekali HTML Entity, dan direkomendasikan untuk menggunakan simbol Entity nya, ketika kita ingin menggunakan karakter tersebut
  • Tapi sebenarnya tidak wajib, kita tetap bisa menggunakan karakter asli, namun lebih aman jika menggunakan simbol Entity nya
  • Kita bisa lihat seluruh daftar HTML Entity di :
  • https://oinam.github.io/entities/ 
  • https://html.spec.whatwg.org/multipage/named-characters.html 

Kode : HTML Entities

10. Break Line
  • Seperti yang dibahas di materi Paragraph, enter di dalam tulisan tidak akan dianggap enter oleh HTML, jika kita ingin membuat enter, disarankan membuat paragraf terpisah
  • Namun jika kita benar-benar ingin membuat enter di dalam paragraf, kita bisa menggunakan tag br
  • Tag br adalah void element, jadi tidak memiliki konten

Kode : Break Line

Horizontal Rule
  • Di HTML, kita juga bisa membuat enter dengan garis horizontal (dari kiri ke kanan) sebagai pemisah
  • Untuk melakukannya, kita bisa menggunakan tag hr
  • Tag hr juga merupakan void element, jadi tidak memiliki konten

Kode : Horizontal Rule

11. Style

CSS
  • Sekarang kita sudah bisa membuat tulisan, pertanyaannya, bagaimana jika kita ingin mengubah font, ukurannya, dan warnanya
  • Untuk melakukan itu, sebenarnya kita perlu belajar CSS terlebih dahulu
  • Namun pada kelas ini, kita akan bahas sekilas cara menggunakan CSS yang sederhana, walaupun pada kenyataanya nanti ketika kita membuat web, lebih disarankan tidak mempraktekan materi ini

Style Attribute
  • Setiap tag di HTML memiliki atribut style, dimana kita bisa menambahkan informasi CSS, yaitu untuk mengubah gaya isi element-nya
  • Style attribute berisikan key:value CSS, jika lebih dari satu, maka gunakan ; (titik koma) sebagai pemisah, misal :
    <namatag style=”property:value”>
    <namatag style=”property:value; property2:value2”>

Contoh CSS
  • Berikut adalah contoh css atribut yang bisa kita gunakan, lebih lanjutnya akan kita bahas di kelas CSS
  • background-color : untuk mengubah warna latar belakang
  • color : untuk mengubah warna font
  • font-family : untuk mengubah jenis font
  • font-size : untuk mengubah ukuran text
  • text-align : untuk mengubah rata tulisan secara horizontal, bisa left (kiri), right (kanan), center (tengah), justify (kiri dan kanan)

Kode : Style

12. Formatting
  • Dalam aplikasi pengolahan text seperti Microsoft Word, kita bisa mengubah format tulisan menjadi tebal atau miring misal
  • Begitu juga di HTML, kita bisa menambah formating di text yang ingin kita tampilkan menggunakan tag sesuai dengan format yang kita mau

Formatting Tag
  • <b>, <strong> untuk bold / tebal
  • <i>, <em> untuk italic / miring
  • <small> untuk text kecil
  • <del> untuk text dicoret
  • <ins> untuk text dengan garis bawah
  • <sub> untuk subscript text
  • <sup> untuk superscript text

Kode : Formatting Tag

13. Comment
  • Comment / komentar adalah informasi tambahan di HTML, yang tidak akan ditampilkan di halaman Web
  • Komentar biasanya digunakan untuk menambahkan informasi tambahan untuk pengembang Web, jadi bukan tujuan untuk ditampilkan di halaman Web
  • Untuk membuat komentar, kita bisa menggunakan
    <!-- isi komentar -->
  • Semua yang ada di isi komentar tidak akan ditampilkan, termasuk tag HTML

Kode : Comment

14. Color
  • HTML mendukung format penulisan warna tidak hanya dengan nama warna nya (red, blue, green), namun juga dengan format penulisan seperti HEX, RGB, HSL dan lain-lain
  • Dengan begitu, penulisan warna jadi lebih akurat dibandingkan hanya dengan nama warna nya

Color Picker
  • Salah satu website yang bisa kita gunakan untuk memilih warna adalah :
    https://colorpicker.me/ 
  • Disana kita bisa mencari warna yang kita mau, dan menyalin kode Hex untuk warna tersebut

Kode : Color

15. List

Unordered List
  • Untuk membuat daftar tulisan, kita bisa menggunakan tag ul di HTML
  • Tiap daftar isi nya, kita bisa menggunakan tag li

Ordered List
  • Jika kita ingin membuat daftar yang berurut (memiliki angka), kita bisa mengganti tag ul menjadi ol
  • Untuk daftar isi nya tetap sama menggunakan tag li

Orderes List Type
  • Pada kasus ketika kita menggunakan daftar yang berurut (ol), kita bisa mengubah format daftar nya, defaultnya menggunakan angka (dimulai dari 1).
  • Kita bisa menambahkan attribute type di ol dengan nilai :
  • type=”1”, artinya daftar isi akan menggunakan angka (ini adalah defaultnya)
  • type=”A”, artinya daftar isi akan menggunakan huruf kapital
  • type=”a”, artinya daftar isi akan menggunakan huruf kecil
  • type=”I”, artinya daftar isi akan menggunakan angka romawi kapital
  • type=”i”, artinya daftar isi akan menggunakan angka romawi kecil

Kode : List

16. Link
  • Saat membuat Web, biasanya kita akan membuat banyak sekali halaman HTML
  • Untuk berpindah dari satu halaman ke halaman lain, kita biasanya jarang melakukannya secara manual dengan cara mengetikkannya di search bar Web Browser
  • HTML memiliki fitur Link (Tautan), dimana kita bisa meng-klik Link tersebut, dan berpindah ke halaman HTML lain
  • Link tidak harus dalam bentuk Text, Link juga bisa dalam bentuk Gambar misalnya (yang akan kita bahas di materi Image)

Tag a
  • Untuk membuat Link di HTML, kita bisa menggunakan tag a
  • Isi konten tag a adalah isi dari tampilan Link, bisa Text atau yang lainnya
  • Tag a memiliki attribute href, yang berisi lokasi tujuan Link tersebut
  • Tag a juga memiliki attribute target, yang digunakan sebagai target jendela Web Browser, kita bisa gunakan nilai :
    target=”_self”, artinya halaman akan ditampilkan di halaman yang sama, ini adalah bawaan default
    target=”_blank”, artinya halaman akan ditampilkan di jendela baru di Browser
  • Tag a juga memiliki attribute title, untuk menuliskan judul yang keluar ketika mouse berada di atas Link tersebut

Kode : Link

Absolute URL
  • Saat kita menulis halaman tujuan dari href di Link, kita bisa menggunakan absolute URL
  • Absolute URL merupakan alamat lengkap sebuah tujuan Link
  • Dalam absolute URL, kita wajib menuliskan seluruh detail domain dan halaman yang dituju, misal
  • https://youtube.com/ProgrammerZamanNow
  • https://facebook.com/ProgrammerZamanNow
  • https://instagram.com/ProgrammerZamanNow
  • Kelebihan menggunakan Absolute URL adalah, kita bisa membuat Link menuju domain yang berbeda dengan website yang kita buat

Relative URL
  • Relative URL adalah lokasi href dimana tetap menggunakan domain website saat ini
  • Relative URL memiliki dua format, bisa diawali dengan /, atau tidak diawali dengan /
  • Misal sekarang kita berada di halaman http://127.0.0.1/belajar-link/index.html , lalu kita memiliki link sebagai berikut :
  • hello.html, artinya akan menuju ke http://127.0.0.1/belajar-link/hello.html
  • /hello.html, artinya akan menuju ke http://127.0.0.1/hello.html  (disarankan)
  • pzn/hello.html, artinya akan menuju ke http://127.0.0.1/belajar-link/pzn/hello.html 

Kode : Relative URL

Bookmark
  • Pada kasus halaman web yang sangat panjang, ada bagusnya kita menggunakan Bookmark
  • Bookmark adalah link yang bisa digunakan untuk menampilkan HTML element dengan id tertentu
  • Bookmark menggunakan # pada href, misal jika kita menggunakan index.html#eko, artinya ketika membuka halaman index.html, maka Web Browser akan otomatis menampilkan pada posisi HTML Element dengan id eko
  • Jika kita ingin membuat link di halaman HTML itu sendiri, kita bisa langsung buat Link dengan href langsung berisi #bookmark nya

Kode : Bookmark di Halaman Sendiri

Kode : Bookmark ke Halaman Lain

17. Image
  • Image / gambar bisa digunakan untuk memperindah tampilan website yang kita buat
  • HTML mendukung untuk menampilkan gambar dengan tag img
  • Hampir semua format gambar yang didukung oleh Web Browser, bisa ditampilkan di halaman web HTML

Image Attribute
  • Tag img adalah void element, jadi tidak memiliki konten
  • Terdapat beberapa atribut yang bisa kita gunakan dalam tag img
  • Attribute src yang digunakan untuk menentukan lokasi gambar yang mau ditampilkan, bisa menggunakan Absolute URL atau Relative URL
  • Attribute alt yang digunakan sebagai representasi text atau tulisan untuk gambar 

Kode : Image

Image Size
  • Secara bawaan default, ukuran gambar akan selalu ditampilkan sesuai aslinya
  • Kadang-kadang, kita ingin mengubah ukuran gambarnya
  • Untuk melakukan itu, kita perlu batuan CSS
  • Kita bisa gunakan attribute CSS :
  • width untuk mengubah ukuran lebar
  • height untuk mengubah ukuran tinggi
  • Kita bisa gunakan satuan px (pixel), atau % untuk persentase dari ukuran asli

Kode : Image Size

18. Picture
  • Selain untuk menampilkan gambar menggunakan tag img, di HTML juga bisa menggunakan tag picture untuk menampilkan gambar
  • Salah satu keuntungan menggunakan tag picture adalah, kita bisa menggunakan beberapa lokasi gambar, dan bisa diatur sesuai dengan ukuran layar misalnya. Jadi ketika di layar besar, kita bisa kirim gambar dengan ukuran besar, dan ketika di layar kecil, kita bisa kirim gambar yang ukuran kecil

Picture Content
  • Tag img adalah void element, sedangkan Tag picture bukan
  • Di dalam tag picture, kita bisa menambahkan tag source yang berisi lokasi gambar, dan tag img sebagai default gambar ketika semua kondisi tag source tidak terpenuhi

Kode : Picture

Media Attribute
  • Atribut media di tag source berisikan media query CSS
  • Detailnya akan kita bahas nanti di kelas CSS
  • https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries 

19. Computer Code
  • Sebagai programmer, kadang kita sering membuat web artikel tentang kode program
  • Pada kasus seperti ini, ketika kita membuat kode program di HTML menggunakan paragraph, maka akan menyulitkan, karena semua enter dan spasi akan dinormalkan oleh HTML 
  • Kadang kita ingin menampilkan kodenya apa adanya

Tag Pre
  • Untuk menampilkan tulisan di dalam HTML apa adanya, kita bisa menggunakan tag pre
  • Namun perlu diingat, kode HTML tetap tidak akan ditampilkan, jadi kita harus menggunakan HTML Entities 

Kode : Pre

20. Emoji
  • Dalam website, kita sering sekali melihat emoji pada tulisan
  • Bagaimana cara membuat emoji di HTML?
  • HTML sudah memiliki standar untuk membuat emoji, mirip dengan HTML Entities, kita juga bisa menggunakan kode untuk membuat Emoji
  • Kita bisa melihat daftar emoji yang dapat kita gunakan, dan kodenya disini :
  • https://www.quackit.com/character_sets/emoji/emoji_v3.0/unicode_emoji_v3.0_characters_all.cfm 

Kode : Emoji

21. Head
  • Selain tag body, di HTML juga terdapat tag head
  • Tag head digunakan untuk menambah informasi yang tidak dimunculkan di halaman web
  • Head biasanya digunakan untuk menambah informasi seperti CSS atau JavaScript
  • Head juga biasa digunakan untuk menambahkan metadata (informasi tambahan) untuk halaman HTML, biasanya digunakan oleh Search Engine misalnya

Title
  • Di dalam Head, kita juga bisa menambahkan tag title, yang digunakan untuk mengubah judul halaman di Web Browser

Kode : Title

22. Favicon
  • Saat kita membuka website seperti Google, Facebook atau yang lainnya, biasanya pada bagian tab Web Browser, terdapat logo perusahaannya
  • Bagaimana cara membuatnya? Itu adalah fitur Favicon di HTML


Tag Link
  • Untuk membuat favicon, kita bisa menggunakan tag link pada bagian head
  • dimana dalam link kita perlu menggunakan atribut rel=”icon” dan href menuju lokasi gambar icon
  • Gambar icon bisa file berupa ico, png, jpg, svg atau gif

Kode : Favicon

23. Block dan Inline
  • Di dalam HTML, semua element memiliki nilai display, tergantung dari jenis element yang digunakan
  • Secara garis besar, ada dua nilai untuk display, block dan inline

Block
  • Element yang memiliki nilai display block, selalu dimulai dengan baris baru. 
  • Web browser secara otomatis menambahkan jarak / margin sebelum dan setelah element
  • Dan element dengan nilai display block, selalu mengambil ukuran penuh yang tersedia, yag artinya dia akan meregang dari kiri dan kanan
  • Contoh tag yang menggunakan nilai display block adalah :
    h1-h6, p, header, body, ul, li, ol, table, form, dan lain-lain

Inline
  • Sedangkan dalam display inline, element tidak dimulai dengan baris baru
  • Selain itu dalam display inline, element hanya menggunakan ukuran seperlunya saja
  • Contoh tag yang menggunakan nilai display inline :
    a, b, i, em, button, strong, input, dan lain-lain

Div
  • Div adalah salah satu tag di HTML yang memiliki nilai display block
  • Div biasanya digunakan sebagai container (wadah) untuk beberapa element HTML
  • Div banyak digunakan ketika kita ingin membedakan bagian-bagian dalam element HTML, misal ada bagian menu, content, footer, header dan lain-lain
  • Biasanya semua itu dibungkus dalam Div

Kode : Div

Span
  • Jika Div menggunakan nilai display block, ada lagi tag span, yang menggunakan nilai display inline
  • Span biasa digunakan pada kasus kita ingin menggunakan display inline, misal kita mau membuat tulisa Programmer Zaman Now, namun tiap kata berbeda warna
  • Hal itu tidak bisa dilakukan jika menggunakan p, karena p akan mengubah seluruh warna tulisan
  • Kita bisa gunakan span di tiap kata, agar bisa menambah style di tiap span

Kode : Span

24. Video
  • Selain gambar, HTML juga mendukung untuk menampilkan video di halaman web yang kita buat
  • Namun perlu diperhatikan, tidak semua jenis video bisa dijalankan oleh Web Browser
  • Biasanya format video yang banyak digunakan adalah mp4, webm atau ogg
  • Untuk menampilkan video, kita bisa menggunakan tag video

Video Attribute
  • Tag video memiliki banyak atribut, seperti 
  • width untuk ukuran lebar video
  • height untuk ukuran tinggi video
  • controls untuk menampilkan kontrol video
  • autoplay agar video otomatis berjalan
  • Untuk menampilkan video, kita bisa gunakan tag source
  • Sama seperti di picture, kisa bisa menambahkan beberapa source

Kode : Video

Audio
  • Selain gambar, video, HTML juga mendukung untuk audio
  • Untuk audio, kita bisa menggunakan tag audio
  • Cara penggunaannya mirip dengan tag video, di dalamnya bisa kita tambahkan tag source
Kode : Audio

25. HTML 5
  • Tahun 2008, HTML sudah rilis versi 5
  • Banyak perubahan yang terjadi di HTML 5 dari versi sebelumnya HTML 4, terutama dari interaksi yang lebih kaya (perlu menggunakan JavaScript)
  • Dahulu, ketika ingin membuat web yang interaktif, kebanyakan orang menggunakan Adobe Flash, namun sekarang cukup menggunakan HTML 5, CSS dan JavaScript sudah bisa dilakukan
  • HTML 5 membawa struktur baru pada kerangka pembuatan halaman HTML

Kode : Struktur HTML 5

26. Inline Frame
  • Pada saat membuat halaman web, kadang kita ingin menampilkan halaman web lain pada halaman tersebut
  • Pada kasus seperti itu, kita bisa menggunakan Inline Frame
  • Inline Frame di HTML bisa menggunakan tag iframe
  • Inline Frame sangat banyak digunakan oleh banyak orang, contoh nya di Youtube menggunakan Inline Frame ketika kita mau menampilkan video Youtube di website kita

Kode : Inline Frame

27. Table
  • Saat membuat halaman Web, kita sering membuat tabel
  • Di HTML, kita kita juga bisa membuat tabel
  • Ada banyak sekali tag yang digunakan untuk membuat table

Table Tag
  • Tag table, digunakan untuk membuat tabel
  • Tag tr untuk membuat row / baris
  • Tag th untuk membuat kolom header table
  • Tag td untuk membuat kolom isi table
  • Tag caption untuk keterangan table
  • Tag thead, untuk grup header table
  • Tag tbody, untuk grup isi table
  • Tag tfoot, untuk grup footer table

Kode : Table

Colgrup
  • Kadang kita ingin memberi style untuk kolom, jika dilakukan satu-satu, maka akan menyulitkan
  • Kita bisa menggunakan tag colgroup untuk membuat group kolom, dan tag col untuk tiap kolom nya
  • Jika kita ingin menambahkan style ke lebih dari satu kolom dengan style yang sama, kita bisa gunakan atribut span=jumlah pada tag col

Kode : Colgroup

Colspan dan Rowspan
  • Saat kita membuat tabel, kadang kita ingin menggabungkan beberapa kolom atau beberapa baris, sehingga terlihat menjadi satu kolom
  • Pada kasus itu, kita bisa menggunakan atribut colspan untuk menggabungkan beberapa kolom dalam satu baris yang sama
  • Atau menggunakan atribut rowspan untuk menggabungkan beberapa kolom di baris yang berbeda

Kode : Colspan dan Rowspan

Kode: Table Style CSS

28. Semantic
  • Semantic element adalah element yang memiliki arti
  • Sebelum HTML 5, setiap kita ingin membuat layout di HTML, kita biasanya hanya menggunakan tag div dan span, hal ini kadang tidak memiliki arti
  • Di HTML 5, terdapat tag-tag seperti div dan span, namun lebih memiliki arti
  • Oleh karena itu, kita direkomendasikan menggunakan semantic tag agar kode HTML yang kita buat lebih mudah untuk dibaca dan dimengerti

Semantic Tag
  • Tag article, untuk konten artikel
  • Tag aside, untuk bagian disamping konten, misal sidebar
  • Tag figure, untuk konten ilustrasi, diagram, foto, dan lain-lain
  • Tag figurecaption, untuk keterangan tag figure
  • Tag footer, untuk bagian footer dokumen 
  • Tag header, untuk bagian header dokumen
  • Tag main, untuk konten utama dokumen
  • Tag mark, untuk bagian yang ditandai atau highlight
  • Tag nav, untuk bagian navigasi link
  • Tag section, untuk section di dokumen
  • Tag details, untuk bagian yang lebih detail yang bisa pengguna lihat
  • Tag summary, untuk heading untuk tag details
  • Tag time, untuk konten waktu/tanggal

Kode : Semantic Tag

29. Layout
  • Salah satu kegunaan ketika menggunakan Semantic Element adalah, mudah membuat layout
  • Hal ini karena kita tahu tiap bagian tag memiliki arti
  • Pada materi ini, kita akan menggunakan CSS untuk membuat layout, tapi untuk detailnya akan kita bahas di materi kelas CSS
  • Misal kita akan gunakan HTML pada materi Semantic

Kode : CSS Layout

30. Responsive
  • Kita tahu bahwa ukuran layar komputer itu bisa berbeda-beda, termasuk smartphone
  • Saat ini, web tidak hanya diakses oleh komputer, bisa juga melalui smartphone, tablet bahkan tv
  • Artinya ukuran layar pasti akan selalu berubah-ubah
  • Responsive adalah kemampuan beradaptasi terhadap perubahan ukuran layar
  • Web sekarang biasanya selalu implementasi responsive, agar tidak perlu membuat banyak web untuk layar yang berbeda

Viewport
  • Sebelumnya di materi HTML 5, kita melakukan setting viewport dengan initial-scale=1.0
  • Hal itu dilakukan agar ketika web kita dibuka di mobile (smartphone atau tablet), ukuran web kita mengikuti ukuran layar dari device nya
  • Ingat, tiap handphone walaupun ukuran layar misal 6inch, tapi secara pixel bisa berbeda, oleh karena itu ketika kita buat website dengan ukuran 100px misal, di handphone dengan kepadatan pixel yang besar, bisa jadi ukurannya sangat kecil, dan pada handphone dengan kepadatan pixel rendah, bisa jadi sangat besar
  • Pengaturan viewport bisa mengubah
     
Hasil Pengaturan Viewport



Responsive Element Size
  • Saat kita membuat web, kadang kita menentukan ukuran element, misal gambar, table, div dan lain-lain
  • Jika ingin responsive, kita bisa menggunakan % sebagai ukuran element nya, misal ketika kita gunakan nilai 100%, artinya ukurannya akan 100% dari viewport yang tampil di Web Browser, ketika kita mengubah ukuran Web Browser nya, secara otomatis element akan ikut berubah ukurannya

Kode : Responsive Size

Responsive Text Size
  • Responsive dengan %, hanya bisa dilakukan di element
  • Bagaimana pada kasus di teks misalnya? Kadang kita ingin membesarkan teks secara otomatis pada layar besar, dan mengecilkan pada ukuran layar kecil
  • Pada kasus seperti ini, kita bisa menggunakan unit vm (viewport width) untuk ukuran font

Kode : Responsive Text Size

Media Query
  • Pada kasus seperti gambar, mungkin ketika layar terlalu besar, dan ukuran gambar kecil, secara otomatis gambar akan pecah, oleh karena itu biasanya pada kasus seperti ini, kita akan menyediakan beberapa jenis ukuran gambar
  • Dan untuk melakukannya, biasanya kita akan menggunakan CSS Media Query, seperti yang pernah kita praktekan di materi Picture
  • Materi Media Query akan kita bahas di kelas CSS

31. ID
  • Di semua tag HTML, terdapat atribut bernama id
  • id merupakan atribut yang digunakan untuk menambahkan id ke element HTML yang kita buat
  • id itu harus unik di satu halaman HTML, artinya tidak boleh ada yang sama
  • id itu mungkin tidak terlalu berguna ketika kita hanya belajar HTML, namun ketika kita belajar CSS dan JavaScript, maka id sangat berguna

Keuntungan Menggunakan ID
  • Dengan menggunakan ID, kita bisa mengambil element menggunakan JavaScript lebih mudah
  • Dengan menggunakan ID, kita bisa mengubah gaya dengan CSS lebih mudah, apalagi jika terdapat tag yang sama. Misal terdapat 5 tag div, kita hanya ingin mengubah gaya untuk 1 div, kita bisa tambahkan id di div tersebut, dan menggunakan id untuk mengubah gaya pada div tersebut menggunakan CSS

Kode : ID

32. Tag Lainnya
  • Tag lainnya
  • https://developer.mozilla.org/en-US/docs/Web/HTML/Element 

Source: Youtube Programmer Zaman Now