dew's website: Create Your Imagination On Your Website

Tuangkan imajinasimu dalam scriptmu.

Hallo gengs..

Kali ini saya akan memberikan contoh bagaimana membuat website pribadi.

Saya akan menerangkan tentang apa itu Website Pribadi.

Apa itu Website Pribadi?

Website pribadi merupakan website yang dimiliki oleh perorangan, ini bisa berisi tentang semua hal berkaitan dengan kehidupan seseorang.

Yuk mari sekarang kita membuat website pribadi..

Check this out...

Pertama-tama kita buat dahulu halaman utama dengan nama index.php.

Mengapa menggunakan nama index.php??

Karena kita akan meng-upload website yang kita buat nanti dan halaman pertama yang terbuka saat web diakses adalah halaman dengan nama index.

Berikut halaman script untuk membuat halaman utama website.

<html>

<head>

</head>

var m_names = new Array("Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember");

var d_names = new Array("Minggu", "Senin", "Selasa", "Rabu", "Kamis", "Jumat", "Sabtu");

var currentTime = new Date()

var day = currentTime.getDay()

var month = currentTime.getMonth() + 1

var date = currentTime.getDate()

var year = currentTime.getFullYear()

document.write( d_names[day] + ", " + date + " " + m_names[month] + " " + year + ", ")

var currentTime = new Date()

var hours = currentTime.getHours()

var minutes = currentTime.getMinutes()

if (minutes < 10){

minutes = "0" + minutes

}

document.write(hours + ":" + minutes + " ")

</script>

</div>

<ul>

<li><a href="#">About</a>

<ul>

<li><a href="aboutme.php">About Me</a></li>

<li><a href="aboutuniversity.php">My University</a>

<ul>

<li><a href="aboutti.php">Informatics Engineering</a></li>

<li><a href="aboutte.php">Electrical Engineering</a></li>

</ul>

</li>

</ul>

</li>

<li><a href="article.php">Article</a></li>

<li><a href="galllery.php">Gallery</a></li>

</ul>

</div>

</div>

<h1 style="text-decoration: blink; color: blue; font-family:magneto; font-size:58px "> Welcome to My Website</h1>

</marquee>

</div>

</div>

</body>

</html>

Dari script diatas akan menghasilkan output berupa header dengan komponen judul website, tanggal dan jam mengikuti tanggal dan jam pada komputer. Pada bagian menu terdapat beberapa menu, yaitu home, about, article dan gallery. Pada bagian konten terdapat slider gambar dan ucapan sambutan kepada pengunjung. Pada bagian footer terdapat copyright dari website pribadi.

Berikut tampilan halaman utama dari website.

Next..
Halaman berikutnya adalah halaman about. Menu about memiliki beberapa submenu about me, about university, about informatics engineering dan about electrical engineering.
Berikut script halaman about me (aboutme.php).

Dari script diatas akan menghasilkan informasi seputar data pribadi pemilik website.

Tampilan halaman about me yang dapat dilihat pada website dibawah ini.

Next..

Halaman selanjutnya adalah halaman about university. Halaman about university berisi tentang informasi seputar kampus dimana pemilik website menjalani studi.

Berikut script halaman about university (aboutuniversity.php).

Dari script diatas akan menghasilkan tampilan halaman about university yang dapat dilihat pada website dibawah ini.

Next..

Halaman selanjutnya adalah halaman about informatics engineering. Halaman about informatics engineering berisi tentang informasi seputar teknik informatika yang ada di kampus dimana pemilik website menjalani studi.

Berikut script halaman about informatics engineering (aboutti.php).

Dari script diatas akan menghasilkan tampilan halaman about informatics engineering yang dapat dilihat pada website dibawah ini.

Next..

Halaman selanjutnya adalah halaman about electrical engineering. Halaman about electrical engineering berisi tentang informasi seputar teknik elektro yang ada di kampus dimana pemilik website menjalani studi.

Berikut script halaman about electrical engineering (aboutte.php).

Dari script diatas akan menghasilkan tampilan halaman about electrical engineering yang dapat dilihat pada website dibawah ini.

