معماری
ضعیفبد نیستمتوسطخوبعالی (2 votes, average: 5٫00 out of 5)
Loading...

آموزش طراحی وب – قسمت سوم HTML5

با نام و یاد خداوند بخشنده

ضمن عرض تبریک عید سعید فطر خدمت شما کاربران گرامی وب سایت میهن لرن، هم اکنون مفتخر به ارائه سومین قسمت از آموزش طراحی وب خدمت شما عزیزان می باشیم. این قسمت و قسمت بعدی بطور کامل به HTML 5 یکی از بروزترین های وب اختصاص دارد و خوشحالیم که برای اولین بار بصورت فارسی آموزش جامع و کاملی از HTML5 بصورت فیلم آموزشی و کتاب الکترونیکی (PDF) خدمتتان ارائه می دهیم.

آموزش فارسی HTML5
آموزش فارسی HTML5

همچنین در ادامه مطلب محتوای آموزشی را بصورت متنی نیز در پست قرار میدهیم تا آن دسته از دوستانی که قادر به دانلود نیستند بتوانند در همین پست آموزش ببینند هرچند که برای آموزش و درک کامل پیشنهاد می شود حتما فیلم آموزش به همراه فایل های تمرینی دانلود شود.

در این قسمت خواهیم آموخت :

– مرور بر قسمت قبلی، خلاصه ای از آموزش HTML
– معرفی HTML 5 و ویژگی های آن و تغییرات آن نسبت به ورژن قبلی HTML
– معرفی عناصر جدید (عناصر سمانتیک، عناصر پویا، عناصر چند رسانه ای، عناصر رسم گرافیک)
– انجام تمرین با عناصر معرفی شده
– بررسی کامل عنصر گرافیکی canvas و کارکردن انواع مثال ها با آن برای رسم تصاویر و ایجاد انیمیشن در صفحات وب

HTML5
HTML5 Training

خلاصه درس قبلی / مروری بر HTML

همانطور که گفتیم زبان HTML مخفف HyperText Markup Language می باشد، یک زبان نشانه گذاری می باشد که اولین نسخه اچ تی ام ال در سال 1991 منتشر شد که از سال های 1991 تا 1998 اچ تی ام ال از ورژن 1 به ورژن 4 (1999) توسعه داده شد. ساختار این زبان بر اساس کار با عناصر(برچسب ها) می باشد و این زبان همراه با CSS هسته فناوری ساخت صفحات وب هستند.

در واقع برای اینکه بتوانیم یک صفحه وب طراحی کنیم باید ابتدا خوب Tag های اچ تی ام ال را یادبگیریم و بر آنها تسلط پیدا کنیم سپس با ترکیب HTML و CSS می توانیم صفحات زیبایی را ایجاد کینم.

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

ساختار صفحات وب
ساختار صفحات وب

مشاهده می کنید که یک صفحه وب از 5 قسمت اصلی تشکیل می شود، این قسمت ها در درس پیشین توضیح داده شده اند و همچنین در درس جدید بدلیل معرفی تگ های سمانتیک html 5 باز هم معرفی و توزیح داده می شوند و شما نیز با مشاهده تصویر بخوبی با ساختار یک صفحه وب اشنا می شوید.
همچنین به معرفی ساختار اچ تی ام ال پرداختیم، که به شکل زیر بود:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>


گفتیم یک صفحه اچ تی ام ال با تگ <html> باز می شود و با تگ </html> بسته می شود، کلا همه ی تگ هایی که استفاده می کنیم باید بعد از به اتمام رسیدن کار با انها بسته شوند به جز چند عنصر مثل </br>, </hr> .. که تکی بودند.
در بین دو تگ head کد هایی قرار می گرفت که در صفحه نمایش داده نمی شدند، مثل کد های فراخوانی یک فایل سی اس اس، جی کوئری، جاوا اسکریپت و یا متاتگ ها که کلمات کلیدی برای موتور های جستجو بودند در این قسمت قرار می گرفتند و همچنین تگ title برای نمایش عنوان صفحه.
در مقابل بین تگ های body عناصری قرار می گرفت که باید در صفحه نمایش داده می شدند مثل div ها برای ایجاد کادر ها، جداول، تصاویر، متن ها و پاراگراف ها و دیگر عناصری که می خواستیم توسط مرورگر به کاربر نمایش داده شوند در این قسمت می نوشتیم.
این شکل کلی یک صفحه اچ تی ام ال بود که در نهایت با پسوند .html ذخیره می شد.
چند عنصر مهم که داشتیم یکی img برای نمایش تصاویر، div برای ایجاد کادرها که در نهایت ساختار صفحه را با آن بنا می کردیم، table برای ایجاد جداول، تگ های فراخوانی فایل های بیرونی مثل سی اس اس، جاوا و..
بیش از این وارد جزئیات html نمی شویم و بهتر است برای یادگیری آن به درس پیشین مراجعه کنید، هرچند تمامی آنها در این درس و درس های آتی باز هم تکرار خواهند شد و لازمه کار ما هستند.

 

