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

Form analysis
2 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>

Name: copy —

<form name="copy">
  <div align="center"><span>
      <input onclick="javascript:this.form.txt.focus();this.form.txt.select();"
        style="background: linear-gradient(to right, rgb(228, 3, 3), rgb(255, 140, 0), rgb(255, 237, 0), rgb(0, 128, 38), rgb(0, 77, 255), rgb(117, 7, 135)); height: 40px; width: 40%;" type="button" value="COPPY All"> </span></div>
  <p align="center"><textarea cols="20" name="txt" rows="4" style="height: 80px; width: 100%;">&lt;a href="https://www.awdev.eu.org/2022/04/pelajaran5.html" &gt;

Pelajaran 5 | MEMOSISIKAN KONTEN E - LEARNING www.awdev.eu.org

© Pelajaran 5 | MEMOSISIKAN KONTEN E - LEARNING www.awdev.eu.org - AWDEV
Source: https://www.awdev.eu.org/2022/04/pelajaran5.html?m=1

© Pelajaran 5 | MEMOSISIKAN KONTEN E - LEARNING www.awdev.eu.org - AWDEV
Source: https://www.awdev.eu.org/2022/04/pelajaran5.html?m=1
&lt;/a&gt;


</textarea></p>
  <div class="widget HTML" data-version="2" id="HTML01">
    <div class="widget-content">
      <div class="adB" data-text="Iklan ada di sini"></div>
      <script>
        /*<![CDATA[*/
        function insertAfter(tbh, tgt) {
          var prt = tgt.parentNode;
          if (prt.lastChild == tgt) {
            prt.appendChild(tbh);
          } else {
            prt.insertBefore(tbh, tgt.nextSibling);
          }
        }
        var tgt = document.getElementById('postBody');
        var midAd01 = document.getElementById('HTML01');
        var showAd01 = tgt.getElementsByTagName('p');
        if (showAd01.length > 0) {
          insertAfter(midAd01, showAd01[10]);
        }; /*]]>*/
      </script>
    </div>
  </div>
</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 5 | MEMOSISIKAN KONTEN E - LEARNING WWW.AWDEV.EU.ORG

19 min read




 PELAJARAN 5| MEMOSISIKAN KONTEN 
E - LEARNING
WWW.AWDEV.EU.ORG



MEMOSISIKAN KONTEN


Dalam Pelajaran ini : 

✔CSS

✔Pemosisian dengan Float

✔Pemosisian dengan Inline-Block

✔Membuat Tata Letak yang Dapat Digunakan Kembali

✔Elemen Pemosisian Unik





 



 





" Nikmati pelajaran ini? Tunjukkan dukungan Anda dengan Tutorial Yang Anda
Dapatkan ini dengan Berkontribusi :  



Loved the tool? Please consider donating 💸 to help it improve!



Send ♥️ Pay Pal 





Salah satu hal terbaik tentang CSS adalah ia memberi kita kemampuan untuk
memposisikan konten dan elemen pada halaman dalam hampir semua cara yang dapat
dibayangkan, membawa struktur ke desain kita dan membantu membuat konten lebih
mudah dicerna.

Ada beberapa jenis pemosisian yang berbeda dalam CSS, dan masing-masing memiliki
aplikasinya sendiri. Dalam bab ini kita akan melihat beberapa kasus penggunaan
yang berbeda—membuat tata letak yang dapat digunakan kembali dan memposisikan
elemen satu kali secara unik—dan menjelaskan beberapa cara untuk melakukannya.








PEMOSISIAN DENGAN FLOAT


Salah satu cara untuk memposisikan elemen pada halaman adalah
dengan floatproperti. Properti floatini cukup serbaguna dan dapat digunakan
dalam berbagai cara.

Pada dasarnya, floatproperti memungkinkan kita untuk mengambil elemen,
menghapusnya dari aliran normal halaman, dan memposisikannya ke kiri atau kanan
elemen induknya. Semua elemen lain pada halaman kemudian akan mengalir di
sekitar elemen melayang. Sebuah <img>elemen melayang ke samping beberapa
paragraf teks, misalnya, akan memungkinkan paragraf untuk membungkus gambar yang
diperlukan.

Saat floatproperti digunakan pada beberapa elemen secara bersamaan, properti ini
menyediakan kemampuan untuk membuat tata letak dengan elemen mengambang langsung
di samping atau di seberang satu sama lain, seperti yang terlihat dalam tata
letak multi-kolom.

Properti floatmenerima beberapa nilai; dua nilai paling populer
adalah leftand right, yang memungkinkan elemen melayang ke kiri atau kanan
elemen induknya.

img { float: left; }






MENGAPUNG DALAM PRAKTEK


Mari buat tata letak halaman umum dengan header di bagian atas, dua kolom di
tengah, dan footer di bagian bawah. Idealnya halaman ini akan ditandai
menggunakan elemen <header>, <section>, <aside>, dan <footer>seperti yang
dibahas dalam Pelajaran 2, “ Mengenal HTML .” Di dalam <body>elemen, HTML
mungkin terlihat seperti ini:

<header>...</header> <section>...</section> <aside>...</aside>
<footer>...</footer>





TATA LETAK TANPA FLOAT DEMO


