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

ravand

پنج شنبه 02 مهر 1394, 08:26 صبح

سلام
یه مثال از یک قالب ساده با html5 ساختم. با سایت validator.w3.org هم چک کردم اخطاری بهم نداد.
بازم گفتم بذارم اینجا تا شما یه نگاهی بکنید ببینید جاییی اشتباهی نکردم؟

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Using main</title>

<style type="text/css">
body{
font-family:tahoma;
}
main{
display: block;
width:1000px;
border:1px #000000 solid;
height:300px;
margin:0 auto;
}
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;
}

nav ul {
margin:0;padding:0;
}
nav ul li {
display:inline; margin:5px;
}
aside{
border:2px #0ced61 solid;
width:20%;
height:300px;
float:right;
text-align:center;
background-color:#0ec5d0;
}
article{
border:2px #ed0c61 solid;
width:58.5%;
height:300px;
float:right;
text-align:center;
background-color:#0ed065;
}
footer{
border:1px #1fdcda solid;
width:1000px;
height:40px;
margin:0 auto;
text-align:center;
background-color:#cfa512;
}
</style>
</head>
<body>

<header>My page</header>

<nav>
<a href="#">Home</a>
</nav>

<main>
<aside>
<p>ساید بار</p>
</aside>

<article>
<h1>عنوان مطلب</h1>
<p>مطلب</p>
</article>

<aside>
<p>ساید بار دوم</p>
</aside>
</main>

<footer>Copyright 1394</footer>

</body>
</html>

متشکرم.

navid.khorsand2

جمعه 03 مهر 1394, 21:14 عصر

سلام عالی بود و اشکالی نداشت.

ravand

شنبه 04 مهر 1394, 07:47 صبح

سلام عالی بود و اشکالی نداشت.
آخه هر کسی یه جوری کار کرده. یکی اصلا تگ <main> نذاشته. یکی هم امده تگ <article> را گذاشته داخل <section>.
برای همین من کلاً گیج شدم!

tamafi6

شنبه 04 مهر 1394, 10:45 صبح

تگ main یک تگ جدیدهست وبودونبودش کاری انجام نمیده فقط یک عنصربه صفحه اضافه میکنه
وقتی عناصرمعناگرای قدرتمندی مثل header,article ,aside,section وجودداره وهمون کاررابرات انجام میده به نظرمن لزومی نداره استفاده بشه یا نه وکاملا اختیاری هست .
اگربتونید یک صفحه با کلیه عناصر html5 بنویسید وبدونید که هرعنصردرکجاباید به کارگرفته بشه اونوفت درک درستی از html5 پیداخواهید کرد

سورس صفحه راببینید

view-source:http://pacifist.xzn.ir/-html5/viewport-metatag-/#%D9%86%D8%B8%D8%B1%D8%B4%D9%85%D8%A71

ravand

شنبه 04 مهر 1394, 10:59 صبح

حالا اگه من <main> رو بردارم چی جاش بذارم؟ div؟ قالب های مختلفی رو دیدم. یه جا از <article> کنار <aside> استفاده کرده بودن یه جا از
section یه بار این داخل بود یه بار اون!
هر جایی یه سازی زدن!
ما موندیم section باید داخل <article> باشه یا <article> باید داخل
section باشه.
برای نمایش هر پست در وبلاگ از کدوم استفاده کنیم؟ ستون وسط که همه ی پست ها داخلش هست باید کدوم رو استفاده کنیم.
اینو ببین:
http://s3.picofile.com/file/8214121700/html5_tags.png
http://s6.picofile.com/file/8214121768/fff.png
http://s6.picofile.com/file/8214122018/53.png

tamafi6

شنبه 04 مهر 1394, 11:48 صبح

اگر بخواهیدیک بلوک اصلی که کلیه عناصردراون قراربگیره منطقی این هست که از عنصرmain استفاده بشه چون معنی گراهست
http://www.w3schools.com/tags/tag_main.asp
مثال :غیرمنطقی

<div class="main">
</div>

منطقی

<main>
</main>

تصویراول قابل قبولتر هست درصورتی که محتویات header راهم درون اون قراربدی !
main چیزی هست شبیه به خود body مثل یک بلوک کلی

درموردسوال بعدی اینه که عناصرمعناگرایی که نوشتید هرکدام برای منظور خاصی استفاده میشه
مثال تعریف : article
یک ترکیب مستقل درسند صفحه که به طورمستقل میشه اون را نشردادواگربخواهی یک مطلب رادرسایت منتشرکنی باید ازاین عنصراستفاده کرددرحالی که عنصر section میتونه حاوی هرمحتوایی باشه یعنی عنصرarticle باید مرتبط به سند ویاسایت شما باشه مثال نمیتونید دریک سایت برنامه نویسی یک مقاله درمورد آموزش آشپزی بنویسید واون را درون article قراربدید ولی میتونید درون section قراربدید درصورتی که جدای از article باشه
پست هاومقالات رامیشه درون article قراردادحتی کامنت ها
تعریف: section
یک بخش عمومی درون سند شماایجاد میکنه یعنی مجموعه ای از محتواها که دارای عنوان باشند
ازsection نباید برای گروه بندی محتوابه منظوردادن سبک استفاده بشه ویابراش اسکریپت بنویسی
مثال برای استفاده :
بخش هایی که دارای سربرگ هستن مثل tab ها
بخش درباره ما -تاریخچه سایت واهداف سایت
بخش شرایط استفاده از محصول
بخش های مختلف سایت مثال :دریک سایت خبری میشه مقالات بخش ورزشی - کار واقتصادی وآموزشی را بااین عنصرجداکرد
شما حتی میتونید عناصر section راتودرتووداخل هم استفاده کنید

ravand

شنبه 04 مهر 1394, 19:24 عصر

من با توجه به صحبت های شما عکس اول رو ساختم:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Using main</title>

<style type="text/css">
body{
font-family:tahoma;
}
main{
display: block;
width:1000px;
border:1px #000000 solid;
min-height:700px;
margin:0 auto;
}
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;
}

nav ul {
margin:0;padding:0;
}
nav ul li {
display:inline; margin:5px;
}
aside{
border:2px #0ced61 solid;
width:20%;
height:300px;
float:right;
text-align:center;
background-color:#0ec5d0;
}
article{
border:2px #ed0c61 solid;
width:58.5%;
height:300px;
float:right;
text-align:center;
background-color:#0ed065;
}
footer{
border:1px #1fdcda solid;
width:1000px;
height:40px;
margin:0 auto;
text-align:center;
background-color:#cfa512;
}
</style>
</head>
<body>
<main>
<header>My page</header>

<nav>
<a href="#">Home</a>
</nav>

<aside>
<p>ساید بار</p>
</aside>

<article>
<h2>عنوان اصلی</h2>
<section>
<h3>عنوان یک</h3>
<p>مطلب یک</p>
</section>

<section>
<h3>عنوان دو</h3>
<p>مطلب دو</p>
</section>
</article>

<aside>
<p>ساید بار دوم</p>
</aside>

<div style="clear:both;"></div>
<footer>Copyright 1394</footer>

</main>
</body>
</html>

ولی یه مشکل هست سایت validator.w3.org گیر میده که حتما باید برای <article> هم یک مثلاً <h2>بذارم. خب من برای هر پست از مثلاً وبلاگ یک <section> گذاشتم که داخلش عنوان و متن مطلب هست. اگه بیام قبل اینا یک <h2> بذارم ظاهر قالب زشت نیست؟
حالا اگه در بخش <header> میذاشتم ارزش داشت.
نظرتون چیه؟

tamafi6

یک شنبه 05 مهر 1394, 11:40 صبح

شمازیادحساسیت به گیردادن سایت
validator.w3.org نداشته باش چون بسیاری از سایتهای استاندارد را هم گیرمیده
نمونه لینک زیریک صفحه کاملا استاندارد هست که باز هم خطامیده .
http://www.thehtml5herald.com/

article ها برای مقاله نویسی استفاده میشوند بهتره گره های درخت dom رارعایت کنید سرتیتر ها قانونا باید h1 باشند و تیتر section هارا h2 استفاده کنید.
مگر شما برای عنوان سایت نمیخواهید درون header از h1 استفاده کنید ازلینک زیرالگوبرداری کنید

http://www.thehtml5herald.com/

ravand

یک شنبه 05 مهر 1394, 15:02 عصر

شمازیادحساسیت به گیردادن سایت
validator.w3.org نداشته باش چون بسیاری از سایتهای استاندارد را هم گیرمیده
نمونه لینک زیریک صفحه کاملا استاندارد هست که باز هم خطامیده .

http://www.thehtml5herald.com/

article ها برای مقاله نویسی استفاده میشوند بهتره گره های درخت dom رارعایت کنید سرتیتر ها قانونا باید h1 باشند و تیتر section هارا h2 استفاده کنید.
مگر شما برای عنوان سایت نمیخواهید درون header از h1 استفاده کنید ازلینک زیرالگوبرداری کنید

http://www.thehtml5herald.com/
مشکل اینجاست که من قراره برای مشتری کار کنم. مشتری میاد قالبی که من ساختم رو با سایت validator.w3.org چک میکنه و من اگه هر چی ام بگم قبول نمیکنه! و فکر میکنه من میخوام سرشو کلاه بذارم.
اگه قرار بود برای خودم کدنویسی کنم که باور کن اصلاً از html5 استفاده نمیکردم. :لبخند:
اگه این لینک رو دیده باشید می بینید که این بحث جدیه:
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_html5_skeleton

siros1983

یک شنبه 05 مهر 1394, 19:04 عصر

دوستان استفاده از تگ section بجای div برای بخش بندی کار درستیه یا نه؟
مثلا

<section id="head">
<header>
</header>
</section>

و الی آخر همینطوری