هاست لینوکس

آخرین بسته‌ی MyBB: نسخه‌ی 1.8.27 MyBB منتشر شد


امتیاز موضوع:
  • 0 رأی - میانگین امتیازات: 0
  • 1
  • 2
  • 3
  • 4
  • 5
آموزش HTML5 برای اولین بار در MYBBIRAN
#1
سلام بر دوستان عزیزم
و بالاخره یک بازگشت قوی برای مای بی بی ایران دارم
این بار با آموزش html 5 در خدمت دوستان گل و وبمستران عزیز هستیم
خب یک توضیح مختصر در باره ی چگونگی کار با html5 براتون میدم
و از فردا آموزش اصلی رو شروع میکنیم

خب اولین چیزی که باید بدونید اینه که نسخه 5 اچ تی ام ال رابطه مستقیم به سئو سایت داره و دوستانی که علاقه دارم سئو سایتشون بالا بره میتونن با ما همراه باشند

یک سری از تگ های html در نسخه 5 باطل شده و معتبر نیست که در ادامه به تفضیل در رابطه با اینها صحبت میکنیم و به جای اونها تگ های جدیدی اومده و کاربردی تر و مهم تره و باید حتما از اونها استفاده بشه
خب دوستان اگه تمایل دارید آموزش رو شروع کنیم؟؟؟؟پس از فردا شب اماده باشید
[تصویر:  c613paraglider.png]

برای ثبت نام پرواز پاراگلایدر روی عکس کلیک کنید
پاسخ
 سپاس شده توسطShahin X2 (۱۳۹۱/۸/۱۱، ۰۱:۲۵:۲۹ صبح) ، mahpishoni (۱۳۹۱/۸/۱۱، ۰۱:۳۳:۱۳ صبح) ، S_N (۱۳۹۱/۸/۱۱، ۰۴:۱۳:۱۲ صبح) ، mhy (۱۳۹۱/۸/۱۱، ۱۰:۵۷:۲۶ صبح) ، ali_3001 (۱۳۹۱/۸/۱۱، ۱۱:۱۰:۵۳ صبح) ، Cancer9003 (۱۳۹۱/۸/۱۱، ۱۱:۴۹:۲۳ صبح) ، geo (۱۳۹۱/۸/۱۱، ۱۱:۵۲:۱۶ صبح) ، HOssE!N-B (۱۳۹۱/۸/۱۱، ۱۱:۵۹:۰۹ صبح) ، yaser0421 (۱۳۹۱/۸/۱۱، ۱۹:۴۹:۰۷ عصر) ، shila.star (۱۳۹۱/۸/۱۱، ۲۲:۰۹:۳۲ عصر) ، baxe rapper (۱۳۹۱/۸/۱۲، ۰۲:۰۲:۴۸ صبح) ، Amir_Sam (۱۳۹۱/۸/۱۳، ۱۲:۰۶:۱۷ عصر) ، the wolf (۱۳۹۱/۱۱/۷، ۲۱:۵۴:۲۳ عصر) ، number-one (۱۳۹۲/۵/۱۸، ۲۰:۰۳:۵۸ عصر) ، sorosh21 (۱۳۹۲/۷/۲۲، ۲۲:۴۶:۱۳ عصر)
#2
مدیرای بقیه پشتیبانی ها شما چی؟ آماده هستین آموزشها رو کپی کنین ببرین؟Big Grin
نصب مای بی بینصب پلاگیننصب و طراحی پوستهاصلاح کدهای قالبافزایش سرعت در GTmetrix با هزینه مناسب

درخواست از طریق پیام خصوصی
پاسخ
 سپاس شده توسطHOssE!N-B (۱۳۹۱/۸/۱۱، ۱۱:۵۹:۰۶ صبح) ، benyamin 22 (۱۳۹۱/۸/۱۱، ۱۲:۱۸:۰۴ عصر) ، mhy (۱۳۹۱/۸/۱۱، ۱۴:۱۷:۴۲ عصر) ، Behr☺uz (۱۳۹۱/۸/۱۱، ۱۵:۳۵:۱۹ عصر) ، S_N (۱۳۹۱/۸/۱۱، ۱۶:۵۲:۰۳ عصر) ، saeedmax (۱۳۹۱/۸/۱۱، ۱۶:۵۲:۴۳ عصر) ، Doodoo (۱۳۹۱/۸/۱۱، ۱۷:۲۶:۴۱ عصر) ، yaser0421 (۱۳۹۱/۸/۱۱، ۱۹:۴۹:۱۳ عصر) ، what? (۱۳۹۱/۸/۱۱، ۲۰:۲۶:۲۹ عصر) ، baxe rapper (۱۳۹۱/۸/۱۲، ۰۲:۰۲:۵۶ صبح) ، Mohammad-Za (۱۳۹۱/۸/۱۲، ۱۹:۵۶:۳۱ عصر) ، Amir_Sam (۱۳۹۱/۸/۱۳، ۱۲:۰۵:۵۰ عصر) ، number-one (۱۳۹۲/۵/۱۸، ۲۰:۰۴:۲۵ عصر)
#3
خب سلام به همگی
درس اول:
میخوایم اول متغیر های جدید رو بشناسیم

کد:
<article>

متن های مهم از جمله مقالات موجود در سایت و آموزش ها رو در داخل این تگ بذارید
کد:
<aside>
مطالب جانبی رو باید داخل این تگ قرار بدید
کد:
<bdi>
برای اطلاح راست به چپ بودن و چپ به رایت بودن قسمتی از متن که با سایر متن تداخل داره
مثلا در میان این متن فارسی عبارت ENGLISH TEXT رو قرار دادیم و اکنون این مشکل وجود داره که موتور سرچ شروع به خوندن صفحه میکنه و عبارت رو برعکس میخونه و اشتباه ایندکس میکنه
برای حل این مشکل عبارت رو در این تگ قرار میدهیم
کد:
<command>
توضیح به زودی قرار خواهد گرفت
کد:
<details>

برای وارد کردن اطلاعات جزئی یک محصول یا یک مقاله این تگ را باید بگذارید
میتونید در مقابل نام سایت اطلاعات مربوط به تعداد کاربران و ... را داخل این تگ استفاده کنید
کد:
<summary>
دقیقا مثل تگ بالا هست با این تفاوت که مقادیر داخل این تگ نمایش داده میشه
کد:
<figure>

اطلاعات مربوط به یک عکس که در یک متن وجود داره توسط این تگ به عکس پیوست میشه و نشون میده این عکس فرمت اماری و نموداری داره و داخلش اطلاعاتی نهفته است
کد:
<figcaption>
توضیحات مربوط به تصاویر رو با این تگ باید وارد کنید
کد:
<footer>
اطلاعات فوتر را داخل این تگ قرار بدید(فوتر میتونه برای یک مقاله و درست در وسط صفحه باشه)
کد:
<header>
اطلاعات هدر رو داخل این تگ قرار بدید(اطلاعات داخل تگ برای یک متن هدر محسوب میشود و خود این هدر و متن میتونه هر جای صفحه باشه)
کد:
<hgroup>
برای دسته بندی هدر های از تگ h1 – h6 از این متغیر استتفاده کنید تا شناسایی اونها دقیق تر صورت بگیره
کد:
<mark>
برای هایلایت کردن متن استفاده میشه با این تفاوت که برای ربات ها هم هایلایت قابل فهم است
کد:
<meter>
توصیحات به زودی قرار میگیرد
کد:
<nav>
برای مشخص شدن آدرس صفحه در سایت قرار میگیره که همه با این تگ آشنا هستید
کد:
<progress>
برای نمایش درصد پیشرفت یک پروژه از این تگ استفاده کنید
کد:
<ruby>     
<rt>     
<rp>

این سه تگ مخصوص اسیای شرقی اضافه شده است
کد:
<section>
انتخاب یک بخش از یک متن
کد:
<time>

