Está en la página 1de 21

LAPORAN PRAKTIKUM

TEORI DASAR HTML DAN CSS

PemrogramanBerbasis Web

DisusunOleh :

AINUR ROHMAH NURFAROKA

(132410101023)

PROGRAM STUDI SISTEM INFORMASI

UNIVERSITAS JEMBER

2015
1. TeoriDasar HTML

HTML ( Hypertext Markup Language ) adalahbahasadasaruntuk web


scripting bersifat Client Side yang
memungkinkanuntukmenampilkaninformasidalambentukteks, grafik, serta
multimedia danjugauntukmenghubungkanantartampilan web page atau yang
lebihdikenaldengan Hyperlink. Sebagaiseorangpengembangaplikasi web
makakemampuanpenguasaankode-kode HTML sangatdiperlukan,
dengandemikiankitamampumenguasai program-program editor
lainnya.Untukdapatmenguasaikode-kode HTML
sangatdisarankanmenggunakan editor teksmisalnyaNotepad .

Aturanpenulisan HTML adalahsebagaiberikut :

1. Memilkistruktur minimal daridokumen HTML.

<HTML>

<head>

<title>Judul Web Page</title>

</head>

<body>

Isi artikelanda di sini

</body>

</HTML>

2. Bentuktulisanpada point 1 disebut TAG. Tag memilikipembuka<TAG>,


tetapitidaksemua Tag mempunyaipenutup</TAG>. Tag memberiinstruksi
interpreter kepada browser.

3. Di dalam Tag HTML terdapatatribut Tag, yang


manaatributtersebutberbeda-bedaantar tag yang satudengan tag yang lainnya.
4. Penulisan Tag bersifat Non Case Sensitive, iniberartibahwapenulisan tag
hurufbesardanatauhurufkecilakandianggapsama.
Sebagaicontoh<HTML>akansamadengan<html>atau<HtmL>.

5. Setelahtanda "<" haruslangsungdiikutiolehnama Tag danditutuptanda ">",


tidakbolehadaspasi, angka, tandabacadannama Tag
tidakdapatdibuatsendiridanharusmengikutistandar W3C,
yaitusebuahlembagaatauorganisasiinternasional yang mengaturstandarisasi
web ( http://www.w3c.org).

6. Dalamdokumen HMTL diperlukan tag <HEAD></HEAD>, dalam tag


inidiletakkanjudul web page denganmenggunakan tag <TITLE>judul
Web</TITLE>, sedangkan di dalam tag <BODY></BODY>berisikanisidari
web page kita. Untukekstensidari file HTML perluditambahkan .html atau
.htmdibelakangnamafilenya. MisalnyaUji Coba.html

2. TeoriDasar CSS

CSS merupakansingkatandari Cascading Style Sheets


yaitusuatubahasalembargaya yang
digunakanuntukmengaturtampilansuatudokumen yang
ditulisdalambahasamarkah. Penggunaan yang paling umumdari CSS
adalahuntukmemformathalaman web yang
ditulisdenganHTML,yangmenggunakan Style untukmenampilkanelemen-
elemen HTML.

Menurutpenulisannya CSS dapatdibagimenjadi 3 jenis, yaitu :

1. Internal Style Sheet


CSS didefinisikan di dalam file HTML, yaitudalamelemen<head>
2. External Style sheet
CSS didefinisikan di dalamsatu file tersendiri di luar file HTML
3. Inline Style Sheet
CSS didefinisikan di dalamsetiapelemen/tag HTML

Sintaks CSS terdiriatastigabagian, yaitu : selector, property, dan value


selector {property: value}
Selector merupakan tag yang ingindiberikan style atau tag HTML yang
akandidefinisikan (body,h1,link,dll). Property merupakanatribut yang
ingindidefinisikanatau yang akandiubahdan value merupakannilaidariatribut.
Antara property dan value dipisahkanolehtandatitikdua (:).
Contoh :Body { color: black}
Jika value terdiriatasbeberapa kata, maka value
tersebutdiapitdengantandakutip ( )
Contoh : P {font-family: sans serif}

Cara mendeklarasikankelompok : (tandakomaserta&)


a. H1, H2 {color : green};
b. H3, H4 & H5 {color : red};

Cara menuliskankomentar :
a. Menggunakantanda : /* .. */
b. Menggunakantanda : <!-- - - >

BentukUkuran
a. Em: untukmenentukanukuran yang pecahanataudesimal
b. Ex: digunakanuntukmenentukanukuran yang sifatnyavertikal
c. Px:menentukanukuran yang bersifat pixel(layar monitor)
sepertiukuranhuruf.

3. kode HTML

PENDAFTARAN.HTML

<html>
<head>
<link href="cssprofil.css" rel="stylesheet" type="text/css" />

</head>
<body>

<div id="halaman" >


<div id="header">
<h1>Program StudiSistemInformasi</h1>
<h3>UniversitasJember</h3>
<div id="headkiri"><imgsrc="unej.png"></div>
</div>
<h2><marquee>Pendaftaran</marquee></h2>
<div id="menu">
<ul>
<li><a href="home.html">Home</a>
<li><a href="profil.html">ProfilDosen</a>
<li><a href="pendaftaran.html">Pendaftaran</a>
<li><a href="kontak.html">Contact</a>
</ul>
</div>

<div id="konten" ><imgsrc="id.png">


</br>
</br>
<table>
<trvalign="top">
<td>Nama</td>
<td>:</td>
<td><input type=text name="nama"></td>
</tr>
<trvalign="top">
<td>JenisKelamin</td>
<td>:</td>
<td><select name="jk">
<option value="laki">Laki - laki</option>
<option value="perempuan">Perempuan</option>
<option value="rhs">Rahasia</option>
</select>
</td>
</tr>
<trvalign="top">
<td>AsalSekolah</td>
<td>:</td>
<td><input type=text name="email">
</td>
</tr>
<trvalign="top">
<td> E-mail</td>
<td>:</td>
<td><input type=text name="email">
</td>
</tr>
<trvalign="top">
<td>Nilai UN</td>
<td>:</td>
<td><input type=text name="nilai">
</td>
</tr>
<trvalign="top">
<td><input type=submit value="kirim"></td>
<td></td>
<td><input type=reset></td>
</tr>
</table>
</div>

<div id="footer">
<p>PraktikumPermrograman Web 2015</p>
<p>Sumber :TresnoTekoJalaranSokoKulino</p>
</div>
</div>

</body>

</html>

PROFIL.HTML

<html>
<head>
<link href="cssprofil.css" rel="stylesheet" type="text/css" />

</head>
<body>

<div id="halaman" >


<div id="header">
<h1>Program StudiSistemInformasi</h1>
<h3>UniversitasJember</h3>
<div id="headkiri"><imgsrc="unej.png"></div>
</div>
<h2><marquee>ProfilDosen</marquee></h2>
<div id="menu">
<ul>
<li><a href="home.html">Home</a>
<li><a href="profil.html">ProfilDosen</a>
<li><a href="pendaftaran.html">Pendaftaran</a>
<li><a href="kontak.html">Contact</a>
</ul>
</div>

<div id="konten" ><imgsrc="pak yan.jpg">


<table>
<trvalign="top">
<td>Nama</td>
<td>:</td>
<td>YanuarNurdiansyah, S. T., M.Cs.</td>
</tr>
<trvalign="top">
<td>Tempat/TanggalLahir</td>
<td>:</td>
<td>Bengkulu/01 Januari 1982
</td>
</tr>
<trvalign="top">
<td>JenisKelamin</td>
<td>:</td>
<td>Laki - laki
</td>
</tr>
<trvalign="top">
<td>Alamat</td>
<td>:</td>
<td>Jember
</td>
</tr>
<trvalign="top">
<td>Hobi</td>
<td>:</td>
<td>Sholat, mengajar, kuliner
</td>
</tr>

</table>

</div>

<div id="footer">
<p>PraktikumPermrograman Web 2015</p>
<p>Sumber :TresnoTekoJalaranSokoKulino</p>
</div>
</div>

</body>

</html>

HOME.HTML

<html>
<head>
<link href="csshome.css" rel="stylesheet" type="text/css" />

</head>
<body>

<div id="halaman" >


<div id="header">
<h1>Program StudiSistemInformasi</h1>
<h3>UniversitasJember</h3>
<div id="headkiri"><imgsrc="unej.png"></div>
</div>
<h2><marquee>Selamatdatang di WEB PSSI UNEJ</marquee></h2>
<div id="menu">
<ul>
<li><a href="home.html">Home</a>
<li><a href="profil.html">ProfilDosen</a>
<li><a href="pendaftaran.html">Pendaftaran</a>
<li><a href="kontak.html">Contact</a>
</ul>
</div>

<div id="konten" ><imgsrc="pslamin.jpg">


<p align="justify">Program StudiSistemInformasi (PSSI)
UniversitasJemberdidirikanpadaawaltahunakademik 2009/2010
berdasarkanSuratIjinPenyelenggaraan PSSI
UniversitasJemberdariDirjenDiktiDepdiknasNomor 140/D/T/2009 tanggal 6
Pebruari 2009.
PSSI
UnversitasJemberdiselenggarakanuntukmemenuhikebutuhantenagaprofesion
al di bidangSistemInformasi yang meningkatpesat yang
tidakdibarengidenganpenyediaantenaga yang
memadai.Sebagaigambaranhinggatahun 2010 kebutuhantenagaahli di
bidanginimencapai 170 ribuan, sementaratenagaahli di bidangini yang
dihasilkanmasihkurangdari 5000
orang.ProgramStudiSistemInformasiUniversitasJember,
secaraumumbertujuanuntukmenyiapkansumberdayamanusia yang
berkualitasdalampenguasaankompetensimaterisisteminformasi.
Program StudiSistemInformasi (PSSI)
UniversitasJemberdidirikanpadaawaltahunakademik 2009/2010
berdasarkanSuratIjinPenyelenggaraan PSSI
UniversitasJemberdariDirjenDiktiDepdiknasNomor 140/D/T/2009 tanggal 6
Pebruari 2009.
PSSI
UnversitasJemberdiselenggarakanuntukmemenuhikebutuhantenagaprofesion
al di bidangSistemInformasi yang meningkatpesat yang
tidakdibarengidenganpenyediaantenaga yang
memadai.Sebagaigambaranhinggatahun 2010 kebutuhantenagaahli di
bidanginimencapai 170 ribuan, sementaratenagaahli di bidangini yang
dihasilkanmasihkurangdari 5000
orang.ProgramStudiSistemInformasiUniversitasJember,
secaraumumbertujuanuntukmenyiapkansumberdayamanusia yang
berkualitasdalampenguasaankompetensimaterisisteminformasi.
</p>

</div>

<div id="footer">
<p>PraktikumPermrograman Web 2015</p>
<p>Sumber :TresnoTekoJalaranSokoKulino</p>
</div>
</div>

</body>

</html>

KONTAK.HTML

<html>
<head>
<link href="cssprofil.css" rel="stylesheet" type="text/css" />

</head>
<body>

<div id="halaman" >


<div id="header">
<h1>Program StudiSistemInformasi</h1>
<h3>UniversitasJember</h3>
<div id="headkiri"><imgsrc="unej.png"></div>
</div>
<h2><marquee> Contact</marquee></h2>
<div id="menu">
<ul>
<li><a href="home.html">Home</a>
<li><a href="profil.html">ProfilDosen</a>
<li><a href="pendaftaran.html">Pendaftaran</a>
<li><a href="kontak.html">Contact</a>
</ul>
</div>

<div id="konten" ><imgsrc="kontak.png">


</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
<p> websites :<ahref="www.unej.ac.id" target="_blank">PSSI
UNEJ</a>
<p> email :pssi@unej.ac.id
<p>Telephone : 0331-487608

</div>

<div id="footer">
<p>PraktikumPermrograman Web 2015</p>
<p>Sumber :TresnoTekoJalaranSokoKulino</p>
</div>
</div>

</body>

</html>

4. Screenshootkode CSS
CSSPROFIL.CSS
*{
margin:0px;
padding:0px;
}

h1{
background-color:rgba(108, 211, 142, 0.6);
color:#FFF;
float:right;
font-family:Lato;
text-decoration :overline;

h3{
color:#FFF;
clear:both;
float:right;
}
#halaman {
background-image:url(footerbc.jpg);
width:1000px;
margin:auto;
box-shadow:0 0 5px #06c144;
padding:20px;
margin-top:15px;
margin-bottom:15px;
font-family:Lato, Times New Roman, sans-serif;
font-size:14px;

}
#header {
width:950px;
height:120px;
background-image:url(gambarheader.jpg);
padding-right:50px;
padding-top:30px;
}
#headerkiri{
width:100px;
float : left;
}

#header img{
padding-left:100px;
width:105px;

#menu {
width:200px;
height:240px;
float:left;
margin-bottom:20px;
margin-top : 0px;
padding-left: 10px;

#menu a{
text-decoration:none;
color:#000;
}

#menu ul{
list-style:none;
font-weight:bold;
padding-top:20px;
padding-bottom:20px;
}

#menu li{
margin-top:5px;
line-height:50px;
padding-left:20px;
background-image:url(menu.jpg);
background-repeat:repeat-x;
padding-top:10;
}

#menu li:hover{
background-image:none;
background-color:#202020;
}

#konten {
height:300px;
width:710px;
margin:auto;
background-color:rgba(108, 211, 142, 0.6);
box-shadow:0 0 5px #06c144;
padding:20px;
padding-left:20px;
margin-top:15px;
margin-bottom:20px;
margin-right:15px;
font-family:Lato, Times New Roman, sans-serif;
font-size:14px;

}
#kontenp{
text-align=justify
}
#kontenimg{
height:300px;
padding-left:10px;
padding-right:10px;
float:left;
}
#footer{
clear:both;
width:1000px;
height:50px;
padding-top:25px;
background-image:url(bottom.jpg);
text-align:center;
color:white;
}

CSSHOME.CSS
*{
margin:0px;
padding:0px;
}

h1{
clear:both;
background-color:rgba(108, 211, 142, 0.6);
color:#FFF;
float:right;
font-family:Lato;
text-decoration :overline;

h3{
color:#FFF;
clear:both;
float:right;
padding-top:0px;
padding-left:0px;

}
#halaman {
background-image:url(footerbc.jpg);
width:1000px;
margin:auto;
box-shadow:0 0 5px #06c144;
padding:20px;
margin-top:15px;
margin-bottom:15px;
font-family:Lato, Times New Roman, sans-serif;
font-size:14px;

}
#header {
width:950px;
height:120px;
background-image:url(gambarheader.jpg);
padding-right:50px;
padding-top:30px;
}
#headerkiri{
width:100px;
float : left;
}

#header img{
padding-left:100px;
width:105px;

#menu {
width:200px;
height:240px;
float:left;
margin-bottom:20px;
margin-top : 0px;
padding-top:0px;
padding-left: 10px;

#menu a{
text-decoration:none;
color:#000;
}

#menu ul{
list-style:none;
font-weight:bold;
padding-top:20px;
padding-bottom:20px;
}
#menu li{
margin-top:5px;
line-height:50px;
padding-left:20px;
background-image:url(menu.jpg);
background-repeat:repeat-x;
padding-top:10;
}

#menu li:hover{
background-image:none;
background-color:#202020;
}

#konten {
height:auto;
width:710px;
margin:auto;
background-color:rgba(108, 211, 142, 0.6);
box-shadow:0 0 5px #06c144;
padding:20px;
padding-left:20px;
margin-top:15px;
margin-bottom:20px;
margin-right:15px;
font-family:Lato, Times New Roman, sans-serif;
font-size:14px;

}
#kontenp{
text-align=justify
}
#kontenimg{
height:300px;
padding-left:10px;
padding-right:10px;
float:left;
}
#footer{
clear:both;
width:1000px;
height:50px;
padding-top:25px;
background-image:url(bottom.jpg);
text-align:center;
color:white;
}

5. Screenshoothalaman web
HOME
PROFIL DOSEN

PENDAFTARAN
KONTAK