معرفی اچ تی ام ال 5

HTML 5 استاندارد اصلی بعد از HTML 4.01 و XHTML 1.1 می باشد. استانداردی برای ساختار و ارائه محتوا در شبکه جهانی وب.
این زبان حاصل همکاری بین کنسرسیوم جهانی وب W3C و WHATWG (Web Hypertext Application Technology Working Group) می باشد.
اولین تغییری که می توان در نسخه جدید دید تغییر <!DOCTYPE> می باشد، به تصویر زیر نگاه کنید تا متوجه شوید.

HTML Doctype's
HTML Doctype’s

 

استاندارد جدید دارای ویژگی هایی مانند:

  • پخش ویدئو و صدا، ایجاد انیمیشن ها، درگ و دراپ (کشیدن و رها کردن) که قبلا بطور مستقل انجام نمی شد و نیاز به برنامه ها و افزونه های جانبی مانند فلش پلیر، Microsoft Silverlight و Google Gears بود، اما هم اکنون بطور مستقل توسط اچ تی ام ال 5 انجام می شود! / کاهش نیاز به افزونه های خارجی.
  • عناصر مفهومی جدید مانند <header>, <footer>, and <section> که باعث بهینه سازی کد نویسی برای موتور های جستجو می شود.
  • ورژن دوم فرم ها، که در آن خصوصیات جدیدی برای <input> معرفی شده است.
  • ذخیره سازی محلی بدون نیاز به افزونه های جانبی.
  • وب سوکت: نسل بعدی تکنولوژی ارتباط دوسویه برای اپلیکیشن های وب.
  • رویداد های ارسالی سرور(Server-Sent Events): رویداد هایی که از وب سرور به مروگر وب جریان دارند (SSE).
  • Canvas: رسم اشکال دو بعدی در صفحات وب با استفاده از جاوا اسکریپت.
  • موقعیت جغرافیایی(Geolocation): توسط این قابلیت پس از اجازه کاربر این امکان بوجود می آید که موقعیت مکانی او نمایش داده و دریافت شود.
  • میکرودیتا(Microdata): موثر در سئو سایت.

و چندین ویژگی و خاصیت جدید دیگر که در صورت نیاز در طول آموزش معرفی خواهند شد.

تغییر عمده در اچ تی ام ال 5 جهت داشتن ساختاری بهتر و مفهومی که باعث میشود صفحات وب برای موتور های جستجو بهینه تر شود تگ های جدیدی می باشد که تگ های مفهومی(semantic tags) نامیده می شوند، در واقع این عناصر هسته و ساختار اصلی یک صفحه وب را تشکیل خواهند داد. در زیر عناصر جدید معرفی می شوند:

 

  • تگ header : نشان دهنده هدر صفحه یا هدر یک section می باشد. و شامل عنوان(title) صفحه و یا لینک های اصلی(navigation links) می باشد.
  • تگ footer : نشان دهنده فوتر یک صفحه یا یک section می باشد که می تواند شامل اطلاعاتی که در پایین یک صفحه یا سکشن باید نمایش داده شود مانند مشخصات نویسنده، کپی رایت، اطلاعات تماس و.. باشد.
  • تگ section : این تگ نشان دهنده یک سند کلی است و می تواند همراه با تگ های h1 تا h6 استفاده شود، همچنین داخل یک سکشن می تواند سکشن دیگری هم قرار بگیرد که خود شامل هدر، فوتر و.. باشد.
  • تگ main : این تگ تنها باید عملکرد و محتوای مرکزی صفحه وب را در بر بگیرد. تنها باید یک عنصر main در صفحه وجود داشته باشد و برخلاف سایر عناصر این عناصر نمی تواند در داخل دیگر عناصر قرار بگیرد.
  • تگ article : این تگ برای قسمت هایی مثل پست های وبلاگ استفاده می شود.
  • تگ aside : این تگ در معنی به کنار مطلب اشاره دارد و کاربردش اینطور است مطالب مرتبط به پست که از اهمیت کمتری برای موتور های جستجو برخوردارند مثل مشخصات نویسنده پست، لینک ها(البته نه لینک های اصلی) و..
  • تگ nav : نشان دهنده ناوبار یک section می باشد. لینک هایی که درون ناوبار باشند به ترتیب کنار هم قرار می گیرند. لینک های اصلی یک صفحه در ناوبار قرار میگیرند.
  • تاکنون عناصر مفهومی اصلی را معرفی کردیم، هم اکنون به معرفی دیگر عناصر می پردازیم:
    • تگ dialog : از این تگ برای نشانه گذاری یک مکالمه می تواند استفاده شود.
    • تگ figure : از عنصر img داخل این تگ برای نمایش تصاویر و عنوان آنها در تگ figcaption استفاده می شود.
    • تگ meter : نمایش یک نوار اندازه گیری، مثل میزان استفاده شده از فضای حافظه 60% از 100% .

    <meter value=”6″ min=”0″ max=”10″>6 our of 10</meter>

    <meter value=”0.6″ >60%</meter>

    • تگ time : جهت تعریف زمان.

    <time datetime=”2015-08-20″>August 2015</time>

    • تگ Progress: نمایش میزان پیشرفت یک کار.

Progress HTML TAGهمچنین با استفاده از دستورات جاوا می توانیم کاری کنیم که این نوار در واحد های زمانی که مشخص میکنیم پیشرفت کند و رشد داشته باشد، بعنوان مثال به کد زیر توجه کنید:

<script>
setInterval(updateProgessBar, 200);
function updateProgessBar() {
var progressBar = document.getElementById(“progressBar”);
progressBar.value += 1;
}
</script>
<body>
<progress id=”progressBar” value=”0″ max=”100″></progress>
</body>

مشخص کرده ایم هر 200 میلی ثانیه 1 واحد اضافه شود و به این ترتیب نوار پیشرفت میکند.
– تگ wbr : ایجاد یک خط جدید.
– تگ details : افزودن توزیحات بیشتر که میتواند برای کاربر قابل مشاهده باشد یا نه.

<details>
<summary>Table of contents</summary>
<ul><li>Lesson 1</li>
<li>Lesson 2</li>
<li>Lesson 3</li>
<li>Lesson 4</li>
<li>Lesson 5</li></ul>
</details>
</body>

حاصل این کد را در تصویر زیر می توانید مشاهده کنید
SummaryAndDetailsTag

<!DOCTYPE html>

<html>

   <head>

     <meta charset=”utf-8″>

     <title>…</title>

   </head>

   <body>

     <header>…</header>

     <main>

     <nav>…</nav>

     <article>

         <section>

           …

         </section>

     </article>

     <aside>…</aside>

     </main>

     <footer>…</footer>

   </body>

</html>

HTML4 To HTML5

تصویر زیر را مشاهده کنید تا تگ های سمانتیک توضیح داده شده برایتان قابل درک باشند:

HTML5 New Semantic Elements

هدف ما از این تصویر و توضیح این تگ های سمانتیک(Semantic) این بود که شما را به این درک برسانیم و متوجه شوید که طراحی هم اکنون برای موتور های جستجو بسیار مفهومی تر شده، بطوری که ربات های موتور های جستجو می توانند متوجه شوند که کدام بخش را بررسی و ایندکس کنند و نسبت به کدام بخش بی توجه باشند بعنوان مثل ربات موتور جستجو وقتی به تگ aside می رسد متوجه می شود که این تگ برای چیست و چرا اهمیتی ندارد و یا برعکس تگ های header و article چرا دارای اهمیت هستند.

و اما عناصر جدید رسانه ای:

  • تگ audio : تعرف محتوای صوتی.
  • تگ video : تعریف محتوای تصویری.
  • تگ embed : تعریف یک ظرف برای برنامه های خارجی مانند افزونه ها.
  • تگ source : تعریف منبع رسانه صدا یا تصویر.
  • تگ track : تعریف متن برای صدا و تصویر.

عناصر گرافیکی :

  • تگ canvas : جهت رسم گرافیک دوبعدی.
  • تگ svg : گرافیک برداری مقایس پذیر. رسم گرافیک در صفحات وب بطوری که با زوم کردن از کیفیت گرافیک کاسته نشود. این تگ بصورت درون خطی در اچ تی ام ال 5 قرار گرفت.

و اما در مقابل برخی از تگ ها در اچ تی ام ال 5 حذف شدند :

Removed-Elements-from-HTML5

هم اکنون باتوجه به ساختاری که از اچ تی ام ال 5 یادگرفتیم و درک کردیم قصد داریم یک صفحه وب ساده به شکل زیر طراحی کنیم.

HTML5 Sample Web Page

این صفحه را که مشاهده می کنید با استفاده از تگ های مفهومی اچ تی ام ال 5 و سی اس اس طراحی شده است، خیلی ساده و راحت، کد طراحی این صفحه را در فایل PDF و فیلم آموزشی می توانید مشاهده کنید.

 

فرم ها در HTML 5 / Web Forms 2.0