Di sini elemen <section>and <aside>, sebagai elemen level blok, akan ditumpuk
satu sama lain secara default. Namun, kami ingin elemen-elemen ini duduk
berdampingan. Dengan mengambangkan <section>ke leftdan <aside>ke right, kita
dapat memposisikannya sebagai dua kolom yang saling berhadapan. CSS kita akan
terlihat seperti ini:

section { float: left; } aside { float: right; }



Sebagai referensi, ketika sebuah elemen di-float, elemen tersebut akan mengapung
sampai ke tepi elemen induknya. Jika tidak ada elemen induk, elemen terapung
kemudian akan terapung sampai ke tepi halaman.

Saat kita mengapungkan sebuah elemen, kita mengeluarkannya dari aliran normal
dokumen HTML. Ini menyebabkan lebar elemen itu menjadi default ke lebar konten
di dalamnya. Terkadang, seperti saat kita membuat kolom untuk tata letak yang
dapat digunakan kembali, perilaku ini tidak diinginkan. Ini dapat diperbaiki
dengan menambahkan widthnilai properti tetap ke setiap kolom. Selain itu, untuk
mencegah elemen melayang menyentuh satu sama lain, menyebabkan konten yang satu
duduk tepat di sebelah konten yang lain, kita dapat menggunakan marginproperti
untuk membuat ruang antar elemen.




Di sini, kita memperluas blok kode sebelumnya, menambahkan a margindan widthke
setiap kolom untuk membentuk hasil yang diinginkan dengan lebih baik.





section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right;
margin: 0 1.5%; width: 30%; }






TATA LETAK DENGAN FLOATS DEMO



Preview >>>>



FLOATS DAPAT MENGUBAH NILAI TAMPILAN ELEMEN


Saat mengambangkan sebuah elemen, penting juga untuk mengenali bahwa sebuah
elemen dihapus dari aliran normal halaman, dan itu dapat mengubah displaynilai
default elemen. Properti floatbergantung pada elemen yang
memiliki displaynilai block, dan dapat mengubah nilai default elemen displayjika
belum ditampilkan sebagai elemen level blok.

Misalnya, elemen dengan displaynilai inline, seperti <span>elemen tingkat
sebaris, mengabaikan nilai properti heightatau apa pun. widthNamun, jika elemen
level inline di-float, displaynilainya akan diubah menjadi blok, dan kemudian
dapat menerima heightatau widthnilai properti.




Saat kita mengapungkan elemen, kita harus mengawasi bagaimana displaynilai
propertinya terpengaruh.

Dengan dua kolom kita bisa melayang satu kolom ke kiri dan satu lagi ke kanan,
tetapi dengan lebih banyak kolom kita harus mengubah pendekatan
kita. Katakanlah, misalnya, kami ingin memiliki deretan tiga kolom di
antara elemen kami <header>dan . <footer>Jika kita melepaskan <aside>elemen kita
dan menggunakan tiga <section>elemen, HTML kita mungkin terlihat seperti ini:

<header>...</header> <section>...</section> <section>...</section>
<section>...</section> <footer>...</footer>

Untuk memposisikan ketiga <section>elemen ini dalam baris tiga kolom, alih-alih
melayang satu kolom ke kiri dan satu kolom ke kanan, kita akan melayangkan
ketiga <section>elemen ke kiri. Kita juga perlu menyesuaikan
lebar <section>elemen untuk memperhitungkan kolom tambahan dan membuatnya duduk
satu di samping yang lain.



section { float: left; margin: 0 1.5%; width: 30%; }

Di sini kita memiliki tiga kolom, semuanya dengan lebar dan nilai margin yang
sama dan semuanya melayang ke left.

Tata Letak Tiga Kolom dengan Floats Demo


Preview >>>■■■




MEMBERSIHKAN & MENGANDUNG FLOAT


Properti floatini awalnya dirancang untuk memungkinkan konten membungkus
gambar. Sebuah gambar dapat melayang, dan semua konten yang mengelilingi gambar
itu kemudian dapat mengalir secara alami di sekitarnya. Meskipun ini berfungsi
dengan baik untuk gambar, floatproperti ini tidak pernah benar-benar dimaksudkan
untuk digunakan untuk tujuan tata letak dan pemosisian, dan dengan demikian
properti ini memiliki beberapa jebakan.

Salah satu perangkapnya adalah bahwa kadang-kadang gaya yang tepat tidak akan
ditampilkan pada elemen yang duduk di sebelahnya atau merupakan elemen induk
dari elemen terapung. Saat elemen melayang, elemen tersebut dikeluarkan dari
aliran normal halaman, dan akibatnya, gaya elemen di sekitar elemen melayang
tersebut dapat terpengaruh secara negatif.

Seringkali margindan paddingnilai properti tidak diinterpretasikan dengan benar,
menyebabkannya menyatu dengan elemen mengambang; properti lain juga dapat
terpengaruh.

Jebakan lainnya adalah terkadang konten yang tidak diinginkan mulai membungkus
elemen melayang. Menghapus elemen dari aliran dokumen memungkinkan semua elemen
di sekitar elemen terapung untuk membungkus dan menggunakan ruang yang tersedia
di sekitar elemen terapung, yang seringkali tidak diinginkan.

Dengan contoh dua kolom kami sebelumnya, setelah kami melayangkan
elemen <section>and <aside>, dan sebelum kami menetapkan nilai properti lebar
pada salah satu dari mereka, konten di dalam <footer>elemen akan terbungkus di
antara dua elemen melayang di atasnya, mengisi ruang yang tersedia
. Akibatnya, <footer>elemen akan duduk di selokan antara
elemen <section>dan <aside>, menghabiskan ruang yang tersedia.




