Pada kesempatan kali ini akan memperlihatkan tutorial cara mengatur elemen HTML dengan CSS, tutorial ini sangat sederhana namun sangat penting untuk dipelajari. Fungsi kita mempelajari cara mengatur sebuah elemen HTML dengan CSS ini, supaya memudahkan kita dalam menciptakan layout website nantinya. Oleh lantaran itu sebelum teman-teman menciptakan layout website ada baiknya teman-teman mengenal Point-Point Penting Dalam Mengatur Tataletak elemen HTML Dengan CSS. Dibawah ini aku sudah menciptakan pola code HTML dan CSS dalam mengatur beberapa elemen, silahkan teman-teman tulis cede berikut ini, dan simpan dengan nama index.html.
<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="wrapper"> <div id="kiri1">KIRI</div> <div id="tengah1">TENGAH</div> <div id="kanan1">KANAN</div> <div id="kiri2">KIRI</div> <div id="tengah2">TENGAH</div> <div id="kanan2">KANAN</div> <div id="kiri3">KIRI</div> <div id="tengah3">TENGAH</div> <div id="kanan3">KANAN</div> <div id="vertikal1">KIRI</div> <div id="vertikal2">KIRI</div> <div id="vertikal3">KIRI</div> <div id="vertikal4">TENGAH</div> <div id="vertikal5">TENGAH</div> <div id="vertikal6">TENGAH</div> <div id="vertikal7">KANAN</div> <div id="vertikal8">KANAN</div> <div id="vertikal9">KANAN</div> </div> </body> </html>
Jika teman-teman jalankan pada browser maka sanggup kita lihat setiap alemen HTML yang sudah kita buat akan berada di sisi kiri, itu disebabkan lantaran elemen HTML nya belum diatur. Untuk mengatur nya kita memakai CSS. Silahkan teman-teman tulis code CSS berikut ini dan disimpan dengan nama style.css lalu diletakan pada folder yang sama dengan index.html yang sudah kita buat sebelumnya.
#wrapper { background-color: #989898; width: 960px; height: 522px; border: 1px solid black; margin: auto; } #kiri1 { background-color: #70c2fd; float: left; width: 400px; border: 1px solid black; margin: 2px; padding: 10px 0px; text-align: center; } #tengah1 { background-color: #1fc5ae; float: left; width: 400px; border: 1px solid black; margin: 2px; padding: 10px 0px; text-align: center; } #kanan1 { background-color: #FF9800; float: left; width: 142px; border: 1px solid black; margin: 2px; padding: 10px 0px; text-align: center; } #kiri2 { background-color: #70c2fd; float: left; width: 500px; border: 1px solid black; margin: 2px; padding: 10px 0px; text-align: center; } #tengah2 { background-color: #1fc5ae; float: left; width: 342px; border: 1px solid black; margin: 2px; padding: 10px 0px; text-align: center; } #kanan2 { background-color: #FF9800; float: left; width: 100px; border: 1px solid black; margin: 2px; padding: 10px 0px; text-align: center; } #kiri3 { background-color: #70c2fd; float: left; width: 340px; border: 1px solid black; margin: 2px; padding: 10px 0px; text-align: center; } #tengah3 { background-color: #1fc5ae; float: left; width: 102px; border: 1px solid black; margin: 2px; padding: 10px 0px; text-align: center; } #kanan3 { background-color: #FF9800; float: left; width: 500px; border: 1px solid black; margin: 2px; padding: 10px 0px; text-align: center; } #vertikal1 { background-color: #70c2fd; float: left; width: 102px; border: 1px solid black; margin: 2px; padding: 10px 0px; text-align: center; } #vertikal2 { background-color: #1fc5ae; float: left; width: 340px; border: 1px solid black; margin: 2px; padding: 10px 0px; text-align: center; clear: both; } #vertikal3 { background-color: #FF9800; float: left; width: 500px; border: 1px solid black; margin: 2px; padding: 10px 0px; text-align: center; clear: both; } #vertikal4 { background-color: #70c2fd; float: left; width: 102px; border: 1px solid black; margin-top: 2px; padding: 10px 0px; margin-left: 400px; text-align: center; } #vertikal5 { background-color: #1fc5ae; float: left; width: 340px; border: 1px solid black; margin-top: 2px; padding: 10px 0px; margin-left: 400px; text-align: center; } #vertikal6 { background-color: #FF9800; float: left; width: 500px; border: 1px solid black; margin-top: 2px; padding: 10px 0px; margin-left: 400px; text-align: center; } #vertikal7 { background-color: #70c2fd; float: right; width: 102px; border: 1px solid black; margin: 2px; padding: 10px 0px; text-align: center; } #vertikal8 { background-color: #1fc5ae; float: right; width: 340px; border: 1px solid black; margin: 2px; padding: 10px 0px; text-align: center; clear: both; } #vertikal9 { background-color: #FF9800; float: right; width: 500px; border: 1px solid black; margin: 2px; padding: 10px 0px; text-align: center; clear: both; } jikalau teman-teman jalankan pada browser maka hasil nya akan ibarat ini.
Jika teman-teman perhatikan dalam code css nya, pada belahan #wrapper width (lebar) sudah kita buat adalah 960px, maka dari itu dilarang ada elemen yang melewati batas tersebut, jikalau teman-teman mau menambahkan element lain pada html yang sudah teman-teman buat kemudia menambahkan css nya pastikan element tersebut dilarang lebar nya lebih dari elemen wrapper (pembungkus luar), supaya lebih gampang dalam memahami nya coba teman-teman ganti value-value yang ada pada code CSS tersebut lalu teman-teman amati hasilnya.
Tutorial ini hanya dasar untuk mengatu elemen HTML masih banyak property-property lain dari CSS yang sanggup dipakai untuk mengatur elemen HTML, pola position, overflow,z-index dan lain sebagainya. Sekian tutorial perihal Point-Point Penting Dalam Mengatur Letak elemen HTML Dengan CSS semoga sanggup membantu teman-teman dalam menciptakan dan mempelajari website.
Sumber http://pointwebsite.blogspot.com/
No comments:
Post a Comment