LEMBAR KERJA PRAKTIKUM Nim : 13-1401-164 Hari / Tgl TTD Asisten Nama Kelas : Muh. Idrus : DK-13 Mata kuliah : Pemrograman Web I Materi : CSS External - Tampilan halaman CSS External/index.html : <DOCTYPE html> <html> <head> <title> CSS External</title> <link rel="stylesheet" type="text/css" href="../css/style.css"> </head> <body> <div class="header-cover"> <div class="header"> <div class="logouit"><img src="../images/uit.png"/> <div class="judul"><h1>css External</h1> <div class="logobem"><img
src="../images/bem.png"/> <div class="spasi"> <div class="content-wrapper"> <div class="menu-bar"> <div class="menu"> <form> <select name="menu" onchange="window.location.href=this.value"> value="#">m E N U</option> value="../index/index.html">css External</option> value="../content/register.html">pendaftaran Mahasiswa</option> value="../content/artikel.html">artikel</option> value="../content/biodata.html">biodata</option> </select> </form> <div class="content"> <h2>selamat belajar CSS External...</h2> <div class="spasi"> </body> </html>
- Tampilan halaman Pendaftaran Mahasiswa/register.html : <DOCTYPE html> <html> <head> <title> Register </title> <link rel="stylesheet" type="text/css" href="../css/style.css"> </head> <body> <div class="header-cover"> <div class="header"> <div class="logouit"><img src="../images/uit.png"/> <div class="judul"><h1> Pendaftaran Mahasiswa </h1> <div class="logobem"><img src="../images/bem.png"/> <div class="spasi"> <div class="content-wrapper"> <div class="menu-bar"> <div class="menu"> <form> <select name="menu" onchange="window.location.href=this.value"> value="#">m E N U</option>
value="../index/index.html">css External</option> value="../content/register.html">pendaftaran Mahasiswa</option> value="../content/artikel.html">artikel</option> value="../content/biodata.html">biodata</option> </select> </form> <div class="content"> <h2>pendaftaran Mahasiswa</h2> <form id="regist"> <label>nama Lengkap</label><input type="text" size="20"/><br> <label>tempat, Tanggal Lahir</label> <input type="text" size="20"/> <input type="text" size="2"/> <input type="text" size="2"/> <input type="text" size="5"/><br> <label>alamat</label><input type="text" size="25"/><br> <label>no. Telpon</label><input type="text" size="12"/><br> <label>jenis Kelamin</label> <input type="radio" name="jkelamin"/>laki-laki <input type="radio" name="jkelamin"/>perempuan<br> <label>alamat Orang Tua</label><textarea cols="40" rows="3"></textarea><br><br> <input class="tengah" type="submit" value="daftar"/> <input class="tengah" type="reset" value="batal"/> </form> <div class="spasi"> </body> </html>
- Tampilan halaman Artikel/artikel.html : <DOCTYPE html> <html> <head> <title> Artikel </title> <link rel="stylesheet" type="text/css" href="../css/style.css"> </head> <body> <div class="header-cover"> <div class="header"> <div class="logouit"><img src="../images/uit.png"/> <div class="judul"><h1> Artikel </h1> <div class="logobem"><img src="../images/bem.png"/> <div class="spasi"> <div class="content-wrapper"> <div class="menu-bar"> <div class="menu"> <form> <select name="menu" onchange="window.location.href=this.value"> value="#">m E N U</option> value="../index/index.html">css External</option>
value="../content/register.html">pendaftaran Mahasiswa</option> value="../content/artikel.html">artikel</option> value="../content/biodata.html">biodata</option> </select> </form> <div class="content"> <h2>hyperlink</h2> <p>hyperlink merupakan suatu cara untuk menghubungkan satu bagian dalam halaman web dengan halaman web lainnya. Link biasanya ditandai dengan teks dengan warna biru dan garis bawah. Selain itu, pointer mouse akan berubah menjadi gambar telunjuk tangan jika diarahkan ke link tersebut. Link ini dapat berbentuk teks atau gambar</p> <div class="spasi"> </body> </html>
- Tampilan halaman Biodata/biodata.html : <DOCTYPE html> <html> <head> <title> Biodata </title> <link rel="stylesheet" type="text/css" href="../css/style.css"> </head> <body> <div class="header-cover"> <div class="header"> <div class="logouit"><img src="../images/uit.png"/> <div class="judul"><h1> Biodata </h1> <div class="logobem"><img src="../images/bem.png"/> <div class="spasi"> <div class="content-wrapper"> <div class="menu-bar"> <div class="menu"> <form> <select name="menu" onchange="window.location.href=this.value"> value="#">m E N U</option> value="../index/index.html">css External</option>
value="../content/register.html">pendaftaran Mahasiswa</option> value="../content/artikel.html">artikel</option> value="../content/biodata.html">biodata</option> </select> </form> <div class="content"> Nama :Muh. Idrus<br> Alamat : K. Agraria Blok A No. 2<br> Pekerjaan : Pelajar<br> <div class="spasi"> </body> </html>
CSS file : body{ margin: 0px; padding: 0px; background: #E9EAED;.header-cover{ width: 100%; height: 150px; background: #3F5990; box-shadow: 0px 2px 5px 1px #000000;.header{ height: 150px; width: 1280px; margin: auto;.logouit,.logobem{ float: left; height: 150px; width: 150px;.logouit img,.logobem img{ width: 149px; height: 149px.judul{ float: left; height: 150px; width: 960px; margin: 0px 10px; padding-top: 25px;.spasi{ height: 15px; width: auto;.menu-bar{ width: 1230px; height: 30px; border-bottom: 1px solid #000000;
border-radius: 10px; padding-right: 10px;.menu{ width: 175px; height: 30px; float: right;.content-wrapper{ padding: 10px 20px; width: 1240px; min-height: 550px; background: #FFFFFF; margin: auto; border-radius: 10px; box-shadow: 0px 0px 5px 1px #000000;.content{ width: 1240px; min-height: 450px; margin: 10px 0px;.tengah{ margin: auto; h1{ text-align: center; color: #FFFFFF; p,h2{ text-align: center; #regist{ margin: 0 auto; width: 550px; padding: 10px; box-shadow: 0px 0px 5px 1px #000000; form label{ float: left; width: 170px; margin-bottom: 10px; form br{ clear: left;
- Direktory :