TUGAS DTK Laporan

LAPORAN PRAKTIKUM
DASAR TEKNIK KOMPUTER
OLEH:
ELI CHRISTO MAKOY
201765001
PRODI S1 TEKNIK INFORMATIKA

JURUSAN TEKNIK INFORMATIKA
UNIVERSITAS PAPUA
A. MEMBUAT BIODATA MAHASISWA
Untuk membuat situs web data diri, maka langkah langkah yang saya lakukan adalah:
1. Membuka notepad lalu saya mengetik code program sebagai berikut:
<html>
<head>
<title>Eli Christo Makoy</title>
</head>
<center><center/>
<img src="logo.png" width=100px height=100px/></br>
<center><marquee><font color=black><h1>BIODATA MAHASISWA
UNIPA</color></marquee></h1></center>
<body bgcolor="bright red">
<center><center/>
<img src="christo001.jpg" width=150px height=200px/></br>
<font color=black>Nama : Eli Christo Makoy<color><br />
NIM : 201765001 <br />
Tempat, Tgl Lahir : Sorong, 13 Juli 1999 <br />
Agama : Kristen Protestan <br />
Jenis Kelamin : Laki-laki <br />
Hobby : Basket <br />
Alamat Sekarang : Jl. Pami Amban, Manokwari <br />
Alamat Asal : Jl. S. Bebari, Sorong <br />
Email : christomakoy13@gmail.com <br />
Riwayat Sekolah <br />
SD : SD YPPK KRISTUS RAJA 1 <br />
SMP : SMP NEGERI 9 Sorong <br />
SMA : SMA NEGERI 3 Sorong <br />
<a href="pesertaDTK.html">Peserta DTK</a>

</Body>
</html>
2. Setelah selesai, saya menyimpan script ini di alamat c:\xampp dengan nama 201765001.html
3. Setekah itu saya menjalankan Xampp Control dan server Apache
4. Lalu membuka browser dan mengetikkan http:\\localhost\201765001.html
5. Maka hasil kerja saya seperti berikut:
6. Lalu saya membuat sript HTML yang baru lagi, agar Situs web diatas bisa terhubung dengan
BIODATA MAHASISWA LAIN. Langkah nya tetap sama. Buka NotePad lalu saya mengetik code ini:
<html>
<head> <a href="2017650018">201765018</a> <br />
<center><center/> <a href="2017650019">201765019</a> <br />
<title>PESERTA DTK</title> <a href="2017650020">201765020</a> <br />
</head> <a href="2017650021">201765021</a> <br />
<body> <a href="2017650022">201765022</a> <br />
<a href="2017650023">201765023</a> <br />
<h1>Peserta DTK </h1> <a href="2017650024">201765024</a> <br />
<a href="201765001">201765001</a> <br /> <a href="2017650025">201765025</a> <br />
<a href="2017650013">201765013</a> <br />
<a href="2017650014">201765014</a> <br />
<a href="2017650015">201765015</a> <br />
<a href="2017650016">201765016</a> <br /> </body>
<a href="2017650017">201765017</a> <br /> </html>
7. Setelah semua code telah di tulis, sayang menghubungkannya dengan HTML data pada gambar 1
Dengan mengetik <a href="201765001">201765001</a> <br /> (dengan HTML nomor Peserta)
Dan hasilnya kan menjadi:
8. Dan jika kita mengklik salah satu Nomor Peserta, maka akan muncul BIODATA MAHASISWA UNIPA
Seperti pada gambar 1.
B. MEMBUAT HTML SD
Gambar diatas merupakan contoh HTML Sekolah Dasar yang saya buat. Untuk mebuat HTML seperti diatas, saya
menggunakan XAMPP, dengan langkah langkah sebagai berikut:
1. Pertama-tama saya membuat Folder pada c:\xampp\sd201765001

2. Agar tidak berantahkan maka saya memisahkan gambar dan tulisan dengan membuat 2 file berbeda
yaitu sript HTML dan CCS
3. Terlebih dahulu, saya membuat script HTML. Buka NotePad, kemudian mengerik code program.
Code program ini saya dapatkan lewat pencarian dengan bantuan Google. Kemudian saya
mempelajarinya, kemudian saya membuat code sebagai berikut:
<html> <div class="art-box-body art-block-

