fungsi utama css adalah merancang, merubah, mendisain, membentuk halaman wesite(blog juga website). dan isi dari halaman website adalah tag-tag html, logikanya css itu dapat merubah tag-tag html(yang sederhana) sehingga menjadi lebih fungsional dan menarik.
cara kerja css itu sangatlah mudah, kita hanya perlu menulis stylenya(selector id dan class tersesuaikan) maka secara otomatis akan bekerja pada document html.
HTML
HTML biasanya menggunakan tag-tag tertentu yang berada dalam tanda kurung <>. Sebagian besar tag pada HTML adalah tag yang berpasangan, contoh : jika kita menggunakan <head> harus ditutup dengan </head>, atau jika kita menggunakan <p> harus ditutup dengan </p>. Tapi ada juga beberapa tag yang tidak berpasangan, contohnya adalah <img>.
Dokumen HTML mirip dengan dokumen tulisan biasa. Akan tetapi, dalam dokumen HTML, sebuah tulisan dapat memuat instruksi yang ditandai dengan kode atau lebih dikenal dengan TAG tertentu. Contohnya, jika ingin membuat tulisan ditampilkan menjadi tebal, seperti TULISAN TEBAL, penulisan dalam dokumen HTML dilakukan dengan cara TULISAN TEBAL. Tanda dipakai untuk mengaktifkan instruksi cetak tebal, kemudian diikuti tulisan yang ingin ditebalkan. Setelah itu, diakhiri dengan tanda untuk menonaktifkan cetak tebal tersebut.
CONTOH SCRIPT HTML:
!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="bagus.css">
</head>
<body>
<div id="image">
</div>
<div id="header">
<ul>
<li><a href="nav.html">Home</a></li>
<li><a href="nav.html">News</a></li>
<li><a href="nav.html">Contact</a></li>
<li><a href="nav.html">About</a></li>
</ul>
</div>
<div id="nav">
<ul>
<li><a href ="nav.html">Menu 1</a></li>
<li><a href ="nav.html">Menu 2</a></li>
<li><a href ="nav.html">Menu 3</a></li>
<li><a href ="nav.html">Menu 4</a></li>
</ul>
</div>
<div id="section">
<h1>LONDON</h1>
<p>
london is the capital city of england. it is the most populous city in the united kingdom,with a metropolitan are of over 13 million in habitants.
</p>
<p>
standing on the river thames, london has been a major settlement for two millennia,its history going back to its founding by the romans, who named it londinium.
</p>
</div>
<div id="footer">
<marquee >@BAGUS TRI HARIANTO.com</marquee>
</div>
</body>
</html>
CONTOH SCRIPT CSS:
#image
{
background-image:url("London.jpg");
padding-left:100px;
height:187px;
}
#header{
background-color:#7B68EE;
color:red;
text-align:center;
padding:2px;
padding-left:400px;
}
#nav{
line-height:40px;
background-color:#7B68EE;
height:230px;
width:130px;
float:left;
padding:5px;
}
#section{
width:350px;
float:left;
padding:10px;
}
#footer{
background-color:#7B68EE;
color:gold;
clear:both;
text-align:center;
padding:5px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a:link, a:visited {
display: block;
width: 125px;
font-weight: bold;
color: gold;
background-color:#9400DE ;
text-align: center;
padding: 5px;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {
background-color: black;
}
HASILNYA:
pridho42.blogspot.com
BalasHapusane coba codingnya ya gan
BalasHapusMy blog
terimakasi gan
BalasHapusTerimakasih.. tulisannya sangat bermanfaat..
BalasHapusMy blog
My Campus
selamat siang gan.saya mau tanya, fungsi a:visited itu sebenernya utk apa ya. karena saya sering pake :hover tapi belum coba tu pake :visited...??
BalasHapusBagi yang ingin hosting web kalian, ada web hosting murah di sini, silahkan kalian klik link di bawah ini :
BalasHapushttps://panel.niagahoster.co.id/ref/149991?r=hosting-murah
https://panel.niagahoster.co.id/ref/149991?r=domain-murah
https://panel.niagahoster.co.id/ref/149991?r=ordernow/configure/13
Jika link tidak berfungsi, silahkan copy dan paste di new browser
Oke gan, setelah membaca artikel soal MEMBUAT PROGRAM LAYOUT WEB DENGAN CSS DAN HTML, akan saya praktekkan nantinya.
BalasHapusKunjungi website kampus saya : http://www.atmaluhur.ac.id
Kunjungi website saya : https://risma.mahasiswa.atmaluhur.ac.id
Makasih artikelnya moga bermanfaat u orang banyak..semangat dan sukses y..
BalasHapuskunjungi web http://www.atmaluhur.ac.id
dan blog saya https://kawakenakeruce.mahasiswa.atmaluhur.ac.id
Jujur gan...sy pemula dan stelah sy jalankan programnya kok tampilannya gak spt diatas ya, tp sy akan coba lagi jalankan program nya...mngkn ketikan codingan saya ada yg missing alias gak lengkap jd gak bs tampil spt diatas.... tp keren bgt artikelnya sangat membantu sy khususnya dan pemula yang lain pada umumnya.....makasih ya gan.....
BalasHapusoya jangan lupa ya....
kunjungi website saya ya : https://lurriekurniasih.mahasiswa.atmaluhur.ac.id
dan website kampus saya : http://www.atmaluhur.ac.id
Komentar ini telah dihapus oleh pengarang.
BalasHapusnice share kaka sudah menjelaskan secara lengkap tentang Belajar membuat layout website dengan HTML dan CSS, ini sangat membantu sekali ilmunya ka terimakasih. Oya ka itu gimana buat tulisan "welcome to my blog" bisa gerak unik kereen gtu ka?? sekali kali thanks kaka.
BalasHapusKunjungi website saya ya https://lusianaselviani.mahasiswa.atmaluhur.ac.id
Dan website kampus saya http://www.atmaluhur.ac.id
tulisan welcome my blog bikin salah focus,unik,baru kali ini nemuin artikel yg ad tulisan yang bisa gerak - gerak,,kerenss,,,ap codingannya kak,,,hehehe,,,pengen juga coba buat web seperti ini,,,
BalasHapusjgan lupa kunjungi website saya kak : https://nurrizkiana.mahasiswa.atmaluhur.ac.id/
website kampus saya : http://www.atmaluhur.ac.id/
Baca Tutorial Membuat WEB Sekolah Lainnya :Klik Disini.
BalasHapus