TATA LETAK TANPA DEMO FLOAT YANG DIBERSIHKAN ATAU TERKANDUNG


Untuk mencegah konten membungkus elemen terapung, kita perlu menghapus, atau
menahan, pelampung tersebut dan mengembalikan halaman ke aliran normalnya. Kami
akan melanjutkan dengan melihat cara membersihkan pelampung, dan kemudian kami
akan melihat cara menahan pelampung.




MEMBERSIHKAN FLOAT


Membersihkan float dilakukan dengan menggunakan clearproperti, yang menerima
beberapa nilai berbeda: nilai yang paling umum digunakan adalah left, right,
dan both.

div { clear: left; }

Nilai leftakan menghapus float kiri, sedangkan rightnilai akan menghapus float
kanan. Nilai both, bagaimanapun, akan menghapus float kiri dan kanan dan
seringkali merupakan nilai yang paling ideal.

Kembali ke contoh sebelumnya, jika kita menggunakan clearproperti dengan
nilai bothpada <footer>elemen, kita dapat menghapus float. Jelas ini harus
diterapkan pada elemen yang muncul setelah elemen melayang, bukan sebelumnya,
untuk mengembalikan halaman ke aliran normalnya.

footer { clear: both; }

Tata Letak dengan Demo Float yang Dihapus




MENGANDUNG FLOAT


Daripada membersihkan pelampung, opsi lain adalah menahan pelampung. Hasil dari
menahan pelampung versus membersihkannya hampir sama; namun, mengandung float
memang membantu memastikan bahwa semua gaya kita akan dirender dengan benar.

Untuk memuat pelampung, elemen terapung harus berada di dalam elemen
induk. Elemen induk akan bertindak sebagai wadah, meninggalkan aliran dokumen
yang benar-benar normal di luarnya. CSS untuk elemen induk tersebut, yang
diwakili oleh groupkelas di bawah, ditampilkan di sini:





.group:before, .group:after { content: ""; display: table; } .group:after {
clear: both; } .group { clear: both; *zoom: 1; }

Ada sedikit yang terjadi di sini, tetapi pada dasarnya apa yang dilakukan CSS
adalah membersihkan elemen mengambang di dalam elemen dengan kelas groupdan
mengembalikan aliran dokumen kembali normal.

Lebih khusus lagi, elemen :beforedan :afterpseudo, seperti yang disebutkan dalam
latihan Pelajaran 4, adalah elemen yang dihasilkan secara dinamis di atas dan di
bawah elemen dengan kelas group. Elemen tersebut tidak menyertakan konten apa
pun dan ditampilkan sebagai tableelemen -level, seperti elemen level
blok. Elemen yang dihasilkan secara dinamis setelah elemen dengan kelas
dari groupmembersihkan float di dalam elemen dengan kelas group,
seperti cleardari sebelumnya. Dan terakhir, elemen dengan kelasnya groupsendiri
juga membersihkan semua pelampung yang mungkin muncul di atasnya, jika pelampung
kiri atau kanan mungkin ada. Ini juga mencakup sedikit tipuan untuk membuat
browser lama bermain dengan baik.

Ini lebih banyak kode daripada clear: both;deklarasi saja, tetapi terbukti
sangat berguna.

Melihat tata letak halaman dua kolom kami dari sebelumnya, kami dapat membungkus
elemen <section>dan <aside>dengan elemen induk. Elemen induk itu kemudian perlu
memuat pelampung di dalam dirinya sendiri. Kode akan terlihat seperti ini:

HTML

<header>...</header> <div class="group"> <section>...</section>
<aside>...</aside> </div> <footer>...</footer>

CSS





.group:before, .group:after { content: ""; display: table; } .group:after {
clear: both; } .group { clear: both; *zoom: 1; } section { float: left; margin:
0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; }



Tata Letak dengan Demo Float Terkandung



Teknik yang ditampilkan di sini untuk memuat elemen dikenal sebagai "clearfix"
dan sering dapat ditemukan di situs web lain dengan nama
kelas clearfixatau cf. Kami telah memilih untuk menggunakan nama kelas
dari group, karena mewakili sekelompok elemen, dan mengekspresikan konten dengan
lebih baik.

Saat elemen melayang, penting untuk mencatat bagaimana pengaruhnya terhadap
aliran halaman dan untuk memastikan aliran halaman diatur ulang dengan menghapus
atau memuat elemen mengambang seperlunya. Gagal melacak float dapat menyebabkan
beberapa sakit kepala, terutama karena halaman mulai memiliki beberapa baris
dari beberapa kolom.






DALAM PRAKTEK


Mari kembali ke situs web Styles Conference untuk mencoba mengambangkan beberapa
konten.

Hal pertama yang pertama, sebelum kita mulai mengambangkan elemen apa pun, mari
berikan cara untuk menahan float tersebut dengan menambahkan clearfix ke CSS
kita. Di dalam main.cssfile, tepat di bawah gaya grid kita, mari tambahkan
clearfix di bawah nama kelas group, seperti sebelumnya.





/* ======================================== Clearfix
======================================== */ .group:before, .group:after {
content: ""; display: table; } .group:after { clear: both; } .group { clear:
both; *zoom: 1; }



