یک قالب سه ستونه با html5
سلام
راستش من هنوز html5 رو درست و حسابی کار نکردم. یه سری کد نوشتم برای یه قالب سه ستونه ی ساده که از سایت w3c گرفتم.
خواستم ببینم این روش روش استانداری هست یا نه؟ یا تگ هایی که استفاده کردم باید چیز دیگه باشن؟
متشکرم.
کد HTML:
<!DOCTYPE html>
<html>
<head>
<title> آموزش ساخت قالب وبلاگ </title>
<meta charset="utf-8">
<style type="text/css">
.kol{
border:1px #000000 solid;
height:500px;
}
#header{
border:1px #000000 solid;
width:1000px;
height:200px;
margin:0 auto;
text-align:center;
background-color:#41e8e6;
}
#nav{
border:1px #000000 solid;
width:1000px;
height:40px;
margin:0 auto;
text-align:center;
background-color:#e416e6;
}
#sidebar1{
border:2px #0ced61 solid;
width:20%;
height:200px;
float:right;
text-align:center;
background-color:#0ec5d0;
}
#main{
border:2px #ed0c61 solid;
width:57%;
height:200px;
float:right;
text-align:center;
background-color:#0ed065;
}
#sidebar2{
border:2px #2925e9 solid;
width:20%;
height:200px;
float:left;
text-align:center;
background-color:#12cfc8;
}
#footer{
border:1px #1fdcda solid;
width:1000px;
height:40px;
margin:0 auto;
text-align:center;
background-color:#cfa512;
}
</style>
</head>
<body>
<div class="kol">
<div id="header">
هدر
</div>
<div id="nav">
منو
</div>
<div id="sidebar1">
راست
</div>
<div id="main">
وسط
</div>
<div id="sidebar2">
چپ
</div>
</div>
<div id="footer">
فوتر
</div>
</body>
</html>
نقل قول: یک قالب سه ستونه با html5
کدشما html5 نیست چون هیچ تگ وبرچسب html5 رانداره ولی اگرنام id هارادر خودبرچسب به کارببری میشه گفت html5
نمونه:
<!doctype html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>بایدبرایم مهم باشد؟ html5 چرا</title>
<meta name="description" content="بایدبرایم مهم باشد؟ html5 چرا">
<meta name="author" content="html5,css3,seo">
<link rel="stylesheet" href="style.css">
<!--[if it IE 9]-->
<script src="modernizr.js"></script>
<![endif]-->
</head>
<body>
<header>
<nav></nav>
<hgroup>
<h1>بایدبرایم مهم باشد؟ html5 چرا</h1>
<h2>html5 & css3 & seo</h2>
</hgroup>
</header>
<article>
<h1>بایدبرایم مهم باشد؟ html5 چرا</h1>
</article>
<aside>
<article></article>
</aside>
<footer>
<section></section>
</footer>
<script src="main.js"></script>
</body>
</html>
چرا html5 بایدبرایم مهم باشد؟
نقل قول: یک قالب سه ستونه با html5
نقل قول:
نوشته شده توسط
tamafi6
کدشما html5 نیست چون هیچ تگ وبرچسب html5 رانداره ولی اگرنام id هارادر خودبرچسب به کارببری میشه گفت html5
نمونه:
<!doctype html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>بایدبرایم مهم باشد؟ html5 چرا</title>
<meta name="description" content="بایدبرایم مهم باشد؟ html5 چرا">
<meta name="author" content="html5,css3,seo">
<link rel="stylesheet" href="style.css">
<!--[if it IE 9]-->
<script src="modernizr.js"></script>
<![endif]-->
</head>
<body>
<header>
<nav></nav>
<hgroup>
<h1>بایدبرایم مهم باشد؟ html5 چرا</h1>
<h2>html5 & css3 & seo</h2>
</hgroup>
</header>
<article>
<h1>بایدبرایم مهم باشد؟ html5 چرا</h1>
</article>
<aside>
<article></article>
</aside>
<footer>
<section></section>
</footer>
<script src="main.js"></script>
</body>
</html>
چرا html5 بایدبرایم مهم باشد؟
این کد نویسی استاندارد html5 هست با این تفاوت که تگ hgroup منسوخ شده
نقل قول: یک قالب سه ستونه با html5
الان ما میخوایم سه تا ستون کنار هم بسازیم. باید از چه تگ هایی استفاده بکنیم؟
نقل قول: یک قالب سه ستونه با html5
نقل قول:
نوشته شده توسط
ravand
الان ما میخوایم سه تا ستون کنار هم بسازیم. باید از چه تگ هایی استفاده بکنیم؟
ببین اول باید بدونی اون 3تا باکس مربوط به چی هستش
مثلا اگه یکیش سایدبار هست باید از تگ aside استفاده کنی یا اگه برای بالای سایت یه لوگو و یه منو داری باید از برای باکس کلی از تگ header استفاده کنی و برای منو از تگ nav. یا اگه میخوای پست بزاری باید از تگ article استفاده کنی.
آموزش html5 سایت w3school رو ببینی کاربردشون دستت میاد
http://www.w3schools.com/html/html5_intro.asp
نقل قول: یک قالب سه ستونه با html5
نقل قول:
نوشته شده توسط
afshinz
ببین اول باید بدونی اون 3تا باکس مربوط به چی هستش
مثلا اگه یکیش سایدبار هست باید از تگ aside استفاده کنی یا اگه برای بالای سایت یه لوگو و یه منو داری باید از برای باکس کلی از تگ header استفاده کنی و برای منو از تگ nav. یا اگه میخوای پست بزاری باید از تگ article استفاده کنی.
آموزش html5 سایت w3school رو ببینی کاربردشون دستت میاد
http://www.w3schools.com/html/html5_intro.asp
من اینو قبلا دیدم ولی یه مثال ساده نذاشته برای همچین چیزی.
الان برای سه تا ستونی که باید بذارم از چه تگ هایی باید استفاده کنیم؟
الان برای ستون وسط از <main></main> استفاده کنم؟
برای کنار از <aside></aside> ؟
اگه دو تا کنار سمت راست و چپ داشته باشیم چی؟
نقل قول: یک قالب سه ستونه با html5
نقل قول:
نوشته شده توسط
ravand
من اینو قبلا دیدم ولی یه مثال ساده نذاشته برای همچین چیزی.
الان برای سه تا ستونی که باید بذارم از چه تگ هایی باید استفاده کنیم؟
الان برای ستون وسط از <main></main> استفاده کنم؟
برای کنار از <aside></aside> ؟
اگه دو تا کنار سمت راست و چپ داشته باشیم چی؟
خب اگه سه ستونه هست و 2تا ستون چپ و راست هر دو سایدبار هستن پس برای هر دو باید از aside استفاده کنی
نقل قول: یک قالب سه ستونه با html5
الان اینی که نوشتم مشکلی نداره ؟
کد HTML:
<!DOCTYPE html>
<html>
<head>
<title> آموزش ساخت قالب وبلاگ </title>
<meta charset="utf-8">
<!--[if it IE 9]-->
<script type="text/javascript"> src="modernizr.js"></script>
<![endif]-->
<style type="text/css">
.kol{
border:1px #000000 solid;
height:500px;
}
.header{
border:1px #000000 solid;
width:1000px;
height:200px;
margin:0 auto;
text-align:center;
background-color:#41e8e6;
}
.nav{
border:1px #000000 solid;
width:1000px;
height:40px;
margin:0 auto;
text-align:center;
background-color:#e416e6;
}
.sidebar1{
border:2px #0ced61 solid;
width:20%;
height:200px;
float:right;
text-align:center;
background-color:#0ec5d0;
}
.main{
border:2px #ed0c61 solid;
width:57%;
height:200px;
float:right;
text-align:center;
background-color:#0ed065;
}
.sidebar2{
border:2px #2925e9 solid;
width:20%;
height:200px;
float:left;
text-align:center;
background-color:#12cfc8;
}
.footer{
border:1px #1fdcda solid;
width:1000px;
height:40px;
margin:0 auto;
text-align:center;
background-color:#cfa512;
}
</style>
</head>
<body>
<div class="kol">
<header class="header">
<h1>بایدبرایم مهم باشد؟ html5 چرا</h1>
<h2>html5 & css3 & seo</h2>
<nav class="nav"></nav>
</header>
<aside class="sidebar1">
<article>ساید بار راست</article>
</aside>
<main class="main">
<article>وسط</article>
</main>
<aside class="sidebar1">
<article>ساید بار راست</article>
</aside>
</div>
<footer class="footer">
<article>فوتر</article>
</footer>
</body>
</html>
نقل قول: یک قالب سه ستونه با html5
نقل قول:
نوشته شده توسط
afshinz
این کد نویسی استاندارد html5 هست با این تفاوت که تگ hgroup منسوخ شده
ببخشیداستادمیشه توضیح بدیدچرامنسوخ شده ؟
یه خورده درمورداین تگ توضیح میدهید؟
نقل قول: یک قالب سه ستونه با html5
نقل قول:
نوشته شده توسط
ravand
الان اینی که نوشتم مشکلی نداره ؟
کد HTML:
<!DOCTYPE html>
<html>
<head>
<title> آموزش ساخت قالب وبلاگ </title>
<meta charset="utf-8">
<!--[if it IE 9]-->
<script type="text/javascript"> src="modernizr.js"></script>
<![endif]-->
<style type="text/css">
.kol{
border:1px #000000 solid;
height:500px;
}
.header{
border:1px #000000 solid;
width:1000px;
height:200px;
margin:0 auto;
text-align:center;
background-color:#41e8e6;
}
.nav{
border:1px #000000 solid;
width:1000px;
height:40px;
margin:0 auto;
text-align:center;
background-color:#e416e6;
}
.sidebar1{
border:2px #0ced61 solid;
width:20%;
height:200px;
float:right;
text-align:center;
background-color:#0ec5d0;
}
.main{
border:2px #ed0c61 solid;
width:57%;
height:200px;
float:right;
text-align:center;
background-color:#0ed065;
}
.sidebar2{
border:2px #2925e9 solid;
width:20%;
height:200px;
float:left;
text-align:center;
background-color:#12cfc8;
}
.footer{
border:1px #1fdcda solid;
width:1000px;
height:40px;
margin:0 auto;
text-align:center;
background-color:#cfa512;
}
</style>
</head>
<body>
<div class="kol">
<header class="header">
<h1>بایدبرایم مهم باشد؟ html5 چرا</h1>
<h2>html5 & css3 & seo</h2>
<nav class="nav"></nav>
</header>
<aside class="sidebar1">
<article>ساید بار راست</article>
</aside>
<main class="main">
<article>وسط</article>
</main>
<aside class="sidebar1">
<article>ساید بار راست</article>
</aside>
</div>
<footer class="footer">
<article>فوتر</article>
</footer>
</body>
</html>
دوست عزیز شما نباید به تگ های معناگرا کلاس ویا شناسه اختصاص بدهید
نقل قول: یک قالب سه ستونه با html5
خب من اگه بلد بودم که از شما نمی پرسیدم :لبخند:
شما بیا و حداقل یکی از تگ ها رو اونطوری که میگی بنویس.
نقل قول: یک قالب سه ستونه با html5
نقل قول:
نوشته شده توسط
tamafi6
ببخشیداستادمیشه توضیح بدیدچرامنسوخ شده ؟
یه خورده درمورداین تگ توضیح میدهید؟
دوست عزیز دو قسمتی که به عنوان آپدیت در این لینک هستن رو بخونید
link
تو خود سایت w3school هم اگه مراجعه کنید کلا اون رو حذف کردن
نقل قول: یک قالب سه ستونه با html5
نقل قول:
نوشته شده توسط
afshinz
دوست عزیز دو قسمتی که به عنوان آپدیت در این لینک هستن رو بخونید
link
تو خود سایت w3school هم اگه مراجعه کنید کلا اون رو حذف کردن
درسته اون چیزی هم که نوشته شده یک مقاله وبحث هست وچندسالی هست که برسربعضی از تگ ها ی html5 این اختلافات رخ میده - به همین دلیل هم در سایت w3school به صورت معلق درآورده - ولی هنوز به عنوان منسوخ مطرح نشده .
نقل قول: یک قالب سه ستونه با html5
نقل قول:
دوست عزیز شما نباید به تگ های معناگرا کلاس ویا شناسه اختصاص بدهید
خب من چطوری باید بهش استایل بدم ؟ یه مثال میشه بنویسید؟
نقل قول: یک قالب سه ستونه با html5
نقل قول:
نوشته شده توسط
ravand
خب من چطوری باید بهش استایل بدم ؟ یه مثال میشه بنویسید؟
تاجایی که امکان دره به برچسب های اصلی مانند article , aside ,footer ,section, header نباید کلاس اختصاص داده بشه چون یک کارغیر اصولی هست برای رفع مشکل فقط استایل اختصاص بدید مانند
اشتباه :
<style>
.article {color:red;}
</style>
<article class="article">
</article>
صحیح:
<style>
article p{color:red;}
</style>
<article>
<p>متن</p>
</article>
اگردرجایی به کلاس نیاز داشتید بهتره اونها را در div قراربدید
نقل قول: یک قالب سه ستونه با html5
من توی سایت w3schools یه چیزایی در مورد تگ article خوندم. دقیقا کارش چیه اصلا برای چی اضافه شده؟
متشکرم.
نقل قول: یک قالب سه ستونه با html5
نقل قول:
نوشته شده توسط
tamafi6
دوست عزیز شما نباید به تگ های معناگرا کلاس ویا شناسه اختصاص بدهید
دوست عزیر میشه بگید چرا نمیشه به این تگ ها کلاس داد؟؟
درسته میشه خیلی راحت تگ رو داخل سی اس اس استایل دهی کرد ولی من هیچجا ندیدم که همچین حرفی بزنن که درست نیست به این تگ ها کلاس یا آی دی اختصاص بدیم!
ممنون میشم اگه مقاله ای رو در این مورد خوندید لینک بدید
نقل قول: یک قالب سه ستونه با html5
نقل قول:
نوشته شده توسط
afshinz
دوست عزیر میشه بگید چرا نمیشه به این تگ ها کلاس داد؟؟
درسته میشه خیلی راحت تگ رو داخل سی اس اس استایل دهی کرد ولی من هیچجا ندیدم که همچین حرفی بزنن که درست نیست به این تگ ها کلاس یا آی دی اختصاص بدیم!
ممنون میشم اگه مقاله ای رو در این مورد خوندید لینک بدید
عذر میخوام پست پایینی رو نخوندم. درسته کار اصولی تریه که خود سلکتور تگ رو استفاده کنیم ولی محدودیتی برای اینکه کلاس یا آی دی بدیم وجود نداره
نقل قول: یک قالب سه ستونه با html5
نقل قول:
نوشته شده توسط
ravand
من توی سایت w3schools یه چیزایی در مورد تگ article خوندم. دقیقا کارش چیه اصلا برای چی اضافه شده؟
متشکرم.
هر پست اصلی وبسایت رو داخل یه تگ article قرار میدن
