Kuliah Saya: CSS

Showing posts with label CSS. Show all posts

Cara Membuat CSS internal Pada HTML

March 30, 2017 3 Comments

Kuliah Saya - Pada postingan kali ini saya akan membagikan contoh script cara membuat css internal. Jadi maksud css internal yaitu script cssnya menjadi satu dengan htmlnya. dibawah akan saya contohkan css internal yang saya buat sendiri seperti berikut ini.

<html>
<head>
<body style="background-color:gray">
 <style type="text/css">
 h1{background-color:Black;text-transform:uppercase;color:white;font-weight:bold;text-align:center;}
 p {background-color:cyan;text-align:left;color:black;}

</style>
</head>

<body>

<h1>JUDUL</h1>

<p>isi dari paragraf baris pertama bla.....bla.......bla<br>

<br>isi dari paragraf baris kedua bla...bla...bla...<br>

</p>

</html>

Setelah selesai membuat scriptnya langsung saja save menggunakan format html kemudian jika sudah benar dan tidak ada kesalahan penulisan maka tampilannya akan seperti screenshoot dibawah ini

Modifakasi script sesuai kebutuhan anda. Ganti warna font, dan background sesuai yang diinginkan.
Demikian, semoga bermanfaat.

Cara Membuat Menu Navigasi pada HTML sebuah web atau blog menggunakan CSS

March 30, 2017 Add Comment

Kuliah Saya - Baik buat kalian yang baru aja belajar desain web. Saya akan memberikan script membuat menu navigasi yang biasanya berada di bawah header.yang berisi daftar kategori artikel yang terdapat pada sebuah website atau blog. Menu navigasi memudahkan pengunjung menemukan sebuah halaman pada sebuah web. Dengan hanya mengklik salah satu link pada menu navigasi. Maka otomatis tampilan langsung akan menuju kepada halaman yang diinginkan. Tapi disini karena ini saya hanya mau berbagi materi kuliah saya, dan masih tahap belajar juga. Jadi membuatnya ini htmlnya pisah dengan script cssnya. Oke langsung saja berikut ini adalah script HTMLnya dengan format html:

<html>

<head>

</head>

<body>

<nav>

<ul>

<li><a href="#ganti dengan link halaman">PENGETAHUAN</a></li>

<li><a href="#ganti dengan link halaman">BERITA</a>

<ul>

<li><a href="#ganti dengan link halaman">POLITIK</a></li>

<li><a href="#ganti dengan link halaman">SOSIAL</a></li>

<li><a href="#ganti dengan link halaman">EKONOMI</a></li>

<li><a href="#ganti dengan link halaman">HIBURAN</a></li>

</ul>

</li>

<li><a href="#ganti dengan link halaman">MOTIVASI</a></li>

</ul>

</nav>

</body>

</html>

Tampilanya akan seperti ini sebelum disisipkan file css :

SCRIPT CSS dengan format css isikan pada link rel href pada html. sesuaikan namanya :

nav ul{

list-style:none; // menghilangkan tanda pada pinggir list-style

width:900px;

height:50px;

}

nav ul a{

text-decoration:none; //menghilangkan efek text atau link, di sini kita gunakan untuk menghilangkan garis bawah link

}

nav ul li ul{

display:none; //menyembunyikan menu saat pointer tidak sedang di atasnya

padding-left:0px; //mengatur padding-left

witdh:150px;

}

nav ul li:hover ul{

display:block; //menampilkan menu saat pointer di atasnya

}

nav ul li:hover{

background:grey;

}

nav ul li{

float:left;

width:150px;

height:35px;

background:black;

text-align:center;

padding-top:15px;

}

nav a{

color:#fff;

font-family:sans-serif;

font-size:12px;

}

setelah disisipkan css maka tampilan akan menjadi seperti dibawah ini, untuk warna anda bisa merubah sesuai dengan keinginan, pada code script color

Catatan : file HTML dan file css harus dalam satu folder yang sama

Cara Membuat Background Body Berwarna pada HTML

March 30, 2017 1 Comment

Kuliah Saya - Pada Artikel ini saya akan memposting cara memberi background warna pada body HTML. Bagi yang masih baru saja memulai belajar desain web dan belum mengetahui caranya, langsung saja pada editor HTML tulisan kode berikut ini :

<body text = #nnnnnn bgcolor=#nnnnnn> . . . </body>

body text adalah kode warna tulisannya, sedangkan bgcolor adalah warna background yang akan dibuat

silahkan diganti dengan kode atau nama warna yang diinginkan.

contoh

<html>

<head>

<title> Penggunaan Latar Belakang

Warna </title>

</head>

<body text="red" bgcolor="cyan">

Kami sedang mulai belajar

Pemrograman Web

</body>

</html>

tampilannya akan seperti berikut ini

Cara Membuat Layout Halaman Web Menggunakan CSS

March 29, 2017 4 Comments

Kuliah Saya - Membuat layout halaman web atau biasanya yang membagi sebuah halaman menjadi beberapa bagian yaitu Header, Body, Sidebar, dan footer. saya akan memberikan script membuat layout menggunakan css dengan file html dan cssnya terpisah namun harus tetap dijadikan satu folder. Baik untuk mencoba langsung saja script htmlnya dulu dibawah ini :

<html>
<head>
<title>Membuat Layout dengan CSS</title>
<link href="namafile.css"rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
 <div id="header">
  <h1>#header</h1>
  <p>AQUARIUS WEB</p>
 </div>
 <div id="body">
  <h1>#Body</h1>
  <p>Postingan Artikel-Artikel</p>
 </div>
 <div id="sidebar">
  <h1>#sidebar</h1>
  <p>Bagian sidebar, berisi menu,daftar  konten,dsb</p>
 </div>
 <div id="footer">
  <h1>#footer</h1>
  <p>footer berisi Hak cipta, Menu, dsb.</p>
 </div>
</div>
</body>
</html>

 setelah selese membuat script seperti diatas langsung saja simpan 
dengan menggunakan format html. Kemudian selanjutnya membuat script 
cssnya yaitu seperti dibawah ini :



#wrapper {
width: 1000px;
margin: 0 auto;
}
#header {
float: left;
width: 100%;
height: 150px;
background-color: green;
}
#body {
float: left;
width: 70%;
height: 400px;
background-color: grey;
}
#sidebar {
float: left;
width: 30%;
height: 400px;
background-color: cyan;
}
#footer {
float: left;
width: 100%;
height: 150px;
background-color: red;
}



format warna bisa kalian ubah-ubah sendiri sesuaikan dengan keinginan 
kalian. Jangan lupa simpan file dengan format css dan kemudian sisipkan 
nama file css pada script html yang ada di atas tadi. Ingat File html 
dan css harus satu folder. Jika langkah kalian sudah benar dan penulisan
script tidak ada yang salah maka buka file html tersebut maka tampilan 
pada browser akan seperti dibawah ini








Demikian postingan dari saya. Semoga bermanfaat.