برای نمایش تاریخ و زمان در میان محتوای سایت از این تگ استفاده کنید
کد:
<wbr>
برای رفتن به خط بعدی این تگ معرفی شده

خب خیلی از این تگ ها تا پیش از این هم به صورت دیگر وجود داشته است پس چه ضرورتی برای یاد گیری و استفاده از این تگ ها وجود داره؟؟؟؟؟؟؟؟
پاسخ : html5 مفهمومی به صفحات نگاه میکنه و رباط یا نرم افزار باید بتونه اهمیت مطالب موجود در صفحه اعم از متن اصلی متن جانبی لینک های مرجع و ... را متوجه بشه

ایا این تگ های در ظاهر سایت هم تاثیر میذاره؟؟؟
پاسخ: خیر اکثر این تگ ها فقط محتوای معنایی برای موتور های سرچ و نرم افزار ها داشته و کاربران شما تغییری را احساس نخواهند کرد
[تصویر:  c613paraglider.png]

برای ثبت نام پرواز پاراگلایدر روی عکس کلیک کنید
پاسخ
 سپاس شده توسطS_N (۱۳۹۱/۸/۱۱، ۱۶:۵۲:۱۹ عصر) ، saeedmax (۱۳۹۱/۸/۱۱، ۱۶:۵۴:۴۹ عصر) ، Cancer9003 (۱۳۹۱/۸/۱۱، ۱۶:۵۹:۱۸ عصر) ، mahpishoni (۱۳۹۱/۸/۱۱، ۱۷:۱۹:۱۰ عصر) ، Doodoo (۱۳۹۱/۸/۱۱، ۱۷:۲۵:۳۷ عصر) ، HOssE!N-B (۱۳۹۱/۸/۱۱، ۱۸:۱۴:۳۰ عصر) ، mhy (۱۳۹۱/۸/۱۱، ۱۸:۲۷:۲۸ عصر) ، shila.star (۱۳۹۱/۸/۱۱، ۲۲:۱۰:۳۷ عصر) ، Mohammad-Mo (۱۳۹۱/۸/۱۱، ۲۲:۲۸:۳۴ عصر) ، baxe rapper (۱۳۹۱/۸/۱۲، ۰۲:۰۲:۴۶ صبح) ، geo (۱۳۹۱/۸/۱۲، ۰۳:۵۲:۵۰ صبح) ، Mohammad-Za (۱۳۹۱/۸/۱۲، ۱۹:۵۶:۲۶ عصر) ، Amir_Sam (۱۳۹۱/۸/۱۳، ۱۲:۰۶:۲۷ عصر) ، Gh-Moradi (۱۳۹۲/۱۱/۵، ۰۲:۰۵:۵۷ صبح)
#4
خب دوستان حالا که فهمیدیم از چی باید استفاده کنیم میخوایم بدونیم از چی نباید استفاده کنیم
کد:
<acronym>
    <applet>
    <basefont>
    <big>
    <center>
    <dir>
    <font>
    <frame>
    <frameset>
    <noframes>
    <strike>
    <tt>
منتظر توضیح بودید؟؟؟؟متاسفم عزیزان وقتی نباید استفاده کنید دیگه توضیح دادن نداره
سعی کنید اگر از این کد ها دارید اصلاحشون کنید چون به زودی مرورگر ها هم این تگ ها را پشتیبانی نخواهند کرد
[تصویر:  c613paraglider.png]

برای ثبت نام پرواز پاراگلایدر روی عکس کلیک کنید
پاسخ
 سپاس شده توسطMohammad-Za (۱۳۹۱/۸/۱۲، ۱۹:۵۶:۱۴ عصر) ، HOssE!N-B (۱۳۹۱/۸/۱۲، ۲۳:۲۱:۱۷ عصر) ، Cancer9003 (۱۳۹۱/۸/۱۳، ۰۰:۲۳:۲۰ صبح) ، geo (۱۳۹۱/۸/۱۳، ۰۱:۰۹:۲۷ صبح) ، Amir_Sam (۱۳۹۱/۸/۱۳، ۱۲:۰۶:۳۱ عصر) ، mahpishoni (۱۳۹۱/۸/۱۴، ۲۲:۳۲:۰۳ عصر)
#5
خب نوبت به توضیحات اولین تگ میرسه
تگ مورد نظر ما با یک مثال توضیح داده میشه
کد:
<canvas id="myCanvas" width="200" height="100"></canvas>
از این تگ برای رسم ترسیمه ها به کمک جاوا اسکریپت استفاده میشه
شاید باور نکنید ولی در سی اس اس 3 امکانات بسیار خوبی گذاشته شده که حجم مورد نیاز برای عکس ها را بسیار پایین میاره و همه ی افکت ها با سی اس اس داده میشه
خب حالا این تگ رو گذاشتیم برای توضیح چند تا مثال براتون میذارم
کد جاوای زیر این عکس رو تولید میکنه
   
کد:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();

این یک نمونه دیگر
   
کد:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();

یک نمونه متنی
   
کد:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);

یک نمونه گرادیان که به کمک سی اس اس ساخته شده:
   
کد:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// Create gradient
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

خب به نظرتون با این امکانات دیگر نیازی به آپلود تصاویر و لود عکس های سنگین خواهد بود؟؟؟؟

سوال: پرا کد ها را توضیح ندادین؟
پاسخ: کد ها جاوا اسکریپت است و مربوط به آموزش اپ تی ام ال 5 نمیشود
[تصویر:  c613paraglider.png]

برای ثبت نام پرواز پاراگلایدر روی عکس کلیک کنید
پاسخ
 سپاس شده توسطgeo (۱۳۹۱/۸/۱۳، ۱۵:۵۹:۳۱ عصر) ، Doodoo (۱۳۹۱/۸/۱۳، ۱۶:۳۵:۱۹ عصر) ، Mohammad-Mo (۱۳۹۱/۸/۱۳، ۱۸:۳۱:۰۲ عصر) ، mahpishoni (۱۳۹۱/۸/۱۴، ۲۲:۳۲:۳۵ عصر) ، golforosh (۱۳۹۲/۴/۲۰، ۰۷:۳۲:۳۵ صبح)
#6
خب یکم حرفه ای تر برخورد کنیم
یک تگ جدید اضافه شده که مخصوص Drag and drop هست
این تگ رو یا یک کد توضیح میدم

یک فایل html ایجاد کنید و کد زیر را داخلش بذارید
کد:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<p>Drag the W3Schools image into the rectangle:</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">

</body>
</html>
به جای این مقدار هم img_logo.gif ادرس یک عکس را بهش بدید
در زمان اجرا میتونید عکس را درگ و در قسمت مربوطه قرار بدید
این خصیصه قبلا وجود داشت ولی با ترکید کد های زیاد ولی اکنون این خصیصه به صورت پیشفرض در html5 قرار داده شده
[تصویر:  c613paraglider.png]

برای ثبت نام پرواز پاراگلایدر روی عکس کلیک کنید
پاسخ
 سپاس شده توسطmahpishoni (۱۳۹۱/۸/۱۴، ۲۲:۳۲:۵۸ عصر)
#7
با تشکر بی نهایت از شما
لطفا ادامه دهید
پاسخ
 سپاس شده توسطشماره مجازی (۱۴۰۱/۸/۲۶، ۰۱:۵۲:۵۰ صبح) ، گراف مسنجر (۱۴۰۱/۱۰/۳، ۰۴:۱۴:۵۱ صبح) ، چارتر ۴۲۴ (۱۴۰۲/۹/۱۲، ۱۵:۱۶:۱۵ عصر)


موضوع‌های مشابه…
موضوع نویسنده پاسخ بازدید آخرین ارسال
  آموزش اجرا کردن ویدئو توسط html5 در وب سایت maryamsitedar 0 1,668 ۱۳۹۳/۴/۲۳، ۱۲:۱۴:۳۴ عصر
آخرین ارسال: maryamsitedar

پرش به انجمن:


کاربرانِ درحال بازدید از این موضوع: 1 مهمان