LAPORAN PEMBUATAN WEBSITE DEVELOPER 1. HOMEPAGE (HOME) HTML: <html> <head> <title> TIK Web Developer</title> <link rel="stylesheet" href="index.css" type="text/css"> <link href="favicon.ico" rel='shortcut ICON'/> </head> <body background="red_pattern-t2.jpg"> <div id="wrap"> <div id="main"> <div id="head"> <ul class="navbar"> <li><a href="index.html">home</a></li> <li><a href="paketweb.html">paket WEB</a></li> <li><a href="portofolio.html">portofolio</a></li> <li><a href="kontak.html">kontak</a></li> <li><a href="galeri.html">galeri</a></li> </ul> <h1 class="title"> TIK WEB DEVELOPER</h1> <div id="menu"><br> <ul class="navbar"> <li><a href="kontak.html">kontak</a></li> <li><a href="paketweb.html">pesan WEB</a></li> <li><a href="galeri.html">video TUTORIAL CSS</a></li> </ul> <div id="content"> <h2> Selamat Datang di TIK Web Developer</h2> <p> TIK Web Developer adalah tim pengembang web berbasis teknologi dari Universitas Brawijaya, Malang Indonesia. Kata "TIK" merupakan makna ambigu singkatan dari Teknologi Informasi dan Komputer.</p> <p>kami menyediakan layanan <strong>web design</strong>, <strong>web development</strong>, <strong>hosting</strong>, dan <strong>registrasi domain</strong> untuk website Anda. Tim kami akan membantu mengembangkan web yang Anda inginkan, sampai web tersebut Online dan dapat diakses oleh pengunjung.</p> Kami memberi jaminan pengerjaan website Anda tepat waktu. Motivasi kami adalah membuat website yang simple, elegan, powerful, reliable, berpotensi memiliki banyak pengunjung, dan sesuai dengan keinginan dan kebutuhan Anda.</p> Salam. <strong>tik Web Developer</strong> </p>
</p> <p>(tugas Desain Web Pendidikan Vokasi TIK Universitas Brawijaya tahun 2014)</p> <p>(muhammad Rifqy Setyanto 133140714111030)</p> <div id="kolom3"> <div id="footer"><marquee> copyright 2013 ©: TIK Web Developer</marquee> </body> </html> CSS: body{ font : 70%/1.4em verdana, san-serif; color : #00F background : #ccc; a: link, a:visited, a:active{ color: #00F a:hover{ text-decoration: none; #wrap{ width:760px; margin: 0 auto; #main{ background : #fff; margin: 0; overflow:hidden; #head{ padding: 10px 5px 17px 5px; background: url("banner.jpg") no-repeat; background-position: 50% 100%; height: 140px; #head.navbar{ padding:0; #head.navbar li{ display:inline;
#head.navbar li a{ padding: 0 10px; font-weight: bold; font-size: 11px; color:#ccc; #head h1.title{ color:#b22222; font-size:30px; margin:-70; padding: 125px 10px 0 0; #content{ float:left; width:550px; padding:0 20px 20px 20px; background-position: 98.5% 0; #menu{ width:150px; float:left; #footer{ clean: both; texxt-align:right; background:#ddd; padding : 10px; font-size: 8px; color: #333; SCREENSHOT:
2. HALAMAN 2 (PAKET WEB) HTML: <html> <head> <title>tik Web Developer</title> <link rel="stylesheet" href="paketweb.css" type="text/css"> <link href="favicon.ico" rel='shortcut ICON'/> </head> <body background="red_pattern-t2.jpg"> <div id="wrap"> <div id="main"> <div id="head"> <ul class="navbar"> <li><a href="index.html">home</a></li> <li><a href="paketweb.html">paket WEB</a></li> <li><a href="portofolio.html">portofolio</a></li> <li><a href="kontak.html">kontak</a></li> <li><a href="galeri.html">galeri</a></li> </ul> <h1 class="title"> TIK WEB DEVELOPER</h1> <div id="content"> <h2> Paket Web </h2> <div id="content2"> <h2> Paket Pembuatan/Pengembangan Website</h2> <p> Dalam proses desain dan pengembangan website langkah pertama harus dilakukan adalah menentukan kebutuhan karena tujuan pengembangan website bisa berbeda-beda seperti untuk profil perusahaan, e-commerce atau aplikasi-aplikasi berbasis web. Anda bisa menuliskan daftar kebutuhan berikut dengan fitur-fitur yang dinginkan. Setelah menentukan kebutuhan selanjutnya kami memberikan pilihan yang mudah untuk mewujudkan website yang Anda inginkan, kami menempatkan kreativitas, orisinalitas dan keahlian untuk mengembangkan website dengan engine CMS yang berbasis WordPress atau Magneto (e-commerce). Kami memberikan layanan pembuatan Website yang mudah untuk Anda! </p> <p><img src="proses_pembuatan_website.jpg" height="250" width="500"></p> <p> <strong>analisa kebutuhan</strong>, Tulis kebutuhan Anda dan fitur apa yang Anda butuhkan dan diskusikan dengan kami.</p> <strong>pemilihan Template dan Domain</strong>, Anda bisa memilih ratusan template website premium dari situs template market place rekanan kami seperti themeforest.net, templatemonster.com, plazathemes.com dan tentukan domain yang Anda inginkan seperti contoh.com, contoh.org, contoh.co.id.</p> <strong>pengembangan</strong>, Proses desain dan penyesuaian website sesuai dengan keingian Anda.</p> <strong>bug Fixing</strong>, Tidak ada yang sempurna disinial proses dimana testing keseluruhan fitur dilakukan jika masih ditemukan error maka kami akan memperbaikinya.</p> <strong>go Live</strong>, publikasikan situs Anda kepada dunia.</p>
<strong>kami memonitor website</strong> Anda untuk memastikan layanan Anda tidak memiliki gangguan dan kami akan memberitahukan Anda jika website butuh dioptimasi agar layanan bisa menjadi lebih baik.</p> Kami ingin membuat proses desain dan pengembangan website profesional yang mudah dan tidak menyulitkan biarkan kami membuat website impian Anda yang akan bekerja untuk Anda dan kami memiliki paket pengembangan website yang mencakup banyak hal! Anda bisa memilih paket kami sesuai dengan kebutuhan.</p> <p><img src="untitled.png"</p> <div id="footer"><marquee> copyright 2013 ©: TIK Web Developer</marquee> </body> </html> CSS: body{ font:70%/1.4em Verdana, Geneva, sans-serif; color:#333; background:#ccc; background-image:url(red_pattern-t2.jpg) a:link, a:visited, a:active{ color: #333; text-decoration:none; a:hover{ text-decoration:none; #wrap{ #main{ width:760px; margin:0px auto; background:#fff; overflow: hidden; #head{ padding: 10px 5px 17px 5px; background: url("banner.jpg") no-repeat; background-position: 50% 100%;
height: 140px; #head.navbar{ padding:0; #head.navbar li{ display:inline; #head.navbar li a{ padding:0px 10px; font-weight:bold; font-size:11px; color:#fff; #head h1.title{ color:#b22222; font-size:30px; margin:-70; padding: 125px 10px 0 0; #content{ width:710px; padding: 30px 20px 20px 20px; background-position: 98.5% 0; #content2{ text-align:left; #footer{ clear:both; text-align:right; background: #ddd; padding:10px; font-size:8px; color:#333;
SCREENSHOT:
3. HALAMAN 3 (PORTOFOLIO) HTML: <html> <head> <title>tik Web Developer</title> <link rel="stylesheet" href="portofolio.css" type="text/css"> <link href="favicon.ico" rel='shortcut ICON'/> </head> <body> <div id="wrap"> <div id="main"> <div id="head"> <ul class="navbar"> <li><a href="index.html">home</a></li> <li><a href="paketweb.html">paket WEB</a></li> <li><a href="portofolio.html">portofolio</a></li> <li><a href="kontak.html">kontak</a></li> <li><a href="galeri.html">galeri</a></li> </ul> <h1 class="title"> TIK WEB DEVELOPER</h1> <div id="content"> <h2> Portofolio</h2> <div id="content2"> <p> Beberapa Contoh Website Internet yang telah memanfaatkan jasa kami</p> <p><img src="untitled1.png"</p> <div id="footer"><marquee> copyright 2013 ©: TIK Web Developer</marquee> </body> </html> CSS: body{ font:70%/1.4em Verdana, Geneva, sans-serif; color:#333; background:#ccc; background-image:url(red_pattern-t2.jpg) a:link, a:visited, a:active{ color: #333; text-decoration:none; a:hover{ text-decoration:none;
#wrap{ #main{ width:760px; margin:0px auto; background:#fff; overflow: hidden; #head{ padding: 10px 5px 17px 5px; background: url("banner.jpg") no-repeat; background-position: 50% 100%; height: 140px; #head.navbar{ padding:0; #head.navbar li{ display:inline; #head.navbar li a{ padding:0px 10px; font-weight:bold; font-size:11px; color:#fff; #head h1.title{ color:#b22222; font-size:30px; margin:-70; padding: 125px 10px 0 0; #content{ width:710px; padding: 30px 20px 20px 20px; background-position: 98.5% 0;
#content2{ text-align:left; #footer{ clear:both; text-align:right; background: #ddd; padding:10px; font-size:8px; color:#333; SCREENSHOT:
4.HALAMAN 4 (KONTAK) HTML: <html> <head> <title>tik Web Developer</title> <link rel="stylesheet" href="kontak.css" type="text/css"> <link href="favicon.ico" rel='shortcut ICON'/> </head> <body> <div id="wrap"> <div id="main"> <div id="head"> <ul class="navbar"> <li><a href="index.html">home</a></li> <li><a href="paketweb.html">paket WEB</a></li> <li><a href="portofolio.html">portofolio</a></li> <li><a href="kontak.html">kontak</a></li> <li><a href="galeri.html">galeri</a></li> </ul> <h1 class="title"> TIK WEB DEVELOPER</h1> <div id="content"> <h2> Kontak</h2> <div id="content2"> <p>(0341)-333222</p> <p>089680712345</p> <p>tik Vokasi Universitas Brawijaya</p> <p>jl. Veteran</p> <div id="footer"><marquee> copyright 2013 ©: TIK Web Developer</marquee> </body> </html> CSS: body{ font:70%/1.4em Verdana, Geneva, sans-serif; color:#333; background:#ccc; background-image:url(red_pattern-t2.jpg) a:link, a:visited, a:active{ color: #333; text-decoration:none;
a:hover{ text-decoration:none; #wrap{ #main{ width:760px; margin:0px auto; background:#fff; overflow: hidden; #head{ padding: 10px 5px 17px 5px; background: url("banner.jpg") no-repeat; background-position: 50% 100%; height: 140px; #head.navbar{ padding:0; #head.navbar li{ display:inline; #head.navbar li a{ padding:0px 10px; font-weight:bold; font-size:11px; color:#fff; #head h1.title{ color:#b22222; font-size:30px; margin:-70; padding: 125px 10px 0 0; #content{ width:710px; padding: 30px 20px 20px 20px;
background-position: 98.5% 0; #content2{ text-align:left; #footer{ clear:both; text-align:right; background: #ddd; padding:10px; font-size:8px; color:#333; SCREENSHOT:
5.HALAMAN 5 (GALERI) HTML: <html> <head> <title>tik Web Developer</title> <link rel="stylesheet" href="galeri.css" type="text/css"> <script src="scripts/swfobject_modified.js" type="text/javascript"></script> <link href="favicon.ico" rel='shortcut ICON'/> </head> <body> <div id="wrap"> <div id="main"> <div id="head"> <ul class="navbar"> <li><a href="index.html">home</a></li> <li><a href="paketweb.html">paket WEB</a></li> <li><a href="portofolio.html">portofolio</a></li> <li><a href="kontak.html">kontak</a></li> <li><a href="galeri.html">galeri</a></li></ul> <h1 class="title">tik Web Developer</h1> <div id="flash"> <h2>capture</h2> <p><img src="721b66e08a1607bf6e064028f2679808.jpg" height="480" width="230"></p> <p><img src="css-design-gallery-screenshot.jpg" height="450" width="230"></p> <div id="foto"> <h2>foto</h2> <p><img src="1.jpg" height="400" width="300"></p> <p><img src="browser11.jpg" height="405" width="300"></p> <p><img src="3.jpg" height="400" width="300"></p> <div id="video"> <h2>video</h2> <P> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="230" height="230" id="flvplayer"> <param name="movie" value="flvplayer_progressive.swf" /> <param name="quality" value="high"> <param name="wmode" value="opaque"> <param name="scale" value="noscale"> <param name="salign" value="lt"> <param name="flashvars" value="&mm_componentversion=1&skinname=clear_skin_1&streamname=video1&a mp;autoplay=false&autorewind=false" /> <param name="swfversion" value="8,0,0,0"> <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don t want users to see the prompt. -->
<param name="expressinstall" value="scripts/expressinstall.swf"> <!-- Next object tag is for non-ie browsers. So hide it from IE using IECC. --> <!--[if!ie]>--> <object type="application/x-shockwave-flash" data="flvplayer_progressive.swf" width="230" height="230"> <!--<![endif]--> <param name="quality" value="high"> <param name="wmode" value="opaque"> <param name="scale" value="noscale"> <param name="salign" value="lt"> <param name="flashvars" value="&mm_componentversion=1&skinname=clear_skin_1&streamname=video1&a mp;autoplay=false&autorewind=false" /> <param name="swfversion" value="8,0,0,0"> <param name="expressinstall" value="scripts/expressinstall.swf"> <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. --> <div> <h4>content on this page requires a newer version of Adobe Flash Player.</h4> <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="get Adobe Flash player" /></a></p> <!--[if!ie]>--> </object> <!--<![endif]--> </object></p> <p> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="230" height="230" id="flvplayer1"> <param name="movie" value="flvplayer_progressive.swf" /> <param name="quality" value="high"> <param name="wmode" value="opaque"> <param name="scale" value="noscale"> <param name="salign" value="lt"> <param name="flashvars" value="&mm_componentversion=1&skinname=clear_skin_1&streamname=video2&a mp;autoplay=false&autorewind=false" /> <param name="swfversion" value="8,0,0,0"> <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don t want users to see the prompt. --> <param name="expressinstall" value="scripts/expressinstall.swf"> <!-- Next object tag is for non-ie browsers. So hide it from IE using IECC. --> <!--[if!ie]>--> <object type="application/x-shockwave-flash" data="flvplayer_progressive.swf" width="230" height="230"> <!--<![endif]--> <param name="quality" value="high"> <param name="wmode" value="opaque"> <param name="scale" value="noscale"> <param name="salign" value="lt">
<param name="flashvars" value="&mm_componentversion=1&skinname=clear_skin_1&streamname=video2&a mp;autoplay=false&autorewind=false" /> <param name="swfversion" value="8,0,0,0"> <param name="expressinstall" value="scripts/expressinstall.swf"> <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. --> <div> <h4>content on this page requires a newer version of Adobe Flash Player.</h4> <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="get Adobe Flash player" /></a></p> <!--[if!ie]>--> </object> <!--<![endif]--> </object></p> <div id="footer"><marquee> copyright 2013 ©: TIK Web Developer</marquee> <script type="text/javascript"> <!-- swfobject.registerobject("flvplayer"); swfobject.registerobject("flvplayer1"); //--> </script> </body> </html> CSS: body{ font:70%/1.4em Verdana, Geneva, sans-serif; color:#333; background:#ccc; a:link, a:visited, a:active{ color:#333; text-decoration:none; a:hover{ text-decoration:none; #wrap{ width:760px; margin:0px auto;
#main{ background:#fff; overflow: hidden; #head{ padding: 10px 5px 17px 5px; background: url("banner.jpg") no-repeat; background-position: 50% 100%; height: 140px; #head.navbar{ padding:0; #head.navbar li{ display:inline; #head.navbar li a{ padding:0px 10px; font-weight:bold; font-size:11px; color: #FFF; #head h1.title{ color:#b22222; font-size:30px; margin:-70; padding: 125px 10px 0 0; #foto{ float:left; width:300px; #flash{ width:230px; float:left;
#video{ width:230px; float:left; #footer{ clear:both; text-align:right; background: #ddd; padding:10px; font-size:8px; color:#333; SCREENSHOT: