Laporan Praktikum 1

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>
</head>
<body>
<div id="halaman" >

<div id="header">
</div>
<h2><marquee>ProfilDosen</marquee></h2>
<div id="menu">
<ul>
</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">
</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">
</div>
<h2><marquee>Selamatdatang di WEB PSSI UNEJ</marquee></h2>
<div id="menu">
<ul>
</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">
</div>
</div>
</body>
</html>
KONTAK.HTML
<html>
<head>
</head>
<body>
<div id="halaman" >

<div id="header">
</div>
<h2><marquee> Contact</marquee></h2>
<div id="menu">
<ul>
</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">
</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;
padding:20px;
padding-left:20px;
margin-top:15px;
margin-bottom:20px;
margin-right:15px;
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;
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;
padding:20px;
margin-top:15px;
margin-bottom:15px;
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;
padding:20px;
padding-left:20px;
margin-top:15px;
margin-bottom:20px;
margin-right:15px;
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

Laporan Praktikum 1

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Laporan Praktikum 1

Diunggah oleh

Hak Cipta:

Format Tersedia

LAPORAN PRAKTIKUM

TEORI DASAR HTML DAN CSS

AINUR ROHMAH NURFAROKA

PROGRAM STUDI SISTEM INFORMASI

HTML ( Hypertext Markup Language ) adalahbahasadasaruntuk web

Aturanpenulisan HTML adalahsebagaiberikut :

1. Memilkistruktur minimal daridokumen HTML.

<title>Judul Web Page</title>

Isi artikelanda di sini

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

3. Di dalam Tag HTML terdapatatribut Tag, yang

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

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

CSS merupakansingkatandari Cascading Style Sheets

Menurutpenulisannya CSS dapatdibagimenjadi 3 jenis, yaitu :

1. Internal Style Sheet

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

Cara mendeklarasikankelompok : (tandakomaserta&)

<div id="halaman" >

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

<div id="halaman" >

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

<div id="halaman" >

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

<div id="halaman" >

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

Anda mungkin juga menyukai