Kuliah Saya: Desain Web

Showing posts with label Desain Web. Show all posts

Cara Mengatur Posisi judul dan Table pada HTML

April 05, 2017 3 Comments

Kuliah Saya - Pada Postingan Kali ini saya akan berbagi tentang dasar-dasar HTML yaitu cara mengatur posisi judul dan table pada HTML. langsung saja silahkan copy paste script dibawah ini dan coba jalankan scriptnya.

Mengatur Judul dan Table Rata Tengah

Untuk mengatur posisi judul agar berada diposisi tengah

Pada tambahkan align=center pada tag h3 agar posisi judul menjadi di tengah.

Dan pada tag table juga tambahkan align=center, agar posisi table juga berada ditengah.

Contoh script :

<html>

<head>

<title>Latihan 20</title>

</head>

<body>

<h3 align=center>Daftar Nama Siswa</h3>

<td align=center>NAMA LENGKAP</td>

</tr>

<tr>

<td>Nur Qomari</td>

</tr>

</table>

</body></html>

Maka tampilkan akan menjadi seperti ini

Mengatur Judul dan Table Rata Kanan

Untuk mengatur posisi judul agar berada diposisi kanan

Pada tambahkan align=right pada tag h3 agar posisi judul menjadi di kanan.

Dan pada tag table juga tambahkan align=right, agar posisi table juga berada di kanan.

Contoh script :

<html>

<head>

<title>Latihan 20</title>

</head>

<body>

<h3 align=right>Daftar Nama Siswa</h3>

<td align=center>NAMA LENGKAP</td>

</tr>

<tr>

<td>Nur Qomari</td>

</tr>

</table>

</body></html>

Maka tampilkan akan menjadi seperti ini

Mengatur Judul dan Table Rata Kiri

Untuk mengatur posisi judul agar berada diposisi kiri

Pada tambahkan align=left pada tag h3 agar posisi judul menjadi di left.

Dan pada tag table juga tambahkan align=left, agar posisi table juga berada di kiri.

Contoh script :

<html>

<head>

<title>Latihan 20</title>

</head>

<body>

<h3 align=left>Daftar Nama Siswa</h3>

<td align=center>NAMA LENGKAP</td>

</tr>

<tr>

<td>Nur Qomari</td>

</tr>

</table>

</body></html>

Maka tampilkan akan menjadi seperti ini

Cara memberi warna pada kolom HTML

April 05, 2017 Add Comment

Kuliah Saya - Untuk memberi warna pada kolom tambahkan format bgcolor pada tag tr yang akan diberi warna. yaitu tagnya seperti dibawah ini

<tr bgcolor=#warna>

Contoh Script table :

<html>

<head>

<title>Latihan 19</title>

</head>

<body>

<h3>Daftar Nama Siswa</h3>

<tr bgcolor=Red>

<td align=center>NAMA LENGKAP</td>

</tr>

<tr>

<td>Nur Qomari</td>

</tr>

</table>

</body></html>

Maka akan tampak tampilan seperti berikut

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