<head> body">
</li>
<meta http-equiv="Content-Type" <div class="art-bar art-blockheader">
<li>
content="text/html; charset=UTF-8" /> <h3 class="t">
<a href="#">Pendidik dan Tenaga
<title>HMTL SD 201765001</title> Main Menu</h3>
Pendidik</a>
</head> </div>
<ul>
<body> <div class="art-box art-blockcontent">
<li><a href="./?
<div id="art-main"> <div class="art-box-body art-
pages=bacaartikel&id=5">Kepala
<div class="cleared reset-box"> blockcontent-body">
Sekolah</a></li>
</div> <ul>
<li><a href="./?pages=dataguru">Data
<div class="art-header"> <li class="parent">
Guru</a></li>
<div class="art-header-position"> <a href="./?pages=gallery">
</ul>
<div class="art-header-wrapper"> <span>Gallery Kegiatan</span>
</li>
<div class="cleared reset-box"> </a>
<li>
</div> </li>
<a href="./?
<div class="art-header-inner"> <li>
pages=listdownload">Download</a>
<div class="art-headerobject"> <a href="./?pages=list_pengumuman">
</li>
</div> <span>Pengumuman</span>
</ul>
<div class="art-logo"> </a>
</div>
</div> </li>
</div>
</div> </ul>
</div>
</div> <div class="cleared">
</div>
</div> </div>
<div class="cleared reset-box">
</div> </div>
</div>
<div class="cleared reset-box"> </div>
<div class="art-box art-sheet">
<div class="art-box-body art-sheet-
<div class="art-bar art-nav"> </div>
body">
<div class="art-nav-outer"> </div>
<div class="art-layout-wrapper">
<div class="art-nav-wrapper"> </div>
<div class="art-content-layout">
<div class="art-nav-inner"> <div class="art-box art-block">
<div class="art-content-layout-
<ul class="art-hmenu"> <div class="art-box-body art-block-
row">
<li> body">
<div class="art-layout-cell art-
<a href="./" class="active">Home</a> <div class="art-bar art-blockheader">
sidebar1">
</li> <h3 class="t">
<div class="art-box art-block">
<li> Ekstra Kurikuler</h3>
<a href="Visi & Misi.html">Visi & Misi</a> </div>
<div class="art-box art-blockcontent"> </div> <li><a href="./?pages=datasiswa">Data
<div class="art-box-body art- </div> Siswa</a></li>
blockcontent-body"> </div> </ul>
<ul> <div class="cleared"> <div class="cleared">
<li class="active"><a href="./? </div> </div>
pages=bacaartikel&id=7">Sepak </div> </div>
Bola</a></li> <div class="art-layout-cell art-sidebar2"> </div>
<li class="parent"><a href="./? <div class="art-box art-block"> <div class="cleared">
pages=bacaartikel&id=8">Bola <div class="art-box-body art-block- </div>
Volly</a></li> body"> </div>
<li><a href="./? <div class="art-bar art-blockheader"> </div>
pages=bacaartikel&id=9">Musik</a></li> <h3 class="t"> </div>
<li><a href="./? AKUN SISWA</h3> </div>
pages=bacaartikel&id=10">Bola </div> </div>
Basket</a></li> <div class="art-box art-blockcontent"> <div class="cleared">
<li><a href="./? <div class="art-box-body art- </div>
pages=bacaartikel&id=11">Pramuka</a></li blockcontent-body"> <div class="art-footer">
> <div class="art-footer-body">
<li class="visited"><a href="./? <a href="#" class="art-rss-tag-
<form action="#" method="post"
pages=bacaartikel&id=12">Pencak icon" title="RSS"></a>
name="login" id="form-login">
Silat</a></li> <div class="art-footer-text">
<fieldset class="input" style="border: 0
<li class="hover"><a href="./? <p>
none;">
pages=bacaartikel&id=13">English Copyright © 2017 SD INPRES 17 SORONG.
<p id="form-login-username">
Club</a></li> </p>
<label
</ul> </div>
for="modlgn_username">Username</label
<div class="cleared"> <div class="cleared">
>
</div> </div>
<br />
</div> </div>
<input id="modlgn_username"
</div> </div>
type="text" name="username"
<div class="cleared"> <div class="cleared">
class="inputbox" alt="username"
</div> </div>
size="18" />
</div> </div>
</p>
</div> </div>
<p id="form-login-password">
<div class="cleared"> </div>
<label
for="modlgn_passwd">Password</label>
</div> </div>
<br />
<div class="art-layout-cell art-content"> <p class="art-page-footer">
<input id="modlgn_passwd"
<div class="art-box art-post"> <a href="#" target="_blank"> </a> </p>
type="password" name="passwd"
<div class="art-box-body art-post- <div class="cleared">
class="inputbox" size="18"
body"> </div>
alt="password" />
<div class="art-post-inner art-article"> </body>
</p>
<div class="menu_content"> </htmL>
<span class="art-button-wrapper">
</div>
<span class="art-button-l"> </span>
<p>
<span class="art-button-r"> </span>
SD INPRES 17 Kota Sorong merupakan salah
<input type="submit" name="Submit"
satu Sekolah Dasar Favorit dengan Standar
class="art-button" value="Login" />
Internasional. Sudah banyak siswa siswi
</span>
yang berhasil menjadi juara dan meraih
</fieldset>
penghargaan sampai ke tingkat
</form>
internasional. Untuk itu, maka perlu adanya
<div class="cleared">
pengembangan Fasilitas sekolah. Maka
</div>
kami membuat website sekolah ini, bukan
</div>
hanya untuk memberi informasi. Tapi juga
</div>
menjadi sarana tempat siswa berkreasi
sehingga siswa lebih mengenal Teknologi
</div>
Masa kini. Sehingga terciptalah siswa siswi
</div>
yang hebat.</p>
</div>
<div class="art-postheadericons art-
<div class="art-box art-block">
metadata-icons">
<div class="art-box-body art-block-
</div>
body">
<div class="art-postcontent">
<div class="art-bar art-blockheader">
<h3 class="t">
</div>
Kesiswaan</h3>
</div>
</div>
<div class="art-box art-blockcontent">
<div class="art-postfootericons art-
<div class="art-box-body art-
metadata-icons">
blockcontent-body">
</div>
</div>
<div class="cleared"> <ul>
4. Setelah code program di ketik, saya menyimpan dengan ekstensi *.html.
maka hasilnya akan menjadi seperti ini:
5. Hasil sangat berantahkan, maka saya membuat script dengan desain gambar ber ekstensi CCS.
6. Saya mencari gambar untuk desain di CCS.
7. Buka NotePad, kemudian mengerik code program.

