Alhamdulillah, setelah sempat terputus akibat posting tentang aplikasi toko online kini penulis dapat kembali menuliskan artikel tentang pengintegrasian satu kompen web dengan komponen web lainnya. seperti terlihat pada judul post ini kedepan penulis akan menyampaikan materi tentang Integrasi antara css dengan html. sebelumnya apa itu css ?, menurut situs www.w3schools.com CSS is a stylesheet language that describes the presentation of an HTML (or XML) document. CSS describes how elements must be rendered on screen, on paper, or in other media.
yang dapat penulis simpulkan sebagai berikut css merupakan bahasa yang digunakan untuk meghias elemen html maupun xml yang hai akhirnya dapat ditampilkan dilayar web yang anda beri css sebelumnya print out kertas maupun media lainnya. tidak seperti javascript maupun php css tidak bisa berdiri sendiri sebagai komponen pendukung web dan seperti yg telah dijelaskan minimal anda harus membuat format html maupun xml untuk bisa mempraktekan materi tentang css ini. sebenarnya tag html sendiri sudah mampu menghias dirinya tanpa melalui css tapi seperti memberi warna,mengubah ukuran form memberi sedikit efek animasi dsb. namun cara itu sudah angat ketinggalan dan hampir bisa dipastikan pemrograman web moderen sudah meninggalkan cara tersebut, karena terlalu kaku dan sudah tidak sejalan dengan prinsip pemrograman dinamis yang menjadi trend sekaligus pada era moderen ini.
contoh script berikut akan manampilkan sebuah elemen html yang dihias dengan properti milik tag html itu sendiri tidak melalui css
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1 text color=red >
<marquee>
<font color="red">Animasi dan ornamen ini tampil tanpa menggunakan CSS</font >
</marque>
</h1>
</body>
</html>
Silahkan copy paste script diatas kedalam notepad atau notepad ++ dan simpan dengan ekstensi ".html" tanpa tanda petik dan buka file tersebut dengan cara klik ganda maka akan muncul tampilan running text berwarna merah dilayar pembca. mungkin itu sedikit gambaran tentang html styling/pemberian ornamen pada elemen html tanpa css. kemudian untuk bisa mempelajari materi tentang css secara utuh pembaca dapa mengunjungi link ini. karena pada artikel ini penulis hanya akan membahas cara pengintegrasian antara css dan html saja. kemudian untuk bisa mengintegrasikan antara html dan css ada beberapa teknik beberapa teknik yang umum diantarannya
- Inline style
- Internal line style
- dan external line style
namun karena menyesuaikan dengan struktur artikel ini yang yang disampaikan secara berkelanjutan dan tahap demi tahap penulis hanya akan membahas mengenai inline saja dan mudah mudahan kedepan 2 tekniklainnya bisa penulis terbitkan.
teknik penulisan css secara inline dilakukan dengan cara memasukan script css secara lansung kedalam tag elemen html html.
contoh 1 menyisipkan script css ke tag <h1></h1>
<!DOCTYPE html>
<html>
<body>
<h1>text ini belum diformat dengan css.</h1>
<h1 style="color:blue;margin-left:30px;"> text ini telah diformat dengan css.</h1>
</body>
</html>
kode yang berwarna merah ini style="color:blue;margin-left:30px;" merupakan code css cara disampingkan merupakan salah satu cara membuat ornamen pada elemen html tepatnya untuk merubah text yang diharapkan berwarna biru. kemudian dengan cara seperti artikel artikel sebelumnya tentang cara menentukan extensi file maka simpan kode tersebut dengan extensi .html contoh integrasike4.html. kemudian. jika berhasil akan tampil halaman seperti berikut:
gambar contoh 1
contoh 1 menyisipkan script css ke tag <h1></h1>
<!DOCTYPE html>
<html>
<body>
<h1>text ini belum diformat dengan css.</h1>
<h1 style="color:blue;margin-left:30px;"> text ini telah diformat dengan css.</h1>
</body>
</html>
kode yang berwarna merah ini style="color:blue;margin-left:30px;" merupakan code css cara disampingkan merupakan salah satu cara membuat ornamen pada elemen html tepatnya untuk merubah text yang diharapkan berwarna biru. kemudian dengan cara seperti artikel artikel sebelumnya tentang cara menentukan extensi file maka simpan kode tersebut dengan extensi .html contoh integrasike4.html. kemudian. jika berhasil akan tampil halaman seperti berikut:
gambar contoh 1
selain memformat text yang ada didalam tag html css juga memformat tagnya itu sendiri contoh tag <p> </p> berikut akan kami format menjadi border
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<h2>Menambahkan border ke elemen/tag html</h2>
<p>This property specifies the width of the four borders:</p>
<p style =" border-style: solid; border-width: 5px; height:100px;">Bisa dsisipkan text disini.</p>
</body>
</html>
jika script tersebut dijalankan akan muncul tampilan seperti ini
gambar contoh 2
dari 2 contoh yang ada bisa dijadikan salah satu trik untuk membuat layout website ataupun blog jika anda mau sedikit berkreasi disana contoh :
gambar contoh 3
<!DOCTYPE html><html>
<head>
<style>
</style>
</head>
<body>
<h2>Membuat layout web sederhana</h2>
<!---tag induk---->
<div style =" border-style: solid; border-width: 5px; height:400px;">
<div style ="float:left;border-style: solid; height:10%; width:100%;">
header
</div>
<div style ="float:left; border-style: solid; height:75%; width:25%;">
menu/navigasi
</div>
<div style ="float:left; border-style: solid; height:75%; width:73%;">
content blog/artikel
</div>
<div style ="float:left; border-style: solid; height:10%; width:100%;">
footer
</div>
</div>
</body>
</html>
pada contoh diatas penulis sengaja memakai tag <div > </div> agar menambah wawasan lain bagi pembaca dan sebenarnya hampir semua tag html bisa disisipi script css namun penulis pilihkan secara acak untuk contoh program selanjutnya jalankan script yang penulis berikan kedalam browser maka akan tampil tampilan seperti berikut:
gambar contoh ke 3 implementasi untuk layout web/blog
demikian materi tentang integrasi antara komponen html dengan css yang bisa penulis sampaikan selanjutnya materi tentang integrasi akan penulis sambung setelah artikel tentang native php,native javascript dan native html penulis berikan. namun dalam bentuk framework maupun contoh pada sebuah project pembuatan web didalam web developement. jika ada yang masih bingung bisa tinggalkan comment dan akan hadir materi selanjutnya Native PHP. terimakasih
No comments:
Post a Comment