HTML and CSS ဖြင့် Online Resume ရေးခြင်း
မင်္ဂလာပါ။ ဒီတခေါက် tutorial လေးကတော့ online resume တစောင်ကို html and css ဖြင့်ရေးခြင်း ဖြစ်ပါတယ်။ ကဲ tutorial လေးကို စလိုက်ကြရအောင်ပါ။ ထုံးစံအတိုင်း html ဆိုတော့ သူရဲ့ begin html format လေးကို အရင်ရေး ကြရမှာပေါ့နော်။
<!DOCTYPE HTML>
<html lang=”en-US”>
<head>
<meta charset=”UTF-8″>
<title> Online Resume</title>
<link rel=”stylesheet” type=”text/css” href=”css/reset.css” media=”all” />
<link rel=”stylesheet” type=”text/css” href=”style.css” media=”all” />
</head>
<body>
<div id= “container”>
// continue …
</div><!– end container–>
</body>
</html>
ဒီအထိ ရိုက်ပြီးပြီ ဆိုရင်တော့ ရှေ့ဆက်ပါအုံးမည်။
<h1>Online Resume</h1>
<div id=”content”>
<div id=”left”>
<h2>Someone</h2>
<p>Web Developer</p>
<img src=”images/1.jpg” alt=”"/>
<h3>Contact Information</h3>
<ul id=”address”>
<li><img src=”images/address.png” /> No.21, Than Street, Hlaing, Yangon.</li>
<li><img src=”images/ph.png” /> 09-73100000</li>
<li><img src=”images/email.png” /> someone@gmail.com</li>
<li><img src=”images/web.png” /> http://www.someone.com</li>
</ul>
</div><!– end left–>
<div id=”right”>
<div class=”des”>
<h2>Profile : </h2>
<p>Lorem ipsum dolor sit amet, nescimus de memor euismod tollam impedit mecum loci haec aliquam laetandum prudentia.
Deum me naufragus tabulas rimatur aurum arte spatium recognovisse sum, plenus redire in deinde vero cum obiectum invidunt.
Coniunx minus signo currit itaque completum ad te. </p>
</div><!– end des–>
<div class=”des”>
<h2>Technical Skill : </h2>
<ul id=”skill”>
<li>HTML5</li>
<li>CSS3</li>
<li>jQuery</li>
<li>PHP</li>
<li>Javascript</li>
<li>Wordpress</li>
<li>MySQL</li>
<li>CodeIgniter</li>
<li>Magento</li>
<li>Photoshop</li>
</ul>
</div><!– end des–>
<div class=”des”>
<h2>Experience : </h2>
<p>Lorem ipsum dolor sit amet, nescimus de memor euismod tollam impedit mecum loci haec aliquam laetandum prudentia.
Deum me naufragus tabulas rimatur aurum arte spatium recognovisse sum, plenus redire in deinde vero cum obiectum invidunt.
Coniunx minus signo currit itaque completum ad te. </p>
</div><!– end des–>
<div class=”des”>
<h2>Education : </h2>
<p>2003-2006<br />B.C.Tech Degree<br />University of Computer Studies, Yangon. <br /><br />
2006-2007<br />B.C.Tech(Hons:) Degree<br />University of Computer Studies, Yangon. </p>
</div><!– end des–>
</div><!– end right–>
</div><!– end content–>
<div class=”clear”></div>
<ul id=”social”>
<li><img src=”images/social.png” /></li>
<li><img src=”images/facebook.png” /></li>
<li><img src=”images/dribbble.png” /></li>
<li><img src=”images/linkedin.png” /></li>
<li><img src=”images/flickr.png” /></li>
</ul>
ဒီ code ကတော့ div #container ထဲမှာ div#content and ul #social ဆိုပြီး နှစ်ပိုင်း ခွဲထားပါတယ်။ နောက်ထပ် div #content ထဲမှာမှ div #left and div #right ဆိုပြီး နှစ်ပိုင်း ထပ်ခွဲထားပါတယ်။ ဒီအထိ ဆိုရင်တော့ html အပိုင်းပြီးသွားပါပြီ။ css file ကို ရှေ့ဆက်ကြရအောင်ပါ။
body{
background: url(‘images/bg-background.jpg’) repeat-x;
font-size: 14px;
font-family: georgia;
}
a{
text-decoration: none;
outline: none;
display: block;
}
.clear{
clear: both;
}
#container{
width: 900px;
height: 900px;
margin: 0 auto;
background: #fff;
margin-top: 60px;
margin-bottom: 60px;
padding: 30px;
-webkit-box-shadow: 0 0 2px #333;
-moz-box-shadow: 0 0 2px #333;
-ms-box-shadow: 0 0 2px #333;
box-shadow: 0 0 2px #333;
}
#container h1{
padding: 20px;
text-align: right;
font-size: 28px;
text-transform: uppercase;
border-bottom: 3px solid #333;
}
ဒီအထိကတော့ body ရဲ့ style ကို သတ်မှတ် ပြီး div #container ထဲက h1 ရဲ့ style ကိုသတ်မှတ် ထားခြင်းဖြစ်ပါတယ်။
#content{
width: 900px;
margin-top: 20px;
}
#left{
width: 300px;
float: left;
border-right: 1px dotted #c3c3c3;
height:630px;
}
#left h2{
font-size: 28px;
text-align: left;
padding: 20px 0;
}
#left h3{
font-size: 18px;
font-family: arial;
font-style: oblique;
color: #333;
}
#left img.img{
padding: 7px;
margin: 20px 0;
background: #ccc;
}
#left p{
font-size: 18px;
text-align: left;
font-style: oblique;
color: #333;
}
ul#address li {
font-size: 16px;
display: block;
padding: 10px 0;
font-family: arial;
color: #333;
}
#right{
width: 559px;
float: right;
padding: 20px 0 20px 20px;
}
.des{
margin-bottom: 30px;
}
ul#skill li{
display: inline-block;
padding: 0 20px;
line-height: 24px;
}
#right h2{
font-size: 18px;
font-style: italic;
padding: 0 0 15px 0;
font-family: arial;
}
#right p{
font-family: arial;
text-align: justify;
line-height: 24px;
padding-left: 20px;
}
div # content ထဲမှ div #left and #right ရဲ့ style များကို သတ်မှတ်ထားခြင်း ဖြစ်ပါတယ်။
ul#social{
width: 880px;
margin-top: 20px;
padding: 10px;
border:1px solid #ccc;
}
ul#social li{
display: inline-block;
padding: 10px;
}
ဒီအပိုင်းကတော့ ul#social အပိုင်းရဲ့ style ကိုသတ်မှတ်ထားခြင်း ဖြစ်ပါတယ်။ စမ်းကြည့်ကြပါ။ အားလုံးလည်းအဆင်ပြေမယ်လို့ မျှော်လင့် ပါတယ်။ online resume ကိုသုံးပြီး အလုပ်လျှောက်ချင် သူများလည်း အဆင်ပြေ နိုင်မယ်လို့ မျှော်လင့်ပါတယ်။ source file လေးကိုတော့ ဒီနေရာမှာ download ရယူနိုင်ပါတယ်။
Facebook comments:
2 Responses
Leave a comment
About the Author
Ads
If u r selling urself with this Online Resume, u shouldn’t use “ ”. If it is just for this tutorial, u can.
I meant