Δημιουργήστε το δικό σας Βιογραφικό
Στις προσωπικές μας ιστοσελίδες συνήθως βάζουμε κάποιον σύνδεσμο με το βιογραφικό μας, σε μορφή εγγράφου Word. Σε αυτό το βοήθημα θα δούμε πως μπορούμε να δημιουργήσουμε μια ιστοσελίδα/βιογραφικό, ωστε να δώσουμε μια πολύ πιο όμορφη εικόνα του βιοφραφικού μας.
Πρώτα από χρειαζόμαστε τον “άδειο” καμβά μας. Δημιουργούμε ένα νέο αρχείο html και γράφουμε τον κώδικα
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Βιογραφική Σελίδα</title>
</head>
<body>
</body>
</html>
Τα στύλ που θα χρησιμοποιήσουμε στην ιστοσελίδα μας θα είναι inline πράγμα που σημαίνει πως δεν θα κάνουμε επισύναψη εξωτερικού αρχείου στύλ, αλλά θα συμπεριληφθεί στον κώδικα μας. Αυτό το κάνουμε βάζοντας στον <head> της σελίδας μας τον εξής κώδικα
<style type="text/css"> </style>
Τώρα θα προσθέσουμε στο το <body> μέρος του κώδικα μας τα εξής:
<div id="wrapper">
<div id="header">
<div id="title">
<h1>Όνοματεπώνμο</h1>
<small>Accounting Technician <span>|</span> Web Designer</small>
</div>
<dl id="contact">
<dt>Διεύθυνση:</dt>
<dd>123 Οδός, Αθήνα 12345</dd>
<dt>Τηλέφωνο:</dt>
<dd>(+30)210 12 34 567</dd>
<dt>E-mail:</dt><dd><a href="mailto:yourname@yourdomain.com">yourname@yourdomain.com</a></dd>
<dt>Ιστοσελίδα:</dt><dd><a href="http://www.yourdomain.com">www.yourdomain.com</a></dd>
<dt class="no-print">Φωτογραφία:</dt>
<dd class="no-print"><a rel="lightbox" href="assets/img/photo.jpg" title="Glenn McKeown" >φωτογραφία</a></dd>
</dl>
<big>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque adipiscing facilisis suscipit. Duis lectus purus, rhoncus at euismod ac, tristique eget felis. Integer dictum, nisl eget pretium consequat, quam enim scelerisque elit, ac dictum nisl dolor id dui. Nullam eu lacus nisl. "</big>
</div>
<div id="content">
<div class="row">
<div class="col-mid">
<h2>Εργασία</h2>
<p class="date">Νοε 2004 - Σήμερα</p>
<h3>Roads Service Management Accounts</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed sapien quis elit pretium ornare. Donec augue risus, pellentesque eget hendrerit id, ultricies nec erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="date">Ιουλ 2001 - Νοε 2004</p>
<h3>Senior Web Designer</h3>
<p>This is an example of how a paragraph might look with a few hyperlinks thrown in. You may to link to your <a href="#">portfolio site</a>, your <a href="#">blog</a>, a previous employer or <a href="#">something else</a>. Be sure to keep it relevant and within the scope of the job you are applying for.</p>
<p class="date">Δεκ 1999 - Ιουλ 2001</p>
<h3>Circus Performer</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed sapien quis elit pretium ornare. Donec augue risus, pellentesque eget hendrerit id, ultricies nec erat.</p>
</div>
<div class="col-min">
<h2>Εκπαίδευση</h2>
<p class="date">2006 - 2008</p>
<h3>Belfast Institute of Further & Higher Education</h3>
<p>Institute of Accounting Technicians in Ireland – with Distinction.</p>
<p class="date">1993 - 2000</p>
<h3>Ballymena Academy</h3>
<p><strong>A-Levels:</strong> Economics, Computing<br />
<strong>GCSE:</strong> Biology, Business Studies, Information , English, Maths, Geography, Physics, Media Studies, Spanish</p>
</div>
</div>
<div class="row">
<div class="col-min">
<h2>Συστάσεις</h2>
<h3>Current Employer</h3>
<p>Lorem ipsum<br />
Management Accounts<br />
Lorem ipsum <br />
Management Accounts<br />
</p>
<h3>Previous Employer</h3>
<p>Lorem ipsum<br />
Management Accounts<br />
Lorem ipsum </p>
</div>
<div class="col-min">
<h2>Σεμινάρια</h2>
<ul class="spaced">
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
</ul>
</div>
<div class="col-min">
<h2>Εξειδίκευση</h2>
<h3>Λογισμικό</h3>
<ul>
<li>MS Office</li>
<li>Dreamweaver</li>
<li>Photoshop</li>
</ul>
<h3>Γλώσσες Προγραμματισμού</h3>
<ul>
<li>HTML / CSS</li>
<li>PHP</li>
<li>Javascript</li>
<li>Web Standards</li>
</ul>
<h3>Επιπλέον Ειδικέυσεις</h3>
<ul>
<li>Communnication skills</li>
<li>Project management</li>
<li>Presentation skills</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-max">
<h2>Επιπλέον Πληροφορίες</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque adipiscing facilisis suscipit. Duis lectus purus, rhoncus at euismod ac, tristique eget felis. Integer dictum, nisl eget pretium consequat, quam enim scelerisque elit, ac dictum nisl dolor id dui. Nullam eu lacus nisl. </p>
</div>
</div>
</div>
<div id="footer">
<p> </p>
</div></div>
Τέλος για να δώσουμε την τελική μορφή του βογραφικού μας θα γράψουμε τον εξής κώδικα στο <style> μέρος του εγγράφου μας:
html {
background:url(img/bg.jpg) fixed repeat #777;
}
#wrapper {
background-color:#fff;
margin:50px auto;
overflow:hidden;
padding:0;
width:903px;
}
#header {
background:url(img/bg-header.jpg) top left no-repeat;
float:left;
padding:40px 40px 0 40px;
overflow:hidden;
width:823px;
}
#title {
float:left;
}
#content {
background:url(img/bg-content.jpg) top left repeat-y;
float:left;
padding:0 30px;
width:843px;
}
#footer {
background:url(img/bg-footer.jpg) bottom left no-repeat;
float:left;
padding:0 30px;
width:843px;
}
.row {
float:left;
margin:20px 0 0 0;
width:843px;
}
.col-min {
float:left;
margin:0 10px;
width:260px;
}
.col-mid {
float:left;
margin:0 10px;
width:540px;
}
.col-max {
float:left;
margin:0 10px;
width:820px;
}
body {
color:#333;
font-family: Tahoma, Verdana, Arial, sans-serif;
font-size:14px;
font-weight:normal;
line-height:20px;
}
h1, h2, h3, h4, h5, h6 {
font-weight: bold;
}
h1 {
color:#333;
font-size:48px;
line-height:48px;
}
h2 {
color:#5274b7;
font-size:28px;
line-height:28px;
padding:0 0 10px 0;
}
h3 {
color:#333;
font-size:16px;
line-height:20px;
padding:0 0 5px 0;
}
p {
padding:0 0 20px 0;
}
a {
color:#5274b7;
}
a:link {
text-decoration:underline;
}
a:visited {
text-decoration:underline;
}
a:hover {
text-decoration:none;
}
a:active {
text-decoration:none;
}
a:focus {
outline:none;
}
b, strong {
font-weight:bold;
}
i, em {
font-style:italic;
}
small {
font-size:13px;
}
small span {
color:#5274b7;
}
big {
clear:both;
color:#888;
float:left;
font-size:16px;
font-style:italic;
letter-spacing:1px;
line-height:22px;
padding:30px 0 10px 0;
width:100%;
}
ul {
padding:0 0 20px 0;
}
ul li {
line-height:20px;
padding:0;
list-style:none outside none;
}
.spaced li {
line-height:20px;
list-style:inside square;
padding:0 0 20px 0;
}
#contact {
float:right;
padding-top:10px;
width:300px;
}
#contact dt {
color:#888;
float:left;
font-style:italic;
padding-right:10px;
text-align:right;
width:60px;
}
#contact dd {
float:left;
width:230px;
margin-right:-40px;
}
.date {
color:#888;
padding:0;
}
Τελικό Αποτέλεσμα