Next..

Halaman selanjutnya adalah halaman article. Halaman article berisi tentang salah satu artikel menyangkut perkembangan dunia IT, selain itu juga terdapat kumpulan link untuk belajar mebuat website. Link tersebut berada pada bagian kanan dari konten dan saat di-klik, maka akan membuka link pada halaman baru.

Berikut script halaman article (article.php).

<html>
<head>
<title>Dewi's Web</title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen">
</head>
<body style="background-image:url(images/bground4.jpg) ;">
<div id="container">
<div id="top_panel4">
<div id="sitetitle"> Dewi's Web </div>
<div id="currentdate">
<script type="text/javascript">
var m_names = new Array("Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember");
var d_names = new Array("Minggu", "Senin", "Selasa", "Rabu", "Kamis", "Jumat", "Sabtu");

var currentTime = new Date()
var day = currentTime.getDay()
var month = currentTime.getMonth() + 1
var date = currentTime.getDate()
var year = currentTime.getFullYear()
document.write( d_names[day] + ", " + date + " " + m_names[month] + " " + year + ", ")
var currentTime = new Date()
var hours = currentTime.getHours()
var minutes = currentTime.getMinutes()
if (minutes < 10){
minutes = "0" + minutes
}
document.write(hours + ":" + minutes + " ")
</script>
</div>
</div>
<div id="menu-wrap">
<ul>
<li><a href="index.php" class="selected">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="aboutme.php">About Me</a></li>
<li><a href="aboutuniversity.php">My University</a>
<ul>
<li><a href="aboutti.php">Informatics Engineering</a></li>
<li><a href="aboutte.php">Electrical Engineering</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="article.php">Article</a></li>
<li><a href="galllery.php">Gallery</a></li>
</ul>
</div>
<div id="content">
<div id="main_leftcol">
<div style="margin-left: 30px; padding: 15px; text-align: justify">
<h2>Researchers at the University of Liverpool have developed a set of algorithms that will help teach computers to process and understand human languages.</h2>
<p>Whilst mastering natural language is easy for humans, it is something that computers have not yet been able to achieve. Humans understand language through a variety of ways for example this might be through looking up it in a dictionary, or by associating it with words in the same sentence in a meaningful way.</p>

<p>The algorithms will enable a computer to act in much the same way as a human would when encountered with an unknown word. When the computer encounters a word it doesn't recognize or understand, the algorithms mean it will look up the word in a dictionary (such as the WordNet), and tries to guess what other words should appear with this unknown word in the text.</p>

<p>It gives the computer a semantic representation for a word that is both consistent with the dictionary as well as with the context in which it appears in the text.</p>

<p>In order to know whether the algorithm has provided the computer with an accurate representation of a word it compares similarity scores produced using the word representations learnt by the computer algorithm against human rated similarities.</p>

<p>Liverpool computer scientist, Dr Danushka Bollegala, said: "Learning accurate word representations is the first step towards teaching languages to computers."</p>

<p>"If we can represent the meaning for a word in a way a computer could understand, then the computer will be able to read texts on behalf of humans and perform potentially useful tasks such as translating a text written in a foreign language, summarising a lengthy article, or find similar other documents from the Internet.</p>

<p>"We are excitingly waiting to see the immense possibilities that will be brought about when such accurate semantic representations are used in various language processing tasks by the computers."</p>

<p>The research was presented at the Association for Advancement of Artificial Intelligence Conference (AAAI-2016) held in Arizona, USA.</p>
</div>
</div>
<div id="main_rightcol">
<div style="margin: 10px 0px 0px 80px">
<h2 style="color: aqua; font-size: 18px">Learn Web</h2>
</div>
<div style="margin: 10px 0px 0px 80px; font-size: 16px;">
<a href="http://www.w3schools.com/html/default.asp" target="blank">HTML Tutorial</a><br><br>
<a href="http://www.w3schools.com/css/default.asp" target="blank">CSS Tutorial</a><br><br>
<a href="http://www.w3schools.com/js/default.asp" target="blank">JS Tutorial</a><br><br>
<a href="http://www.w3schools.com/sql/default.asp" target="blank">SQL Tutorial</a><br><br>
<a href="http://www.w3schools.com/php/default.asp" target="blank">PHP Tutorial</a><br><br>
<a href="http://www.w3schools.com/bootstrap/default.asp" target="blank">Bootstrap Tutorial</a><br><br>
</div>
</div>
</div>
<div id="footer4">
<div class="footer_leftcol">
Copyright @ 2016 <a href="index.php"><strong>Dewi's Web</strong></a> - Created by Dewi Anggraini <br/>
</div>
</div>
</div>
</body>
</html>