خب دوستان عزیز، در بالا عناصر جدید و همچنین ویژگی های جدیدی که به اچ تی ام ال 5 افزوده شده را به شما معرفی کردیم و در ادامه هر یک از مباحث بالا را باز می کنیم تا بطور کامل اچ تی ام ال 5 را فرابگیریم و همچنین در قسمت های آتی با کمک این زبان یک صفحه وب را طراحی کنیم.

یکی از تغییرات که در اچ تی ام ال 5 ایجاد شده بود گفتیم که فرم های ورژن 2 در این نسخه از اچ تی ام ال ارائه شد که با تغییراتی خوبی رو به رو بود که هم اکنون میخواهیم فرم ها در اچ تی ام ال 5 را بیاموزیم.

فرم ها در اینجا نسبت به ورژن قبلی یک درجه از نظر نشانه گذاری معنایی بهبود یافته اند و مقدار زیادی از اسکریپت های خسته کننده حذف شده اند.

  • مقادیر جدید در خصوصیت Type عنصر input در اچ تی ام ال 5

اگر یادتان باشد در فرم ها وقتی میخواستیم ورودی خاصی مثلا از نوع رمز، فایل یا .. ایجاد کنیم آن مقدار را در Type می نوشتیم بعنوان مثال مقادیر text, password, radio, file, textarea و.. بعنوان مثال

ورودی متن برای نام:

<input type=”text” id=”firstname”>

دکمه برای انتخاب جنسیت و سپس ثبت:

<input type=”radio” name=”jensiyat” value=”male”> Male<br>

     <input type=”radio” name=”jensiyat” value=”female”> Female<br>

     <input type=”submit” value=”send”> <input type=”reset”>

در اچ تی ام ال 5 نیز مقادیر جدید اضافه شد که در زیر آنها را نام می بریم و توزیح می دهیم.

مقدار datetime : تاریخ و زمان (سال، ماه، روز، ساعت، دقیقه، ثانیه، کسری از ثانیه) مطابق با ISO 8601 با تنظیم منطقه زمانی به UTC .

مقدار datetime-local : انتخاب تاریخ و زمان محلی.

مقدار date : تاریخ (سال، ماه، روز) مطابق با ISO 8601 .

مقدار time : زمان (ساعت، دقیقه، ثانیه، کسری از ثانیه) مطابق با ISO 8601 .

مقدار range : یک دامنه از اعداد را می توانید مشخص کنید.

Range Type in HTML5نمونه دیگر:

0%<input type=”range” name=”percentComplete” min=”0″ max=”100″
step=”5″ value=”50″>100%

HTML5 Range TYPE

مقدار number : تنها مقدار عددی می پذیرد و می توانیم ویژگی گام افزایش هم برای آن مشخص کنیم.

مقدار email : فقط مقدار ایمیل می پذیرد.

مقدار url : فقط مقدار آدرس می پذیرد.

مقدار color : برای ایجاد انتخابگر رنگ از این مقدار استفاده می شود.

HTML5 Color Type

  • عناصر جدید فرم
  • تگ datalist : ایجاد یک لیست از گزینه های از پیش تعریف شده برای یک فیلد ورودی / مثال: همانند وقتی که یک واژه را می خواهید در موتور های جستجو سرچ کنید، چندین کلید واژه مرتبط پیشنهاد می شود.

<input list=”browsers”>

<datalist id=”browsers”>

<option value=”Internet Explorer”>

<option value=”Firefox”>

<option value=”Chrome”>

<option value=”Opera”>

<option value=”Safari”>

</datalist>

  • تگ keygen : این تگ تولید کننده یک جفت کلید است(key-pair generator)، برای ایجاد امنیت بیشتر بطوری که وقتی یک فرم ارسال می شود یک کلید عمومی و یک کلید خصوصی ایجاد می شود که کلید خصوصی در سمت کاربر ذخیره می شود و کلید عمومی به سرور ارسال می شود، که این کلید برای کاربر حکم یک گواهی را دارد برای شناسایی های آتی.

<form action=”demo_keygen.asp” method=”get”>

Username: <input type=”text” name=”usr_name”>

Encryption: <keygen name=”security”>

<input type=”submit”>

</form>

  • تگ output : برای انواع خروجی بکار می رود بعنوان مثال نتیجه یک محاسبه ریاضی.

<form oninput=”x.value=parseInt(a.value)+parseInt(b.value)”>0

<input type=”range” id=”a” value=”50″>100 +

<input type=”number” id=”b” value=”50″>=

<output name=”x” for=”a b”></output>

</form>

 

  • خصوصیات جدید برای تگ input :

 

  • Autocomplete

این خصوصیت مشخص میکند که ایا بر اساس داده های قبلی که کاربر وارد کرده فیلد بصورت خودکار هنگام تایپ توسط مرورگر تکمیل شود یا خیر. همچنین این خصوصیت می تواند برای یک فیلد فعال و برای یک فیلد غیرفعال باشد، لطفا به مثال زیر توجه کنید.