Code program ini juga saya dapatkan lewat pencarian dengan bantuan pencarian di Google.
Kemudian saya mempelajarinya, kemudian saya membuat code dan memasukkan file gambar dengan code
sebagai berikut:
#art-main, table } position:relative;
{ }
font-family: Tahoma, Arial, Helvetica, Sans-Serif; .cleared .art-box:before, .art-box:after, .art-box-body:before, .art-box-
font-style: normal; { body:after {
font-weight: normal; display:block; position:absolute;
font-size: 13px; clear: both; top:0;
text-align: justify; float: none; bottom:0;
} margin: 0; content:' ';
padding: 0; background-repeat: no-repeat;
border: none; line-height:0;
html, body font-size: 0; }
{ height:0; .art-box:before,.art-box-body:before{
height:100%; overflow:hidden; left:0;
} } }
.art-box:after,.art-box-body:after{
#art-main .reset-box right:0;
{ { }
position: relative; overflow:hidden; .art-box:before {
z-index: 0; display:table; overflow:hidden;
width: 100%; } background-position: bottom left;
min-height: 100%; direction: ltr;
left: 0; form z-index:-3;
top: 0; { }
cursor:default; padding: 0 !important; .art-box:after {
overflow:hidden; margin: 0 !important; background-position: bottom right;
} } z-index:-3;
}
body table.position .art-box-body:before, .art-box-body:after {
{ { background-repeat:repeat-y;
padding: 0; position: relative; }
margin:0; width: 100%; .art-box-body:before {
width: 1349px; table-layout: fixed; background-position: top left;
min-width: 1349px; } z-index:-3;
color: #0F2A38; }
background-color: #C5C5AF; /* Start Box */ .art-box-body:after {
background-image: url('images/furley_bg.png'); .art-box, .art-box-body { background-position: top right;
background-repeat: repeat; margin:0 auto; z-index:-3;
} position: relative; font-weight: bold;
top:0; padding: 0;
.art-box .art-box:before, .art-box .art-box:after, .art-box-body width:1000px; margin: 0;
.art-box-body:before, .art-box-body .art-box-body:after { margin:0 auto; color: #0D2430 !important;
z-index:-2; } }
} .art-header-inner .art-logo-name a,
.art-box .art-box .art-box:before, .art-box .art-box .art- { .art-logo-name a:link,
box:after, .art-box-body .art-box-body .art-box- position: relative; .art-logo-name a:visited,
body:before, .art-box-body .art-box-body .art-box-body:after margin: 0 6px; .art-logo-name a:hover
{ } {
z-index:-1; font-weight: bold;
} .art-header:before padding: 0;
/* End Box */ { margin: 0;
position: absolute; color: #0D2430 !important;
/* Start Bar */ display:block; }
.art-bar { content:' ';
position:relative; z-index:-2; .art-logo-text
} top: 0; {
.art-bar:before, .art-bar:after { width:100%; display: block;
position:absolute; height: 225px; text-align: left;
top:0; background-image: url('images/pembuka.jpg'); font-family: Tahoma, Arial, Helvetica, Sans-Serif;
bottom:0; background-repeat: no-repeat; font-size: 14px;
content:' '; background-position:top left; padding: 0;
background-repeat:repeat; } margin: 0;
z-index:-1; color: #0D2430 !important;
} }
.art-bar:before { /* end Header */ .art-logo-text a,
left:0; .art-logo-text a:link,
background-position: top left; /* begin HeaderObject */ .art-logo-text a:visited,
} div.art-headerobject .art-logo-text a:hover
.art-bar:after { { {
right:0; display: block; font-family: Tahoma, Arial, Helvetica, Sans-Serif;
background-position: top right; left: 67%; font-size: 14px;
} margin-left: -263px; padding: 0;
/* End Bar */ position: absolute; margin: 0;
top: 0; color: #0D2430 !important;
li h1, .art-postcontent li h1, .art-blockcontent-body li h1 width: 394px; }
{ height: 225px;
margin:1px; background-image: url('images/header-object.jpg'); #headline, #slogan
} } {
li h2, .art-postcontent li h2, .art-blockcontent-body li h2 /* end HeaderObject */ display: block;
{ min-width: 150px;
margin:1px; /* begin Flash */ text-align: left;
} #art-flash-area }
li h3, .art-postcontent li h3, .art-blockcontent-body li h3 { /* end Logo */
{ position: absolute;
margin:1px; top: 0; /* begin Menu */
} left: 0; /* menu structure */
li h4, .art-postcontent li h4, .art-blockcontent-body li h4 width: 988px;
{ height: 225px; ul.art-hmenu a, ul.art-hmenu a:link, ul.art-hmenu a:visited,
margin:1px; overflow: hidden; ul.art-hmenu a:hover
} } {
li h5, .art-postcontent li h5, .art-blockcontent-body li h5 outline: none;
{ #art-flash-container position: relative;
margin:1px; { z-index: 11;
} height: 247px; }
li h6, .art-postcontent li h6, .art-blockcontent-body li h6 top: -10px;
{ position: absolute; ul.art-hmenu, ul.art-hmenu ul
margin:1px; width: 988px; {
} left: 50%; display: block;
li p, .art-postcontent li p, .art-blockcontent-body li p margin-left:-494px; margin: 0;
{ } padding: 0;
margin:1px; border: 0;
} #art-flash-container div.art-flash-alt list-style-type: none;
{ }
/* end Page */ position: relative;
width: 110px; ul.art-hmenu li
/* begin Header */ height: 30px; {
div.art-header margin: 0 auto; margin: 0;
{ top: 10px; padding: 0;
margin: 0 auto; } border: 0;
position: relative; display: block;
z-index: -5; /* end Flash */ float: left;
width:995px; position: relative;
height: 225px; /* begin Logo */ z-index: 5;
margin-top: 0; div.art-logo background: none;
margin-bottom: 0; { }
} display: block;
.art-header-position position: absolute; ul.art-hmenu li:hover{
{ top: 93px; z-index: 10000;
position: absolute; left: 0; white-space: normal;
top: 0; margin-left: 12px; }
right: 0; } ul.art-hmenu li li{
left: 0; float: none;
} .art-logo-name width: auto;
{ }
.art-header-wrapper display: block; ul.art-hmenu li:hover>ul {
{ text-align: left; visibility: visible;
top: 100%; { ul.art-hmenu>li>a.active:after {
} width:1000px; background-position: bottom right;
ul.art-hmenu li li:hover>ul { margin:0 auto; }
top: 0; min-height: 50px; ul.art-hmenu>li>a.active {
left: 100%; z-index: 100; color: #fff;
} margin-top: 3px; }
ul.art-hmenu:after, ul.art-hmenu ul:after margin-bottom: -14px;
{ } ul.art-hmenu>li>a:hover:before, ul.art-
content: "."; hmenu>li:hover>a:before {
height: 0; .art-nav:before, .art-nav:after{ background-position: center left;
display: block; background-image: url('images/nav.png'); }
visibility: hidden; } ul.art-hmenu>li>a:hover:after, ul.art-hmenu>li:hover>a:after
overflow: hidden; .art-nav:before{ {
clear: both; right: 11px; background-position: center right;
} } }
ul.art-hmenu, ul.art-hmenu ul { .art-nav:after{ ul.art-hmenu>li>a:hover, ul.art-hmenu>li:hover>a{
min-height: 0; width: 11px; color: #000000;
} } }
/* end menu bar */
ul.art-hmenu ul .art-nav-outer{ /* end MenuItem */
{ position:absolute;
visibility: hidden; width:100%; /* begin MenuSeparator */
position: absolute; } ul.art-hmenu>li:before
z-index: 10; .art-nav-wrapper {
left: 0; { position:absolute;
top: 0; position: relative; display: block;
background-image: url('images/spacer.gif'); width:1000px; content:' ';
padding: 10px 30px 30px 30px; margin:0 auto; top:0;
margin: -10px 0 0 -30px; } left: -7px;
} width:7px;
.art-nav-inner{ height: 32px;
ul.art-hmenu ul.art-hmenu-left-to-right { margin: 0 13px; background: url('images/menuseparator.png') center
right: auto; } center no-repeat;
left: 0; }
margin: -10px 0 0 -30px; /* end Menu */
} ul.art-hmenu>li {
ul.art-hmenu ul.art-hmenu-right-to-left { /* begin MenuItem */ margin-left:7px;
left: auto; ul.art-hmenu>li>a }
right: 0; { ul.art-hmenu>li:first-child {
margin: -10px -30px 0 0; position: relative; margin-left:0;
} display: block; }
height: 32px;
ul.art-hmenu ul ul cursor: pointer; ul.art-hmenu>li:first-child:before{
{ text-decoration: none; display:none;
padding: 30px 30px 30px 10px; color: #E0E0E0; }
margin: -30px 0 0 -10px; padding: 0 18px; /* end MenuSeparator */
margin-left: -11px; line-height: 32px;
z-index: -1; text-align: center; /* begin MenuSubItem */
} } .art-hmenu ul a
{
ul.art-hmenu ul ul.art-hmenu-left-to-right ul.art-hmenu>li>a:before, ul.art-hmenu>li>a:after display: block;
{ { white-space: nowrap;
right: auto; position: absolute; height: 25px;
left: 0; display: block; background-image: url('images/subitem.png');
padding: 30px 30px 30px 10px; content:' '; background-position: left top;
margin: -30px 0 0 -10px; top: 0; background-repeat: repeat-x;
margin-left: -11px; bottom:0; border-width: 1px;
} z-index: -1; border-style: solid;
background-image: url('images/menuitem.png'); border-top-width: 0;
ul.art-hmenu ul ul.art-hmenu-right-to-left } border-color: #56A7D2;
{ min-width: 7em;
left: auto; ul.art-hmenu>li>a:before text-align: left;
right: 0; { text-decoration: none;
padding: 30px 10px 30px 30px; left: 0; line-height: 25px;
margin: -30px -10px 0 0; right: 1px; color: #1F1F1F;
margin-right: -11px; background-position: top left; font-size: 11px;
} } margin:0;
padding: 0 12px;
ul.art-hmenu li li:hover>ul.art-hmenu-left-to-right { ul.art-hmenu>li>a:after }
right: auto; {
left: 100%; width: 1px; .art-hmenu ul>li:first-child>a
} right: 0; {
ul.art-hmenu li li:hover>ul.art-hmenu-right-to-left { background-position: top right; border-top-width: 1px;
left: auto; } }
right: 100%;
} .art-hmenu a, .art-hmenu a:link, .art-hmenu a:visited, .art- .art-hmenu ul a:link, .art-hmenu ul a:visited, .art-hmenu ul
hmenu a:hover a:hover, .art-hmenu ul a:active
ul.art-hmenu{ { {
position:relative; font-size: 18px; text-align: left;
padding: 6px 6px 12px 6px; text-align: left; text-decoration: none;
float: left; text-decoration: none; line-height: 25px;
} color: #1F1F1F;
font-size: 11px;
}
/* end menu structure */ margin:0;
padding: 0 12px;
ul.art-hmenu>li>a.active:before {
/* menu bar */ }
background-position: bottom left;
}
.art-nav .art-hmenu ul li a:hover
{ }
color: #000000; /* end Layout */ /* end BlockHeader */
background-position: left bottom;
border-color: #82BEDE; /* begin Box, Block */ /* begin Box, BlockContent */
border-top-width: 1px !important; .art-block .art-blockcontent
} { {
max-width:974px; max-width:974px;
.art-hmenu ul li a.art-hmenu-before-hovered margin: 5px; }
{ } .art-blockcontent-body
border-bottom-width: 0 !important; .art-block-body {
} { padding:5px;
padding:5px; color: #0F2A38;
.art-hmenu ul li:hover>a min-width:26px; font-family: Tahoma, Arial, Helvetica, Sans-Serif;
{ min-height:26px; font-size: 12px;
color: #000000; } }
background-position: left bottom; .art-block:before, .art-block:after .art-blockcontent-body table,
border-color: #82BEDE; { .art-blockcontent-body li,
border-top-width: 1px !important; content: url('images/block_t.png'); .art-blockcontent-body a,
} font-size: 0; .art-blockcontent-body a:link,
background-image: url('images/block_b.png'); .art-blockcontent-body a:visited,
/* end MenuSubItem */ } .art-blockcontent-body a:hover
.art-block:after{ {
/* begin Box, Sheet */ clip:rect(auto, auto, auto, 956px); color: #0F2A38;
.art-sheet } font-family: Tahoma, Arial, Helvetica, Sans-Serif;
{ .art-block:before,.art-block-body:before{ font-size: 12px;
max-width:1000px; right:18px; }
margin-top: 5px; }
margin-bottom: -5px; .art-block-body:after{ .art-blockcontent-body p
cursor:auto; width: 18px; {
width: 1000px; top:18px; margin: 0 5px;
} bottom:18px; }
.art-sheet-body background-image:url('images/block.png');
{ } .art-blockcontent-body a, .art-blockcontent-body a:link
padding:13px; .art-block-body:before{ {
min-width:16px; top:18px; color: #A22101;
min-height:16px; bottom:18px; text-decoration: underline;
padding-top:13px; background-image:url('images/block.png'); }
padding-bottom:13px; }
} .art-blockcontent-body a:visited, .art-blockcontent-body
.art-sheet:before, .art-sheet:after div.art-block img a.visited
{ { {
content: url('images/sheet_t.png'); /* WARNING do NOT collapse this to 'border' - inheritance! color: #525252;
font-size: 0; */ text-decoration: none;
background-image: url('images/sheet_b.png'); border-width: 1px; }
} border-color: #C7C7C7;
.art-sheet:after{ border-style: solid; .art-blockcontent-body a:hover, .art-blockcontent-body
clip:rect(auto, auto, auto, 979px); margin: 10px; a.hover
} } {
.art-sheet:before,.art-sheet-body:before{ color: #D52B01;
right:21px; /* end Box, Block */ text-decoration: underline;
} }
.art-sheet-body:after{ /* begin BlockHeader */
width: 21px; .art-blockheader { .art-blockcontent-body ul li
top:21px; margin-bottom: 2px; {
bottom:21px; min-height: 38px; font-size: 13px;
background-image:url('images/sheet.png'); line-height:38px; line-height: 125%;
} } color: #0F2A38;
.art-sheet-body:before{ .art-blockheader:before, .art-blockheader:after{ margin: 2px;
top:21px; background-image: url('images/blockheader.png'); padding: 0 0 0 2px;
bottom:21px; } background-image: url('images/blockcontentbullets.png');
background-image:url('images/sheet.png'); .art-blockheader:before{ background-repeat: no-repeat;
} right: 25px; background-position: top left;
} }
/* end Box, Sheet */ .art-blockheader:after{ /* end Box, BlockContent */
width: 25px;
/* begin Layout */ } /* begin Button */
.art-layout-wrapper span.art-button-wrapper>a.art-button,
{ .art-blockheader .t span.art-button-wrapper>a.art-button:link,
position:relative; { span.art-button-wrapper>input.art-button,
margin:0 auto 0 auto; min-height: 38px; span.art-button-wrapper>button.art-button
} line-height:38px; {
color: #000000; text-decoration: none;
.art-content-layout font-family: Tahoma, Arial, Helvetica, Sans-Serif; font-family: Tahoma, Arial, Helvetica, Sans-Serif;
{ font-size: 14px; font-style: normal;
display: table; margin:0; font-weight: bold;
width:100%; padding: 0 10px 0 31px; font-size: 12px;
table-layout: fixed; white-space: nowrap; text-transform: uppercase;
border-collapse: collapse; } position:relative;
} top:0;
.art-blockheader .t a, display: inline-block;
.art-content-layout-row { .art-blockheader .t a:link, vertical-align: middle;
display: table-row; .art-blockheader .t a:visited, white-space: nowrap;
} .art-blockheader .t a:hover text-align: center;
{ color: #292929 !important;
.art-layout-cell color: #000000; width: auto;
{ font-family: Tahoma, Arial, Helvetica, Sans-Serif; outline: none;
display: table-cell; font-size: 14px; border: none;
vertical-align: top; } background: none;
line-height: 32px; right: 0;
height: 32px; background-position: top right; .art-post .art-content-layout-br
margin: 0 !important; } {
padding: 0 19px !important; height: 0;
overflow: visible; span.art-button-wrapper.hover>span.art-button-l }
cursor: pointer; {
text-indent: 0; background-position: center left; .art-article th
} } {
padding: 2px;
.art-button img, span.art-button-wrapper img span.art-button-wrapper.hover>span.art-button-r border: solid 1px #B5B5B5;
{ { vertical-align: top;
margin: 0; background-position: center right; text-align: left;
vertical-align: middle; } }
}
span.art-button-wrapper.active>span.art-button-l .art-article th
span.art-button-wrapper { {
{ background-position: bottom left; text-align: center;
vertical-align: middle; } vertical-align: middle;
display: inline-block; padding: 7px;
position: relative; span.art-button-wrapper.active>span.art-button-r }
height: 32px; {
overflow: hidden; background-position: bottom right; pre
white-space: nowrap; } {
text-indent: 0; overflow: auto;
width: auto; span.art-button-wrapper input padding: 0.1em;
max-width:974px; { }
margin: 0; float: none !important;
padding: 0; } #preview-image
z-index: 0; /* end Button */ {
} float: left;
/* begin Box, Post */ }
.firefox2 span.art-button-wrapper .art-post
{ { .preview-cms-logo
display: block; max-width:974px; {
float: left; margin: 5px; border: 0;
} } margin: 1em 1em 0 0;
.art-post-body float: left;
input, select, textarea { }
{ padding:21px;
vertical-align: middle; } .preview-sharepoint-logo
font-family: Tahoma, Arial, Helvetica, Sans-Serif; .art-post:before, .art-post:after {
font-style: normal; { border: 0;
font-weight: bold; content: url('images/post_t.png'); margin: 5px;
font-size: 12px; font-size: 0; float: left;
text-transform: uppercase; background-image: url('images/post_b.png'); }
} } /* end Box, Post */
.art-post:after{
div.art-block select clip:rect(auto, auto, auto, 965px);
{ }
width:96%; .art-post:before,.art-post-body:before{
} right:9px; .menu_content
} {
span.art-button-wrapper.hover>.art-button, span.art-button- .art-post-body:after{ background-image: url('images/SD.png');
wrapper.hover>a.art-button:link width: 9px; background-repeat: no-repeat;
{ top:9px; background-position:top center;
color: #0E2734 !important; bottom:9px; margin: 5px;
text-decoration: none !important; background-image:url('images/post.png'); width: 510px;
} } height: 280px;
.art-post-body:before{
span.art-button-wrapper.active>.art-button, span.art-button- top:9px;
}
wrapper.active>a.art-button:link bottom:9px;
{ background-image:url('images/post.png');
color: #380B00 !important; }
}
a img
span.art-button-wrapper>span.art-button-l, span.art-button- { /* begin Footer */
wrapper>span.art-button-r border: 0; .art-footer
{ } {
display: block; position: relative;
position: absolute; .art-article img, img.art-article, .art-block img, .art-footer img margin-top:0;
top: 0; { margin-bottom:0;
bottom: 0; border-color: #C7C7C7; width: 100%;
margin: 0; border-style: solid; }
padding: 0; border-width: 1px;
background-image: url('images/button.png'); } .art-footer-body
background-repeat: no-repeat; {
} .art-metadata-icons img position:relative;
{ padding: 10px;
span.art-button-wrapper>span.art-button-l border: none; color: #000;
{ vertical-align: middle; font-size: 18px;
left: 0; margin: 2px; }
right: 12px; }
background-position: top left; .art-footer-body ul li
} .art-article table, table.art-article {
{ font-size: 13px;
span.art-button-wrapper>span.art-button-r border-collapse: collapse; line-height: 125%;
{ margin: 1px; color: #0D2430;
width: 12px; } margin: 5px 0 0 5px;
padding: 0 0 0 13px; color: #1F1F1F; {
background-image: url('images/footerbullets.png'); font-size: 11px; position: relative;
background-repeat: no-repeat; } z-index: 10;
background-position: top left; padding: 1em;
} .art-footer-text text-align: center;
{ text-decoration: none;
.art-footer-body:before min-height: 32px; color: #424242;
{ padding-left: 10px; }
position: absolute; padding-right: 10px; /* end PageFooter */
content:' '; text-align: center;
z-index:-2; } /* begin LayoutCell, sidebar1 */
left:0; .art-content-layout .art-sidebar1
right:0; .art-footer-body a, {
top:0; .art-footer-body a:link width: 200px;
bottom:0; { }
background-image: url('images/footer.png'); color: #1F5775; .art-content-layout .art-sidebar1:before
background-position:bottom left; text-decoration: none; {
} } position: absolute;
z-index: -2;
.art-footer-body .art-rss-tag-icon .art-footer-body a:visited direction: ltr;
{ { left: 0;
position: absolute; color: #4A4A4A; bottom: 0;
left: 6px; } top: 0;
bottom:10px; content: ' ';
z-index:1; .art-footer-body a:hover overflow: hidden;
} { display: block;
color: #297299; background-image: url('images/sidebar_bg.png');
.art-rss-tag-icon text-decoration: underline; width: 200px;
{ } }
display: block; /* end LayoutCell, sidebar1 */
background-image: url('images/rssicon.png'); div.art-footer img
background-position: center right; { /* begin LayoutCell, sidebar2 */
background-repeat: no-repeat; margin: 10px; .art-content-layout .art-sidebar2
height: 32px; }/* end Footer */ {
width: 32px; width: 200px;
cursor: default; /* begin PageFooter */ }
} .art-page-footer, .art-content-layout .art-sidebar2:before
.art-page-footer a, {
.art-footer-text p .art-page-footer a:link, position: absolute;
{ .art-page-footer a:visited, z-index: -2;
padding:0; .art-page-footer a:hover direction: ltr;
margin:0; { right: 0;
text-align: center; font-family: Arial; bottom: 0;
} font-size: 10px; top: 0;
letter-spacing: normal; content: ' ';
.art-footer-body a, word-spacing: normal; overflow: hidden;
.art-footer-body a:link, font-style: normal; display: block;
.art-footer-body a:visited, font-weight: normal; background-image: url('images/sidebar_bg.png');
.art-footer-body a:hover, text-decoration: underline; width: 200px;
.art-footer-body td, color: #1C4E69; }
.art-footer-body th, } /* end LayoutCell, sidebar2 */
.art-footer-body caption
{ .art-page-footer
8. Setelah selesai mengetik code program untuk desain gambar, saya menyimpan sript ini dengan ekstensi *.ccs
9. Tetapi, agar desain situs Sekolah dasar menajadi rapi. Saya harus menghubungkan file HTML dan CCS dengan
memasukkan code link ccs dibawah ini ke dalam script HTML:
<link rel="stylesheet" href="sdinpres.css" type="text/css" media="screen" />
10. Maka hasilnya akan menajadi seperti berikut:
11. Maka dengan cara yang sama, saya membuat sript VISI & MISI, dan PENDIDIK.
Lalu saya hubungkan dengan HTML ini. Dan jadilah SITUS WEB SEKOLAH DASAR.

TUGAS DTK Laporan

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

TUGAS DTK Laporan

Diunggah oleh

Hak Cipta:

Format Tersedia

LAPORAN PRAKTIKUM

DASAR TEKNIK KOMPUTER

PRODI S1 TEKNIK INFORMATIKA

<a href="pesertaDTK.html">Peserta DTK</a>

1. Pertama-tama saya membuat Folder pada c:\xampp\sd201765001

<html> <div class="art-box-body art-block-

7. Buka NotePad, kemudian mengerik code program.

10. Maka hasilnya akan menajadi seperti berikut:

Anda mungkin juga menyukai