Dari script diatas akan menghasilkan tampilan halaman article yang dapat dilihat pada website dibawah ini.

Next..

Halaman selanjutnya setelah halaman about adalah halaman gallery. Halaman gallery berisi kumpulan foto dari pemilik website.

Berikut script halaman gallery (gallery.php).

Dari script diatas akan menghasilkan tampilan halaman gallery yang dapat dilihat pada website dibawah ini.

Ok..

Itu tadi pembahasan tentang pembuatan tampilan website pribadi. Untuk mendukung pembuatan website tersebut agar terlihat lebih menarik dibutuh css. Berikut script css (style.css) untuk membuat tampilan web.

body {
margin: 0;
padding: 0;
line-height: 1.5em;
font-family: Helvetica, Arial, sans-serif;
font-size: 11px;
overflow: auto;
}

a:link, a:visited { color: #FFFFFF; text-decoration: none;}
a:active, a:hover { color: #FF0000;}

p {
margin: 0 0 5px 0;
padding: 0px;
}

h1 {
margin: 0 0 5px 0;
padding: 10px 0 10px 0;
font-size: 24px;
font-weight: bold;
line-height: 28px;
color: darkviolet;
}

h2 {
margin: 0 0 10px 0;
padding: 5px 0;
font-size: 16px;
font-weight: bold;
color: #333333;
}

h3 {
margin: 0 0 5px 0;
padding: 2px 0;
font-size: 12px;
font-weight: bold;
color: #750a20;
}

h4 {
margin: 0 0 5px 0;
padding: 2px 0;
font-size: 16px;
font-weight: bold;
color: #750a20;
}

img
{
-moz-border-radius:5px;
-webkit-border-radius:5px;
}

.updatedtime {
font-size: 10px;
font-weight: bold;
color: #FF0000;
}

#container {
margin: auto;
width: 1000px;
}

#top_panel1 {
float: left;
width: 1000px;
height: 100px;
margin: 0px;
color: grey;
background: url(images/top_panel_background.jpg) no-repeat;
}

#top_panel2 {
float: left;
width: 1000px;
height: 100px;
margin: 0px;
color: grey;
background: url(images/top_panel_background2.jpg) repeat-x;
}

#top_panel3 {
float: left;
width: 1000px;
height: 100px;
margin: 0px;
color: grey;
background: url(images/top_panel_background3.jpg) repeat-x;
}

#top_panel4 {
float: left;
width: 1000px;
height: 100px;
margin: 0px;
color: grey;
background: url(images/top_panel_background4.jpg) repeat-x;
}

#top_panel5 {
float: left;
width: 1000px;
height: 100px;
margin: 0px;
color: grey;
background: url(images/top_panel_background5.jpg) repeat-x;
}

#sitetitle {
float: left;
width: 300px;
margin: 55px 0 0 15px;
padding: 10px 0 5px 0;
font-size: 35px;
font-weight: bold;
color: white;
}

#currentdate {
float: right;
width: 300px;
margin: 70px 15px 0 0;
text-align: right;
font-weight: bold;
font-size: 15px;
color:yellow;
}

/*menu*/
#menu-wrap {
float: left;
background-color: darkorchid;
width: 1000px;
}
#menu-wrap ul {
list-style: none;
margin: 0;
padding: 0;
border-radius: 5px;
}
#menu-wrap li {
float: left;
margin-right: 10px;
position: relative;
border-radius: 5px;
}
#menu-wrap li:last-child {
margin-right: 0;
}
#menu-wrap a {
color: #FFFFFF;
display: block;
padding: 10px 20px;
text-decoration: none;
font-size:20px;
font-family:forte;
}
#menu-wrap li ul {
background-color: darkmagenta;
margin: 20px 0 0;
opacity: 0;
position: absolute;
transition:0.5s;
visibility: hidden;
width: 200px;
border-radius: 5px;
}
#menu-wrap li li {
float: none;
margin: 0;
}
#menu-wrap li:hover > ul{
transition:0.5s;
margin: 0;
visibility: visible;
opacity: 1;
z-index:2;
border-radius: 5px;
}
#menu-wrap li li ul {
box-shadow: -1px 0 0 rgba(255, 255, 255, 0.3);
left: 200px;
margin: 0 0 0 20px;
top: 0;
border-radius: 5px;
}
#menu-wrap ul a:hover {
color: #FFFFFF;
background-color: blueviolet;
border-radius: 5px;
}
#menu-wrap li:hover > a {
color: gold;
background-color: blueviolet;
}
/* end of menu */

/*Gallery*/
.box_galery {
width: 1000px;
margin-left: 147.5px;
margin-top: 50px;
}
.clearboth{clear:both;}
.thumb
{
float: left;
width: 220px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
margin:0px 15px 25px 0px;
padding:3px;
border:solid;
border-color: darkmagenta;
background-color:blueviolet;
}
.thumb:hover
{
background-color:blueviolet;
float:left;
width:220px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
margin:0px 15px 15px 0px;
padding:3px;
border:solid;
border-color: darkmagenta;
-moz-transform:scale(1.4);
-webkit-transform:scale(1.4);
}

.name
{
height:10px;
width:140px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}

/*end of gallery*/

/* content */
#content {
float: left;
width: 1000px;
min-height:535px;
background-color:rgba(250,190,255,0.8);
}

#main_leftcol {
float: left;
width: 635px;
margin-top: 15px;
margin-left: 5px;
}

.leftcol_subcol {
float: left;
width: 600px;
padding: 0 15px 0 0;
margin-right: 15px;
}

#main_rightcol {
float: right;
margin-top: 15px;
width: 350px;
margin-right: 5px;
background: url(images/paper.png) no-repeat;
min-height: 300px;
}

* html #main_rightcol {
margin-left: -15px;
}

/*slider photo*/
#slidercontainer {
position: relative;
overflow: hidden;
background: #000;
}
#slidercontainer {
margin-left: 116px;
width: 768px;
height: 341px;
}

#slider img {
width: 768px;
height: 341px;
float: left;
}

#slider {
position: absolute;
width:3900px;
-webkit-animation-name:slider;
-webkit-animation-duration:15s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count:infinite;
-moz-animation-name:slider;
-moz-animation-duration:15s;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count:infinite;
-o-animation-name:slider;
-o-animation-duration:15s;
-o-animation-timing-function: ease-in-out;
-o-animation-iteration-count:infinite;
animation-name:slider;
animation-duration:15s;
animation-timing-function: ease-in-out;
animation-iteration-count:infinite;
}

@-webkit-keyframes slider {
0% { left: 0; opacity: 0; }
2% { opacity: 1; }
20% { left: 0; opacity: 1; }
21% { opacity: 0; }
24% { opacity: 0; }
25% { left: -768px; opacity: 1; }
45% { left: -768px; opacity: 1; }
46% { opacity: 0; }
48% { opacity: 0; }
50% { left: -1536px; opacity: 1; }
70% { left: -1536px; opacity: 1; }
72% { opacity: 0; }
74% { opacity: 0; }
75% { left: -2304px; opacity: 1; }
95% { left: -2304px; opacity: 1; }
97% { left: -2304px; opacity: 0;}
100% { left: 0; opacity: 0; }
}

@-moz-keyframes slider {
0% { left: 0; opacity: 0; }
2% { opacity: 1; }
20% { left: 0; opacity: 1; }
21% { opacity: 0; }
24% { opacity: 0; }
25% { left: -768px; opacity: 1; }
45% { left: -768px; opacity: 1; }
46% { opacity: 0; }
48% { opacity: 0; }
50% { left: -1536px; opacity: 1; }
70% { left: -1536px; opacity: 1; }
72% { opacity: 0; }
74% { opacity: 0; }
75% { left: -2304px; opacity: 1; }
95% { left: -2304px; opacity: 1; }
97% { left: -2304px; opacity: 0;}
100% { left: 0; opacity: 0; }
}

@-o-keyframes slider {
0% { left: 0; opacity: 0; }
2% { opacity: 1; }
20% { left: 0; opacity: 1; }
21% { opacity: 0; }
24% { opacity: 0; }
25% { left: -768px; opacity: 1; }
45% { left: -768px; opacity: 1; }
46% { opacity: 0; }
48% { opacity: 0; }
50% { left: -1536px; opacity: 1; }
70% { left: -1536px; opacity: 1; }
72% { opacity: 0; }
74% { opacity: 0; }
75% { left: -2304px; opacity: 1; }
95% { left: -2304px; opacity: 1; }
97% { left: -2304px; opacity: 0; }
100% { left: 0; opacity: 0; }
}

@keyframes slider {
0% { left: 0; opacity: 0; }
2% { opacity: 1; }
20% { left: 0; opacity: 1; }
21% { opacity: 0; }
24% { opacity: 0; }
25% { left: -768px; opacity: 1; }
45% { left: -768px; opacity: 1; }
46% { opacity: 0; }
48% { opacity: 0; }
50% { left: -1536px; opacity: 1; }
70% { left: -1536px; opacity: 1; }
72% { opacity: 0; }
74% { opacity: 0; }
75% { left: -2304px; opacity: 1; }
95% { left: -2304px; opacity: 1; }
97% { left: -2304px; opacity: 0; }
100% { left: 0; opacity: 0; }
}
/*end slide photo*/

/* ----- Footer ----- */
#footer1 {
clear: both;
float: left;
padding: 25px;
width: 950px;
color: #FFF;
text-align: left;
background-image:url(images/top_panel_background.jpg);
}

#footer2 {
clear: both;
float: left;
padding: 25px;
width: 950px;
color: #FFF;
text-align: left;
background-image:url(images/top_panel_background2.jpg) ;
}

#footer3 {
clear: both;
float: left;
padding: 25px;
width: 950px;
color: #FFF;
text-align: left;
background-image:url(images/top_panel_background3.jpg) ;
}

#footer4 {
clear: both;
float: left;
padding: 25px;
width: 950px;
color: #FFF;
text-align: left;
background-image:url(images/top_panel_background4.jpg) ;
}

#footer5 {
clear: both;
float: left;
padding: 25px;
width: 950px;
color: #FFF;
text-align: left;
background-image:url(images/top_panel_background5.jpg) ;
}

.footer_leftcol {
float: left;
width: 400px;
padding: 0 0 0 10px;
margin-right: 25px;
}

.footer_rightcol {
float: right;
text-align: right;
width: 435px;
text-align: right;
}

.footer_subcol {
float: left;
width: 120px;
margin-left: 25px;
}

#footer1 #footer2 #footer3 #footer4 #footer5 p{
padding: 0;
margin-bottom: 10px;
text-align: justify;
}

#footer1 #footer2 #footer3 #footer4 #footer5 a{
color: #FFF;
text-decoration: none;
}

#footer1 #footer2 #footer3 #footer4 #footer5 a:hover{
color: #FFF;
text-decoration: underline;
}

/* ----- End of Footer ----- */

Untuk melihat tampilan website keseluruhan silahkan klikdisini.

Selesai sudah pembahasan dalam pembuatan website pribadi.
Sampai ketemu pada pembahasan berikutnya..

Terimakasih J

dew's website

Jumat, 20 Mei 2016

Create Your Imagination On Your Website

Tuangkan imajinasimu dalam scriptmu.

Tidak ada komentar:

Posting Komentar