در این بخش از آموزش html از تاپ سایت 98 قصد داریم کد یک سایت ساده با html را به شما آموزش دهیم. کد تست شده است. آن را در یک فایل html قرار داده و ذخیره و سپس اجرا نمایید. این کد یک قالب ساده با html,css است.
مشکل فارسی نویسی در سایت
برای مشکل فارسی نویسی در سایت از meta charset استفاده کرده ایم و مقدار آن را utf-8 قرار داده ایم.
برای اطمینان ما چند کلمه فارسی نیز بکار برده ایم.
توضیحات کد سایت با html
حال به توضیحات کد سایت با html می پردازیم.
از متا viewport نیز برای ریسپانسیو کردن استفاده می شود.
در بخش header قسمت بالایی سایت را قرار میدهیم.
منو را با کلاس navbar مشخص کرده ایم.
با کلاس row یک بخش ایجاد کرده ایم که شامل دو قسمت می باشد قسمت side و main . در بخش side نیز می توانیم توضیحاتی در مورد سایت یا تبلیغات محصولات را قرار دهیم.
در بخش main نیز اطلاعات اصلی قرار داده می شود.
بخش footer نیز ، قسمت پایینی و انتهایی سایت می باشد.
مثال
<!DOCTYPE html>
<html lang="en">
<head>
<title>تاپ سایت 98</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
}
.header {
padding: 80px;
text-align: center;
background: #1abc9c;
color: white;
}
.header h1 {
font-size: 40px;
}
.navbar {
overflow: hidden;
background-color: #333;
position: sticky;
position: -webkit-sticky;
top: 0;
}
.navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
.navbar a.right {
float: right;
}
.navbar a:hover {
background-color: #ddd;
color: black;
}
.navbar a.active {
background-color: #666;
color: white;
}
.row {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
}
.side {
-ms-flex: 30%; /* IE10 */
flex: 30%;
background-color: #f1f1f1;
padding: 20px;
}
.main {
-ms-flex: 70%; /* IE10 */
flex: 70%;
background-color: white;
padding: 20px;
}
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
.footer {
padding: 20px;
text-align: center;
background: #ddd;
}
@media screen and (max-width: 700px) {
.row {
flex-direction: column;
}
}
@media screen and (max-width: 400px) {
.navbar a {
float: none;
width: 100%;
}
}
</style>
</head>
<body>
<div class="header">
<h1>تاپ سایت 98</h1>
<p style="font-weight: bold">آموزش رایگان کامپیوتر و برنامه نویسی</p>
</div>
<div class="navbar">
<a href="#" class="active">Home</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#" class="right">Link</a>
</div>
<div class="row">
<div class="side">
<h2>About Me</h2>
<h5>Photo of me:</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text about me in culpa qui officia deserunt mollit anim..</p>
<h3>More Text</h3>
<p>Lorem ipsum dolor sit ame.</p>
<div class="fakeimg" style="height:60px;">Image</div><br>
<div class="fakeimg" style="height:60px;">Image</div><br>
<div class="fakeimg" style="height:60px;">Image</div>
</div>
<div class="main">
<h2>TITLE HEADING</h2>
<h5>Title description, Dec 7, 2017</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
<br>
<h2>TITLE HEADING</h2>
<h5>Title description, Sep 2, 2017</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>
</div>
<div class="footer">
<h2>Footer</h2>
</div>
</body>
</html>
امیدواریم این آموزش و کد سایت ساده html برای شما مفید باشد.
برای مشاهده همه آموزش های HTML و CSS کلیک کنید : آموزش کامل CSS - آموزش کامل HTML
موفق باشید.