<form action=”demo_form.php” autocomplete=”on”>
First name:<input type=”text” name=”fname”><br>
Last name: <input type=”text” name=”lname”><br>
E-mail: <input type=”email” name=”email” autocomplete=”off”><br>
<input type=”submit”>
</form>

  • Autofocus

روی هر فیلد که این خصوصیت فعال باشد، باعث می شود بعد از باز شدن مکان نما بطور خودکار به برای تایپ به روی آن فیلد برود.

<input type=”text” name=”fname” autofocus>

  • Form

برای اتصال یک فرم به چند فرم.

<form action=”demo_form.php” id=”form1″>
First name: <input type=”text” name=”fname”><br>
<input type=”submit” value=”Submit”>
</form>

بعنوان مثال، نام خانوادگی خارج از فرم نوشته شده ولی قسمتی از فرم محسوب می شود.

Last name: <input type=”text” name=”lname” form=”form1″>

  • formaction
  • formenctype

چگونگی رمزنگاری داده ها.

<form action=”demo_post_enctype.php” method=”post”>
First name: <input type=”text” name=”fname”><br>
<input type=”submit” value=”Submit”>
<input type=”submit” formenctype=”multipart/form-data”
value=”Submit as Multipart/form-data”>
</form>

  • formmethod

روش ارسال اطلاعات فرم به سرور. بصورت گِت یا پُست

  • formnovalidate

درصورتی که فرم برای ارسال به سرور نیاز به اعتبارسنجی یا novalidate داشته باشد با این صفت لغو خواهد شد و نیازی به اعتبارسنجی نیست.

  • Formtarget

نشان می دهد پاسخی که از سرور دریافت شده کجا نمایش داده شود، در صفحه جاری، صفحه جدید یا. ..

<input type=”submit” formtarget=”_blank”
value=”Submit to a new window”>

  • height and width
  • list

یک دیتالیست را به فیلد متصل می کند.

<input list=”browsers”>

<datalist id=”browsers”>
<option value=”Internet Explorer”>
<option value=”Firefox”>
<option value=”Chrome”>
<option value=”Opera”>
<option value=”Safari”>
</datalist>

HTML5 Datalist TAG

  • min and max

این خصوصیت حداقل و حداکثر مقدار ممکن برای یک فیلد را مشخص میکند.

اعداد بین 1 تا 5

Quantity (between 1 and 5):
<input type=”number” name=”quantity” min=”1″ max=”5″>

فقط مجاز به ثبت تاریخ بعد از سال 2000

Enter a date after 2000-01-01:
<input type=”date” name=”bday” min=”2000-01-02″>

  • multiple

مقادیر متعددی را می توان برای یک عنصر اینپوت مشخص کرد.

  • Pattern

مشخص کردن یک الگو برای فیلد، مثلا آیا فقط با عدد شروع شود یا اینکه مجاز به دریافت حداکثر چند حرف باشد، یا فقط عدد باشد و یا فقط متن.

  • ^ : نشانه شروع می باشد. به طور مثال دستور bcd^ به معنی هر عبارتی است که با bcd شروع شود.
  • $ : نشانه پایان می باشد. به طور مثال دستور $bcd به معنی هر عبارتی است که در انتها به bcd ختم شود.
  • + : نشانه تکرار است و اگر پشت عبارتی قرار بگیرید باید حداقل یکبار تکرار شود.
  • * : همانند + می باشد با این تفاوت که آن عبارت می تواند تکراری نداشته باشد.
  • ? : اگر پشت عبارتی قرار بگیرد یعنی اینکه آن عبارت باید صفر یا یک بار تکرار شود.
  • () : برای قسمت بندی عبارات به زیر عبارات و اولویت بندی نیز می باشد.
  • [] : لیستی از کاراکترها که می خواهیم تطبیق دهیم در این دو کروشه قرار می گیرد.
  • [ ^] : لیستی از کاراکترهائی که نمی خواهیم تطبیق داده شوند از این عبارت استفاده می کنیم.
  • d\ : نشانه ارقام می باشد یعنی وقتی این عبارت بیاید منظور یکی از ارقام است.
  • D\ : نشانه هر کاراکتری غیر از رقم می باشد.
  • w\ : نشانه حرف یا عدد می باشد و کاراکترهای خاص نیست و معادل [a-zA-Z_0-9] است.
  • W\ : نشانه کاراکترهای خاص می باشد و عدد یا حروف یا space نیست.
  • s\ : نشانه کاراکتر space می باشد.
  • S\ : نشان هر کاراکتری غیر از space می باشد.
  • {} : مشخص کننده تعداد تکرارا می باشد و اگر داخل آن یک عدد نوشته شود یعنی اینکه عبارت قبل از آن دقیقا باید به تعداد آن عدد تکرارا شود ولی اگر دو عدد نوشته شود عبارت قبل از آن باید تکراری بین آن دو عدد باشد.
  • | : بمعنی یا است. بعنوان مثال a|b یعنی یا a یا b
  • – : بمعنی تا است. بعنوان مثال a-z یعنی از a تا z
  • . : می تواند هر کاراکتری باشد.

 

  • Placeholder

