سوال: یک قالب سه ستونه با html5 [بایگانی]

ravand

سه شنبه 06 مرداد 1394, 09:53 صبح

سلام
راستش من هنوز html5 رو درست و حسابی کار نکردم. یه سری کد نوشتم برای یه قالب سه ستونه ی ساده که از سایت w3c گرفتم.
خواستم ببینم این روش روش استانداری هست یا نه؟ یا تگ هایی که استفاده کردم باید چیز دیگه باشن؟
متشکرم.

<!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>

tamafi6

سه شنبه 06 مرداد 1394, 10:27 صبح

کدشما 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">

<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 بایدبرایم مهم باشد؟ (http://pacifist.xzn.ir/-html5/-html5/)

afshinz

سه شنبه 06 مرداد 1394, 11:15 صبح

کدشما 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">

<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 بایدبرایم مهم باشد؟ (http://pacifist.xzn.ir/-html5/-html5/)
این کد نویسی استاندارد html5 هست با این تفاوت که تگ hgroup منسوخ شده

ravand

سه شنبه 06 مرداد 1394, 11:38 صبح

الان ما میخوایم سه تا ستون کنار هم بسازیم. باید از چه تگ هایی استفاده بکنیم؟

afshinz

سه شنبه 06 مرداد 1394, 12:08 عصر

الان ما میخوایم سه تا ستون کنار هم بسازیم. باید از چه تگ هایی استفاده بکنیم؟
ببین اول باید بدونی اون 3تا باکس مربوط به چی هستش
مثلا اگه یکیش سایدبار هست باید از تگ aside استفاده کنی یا اگه برای بالای سایت یه لوگو و یه منو داری باید از برای باکس کلی از تگ header استفاده کنی و برای منو از تگ nav. یا اگه میخوای پست بزاری باید از تگ article استفاده کنی.
آموزش html5 سایت w3school رو ببینی کاربردشون دستت میاد
http://www.w3schools.com/html/html5_intro.asp

ravand

سه شنبه 06 مرداد 1394, 13:24 عصر

ببین اول باید بدونی اون 3تا باکس مربوط به چی هستش
مثلا اگه یکیش سایدبار هست باید از تگ aside استفاده کنی یا اگه برای بالای سایت یه لوگو و یه منو داری باید از برای باکس کلی از تگ header استفاده کنی و برای منو از تگ nav. یا اگه میخوای پست بزاری باید از تگ article استفاده کنی.
آموزش html5 سایت w3school رو ببینی کاربردشون دستت میاد
http://www.w3schools.com/html/html5_intro.asp
من اینو قبلا دیدم ولی یه مثال ساده نذاشته برای همچین چیزی.
الان برای سه تا ستونی که باید بذارم از چه تگ هایی باید استفاده کنیم؟
الان برای ستون وسط از <main></main> استفاده کنم؟
برای کنار از <aside></aside> ؟
اگه دو تا کنار سمت راست و چپ داشته باشیم چی؟

afshinz

سه شنبه 06 مرداد 1394, 13:38 عصر

من اینو قبلا دیدم ولی یه مثال ساده نذاشته برای همچین چیزی.
الان برای سه تا ستونی که باید بذارم از چه تگ هایی باید استفاده کنیم؟
الان برای ستون وسط از <main></main> استفاده کنم؟
برای کنار از <aside></aside> ؟
اگه دو تا کنار سمت راست و چپ داشته باشیم چی؟
خب اگه سه ستونه هست و 2تا ستون چپ و راست هر دو سایدبار هستن پس برای هر دو باید از aside استفاده کنی

ravand

سه شنبه 06 مرداد 1394, 15:15 عصر

الان اینی که نوشتم مشکلی نداره ؟

<!DOCTYPE html>
<html>
<head>
<title> آموزش ساخت قالب وبلاگ </title>
<meta charset="utf-8">

<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>

tamafi6

سه شنبه 06 مرداد 1394, 16:11 عصر

این کد نویسی استاندارد html5 هست با این تفاوت که تگ hgroup منسوخ شده

ببخشیداستادمیشه توضیح بدیدچرامنسوخ شده ؟
یه خورده درمورداین تگ توضیح میدهید؟

tamafi6

سه شنبه 06 مرداد 1394, 16:15 عصر

الان اینی که نوشتم مشکلی نداره ؟

<!DOCTYPE html>
<html>
<head>
<title> آموزش ساخت قالب وبلاگ </title>
<meta charset="utf-8">

<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>

دوست عزیز شما نباید به تگ های معناگرا کلاس ویا شناسه اختصاص بدهید

ravand

سه شنبه 06 مرداد 1394, 16:19 عصر

خب من اگه بلد بودم که از شما نمی پرسیدم :لبخند:
شما بیا و حداقل یکی از تگ ها رو اونطوری که میگی بنویس.

afshinz

سه شنبه 06 مرداد 1394, 16:22 عصر

ببخشیداستادمیشه توضیح بدیدچرامنسوخ شده ؟
یه خورده درمورداین تگ توضیح میدهید؟
دوست عزیز دو قسمتی که به عنوان آپدیت در این لینک هستن رو بخونید
link (http://html5doctor.com/the-hgroup-element/)
تو خود سایت w3school هم اگه مراجعه کنید کلا اون رو حذف کردن

tamafi6

سه شنبه 06 مرداد 1394, 16:37 عصر

دوست عزیز دو قسمتی که به عنوان آپدیت در این لینک هستن رو بخونید
link (http://html5doctor.com/the-hgroup-element/)
تو خود سایت w3school هم اگه مراجعه کنید کلا اون رو حذف کردن

درسته اون چیزی هم که نوشته شده یک مقاله وبحث هست وچندسالی هست که برسربعضی از تگ ها ی html5 این اختلافات رخ میده - به همین دلیل هم در سایت w3school به صورت معلق درآورده - ولی هنوز به عنوان منسوخ مطرح نشده .

ravand

سه شنبه 06 مرداد 1394, 16:47 عصر

دوست عزیز شما نباید به تگ های معناگرا کلاس ویا شناسه اختصاص بدهید
خب من چطوری باید بهش استایل بدم ؟ یه مثال میشه بنویسید؟

tamafi6

سه شنبه 06 مرداد 1394, 16:59 عصر

خب من چطوری باید بهش استایل بدم ؟ یه مثال میشه بنویسید؟

تاجایی که امکان دره به برچسب های اصلی مانند 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 قراربدید

ravand

سه شنبه 06 مرداد 1394, 17:08 عصر

من توی سایت w3schools یه چیزایی در مورد تگ article خوندم. دقیقا کارش چیه اصلا برای چی اضافه شده؟
متشکرم.

afshinz

سه شنبه 06 مرداد 1394, 21:53 عصر

دوست عزیز شما نباید به تگ های معناگرا کلاس ویا شناسه اختصاص بدهید
دوست عزیر میشه بگید چرا نمیشه به این تگ ها کلاس داد؟؟
درسته میشه خیلی راحت تگ رو داخل سی اس اس استایل دهی کرد ولی من هیچجا ندیدم که همچین حرفی بزنن که درست نیست به این تگ ها کلاس یا آی دی اختصاص بدیم!
ممنون میشم اگه مقاله ای رو در این مورد خوندید لینک بدید

afshinz

سه شنبه 06 مرداد 1394, 21:58 عصر

دوست عزیر میشه بگید چرا نمیشه به این تگ ها کلاس داد؟؟
درسته میشه خیلی راحت تگ رو داخل سی اس اس استایل دهی کرد ولی من هیچجا ندیدم که همچین حرفی بزنن که درست نیست به این تگ ها کلاس یا آی دی اختصاص بدیم!
ممنون میشم اگه مقاله ای رو در این مورد خوندید لینک بدید
عذر میخوام پست پایینی رو نخوندم. درسته کار اصولی تریه که خود سلکتور تگ رو استفاده کنیم ولی محدودیتی برای اینکه کلاس یا آی دی بدیم وجود نداره

afshinz

سه شنبه 06 مرداد 1394, 21:59 عصر

من توی سایت w3schools یه چیزایی در مورد تگ article خوندم. دقیقا کارش چیه اصلا برای چی اضافه شده؟
متشکرم.
هر پست اصلی وبسایت رو داخل یه تگ article قرار میدن