telegram

کاربران عزیز ممکن است با مشکلاتی در انجمن مواجه شوید . لطفا تحمل فرمایید تا مشکلات رفع گردد (August 15, 2016)

responsive

کاربران عزیز ممکن است با مشکلاتی در انجمن مواجه شوید . لطفا تحمل فرمایید تا مشکلات رفع گردد (August 15, 2016)

امتیاز موضوع:
  • 0 رأی - میانگین امتیازات: 0
  • 1
  • 2
  • 3
  • 4
  • 5
آموزش قدم به قدم HTML5
#1
[تصویر:  w6btq7n0upg7to9t86sk.jpg]
سلام .
در این تاپیک قصد داریم آموزش html5 را به صورت مبتدی تا پیشرفته برای شما عزیزان آغاز کنیم . سوالات مربوط به همین آموزش را در همین تاپیک مطرح کنید در سریعترین زمان ممکن پاسخگوی شما خواهیم بود . 
معرفی زبان HTML 5 
HTML 5 ، ورژن جدید زبان طراحی صفحات وب یعنی HTML است . این زبان به عنوان جدیدترین استاندارد طراحی صفحات وب معرفی شده است و همچنین استاندارد کدنویسی منطبق بر سایت معروف w3 . 
HTML 4 در سال 99 میلادی به دنیای وب معرفی شد ، ولی از آن زمان تاکنون دنیای وب و نیازهای اینترنتی تغییر زیادی کرده است با توجه به گسترش دنیای وب و سطح درخواست کاربران . . بنابراین این نیاز وجود داشت تا یک استاندارد جدید معرفی شود تا بتواند نیاز های جدید کاربران را بهتر پوشش دهد و برآورده کند .
HTML 5 هنوز در حال بروز رسانی و ویرایش است و مرورگرهای مطرح در تلاشند تا نسخه های جدید آنها ، سازگاری بهتری با این زبان جدید داشته باشد و طبق عکس زیر اکثرا پشتیبانی خود را از این مرورگر اعلام کردند .
 
HTML 5 ، چگونه متولد شد :
HTML 5 ، حاصل همکاری و مشارکت دو نهاد اصلی استاندارد سازی وب یعنی W3C و the Web Hypertext Application Technology Working Group (WHATWG) است . این دو نهاد به صورت مستقل در حال طراحی یک استاندارد برای وب بودند ، ولی در سال 2006 توافق کردند تا با همکاری هم HTML 5 را ایجاد نمایند .
در طراحی HTML 5 قوانین و راهکارهای زیر به صورت اجباری تعیین شد تا رعایت شوند :
تمام قابلیت های جدید باید بر پایه HTML , CSS و جاوا اسکریپت باشند .
باید نیاز به plugin ها و نرم افزارهای جانبی مثل فلش کاهش یابد و تا حد ممکن استفاده نشود .
سیستم عیب یابی و رفع نقص عیب HTML بهبود یابد .
سعی شود در طراحی صفحات وب نیاز کمتری به اسکریپت ها باشد .
HTML 5 باید در اجرا مستقل از سیستم و کامپیوتر باشد .
معرفی ویژگی های جدید در HTML 5 :
در HTML 5 ، ویژگی ها و قابلیت های فراوان جدیدی قرار داده شد است از جمله اسنفده از از المنت های جدید که ما در لیست زیر برخی از این ویژگی های جدید را به صورت مختصر معرفی کرده ایم . سپس در هر بخش جدا به آموزش نحوه کارکرد و استفاده از آنها می پردازیم :
اضافه شدن عناصر جدید در html فایل از جمله :
تغییرات html4 به html5 توسط المنت های جدید .
اضافه شدن تگ < canvas > ، برای طراحی اشیا و اشکال به صورت 2 بعدی .
اصافه شدن تگ < video > و < audio > برای اجرای فایل های صوتی و تصویری بدون نیاز به یک نرم افزار جانبی مثل Flash Player .
کنترل های جدید فرم مثل calendar , email , date و time اضافه شده اند ، که طراحی و برنامه نویسی فرم ها را بسیار ساده می کند .
امکان ذخیره اطلاعات بر روی مرورگر کاربر - این قابیلت تقریبا کار کوکی ها cookie را در صفحات HTML انجام می دهند و بسیار کاربردی است برای برنامه نویسان وب .
نکاتی راجع به نحوه آموزش HTML 5 :
در این بخش آموزشی ، همه آموزش ها بر اساس استاندارهای مرجع های آموزشی رسمی این زبان جمع آوری شده و با مرورگر های مطرح IE , Opera , FireFox و Chrome تست شده اند.
روند این آموزش در ابتدا به این صورت است که به معرفی تگ ها و عناصر و قابلیت های جدید پرداخته و سپس سعی میشه تا با ارایه مثال های عملی و سورس کد آنها ، کاربردشان را توسط مرورگر نشان دهیم تا مفهوم بهتر را درک کنید 

