Modul Pemrograman Web 01
Modul Pemrograman Web 01
PRAKATA v
KATA PENGANTAR vii
DAFTAR ISI ix
DAFTAR GAMBAR xi
BAB 1 KONSEP DASAR WEB 1
1.1 Pengertian Website 1
1.2 Pengertian Pemrograman Web 2
1.3 Bahasa Skrip Pemrograman Web 2
1.4 Istilah-Istilah dalam Pemrograman Web 2
1.5 Struktur Navigasi 4
1.6 Text Editor 7
BAB 2 PENGENALAN HTML 9
2.1 Pengertian Hypertext Markup Language (HTML) 9
2.2 Struktur Dasar HTML 10
2.3 TAG 13
2.4 Pembuatan Tabel Menggunakan HTML 16
BAB 3 PHP 23
3.1 Pengertian PHP 23
3.2 Perbedaan HTML dengan PHP 25
3.3 Dasar-dasar PHP 26
x Web Programming
BAB 4 OPERATOR 31
4.1 Mengenal Operator 31
4.2 Jenis-Jenis Operator 32
BAB 5 PENGENALAN FORM DAN PENGGUNAAN HTTP
SERVER 37
5.1 Komponen Form 37
5.2 Pengolahan Data Dari Form 38
BAB 6 PERCABANGAN 47
6.1 Pernyataan Seleksi 47
BAB 7 PERULANGAN 55
7.1. Pengertian Dasar Perulangan 55
7.2. Pengertian Dasar Perulangan Pada PHP 56
BAB 8 JAVASCRIPT 65
8.1. Pengertian Javascript 65
8.2. Latihan pembuatan koding javascript sederhana 66
BAB 9 CSS 71
9.1. Pengertian CSS 71
9.2. Beberapa hal yang dapat dilakukan dengan CSS. 72
9.3. Cara Pemasangan CSS Pada Dokumen HTML 72
9.4. Penulisan CSS 74
9.5. Properti-properti CSS 75
9.6 PADDING, MARGIN DAN BORDER 77
BAB 10 MEMBUAT DESIGN WEB RESPONSIVE
MENGGUNAKAN CSS 83
10.1 Merancang Design Web Responsive mengunakan CSS 83
10.2 Merancang Halaman Index Web Responsive 88
DAFTAR PUSTAKA 93
-oo0oo-
DAFTAR GAMBAR
-oo0oo-
BAB I
KONSEP DASAR WEB
Deskripsi
Membahas mengenai konsep dasar pemrograman web, istilah-istilah dalam
pemrograman web, menggunakan text editor, mengenal dan
mengimplementasikan struktur navigasi
Tujuan Pembelajaran :
1. Mampu memahami konsep dasar Pemrograman Web
2. Mampu memahami istilah-istilah yang ada dalam pemrograman web
3. Mampu menggunakan text editor
4. Mampu mengimplementasikan Struktur Navigasi
Deskripsi :
Mampu mengenal skrip html, menggunakan ragam tag dan pendeklarasian
tabel beserta atributnya, mampu menuliskan skrip dalam html
Tujuan Pembelajaran :
1. Memahami skrip html
2. Mampu menggunakan skrip html
3. Mampu menggunakan tag dalam penulisan skrip html
4. Mampu menggunakan tabel, penggunaan cell padding, dan cell span
</body>
</html>
Keterangan :
1. Tag HTML secara default dimulai dari <HTML> dan diakhiri dengan
</HTML>.
2. Tag <HEAD> … </HEAD> merupakan tag kepala sebelum badan. Tag
kepala ini akan terlebih dulu dieksekusi sebelum tag badan. Di dalam
tag ini berisi tag <META> dan <TITLE>. Tag <META> merupakan
informasi atau header suatu dokumen HTML. Atribut yang dimiliki oleh
tag ini antara lain:
a. HTTP_EQUIV, atribut ini berfungsi untuk menampilkan dokumen
HTML secara otomatis dalam jangka waktu tertentu.
b. CONTENT, atribut ini berisi informasi tentang isi document HTML
yang akan dipanggil.
c. NAME, atribut ini merupakan identifikasi dari meta itu sendiri. Tag
<META> dalam suatu document HTML boleh ada maupun tidak.
3. Tag <TITLE> … </TITLE> adalah tag judul. Sebaiknya setiap halaman
web memiliki judul, dan judul tersebut dituliskan di dalam <TITLE> …
</TITLE>. Judul ini akan muncul dalam titlebar dari browser.
4. Tag <BODY> … </BODY> adalah tag berisi content dari suatu
halaman web.
Contoh penggunaan script HTML
Buat lembar baru pada Notepad, kemudian ketikkan perintah di bawah ini.
Simpan dengan nama Contoh01.html
<html>
<head>
<title>Contoh 01 </title>
</head>
<body>
Halo... <br>
ini script HTML pertamaku
</body>
</html>
Kemudian simpan file di atas di dalam folder c:\XAMPP\htdocs\buat folder
baru untuk menyimpan file di dalam folder htdocs. Simpan file dengan
nama contoh01.html. Pembuatan nama file pada saat penyimpanan harus
diakhiri dengan extention “.html”
2.3 TAG
Kode-kode dalam HTML biasanya disebut TAG. Tag dalam HTML
dituliskan diapit oleh tanda lebih kecil ( < ), tanda lebih besar ( > ), dan
garis miring ( / ). Tag dituliskan berpasangan, jika tidak menggunakan tanda
garis miring( / ) setelah penulisan namanya, disebut sebagai tag pembuka.
Namun, jika menggunakan tanda garis miring ( / ) sebelum nama tag, maka
disebut sebagai tag penutup. Tag bersifat incasesensitiv yang dimana
penulisan dengan huruf besar, huruf kecil dan campuran tidak masalah.
Namun, untuk standarisasinya tag di tuliskan dalam huruf kecil.
Jenis – jenis tag dalam HTML :
Beberapa jenis tag yang dapat di pergunakan dalam penulisan skrip
html, antara lain sebagai berikut :
Tag Kegunaan
Untuk mendefinisikan sebuah dokumen
<html>
HTML
Mendefinisikan body atau isi sebuah
<body>
dokumen
Mendefinisikan heading 1 sampai 6, ukuran
<h1>…</h1> s/d
fontsize judul yang besar sampai yang
<h6>…</h6>
terkecil
<p>….</p> Mendefinisikan sebuah paragraph
<br> Mendefinisikan break line / baris baru
Mendefinisikan horizontal rule pemisah
<hr>
antar bagian atau paragraph
<ol>…..</ol> Mendefinisikan pembuatan order
list/penomoran dengan angka/huruf
Mendefinisikan pembuatan unorder
<ul>…..</ul>
list/penomoran dengan bullets
<li>……</li> Mendefinisikan isi data dalam list
<i>……</i> Mendefinisikan format italic/huruf miring
<b>……</b> Mendefinisikan format bold/huruf tebal
Mendefinisikan format underline/huruf
<u>……</u>
bergaris bawah
<sub>…..</sub> Mendefinisikan teks subscript
<sup>…..</sup> Mendefinisikan teks superscript
<img>…….</img> Mendefinisikan tampilkan gambar
<marquee>….</marquee> Mendefinisikan tulisan bergerak
<table> ……………</table. Mendefinisikan pembuatan tabel
<html>
<head>
<title>Contoh 02</title>
</head>
<body bgcolor="#00CCFF" text="#FF0000">
<p> Ini adalah contoh penggunaan formating TAG dalam HTML <br>
masing-masing TAG memiliki atribut masing-masing<br> </p>
<font color="#000000">Ini juga termasuk contoh penggunaan formating
TAG<br></font>
<h1><marquee width="50%" bgcolor="#000099">Ini juga salah satu
penggunaan Tag</marquee> </h1>
</body>
</html>
<html>
<body>
<body bgcolor="magenta">
<p>
Perhatikan bahwa halaman ini seharusnya berwarna magenta. </p>
<h1> Ini adalah heading 1 </h1>
<h2> Ini adalah heading 2 </h2>
<h3> Ini adalah heading 3 </h3>
<h4> Ini adalah heading 4 </h4>
<h5> Ini adalah heading 5 </h5>
<h6> Ini adalah heading 6 </h6>
<p> Gunakan tag heading hanya untuk membuat heading saja. Jangan menggunakan
tag tersebut hanya untuk membuat tampilan huruf tebal. Gunakan tag lain untuk
keperluan itu. </p>
<h1 align="center">Ini adalah heading 1</h1>
<p>Heading di atas telah diposisikan untuk berada di tengah halaman ini. </p>
</body>
</html>
Menggabungkan sel
Sel-sel tabel secara normal memiliki lebar dan tinggi yang sama.
Jika kita ingin membuat sebuah sel memiliki lebar atau tinggi yang berbeda
dari sel-sel lainnya, maka satu-satunya cara yang bisa kita lakukan adalah
dengan menggabungkan beberapa sel menjadi satu. Cara ini disebut merge
atau penggabungan sel.
Untuk menggabungkan sel-sel tabel ini diperlukan atribut rowspan
atau colspan. Atribut rowspan digunakan untuk menggabungkan sel-sel
tabel pada kolom yang sama. Atribut colspan untuk menggabungkan sel-sel
tabel pada baris yang sama.
Berikut contoh penggabungan kedua jenis :
1. Secara Vertikal (Rowspan)
Tabel dengan kode HTML dibawah ini sel-sel kolom pertama akan
digabung:
<table>
<tr>
<td>……….</td>
<td>……….</td>
</tr>
<tr>
<td>……….</td>
<td>……….</td>
</tr>
</table>
Gambar 2.7 tabel sebelum di gabung kolom
<table>
<tr>
<td rowspan=”3”>……….</td>
<td>……….</td>
</tr>
<tr>
<td>……….</td>
<td>……….</td>
</tr>
</table>
<table>
<tr>
<td colspan=2>……….</td>
<td>……….</td>
</tr>
<tr>
<td>……….</td>
<td>……….</td>
</tr>
<tr>
<td>……….</td>
<td>……….</td>
</tr>
</table>
Hasil di browser :
<?php
echo "Ini Adalah Script PHP Pertama Saya <br>";
echo "Saya sedang belajar PHP";
?>
Contoh05.php:
<html>
<head>
<title> contoh 05 </title>
</head>
<body>
<?php
$jumlah = 5;
$harga = 20000;
$total=$harga*$jumlah;
echo "Jumlah Beli : $jumlah <br>";
echo "Harga Barang : $harga <br>";
echo "Total Bayar : $total <br>";
?>
</body>
</html>
Deskripsi:
Membahas penggunaan jenis-jenis operator yang ada dalam bahasa
pemrograman web dan dapat mengimplentasikan masing-masing operator
tersebut
Tujuan Pembelajaran:
Setelah memahami pokok bahasan pada bab ini diharapkan mahasiswa
mampu:
1. Mengenal jenis-jenis operator
2. Mengimplementasikan masing-masing operator tersebut dalam bahasa
pemrograman web
Hasil :
Hasil dari skrip diatas seperti gambar berikut:
Opertorperbandingan.php
<?php
$bil1=200;
$bil2=40;
$teks1="PHP";
$teks2="php";
$hasil=$bil1==$bil2;
echo "$bil1==$bil2 = $hasil <br>";
$hasil=$bil1!=$bil2;
echo "$bil1!=$bil2 = $hasil <br>";
$hasil=$bil1>=$bil2;
echo "$bil1>=$bil2 = $hasil <br>";
$hasil=$teks1==$teks2;
echo "$teks1==$teks2 = $hasil <br>";
$hasil=$teks1!= $teks2;
echo "$teks1!=$teks2 = $hasil <br>";
Hasil
?> dari skrip diatas seperti gambar berikut:
Hasil tampilan di browser :
Operatorlogika.php
<?php
$bil1=100;
$bil2=20;
$teks1="PHP";
$teks2="php";
$hasil=!($teks1== $teks2);
echo "!($teks1= = $teks2) adalah $hasil <br>";
?>
Hasil dari skrip diatas seperti gambar berikut:
echo"$teks1 . $teks2<br>";
echo"Panjang Sisi Kubus =
$sisi<br>";
echo"Volume Kubus = $volume
cm3<br>"; Gambar 4.5 hasil dari jawaban latihan
?>
BAB V
PENGENALAN FORM DAN PENGGUNAAN HTTP
SERVER
Deskripsi:
Membahas komponen form, pengolahan data dari form yang ada dalam
bahasa pemrograman web, mempraktikkan penggunaan HTTP SERVER
dengan metode GET dan POST.
Tujuan Pembelajaran:
Setelah memahami pokok bahasan pada bab ini diharapkan mahasiswa
mampu:
1. Membuat tampilan form dalam bahasa pemrograman web
2. Menggunakan methode get dan post dalam mengirim data.
<html>
<head>
<title> Form Metode Get</title>
</head>
<body>
<form action="metodegetproses.php" method="get">
Masukkan nama : <input type = "text" name="nama" size="25">
<input type="submit" value="Proses">
</form>
</body>
</html>
Hasil dari skrip diatas adalah sebagai berikut:
Latihan
1. Buat skrip program untuk membuat form input disimpan dengan nama
forminputmahasiswa.php sebagai berikut ini:
Gambar 5.7 Tampilan forminputmahasiswa.php
<html>
<head>
<title> Data Mahasiswa </title>
</head>
<body>
<?php
$nama =$_POST['nama'];
$alamat =$_POST['alamat'];
$jeniskel =$_POST['jeniskel'];
$pekerjaan =$_POST['pekerjaan'];
$hobi1=$_POST['hobi1'];
$hobi2=$_POST['hobi2'];
$hobi3=$_POST['hobi3'];
?>
</body>
</html>
BAB VI
PERCABANGAN
Deskripsi:
Membahas konsep percabangan dalam bahasa pemrograman web
Tujuan Pembelajaran:
Setelah memahami pokok bahasan pada bab ini diharapkan mahasiswa
mampu:
1. Menggunakan perintah percabangan if tunggal
2. Menggunakan perintah percabangan if dan else
3. Menggunakan perintah percabangan if majemuk
4. Menggunakan perintah switch
a. Statement IF
1. If Tunggal
Statement IF merupakan statement yang penting dan pasti terdapat
di semua bahasa pemrograman. Statement ini berguna untuk membuat
percabangan berdasarkan kondisi tertentu yang harus dipenuhi.
Bentuk umun: if ( kondisi )
{
statement;
}
Prinsip kerjanya adalah perintah di atas akan dikerjakan apabila
kondisi bernilai TRUE atau benar, sedangkan jika kondisi salah/FALSE
maka statement di atas tidak akan dikerjakan.
<html>
<head>
<title> Contoh IF ELSE</title>
</head>
<?php
$nilai = 40;
if ($nilai >= 60)
{ echo "Nilai Anda = $nilai. Selamat, Anda Lulus" ; }
else
{ echo "Nilai Anda = $nilai. Sorry, Anda Tidak Lulus" ; }
?>
</body>
</html>
Hasil dari skrip diatas adalah sebagai berikut:
<?php
$nilai = 90;
if (($nilai >= 0)&&($nilai < 50))
{ $grade ="E";}
elseif(($nilai >= 50)&&($nilai < 60))
{ $grade ="D";}
elseif(($nilai >= 60)&&($nilai < 75))
{ $grade ="C";}
elseif(($nilai >= 75)&&($nilai < 85))
{ $grade ="B";}
elseif(($nilai >= 85)&&($nilai < 100))
{ $grade ="A";}
else
{$grade = "Nilai anda di luar jangkauan"; }
echo "Nilai Anda : $nilai, dikonversi menjadi
$grade";
?>
</body>
Hasil dari skrip
</html>pernyataan if majemuk adalah sebagai berikut:
<?php
$angka = 6;
switch($angka) {
case 0 : $terbilang = "NOL"; break;
case 1 : $terbilang = "SATU"; break;
case 2 : $terbilang = "DUA"; break;
case 3 : $terbilang = "TIGA"; break;
case 4 : $terbilang = "EMPAT"; break;
case 5 : $terbilang = "LIMA"; break;
case 6 : $terbilang = "ENAM"; break;
case 7 : $terbilang = "TUJUH"; break;
case 8 : $terbilang = "DELAPAN"; break;
case 9 : $terbilang = "SEMBILAN"; break;
default : $terbilang = "Nilai di luar jangkauan"; break;
}
echo "Bentuk Terbilang dari angka $angka adalah
$terbilang";
?>
</body>
</html>
Deskripsi:
Membahas pengertian dasar struktur perulangan atau dikenal juga dengan
istilah loop, mempraktikan cara penggunaan perulangan for, while, do while
dan Foreach.
Tujuan Pembelajaran:
Setelah memahami pokok bahasan pada bab ini diharapkan mahasiswa
mampu:
3. Memahami pengertian dasar perulangan
4. Mengenal jenis jenis perulangan dalam pemprograman
5. Mengimplementasikan jenis jenis perulangan tersebut dalam bahasa
pemrograman web.
Hasil Dari kode perulangan for pada php diatas akan mencetak angka 1 – 9,
seperti gambar dibawah ini:
Gambar 7.1 hasil Perulangan Mengunakan For
<html>
<head>
<title> Contoh Do While</title>
</head>
<body>
<?php
$i = 1;
do{
echo $i . '<br />';
$i++;
}
while($i <= 9);
?>
</body>
</html>
<body>
<?php
$i = 1;
do{
$i++;
echo $i . '<br />';
}
while($i <= 9);
?>
</body>
</html>
Terlihat terjadi perubahan proses, yaitu nilai akan ditambahkan lebih dulu
maka akan menghasilkan angka 2 – 10, berbeda dengan sebelumnya.
Sehingga dapat disimpulkan bahwa hasil dari proses adalah bergantung
pada posisi operator post-increment.
d. Perulangan Foreach pada PHP
Jenis perulangan Foreach pada PHP ini adalah yang paling berbeda dari
perulangan sebelumnya, yaitu perulangan Foreach pada PHP ini berguna
untuk memecah isi array, atau lebih sederhananya ialah untuk
menyederhanakan nilai array agar dapat dibaca dengan mudah.
berikut ini adalah bentuk umum penulisanya nya:
<body>
<?php
$array = array('PHP', 'Python', 'Ruby');
foreach($array as $value)
{
echo $value . '<br />';
}
?>
</body>
</html>
Pada code bentuk umum penulisan pernyataan didalam fungsi Foreach ialah
dengan menggunakan key untuk mengambil kunci array tersebut, namun
dapat juga langsung mengambil nilainya saja, dan code diatas akan
menghasilkan output seperti gambar dibawah ini:
Gambar 7.5 hasil Perulangan Mengunakan Foreach Array Tanpa Key
Contoh 2. Perulangan Foreach Array Dengan Key
Buat file baru didalam folder htdoct/perulangan/foreach2.php
Ketikan koding berikut:
<html>
<head>
<title> Contoh Foreach Dengan Key</title>
</head>
<body>
<?php
$array = array('Java', 'PHP', 'C++');
foreach($array as $key => $value)
{
echo $key . ' yaitu Bagian dari '. $value . '<br />';
}
?>
</body>
</html>
<html>
<head>
<title> Latihan For</title>
</head>
<body>
<?php
for($kata=1;$kata<=20;$kata++)
{
echo "Saya Sedang Belajar Dasar Pemrograman Web"."<br/>";
}
?>
</body>
</html>
BAB VIII
JAVASCRIPT
Deskripsi:
Membahas pengertian dasar dan penulisan script sederhana
menggunakan Javascript, membahas tentang bagaimana step by step
pembuatan dan penyimpanan file Javascript.
Tujuan Pembelajaran:
Setelah memahami pokok bahasan pada bab ini diharapkan mahasiswa
mampu:
1. Memahami pengertian dasar javascript
2. Membuat tampilan website dengan penggunaan koding javascript
sederhana
<html> </script>
<head> </body>
<title> Untitled Document</title> </html>
</head>
<html>
b.<body>
Memformat teks dengan tag HTML = contohjs2.html
<script type="text/javascript">
<html>
<head>
<title> Untitled Document</title>
</head>
<body>
<script type="text/javascript">
document.write("<h1>Hello World!</h1>")
</script>
</body>
</html>
c. JavaScript yang diletakkan pada bagian HEAD = contohjs3.html
<html>
<head>
<title> Untitled Document</title>
</head>
<head>
<script type="text/javascript">
function message( )
{
alert("This alert box was called with the onload event")
}
</script>
</head>
<body onLoad="message( )">
</body>
</html>
d. JavaScript yang diletakkan pada bagian BODY = contohjs4.html
<html>
<head>
<title> Untitled Document</title>
</head>
<body>
<script type="text/javascript">
document.write("This message is written when the page
loads")
</script>
</body>
</html>
e. Fungsi = contohjs5.html
<html>
<head>
<script type="text/javascript">
function myfunction( )
{
alert("HELLO")
}
</script>
</head>
<body>
<form>
<input type="button" onclick="myfunction( )" value="Call function">
</form>
<p>By pressing the button, a function will be called. The function
will alert a message.</p>
</body>
</html>
f. Fungsi dengan argumen = contohjs6.html
<html>
<body>
<script type="text/javascript">
var d=new Date( )
var weekday= new
Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Frid
ay",
"Saturday")
var monthname= new
Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct",
"Nov",
"Dec")
document.write(weekday[d.getDay( )] + " ")
document.write(d.getDate( ) + ". ")
document.write(monthname[d.getMonth( )] + " ")
document.write(d.getFullYear( ))
</script>
</body>
</html>
LATIHAN
1. Buatlah Program Sederhana menggunakan perintah JavaScript
2. Proram yang akan dibuat berupa tampilan pesan seperti dibawah ini
menggunakan perintah javascript
7. Simpan file html tersebut dengan nama index.html harus dingat kedua file
harus tersimpan dalam satu folder yang sama.
8. Jalankan file diatas dengan memanggil nama folder tempat folder diatas
disimpan.
BAB IX
CSS
Deskripsi:
CSS merupakan bahasa yang digunakan untuk mengatur tampilan suatu dokumen
yang ditulis dalam bahasa markup / markup language. apabila kita membahasnya dalam
konteks web, bisa di artikan sebagai bahasa yang digunakan untuk mengatur tampilan /
desain sebuah halaman HTML.
Tujuan Pembelajaran:
Setelah memahami pokok bahasan pada bab ini diharapkan mahasiswa
mampu:
1. Memahami pengertian dasar tentang CSS
2. Memahami Kegunaan dari CSS
3. Mengimplementasikan penerapan CSS pada sebuah web.
4. Mempelajari padding, margin dan border pada CSS .
<html>
<head>
<title>CSS Secara Internal</title>
<style type="text/css">P{text-align:justify;}
</style>
</head>
<body>
<p> Paragraph yang diatur CSS Secara Internal</p>
</body>
</html>
• Inline Style Sheet
Aturan CSS ditulis langsung pada tag HTML yang akan diatur
tampilannya menggunakan atribut style:
<html>
<head>
<title>CSS Secara Internal</title>
<style type="text/css">P{text-align:justify;}
</style>
</head>
<body>
<p style =”text-align:justify;”> Paragraph yang diatur
CSS Secara Internal</p>
</body>
</html>
#teks
{
Color : blue;
Font-family: Calibri;
}
Penggunaanya dalam script HTML :
<body>
<p id=”teks”>TEST
</p>
</body
Untuk selector class pada css ditandai dengan tanda . (titik) contoh
penulisan seperti berikut :
.warna
{ background-color: lightgreen; }
<body class=”warna”>
</body>
Pseduo-Class
Adalah sebuah kelas semu yang dimiliki oleh elemen HTML, yang
membuat kita dapat mendefinisikan style pada keadaan tertentu dari elemen
tersebut. Pseduo-class terbagi menjadi beberapa type, sebagai berikut :
1. Yang berhubungan dengan link
a) : link
Style default pada sebuah link (a yang memiliki href)
b) : hover
Style ketika kursor mouse berada diatas sebuah link / elemen
c) : active
Style ketika sebuah link di klik (keadaan aktif)
d) : visisted
Style ketika sebuah link sudah pernah di kunjungi sebelumnya
(menggunakan browser yang sama)
2. Yang berhubungan dengan posisi elemen (ada pada css 3)
a) : first-child
Memilih elemen pertama dari sebuah parent (elemen
pembungkusnya )
b) : last-child
Memilih elemen terakhir dari sebuah parent (elemen
pembungkusnya )
c) : nth-child(n)
Memilih elemen ke (n) dari sebuah parent (elemen pembungkusnya )
n bisa berarti urutan 1,2,3,….. atau pola (2n),(3n+2), atau ganjil dan
genap, even & odd
d) : first-of-type
Memilih elemen pertama dari sebuah jenis / tipe tag
e) : last-of-type
Memilih elemen terakhir dari sebuah jenis / tipe tag
<!DOCTYPE html>
<html>
<head>
<title> Latihan CSS</title>
<link rel="stylesheet" type="text/css" href="style_css.css">
</head>
<body>
<a href="#" class="hello">Hello World</a>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
<li><a href="#">Link 7</a></li>
<li><a href="#">Link 8</a></li>
<li><a href="#">Link 9</a></li>
<li><a href="#">Link 10</a></li>
</ul>
<p>Lorem Ipsum adalah contoh teks atau dummy dalam industri percetakan dan
penataan huruf atau typesetting. Lorem Ipsum telah menjadi standar contoh teks
sejak tahun 1500an, saat seorang tukang cetak yang tidak dikenal mengambil
sebuah kumpulan teks dan mengacaknya untuk menjadi sebuah buku contoh
huruf. </p>
<p> Ia tidak hanya bertahan selama 5 abad, tapi juga telah beralih ke penataan
huruf elektronik, tanpa ada perubahan apapun. Ia mulai dipopulerkan pada tahun
1960 dengan diluncurkannya lembaran-lembaran Letraset yang menggunakan
kalimat-kalimat dari Lorem Ipsum, dan seiring munculnya perangkat lunak
Desktop Publishing seperti Aldus PageMaker juga memiliki versi Lorem
Ipsum.</p>
</body>
</html>
- Hasil yang akan ditampilkan dibrowser :
h3{
margin-bottom : 20px;
border-bottom : 1px solid #aaa;
}
a{
text-decoration : none;
color : #333;
}
a:hover{
color : #666;
}
.container{
max-width : 1080px;
margin : 20px auto;
background : #fff;
overflow : hidden;
padding : 10px;
}
.header{
border : 1px solid #dedede;
padding : 10px;
margin : 10px;
background : #9E9AFB;
}
/* main */
.left{
width : 250px;
border : 1px solid #dedede;
padding : 10px;
margin : 10px;
float : left;
}
.left ul li a{
display :block;
border-bottom : 1px solid #dedede;
margin-bottom : 10px;
padding : 10px 5px;
font-color : #D3D2ED;
}
.left ul li a:hover{
color:#461AF3;
}
.middle{
width : 500px;
border : 1px solid #dedede;
padding : 10px;
margin : 10px;
float : left;
}
.middle img{
max-width : 100%;
height : auto;
}
.middle a{
font-wight:bold;
}
.right{
width : 250px;
border : 1px solid #dedede;
padding : 10px;
margin : 10px;
float : left;
}
.right ul{
list-style-type : none;
}
.right ul li{
display : block;
}
.right ul li a{
display :block;
border-bottom : 1px solid #dedede;
margin-bottom : 10px;
padding : 10px 5px;
}
.right ul li a:hover{
color:#461AF3;
}
.footer{
clear : both;
border : 1px solid #dedede;
padding : 15px;
@media screen and (max-width:959px){
#container{
width : 100%;
}
#left-column{
width : 70%;
}
#right-column{
width : 30%;
}
img{
width : 100%;
}
}
/*MEDIA QUERIES ( Responsive )
*******************************************/
@media screen and (max-width:1080px)
{
.container{
width : 100%;
}
.left{
width : 25%;
background : #D6CCFE;
}
.middle{
width : 68%;
float : right;
}
.right{
clear : both;
padding : 1% 4%;
width : auto;
float : none;
background : #D6CCFE;
}
}
.middle {
width : auto;
float : none;
}
10.2 Merancang Halaman Index Web Responsive
Tampilan index yang akan akan kita buat seperti gambar dibawah ini
<div class="footer">
<p align="center">Coppright © 2018 Belajar CSS Responsive </a></p>
</div>
</div>
</body>
</html>
scale=1.0">
merupakan External Style sheet yang digunakan untuk mengload file css .
Pada Struktur HTML berikut terdapat 3 class utama yaitu header , main
dan footer .
Yaitu :
<div class="container">
<div class="header">digunakan untuk bagian header</div>
<div class="main">
<div class="left">Digunakan kolom bagian Kiri...</div>
<div class="middle">Digunakan kolom bagian
tengah...</div>
<div class="right">Digunakan kolom bagian kanan...</div>
</div>
<div class="footer">Digunakan bagian footer...</div>
</div>
3. Setelah selesai mengetikan kodingan diatas, simpanlah file tersebut di
dalam folder perpus dengan nama index.html
4. Lalu panggil file index.html diatas di browser anda.
DAFTAR PUSTAKA
Abdulloh, R. (2018). 7 in 1 Pemrograman Web Untuk Pemula. Jakarta: Elex
Media Komputindo.
Aldeheid, A. (2015). Website no.1 Cara Mudah Bikin Website dan Promosi
ke Seo. Yogyakarta: Penerbit Mediakom.
https://www.bahasaweb.com
https://www.duniailkom.com
https://www.malasngoding.com
(Sidik, 2017)
(Lee, 2011)
(Abdulloh, 2018)(Simarmata, 2010)(Hidayatulloh & Kawistara,
2014)(Aldeheid, 2015)