Pada akhir semester 2 saya mendapatkan tugas membuat website personal (pribadi)..Apakah website personal itu..?
Website Personal merupakan website yang dirancang untuk memberikan informasi tentang seseorang dengan segala aktivitas dan pemikirannya.
Menu website yang saya buat terdiri dari :
1. Halaman depan: Berisi tentang website saya dan ucapan selamat datang bagi pengunjung.
2. Tentang saya: di sini saya menjelaskan diri saya seperti biodata.
3. Kuliah Ku: pada menu ini saya mengisinya dengan materi-materi kuliah saya.
4. SEO: Menu ini mengupas tentang SEO (Search Engine Optimization) dan Backlink.
Itu saja untuk lebih jelasnya bisa langsung mengunjungi http://www.dirongeblog.webuda.com :
Dalam membuat website ini Saya mengunakan HTML5 dan di bawah ini kode CSSnya:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
:focus {
outline: 0;
}
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
header, footer, aside, nav, article, section {
display: block;
margin: 0;
padding: 0;
}
.clear:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
body {
background: #F0FFFF;
border: none;
color: #333;
margin: 0 auto;
font: 14px/24px Helvetica, Arial, sans-serif;
width: 960px;
}
h1 {
font: normal bold 34px/50px Arial, Helvetica, sans-serif;
padding-top: 30px;
}
h2 {
font-size: 28px;
line-height: 44px;
padding: 22px 0;
}
h3 {
font-size: 18px;
line-height: 22px;
padding: 11px 0;
}
p {
font-weight: normal;
padding-bottom: 22px;
}
a {
color: #CC6600;
text-decoration: none;
}
a:visited {
color: #CC6600;
outline: none;
text-decoration: none;
}
a:hover {
color: #FF9900;
text-decoration: underline;
}
a:active {
color: #CC6600;
outline: none;
text-decoration: none;
}
a:focus {
outline: 1px dotted;
}
#mast h1 {
padding: 30px 0 20px 40px;
}
#trans-nav {
list-style-type: none;
height: 40px;
padding: 0;
margin-left: 20px;
margin-top: 80px;
}
nav#global {
padding: 10px 0;
position: absolute;
left: 0;
width: 100%;
background-color: #333;
}
nav#global ul {
margin: 0 auto;
width: 960px;
border: none;
}
nav#global ul li {
display: inline;
list-style: none;
padding-left: 40px;
}
nav#global ul li a {
color: #777;
background-color: #222;
border: 2px solid #222;
font: normal bold 14px/44px Arial, Helvetica, sans-serif;
padding: 10px;
margin-right: 40px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
text-align: center;
}
nav#global ul li a:hover, nav#global ul li a:focus {
background-color: #111;
border: 2px solid #444;
color: #FF9900;
text-decoration: none;
}
nav#global ul li a.selected {
color: #fff;
}
nav#global ul li a.selected:hover {
color: #FF9900;
}
#intro {
background-color: #ccc;
margin-top: 100px;
padding: 40px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
#intro header h2 {
font-weight: normal;
line-height: 30px;
padding: 0 0 15px 0;
width: 370px;
}
#intro p {
width: 370px;
}
#intro a {
color: #fff;
background-color: #333;
font: normal bold 14px/44px Arial, Helvetica, sans-serif;
padding: 10px;
margin-right: 40px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
text-align: center;
}
#intro a:hover {
color: #FF9900;
background-color: #222;
text-decoration: none;
}
#intro #photo {
background-color: #fff;
float: right;
margin-top: -170px;
-moz-box-shadow: 0 1px 10px #333;
-webkit-box-shadow: 0 1px 10px #333;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
width: 400px;
height: 300px;
}
#photo div {
background-color: #333;
margin: 10px auto 0 auto;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
width: 380px;
height: 260px;
text-align: center;
}
#photo div h3 {
color: #fff;
font-size: 25px;
line-height: 25px;
padding: 115px 0 0 0;
}
div#main {
background: url(../images/main_bkgd.png) repeat-y top right;
border: none;
}
#main #articles {
float: left;
margin-left: 40px;
width: 600px;
border: none;
}
article {
border-bottom: 1px dotted #aaa;
padding: 15px 0;
}
article:last-child {
border-bottom: none;
}
aside {
float: right;
margin-top: 40px;
margin-right: 40px;
}
aside section {
background-color: #F5F5F5;
margin-bottom: 30px;
padding: 20px 40px 20px 20px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
aside h3 {
padding: 0 0 11px 0;
}
nav#categories ul li, nav#archives ul li {
list-style: none;
margin: 5px 0;
}
footer {
position: absolute;
left: 0;
width: 100%;
background-color: #333;
}
footer div {
margin: 0 auto;
padding: 40px 0 20px 40px;
width: 920px;
border: none;
}
footer div section {
color: #777;
float: left;
margin-right: 25px;
width: 230px;
border: none;
}
footer div section h3 {
color: #fff;
}
nav#blogRoll ul li, nav#siteMap ul li {
color: #777;
list-style: disc;
margin-left: 15px;
}
footer #about {
margin-right: 60px;
width: 330px;
}
#Dropdownbox {
width: 875px;
border-radius:6px;
float: left;
margin: 0;
padding: 0;
}
#DropdownMenu {
background:#ff6803;
border-radius:6px;
width: 880px;
height: 35px;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
color:#FFFFFF;
font-weight: bold;
margin-bottom: 30px;
padding: 2px;
}
Tuliskan kode HTML di bawah ini.
<!DOCTYPE html>
<html>
<head>
<link href="http://www.rowang.com/link.jpg" rel="shortcut icon">
<title>DIROngeBLOG-Halaman Depan</title>
<link rel="stylesheet" href="stylesheets/default.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="javascripts/behavior.js"></script>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header id="mast">
<h1>DIROngeBLOG <a href="https://twitter.com/sastro_kolot" target="_blank"><img src="twit.jpg" width="50" height="50"></a><a href="https://www.facebook.com/oowdiro" target="_blank"><img src="fb.png" width="50" height="50"></a></h1>
</header>
<nav id="global">
<ul>
<li><a class="selected" href="index.html">Halaman Depan</a></li>
<li><a href="Tentang Saya.html">Tentang Saya</a></li>
<li><a href="Kuliah Ku.html">Kuliah Ku</a></li>
<li><a href="SEO.html">SEO</a></li>
</ul>
</nav>
<section id="intro">
<header>
<h2>Apakah Anda Mengenal Saya.?</h2>
</header>
<p>Terima kasih anda telah berkunjung di website saya (www.dirngeblog.webuda.com). Website ini saya </p>
<a href="readmore.html">Baca Lagi!</a>
<div id="photo">
<div>
<img src="jas.jpg" width="100%" height="100%">
</div>
</div>
</section>
<div id="main" class="clear">
<section id="articles">
<article class="blogPost">
<header>
<h2>Sigodek-Godek dan Situntel-Tuntel</h2>
<p>Posting pada<time pubdate datetime="2013-02-10">juni 2013</time> by diro sastro</p>
</header>
<p>Ini adalah sebuah cerita rakyat dari sebuah desa yang berada dilombok,NTB. Pada jaman dahulu disuatu desa dekat dengan pengunungan rinjani, tedapat dua sahabat yang berbeda jenis tapi persahabatan mereka akrab sekali. Boleh dikatakan tidak pernah terjadi pertengkaran diantara mereka. Karena situntl selalu mengalah pada Sigodek yang selalu menang sendiri </p>
<a href="godek.html">Baca Lagi!</a>
</article>
<article class="blogPost">
<header>
</section>
<aside>
<section>
<header>
<h3>kategori</h3>
</header>
<nav id="categories">
<ul>
<li><a href="pweb.html">Pemrograman web</a></li>
<li><a href="alpro.html">Algoritma Pemrograman</a></li>
<li><a href="pti">Pengantar Teknologi</a></li>
</ul>
</nav>
</section>
</aside>
</div>
<footer>
<div class="clear">
<section>
<div>
<h3 align="center">copyright (c) MR D</h3>
</footer>
</body>
</html>
kalau sudah ini gampang kok tinggal kita copas aja kode htmlnya dan dikembangkan sendiri ya :)
bila kurang jelas langsung saja bekunjung ke webnya dan hubunggi saya lewat fb/twitter minta filenya secara keseluruhan..
Oke itu saja semoga ada mamfaatnya bagi kita semua...
Posting Komentar