این ویژگی عبارتی را که ما مشخص میکنیم بصورت کم رنگ داخل فیلد می نویسد و وقتی که شروع به تایپ درون فیلد کنیم آن عبارت ناپدید می شود.

<input type=”text” name=”fname” placeholder=”First name”>

Placeholder in HTML5 Forms

  • Required

در صورتی که از این صفت در هر یک از فیلد ها استفاده کنیم، پر بودن آن فیلد قبل از ارسال به سرور اجباری می شود.

Username: <input type=”text” name=”usrname” required>

 

  • step

فاصله بین اعداد را مشخص می کند، بعنوان مثال اگر مقدار آن 3 باشد اعداد بصورت 0،3،6،9… و یا بلعکس از طرف منفی هم به همین شکل

<input type=”number” name=”points” step=”3″>

 

ویژگی جدید کشیدن و رها کردن / Drag and Drop

توسط این ویژگی که در اچ تی ام ال 5 امکان پذیر شد شما براحتی می توانید توسط ماوس عناصر موجود در صفحه را جابجا و یا حذف کنید. قبلا در اچ تی ام ال 4 برای انجام این عملیات نیاز به کدنویسی پیچیده جاوا اسکریپت و یا جی کوئری بود.

هم اکنون با ذکر یک مثال و معرفی دستورات با این ویژگی آشنا می شوید.

کد زیر باعث می شود تا شما بتوانید یک تصویر را بین تو باکس که توسط div ایجاد شده اند جابجا کنید:

کد را از داخل فایل PDF بردارید و یا فایل های تمرینی.

