Tugas 2 Membuat Tampilan Web Menggunakan CSS

Membuat tampilan Website menggunakan CSS

CSS adalah singkatan dari Cascading Style Sheet yang berarti kumpulan kode-kode yang berurutan & saling berhubungan untuk mengatur format / tampilan suatu halaman HTML.

CSS berfungsi mengatur beberapa gaya / style elemen-elemen HTML seperti mengganti jenis font, ukuran font, perataan dalam dokumen, & sebagainya. Penggunaan CSS lebih dianjurkan daripada menggantikan jenis font & sebagainya dengan menggunakan atribut HTML.

CSS lebih mudah terapkan karena untuk merubah banyak elemen HTML dengan style yang sama hanya dengan membuatkan satu style, beda dengan HTML yang diharuskan merubah setiap atributnya.

Pada tugas 1 untuk membuat tabel kita menggunakan tag <table> untuk membuat daftar nama mahasiswa STT Ibnu Sina Batam akan tetapi pada tugas 2 ini kita akan menggunakan tag <div> untuk membuat tabel karena lebih mudah digunakan.

Berikut contoh tag <div> untuk membuat table :

<div style="background-color:#0000FF">
<h1>this is table with div</h1>
</div>

Hasilnya, browser akan menampilkan seperti berikut :

Setelah itu kita akan menggabungkan tag CSS dan HTML seperti pada tag dibawah ini:

<html>

<head>

<style>

#header{

background-color:#2A2A2A;

color:white;

text-align:center;

padding:5px;

}

#nav{

line-height:30px;

background-color:#EEEEEE;

height:500px;

width:200px;

float:left;

padding:5px;

}

#section{

width:350px;

float:left;

padding:10px;

}

#footer{

background-color:#2A2A2A;

color:yellow;

clear:both;

text-align:center;

padding:5px;

}

</style>

</head>

<body>

<h1>CITY GALLERY</hi>

</div>

<li><a href ="RAP.html">Raja Ampat Papua</a></li>

<li><a href ="BALI.html">Pulau Bali</a></li>

<li><a href ="BNK.html">Bunaken</a></li>

<li><a href ="YKG.html">Yogyakarta</a></li>

<li><a href ="LBK.html">Lombok</a></li>

<li><a href ="BRM.html">Bromo</a></li>

<li><a href ="KMD.html">Komodo</a></li>

<li><a href ="TOB.html">Danau Toba</a></li>

<li><a href ="WTB.html">Wakatobi</a></li>

<li><a href ="TRJ.html">Toraja</a></li>

</div>

<p>

Choose Your City....

</p>

</div>

<div id ="footer">
copyright© 3Idiot.com
</div>
</font>
</body>
</html>

Hasilnya, browser akan menampilkan seperti berikut ini :

Akan lebih bagus jika kita menambahkan banyak file html pada website tersebut.

Demikian terimakasih !!!

Download Disini !!!

Rabu, 06 Mei 2015

Posted by Unknown

0 Comments

Tugas 1 Membuat Tabel Daftar Mahasiswa STT Ibnu Sina Batam Dengan HTML

►

Membuat Tabel Daftar Mahasiswa STT Ibnu Sina Dengan HTML

Cara membuat tabel dengan kode HTML

Berikut ini Cara membuat tabel dengan kode HTML diperlukan 3 tag dasar yaitu : TABLE, TR, TD.

TABLE : Untuk menandai sebuah table.

TR : Untuk membentuk baris.

TD : untuk membentuk kolom.

Contoh , di bawah ini adalah serangkaian kode HTML untuk membuat tabel :

<tr>

</tr>

</table>

Hasilnya, browser akan menampilkan gambar tabel seperti di bawah ini :

Berikut ini adalah cara membuat table daftar mahasiswa STT Ibnu sina Batam dengan kode HTML 1 baris 4 kolom yang meliputi No, NPM, Nama, Jurusan. Lihat penerapannya di bawah ini :

<tr>

<td width="655" align="center"><b>JURUSAN</b></td>

</tr>

</table>

Hasilnya, browser akan menampilkan gambar tabel seperti di bawah ini :

Setelah itu tambahkan isi table dengan nama mahasiswa STT Ibnu sina Batam seperti berikut:

<html>

<head>

<title>TUGAS PERTAMA</title>

</head>

<h1><center>TUGAS PERTAMA</center></h1>

<table width="655" height="445" border="2"

align="center">

<tr>

<td width="655" align="center"><b>JURUSAN</b></td>

</tr>

<tr>

<td align="center">Nazrinsyah</td>