Sekarang kita dapat memuat float, mari kita float primer <h1>di
dalam <header>elemen di sebelah kiri dan biarkan semua konten lain di header
membungkus di sebelah kanannya.

Untuk melakukan ini, mari tambahkan kelas logoke <h1>elemen. Kemudian di dalam
CSS kita, mari tambahkan bagian gaya baru untuk header utama. Di bagian ini kita
akan memilih <h1>elemen dengan logokelas dan kemudian floatke kiri.

HTML

<h1 class="logo"> <a href="index.html">Styles Conference</a> </h1>

CSS





/* ======================================== Primary header
======================================== */ .logo { float: left; }




Sementara kita melakukannya, mari tambahkan sedikit detail pada logo kita. Kita
akan mulai dengan menempatkan <br>elemen, atau jeda baris, di antara kata "Gaya"
dan kata "Konferensi" untuk memaksa teks logo kita duduk di dua baris.

Di dalam CSS, mari tambahkan batas ke bagian atas logo kita dan beberapa
vertikal paddinguntuk memberi ruang bernapas pada logo.

HTML

<h1 class="logo"> <a href="index.html">Styles <br> Conference</a> </h1>

CSS

.logo { border-top: 4px solid #648880; padding: 40px 0 22px 0; float: left; }




Karena kita melayangkan <h1>elemennya, kita ingin memuatnya float. Elemen induk
terdekat dari <h1>elemen adalah <header>elemen, jadi kita ingin menambahkan
kelas groupke <header>elemen. Melakukan ini menerapkan gaya clearfix yang kita
atur sebelumnya ke <header>elemen.

<header class="container group"> ... </header>

Elemen <header>mulai terbentuk, jadi mari kita lihat <footer>elemennya. Sama
seperti yang kita lakukan dengan <header>elemen, kita akan melayangkan hak cipta
kita ke kiri di dalam <small>elemen dan membiarkan semua elemen lain
membungkusnya ke kanan.

Namun, tidak seperti <header>elemennya, kita tidak akan menggunakan kelas secara
langsung pada elemen melayang. Kali ini kita akan menerapkan kelas ke induk
elemen melayang dan menggunakan pemilih CSS unik untuk memilih elemen lalu
mengapungkannya.

Mari kita mulai dengan menambahkan kelas primary-footerke <footer>elemen. Karena
kita tahu kita akan mengambangkan sebuah elemen di dalam <footer>elemen, kita
juga harus menambahkan kelas groupsaat kita melakukannya.

<footer class="primary-footer container group"> ... </footer>



Sekarang kelas dari primary-footerada di <footer>elemen, kita bisa menggunakan
kelas itu untuk melakukan prakualifikasi <small>elemen dengan CSS. Kami ingin
memilih dan floatelemen <small>ke left. Jangan lupa untuk membuat bagian baru di
dalam main.cssfile kami untuk gaya footer utama ini.






/* ======================================== Primary footer
======================================== */ .primary-footer small { float: left;
}






Untuk meninjau, di sini kita memilih <small>elemen, yang harus berada di dalam
elemen dengan nilai atribut kelas primary-footer, seperti <footer>elemen kita,
misalnya.

Terakhir, mari kita letakkan beberapa paddingdi bagian atas dan
bawah <footer>elemen untuk membantu memisahkannya sedikit lebih banyak dari sisa
halaman. Kita dapat melakukan ini secara langsung dengan
menggunakan primary-footerkelas dengan pemilih kelas.




.primary-footer { padding-bottom: 44px; padding-top: 44px; }




Dengan semua perubahan pada elemen <header>dan <footer>ini, kita harus
memastikan untuk membuatnya di setiap halaman, bukan hanya index.htmlhalaman.


Dengan beberapa pelampung, <header>dan <footer>elemen di halaman beranda
Konferensi Gaya kami bersatu






PEMOSISIAN DENGAN INLINE-BLOCK


Selain menggunakan float, cara lain kita dapat memposisikan konten adalah dengan
menggunakan displayproperti dalam hubungannya dengan inline-blocknilai. Metode
inline-block, seperti yang akan kita bahas, sangat membantu untuk meletakkan
halaman atau untuk menempatkan elemen di samping satu sama lain dalam satu
baris.

Ingat bahwa inline-blocknilai untuk displayproperti akan menampilkan elemen
dalam satu baris sementara memungkinkan mereka untuk menerima semua properti
model kotak, termasuk height, width, padding, borderdan margin. Menggunakan
elemen inline-block memungkinkan kita untuk memanfaatkan sepenuhnya model kotak
tanpa harus khawatir tentang membersihkan pelampung apa pun.




INLINE-BLOK DALAM PRAKTEK


Mari kita lihat contoh tiga kolom kita sebelumnya. Kita akan mulai dengan
menjaga HTML kita seperti apa adanya:

<header>...</header> <section>...</section> <section>...</section>
<section>...</section> <footer>...</footer>

Sekarang alih-alih mengambangkan ketiga <section>elemen kita, kita akan
mengubah displaynilainya menjadi inline-block, meninggalkan
properti marginand widthdari sebelumnya saja. CSS yang kami hasilkan akan
terlihat seperti ini:




 section { display: inline-block; margin: 0 1.5%; width: 30%; }



Sayangnya, kode ini saja tidak cukup berhasil, dan <section>elemen terakhir
didorong ke baris baru. Ingat, karena elemen blok-sebaris ditampilkan pada baris
yang sama satu sama lain, mereka menyertakan satu spasi di antara mereka. Ketika
ukuran setiap spasi ditambahkan ke nilai widthhorizontal dan marginsemua elemen
dalam baris, lebar total menjadi terlalu besar, mendorong <section>elemen
terakhir ke baris baru. Untuk menampilkan semua <section>elemen pada baris yang
sama, spasi putih di antara setiap <section>elemen harus dihilangkan.

Elemen Blok Sebaris dengan Demo Ruang Putih




MENGHAPUS SPASI ANTARA ELEMEN BLOK SEBARIS


Ada beberapa cara untuk menghilangkan spasi di antara elemen blok sebaris, dan
beberapa lebih kompleks daripada yang lain. Kami akan fokus pada dua cara
termudah, yang keduanya terjadi di dalam HTML.

Solusi pertama adalah meletakkan <section>tag pembuka setiap elemen baru pada
baris yang sama dengan <section>tag penutup elemen sebelumnya. Daripada
menggunakan baris baru untuk setiap elemen, kita akan mengakhiri dan memulai
elemen pada baris yang sama. HTML kita bisa terlihat seperti ini:




<header>...</header> <section> ... </section><section> ... </section><section>
... </section> <footer>...</footer>






Menulis elemen blok-sebaris dengan cara ini memastikan bahwa ruang antara elemen
blok-sebaris dalam HTML tidak ada; akibatnya, spasi tidak akan muncul saat
halaman dirender.

Elemen Blok Sebaris tanpa Demo Ruang Putih

Cara lain untuk menghilangkan spasi di antara elemen blok-sebaris adalah dengan
membuka komentar HTML langsung setelah tag penutup elemen
blok-sebaris. Kemudian, tutup komentar HTML tepat sebelum tag pembuka elemen
blok sebaris berikutnya. Melakukan hal ini memungkinkan elemen inline-block
untuk memulai dan mengakhiri pada baris HTML yang terpisah dan "mengomentari"
ruang potensial di antara elemen. Kode yang dihasilkan akan terlihat seperti
ini:





<header>...</header> <section> ... </section><!-- --><section> ...
</section><!-- --><section> ... </section> <footer>...</footer>



Tak satu pun dari opsi ini yang sempurna, tetapi sangat membantu. Saya cenderung
lebih suka menggunakan komentar untuk pengaturan yang lebih baik, tetapi opsi
mana yang Anda pilih sepenuhnya terserah Anda.







MEMBUAT TATA LETAK YANG DAPAT DIGUNAKAN KEMBALI


Saat membangun situs web, selalu yang terbaik untuk menulis gaya modular yang
dapat digunakan kembali di tempat lain, dan tata letak yang dapat digunakan
kembali termasuk dalam daftar kode yang dapat digunakan kembali. Tata letak
dapat dibuat menggunakan elemen float atau inline-block, tetapi mana yang paling
berhasil dan mengapa?

Apakah lebih baik menggunakan elemen float atau inline-block untuk menyusun
struktur halaman masih bisa diperdebatkan. Pendekatan saya adalah menggunakan
elemen blok sebaris untuk membuat kisi—atau tata letak—halaman dan kemudian
menggunakan pelampung ketika saya ingin konten membungkus elemen tertentu
(seperti pelampung dimaksudkan untuk dilakukan dengan gambar). Secara umum, saya
juga menemukan elemen inline-block lebih mudah untuk dikerjakan.

Yang mengatakan, gunakan apa pun yang paling cocok untuk Anda. Jika Anda merasa
nyaman dengan satu pendekatan di atas yang lain, maka lakukanlah.




Saat ini ada spesifikasi CSS baru yang sedang
dikerjakan—khususnya flex-dan grid-properti berbasis—yang akan membantu
mengatasi cara terbaik untuk menata halaman. Awasi metode ini saat mulai muncul
ke permukaan.






DALAM PRAKTEK


Dengan pemahaman yang kuat tentang tata letak yang dapat digunakan kembali,
saatnya telah tiba untuk menerapkannya di situs web Konferensi Gaya kami.

Untuk situs web Konferensi Gaya, kami akan membuat tata letak tiga kolom yang
dapat digunakan kembali menggunakan elemen blok sebaris. Kami akan melakukannya
dengan cara yang memungkinkan kami memiliki tiga kolom dengan lebar yang sama
atau dua kolom dengan lebar total yang dibagi di antara keduanya, dua pertiga di
satu dan sepertiga di kolom lainnya.

Untuk memulai, kita akan membuat kelas yang mendefinisikan widthkolom-kolom
ini. Dua kelas yang akan kita buat adalah col-1-3, untuk sepertiga, dan col-2-3,
untuk dua pertiga. Di dalam bagian grid dari main.cssfile kita, mari kita
lanjutkan dan tentukan kelas-kelas ini dan lebarnya yang sesuai.





.col-1-3 { width: 33.33%; } .col-2-3 { width: 66.66%; }



Kami ingin kedua kolom ditampilkan sebagai elemen blok-sebaris. Kita harus
memastikan bahwa perataan vertikalnya juga diatur ke topsetiap kolom.

Mari buat dua pemilih baru yang akan berbagi gaya properti tampilan dan perataan
vertikal.



.col-1-3, .col-2-3 { display: inline-block; vertical-align: top; }




Melihat CSS lagi, kami telah membuat dua pemilih kelas, col-1-3dan col-2-3, yang
dipisahkan dengan koma. Koma di akhir pemilih pertama menandakan bahwa pemilih
lain akan mengikuti. Selektor kedua diikuti oleh kurung kurawal pembuka, {, yang
menandakan bahwa deklarasi gaya harus diikuti. Dengan memisahkan selektor dengan
koma, kita dapat mengikat gaya yang sama ke beberapa selektor sekaligus.






Kami ingin memberi ruang di antara masing-masing kolom untuk membantu memecah
konten. Kita dapat melakukannya dengan meletakkan horizontal paddingpada setiap
kolom.



Ini bekerja dengan baik; namun, ketika dua kolom duduk bersebelahan, lebar ruang
di antara keduanya akan menjadi dua kali lipat dari ruang dari kolom luar ke
tepi baris. Untuk menyeimbangkan ini, kami akan menempatkan semua kolom kami di
dalam kotak dan menambahkan padding yang sama dari kolom kami ke kotak itu.




Mari kita gunakan nama kelas griduntuk untuk mengidentifikasi kisi kita, dan
kemudian mari kita identifikasi horizontal yang sama paddinguntuk kisi, col-1-3,
dan col-2-3kelas kita. Dengan koma memisahkan pemilih kami lagi, CSS kami
terlihat seperti ini:





.grid, .col-1-3, .col-2-3 { padding-left: 15px; padding-right: 15px; }




Saat kita menyiapkan horizontal padding, kita harus berhati-hati. Ingat, dalam
pelajaran terakhir kita membuat elemen penampung, yang dikenal dengan
kelas container, untuk memusatkan semua konten kita pada halaman dalam 960elemen
lebar-piksel. Saat ini jika kita menempatkan elemen dengan kelas griddi dalam
elemen dengan kelas container, bantalan horizontalnya akan saling menambah, dan
kolom kita tidak akan tampak proporsional dengan lebar halaman lainnya.




Kami tidak ingin ini terjadi, jadi sebagai gantinya, kami harus berbagi beberapa
gaya dari containerkumpulan aturan dengan gridkumpulan aturan. Secara khusus,
kita perlu membagikan widthproperti dan nilai (untuk memastikan halaman kita
tetap pada 960lebar piksel) dan marginproperti dan nilai (untuk memusatkan
elemen apa pun dengan kelas kisi pada halaman).

Kami akan mencapai ini dengan memecah containeraturan lama yang ditetapkan
menjadi berikut:





.container, .grid { margin: 0 auto; width: 960px; } .container { padding-left:
30px; padding-right: 30px; }




Sekarang elemen apa pun dengan kelas containeratau kisi akan menjadi 960lebar
piksel dan berada di tengah halaman. Selain itu, kami telah mempertahankan
padding horizontal yang ada untuk elemen apa pun dengan kelas containerdengan
memindahkannya ke kumpulan aturan baru yang terpisah.




Baiklah—semua pengangkatan berat yang diperlukan untuk mendapatkan gaya kisi
yang dapat digunakan kembali ke tempatnya telah selesai. Sekarang saatnya untuk
bekerja di HTML kita dan untuk melihat bagaimana kinerja kelas-kelas ini.



Kami akan mulai dengan penggoda di halaman beranda, di dalam index.htmlfile
kami, menyelaraskannya menjadi tiga kolom. Saat ini, penggoda dibungkus
dalam <section>elemen dengan kelas container. Kami ingin mengubah kelas itu
dari containermenjadi gridsehingga kami dapat mulai menempatkan kolom di
dalamnya.



<section class="grid"> ... </section>

Selanjutnya, kita ingin menambahkan kelas col-1-3ke setiap <section>elemen di
dalam <section>elemen dengan kelas grid.






<section class="grid"> <section class="col-1-3"> ... </section> <section
class="col-1-3"> ... </section> <section class="col-1-3"> ... </section>
</section>



Dan terakhir, karena setiap kolom kita adalah elemen blok-sebaris, kita ingin
memastikan bahwa kita menghapus ruang putih kosong di antara mereka. Kami akan
menggunakan komentar untuk melakukan ini, dan kami akan menambahkan sedikit
dokumentasi yang mencatat setiap bagian yang akan datang saat kami melakukannya
untuk mengatur kode kami dengan lebih baik.







<section class="grid"> <!-- Speakers --> <section class="col-1-3"> ...
</section><!-- Schedule --><section class="col-1-3"> ... </section><!-- Venue
--><section class="col-1-3"> ... </section> </section>




Untuk meninjau, pada baris 3 kami meninggalkan komentar yang mengidentifikasi
bagian "Pembicara" untuk diikuti. Di akhir baris 7, kami membuka komentar segera
setelah </section>tag penutup. Dalam komentar itu, pada baris 9 kami
mengidentifikasi bagian "Jadwal" yang akan datang. Kami kemudian menutup
komentar di awal baris 11, tepat sebelum <section>tag pembuka. Struktur komentar
yang sama ini muncul kembali pada baris 13 sampai 17 di antara
dua <section>elemen, tepat sebelum bagian “Tempat”. Secara keseluruhan, kami
telah mengomentari kemungkinan ruang kosong di antara kolom sambil juga
menggunakan komentar tersebut untuk mengidentifikasi bagian kami.




Kami sekarang memiliki kisi tiga kolom yang dapat digunakan kembali yang
mendukung banyak pengaturan, menggunakan kolom dengan lebar sepertiga dan dua
pertiga. Halaman beranda kami sekarang memiliki tiga kolom, memecah semua
permainan asah yang berbeda.





Halaman beranda Konferensi Gaya kami sekarang menyertakan tata letak tiga kolom




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)








ELEMEN PEMOSISIAN UNIK


Sesekali kita ingin memposisikan elemen dengan tepat, tetapi elemen float atau
inline-block tidak akan berhasil. Float, yang menghapus elemen dari alur
halaman, sering kali menghasilkan hasil yang tidak diinginkan karena elemen di
sekitarnya mengalir di sekitar elemen melayang. Elemen blok sebaris, kecuali
kita membuat kolom, bisa jadi cukup canggung untuk masuk ke posisi yang
tepat. Untuk situasi ini kita dapat menggunakan positionproperti yang
berhubungan dengan properti box offset.

Properti positionmengidentifikasi bagaimana elemen diposisikan pada halaman dan
apakah elemen itu akan muncul dalam aliran normal dokumen. Ini digunakan bersama
dengan properti offset kotak— top, right, bottom, dan left—yang mengidentifikasi
secara tepat di mana sebuah elemen akan diposisikan dengan menggerakkan elemen
dalam sejumlah arah yang berbeda.

Secara default setiap elemen memiliki positionnilai static, yang berarti ada
dalam aliran normal dokumen dan tidak menerima properti offset kotak apa
pun. Nilai staticpaling sering ditimpa dengan a relativeatau absolutenilai, yang
akan kita periksa selanjutnya.







PEMOSISIAN RELATIF


Nilai relativeuntuk positionproperti memungkinkan elemen muncul dalam aliran
normal halaman, menyisakan ruang untuk elemen sebagaimana dimaksud sementara
tidak mengizinkan elemen lain mengalir di sekitarnya; namun, ini juga
memungkinkan posisi tampilan elemen untuk dimodifikasi dengan properti kotak
offset. Sebagai contoh, perhatikan HTML dan CSS berikut:

HTML

<div>...</div> <div class="offset">...</div> <div>...</div>




CSS







div { height: 100px; width: 100px; } .offset { left: 20px; position: relative;
top: 20px; }






DEMO PEMOSISIAN RELATIF



Di sini elemen kedua <div>, elemen dengan kelas offset,
memiliki positionnilai relativedan dua properti kotak offset, leftdan top. Ini
mempertahankan posisi asli elemen, dan elemen lain tidak diizinkan untuk pindah
ke ruang ini. Selain itu, properti kotak offset memposisikan ulang elemen,
mendorongnya 20piksel dari leftdan 20piksel dari toplokasi aslinya.

Dengan elemen yang diposisikan secara relatif, penting untuk mengetahui bahwa
properti kotak offset mengidentifikasi dari mana elemen akan dipindahkan dari
posisi aslinya. Dengan demikian, leftproperti dengan nilai 20piksel sebenarnya
akan mendorong elemen ke arah kanan, dari kiri, 20piksel. Properti topdengan
nilai 20piksel, kemudian, akan mendorong elemen ke bawah, dari atas, 20piksel.

Saat kita memposisikan elemen menggunakan properti kotak offset, elemen tumpang
tindih dengan elemen di bawahnya daripada memindahkan elemen itu ke bawah
seperti yang dilakukan properti marginor .padding






PEMOSISIAN ABSOLUT


Nilai absoluteuntuk positionproperti berbeda dari relativenilai di mana elemen
dengan positionnilai absolutetidak akan muncul dalam aliran normal dokumen, dan
ruang dan posisi asli dari elemen yang diposisikan secara mutlak tidak akan
dipertahankan.

Selain itu, elemen yang diposisikan secara absolut dipindahkan dalam kaitannya
dengan elemen induk yang posisinya relatif terdekat. Jika elemen induk yang
diposisikan secara relatif tidak ada, elemen yang diposisikan secara absolut
akan diposisikan dalam kaitannya dengan <body>elemen tersebut. Itu sedikit
informasi; mari kita lihat bagaimana ini bekerja di dalam beberapa kode:

HTML



<section> <div class="offset">...</div> </section>


CSS



section { position: relative; } div { position: absolute; right: 20px; top:
20px; }

Demo Pemosisian Absolut

Dalam contoh ini, <section>elemen diposisikan secara relatif tetapi tidak
menyertakan properti offset kotak apa pun. Akibatnya posisinya tidak
berubah. Elemen <div>dengan
kelas offsettermasuk positionnilai absolute. Karena <section>elemen adalah
elemen induk yang posisinya relatif paling dekat dengan <div>elemen, <div>elemen
akan diposisikan dalam hubungannya dengan <section>elemen.

Dengan elemen yang diposisikan secara relatif, properti offset kotak
mengidentifikasi ke arah mana elemen akan dipindahkan dalam kaitannya dengan
dirinya sendiri. Dengan elemen yang diposisikan secara absolut, properti offset
kotak mengidentifikasi ke arah mana elemen akan dipindahkan dalam kaitannya
dengan elemen induk yang posisinya relatif terdekat.

Sebagai hasil dari properti offset rightdan topkotak, <div>elemen akan
muncul 20piksel dari rightdan 20piksel topdari <section>.

Karena <div>elemen diposisikan secara mutlak, elemen tersebut tidak berada dalam
alur normal halaman dan akan tumpang tindih dengan elemen di sekitarnya. Selain
itu, posisi aslinya <div>tidak dipertahankan, dan elemen lain dapat menempati
ruang itu.

Biasanya, sebagian besar pemosisian dapat ditangani tanpa
menggunakan positionproperti dan properti kotak offset, tetapi dalam kasus
tertentu mereka bisa sangat membantu.




RINGKASAN


Mempelajari cara memposisikan konten dalam HTML dan CSS adalah langkah besar
untuk menguasai dua bahasa. Tambahkan ke model kotak ini, dan kami sedang dalam
perjalanan untuk menjadi pengembang front-end.

Untuk meninjau, dalam pelajaran ini kami membahas hal-hal berikut:

✔Apa itu float dan bagaimana menggunakannya untuk memposisikan konten

✔Cara menghapus dan mengandung elemen melayang

✔Bagaimana memposisikan konten dengan elemen inline-block

✔Cara menghapus spasi putih di antara elemen blok-sebaris

✔Cara memposisikan konten secara unik dengan elemen yang diposisikan secara
relatif dan mutlak

Kami menambahkan keterampilan baru dengan setiap pelajaran, jadi mari kita
lanjutkan. Selanjutnya, tipografi!




SUMBER & TAUTAN


✔Teori Float CSS melalui Majalah Smashing

✔Pemosisian CSS 101 melalui A List Apart




🧰 SERVICE

📝 FORMULIR SERVICE 📥 💯 FREE DOWNLODER FILE


📊 FUNDING.YML

🏅Become a Patreon! 🎗SOCIABUZZ 🏅SUPPORT 🎗GIVE 🏅SAWERIA 🎗 Paypal








TAG :


#LEARN


#HTML


#CSS


#PROGRAMER


WEBSITE


#DESAIGN


#AWDEV


SCORE :
 2022 ©️ www.awdev.eu.org






CONNECT WITH ME:

          










<a href="https://www.awdev.eu.org/2022/04/pelajaran5.html" > Pelajaran 5 |
MEMOSISIKAN KONTEN E - LEARNING www.awdev.eu.org © Pelajaran 5 | MEMOSISIKAN
KONTEN E - LEARNING www.awdev.eu.org - AWDEV Source:
https://www.awdev.eu.org/2022/04/pelajaran5.html?m=1 © Pelajaran 5 | MEMOSISIKAN
KONTEN E - LEARNING www.awdev.eu.org - AWDEV Source:
https://www.awdev.eu.org/2022/04/pelajaran5.html?m=1 </a>



santri indonesia bangkit

Salin



ANDA MUNGKIN MENYUKAI POSTINGAN INI

 * 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 2 | MENGENAL HTML E-LEARNING
    PELAJARAN 2 | MENGENAL HTMLE-LEARNINGwww.awdev.eu.org Dalam Pelajaran ini :
   ✔ HTML ✔ Ikhtisar Semantik ✔ Divisi & Rentang ✔ Elemen Berbasis Teks ✔
   Struktur bangunan ✔ Membuat Hyp…
   
 * 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 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 3 | MENGENAL CSS E-LEARNING
    PELAJARAN 3 | MENGENAL CSSE-LEARNINGwww.awdev.eu.org Mengenal CSS Dalam
   Pelajaran ini : ✔ CSS ✔ Kaskade ✔ Menghitung Spesifisitas ✔ Menggabungkan
   Selector ✔ Layering Styles denga…
   
 * 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…
   

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


6 APLIKASI TERBAIK UNTUK MENJUAL FOTO KAMU DAN TERBUKTI MEMBAYAR


PELAJARAN 11 | MENGATUR DATA DENGAN TABLE | E-LEARNING AWDEV DEVOLOPER FREE
KURSUS ONLINE


PELAJARAN 12 | MEBULIS KODE TERBAIK ANDA | E-LEARNING AWDEV DEVOLOPER FREE
KURSUS ONLINE


LABELS

BLOOG
BUSSINES
CSS
DEVOLOPER
E-LEARNING
GITHUB
HTML
IMAGE
NEWS
PEMOGRAMAN
SEO
VUE
 1.  PELAJARAN 5| MEMOSISIKAN KONTEN E - LEARNINGwww.awdev.eu.org
    1.  Memosisikan Konten
    2.  
    3.  Pemosisian dengan Float
    4.  Mengapung dalam Praktek
    5.  Tata Letak tanpa Float Demo
    6.  Tata Letak dengan Floats Demo
    7.  Floats Dapat Mengubah Nilai Tampilan Elemen
    8.  Membersihkan & Mengandung Float
    9.  Tata Letak tanpa Demo Float yang Dibersihkan atau Terkandung
    10. Membersihkan Float
    11. Mengandung Float
    12. Dalam praktek
    13. Pemosisian dengan Inline-Block
    14. Inline-Blok dalam Praktek
    15. Menghapus Spasi Antara Elemen Blok Sebaris
    16. Membuat Tata Letak yang Dapat Digunakan Kembali
    17. Dalam praktek
    18. Demo & Kode Sumber
    19. Elemen Pemosisian Unik
    20. Pemosisian Relatif
    21. Demo Pemosisian Relatif
    22. Pemosisian Absolut
    23. Ringkasan
    24. Sumber & Tautan
    25. 🧰 SERVICE
    26. 📊 FUNDING.yml
        1. Connect with me:


 * 
 * 
 * 
 * 
 * 



-->
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