توزیح کد : ابتدا در تگ img مشاهده میکنید که خاصیت draggable برابر با True است، پس این باعث می شود تا برای این تصویر امکان جابجایی بوجود آید و همچنین یکی دیگر از خصوصایت تگ img خصوصیت ondragstart می باشد که توسط رویداد (drag(event مقدار دهی شده است، این مشخص کننده عنصری که میخواهد جابجا شود می باشد، بعنوان مثال وقتی ما روی تصویر جهت جابجایی کلیک می کنیم متد   ()dataTransfer.setData اطلاعات عنصری که می خواهد جابجا شود را می گیرد، ای دی آن را در حافظه مرورگر قرار میدهد. در دوتا div که داریم هم رویداد هایی تعریف کرده ایم، رویداد ondragover باعث می شود تا این اجازه داده شود که عنصری که قرار است منتقل شود به این کادر انداخته شود، درواقع قابلیت دریافت عنصر درگ شده را فعال کرده ایم. و مقدار allowDrop را هم در بالا با ev.preventDefault(); مشخص کرده ایم، چونکه بطور پیشفرض امکان جابجایی عناصر وجود ندارد اما توسط این دستور جلوگیری می شود و امکان جابجایی داده ها بوجود می آید. و در نهایت که عنصر را برای درگ گرفتیم و مشخصات آن را دریافت کردیم باید مکانی را مشخص کنیم تا عنصر بتواند به آنجا کشیده شود و قرار گیرد، پس کد زیر مشخص کننده این موضوع می باشد.

function drop(ev)

{

ev.preventDefault();

var data=ev.dataTransfer.getData(“Text”);

ev.target.appendChild(document.getElementById(data));

}

ev.target.appendChild هم باعث می شود تا عنصر به تگ div مرتبط شود.

 

اجرا فایل های چند رسانه ای در وب توسط عناصر اچ تی ام ال 5

تا قبل از html 5 هزگز استانداردی برای نمایش ویدئو و یا پخش صدا در وب وجود نداشت و فقط بواسطه افزونه های جانبی مانند فلش پلیر این امکان بوجود می آمد که فایل های چند رسانه ای در وب اجرا شوند. و این قابلیت بسیار شگفت انگیزی بود که توسط استیوجابز ابداع شد که با یک تگ اچ تی ام ال بدون دخالت هیچ افزونه جانبی بتوان فایل های مالتی مدیا را اجرا کرد. در ادامه این عناصر را آموزش خواهیم داد.

کد نمونه و توزیحات برای عنصر ویدئو <video> :

<video width=”320″ height=”240″ controls>

<source src=”/movie.mp4″ type=”video/mp4″>

<source src=”/movie.ogg” type=”video/ogg”>

Your browser does not support the video tag.

</video>

ابتدا در هر تگ ویدئو خصوصیت عرض و ارتفاء آنرا مشخص کنید، خصوصیت controls که در تگ ویدئو آمده برای افزودن کلید های کنترلی پخش، توقف و صدا می باشد.

خصوصیات دیگری هم این تگ دارد:

Audio: یک مقدار muted دارد که اگر آنرا فعال کنید صدای ویدئو قطع خواهد شد.

Autoplay: با مقدار autoplay مقدار دهی می شود، و همانطور که از نامش مشخص است به محض بالا امدن صفحه ویدئو پخش خواهد شد.

Loop: بعد از اتمام پخش ویدئو بطور خودکار مجدد انرا پخش می کند.

Poster: تصویر پیش فرض برای ویدئو و مقدار ان ادرس اینترنتی یک عکس می باشد.

خب این از خصوصیات و صفات تگ ویدئو، و اما مشاهده می کنید که درون تگ ویدئو 2 تگ دیگر به نام source وجود دارد، کار این تگ ها به این شکل است که ادرس فیلمی که می خواهیم پخش شود باید در خصوصیت src آنها قرار بگیرد و اما بالا چرا دو تگ سورس داریم به این دلیل که سورس اولی فرمت mp4 دارد که در اینترنت اکسپلورر، سافاری و کروم پخش می شود و دومی در سایر مرورگر ها و متنی هم که بعد از این دو تگ نوشتیم یعنی در صورتی که مرورگر قدیمی باشد و از تگ ویدئو پشتیبانی نکند بواسطه این نوشته به کاربر اعلام شود.

خو است که بدانید هم اکنون سه فرمت توسط این تگ پشتیبانی می شود، که در جدول زیر بخوبی می توانید متوجه شوید چه فرمتی در چه مرورگری پشتیبانی می شود و حتی شما در کد نویسی های خود می توانید ترکیبی از فرمت ها را فراخوانی کنید تا اطمینان 100% داشته باشید که ویدئو شما برای همه قابل نمایش خواهد بود مثل مثال بالا که دیدید دو تگ سورس بکار بردیم.

 HTML5 Video Tag - Formats can support

ضمنا اگر دوست داشته باشید حتی می توانید برای فیلم خود زیرنویس هم قرار دهید! بله با تگ track که در اول هم معرفی شد. کافی است در ادامه تگ های سورس بالا تگ ترک را قرار دهید به شکل زیر:

<track src=”subtitles_en.vtt” kind=”subtitles” srclang=”en” label=”English”>

<track src=”subtitles_fa.vtt” kind=”subtitles” srclang=”fa” label=”farsi”>

در قسمت src باید ادرس فایل زیر نویس مربوط به زبان مورد نظر را قرار دهید.

 

کد نمونه و توزیحات برای عنصر صدا <audio> :

<audio controls>
<source src=”horse.ogg” type=”audio/ogg”>
<source src=”horse.mp3″ type=”audio/mpeg”>
Your browser does not support the audio element.
</audio>

این عنصر دقیقا همانند عنصر نمایش فیلم می باشد فقط برخی از صفات و عنصر های داخلی را ندارد، مثلا این واضح است که دیگر عنصر source یا زیرنویس اینجا معنا و مفهومی ندارد یا خصوصیت poster برای تگ audio کاربردی ندارد.

در جدول زیر نیز فرمت های پیشتیبانی شده در مرورگر ها نمایش داده می شود.

HTML5 Audio Tag - Formats

گرافیک در صفحات وب با عنصر جدید Canvas

عنصر Canvas به کمک جاوا اسکریپت بصورت آسان و قدرتمند عمل میکند و قادر به رسم تصاویر بیت مپ و رسم انواع اشکال و همچنین در سطح پیشرفته تر قادر به ایجاد انیمیشن ها در صفحه وب می باشد.

ویژگی خوب تصاویر گرافیک برداری این است که با هرچه کشیده شدن و زوم کردن هیچ از کیفیت آنها کاسته نمی شود.

برای شروع لازم است یک عنصر canvas تعریف کنیم و برای آن یک ای دی هم مشخص کنیم. همانند کد زیر:

<canvas id=”myCanvas” width=”200″ height=”200″></canvas>

خب، صفات بالا را همیشه باید تعریف کنیم یعنی ای دی، طول و عرض.

همچنین می توانید با استفاده از سی اس اس به عنصر canvas خود استایل بدهید:

     <style>

         #mycanvas{border:1px solid red;}

     </style>

حالا به کد زیر توجه کنید، تا باهم یک مستطیل رسم کنیم:

<script>
var c=document.getElementById(“myCanvas”);
var ctx=c.getContext(“2d”);
ctx.fillStyle=”#FF0000″;
ctx.fillRect(0,0,150,80);
</script>

توسط اولین خط ما از روی ای دی عنصر myCanvas را پیدا می کنیم.

متد بعدی getContext که مربوط به عنصر canvas می باشد هم مقدار 2d می گیرد. و در خط بعدی هم رنگ مستطیل را مشخص می کنیم و سپس در fillRect به این شکل مقدار دهی میکنیم: دو پارامتر اول که با 0و0 مشخص کرده ایم گوشه سمت چپ بالا می باشد و سومی عرض مستطیل یا width از محور x ها و چهارمی هم ارتفاع یا height از موقعیت y هاست. پس در اینجا یک مستطیل قرمز رنگ از نقطه 0،0 با عرض و طول 80*150 .. جالب است که بدانید رنگ علاوه بر اینکه یک مقدار ثابت باشد می تواند طیفی از رنگ ها (gradient) نیز باشد.

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

ادامه آموزش canvas در فایل PDF و فیلم آموزشی طراحی وب.

 

دانلود
دانلود فیلم اموزشی سومین قسمت اموزش طراحی وب به همراه کتاب الکترونیکی این قسمت و فایل های تمرینی

دانلود فیلم آموزشی

مشاهده آنلاین فیلم آموزشی

– دانلود کتاب الکترونیکی قسمت سوم (PDF)

دانلود فایل های تمرینی قسمت سوم / HTML5

 

کیفیت فیلم آموزشی : فوق العاده بالا / 720p – زمان : 2 ساعت – حجم : 200 مگابایت – تولید کننده : میهن لرن

تعداد صفحات کتاب الکترونیکی : 43 صفحه

* منتظر سوالات و همچنین نظرات سازنده شما هستیم، لطفا در صورتی که این آموزش را پسندیدین آنرا به دوستان خود نیز معرفی کنید. جهت دریافت قسمت های بعدی به محض انتشار می توانید در خبرنامه سایت و یا صفحات رسمی ما در شبکه های اجتماعی عضو شوید.

مطالب مرتبط:

دانلود آموزش طراحی وب (طراحی سایت با فتوشاپ) – قسمت 1

دانلود آموزش طراحی وب (آموزش HTML) – قسمت 2

 

پیشنهاد هایی که شاید دوست داشته باشید:

پکیج کامل آموزشی سیسکو CCNA
پکیج کامل آموزشی سیسکو CCNA

مجموعه آموزشی کامل آموزش CCNA سیسکو شامل : فصل اول و فصل دوم آموزش فارسی CCNA – سناریو ها – نرم افزار های مورد نیاز – کتاب های سیسکو (کتاب های رسمی انگلیسی و کتاب های فارسی ) – نمونه سوالات test king

* جهت دریافت این پکیج کامل اینجا کلیک کنید.

 

 

 

CCNA Training | آموزش CCNA
CCNA Training | آموزش CCNA

پکیج کامل آموزش CCNA سیسکو شامل : فصل اول آموزش فارسی CCNA – سناریو ها – نرم افزار های مورد نیاز – کتاب های سیسکو (کتاب های رسمی انگلیسی و کتاب های فارسی )

جهت دریافت این پکیج کامل اینجا کلیک کنید.

 

 

مطالب مرتبط با شبکه :

– * دانلود پکیج کامل اموزش میکروتیک MTCNA شامل فیلم ها و تمامی نرم افزار های مورد نیاز کار با روتر های میکروتیک

– دانلود آموزش شبکه

دانلود رایگان آموزش CCNA – قسمت اول

دانلود رایگان آموزش CCNA – قسمت دوم

دانلود رایگان آموزش CCNA – قسمت سوم

دانلود رایگان آموزش CCNA – قسمت چهارم

دانلود رایگان آموزش CCNA – قسمت پنجم

دانلود رایگان آموزش CCNA – قسمت ششم

دانلود رایگان آموزش CCNA – قسمت هفتم

دانلود رایگان آموزش CCNA – قسمت هشتم

دانلود رایگان آموزش CCNA – قسمت نهم

دانلود رایگان آموزش CCNA – قسمت دهم

دانلود رایگان آموزش CCNP T-Shoot – قسمت اول

دانلود رایگان آموزش CCNP T-Shoot – قسمت دوم

همچنین ببینید

تزریق سازنده در مقابل تزریق setter

مقایسه دو روش SI و CI در فریمورک اسپرینگ

به نام خدای مهربان همانطور که در مقاله های قبلی اشاره شد، فریمورک اسپرینگ از …

2 دیدگاه

  1. خیلیییییییییییییییییییییییییییی عالی بود برای من خیلی مفید بود واقعا خسته نباشید .

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *