Menggabungkan HTML dan CSS
Untuk dasar cara membuat tampilan web atau layout menggunakan HTML dan CSS , kita perlu mengetahui apa-apa saja yang ada pada layout sebuah web sehingga terbentuk sebuah web seperti yang kita inginkan.
Di dalam sebuat web terdapat 4 urutan atau kerangka web yaitu, Header, Sidebar, Section (body), Footer.
Header : Kepala website. Tempat letak judul web, logo web dan lain sebagainya.
untuk lebih jelas nya lihat scrip html dan css di bawah ini:
script html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="robi alben.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>
<font color=blue>algoritma adalah urutan langkah-langkah logis penyelesaian masalah yang di susun secara sistematis dan logis, langkah-langkah dalam algoritma harus logis dan dapat di tentukan nilai salah atau benar. algoritma harus benar artinya algoritma akan memberikan keluaran yang di kehendaki dari semua masukan yang di berikan. praktikum pemrograman dua kelas A
</p>
<p>
perogram adalah kumpulan pernyataan komputer dalam program adalah algoritma. program di tulis dengan menggunakan bahasa program jadi bisa di sebut bahawa program adalah suatu implementasi dari bahasa program. algoritma merupakan jantung ilmu informatika.
algoritma adalah jantung ilmu komputer atau informatika. banyak cabang ilmu komputer yang mengarah ke dalam trimilogi algoritma peratikum algoritma pemrograman dua kelas mata kuliah struktur data
</p>
</div>
<div id="footer">
<marquee >copyright_robby.albhent@gmail.com</marquee>
</div>
</body>
</html>
simpan script di atas dengan type html ( .html)
script css
#image
{
background-image:url("rby.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;
}
simpan script di atas ke folder yang sama dengan html di atas tapi dengan type CSS ( .css)
HASIL DARI SCRIPT DI ATAS
+ komentar + 10 komentar
NJKJVH
sangat berguna ..thanks gan
Luar biasa! keren banget gan...... terima kasih sudah mau berbagi tutorial langkah demi langkah yang sangat detail tentang bagaimana MEMBUAT LAYOUT WEBSITE KEREN GABUNGAN HTML DAN CSS dan hasilnya sangat fantastis ... sukses terus wat agan dan terus update artikelnya semoga bermanfaat utk pemula lainnya.......Sekali lagi Trima kasih..........
Oya jangan lupa ya........
kunjungi website saya ya : https://lurriekurniasih.mahasiswa.atmaluhur.ac.id
dan website kampus saya : http://www.atmaluhur.ac.id
okee kaka terimakasih sudah berbagi ilmunya tentang MEMBUAT LAYOUT WEBSITE KEREN GABUNGAN HTML DAN CSS. ijin copas ya ka materinya buat bahan belajar aku maklum baru pemula belajar buat Web ka.
Kunjungi website saya ya https://lusianaselviani.mahasiswa.atmaluhur.ac.id
Dan website kampus saya http://www.atmaluhur.ac.id
Terimakasih artikelnya ngebantu kita buat belajar html dan css, trus script html dan css nya tinggal di copy buat latihan. Singakt, padat, berisi buat artikel ini.
Website saya https://sriseptiarini.mahasiswa.atmaluhur.ac.id
Website kampus http://www.atmaluhur.ac.id
kak artikel berguna banget buat aku yang pemula,,detail penjelasannya,,makasih kak ya,,,
jangan lupa mampir kek website saya : https://nurrizkiana.mahasiswa.atmaluhur.ac.id/
website kampus saya : http://www.atmaluhur.ac.id/
Wah penjelasannya sangat simple sehingga pemula seperti saya mudah mengerti. Tolong lengkapi lagi ya kak artikelnya dengan desain web yang lebih menarik lagi. Semangat berkarya kak. Saya tunggu artikel selanjutnya. Perkenalkan nama saya Tessa Hervika mari kunjungi website kampus saya https://www.atmaluhur.ac.id/
Mantap kak... Terimakasih artikelnya sangat bermanfaat sekali, saya sangat terbantu dalam mempelajari bagaimana membuat layout website gabungan HTML dan CSS. tetap selalu berkarya kak dan sukses selalu, ditunggu artikel-artikel terbaru nya. Perkenalkan nama Saya Arnold Julyanto Sibarani, kunjungi website kampus saya https://www.atmaluhur.ac.id/
Terimakasih kak untuk artikelnya. Artikel kakak singkat namun mudah untuk dimengerti. Artikel ini sangat membantu saya yang sedang belajar bagaimana membuat layout web gabungan CSS dan html. Semangat berkarya ya kak. Semangat membuat artikel yang bagus lainnya. Ditunggu artikel berikutnya. Perkenalkan nama saya Sri Rezeki. Kunjungi website kampus saya https://www.atmaluhur.ac.id/
saya sangat berterimakasih kepada admin karena telah membuat artikel ini saya jadi mudah untuk belajar terimakasih ya min sudh membuat artikel ini saya harap admin terus membuat artikel"lainnya perkenalkan nama saya indah lestari
website kampus saya https://www.atmaluhur.ac.id
Posting Komentar