سلام .
با جلسه اول آموزش html5 در خدمتتون هستیم .
در این جلسه به توضیح عناصر یا المنت های جدید در html5 می پردازیم [تصویر:  wub.png]
چه چیزی در html5 جدید است ؟
به کد زیر دقت کنید متوجه تغییرات در ساختار html می شوید که شامل حلاصه شدن کد در المنت های  DOCTYPE  و متای  charset می باشد . که به ترتیب مربوط به معرفی و کد گزاری صفحه می باشند
 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>hello world</title>
</head>
<body>

<!-- your code -->

</body>
</html>

 
عناصر جدید در html 5 :
عناصر جالب و جدیدی اضافه شدند که عبارتند از :
- عناصر معنایی و پایه صفحه html که شامل :  <footer>, <article>, <section>,<header> هستند .
- ویژیگی های جدید برای کار با فرم ها شامل : شماره , تاریخ , زمان , تقویم , ... هستند .
عناصر گرافیکی جدید : <canvas> و <svg>
عناصر مربوط به پخش مدیا :  <audio>و <video>
 
عناصری که در html5 حذف شدند : 
عناصر html4 زیر در html5 کامل حذف شده است .
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
 
پشتیبانی مرورگرهای وب از html5 : 
با گسترش عصر وب و بهبود کارایی مرورگرهای مختلف از جمله chorme , firefox , opera  این مرورگر ها پشتیبانی خود را در نسخه های آخر خود از html5 را اعلام کردند .
پس نگران هیچی نباشید و به راحتی از html5 استفاده کنید و لذت ببرید . 
 
خب این جلسه توضیحی بود مختصر و کاربردی برای شروع جلسه بعد که در مورد عناصر معنایی در html5 است .
موفق و پیروز باشید .
پاسخ
تبلیغات
 تبلیغات  تبلیغات  تبلیغات  تبلیغات
#2
سلام من یه سوالی داشتم میخواستم بپرسم چجوری میتونم یه خط عمودی ایجاد کنم درhtml یا  css???
مثلا این کارو کنم بهتره؟؟؟
<div style="height:250px;width:1px;border-right:1px solid;">
یا این که اینجوری بنویسم؟؟؟
کدومو به کار ببرم؟؟؟بهتر هست سئو یا لود شدن؟؟؟
.rotate{
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
}

<hr class="rotate">
پاسخ
 سپاس شده توسط rezaei ، admin
#3
(2017/06/07، 02:24 AM)raoof نوشته است: دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
سلام من یه سوالی داشتم میخواستم بپرسم چجوری میتونم یه خط عمودی ایجاد کنم درhtml یا  css???
مثلا این کارو کنم بهتره؟؟؟
<div style="height:250px;width:1px;border-right:1px solid;">
یا این که اینجوری بنویسم؟؟؟
کدومو به کار ببرم؟؟؟بهتر هست سئو یا لود شدن؟؟؟
.rotate{
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
}

<hr class="rotate">

سلام !
روش دوم توصیه نمی شود .
پاسخ
 سپاس شده توسط admin ، ahadzadeh


پرش به انجمن:


کاربرانِ درحال بازدید از این موضوع: 1 مهمان
پیام مدیر :
پیام مدیر اینجا قرار گیرد
کلیه حقوق برای انجمن وردپرس ایرانی محفوظ است
  • info@wpir.ir
  • admin@wpir.ir
قدرت گرفته از مای بی بی
SEO by PANGASH