www.awdev.eu.org Open in urlscan Pro
2a00:1450:4001:827::2013  Public Scan

Form analysis
1 forms found in the DOM

https://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