www.awdev.eu.org
Open in
urlscan Pro
2a00:1450:4001:827::2013
Public Scan
URL:
https://www.awdev.eu.org/2022/04/pelajaran9.html
Submission: On May 01 via manual from ID — Scanned from DE
Submission: On May 01 via manual from ID — Scanned from DE
Form analysis
1 forms found in the DOMhttps://www.awdev.eu.org/search
<form action="https://www.awdev.eu.org/search" class="srchF" target="_top">
<input aria-label="Cari blog ini" autocomplete="off" id="searchIn" minlength="3" name="q" placeholder="Try 'Adventure'" required="required" value="">
<span class="sb">
<svg class="line" viewBox="0 0 24 24">
<g transform="translate(2.000000, 2.000000)">
<circle cx="9.76659044" cy="9.76659044" r="8.9885584"></circle>
<line x1="16.0183067" x2="19.5423342" y1="16.4851259" y2="20.0000001"></line>
</g>
</svg>
</span>
<button aria-label="Clear" class="sb" data-text="✕" type="reset"></button>
<span class="fCls"></span>
</form>
Text Content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Test link AWDEV * * * About * Disclaimer * Privacy Policy * Terms and Conditions Awdev * * * * * * * Langganan * Download this theme * SITEMAP * Comunity Awdev * Partner Awdev * Lainnya… * AFFILIASI * PUBLISHER * Contact Us Beranda E-LEARNING PELAJARAN 9 | MENAMBAHKAN MEDIA | E-LEARNING AWDEV DEVOLOPER FREE KURSUS ONLINE 19 min read PELAJARAN 9 | MENAMBAHKAN MEDIA | E-LEARNING AWDEV DEVOLOPER FREE KURSUS ONLINE E-LEARNING WWW.AWDEV.EU.ORG Dalam Pelajaran ini9 HTML Menambahkan Gambar Menambahkan Audio Menambahkan Video Menambahkan Bingkai Sebaris Angka & Keterangan MEMBAGIKAN Bagikan di Twitter Bagikan di Facebook Bagikan di Google+ Bangun dan terapkan aplikasi Node.js, Java, dan Python dengan Azure.iklan melalui Karbon Kami menelusuri Internet untuk mencari konten yang menarik dan informatif, yang biasanya kami temukan dalam bentuk teks biasa. Untuk menemani teks biasa ini, HTML menyediakan cara untuk menyematkan media kaya dalam bentuk gambar, trek audio, dan video, serta untuk menyematkan konten dari halaman web lain dalam bentuk bingkai sebaris. Kemampuan untuk memasukkan gambar, trek audio, video, dan bingkai sebaris dalam situs web telah ada selama beberapa waktu. Dukungan browser untuk gambar dan bingkai sebaris secara umum cukup baik. Dan sementara kemampuan untuk menambahkan trek audio dan video ke situs web telah ada selama bertahun-tahun, prosesnya cukup rumit. Untungnya, proses ini telah meningkat dan jauh lebih mudah dengan dukungan langsung dari HTML. Hari ini, kita dapat dengan bebas menggunakan gambar, audio, video, dan bingkai sebaris mengetahui bahwa konten ini didukung di semua browser utama. Menambahkan Gambar Untuk menambahkan gambar ke halaman, kami menggunakan <img>elemen inline. Elemen <img>tersebut adalah elemen yang berdiri sendiri, atau kosong, yang berarti elemen tersebut tidak membungkus konten lain dan ada sebagai satu tag. Agar <img>elemen berfungsi, atribut dan nilai src harus disertakan untuk menentukan sumber gambar. Nilai srcatribut adalah URL, biasanya relatif terhadap server tempat situs web dihosting. Dalam hubungannya dengan srcatribut, atribut alt(teks alternatif), yang menjelaskan konten gambar, harus diterapkan. Nilai altatribut diambil oleh mesin telusur dan teknologi bantu untuk membantu menyampaikan tujuan gambar. Teks altakan ditampilkan di tempat gambar jika karena alasan tertentu gambar tidak tersedia. 1 2<img src="dog.jpg" alt="A black, brown, and white dog wearing a kerchief"> Menambahkan Demo Gambar Gambar 9 Teks alternatif, “Anjing hitam, coklat, dan putih mengenakan sapu tangan,” ditampilkan sebagai pengganti gambar yang hilang Format Gambar yang Didukung Gambar datang dalam berbagai format file yang berbeda, dan setiap browser mungkin mendukung (atau tidak mendukung) format yang berbeda. Pada umumnya, format online yang paling umum didukung adalah gif, jpg, dan pnggambar. Dari jumlah tersebut, format yang paling banyak digunakan saat ini adalah jpgdan png. Format jpgini memberikan gambar berkualitas dengan jumlah warna yang tinggi sambil mempertahankan ukuran file yang layak, ideal untuk waktu pemuatan yang lebih cepat. Formatnya pngbagus untuk gambar dengan transparansi atau jumlah warna yang rendah. Kami paling sering melihat jpggambar yang digunakan untuk foto dan pnggambar yang digunakan untuk ikon atau pola latar belakang. Ukuran Gambar Penting untuk mengidentifikasi ukuran gambar untuk memberi tahu browser seberapa besar gambar yang seharusnya sebelum halaman dimuat; sehingga browser dapat memesan ruang untuk gambar dan membuat halaman lebih cepat. Ada beberapa cara berbeda untuk mengukur gambar agar berfungsi dengan baik di halaman. Salah satu opsinya adalah menggunakan atribut widthdan langsung di dalam tag dalam HTML.height<img> Selain itu, ukuran gambar dapat menggunakan properti widthdan heightdi CSS. Ketika atribut HTML dan properti CSS digunakan, atribut CSS akan lebih diutamakan daripada atribut HTML. Menentukan lebar atau tinggi akan menyebabkan dimensi lain menyesuaikan secara otomatis untuk mempertahankan rasio aspek gambar. Sebagai contoh, jika kita ingin gambar menjadi 200tinggi piksel tetapi tidak terlalu memperhatikan seberapa lebarnya, kita dapat mengatur heightke 200piksel, dan lebar gambar akan menyesuaikannya. Menyetel a widthdan heightakan berfungsi juga; namun, melakukannya dapat merusak rasio aspek gambar, menyebabkannya tampak terdistorsi. 1 2 3 4 5img { height: 200px; width: 200px; } Ukuran Gambar Demo Meskipun menggunakan atribut widthdan heightsecara langsung dalam HTML memberikan beberapa nilai semantik dengan memperhatikan ukuran asli gambar, mungkin sulit untuk mengelola banyak gambar yang semuanya harus berukuran sama. Dalam acara ini, biasanya menggunakan CSS untuk mengubah ukuran gambar. Memosisikan Gambar Kita dapat menggunakan sejumlah pendekatan berbeda untuk memposisikan gambar pada halaman web. Secara default, gambar diposisikan sebagai elemen level inline; namun, posisinya dapat diubah menggunakan CSS, khususnya properti float, display, dan model kotak, termasuk padding, border, dan margin. Gambar Pemosisian Sebaris Elemen <img>ini secara default merupakan elemen level inline. Menambahkan gambar tanpa gaya apa pun ke halaman akan memposisikan gambar itu dalam baris yang sama dengan konten yang mengelilinginya. Selain itu, ketinggian garis tempat gambar muncul akan diubah agar sesuai dengan ketinggian gambar, yang dapat membuat celah vertikal besar di dalam garis itu. 1 2<p>Gatsby is a black, brown, and white hound mix puppy who loves howling at fire trucks and collecting belly rubs. <img src="dog.jpg" alt="A black, brown, and white dog wearing a kerchief"> Although he spends most of his time sleeping he is also quick to chase any birds who enter his vision.</p> Demo Gambar Sebaris Membiarkan gambar tidak tersentuh dalam posisi default tidak terlalu umum. Lebih sering daripada tidak, gambar ditampilkan sebagai elemen tingkat blok atau melayang rata ke satu sisi. Blokir Gambar Pemosisian Menambahkan displayproperti ke gambar dan menyetel nilainya untuk blockmemaksa gambar menjadi elemen level blok. Ini membuat gambar muncul pada garisnya sendiri, memungkinkan konten di sekitarnya diposisikan di atas dan di bawah gambar. 1 2 3 4img { display: block; } Blokir Gambar Demo Memosisikan Gambar Flush Kiri atau Kanan Terkadang menampilkan gambar sebagai inlineatau block, atau bahkan inline-block, tidak ideal. Kami mungkin ingin gambar muncul di sisi kiri atau kanan elemen yang memuatnya, sementara semua konten lainnya membungkus gambar seperlunya. Untuk melakukan ini, kami menggunakan floatproperti dengan nilai salah satu leftatau right. Mengingat kembali ke Pelajaran 5, “ Memposisikan Konten ,” kita ingat bahwa floatproperti awalnya dimaksudkan untuk memposisikan gambar ke kiri atau kanan dari elemen yang mengandung. Sekarang kita akan menggunakannya untuk tujuan awal itu. Mengambang gambar adalah awal; namun, semua konten lain akan langsung sejajar dengannya. Untuk memberikan spasi di sekitar gambar, kami akan menggunakan marginproperti. Selain itu, kita dapat menggunakan properti padding, border, dan backgrounduntuk membangun bingkai gambar, jika diinginkan. 1 2 3 4 5 6 7 8img { background: #eaeaed; border: 1px solid #9799a7; float: right; margin: 8px 0 0 20px; padding: 4px; } Demo Gambar Mengambang Kapan Menggunakan Elemen Gambar vs. Gambar Latar Belakang Ada dua cara utama untuk menambahkan gambar ke halaman web. Salah satu cara, seperti yang dibahas di sini, adalah dengan menggunakan <img>elemen dalam HTML. Cara lain adalah dengan menggunakan properti backgroundor background-imagedalam CSS untuk menetapkan gambar latar belakang ke suatu elemen. Pilihan mana pun akan berhasil; namun, masing-masing memiliki kasus penggunaan khusus. Elemen <img>dalam HTML adalah opsi yang lebih disukai ketika gambar yang digunakan memiliki nilai semantik dan kontennya relevan dengan konten halaman. Properti backgroundor background-imagedalam CSS adalah opsi yang lebih disukai ketika gambar yang digunakan adalah bagian dari desain atau antarmuka pengguna halaman. Dengan demikian, ini tidak secara langsung relevan dengan konten halaman. Elemen <img>ini cukup populer, dan ketika awalnya ditambahkan ke spesifikasi HTML, elemen ini selamanya mengubah cara situs web dibangun. Dalam praktek Dalam praktek#latihan-1 Sekarang setelah kita mengetahui cara menambahkan dan memposisikan gambar pada halaman, mari kita lihat situs web Konferensi Gaya kita dan lihat di mana kita dapat menambahkan beberapa gambar. Mari kita mulai dengan menambahkan beberapa gambar ke halaman rumah kita. Secara khusus, kami akan menambahkan gambar dalam setiap bagian penggoda yang mempromosikan beberapa halaman kami. Sebelum kita masuk ke kode, mari buat folder baru bernama "gambar" di dalam folder "aset" kita. Kemudian, di dalam folder "gambar", mari buat folder lain bernama "rumah" khusus untuk gambar halaman rumah kita. Di dalam folder "home" kita akan menambahkan tiga gambar: speakers.jpg, schedule.jpg, dan venue.jpg. (Untuk referensi, gambar-gambar ini dapat diunduh dalam file zip.) Kemudian, di dalam index.htmlfile kita, setiap bagian teaser memiliki <a>elemen yang membungkus an <h3>dan <h5>elemen. Mari pindahkan <h5>elemen di atas <a>elemen dan ganti dengan <img>elemen. Nilai srcatribut untuk setiap <img>elemen akan sesuai dengan struktur folder dan nama file yang kita atur, dan nilai altatribut akan menjelaskan isi dari setiap gambar. HTML untuk penggoda pertama kami, untuk halaman Pembicara, akan terlihat seperti ini: 1 2 3 4 5 6 7 8 9<section class="teaser col-1-3"> <h5>Speakers</h5> <a href="speakers.html"> <img src="assets/images/home/speakers.jpg" alt="Professional Speaker"> <h3>World-Class Speakers</h3> </a> <p>Joining us from all around the world are over twenty fantastic speakers, here to share their stories.</p> </section> Mari kita lanjutkan pola ini untuk teaser halaman Jadwal dan Tempat juga. Sekarang setelah kita menambahkan beberapa gambar ke halaman beranda, kita perlu sedikit membersihkan gayanya dan memastikannya pas dengan tata letak halaman kita. Karena gambar adalah elemen tingkat sebaris secara default, mari ubah gambar kita di dalam bagian penggoda menjadi elemen tingkat blok. Mari juga atur maksimumnya widthke 100%untuk memastikannya tidak melebihi lebar kolomnya masing-masing. Mengubah widthnilai ini penting karena memungkinkan gambar kita untuk menyesuaikan dengan lebar kolom yang diperlukan. Terakhir, mari kita membulatkan sudut gambar sedikit dan menerapkan 22piksel bagian bawah marginke gambar, memberikan sedikit ruang untuk bernafas. Setelah kita menambahkan gaya baru ini ke gaya beranda yang ada (menggunakan kelas penggoda sebagai pemilih yang memenuhi syarat untuk <img>elemen), CSS kita akan terlihat seperti ini: 1 2 3 4 5 6 7.teaser img { border-radius: 5px; display: block; margin-bottom: 22px; max-width: 100% } Selanjutnya, mari tambahkan gambar semua speaker ke halaman Speakers. Kita akan mulai dengan membuat folder "speaker" di dalam folder "images" kita dan menempatkan gambar dari semua speaker di sana. Di dalam speakers.htmlfile, mari tambahkan <img>elemen di dalam setiap elemen informasi pembicara <aside>. Mari kita tempatkan setiap <img>elemen di dalam <div>elemen dengan nilai atribut kelas speaker-info, tepat di atas <ul>elemen. Nilai srcatribut dari setiap gambar akan sesuai dengan folder "speaker" yang kami siapkan dan nama pembicara; nilai altatribut akan menjadi nama pembicara. Elemen <aside>untuk saya sendiri, sebagai pembicara, akan terlihat seperti ini: 1 2 3 4 5 6 7 8 9 10 11 12 13<aside class="col-1-3"> <div class="speaker-info"> <img src="assets/images/speakers/shay-howe.jpg" alt="Shay Howe"> <ul> <li><a href="https://twitter.com/shayhowe">@shayhowe</a></li> <li><a href="http://learn.shayhowe.com/">learn.shayhowe.com</a></li> </ul> </div> </aside> Pola yang sama untuk menambahkan gambar ini kemudian harus diterapkan ke semua speaker lainnya. Seperti yang kami lakukan dengan gambar di halaman beranda kami, kami ingin menerapkan beberapa gaya ke gambar di halaman Pembicara. Mari kita mulai dengan menerapkan border-radiusproperti dengan nilai 50%, mengubah gambar kita menjadi lingkaran. Dari sana, mari atur piksel tetap heightuntuk 130setiap gambar dan atur agar sejajar secara vertikal dengan topgaris tempat mereka berada. Dengan heightperataan vertikal dan di tempatnya, mari terapkan margin vertikal ke gambar. 66Dengan menggunakan piksel negatif margindi bagian atas gambar, kita akan menariknya sedikit keluar dari <aside>elemen dan membuatnya terpusat secara vertikal dengan bagian atas borderelemen <div>dengan classnilai atribut speaker-info. Kemudian, menerapkan 22-piksel margindi bagian bawah gambar memberikan ruang antara gambar dan <ul>elemen di bawahnya. Saat kita menambahkan gaya baru ini ke gaya halaman Pembicara yang ada (menggunakan speaker-infokelas sebagai pemilih yang memenuhi syarat untuk <img>elemen), CSS kita akan terlihat seperti ini: 1 2 3 4 5 6 7.speaker-info img { border-radius: 50%; height: 130px; margin: -66px 0 22px 0; vertical-align: top; } Karena kita menggunakan negatif agresif marginpada <img>elemen di dalam <div>elemen dengan nilai atribut kelas speaker-info, kita perlu menghapus paddingdi atas <div>elemen itu. Sebelumnya kami menggunakan paddingproperti dengan nilai 22px 0, sehingga menempatkan 22piksel paddingdi atas dan bawah dan 0piksel paddingdi kiri dan kanan <div>elemen. Mari tukar properti ini dan nilai padding-bottompropertinya, karena hanya itu yang paddingperlu kita identifikasi, dan gunakan nilai 22piksel. speaker-infoKumpulan aturan kelas baru terlihat seperti ini: 1 2 3 4 5 6 7 8.speaker-info { border: 1px solid #dfe2e5; border-radius: 5px; margin-top: 88px; padding-bottom: 22px; text-align: center; } Sekarang halaman rumah dan Pembicara kami terlihat cukup tajam. Gambar 9 Halaman beranda Konferensi Gaya kami setelah menambahkan gambar ke setiap bagian yang menggoda halaman lain Gambar 9 Halaman Pembicara Konferensi Gaya kami setelah menambahkan gambar untuk masing-masing pembicara Menambahkan Audio Menambahkan Audio#menambahkan-audio HTML5 menyediakan cara cepat dan mudah untuk menambahkan file audio ke situs web melalui <audio> elemen . Seperti halnya <img>elemen, <audio>elemen menerima URL sumber yang ditentukan oleh srcatribut. Namun, tidak seperti <img>elemen, <audio>elemen memerlukan tag pembuka dan penutup, yang akan segera kita bahas. 1 2<audio src="jazz.ogg"></audio> Atribut Audio Beberapa atribut lain mungkin menyertai atribut src pada <audio>elemen; yang paling populer termasuk autoplay, controls, loop, dan preload. Atribut autoplay, controls, dan loopsemua atribut Boolean. Sebagai atribut Boolean, mereka tidak memerlukan nilai yang dinyatakan. Sebagai gantinya, ketika masing-masing ada pada <audio>elemen, nilainya akan disetel ke true, dan <audio>elemen akan berperilaku sesuai. Secara default, <audio>elemen tidak ditampilkan di halaman. Jika autoplayatribut Boolean ada pada <audio>elemen, tidak ada yang akan muncul di halaman, tetapi file audio akan diputar secara otomatis saat dimuat. 1 2<audio src="jazz.ogg" autoplay></audio> Untuk menampilkan <audio>elemen pada halaman, controlsatribut Boolean diperlukan. Saat diterapkan ke <audio>elemen, controlsatribut Boolean akan menampilkan kontrol audio default browser, termasuk kontrol putar dan jeda, pencarian, dan volume. 1 2<audio src="jazz.ogg" controls></audio> Menambahkan Demo Audio Saat ada pada <audio>elemen, loopatribut Boolean akan menyebabkan file audio berulang terus-menerus, dari awal hingga akhir. Terakhir, preloadatribut untuk <audio>elemen membantu mengidentifikasi informasi apa, jika ada, tentang file audio yang harus dimuat sebelum klip diputar. Ia menerima tiga nilai: none, auto, dan metadata. Nilai nonetidak akan memuat informasi sebelumnya tentang file audio, sedangkan autonilai akan memuat semua informasi tentang file audio. Nilai metadataberada di antara nonedan autonilai, karena akan memuat semua informasi metadata yang tersedia tentang file audio, seperti panjang klip, tetapi tidak semua informasi. Saat preloadatribut tidak ada pada <audio>elemen, semua informasi tentang file audio dimuat, seolah-olah nilainya disetel ke auto. Untuk alasan ini, menggunakan preloadatribut dengan nilai metadataatau nonemerupakan ide yang baik ketika file audio tidak penting untuk sebuah halaman. Ini akan membantu menghemat bandwidth dan memungkinkan halaman dimuat lebih cepat. Penggantian Audio & Berbagai Sumber Saat ini, browser yang berbeda mendukung format file audio yang berbeda, tiga yang paling populer adalah ogg, mp3, dan wav. Untuk dukungan browser terbaik, kita perlu menggunakan beberapa fallback audio, yang akan disertakan di dalam <audio>tag pembuka dan penutup elemen. Untuk memulai, kami akan menghapus srcatribut dari <audio>elemen. Sebagai gantinya, kita akan menggunakan <source>elemen, dengan srcatribut, bersarang di dalam <audio>elemen untuk mendefinisikan sumber baru. Menggunakan <source>elemen dan srcatribut untuk setiap format file, kita dapat membuat daftar format file audio satu demi satu. Kami akan menggunakan typeatribut tersebut untuk membantu browser mengidentifikasi jenis audio yang tersedia dengan cepat. Ketika browser mengenali format file audio, itu akan memuat file itu dan mengabaikan yang lainnya. Karena diperkenalkan di HTML5, beberapa browser mungkin tidak mendukung <audio>elemen tersebut. Dalam hal ini, kami dapat memberikan tautan untuk mengunduh file audio setelah elemen apa pun <source>di dalam <audio>elemen. 1 2 3 4 5 6 7<audio controls> <source src="jazz.ogg" type="audio/ogg"> <source src="jazz.mp3" type="audio/mpeg"> <source src="jazz.wav" type="audio/wav"> Please <a href="jazz.mp3" download>download</a> the audio file. </audio> Untuk meninjau kode sebelumnya, <audio>elemen menyertakan controlsatribut Boolean untuk memastikan pemutar audio ditampilkan dalam browser yang mendukung elemen tersebut. Elemen <audio>tidak menyertakan srcatribut dan malah membungkus tiga <source>elemen berbeda. Setiap <source>elemen menyertakan srcatribut yang mereferensikan format file audio yang berbeda dan typeatribut untuk mengidentifikasi format file audio. Sebagai cadangan terakhir, jika browser tidak mengenali format file audio apa pun, tautan jangkar untuk mengunduh elemen akan ditampilkan. Selain <audio>elemen, HTML5 juga memperkenalkan <video>elemen, yang memiliki beberapa kesamaan dengan <audio>elemen tersebut. Menambahkan Video Menambahkan video di HTML5 sangat mirip dengan menambahkan audio. Kami menggunakan <video>elemen di tempat <audio>elemen. Semua atribut yang sama ( src, autoplay, controls, loop, dan preload) dan fallback juga berlaku di sini. Dengan <audio>elemen, jika controlsatribut Boolean tidak ditentukan, klip audio tidak ditampilkan. Dengan video, jika controlsatribut Boolean tidak ditentukan, video akan ditampilkan. Namun, cukup sulit untuk melihat kecuali autoplayatribut Boolean juga diterapkan. Secara umum, praktik terbaik di sini adalah menyertakan controlsatribut Boolean kecuali ada alasan bagus untuk tidak mengizinkan pengguna memulai, menghentikan, atau memutar ulang video. Karena video memakan ruang di halaman, tidak ada salahnya untuk menentukan dimensinya, yang paling sering dilakukan dengan widthdan heightproperti di CSS. Ini membantu memastikan bahwa video tidak terlalu besar dan tetap berada dalam tata letak halaman yang tersirat. Selain itu, menentukan ukuran, seperti halnya gambar, membantu browser membuat video lebih cepat dan memungkinkannya mengalokasikan ruang yang tepat yang diperlukan untuk menampilkan video. 1 2<video src="earth.ogv" controls></video> Menambahkan Demo Video Untuk alasan kinerja, demo video ini di-host secara lokal, namun Anda masih dapat meninjau dan mengedit kode ini di CodePen. Menyesuaikan Kontrol Audio & Video Secara default, kontrol elemen <audio>dan ditentukan oleh masing-masing browser secara independen. <video>Tergantung pada desain situs web, otoritas yang lebih besar atas tampilan dan nuansa pemutar media mungkin diperlukan. Jika ini masalahnya, pemutar yang disesuaikan dapat dibuat, tetapi itu akan membutuhkan sedikit JavaScript untuk bekerja. Selain itu, jika pemain yang dikustomisasi menggunakan <img>elemen sebagai kontrol, nilai altatribut harus secara eksplisit menyatakan bahwa gambar adalah kontrol dan memerlukan interaksi yang tepat agar berfungsi. Atribut Poster Satu atribut tambahan yang tersedia untuk <video>elemen adalah posteratribut. Atribut postermemungkinkan kita untuk menentukan gambar, dalam bentuk URL, untuk ditampilkan sebelum video diputar. Contoh di bawah ini menggunakan tangkapan layar dari video sebagai poster untuk video Earth. 1 2<video src="earth.ogv" controls poster="earth-video-screenshot.jpg"></video> Demo Atribut Poster Untuk alasan kinerja, demo video ini di-host secara lokal, namun Anda masih dapat meninjau dan mengedit kode ini di CodePen. Penggantian Video Seperti halnya <audio>elemen, fallback video juga diperlukan. Format markup yang sama, dengan beberapa <source>elemen untuk setiap jenis file dan fallback teks biasa, juga berlaku di dalam <video>elemen. 1 2 3 4 5 6<video controls> <source src="earth.ogv" type="video/ogg"> <source src="earth.mp4" type="video/mp4"> Please <a href="earth.mp4" download>download</a> the video. </video> Satu opsi fallback tambahan yang dapat digunakan sebagai pengganti fallback teks biasa adalah dengan menggunakan video tersemat YouTube atau Vimeo . Situs web hosting video ini memungkinkan kami untuk mengunggah video kami, menyediakan pemutar video standar, dan memungkinkan kami untuk menyematkan video kami ke halaman menggunakan bingkai sebaris. Format File Audio & Video HTML5 Dukungan browser untuk elemen <audio>dan <video>bervariasi, seperti halnya format file yang diperlukan dengan elemen ini. Setiap browser memiliki format file audio dan video pilihannya sendiri. Ada beberapa alat yang membantu untuk mengkonversi file audio atau video ke dalam format yang berbeda, dan pencarian cepat akan memberikan banyak pilihan. Menambahkan Bingkai Sebaris#menambahkan-iframe Cara lain untuk menambahkan konten ke halaman adalah dengan menyematkan halaman HTML lain di halaman saat ini. Ini dilakukan dengan menggunakan bingkai inline, atau <iframe>elemen. Elemen <iframe>menerima URL halaman HTML lain dalam nilai srcatribut; ini menyebabkan konten dari halaman HTML yang disematkan ditampilkan pada halaman saat ini. Nilai srcatribut dapat berupa URL yang relatif terhadap halaman tempat <iframe>elemen tersebut muncul atau URL absolut untuk halaman yang sepenuhnya eksternal. Banyak halaman menggunakan <iframe>elemen untuk menyematkan media ke halaman dari situs web eksternal seperti Google Maps, YouTube, dan lainnya. 1 2<iframe src="https://www.google.com/maps/embed?..."></iframe> Menambahkan Demo Bingkai Sebaris Untuk alasan keamanan CodePen tidak mengizinkan iframes dalam sampel kode yang disematkan, namun Anda dapat meninjau dan mengedit kode ini di situs web mereka. Elemen <iframe>memiliki beberapa gaya default, termasuk inset borderdan a widthdan height. Gaya ini dapat disesuaikan menggunakan atribut frameborder, width, dan heightHTML atau dengan menggunakan properti border, width, dan heightCSS. Halaman yang direferensikan dalam srcatribut suatu <iframe>elemen bermain dengan aturannya sendiri, karena mereka tidak mewarisi gaya atau perilaku apa pun dari halaman tempat mereka dirujuk. Gaya apa pun yang diterapkan ke halaman yang menyertakan <iframe>elemen tidak akan diwarisi oleh halaman yang direferensikan di dalam <iframe>elemen. Selain itu, tautan di dalam halaman yang dirujuk dalam <iframe>elemen akan terbuka di dalam bingkai itu, membiarkan halaman yang berisi <iframe>elemen tidak berubah. Dalam praktek Bingkai sebaris menyediakan cara yang bagus untuk menambahkan konten dinamis ke halaman. Mari kita coba ini dengan memperbarui halaman Venue kami dengan beberapa peta. Sebelum menambahkan peta atau bingkai sebaris, pertama-tama siapkan halaman Venue kami untuk kisi dua kolom. Di bawah bagian utama laman, kami akan menambahkan <section>elemen dengan nilai classatribut rowuntuk mengidentifikasi bagian baru laman, dan kami akan menyertakan beberapa gaya umum, seperti putih backgrounddan beberapa vertikal padding. Langsung di dalam <section>elemen ini mari kita tambahkan <div>elemen dengan nilai classatribut grid. Kelas gridpusat konten kami di halaman dan mempersiapkan kolom sepertiga dan dua pertiga untuk mengikuti. Sejauh ini bagian utama dari venue.htmlfile kita terlihat seperti ini: 1 2 3 4 5 6<section class="row"> <div class="grid"> ... </div> </section> Dalam <div>elemen dengan nilai atribut class of gridkita akan memiliki dua bagian baru, satu untuk tempat konferensi dan satu untuk hotel konferensi. Mari tambahkan dua <section>elemen baru dan berikan masing-masing <section>elemen ini kelas unik yang sesuai dengan kontennya. Kami akan menggunakan kelas ini untuk menambahkan margin ke bagian bawah setiap bagian. HTML kita sekarang akan terlihat seperti ini: 1 2 3 4 5 6 7 8 9 10 11 12 13 14<section class="row"> <div class="grid"> <section class="venue-theatre"> ... </section> <section class="venue-hotel"> ... </section> </div> </section> Sekarang kita memiliki beberapa kelas untuk dikerjakan, mari buat bagian baru di dalam main.cssfile kita untuk gaya halaman Venue. Kami akan menambahkan 66-piksel marginke bagian bawah <section>elemen dengan nilai atribut kelas venue-theatreuntuk menyisipkan beberapa ruang di antara elemen itu dan <section>elemen di bawahnya. Kemudian, kita akan menambahkan 22-piksel marginke bagian bawah <section>elemen dengan nilai atribut class of venue-hoteluntuk memberikan ruang antara elemen tersebut dan <footer>elemen di bawahnya. Bagian tempat baru dalam main.cssfile terlihat seperti berikut: 1 2 3 4 5 6 7 8 9 10 11 12 13/* ======================================== Venue ======================================== */ .venue-theatre { margin-bottom: 66px; } .venue-hotel { margin-bottom: 22px; } Elemen <section>dengan nilai atribut class venue-hotelmemiliki bagian bawah yang lebih kecil margindaripada <section>elemen dengan nilai atribut class venue-theatrekarena berada di sebelah paddingbawah <section>elemen dengan atribut class row. Menambahkan itu margindan paddingbersama-sama memberi kita nilai yang sama dengan bagian bawah marginpada <section>elemen dengan nilai atribut kelas venue-theatre. Sekarang saatnya untuk membuat dua kolom di dalam setiap <section>elemen baru. Kita akan mulai dengan menambahkan <div>elemen dengan classnilai atribut col-1-3untuk membuat kolom sepertiga. Setelah itu kita akan menambahkan <iframe>elemen dengan classnilai atribut col-2-3untuk membuat kolom dua pertiga. Mengingat bahwa kelas kolom membuat elemen <div>dan <iframe>elemen blok sebaris, kita perlu menghapus ruang kosong yang akan muncul di antara mereka. Untuk melakukannya, kami akan membuka komentar HTML langsung setelah <div>tag penutup, dan kami akan menutup komentar HTML tepat sebelum <iframe>tag pembuka. Secara keseluruhan, HTML kami untuk kolom terlihat seperti ini: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21<section class="row"> <div class="grid"> <section class="venue-theatre"> <div class="col-1-3"></div><!-- --><iframe class="col-2-3"></iframe> </section> <section class="venue-hotel"> <div class="col-1-3"></div><!-- --><iframe class="col-2-3"></iframe> </section> </div> </section> Di dalam setiap <div>elemen dengan classnilai atribut col-1-3mari kita tambahkan nama tempat di dalam satu <h2>elemen, diikuti oleh dua <p>elemen. Di <p>elemen pertama mari kita sertakan alamat tempat, dan di <p>elemen kedua mari kita sertakan situs web tempat (dalam tautan jangkar) dan nomor telepon. Dalam setiap paragraf, mari gunakan elemen pemisah baris, <br>, untuk menempatkan jeda di dalam alamat dan di antara situs web dan nomor telepon. Untuk <section>elemen dengan nilai classatribut venue-theatre, HTML terlihat seperti ini: 1 2 3 4 5 6 7 8 9 10 11 12<section class="venue-theatre"> <div class="col-1-3"> <h2>Chicago Theatre</h2> <p>175 N State St <br> Chicago, IL 60601</p> <p><a href="http://www.thechicagotheatre.com/">thechicagotheatre.com</a> <br> (312) 462-6300</p> </div><!-- --><iframe class="col-2-3"></iframe> </section> Pola yang sama yang ditunjukkan di sini untuk teater juga harus diterapkan pada hotel (tentu saja menggunakan alamat, situs web, dan nomor telepon yang tepat). Kita bisa mencari alamat ini di Google Maps . Setelah kami menemukan alamat dan membuat peta yang disesuaikan, kami memiliki kemampuan untuk menyematkan peta itu ke halaman kami. Mengikuti petunjuk di Google Maps tentang cara berbagi dan menyematkan peta akan memberi kami HTML untuk suatu <iframe>elemen. Mari salin HTML— <iframe>elemen, srcatribut, dan semuanya—ke halaman tempat <iframe>elemen yang ada berada. Kami akan melakukan ini untuk setiap lokasi, menggunakan dua <iframe>elemen berbeda. Dalam menyalin <iframe>elemen dari Google Maps, kita perlu memastikan bahwa kita mempertahankan classatribut dan nilai, col-2-3, dari <iframe>elemen yang ada. Kita juga harus berhati-hati agar tidak merusak komentar HTML yang langsung ditutup sebelum <iframe>tag pembuka kita. Melihat langsung <section>elemen dengan nilai classatribut venue-theatrelagi, HTML terlihat seperti ini: 1 2 3 4 5 6 7 8 9 10 11 12<section class="venue-theatre"> <div class="col-1-3"> <h2>Chicago Theatre</h2> <p>175 N State St <br> Chicago, IL 60601</p> <p><a href="http://www.thechicagotheatre.com/">thechicagotheatre.com</a> <br> (312) 462-6300</p> </div><!-- --><iframe class="col-2-3" src="https://www.google.com/maps/embed?pb=!1m5!3m3!1m2!1s0x880e2ca55810a493%3A0x4700ddf60fcbfad6!2schicago+theatre!5e0!3m2!1sen!2sus!4v1388701393606"></iframe> </section> Terakhir, kami ingin memastikan bahwa kedua <iframe>elemen yang mereferensikan Google Maps memiliki ketinggian yang sama. Untuk melakukan ini, kita akan membuat kelas baru, venue-map, dan menerapkannya ke setiap <iframe>elemen di samping nilai col-2-3 classatribut yang ada. HTML untuk <section>elemen dengan nilai classatribut venue-theatrenow terlihat seperti ini: 1 2 3 4 5 6 7 8 9 10 11 12<section class="venue-theatre"> <div class="col-1-3"> <h2>Chicago Theatre</h2> <p>175 N State St <br> Chicago, IL 60601</p> <p><a href="http://www.thechicagotheatre.com/">thechicagotheatre.com</a> <br> (312) 462-6300</p> </div><!-- --><iframe class="venue-map col-2-3" src="https://www.google.com/maps/embed?pb=!1m5!3m3!1m2!1s0x880e2ca55810a493%3A0x4700ddf60fcbfad6!2schicago+theatre!5e0!3m2!1sen!2sus!4v1388701393606"></iframe> </section> Setelah venue-mapkelas diterapkan ke setiap <iframe>elemen, mari buat venue-mapaturan kelas yang ditetapkan di dalam main.cssfile kita. Ini termasuk heightproperti dengan nilai 264piksel. Kumpulan venue-mapaturan kelas terlihat seperti ini: 1 2 3 4.venue-map { height: 264px; } Kami sekarang memiliki halaman Tempat, lengkap dengan peta untuk berbagai lokasi konferensi kami. Gambar 9 Halaman Tempat Konferensi Gaya kami, yang sekarang menyertakan bingkai sebaris Demo & Kode Sumber Di bawah ini Anda dapat melihat situs web Styles Conference dalam keadaan saat ini, serta mengunduh kode sumber untuk situs web dalam keadaan saat ini. Lihat Situs Web Konferensi Gaya atau Unduh Kode Sumber (file Zip) Mengidentifikasi Gambar & Keterangan Secara Semantik#angka-dan-caption Dengan HTML5 juga datang pengenalan elemen <figure>dan <figcaption>. Elemen - elemen ini dibuat untuk menandai konten atau media mandiri secara semantik, biasanya dengan keterangan. Sebelum HTML5 ini sering dilakukan dengan menggunakan daftar terurut. Sementara daftar yang dipesan berfungsi, markupnya tidak benar secara semantik. Angka Elemen <figure>tingkat blok digunakan untuk mengidentifikasi dan membungkus konten mandiri, seringkali dalam bentuk media. Ini mungkin mengelilingi gambar, klip audio, video, blok kode, diagram, ilustrasi, atau media mandiri lainnya. Lebih dari satu item konten mandiri, seperti beberapa gambar atau video, dapat dimuat dalam <figure>elemen sekaligus. Jika <figure>elemen dipindahkan dari bagian utama halaman ke lokasi lain (misalnya, bagian bawah halaman), hal itu tidak boleh mengganggu konten atau keterbacaan halaman. 1 2 3 4<figure> <img src="dog.jpg" alt="A black, brown, and white dog wearing a kerchief"> </figure> Demo Gambar Keterangan Gambar Untuk menambahkan keterangan atau legenda ke <figure>elemen, <figcaption>elemen digunakan. Itu <figcaption>mungkin muncul di bagian atas, bawah, atau di mana saja di dalam <figure>elemen; namun, itu mungkin hanya muncul sekali. Saat digunakan, <figcaption>elemen akan berfungsi sebagai keterangan untuk semua konten di dalam <figure>elemen. Selain itu, <figcaption>elemen dapat menggantikan atribut <img>elemen altjika konten <figcaption>elemen memberikan deskripsi yang berguna tentang konten visual gambar. 1 2 3 4 5<figure> <img src="dog.jpg"> <figcaption>A beautiful black, brown, and white hound dog wearing kerchief.</figcaption> </figure> Demo Keterangan Gambar Tidak semua bentuk media perlu dicantumkan dalam suatu <figure>unsur atau memuat suatu <figcaption>unsur; hanya mereka yang mandiri dan menjadi milik bersama sebagai sebuah kelompok. Ringkasan Di samping teks, media adalah salah satu bagian terbesar dari web. Penggunaan gambar, audio, dan video hanya meningkat selama beberapa tahun terakhir, dan sepertinya tidak akan melambat. Sekarang kami tahu bagaimana menggabungkan bentuk media ini ke dalam desain kami dan bagaimana kami dapat menggunakannya untuk memperkaya konten di situs web kami. Dalam pelajaran ini kami membahas hal-hal berikut: Cara terbaik untuk menambahkan gambar, klip audio, video, dan bingkai sebaris ke halaman Berbagai cara untuk memposisikan gambar dalam situasi yang berbeda Cara menyediakan fallback audio dan video untuk browser lama Atribut umum tersedia untuk klip audio dan video Cara semantik untuk menandai konten mandiri, termasuk media Kami memasuki tahap awal pembelajaran HTML dan CSS, dengan hanya beberapa komponen yang tersisa untuk diperkenalkan. Berikutnya dalam daftar adalah formulir. Sumber & Tautan Menggunakan audio dan video HTML5 melalui Jaringan Pengembang Mozilla Elemen HTML5 Audio melalui Jaringan Pengembang Mozilla Pengantar Video HTML5 melalui Dev.Opera Elemen gambar & figcaption melalui HTML5 Doctor TAG : #AWDEV #WEBSITE #BLOOG #SEO #Search Engine Optimization #UMKM #E-COMERCE #BUSSINES #MARKETING #MEDIA SCORE : www.awdev.eu.org www.devoloper.awdev.eu.org www.mikrover.awdev.eu.org www.wahyu9kdl.github.io www.wahyu9kdl.medium.com www.alhikmah.my.id http://kong.github.io/unirest-java/#requests https://mvnrepository.com/artifact/com.konghq/unirest-java 🧰 SERVICE 📝 FORMULIR SERVICE 📥 💯 FREE DOWNLODER FILE 📊 FUNDING.YML 🏅Become a Patreon! 🎗SOCIABUZZ 🏅SUPPORT 🎗GIVE 🏅SAWERIA 🎗 Paypal ➡️ Share This Page. Thanks You 🤗♥️ santri indonesia bangkit Salin ANDA MUNGKIN MENYUKAI POSTINGAN INI * PELAJARAN 9 | MENAMBAHKAN MEDIA | E-LEARNING AWDEV DEVOLOPER FREE KURSUS ONLINE PELAJARAN 9 |MENAMBAHKAN MEDIA | E-LEARNING AWDEV DEVOLOPER FREE KURSUS ONLINEE-LEARNINGwww.awdev.eu.org Dalam Pelajaran ini9 HTML Menambahkan Gambar Menambahkan Audio Menamb… * PELAJARAN 7 | MENGATUR LATAR BELAKAN & GRADIEN | E-LEARNING PELAJARAN 7 |MENGATUR LATAR BELAKAN & GRADIEN | E-LEARNING AWDEV DEVOLOPER FREE KURSUS ONLINEE-LEARNINGwww.awdev.eu.org Dalam Pelajaran ini7 CSS Warna latar belakang Gambar la… * PELAJARAN 5 | MEMOSISIKAN KONTEN E - LEARNING www.awdev.eu.org PELAJARAN 5| MEMOSISIKAN KONTEN E - LEARNINGwww.awdev.eu.org Memosisikan Konten Dalam Pelajaran ini : ✔CSS ✔Pemosisian dengan Float ✔Pemosisian dengan Inline-Block ✔Membuat Tat… * PELAJARAN 4 | Membuka Model Kotak E-LEARNING PELAJARAN 4 | Membuka Model Kotak E-LEARNING www.awdev.eu.org Dalam Pelajaran ini : HTML ✔ Alat pengembang CSS ✔ Menampilkan Elemen ✔ Model Kotak Kami telah membiasak… * PELAJARAN 6 | BEKERJA DENGAN TIPOGRAFI | E-LEARNING AWDEV DEVOLOPER FREE KURSUS ONLINE E-LEARNING www.awdev.eu.org PELAJARAN 6 |BEKERJA DENGAN TIPOGRAFI | E-LEARNING AWDEV DEVOLOPER FREE KURSUS ONLINEE-LEARNINGwww.awdev.eu.org Dalam Pelajaran ini : HTML Kutipan & Kutipan CSS Warna teks P… * PELAJARAN 8 | MEMBUAT DAFTAR | E-LEARNING PELAJARAN 8 |MEMBUAT DAFTAR | E-LEARNING AWDEV DEVOLOPER FREE KURSUS ONLINEE-LEARNINGwww.awdev.eu.org Dalam Pelajaran ini8 HTML Daftar Tidak Terurut Daftar yang dipesan Dafta… Posting Komentar POSTING KOMENTAR POPULAR POSTS PELAJARAN 1 | MEMBANGUN HALAMAN WEBSITE PERTAMA ANDA E-LEARNING PELAJARAN 1 | MEMBANGUN HALAMAN WEBSITE PERTAMA ANDA E-LEARNING www.awdev.eu.org Dalam Pelajaran ini : HTML Istilah HTML Umum Struktur Doku… AWDEV DEVOLOPER FREE KURSUS ONLINE DESAIGN WEBSITE & PROGRAMER WWW.AWDEV.EU.ORG PELAJARAN 4 | MEMBUKA MODEL KOTAK E-LEARNING PELAJARAN 2 | MENGENAL HTML E-LEARNING PELAJARAN 3 | MENGENAL CSS E-LEARNING LABELS BLOOG BUSSINES CSS DEVOLOPER E-LEARNING GITHUB HTML IMAGE NEWS PEMOGRAMAN SEO VUE 1. PELAJARAN 9 | 2. MENAMBAHKAN MEDIA | E-LEARNING AWDEV DEVOLOPER FREE KURSUS ONLINEE-LEARNINGwww.awdev.eu.org 1. 🧰 SERVICE 2. 📊 FUNDING.yml * * * * * --> Diese Website verwendet Cookies von Google, um Dienste anzubieten und Zugriffe zu analysieren. Deine IP-Adresse und dein User-Agent werden zusammen mit Messwerten zur Leistung und Sicherheit für Google freigegeben. So können Nutzungsstatistiken generiert, Missbrauchsfälle erkannt und behoben und die Qualität des Dienstes gewährleistet werden.Weitere InformationenOk