Buku Pegangan HTML

Catatan: Anda dapat mendownload versi PDF / ePub / Mobi dari buku ini sehingga Anda dapat membacanya secara offline.

pengantar

Selamat datang! Saya menulis buku ini untuk membantu Anda mempelajari HTML dengan cepat dan terbiasa dengan topik HTML lanjutan.

HTML, singkatan dari Hyper Text Markup Language, adalah salah satu blok bangunan web yang paling mendasar.

HTML secara resmi lahir pada tahun 1993 dan sejak itu berkembang menjadi keadaannya saat ini, berpindah dari dokumen teks sederhana menjadi memberdayakan Aplikasi Web yang kaya.

Buku pegangan ini ditujukan untuk banyak orang.

Pertama, pemula. Saya menjelaskan HTML dari nol dengan cara yang ringkas namun komprehensif, sehingga Anda dapat menggunakan buku ini untuk mempelajari HTML dari dasar.

Lalu, profesional. HTML sering dianggap sebagai hal sekunder untuk dipelajari. Itu mungkin diberikan begitu saja.

Namun banyak hal yang tidak jelas bagi banyak orang. Saya termasuk. Saya menulis buku pegangan ini untuk membantu pemahaman saya tentang topik, karena ketika saya perlu menjelaskan sesuatu, saya lebih baik memastikan bahwa saya terlebih dahulu mengetahui hal itu secara mendalam.

Bahkan jika Anda tidak menulis HTML dalam pekerjaan Anda sehari-hari, mengetahui cara kerja HTML dapat membantu Anda terhindar dari sakit kepala saat Anda perlu memahaminya dari waktu ke waktu, misalnya saat mengubah halaman web.

Anda dapat menghubungi saya di Twitter @flaviocopes.

Situs web saya adalah flaviocopes.com.

Indeks Buku

  • Kata pengantar
  • Dasar-dasar HTML
  • Judul dokumen
  • Badan dokumen
  • Tag yang berinteraksi dengan teks
  • Tautan
  • Tag penampung dan struktur halaman HTML
  • Formulir
  • Tabel
  • Tag multimedia: audio dan video
  • iframes
  • Gambar-gambar
  • Aksesibilitas

KATA PENGANTAR

HTML adalah dasar dari keajaiban yang disebut Web.

Ada kekuatan luar biasa di bawah seperangkat aturan yang agak sederhana dan terbatas ini, yang memungkinkan kami - pengembang, pembuat, desainer, penulis, dan pengotak-atik - membuat dokumen, aplikasi, dan pengalaman untuk orang-orang di seluruh dunia.

Buku HTML pertama saya keluar pada tahun 1997 dan berjudul "HTML Unleashed". Besar, banyak halaman, buku tebal panjang.

20+ tahun telah berlalu, dan HTML masih menjadi fondasi Web, dengan sedikit perubahan sejak saat itu.

Tentu, kami mendapat lebih banyak tag semantik, HTML presentasi tidak lagi menjadi masalah, dan CSS telah menangani desain berbagai hal.

Keberhasilan HTML didasarkan pada satu hal: kesederhanaan .

Itu menolak dibajak ke dalam dialek XML melalui XHTML, ketika akhirnya orang menyadari bahwa hal itu terlalu rumit.

Itu terjadi karena fitur lain yang diberikannya kepada kita: pengampunan . Ada beberapa aturan, benar, tetapi setelah Anda mempelajarinya, Anda memiliki banyak kebebasan.

Peramban belajar untuk menjadi tangguh dan selalu berusaha melakukan yang terbaik saat mengurai dan menyajikan HTML kepada pengguna.

Dan seluruh platform Web melakukan satu hal dengan benar: tidak pernah merusak kompatibilitas ke belakang. Cukup luar biasa, kita dapat kembali ke dokumen HTML yang ditulis pada tahun 1991, dan dokumen tersebut terlihat sama seperti saat itu.

Kami bahkan tahu apa halaman web pertama itu. Ini ini: //info.cern.ch/hypertext/WWW/TheProject.html

Dan Anda dapat melihat sumber halaman, berkat fitur besar lainnya dari Web dan HTML: kami dapat memeriksa HTML halaman web mana pun .

Jangan anggap remeh ini. Saya tidak tahu platform lain yang memberi kami kemampuan ini.

Alat Pengembang luar biasa yang terpasang di browser apa pun memungkinkan kami memeriksa dan mengambil inspirasi dari HTML yang ditulis oleh siapa pun di dunia.

Jika Anda baru mengenal HTML, buku ini bertujuan untuk membantu Anda memulai. Jika Anda seorang Pengembang Web berpengalaman, buku ini akan meningkatkan pengetahuan Anda.

Saya belajar banyak saat menulisnya, meskipun saya telah bekerja dengan Web selama lebih dari 20 tahun, dan saya yakin Anda akan menemukan sesuatu yang baru juga.

Atau Anda akan mempelajari kembali sesuatu yang lama Anda lupa.

Bagaimanapun, tujuan buku ini adalah untuk berguna bagi Anda, dan saya harap buku ini berhasil.

DASAR HTML

HTML adalah standar yang didefinisikan oleh WHATWG , singkatan dari Kelompok Kerja Teknologi Aplikasi Hypertext Web, sebuah organisasi yang dibentuk oleh orang-orang yang bekerja pada browser web paling populer. Ini berarti pada dasarnya dikendalikan oleh Google, Mozilla, Apple dan Microsoft.

Di masa lalu, W3C (World Wide Web Consortium) adalah organisasi yang bertanggung jawab untuk membuat standar HTML.

Kontrol secara informal dipindahkan dari W3C ke WHATWG ketika menjadi jelas bahwa dorongan W3C ke XHTML bukanlah ide yang baik.

Jika Anda belum pernah mendengar XHTML, inilah cerita pendeknya. Di awal tahun 2000-an, kami semua percaya bahwa masa depan Web adalah XML (serius). Jadi HTML dipindahkan dari bahasa pengarang berbasis SGML ke bahasa markup XML.

Itu adalah perubahan besar. Kami harus tahu, dan menghormati, lebih banyak aturan. Aturan yang lebih ketat.

Akhirnya vendor browser menyadari bahwa ini bukanlah jalur yang tepat untuk Web, dan mereka menolak, menciptakan apa yang sekarang dikenal sebagai HTML5.

W3C tidak begitu setuju untuk melepaskan kendali HTML, dan selama bertahun-tahun kami memiliki 2 standar yang bersaing, masing-masing bertujuan untuk menjadi standar resmi. Akhirnya pada 28 Mei 2019 telah diumumkan secara resmi oleh W3C bahwa versi HTML yang "sebenarnya" adalah yang diterbitkan oleh WHATWG.

Saya menyebutkan HTML5. Izinkan saya menjelaskan cerita kecil ini. Saya tahu, itu agak membingungkan sampai sekarang, seperti halnya banyak hal dalam hidup ketika banyak aktor terlibat, namun juga menarik.

Kami memiliki HTML versi 1 pada tahun 1993. Ini RFC aslinya.

HTML 2 diikuti pada tahun 1995.

Kami mendapatkan HTML 3 pada Januari 1997, dan HTML 4 pada Desember 1997.

Waktu sibuk!

Lebih dari 20 tahun telah berlalu, kami memiliki keseluruhan hal XHTML ini, dan akhirnya kami mendapatkan "benda" HTML5 ini, yang sebenarnya bukan hanya HTML lagi.

HTML5 adalah istilah yang sekarang mendefinisikan seluruh rangkaian teknologi, yang mencakup HTML tetapi menambahkan banyak API dan standar seperti WebGL, SVG, dan lainnya.

Hal utama yang harus dipahami di sini adalah: tidak ada lagi yang namanya versi HTML sekarang. Itu standar hidup. Seperti CSS, yang disebut "3", tetapi pada kenyataannya adalah sekelompok modul independen yang dikembangkan secara terpisah. Seperti JavaScript, di mana kami memiliki satu edisi baru setiap tahun, tetapi saat ini, satu-satunya hal yang penting adalah fitur individu mana yang diterapkan oleh mesin.

Ya, kami menyebutnya HTML5, tetapi HTML4 berasal dari tahun 1997. Itu waktu yang lama untuk apa pun, apalagi untuk web.

Di sinilah standar sekarang "hidup": //html.spec.whatwg.org/multipage.

HTML adalah bahasa markup yang kami gunakan untuk menyusun konten yang kami konsumsi di Web.

HTML disajikan ke browser dengan berbagai cara.

  • Itu bisa dihasilkan oleh aplikasi sisi server yang membangunnya tergantung pada permintaan atau data sesi, misalnya aplikasi Rails atau Laravel atau Django.
  • Ini dapat dihasilkan oleh aplikasi sisi klien JavaScript yang menghasilkan HTML dengan cepat.
  • Dalam kasus yang paling sederhana, ini dapat disimpan dalam file dan disajikan ke browser oleh server Web.

Mari selami kasus terakhir ini. Meskipun dalam praktiknya ini mungkin cara yang paling tidak populer untuk menghasilkan HTML, tetap penting untuk mengetahui blok bangunan dasar.

Menurut konvensi, file HTML disimpan dengan ekstensi .htmlatau .htm.

Di dalam file ini, kami mengatur konten menggunakan tag .

Tag membungkus konten, dan setiap tag memberikan arti khusus pada teks yang dibungkusnya.

Mari buat beberapa contoh.

Cuplikan HTML ini membuat paragraf menggunakan ptag:

A paragraph of text

Cuplikan HTML ini membuat daftar item menggunakan ultag, yang berarti daftar tidak berurutan , dan litag, yang berarti item daftar :

  • First item
  • Second item
  • Third item

Saat halaman HTML disajikan oleh browser, tag diinterpretasikan, dan browser menampilkan elemen sesuai dengan aturan yang menentukan tampilan visualnya.

Beberapa aturan tersebut sudah ada di dalamnya, seperti bagaimana daftar dirender atau bagaimana tautan digarisbawahi dengan warna biru.

Beberapa aturan lain ditetapkan oleh Anda dengan CSS.

HTML tidak bersifat presentasi. Ini tidak peduli dengan bagaimana sesuatu terlihat . Sebaliknya, ini berkaitan dengan apa artinya .

Terserah browser untuk menentukan bagaimana sesuatu terlihat, dengan arahan yang ditentukan oleh siapa yang membuat halaman, dengan bahasa CSS.

Sekarang, dua contoh yang saya buat adalah cuplikan HTML yang diambil di luar konteks halaman.

Struktur halaman HTML

Mari kita buat contoh halaman HTML yang tepat.

Semuanya dimulai dengan Deklarasi Jenis Dokumen (alias doctype ), cara untuk memberi tahu browser bahwa ini adalah halaman HTML, dan versi HTML mana yang kita gunakan.

HTML modern menggunakan doctype ini:

Kemudian kami memiliki htmlelemen, yang memiliki tag pembuka dan penutup:

  ...  

Kebanyakan tag berpasangan dengan tag pembuka dan tag penutup. Tag penutup ditulis sama dengan tag pembuka, tetapi dengan /:

some content 

Ada beberapa tag yang menutup sendiri, yang berarti tidak memerlukan tag penutup terpisah karena tidak mengandung apa pun di dalamnya .

The htmltag mulai digunakan pada awal dokumen, tepat setelah deklarasi tipe dokumen.

The htmltag berakhir adalah hal terakhir yang ada dalam dokumen HTML.

Di dalam htmlelemen kami memiliki 2 elemen: headdan body:

   ...   ...   

Di dalamnya headkita akan memiliki tag yang penting untuk membuat halaman web, seperti judul, metadata, dan CSS dan JavaScript internal atau eksternal. Sebagian besar hal yang tidak langsung muncul di halaman, tetapi hanya membantu browser (atau bot seperti bot pencarian Google) menampilkannya dengan benar.

Di dalamnya bodykita akan memiliki konten halaman. Hal -hal yang terlihat .

Tag vs elemen

Saya menyebutkan tag dan elemen. Apa bedanya?

Elemen memiliki tag awal dan tag penutup. Dalam contoh ini, kami menggunakan ptag awal dan penutup untuk membuat pelemen:

A paragraph of text

Jadi, sebuah elemen membentuk keseluruhan paket :

  • tag awal
  • konten teks (dan mungkin elemen lainnya)
  • tag penutup

Jika elemen tidak memiliki tag penutup, itu hanya ditulis dengan tag awal, dan tidak boleh berisi konten teks apa pun.

Meskipun demikian, saya mungkin menggunakan istilah tag atau elemen dalam buku yang memiliki arti yang sama, kecuali jika saya secara eksplisit menyebutkan tag awal atau tag akhir.

Atribut

Tag awal suatu elemen dapat memiliki cuplikan informasi khusus yang dapat kita lampirkan, yang disebut atribut .

Atribut memiliki key="value"sintaks:

A paragraph of text

Anda juga dapat menggunakan tanda kutip tunggal, tetapi menggunakan tanda kutip ganda dalam HTML adalah cara yang bagus.

Kami dapat memiliki banyak dari mereka:

A paragraph of text

dan beberapa atribut bersifat boolean, artinya Anda hanya memerlukan kunci:

The classdan idatribut adalah dua yang paling umum Anda akan menemukan bekas.

Mereka memiliki arti khusus, dan berguna baik dalam CSS maupun JavaScript.

Perbedaan antara keduanya idadalah unik dalam konteks halaman web; itu tidak dapat diduplikasi.

Kelas, di sisi lain, dapat muncul beberapa kali pada banyak elemen.

Plus, an idhanyalah satu nilai. classdapat menampung banyak nilai, dipisahkan oleh spasi:

A paragraph of text

Sangat umum menggunakan tanda hubung -untuk memisahkan kata dalam nilai kelas, tetapi itu hanya konvensi.

Itu hanyalah dua dari kemungkinan atribut yang dapat Anda miliki. Beberapa atribut hanya digunakan untuk satu tag. Mereka sangat terspesialisasi.

Atribut lain dapat digunakan dengan cara yang lebih umum. Anda baru saja melihat iddan class, tetapi kami juga memiliki yang lain, seperti styleyang dapat digunakan untuk menyisipkan aturan CSS sebaris pada sebuah elemen.

Peka huruf besar / kecil

HTML tidak membedakan huruf besar / kecil. Tag dapat ditulis dengan huruf besar semua, atau huruf kecil. Di masa-masa awal, penggunaan topi adalah norma. Hari ini huruf kecil adalah norma. Itu adalah konvensi.

Anda biasanya menulis seperti ini:

A paragraph of text

tidak seperti ini:

A paragraph of text

Ruang putih

Sangat penting. Dalam HTML, bahkan jika Anda menambahkan beberapa spasi putih ke dalam satu baris, itu diciutkan oleh mesin CSS browser.

Misalnya rendering paragraf ini:

A paragraph of text

sama seperti ini:

A paragraph of text

dan sama seperti ini:

A paragraph of text

> Menggunakan properti CSS spasi putih, Anda dapat mengubah perilaku sesuatu. Anda dapat menemukan informasi lebih lanjut tentang bagaimana CSS memproses ruang putih di Spesifikasi CSS

Saya biasanya menyukai

A paragraph of text

atau

A paragraph of text

Tag berlapis harus menjorok dengan 2 atau 4 karakter, tergantung pada preferensi Anda:

A paragraph of text

  • A list item

Catatan: fitur "ruang putih tidak relevan" ini berarti jika Anda ingin menambahkan ruang tambahan, itu bisa membuat Anda sangat marah. Saya sarankan Anda menggunakan CSS untuk membuat lebih banyak ruang saat dibutuhkan.

Catatan: dalam kasus-kasus khusus, Anda dapat menggunakan entitas HTML (akronim yang berarti spasi tidak-melanggar ) - lebih lanjut tentang entitas HTML nanti. Saya pikir ini tidak boleh disalahgunakan. CSS selalu lebih disukai untuk mengubah presentasi visual.

KEPALA DOKUMEN

The headtag berisi tag khusus yang menentukan sifat dokumen.

Itu selalu ditulis sebelum bodytag, tepat setelah htmltag pembuka :

   ...  ...  

Kami tidak pernah menggunakan atribut pada tag ini. Dan kami tidak menulis konten di dalamnya.

Ini hanya wadah untuk tag lain. Di dalamnya kami dapat memiliki berbagai macam tag, tergantung pada apa yang perlu Anda lakukan:

  • title
  • script
  • noscript
  • link
  • style
  • base
  • meta

The titletag

The titletag menentukan judul halaman. Judul ditampilkan di browser, dan ini sangat penting karena ini adalah salah satu faktor kunci untuk Pengoptimalan Mesin Telusur (SEO).

The scripttag

Tag ini digunakan untuk menambahkan JavaScript ke dalam halaman.

Anda dapat memasukkannya sebaris, menggunakan tag pembuka, kode JavaScript, dan kemudian tag penutup:

 ..some JS  

Atau Anda dapat memuat file JavaScript eksternal dengan menggunakan srcatribut:

The typeatribut secara default diatur ke text/javascript, jadi itu benar-benar opsional.

Ada sesuatu yang cukup penting untuk diketahui tentang tag ini.

Terkadang tag ini digunakan di bagian bawah halaman, tepat sebelum tag penutup . Mengapa? Untuk alasan kinerja.

Memuat skrip secara default memblokir rendering halaman hingga skrip diurai dan dimuat.

Dengan meletakkannya di bagian bawah halaman, skrip dimuat dan dieksekusi setelah seluruh halaman sudah diurai dan dimuat, memberikan pengalaman yang lebih baik kepada pengguna daripada menyimpannya di headtag.

Pendapat saya sekarang ini adalah praktik yang buruk. Biarkan scripthidup di dalam headtag.

Dalam JavaScript modern kita memiliki alternatif yang lebih berkinerja daripada menyimpan skrip di bagian bawah halaman - deferatribut. Ini adalah contoh yang memuat file.jsfile, relatif terhadap URL saat ini:

Ini adalah skenario yang memicu jalur yang lebih cepat ke halaman yang memuat cepat, dan JavaScript yang memuat cepat.

Catatan: asyncatributnya mirip, tetapi menurut saya opsi yang lebih buruk daripada defer. Saya menjelaskan mengapa, secara lebih rinci, di halaman //flaviocopes.com/javascript-async-defer/

The noscripttag

Tag ini digunakan untuk mendeteksi ketika skrip dinonaktifkan di browser.

Catatan: pengguna dapat memilih untuk menonaktifkan skrip JavaScript di pengaturan browser. Atau browser mungkin tidak mendukungnya secara default.

Ini digunakan secara berbeda tergantung pada apakah itu diletakkan di kepala dokumen atau di badan dokumen.

Kita sedang membicarakan kepala dokumen sekarang, jadi mari kita perkenalkan dulu penggunaan ini.

Dalam kasus ini, noscripttag hanya boleh berisi tag lain:

  • link tag
  • style tag
  • meta tag

untuk mengubah sumber daya yang disajikan oleh halaman, atau metainformasi, jika skrip dinonaktifkan.

Dalam contoh ini saya menetapkan elemen dengan no-script-alertkelas untuk ditampilkan jika skrip dinonaktifkan, seperti sebelumnya display: none:

   ...   .no-script-alert { display: block; }   ...  ...  

Mari kita selesaikan kasus lain: jika dimasukkan ke dalam body, itu bisa berisi konten, seperti paragraf dan tag lain, yang dirender di UI.

The linktag

The linktag digunakan untuk hubungan set antara dokumen dan sumber daya lainnya.

Ini terutama digunakan untuk menautkan file CSS eksternal yang akan dimuat.

Elemen ini tidak memiliki tag penutup.

Pemakaian:

   ...  ...  ...  

The mediaAtribut memungkinkan pemuatan stylesheet yang berbeda tergantung pada kemampuan perangkat:

Kami juga dapat menautkan ke sumber daya selain stylesheet.

Misalnya kita dapat mengasosiasikan RSS feed menggunakan

Atau kita bisa mengasosiasikan favicon menggunakan:

Tag ini juga digunakan untuk konten multi-halaman, untuk menunjukkan halaman sebelumnya dan berikutnya menggunakan rel="prev"dan rel="next". Terutama untuk Google. Pada 2019, Google mengumumkan tidak menggunakan tag ini lagi karena dapat menemukan struktur halaman yang benar tanpanya.

The styletag

Tag ini dapat digunakan untuk menambahkan gaya ke dalam dokumen, daripada memuat lembar gaya eksternal.

Pemakaian:

 .some-css {}  

Seperti linktag, Anda dapat menggunakan mediaatribut untuk menggunakan CSS tersebut hanya pada media yang ditentukan:

 .some-css {}  

The basetag

Tag ini digunakan untuk menetapkan URL dasar untuk semua URL relatif yang terdapat dalam halaman.

   ...  ...  ...  

The metatag

Tag meta melakukan berbagai tugas dan itu sangat, sangat penting.

Khusus untuk SEO.

meta elemen hanya memiliki tag awal.

Yang paling dasar adalah descriptiontag meta:

Ini mungkin digunakan oleh Google untuk menghasilkan deskripsi halaman di halaman hasil nya, jika menemukan lebih baik menggambarkan halaman dari konten pada halaman (jangan tanya saya bagaimana).

The charsetmeta tag digunakan untuk menetapkan pengkodean halaman karakter. utf-8umumnya:

The robotsmeta tag menginstruksikan bots Search Engine apakah indeks halaman atau tidak:

Atau apakah mereka harus mengikuti tautan atau tidak:

Anda juga dapat mengatur nofollow pada tautan individual. Ini adalah bagaimana Anda dapat mengatur nofollowsecara global.

Anda bisa menggabungkannya:

Perilaku defaultnya adalah index, follow.

Anda dapat menggunakan properti lainnya, termasuk nosnippet, noarchive, noimageindexdan banyak lagi.

Anda juga dapat memberi tahu Google alih-alih menargetkan semua mesin telusur:

Dan mesin telusur lain mungkin juga memiliki tag meta sendiri.

Omong-omong, kami dapat memberi tahu Google untuk menonaktifkan beberapa fitur. Ini mencegah fungsionalitas terjemahan dalam hasil mesin pencari:

The viewportmeta tag digunakan untuk memberitahu browser untuk mengatur lebar halaman berdasarkan lebar perangkat.

Lihat lebih lanjut tentang tag ini.

Tag meta lain yang cukup populer adalah http-equiv="refresh"salah satunya. Baris ini memberi tahu browser untuk menunggu 3 detik, lalu mengalihkan ke halaman lain itu:

Menggunakan 0 dan bukan 3 akan mengarahkan ulang secepat mungkin.

Ini bukan referensi lengkap; Ada tag meta lain yang jarang digunakan.

Setelah pengantar judul dokumen ini, kita bisa mulai menyelami badan dokumen.

TUBUH DOKUMEN

Setelah tag head penutup, kita hanya dapat memiliki satu hal dalam dokumen HTML: bodyelemen.

   ...   ...   

Sama seperti tag headdan html, kita hanya boleh memiliki satu bodytag dalam satu halaman.

Di dalam bodytag kita memiliki semua tag yang menentukan konten halaman.

Secara teknis, tag awal dan akhir bersifat opsional. Tetapi saya menganggap menambahkannya sebagai praktik yang baik. Hanya untuk kejelasan.

Pada bab-bab berikutnya kami akan menentukan jenis tag yang dapat Anda gunakan di dalam badan halaman.

Namun sebelumnya, kita harus memperkenalkan perbedaan antara elemen blok dan elemen sebaris.

Elemen blok vs elemen sebaris

Elemen visual, yang ditentukan di badan halaman, secara umum dapat diklasifikasikan ke dalam 2 kategori:

  • elemen blok ( p,, divelemen heading, daftar dan item daftar, ...)
  • elemen inline ( a, span, img, ...)

Apa bedanya?

Elemen blok, jika ditempatkan di halaman, jangan izinkan elemen lain di sebelahnya. Ke kiri, atau ke kanan.

Elemen sebaris malah bisa berada di samping elemen sebaris lainnya.

Perbedaannya juga terletak pada properti visual yang bisa kita edit menggunakan CSS. Kita dapat mengubah lebar / tinggi, margin, padding, dan batas elemen blok. Kami tidak dapat melakukan itu untuk elemen sebaris.

Perhatikan bahwa menggunakan CSS kita dapat mengubah default untuk setiap elemen, menetapkan ptag menjadi sebaris, misalnya, atau spanmenjadi elemen blok.

Perbedaan lainnya adalah bahwa elemen sebaris dapat dimuat dalam elemen blok. Kebalikannya tidak benar.

Beberapa elemen blok dapat berisi elemen blok lain, tetapi itu tergantung. The ptag misalnya tidak memungkinkan opsi tersebut.

TAG YANG BERINTERAKSI DENGAN TEKS

The ptag

Tag ini mendefinisikan sebuah paragraf teks.

Some text

Itu adalah elemen blok.

Di dalamnya, kita dapat menambahkan elemen sebaris yang kita suka, suka spanatau a.

Kami tidak dapat menambahkan elemen blok.

Kita tidak bisa menyarangkan pelemen ke elemen lain.

Secara default, browser memberi gaya paragraf dengan margin di atas dan di bawah. 16pxdi Chrome, tetapi nilai pastinya mungkin berbeda antar browser.

Hal ini menyebabkan dua paragraf berturut-turut diberi jarak, mereplikasi apa yang kita pikirkan tentang "paragraf" dalam teks tercetak.

The spantag

Ini adalah tag sebaris yang dapat digunakan untuk membuat bagian dalam paragraf yang dapat ditargetkan menggunakan CSS:

A part of the text and here another part

The brtag

Tag ini mewakili jeda baris. Ini adalah elemen sebaris, dan tidak membutuhkan tag penutup.

Kami menggunakannya untuk membuat baris baru di dalam ptag, tanpa membuat paragraf baru.

Dan dibandingkan dengan membuat paragraf baru, itu tidak menambahkan spasi tambahan.

Some text

A new line

Tag judul

HTML memberi kita 6 tag heading. Dari paling penting untuk paling penting, kita memiliki h1, h2, h3, h4, h5, h6.

Biasanya sebuah halaman akan memiliki satu h1elemen, yaitu judul halaman. Kemudian Anda mungkin memiliki satu atau lebih h2elemen tergantung pada konten halaman.

Judul, terutama organisasi heading, juga penting untuk SEO, dan mesin pencari menggunakannya dengan berbagai cara.

Browser secara default akan membuat h1tag menjadi lebih besar, dan akan membuat ukuran elemen lebih kecil seiring hbertambahnya angka :

Semua judul adalah elemen blok. Mereka tidak bisa berisi elemen lain, hanya teks.

The strongtag

Tag ini digunakan untuk menandai teks di dalamnya sebagai kuat . Ini sangat penting, ini bukan petunjuk visual, tetapi petunjuk semantik. Bergantung pada media yang digunakan, interpretasinya akan bervariasi.

Browser secara default membuat teks di tag ini tebal .

The emtag

Tag ini digunakan untuk menandai teks di dalamnya sebagai ditekankan . Seperti halnya strong, ini bukan petunjuk visual tetapi petunjuk semantik.

Browser secara default membuat teks menjadi miring ini .

Tanda kutip

The blockquotetag HTML berguna untuk memasukkan kutipan dalam teks.

Browser secara default menerapkan margin ke blockquoteelemen. Chrome menerapkan margin kiri dan kanan 40px, serta margin atas dan bawah 10px.

The qtag HTML digunakan untuk kutipan inline.

Garis horisontal

Tidak benar-benar berdasarkan teks, tetapi hrtag sering digunakan di dalam halaman. Artinya horizontal rule, dan menambahkan garis horizontal di halaman.

Berguna untuk memisahkan bagian di halaman.

Blok kode

The codetag sangat berguna untuk menampilkan kode, karena browser memberikan monospace.

Biasanya itulah satu-satunya hal yang dilakukan browser. Ini adalah CSS yang diterapkan oleh Chrome:

code { font-family: monospace; } 

Tag ini biasanya dibungkus dalam pretag, karena codeelemen mengabaikan spasi dan jeda baris. Seperti ptagnya.

Chrome memberikan pregaya default ini:

pre { display: block; font-family: monospace; white-space: pre; margin: 1em 0px; } 

yang mencegah runtuhnya ruang putih dan menjadikannya elemen blok.

Daftar

Kami memiliki 3 jenis daftar:

  • daftar tidak berurutan
  • daftar memerintahkan
  • daftar definisi

Daftar tak berurutan dibuat menggunakan ultag. Setiap item dalam daftar dibuat dengan litag:

  • First
  • Second

Daftar yang dipesan serupa, hanya dibuat dengan oltag:

  1. First
  2. Second

Perbedaan antara keduanya adalah bahwa daftar berurutan memiliki nomor sebelum setiap item:

Daftar definisi sedikit berbeda. Anda memiliki istilah, dan definisinya:

Flavio
The name
Copes
The surname

Beginilah biasanya browser merendernya:

Saya harus mengatakan Anda jarang melihatnya di alam liar, pasti tidak sebanyak uldan ol, tetapi terkadang mereka mungkin berguna.

Tag teks lainnya

Ada sejumlah tag dengan tujuan penyajian:

  • yang marktag
  • yang instag
  • yang deltag
  • yang suptag
  • yang subtag
  • yang smalltag
  • yang itag
  • yang btag

Ini adalah contoh rendering visual yang diterapkan secara default oleh browser:

Anda mungkin bertanya-tanya, apa bbedanya dengan strong? Dan apa ibedanya dengan em?

Perbedaannya terletak pada makna semantiknya. Sementara bdan imerupakan petunjuk langsung pada browser untuk membuat teks tebal atau miring, strongdan emmemberi teks arti khusus, dan terserah browser untuk memberikan gaya. Yang kebetulan sama persis dengan bdan i, secara default. Meskipun Anda dapat mengubahnya menggunakan CSS.

Ada sejumlah tag lain yang jarang digunakan terkait dengan teks. Saya baru saja menyebutkan yang paling sering saya lihat.

TAUTAN

Tautan ditentukan menggunakan atag. Tujuan tautan diatur melalui hrefatributnya.

Contoh:

click here 

Di antara tag awal dan penutup kami memiliki teks tautan.

Contoh di atas adalah URL mutlak. Tautan juga berfungsi dengan URL relatif:

click here 

Dalam kasus ini, saat mengklik link, pengguna dipindahkan ke /testURL asal saat ini.

Hati-hati dengan /karakternya. Jika dihilangkan, alih-alih memulai dari aslinya, browser hanya akan menambahkan teststring ke URL saat ini.

Contoh, saya di halaman //flaviocopes.com/axios/dan saya memiliki link ini:

  • /test setelah diklik membawa saya ke //flaviocopes.com/test
  • test setelah diklik membawa saya ke //flaviocopes.com/axios/test

Tag tautan dapat menyertakan hal-hal lain di dalamnya, tidak hanya teks. Misalnya gambar:

atau elemen lainnya, kecuali tag lainnya .

Jika Anda ingin membuka link di tab baru, Anda dapat menggunakan targetatribut:

open in new tab 

TAG KONTAINER DAN STRUKTUR HALAMAN HTML

Tag wadah

HTML menyediakan sekumpulan tag penampung. Tag tersebut dapat berisi kumpulan tag lain yang tidak ditentukan.

Kita punya:

  • article
  • section
  • div

dan dapat membingungkan untuk memahami perbedaan di antara keduanya.

Mari kita lihat kapan harus menggunakan masing-masing.

article

Tag artikel mengidentifikasi hal yang dapat terlepas dari hal lain di halaman.

Misalnya daftar postingan blog di beranda.

Atau daftar tautan.

A blog post

Read more

Another blog post

Read more

Kami tidak terbatas pada daftar: artikel dapat menjadi elemen utama di halaman.

A blog post

Here is the content...

Di dalam articletag kita harus memiliki judul ( h1- h6) dan

section

Merupakan bagian dari dokumen. Setiap bagian memiliki tag heading ( h1- h6), kemudian bagian body .

Contoh:

A section of the page

...

Berguna untuk memecah artikel panjang menjadi beberapa bagian berbeda .

Tidak boleh digunakan sebagai elemen kontainer umum. divdibuat untuk ini.

div

div adalah elemen wadah generik:

 ... 

Anda sering menambahkan classatau idatribut ke elemen ini, untuk memungkinkannya diberi gaya menggunakan CSS.

Kami menggunakan divdi setiap tempat di mana kami membutuhkan wadah tetapi tag yang ada tidak cocok.

Tag terkait dengan halaman

nav

Tag ini digunakan untuk membuat markup yang mendefinisikan navigasi halaman. Ke dalamnya kami biasanya menambahkan ulatau oldaftar:

  1. Home
  2. Blog

aside

The asidetag digunakan untuk menambahkan sebuah konten yang terkait dengan konten utama.

Sebuah kotak tempat menambahkan kutipan, misalnya. Atau sidebar.

Contoh:

some text..

A quote..

other text...

Menggunakan asideadalah sinyal bahwa hal-hal yang dikandungnya bukan bagian dari aliran reguler dari bagian tempat tinggalnya.

header

The headertag merupakan bagian dari halaman yang pendahuluan. Misalnya dapat berisi satu atau lebih tag heading ( h1- h6), tagline untuk artikel, gambar.

Article title

...

main

The maintag merupakan bagian utama dari sebuah halaman:

 ....  

....

footer

The footertag digunakan untuk menentukan footer dari sebuah artikel, atau footer halaman:

 ....  

Footer notes..

FORMULIR

Formulir adalah cara Anda berinteraksi dengan halaman, atau aplikasi, yang dibuat dengan teknologi Web.

Anda memiliki sekumpulan kontrol, dan saat Anda mengirimkan formulir, baik dengan mengklik tombol "kirim" atau secara terprogram, browser akan mengirimkan data ke server.

Secara default, pengiriman data ini menyebabkan halaman dimuat ulang setelah data dikirim, tetapi menggunakan JavaScript Anda dapat mengubah perilaku ini (tidak akan dijelaskan caranya di buku ini).

Formulir dibuat menggunakan formtag:

 ...  

Secara default, formulir dikirimkan menggunakan metode GET HTTP. Yang memiliki kekurangan, dan biasanya Anda ingin menggunakan POST.

Anda dapat menyetel formulir untuk menggunakan POST saat dikirimkan dengan menggunakan methodatribut:

 ...  

Formulir dikirimkan, baik menggunakan GET atau POST, ke URL yang sama di mana ia berada.

Jadi jika formulir ada di //flaviocopes.com/contactshalaman, menekan tombol "kirim" akan membuat permintaan ke URL yang sama.

Yang mungkin mengakibatkan tidak terjadi apa-apa.

Anda memerlukan sesuatu di sisi server untuk menangani permintaan tersebut, dan biasanya Anda "mendengarkan" acara pengiriman formulir tersebut di URL khusus.

Anda dapat menentukan URL melalui actionparameter:

 ...  

Ini akan menyebabkan browser mengirimkan data formulir menggunakan POST ke /new-contactURL di asal yang sama.

Jika asal (protokol + domain + port) adalah //flaviocopes.com(port 80 adalah default), ini berarti data formulir akan dikirim ke //flaviocopes.com/new-contact.

Saya berbicara tentang data. Data yang mana?

Data disediakan oleh pengguna melalui serangkaian kontrol yang tersedia di platform Web:

  • kotak masukan (teks baris tunggal)
  • area teks (teks multiline)
  • kotak pilih (pilih satu opsi dari menu tarik-turun)
  • tombol radio (pilih satu opsi dari daftar yang selalu terlihat)
  • kotak centang (pilih nol, satu atau lebih opsi)
  • unggahan file
  • dan banyak lagi!

Mari kita perkenalkan masing-masing di ikhtisar bidang formulir berikut.

The inputtag

The inputlapangan salah satu elemen bentuk yang paling banyak digunakan. Ini juga merupakan elemen yang sangat serbaguna, dan dapat sepenuhnya mengubah perilaku berdasarkan typeatributnya.

Perilaku defaultnya adalah menjadi kontrol input teks satu baris:

Setara dengan menggunakan:

Seperti semua bidang lain yang mengikuti, Anda perlu memberi nama bidang agar isinya dikirim ke server ketika formulir dikirimkan:

The placeholderatribut digunakan untuk memiliki beberapa teks muncul, abu-abu terang, ketika lapangan kosong. Berguna untuk menambahkan petunjuk kepada pengguna tentang apa yang harus diketik:

Surel

Menggunakan type="email"akan memvalidasi sisi klien (di browser) email untuk kebenaran (kebenaran semantik, tidak memastikan alamat email ada) sebelum mengirimkan.

Kata sandi

Menggunakan type="password"akan membuat setiap kunci yang dimasukkan muncul sebagai tanda bintang (*) atau titik, berguna untuk bidang yang menghosting kata sandi.

Angka

Anda dapat membuat elemen masukan hanya menerima angka:

Anda dapat menentukan nilai minimum dan maksimum yang diterima:

The stepatribut membantu mengidentifikasi langkah-langkah antara nilai-nilai yang berbeda. Misalnya, ini menerima nilai antara 10 dan 50, pada langkah 5:

Bidang tersembunyi

Bidang dapat disembunyikan dari pengguna. Mereka masih akan dikirim ke server setelah pengiriman formulir:

Ini biasanya digunakan untuk menyimpan nilai seperti token CSRF, digunakan untuk keamanan dan identifikasi pengguna, atau bahkan untuk mendeteksi robot yang mengirim spam, menggunakan teknik khusus.

Itu juga bisa digunakan untuk mengidentifikasi bentuk dan aksinya.

Menyetel nilai default

Semua bidang tersebut menerima nilai yang telah ditentukan sebelumnya. Jika pengguna tidak mengubahnya, ini akan menjadi nilai yang dikirim ke server:

Jika Anda menetapkan tempat penampung, nilai itu akan muncul jika pengguna menghapus nilai bidang input:

Pengiriman formulir

The type="submit"lapangan tombol yang, sekali ditekan oleh pengguna, menyerahkan formulir:

The valueatribut menetapkan teks pada tombol, yang jika hilang menunjukkan "Kirim" text:

Validasi formulir

Browser menyediakan fungsionalitas validasi sisi klien ke formulir.

Anda dapat menyetel bidang sesuai kebutuhan, memastikannya diisi, dan menerapkan format tertentu untuk masukan setiap bidang.

Mari kita lihat kedua opsi tersebut.

Setel bidang sesuai kebutuhan

The requiredatribut membantu Anda dengan validasi. Jika bidang tidak disetel, validasi sisi klien gagal dan browser tidak mengirimkan formulir:

Terapkan format tertentu

Saya menjelaskan type="email"bidang di atas. Ini secara otomatis memvalidasi alamat email sesuai dengan format yang ditetapkan dalam spesifikasi.

Di type="number"lapangan, saya menyebutkan atribut minand maxuntuk membatasi nilai yang dimasukkan ke sebuah interval.

Anda bisa berbuat lebih banyak.

Anda dapat menerapkan format tertentu di bidang apa pun.

The patternatribut memberikan Anda kemampuan untuk mengatur ekspresi reguler untuk memvalidasi nilai terhadap.

Saya sarankan membaca Panduan Ekspresi Reguler saya di flaviocopes.com/javascript-regular-expressions/.

pattern = "//.*"

Bidang lain

Unggahan file

Anda dapat memuat file dari komputer lokal Anda dan mengirimkannya ke server menggunakan type="file"elemen input:

Anda dapat melampirkan banyak file:

Anda dapat menentukan satu atau lebih jenis file yang diperbolehkan menggunakan acceptatribut. Ini menerima gambar:

Anda dapat menggunakan tipe MIME tertentu, seperti application/jsonatau mengatur ekstensi file seperti .pdf. Atau atur beberapa ekstensi file, seperti ini:

Tombol

Bidang type="button"masukan dapat digunakan untuk menambahkan tombol tambahan ke formulir, yang bukan tombol kirim:

Mereka digunakan untuk melakukan sesuatu secara terprogram, menggunakan JavaScript.

Ada bidang khusus yang dirender sebagai tombol, yang tindakan khususnya adalah menghapus seluruh formulir dan mengembalikan status bidang ke awal:

Tombol radio

Tombol radio digunakan untuk membuat serangkaian pilihan, yang salah satunya ditekan dan yang lainnya dinonaktifkan.

Namanya berasal dari radio mobil tua yang memiliki antarmuka seperti ini.

Anda mendefinisikan satu set type="radio"input, semuanya dengan nameatribut yang sama , dan valueatribut yang berbeda :

Setelah formulir dikirimkan, colorproperti data akan memiliki satu nilai tunggal.

Selalu ada satu elemen yang dicentang. Item pertama adalah yang dicentang secara default.

Anda dapat menyetel nilai yang telah dipilih sebelumnya menggunakan checkedatribut. Anda hanya dapat menggunakannya sekali per grup input radio.

Kotak centang

Mirip dengan kotak radio, tetapi memungkinkan beberapa nilai dipilih, atau tidak sama sekali.

Anda mendefinisikan satu set type="checkbox"input, semuanya dengan nameatribut yang sama , dan valueatribut yang berbeda :

Semua kotak centang tersebut tidak akan dicentang secara default. Gunakan checkedatribut untuk mengaktifkannya pada pemuatan halaman.

Karena bidang input ini memungkinkan beberapa nilai, setelah formulir dikirimkan, nilai akan dikirim ke server sebagai array.

Tanggal dan waktu

Kami memiliki beberapa jenis masukan untuk menerima nilai tanggal.

Bidang type="date"masukan memungkinkan pengguna untuk memasukkan tanggal, dan menunjukkan pemilih tanggal jika diperlukan:

Bidang type="time"masukan memungkinkan pengguna untuk memasukkan waktu, dan menunjukkan pemilih waktu jika diperlukan:

Kolom type="month"input memungkinkan pengguna memasukkan satu bulan dan satu tahun:

Kolom type="week"input memungkinkan pengguna untuk memasukkan satu minggu dan satu tahun:

Semua bidang tersebut memungkinkan untuk membatasi rentang dan langkah di antara setiap nilai. Saya sarankan untuk memeriksa MDN untuk mengetahui detail kecil tentang penggunaannya.

The type="datetime-local"lapangan memungkinkan Anda memilih tanggal dan waktu.

Ini adalah halaman untuk menguji semuanya: //codepen.io/flaviocopes/pen/ZdWQPm

Pemilih warna

Anda dapat mengizinkan pengguna memilih warna menggunakan type="color"elemen:

Anda menetapkan nilai default menggunakan valueatribut:

Browser akan menangani menampilkan pemilih warna kepada pengguna.

Jarak

Elemen input ini menunjukkan elemen slider. Orang dapat menggunakannya untuk berpindah dari nilai awal ke nilai akhir:

Anda dapat memberikan langkah opsional:

Telepon

Bidang type="tel"masukan digunakan untuk memasukkan nomor telepon:

Nilai jual utama penggunaan telover textada di ponsel, di mana perangkat dapat memilih untuk menampilkan keyboard numerik.

Tentukan patternatribut untuk validasi tambahan:

URL

The type="url"lapangan digunakan untuk memasukkan URL.

Anda dapat memvalidasinya menggunakan patternatribut:

The textareatag

Para textareaelemen memungkinkan pengguna untuk memasukkan teks multi-line. Dibandingkan input, ini membutuhkan tag penutup:

Anda dapat mengatur dimensi menggunakan CSS, tetapi juga menggunakan atribut rowsand cols:

Seperti tag formulir lainnya, nameatribut menentukan nama dalam data yang dikirim ke server:

The selecttag

Tag ini digunakan untuk membuat menu drop-down.

Pengguna dapat memilih salah satu opsi yang tersedia.

Setiap opsi dibuat menggunakan optiontag. Anda menambahkan nama untuk dipilih, dan nilai untuk setiap opsi:

 Red Yellow  

Anda dapat menyetel opsi dinonaktifkan:

 Red Yellow  

Anda dapat memiliki satu opsi kosong:

 None Red Yellow  

Opsi dapat dikelompokkan menggunakan optgrouptag. Setiap grup opsi memiliki labelatribut:

  Red Yellow Blue   Green Pink   

TABEL

Pada hari-hari awal, tabel web adalah bagian yang sangat penting dari tata letak bangunan.

Kemudian mereka digantikan oleh CSS dan kemampuan tata letaknya, dan hari ini kami memiliki alat canggih seperti CSS Flexbox dan CSS Grid untuk membangun tata letak. Tabel sekarang digunakan hanya untuk, coba tebak, membangun tabel!

The tabletag

Anda menentukan tabel menggunakan tabletag:

Di dalam tabel kami akan menentukan datanya. Kami bernalar dalam hal baris, yang berarti kami menambahkan baris ke dalam tabel (bukan kolom). Kami akan menentukan kolom di dalam satu baris.

Baris

Sebuah baris ditambahkan menggunakan trtag, dan itulah satu-satunya hal yang dapat kita tambahkan ke dalam tableelemen:

Ini adalah tabel dengan 3 baris.

Baris pertama dapat berperan sebagai header.

Tajuk kolom

Header tabel berisi nama kolom, biasanya dengan font tebal.

Pikirkan tentang dokumen Excel / Google Sheets. A-B-C-D...Header atas .

Kami mendefinisikan tajuk menggunakan thtag:

Column 1Column 2Column 3

Isi tabel

Isi tabel ditentukan menggunakan tdtag, di dalam trelemen lain :

Column 1Column 2Column 3
Row 1 Column 1Row 1 Column 2Row 1 Column 3
Row 2 Column 1Row 2 Column 2Row 2 Column 3

Beginilah cara browser merendernya, jika Anda tidak menambahkan gaya CSS:

Menambahkan CSS ini:

th, td { padding: 10px; border: 1px solid #333; } 

membuat tabel terlihat lebih seperti tabel yang benar:

Rentang kolom dan baris

Sebuah baris dapat memutuskan untuk menjangkau lebih dari 2 kolom atau lebih, menggunakan colspanatribut:

Column 1Column 2Column 3
Row 1 Columns 1-2Row 1 Column 3
Row 2 Columns 1-3

Atau dapat menjangkau lebih dari 2 baris atau lebih, menggunakan rowspanatribut:

Column 1Column 2Column 3
Rows 1-2 Columns 1-2Row 1 Column 3
Row 2 Column 3

Judul baris

Sebelum saya menjelaskan bagaimana Anda dapat memiliki judul kolom, menggunakan thtag di dalam trtag pertama pada tabel.

Anda dapat menambahkan thtag sebagai elemen pertama di dalam tryang bukan yang pertama trdari tabel, untuk memiliki judul baris:

Column 2Column 3
Row 1Col 2Col 3
Row 2Col 2Col 3

Lebih banyak tag untuk mengatur tabel

Anda dapat menambahkan 3 tag lagi ke dalam tabel, agar lebih teratur.

Ini yang terbaik saat menggunakan tabel besar. Dan untuk mendefinisikan header dan footer dengan benar juga.

Tag tersebut adalah

  • thead
  • tbody
  • tfoot

Mereka membungkus trtag untuk menentukan dengan jelas bagian berbeda dari tabel. Berikut contohnya:

Column 2Column 3
Row 1Col 2Col 3
Row 2Col 2Col 3
Footer of Col 1Footer of Col 2

Judul tabel

Sebuah tabel harus memiliki captiontag yang menjelaskan isinya. Tag itu harus diletakkan segera setelah tabletag pembuka :

 Dogs age 
DogAge
Roger7

TAG MULTIMEDIA: AUDIODANVIDEO

Pada bagian ini saya ingin menunjukkan kepada Anda tag audiodan video.

The audiotag

Tag ini memungkinkan Anda untuk menyematkan konten audio di halaman HTML Anda.

Elemen ini dapat mengalirkan audio, mungkin menggunakan mikrofon getUserMedia(), atau dapat memutar sumber audio yang Anda rujuk menggunakan srcatribut:

Secara default, browser tidak menampilkan kontrol apa pun untuk elemen ini. Yang berarti audio hanya akan diputar jika disetel ke putar otomatis (lebih lanjut tentang ini nanti) dan pengguna tidak dapat melihat cara menghentikannya atau mengontrol volume atau bergerak melalui trek.

Untuk menampilkan kontrol built-in, Anda dapat menambahkan controlsatribut:

Kontrol dapat memiliki kulit khusus.

Anda dapat menentukan jenis MIME file audio menggunakan typeatribut. Jika tidak disetel, browser akan mencoba menentukannya secara otomatis:

File audio secara default tidak diputar secara otomatis. Tambahkan autoplayatribut untuk memutar audio secara otomatis:

Catatan: browser seluler tidak mengizinkan putar otomatis

The loopatribut restart bermain audio pada 0:00 jika diatur; jika tidak, jika tidak ada, audio berhenti di akhir file:

Anda juga dapat memutar file audio tanpa suara menggunakan mutedatribut (tidak begitu yakin apa gunanya ini):

Dengan menggunakan JavaScript, Anda dapat mendengarkan berbagai peristiwa yang terjadi pada suatu audioelemen, yang paling dasar adalah:

  • play saat file mulai diputar
  • pause saat pemutaran audio dijeda
  • playing saat audio dilanjutkan dari jeda
  • ended saat akhir file audio tercapai

The videotag

Tag ini memungkinkan Anda untuk menyematkan konten video di halaman HTML Anda.

Elemen ini dapat mengalirkan video, menggunakan webcam melalui getUserMedia()atau WebRTC , atau dapat memutar sumber video yang Anda rujuk menggunakan srcatribut:

Secara default, browser tidak menampilkan kontrol apa pun untuk elemen ini, hanya videonya.

Yang berarti video hanya akan diputar jika disetel ke putar otomatis (lebih lanjut tentang ini nanti) dan pengguna tidak dapat melihat cara menghentikannya, menjedanya, mengontrol volume atau melompat ke posisi tertentu dalam video.

Untuk menampilkan kontrol built-in, Anda dapat menambahkan controlsatribut:

Kontrol dapat memiliki kulit khusus.

Anda dapat menentukan jenis MIME dari file video menggunakan typeatribut. Jika tidak disetel, browser akan mencoba menentukannya secara otomatis:

File video secara default tidak diputar secara otomatis. Tambahkan autoplayatribut untuk memutar video secara otomatis:

Beberapa browser juga memerlukan mutedatribut untuk memutar otomatis. Video diputar otomatis hanya jika dibisukan:

The loopatribut restart bermain video pada 0:00 jika set; jika tidak, jika tidak ada, video akan berhenti di akhir file:

Anda dapat mengatur gambar menjadi gambar poster:

Jika tidak ada, browser akan menampilkan bingkai pertama video segera setelah tersedia.

Anda dapat menyetel atribut widthand heightuntuk menyetel ruang yang dibutuhkan elemen sehingga browser dapat menjelaskannya dan tidak mengubah tata letak saat akhirnya dimuat. Dibutuhkan nilai numerik, diekspresikan dalam piksel.

Dengan menggunakan JavaScript, Anda dapat mendengarkan berbagai peristiwa yang terjadi pada suatu videoelemen, yang paling dasar adalah:

  • play saat file mulai diputar
  • pause saat video dijeda
  • playing saat video dilanjutkan dari jeda
  • ended saat akhir file video tercapai

IFRAMES

The iframetag memungkinkan kita untuk konten embed berasal dari asal-usul lain (situs lain) ke dalam halaman web kami.

Secara teknis, iframe membuat konteks penelusuran bertingkat baru. Artinya, apa pun di iframe tidak mengganggu halaman induk, begitu juga sebaliknya. JavaScript dan CSS tidak "bocor" ke / dari iframe.

Banyak situs menggunakan iframe untuk melakukan berbagai hal. Anda mungkin terbiasa dengan Codepen, Glitch, atau situs lain yang memungkinkan Anda membuat kode di satu bagian halaman, dan Anda melihat hasilnya di kotak. Itu iframe.

Anda membuatnya dengan cara ini:

Anda juga dapat memuat URL absolut:

Anda dapat mengatur parameter lebar dan tinggi (atau mengaturnya menggunakan CSS) jika tidak iframe akan menggunakan default, kotak 300x150 piksel:

Srcdoc

The srcdocatribut memungkinkan Anda menentukan beberapa HTML inline untuk ditampilkan. Ini adalah alternatif src, tetapi terbaru dan tidak didukung di Edge 18 dan lebih rendah, dan di IE:

Bak pasir

The sandboxAtribut memungkinkan kita untuk membatasi operasi diperbolehkan dalam iframe.

Jika kita menghilangkannya, semuanya diperbolehkan:

Jika kami menyetelnya ke "", tidak ada yang diizinkan:

Kita dapat memilih apa yang diizinkan dengan menambahkan opsi di sandboxatribut. Anda dapat mengizinkan lebih dari satu dengan menambahkan spasi di antaranya. Berikut daftar lengkap opsi yang dapat Anda gunakan:

  • allow-forms: memungkinkan untuk mengirimkan formulir
  • allow-modalsmemungkinkan untuk membuka jendela modals, termasuk memanggil alert()JavaScript
  • allow-orientation-lock memungkinkan untuk mengunci orientasi layar
  • allow-popupsizinkan popup, penggunaan, window.open()dan target="_blank"tautan
  • allow-same-origin perlakukan sumber daya yang dimuat sebagai asal yang sama
  • allow-scripts memungkinkan iframe yang dimuat menjalankan skrip (tetapi tidak membuat munculan).
  • allow-top-navigation memberikan akses ke iframe ke konteks penelusuran tingkat atas

Mengizinkan

Saat ini eksperimental dan hanya didukung oleh browser berbasis Chromium, ini adalah masa depan berbagi sumber daya antara jendela induk dan iframe.

Ini mirip dengan sandboxatributnya, tetapi memungkinkan kami mengizinkan fitur tertentu, termasuk:

  • accelerometer memberikan akses ke antarmuka Akselerometer API Sensor
  • ambient-light-sensor memberikan akses ke antarmuka Sensors API AmbientLightSensor
  • autoplay memungkinkan untuk memutar file video dan audio secara otomatis
  • camera memungkinkan untuk mengakses kamera dari API getUserMedia
  • display-capture memungkinkan untuk mengakses konten layar menggunakan API getDisplayMedia
  • fullscreen memungkinkan untuk mengakses mode layar penuh
  • geolocation memungkinkan untuk mengakses API Geolokasi
  • gyroscope memberikan akses ke antarmuka Giroskop API Sensor
  • magnetometer memberikan akses ke antarmuka Magnetometer API Sensor
  • microphone memberikan akses ke mikrofon perangkat menggunakan API getUserMedia
  • midi mengizinkan akses ke Web MIDI API
  • payment memberikan akses ke API Permintaan Pembayaran
  • speaker memungkinkan akses untuk memutar audio melalui speaker perangkat
  • usb memberikan akses ke API WebUSB.
  • vibrate memberikan akses ke API Getaran
  • vr memberikan akses ke API WebVR

Perujuk

Saat memuat iframe, browser mengirimkan informasi penting tentang siapa yang memuatnya di Refererheader (perhatikan satu r, salah ketik yang harus kita jalani).

Salah eja pengarah berasal dari proposal asli oleh ilmuwan komputer Phillip Hallam-Baker untuk memasukkan bidang ini ke dalam spesifikasi HTTP. Ejaan yang salah ditetapkan pada batu pada saat dimasukkan ke dalam dokumen standar Request for Comments RFC 1945

The referrerpolicyatribut memungkinkan kita mengatur pengarah untuk mengirim ke iframe ketika loading itu. Pengarah adalah header HTTP yang memungkinkan halaman mengetahui siapa yang memuatnya. Ini adalah nilai yang diizinkan:

  • no-referrer-when-downgrade itu default, dan tidak mengirim perujuk ketika halaman saat ini dimuat melalui HTTPS dan iframe dimuat pada protokol HTTP
  • no-referrer tidak mengirim tajuk perujuk
  • origin perujuk dikirim, dan hanya berisi asal (port, protokol, domain), bukan jalur asal + yang merupakan default
  • origin-when-cross-originsaat memuat dari asal yang sama (port, protokol, domain) di iframe, perujuk dikirim dalam bentuk lengkapnya (asal + jalur). Jika tidak, hanya asal yang dikirim
  • same-origin perujuk dikirim hanya saat memuat dari asal yang sama (porta, protokol, domain) di iframe
  • strict-originmengirimkan asal sebagai perujuk jika halaman saat ini dimuat melalui HTTPS dan iframe juga dimuat di protokol HTTPS. Tidak mengirimkan apa pun jika iframe dimuat melalui HTTP
  • strict-origin-when-cross-originmengirimkan jalur asal + sebagai perujuk saat mengerjakan tempat asal yang sama. Mengirimkan asal sebagai perujuk jika halaman saat ini dimuat melalui HTTPS dan iframe juga dimuat pada protokol HTTPS. Tidak mengirimkan apa pun jika iframe dimuat melalui HTTP
  • unsafe-url: mengirimkan jalur asal + sebagai perujuk bahkan saat memuat sumber daya dari HTTP dan laman saat ini dimuat melalui HTTPS

GAMBAR-GAMBAR

Gambar dapat ditampilkan menggunakan imgtag.

Tag ini menerima srcatribut, yang kami gunakan untuk mengatur sumber gambar:

Kita bisa menggunakan banyak gambar. Yang paling umum adalah PNG, JPEG, GIF, SVG, dan yang terbaru WebP.

Standar HTML membutuhkan altatribut yang ada, untuk mendeskripsikan gambar. Ini digunakan oleh pembaca layar dan juga oleh bot mesin telusur:

Anda dapat menyetel atribut widthand heightuntuk menyetel ruang yang dibutuhkan elemen, sehingga browser dapat memperhitungkannya dan tidak mengubah tata letak saat dimuat penuh. Dibutuhkan nilai numerik, diekspresikan dalam piksel.

The figuretag

The figuretag sering digunakan bersama dengan imgtag.

figureadalah tag semantik yang sering digunakan saat ingin menampilkan gambar dengan caption. Anda menggunakannya seperti ini:

 A nice dog  

The figcaptiontag membungkus teks keterangan.

Gambar responsif menggunakan srcset

The srcsetatribut memungkinkan Anda untuk mengatur gambar responsif bahwa browser dapat menggunakan tergantung pada kepadatan pixel atau lebar jendela, sesuai dengan preferensi Anda. Dengan cara ini, ia hanya dapat mengunduh sumber daya yang diperlukan untuk merender laman, tanpa mengunduh gambar yang lebih besar jika ada di perangkat seluler, misalnya.

Berikut contohnya, kami memberikan 4 gambar tambahan untuk 4 ukuran layar yang berbeda:

Di dalam srcsetkita menggunakan wukuran untuk menunjukkan lebar jendela.

Karena kami melakukannya, kami juga perlu menggunakan sizesatribut:

Dalam contoh ini, (max-width: 500px) 100vw, (max-width: 900px) 50vw, 800pxstring dalam sizesatribut mendeskripsikan ukuran gambar dalam kaitannya dengan viewport, dengan beberapa ketentuan yang dipisahkan oleh titik koma.

Kondisi media max-width: 500pxmenyetel ukuran gambar sesuai dengan lebar area pandang. Singkatnya, jika ukuran jendela <500px, itu membuat gambar 100% dari ukuran jendela.

Jika ukuran jendela lebih besar tetapi < 900px, ini membuat gambar menjadi 50% dari ukuran jendela.

Dan jika lebih besar lagi, itu membuat gambar menjadi 800px.

The vwsatuan ukuran dapat baru bagi Anda, dan singkatnya kita dapat mengatakan bahwa 1 vwadalah 1% dari lebar jendela, sehingga 100vw100% dari lebar jendela.

Situs web yang berguna untuk menghasilkan srcsetgambar yang semakin kecil adalah //responsivebreakpoints.com/.

The picturetag

HTML juga memberi kita picturetag, yang fungsinya sangat mirip srcset, dan perbedaannya sangat tidak kentara.

Anda gunakan picturesaat alih-alih hanya menyajikan versi file yang lebih kecil, Anda benar-benar ingin mengubahnya. Atau sajikan format gambar yang berbeda.

Kasus penggunaan terbaik yang saya temukan adalah saat menyajikan gambar WebP, yang formatnya masih belum didukung secara luas. Dalam picturetag, Anda menentukan daftar gambar, dan gambar tersebut akan digunakan secara berurutan, jadi pada contoh berikutnya, browser yang mendukung WebP akan menggunakan gambar pertama, dan kembali ke JPG jika tidak:

The sourcetag mendefinisikan satu (atau lebih) format untuk gambar. The imgtag adalah fallback dalam kasus browser sangat tua dan tidak mendukung picturetag.

Pada sourcetag di dalam pictureAnda dapat menambahkan mediaatribut untuk menyetel kueri media.

Contoh berikut jenis karya seperti contoh di atas dengan srcset:

Tapi itu bukan kasus penggunaannya, karena seperti yang Anda lihat, ini jauh lebih bertele-tele.

The picturetag baru-baru ini tapi sekarang didukung oleh semua browser utama kecuali Opera Mini dan IE (semua versi).

AKSESIBILITAS

Penting bagi kami untuk mendesain HTML dengan mempertimbangkan aksesibilitas.

Memiliki HTML yang dapat diakses berarti penyandang disabilitas dapat menggunakan Web. Ada pengguna yang benar-benar buta atau tunanetra, orang-orang dengan masalah gangguan pendengaran dan banyak kecacatan lainnya.

Sayangnya topik ini tidak mengambil kepentingan yang dibutuhkannya, dan sepertinya tidak sekeren yang lain.

Bagaimana jika seseorang tidak dapat melihat halaman Anda, tetapi masih ingin membaca kontennya? Pertama, bagaimana mereka melakukannya? Mereka tidak dapat menggunakan mouse, mereka menggunakan sesuatu yang disebut pembaca layar . Anda tidak perlu membayangkan itu. Anda dapat mencobanya sekarang: Google menyediakan Ekstensi ChromeVox Chrome gratis. Aksesibilitas juga harus menjaga agar alat dapat dengan mudah memilih elemen atau menavigasi halaman.

Halaman web dan aplikasi Web tidak selalu dibuat dengan aksesibilitas sebagai salah satu tujuan pertama mereka, dan mungkin versi 1 yang dirilis tidak dapat diakses tetapi dimungkinkan untuk membuat halaman web dapat diakses setelah fakta. Lebih cepat lebih baik, tapi tidak ada kata terlambat.

Ini penting dan di negara saya, situs web yang dibuat oleh pemerintah atau organisasi publik lainnya harus dapat diakses.

Apa artinya membuat HTML dapat diakses? Izinkan saya mengilustrasikan hal-hal utama yang perlu Anda pikirkan.

Catatan: ada beberapa hal lain yang perlu diperhatikan, yang mungkin masuk dalam topik CSS, seperti warna, kontras, dan font. Atau bagaimana membuat gambar SVG dapat diakses. Saya tidak membicarakannya di sini.

Gunakan HTML semantik

HTML semantik sangat penting dan itu salah satu hal utama yang perlu Anda jaga. Izinkan saya mengilustrasikan beberapa skenario umum.

Penting untuk menggunakan struktur yang benar untuk tag heading. Yang paling penting adalah h1, dan Anda menggunakan angka yang lebih tinggi untuk yang kurang penting, tetapi semua tajuk dengan tingkat yang sama harus memiliki arti yang sama (pikirkan tentang itu seperti struktur pohon)

h1 h2 h3 h2 h2 h3 h4 

Gunakan strongdan emsebagai ganti dari bdan i. Secara visual keduanya terlihat sama, tetapi 2 yang pertama memiliki arti yang lebih terkait dengannya. bdan ilebih banyak elemen visual.

Daftar itu penting. Pembaca layar dapat mendeteksi daftar dan memberikan ringkasan, lalu membiarkan pengguna memilih untuk masuk ke dalam daftar atau tidak.

Sebuah tabel harus memiliki captiontag yang menjelaskan isinya:

 Dogs age 
DogAge
Roger7

Gunakan altatribut untuk gambar

Semua gambar harus memiliki alttag yang menjelaskan konten gambar. Ini bukan hanya praktik yang baik, ini diwajibkan oleh standar HTML dan HTML Anda tanpanya tidak akan divalidasi.

Ini juga bagus untuk mesin pencari, jika itu adalah insentif bagi Anda untuk menambahkannya.

Gunakan roleatributnya

The roleAtribut memungkinkan Anda menetapkan peran spesifik untuk berbagai elemen dalam halaman Anda.

Anda dapat menetapkan banyak peran berbeda: pelengkap, daftar, listitem, utama, navigasi, wilayah, tab, peringatan, aplikasi, artikel, spanduk, tombol, sel, kotak centang, info konten, dialog, dokumen, umpan, gambar, formulir, kisi, gridcell, heading, img, listbox, row, rowgroup, search, switch, table, tabpanel, textbox, timer.

Banyak sekali dan untuk referensi lengkap masing-masing saya berikan link MDN ini. Tetapi Anda tidak perlu menetapkan peran ke setiap elemen di halaman. Pembaca layar dalam banyak kasus dapat menyimpulkan dari tag HTML. Misalnya Anda tidak perlu menambahkan tag peran untuk tag semantik seperti nav, button, form.

Mari kita ambil navcontoh tag. Anda dapat menggunakannya untuk menentukan navigasi halaman seperti ini:

  • Home
  • Blog

Jika Anda terpaksa menggunakan divtag, bukan nav, Anda akan menggunakan navigationperan:

  • Home
  • Blog

Jadi di sini Anda mendapat contoh praktis: roledigunakan untuk menetapkan nilai yang berarti ketika tag belum menyampaikan artinya.

Gunakan tabindexatributnya

The tabindexatribut memungkinkan Anda untuk mengubah urutan bagaimana menekan tombol Tab menyeleksi "dipilih" elemen. Secara default, hanya tautan dan elemen formulir yang "dapat dipilih" dengan navigasi menggunakan tombol Tab (dan Anda tidak perlu menyetelnya tabindex).

Menambahkan tabindex="0"membuat elemen dapat dipilih:

 ... 

Menggunakan tabindex="-1"sebagai gantinya menghapus elemen dari navigasi berbasis tab ini, dan ini bisa sangat berguna.

Gunakan ariaatributnya

ARIA adalah akronim yang berarti Aplikasi Internet Kaya yang Dapat Diakses dan mendefinisikan semantik yang dapat diterapkan ke elemen.

aria-label

Atribut ini digunakan untuk menambahkan string untuk mendeskripsikan elemen.

Contoh:

...

Saya menggunakan atribut ini di sidebar blog saya, di mana saya memiliki kotak input untuk pencarian tanpa label eksplisit, karena memiliki atribut placeholder.

aria-labelledby

Atribut ini menetapkan korelasi antara elemen saat ini dan elemen yang melabelinya.

Jika Anda tahu bagaimana sebuah inputelemen dapat dikaitkan dengan sebuah labelelemen, itu serupa.

Kami melewati id item yang menggambarkan elemen saat ini.

Contoh:

The description of the product

...

aria-describedby

Atribut ini memungkinkan kita mengaitkan elemen dengan elemen lain yang berfungsi sebagai deskripsi.

Contoh:

Pay now Clicking the button will send you to our Stripe form! 

Gunakan aria-hidden untuk menyembunyikan konten

Saya menyukai desain minimalis di situs saya. Blog saya misalnya kebanyakan hanya konten, dengan beberapa link di sidebar. Tetapi beberapa hal di sidebar hanyalah elemen visual yang tidak menambah pengalaman orang yang tidak dapat melihat halaman. Seperti gambar logo saya, atau pemilih tema gelap / terang.

Menambahkan "atribut akan memberi tahu pembaca layar untuk mengabaikan elemen itu.

Tempat mempelajari lebih lanjut

Ini hanyalah pengantar topik. Untuk mempelajari lebih lanjut, saya merekomendasikan sumber daya ini:

  • //www.w3.org/TR/WCAG20/
  • //webaim.org
  • //developers.google.com/web/fundamentals/accessibility/

Anda mencapai bagian akhir dari Buku Pegangan HTML.

Klik di sini untuk mendapatkan versi PDF / ePub / Mobi dari buku ini untuk dibaca secara offline !