کلمه مولتی مدیا در وب به معنای فایل هایی می باشد که به صورت پیش فرض توسط مرورگر ها پشتیبانی نمیشوند و باید با نصب یک پلاگین بر روی آنها و استفاده از تگ های بالا , از آنها استفاده نمود .

یکی از مشهورترین این پلاگین های adobr flash player می باشد که همان فایل های فلش هست .

دو تگ برای درج یک ویدیو یا موزیک در وب سایت که از html5 به صورت رسمی و استاندارد برای تمامی مرورگر ها رونمایی شد .

همان طور که در آموزش های قبل دیدید , سعی دارم به ساده ترین روش ممکن آموزشی کامل در مورد این تگ ها بنویسم .

تگ video : این تگ به صورت container و Inline Level میباشد که برای درج یک ویدئو در وب سایت به کار میرود .

3 پسوند مجاز برای ویدئو در مرورگرها وجود دارد که عبارت اند از mp4 , webm و ogg . پسوندی که تمامی مرورگرها قادر به اجرای آن هستند , mp4 میباشد .

پس به همین دلیل ما فقط ویدئو خود را باید به این فرمت تبدیل کنیم و سپس با استفاده از تگ source که فرزند video می باشد آن را در وب سایت نمایش میدهیم .

تگ source : این تگ Empty و Inline Level میباشد و به معنی منبع می باشد که باید آدرس فیلم را به خاصیت src آن داد . ضمنا این تگ دارای یک خاصیت دیگر به نام type هم میباشد که برای نمایش ویدئو باید مقدار آن را video/mp4 قرار داد .

<video>
    <source src="آدرس فایل.mp4" type="video/mp4">
</video>

تگ video شامل خاصیت هایی هم می باشد :

خاصیت width و height : پهنا و ارتفاع دلخواه خود را قرار دهید .

خاصیت autoplay : با دادن این خاصیت که فاقد مقدار میباشد , دستور اجرای اتوماتیک فیلم را میدهید .

خاصیت loop : با دادن این خاصیت که فاقد مقدار می باشد , دستور تکرار بی نهایت فیلم پس از اتمام هر باره را میدهید .

خاصیت controls : با دادن این خاصیت که فاقد مقدار می باشد , دستور درج پنل کاربری راهنمای ویدئو را میدهید ( ترجیها داده شود )

خاصیت muted : با دادن این خاصیت که باز هم فاقد مقدار میباشد , دستور قطع صدا پیش فرض ویدئو را میدهید .

خاصیت poster : در مقدار این خاصیت میتوانید لینک یک عکس را قرار دهید تا در صورت load نشدن فیلم , به جای یک صفحه سیاه رنگ , عکس دلخواه نمایان شود .

به عنوان مثال ویدئو 600 در 400 میخواهیم که دارای کنترل پنل و اجرای خودکار باشد و همچنین یک عکس برای از بین بردن صفحه سیاه قبل از نمایش :

<video controls autoplay width="600" height="400" poster="images/vms.jpg">
    <source src="آدرس فایل.mp4" type="video/mp4">
</video>

تگ audio : این تگ به صورت container و Inline Level میباشد که برای درج یک موزیک در وب سایت به کار میرود .

3 پسوند مجاز برای ویدئو در مرورگرها وجود دارد که عبارت اند از mp3 , wave و ogg . پسوندی که تمامی مرورگرها قادر به اجرای آن هستند , mp3 میباشد .

پس به همین دلیل ما فقط موزیک خود را باید به این فرمت تبدیل کنیم و سپس با استفاده از تگ source که فرزند audio می باشد آن را در وب سایت نمایش میدهیم .

ضمنا خاصیت type از تگ Source را در اینجا audio/mpeg قرار میدهیم .

این تگ هم دقیقا مانند video دارای خاصیت های autoplay , loop , muted , controls , width و height میباشد و فاقد خاصیت poster می باشد .

به عنوان مثال موزیکی با پهنای 100% میخواهیم که دارای کنترل پنل و اجرای خودکار باشد :

<audio controls autoplay width="100%">
    <source src="آدرس فایل.mp3" type="video/mpeg">
</audio>

نکته 1 : اگر این دو تگ در مرورگری قدیمی ساپورت نشوند میتوانیم با نوشتن یک جمله در زیر source , کاربر را از این موهم باخبر سازیم . مثلا :

<audio controls autoplay width="100%">
    <source src="آدرس فایل.mp3" type="audio/mpeg">
    این فایل قادر به اجرا نمیباشد
</audio>

نکته 2 : هم video و هم audio , خود دارای خاصیتی به نام src میباشند که میتوانیم به صورت مستقیم آدرس فایل ها رو در آن بنویسیم و دیگر از تگ source استفاده نکنیم . اما ترجیحا از این تگ به دلیل بهینه سازی بیشتر استفاده خواهیم کرد .

نکته 3 : طبیعتا خاصیت autoplay میتواند باعث اذیت کاربران شود پس ترجیحا داده نشود .

پخش اختصاصی

آموزش : وحید مجیدی

در این قسمت میپردازیم به لیست های مرتب و نامرتب در html . منظور از لیست های مرتب , همان لیست هایی هستند که ترتیب در آنها مهم هست , مثلا 1-2-3-4-5 و منظور از لیست های نامرتب همان لیست هایی هستند که اصطلاحا به آنها bullet میگویند و به صورت یک شکل خاص ظاهر میشوند, مثلا دایره یا مثلا مربع .

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

تگ ol : تگی Block Level و Container که مخفف کلمه order List و به معنای لیست های مرتب میباشد.

تگ ul : تگی Block Level و Container که مخفف کلمه unorder List و به معنای لیست های نامرتب می باشد .

تگ li : تگی Block Level و Container که مخفف کلمه List می باشد که تعداد آن , همان تعداد لیست گزینه های لیست می باشد .

تگ li یک تگ فرزند میباشد که باید داخل یکی از تگ های پدر ol یا ul قرار بگیرد .

مثلا برای داشتن یک لیست مرتب :

<ol>
    <li>طراحی سایت</li>
    <li>آموزش سئو</li>
    <li>آموزش اچ تی ام ال</li>
    <li>آموزش سی اس اس</li>
    <li>آموزش جی کوئری</li>
    <li>وحید مجیدی</li>
</ol>

 و برای داشتن یک لیست نامرتب :

<ul>
    <li>طراحی سایت</li>
    <li>آموزش سئو</li>
    <li>آموزش اچ تی ام ال</li>
    <li>آموزش سی اس اس</li>
    <li>آموزش جی کوئری</li>
    <li>وحید مجیدی</li>
</ul>

 نکته : این تگ ها دارای خاصیت هایی میباشد که تمامی آنها در html5 منسوخ شده و به css منتقل شده که بعدا در سری آموزش های css به آن میپردازیم. مهمترین این خاصیت ها type میباشد که مشخص کننده نوع bullet می باشد . مثلا حروف انگلیسی , یونانی , عدد , دایره توخالی , دایره تو پر , مربع و …

———————————————————————————————-

نوع دیگری از لیست ها میباشد ( لیست های توضیح ) که تقریبا کمتر مورد استفاده قرار میگیرد که فاقد bullet می باشند .

این نوع لیست ها با 3 تگ dl , dt و dd تکمیل میشوند که تماما Block Level و Container می باشند .

دو تگ dt و dd در داخل تگ پدرشان که dl می باشد قرار میگیرند . تگ dt عنوان لیست , و تگ dd توضیح مربوزط به عنوان میباشد .

به عنوان مثال :

<dl>
    <dt>نمونه کار ها</dt>
    <dd>وحید مجیدی</dd>

    <dt>آموزش ها</dt>
    <dd>آموزش html</dd>
    <dd>آموزش css</dd>
    <dd>آموزش jquery</dd>
</dl>

باز هم باید متذکر بشم که تمامی خاصیت های این تگ ها از جمله خاصیت های دیزاینی در html5 منسوخ و بعدا در Css آموزش داده خواهد شد.

آموزش : وحید مجیدی

 پخش اختصاصی

تگ iframe برای افزودن یک وب سایت در وب سایت خودتان می باشد . یعنی شما میتوانید هر وب سایت یا و بلاگی که دوست دارید رو در سایت خود به نمایش بگذارید .

البته به دلیل اینکه سوء استفاده هایی که بعضا از این تگ توسط برخی افراد میشود , بسیاری از سایت های بزرگ دنیا از جمله گوگل , امکان این کار را از وبمستران گرفته است . ضمنا این کار بسیار هم سخت نیست و شما میتوانید با ورود به این مطلب , همین کار رو برای وب سایت خود انجام دهید.

کاربرد این تگ خیلی زیاد نیست , اما بعضی مواقع میتواند به درد بخور باشد . مثلا فرض کنید یک وب سایت آژانس هواپیمایی دارید و میخواهید آخرین پرواز های ورودی و خروجی فرودگاه امام را در آن به نمایش بگذارید . میتوانید با ورود به سایت فرودگاه امام , به قسمت مربوزه رفته و لینک صفحع را به تگ iframe داده و از آن استفاده نمایید .

تگ iframe : این تگ به صورت Container و Block Level می باشد و همانطور که گفته شد میتواند یک سایت یا یک صفحه از یک سایت را در وب سایت شما بازخوانی کند .

خاصیت src : این خاصیت مهمترین خاصیت تگ iframe می باشد که مخخف کلمه source یا همان منبع می باشد . مقدار این خاصیت باید یک url یا حتا مثلا یک صفحه از وب سایت باشد .

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

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

به عنوان مثال :

<iframe src="http://test.com" width="300" height="300"></iframe>

<iframe src="pdf/resume.html" width="100%" height="500"></iframe>

توجه : این تگ شامل خاصیت های دیگری هم میباشد که تمامی آنها در html5 منسوخ شده است و جایگزین با css شده است که بعدا در سری آموزش های css به آنها میپردازیم .

پخش اختصاصی

آموزش : وحید مجیدی

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

در زمان های قدیم از این تگ برای دیزاین کامل یک وب سایت استفاده میشد که با آمدن تگ های div و span ( که در ادامه سری آموزشی به آنها اشاره خواهم کرد ) , منسوخ شد و در حال حاضر فقط برای ایجاد جداول در وب سایت مورد استفاده قرار میگیرد .

تگ table : این تگ به صورت block Level و Container می باشد و به تنهایی هیچ مفهومی ندارد , مگر با وجود 2 تگ tr و td که در داخل آن قرار میگیرند .

تگ tr : این تگ مخفف Table row هست که به صورت Container میباشد . مثلا برای داشتن 2 سطر , باید دو بار tr استفاده کرد .

تگ th : این تگ مخفف Table Heading هست که به صورت Container می باشد .  کاربرد این تگ اختیاری برای معرفی عنوان هر ستون می باشد .

تگ td : این تگ مخفف Table Data هست که به صورت Container میباشد .این تگ به معنای همان ستون میباشد که حتما باید داخل tr قرار گیرد . مثلا اگر 2 بار داخل tr تکرار شود , به این معنا میباشد که یک ردیف دو ستونه داریم .

تگ caption : این تگ هم به صورت Container میباشد و نوشته ای که درون آن قرار میگیرد مشخص کننده عنوان کلی جدول می باشد . البته این تگ هم به صورت اختیاری می باشد و بعد از باز شدن تگ table قرار میگیرد . به عنوان مثال اگر جدول قیمت ماشین های سایپا را بخواهید در سایت قرار دهید , میتوانید در داخل این تگ بنویسید : مقایسه قیمت ماشین های سایپا

نکته : تگ های caption و th از جمله تگ های اختیاری می باشد که اگر از آنها استفاده کنید , خاصیت سئویی بسیاری دارد و کمک به ارتقا رتبه ( صفحه سایت ) شما در موتور های جستجو خواهد کرد.

توجه : ساخت یک جدول بدون داشتن سه تگ بالا tr , table و td هیچ معنایی ندارد و ساخته نمی شود . ضمنا نوشته های داخل جداول فقط باید داخل td و th قرار گیرد .

مثلا برای داشتن یک جدول 2*2 به روش زیر عمل میکنیم .

نکته مهم : برای دیزاین جدول , اعم از حاشیه , خط کشی , فاصله و … از css استفاده میکنیم . این تگ دارای Attribute هایی در این رابطه هست اما تمامی آنها در html5 منسوخ شده است.

<table>
    <caption>مقایسه قیمت های سایپا</caption>
    <tr>
        <th>ماشین</th>
        <th>قیمت</th>
    </tr>
    <tr>
        <td>سایپا 141</td>
        <td>16000000</td>
    </tr>
    <tr>
        <td>سایپا 111</td>
        <td>17000000</td>
    </tr>
</table>

پخش اختصاصی

آموزش : وحید مجیدی

امید است با همراهی شما کاربران گرامی , در سال جدید شاهد پیشرفت دوچندان سایت اسکریپت دات کام باشیم و لحظات خوبی رو در کنار هم بگذرونیم .

این پست از سریال پست های ساده ولی کاربردی html می باشد که امروز با  تگ img که تگی فوق مهم در html هست در خدمت شما هستم .

این تگ برای نمایش یک تصویر در وب سایت می باشد . وقتی صحبت از تصویر میشه , همه ی ما پسوند های مختلفی به ذهنمون خطور میکنه ولی باید بدونیم که این تگ فقط قادر به نمایش 3 پسوند می باشد .

این پسوند ها شامل gif , png و jpg می باشد .

تگ img : این تگ به صورت Empty و Inline Level می باشد و کار آن درج یک تصویر در صفحات وب سایت می باشد .

مهمترین خاصیت این تگ , خاصیت src میباشد . این خاصیت مشخص کننده آدرس فایل عکس می باشد .

همان طور که قبلا گفتم , فایل عکس حتما باید یکی از سه پسوند png , gif یا jpg باشد .

خاصیت alt : این خاصیت هم باید حتما در کنار خاصیت src باشد . مقدار این خاصیت باید توضیح مختصری از عکس مورد نظر شما باشد که این کار بسیار سئویی هم می باشد .

به عنوان مثال در کد زیر , بنده عکس خودم را در وب سایت گذاشته ام . پس میتونم مقدار alt رو وحید مجیدی بزارم . ( این مقدار با هر زبانی که باشد مشکلی ندارد اما طبیعتا برای ارتقا رتبه در موتور های جستجو , فارسی مینویسیم ) .

<img src="images/vms.jpg" alt="وحید مجیدی">

این تگ دارای دو خاصیت دیگر هم می باشد .

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

خاصیت height : به معنای مقدار ارتفاع عکس می باشد که برحسب پیکسل یا % میباشد . بهتر است از مقدار واقعی عکس بیشتر داده نشود .

از لحاظ بهینه سازی در سرعت وب سایت , بهتر است حتما این دو خاصیت همراه تگ img آورده شود و مقدار آن همان اندازه واقعی عکس باشد .

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

مزیت دیگر اینکه به عکس ها width و height میدهیم این است که با load نشدن عکس به هر دلیلی ( از جمله سرعت پایین اینترنت ) , نوشته ی درون alt , بر روی عکس ظاهر میشود که میتواند راهنمای خوبی برای کاربر باشد .

<img src="vms.jpg" alt="وحید مجیدی" width="300" height="400">

اگر بخواهیم برحسب پیکسل بنویسیم باید فقط عدد را جایگذاری کنیم و اگر بخواهیم بر حسب درصد باشد , باید علامت % را بعد از عدد قرار دهیم . ( ترجیحا بر حسب پیکسل باشد )

نکته : خاصیت هایی دیگری وجود دارد , ولی چون در html5 این خاصیت ها منسوخ شده است از گفتن آنها صرف نظر میکنم .

 آموزش : وحید مجیدی

پخش اختصاصی

در این جلسه از سایت اسکریپت دات کام , با تگی به نام a آشنا میشیم که این کار را برای ما انجام میدهد.

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

تگ a : این تگ به صورت Container و Inline Level می باشد که جهت قرار دادن لینک در صفحات وب می باشد .

کافیست نوشته , تصویر , باکس و هر تگی که دوست دارید دارای لینک شود , در داخل این تگ قرار دهید .

این تگ به تنهایی معنایی ندارد و حداقل باید دارای یک خاصیت به نام href باشد . در خاصیت href باید یک url و یا یک آدرس صفحه یا آدرس فایل مورد نظر شما قرار گیرد .

به عنوان مثال 1 : 

<a href="http://google.com">Google</a>

 توجه : اگر آدرس یک سایت را میخواهید وارد نمایید , حتما باید //:http را در اول آن وارد نمایید .

به عنوان مثال 2 :

<a href="pdf/vahid.pdf">Download Pdf</a>

 توجه: در مثال بالا , چون که فایل vahid.pdf در سایت خودمان قرار دارد , آدرس آن را بدون //:http وارد کرده ایم . معنی آدرس بالا یعنی در داخل پوشه ی pdf , فایلی به نام vahid.pdf قرار دارد که ما آدرس را داده ایم .

——————————————————

خاصیت target : خاصیتی در تگ a که مشخص میکند صفحه یا فایلی که آدرس آن را در href وارد کرده ایم , در همان صفحه باز شود و یا در صفحه ای جدید .

این خاصیت دارای دو مقدار مهم است . اگر مقدار آن را parent_ بگذاریم ,  آدرس در همان صفحه باز میشود و اگر مقدار آن را blank_ بگذاریم , آدرس در صفحه ای جدید باز می شود .

<a href="http://اسکریپت.com" target="_parent">Vahid Majidi</a>

<a href="http://اسکریپت.com" target="_blank">Vahid Majidi</a>

 ——————————————————

لینک های لنگر Bookmark چیست ؟

این مدل لینک دهی در سایت wikipedia به وفور یافت میشود و به این معنا میباشد که شاید شما بخواهید کاربر پس از ورود به صفحه ی مورد نظر خود , به نقطه ای مشخص از آن صفحه برود . مثلا فرض کنید در یک تگ h1 در وب سایت خود دارید که میخواهید کاربر پس از کلیک بر روی لینک شما , به همان تگ h1 پرش کند . برای این کار باید مراحل زیر را انجام دهید .

1 –  به تگ h1 خود خاصیتی به نام id بدهید و نامی دلخواه برای آن انتخاب نمایید .

2 – پس از اتمام آدرس دهی به خاصیت href , همان نامی که به id داده بودید را با یک # در قبل از آن در آدرس وارد نمایید .

به عنوان مثال :

<a href="#job">شغل وحید مجیدی</a>

<h1 id="job">مدرس مجتمع فنی تهران</h1>

 نکته 1 : به جای h1 , هر تگ دیگری میتوان استفاده نمود. چون خاصیت id قابل فهم برای تمامی تگ های html می باشد .

نکته 2 : طبیعاتا تگی که به آن id میدهیم باید چندین سطر پایین تر و یا بالاتر از تگ a باشد تا پس از کلیک بر روی تگ a , عمل پرش صورت گیرد .

پخش اختصاصی

آموزش : وحید مجیدی

تا به امروز از تگ های زیادی نام بردیم و صحبت کردیم که امید است بسیاری از نیاز های شما عزیزان را برطرف کرده باشد .

انشالله پس از اتمام این سری این سری آموزشی , سری های بعدی را شروع خواهیم کرد .

در این پست از 2 تگ برای ایجاد نقل قول استفاده خواهیم نمود .

تگ q : این تگ به صورت Container و Inline Level میباشد و برای درج یک نقل قول به کار میرود . کاری که این تگ به صورت ظاهری انجام میدهد , درج یک دابل کت ( ” ) در قبل و بعد از نوشته ی درون آن است .

چون این تگ به صورت inline level می باشد , پس میتوان آن را در داخل یک تگ block level استفاده نمود .

<p> Vahid Majidi Hastam , Modire <q> اسکریپت.com </q> </p>

 تگ Blockquote : این تگ به صورت Container و Block Level می باشد و باز هم برای درج نقل قول مورد استفاده قرار میگیرد . این تگ به صورت ظاهری متن نوشته شده درون خود را جلوتر از بقیه خطها شروع به نوشتن میکند .

<p> صادق هدایت </p>
<blockquote> تنها مرگ است که دروغ نمی گوید </blockquote>

 تفاوت دو تگ q و blockquote : تفاوت عمده این دو تگ در این است که تگ blockquote بسیار سئویی است و در سئو کمک بسیاری انجام  میدهد . 

به این ترتیب با استفاده از این تگ , میتوانید در جستجوی مردم که در مورد نقل قول ها یا سخنان بزرگان صورت میپزیرد , رتبه ی بهتری کسب نمایید .

آموزش : وحید مجیدی 

پخش اختصاصی

یا نمونه ی کوچکی از این کارکترها میتواند شامل ψ∑∅≥¶©®”¯∩⇐∴ϖ و … باشد .

این پست که قسمت 14 از سری آموزش های ساده ولی کاربردی html از سایت اسکریپت دات کام می باشد به کارکتر های خاص در html تعلق دارد .

برای درج این کارکتر ها در html فقط کافیست کد آنها را در کد html خود قرار دهید .

در زیر لیستی از این کد ها را برای شما عزیزان قرار داده ام …

≠	≠
&	&
∧	∧
¬	¬
∼	∼
∨	∨
→	→
←	←
	↔
≡	≡
∀	∀
∃	∃
◊	◊
⇒	⇒
⇐	⇐
⇔	⇔
∴	∴
⊥	⊥

ª	ª
º	º
¦	¦
©	©
®	®
	™
µ	µ

¢	¢
£	£
¤	¤
¥	¥
€	€
	♠
	♣
	♥
	♦

 نکته : در جداول بالا , کدهای استاندارد و پرکاربردتر بیان شده . شما عزیزان میتوانید جهت نمایش لیست کامل , اینجا رو کلیک کنید .

پخش اختصاصی

آموزش وحید مجیدی

حتما تابحال دیده اید که در کتاب ها , اگر کلمه ای مخفف را به کار میبرند , آن را در پاورقی توضیح میدهند . اما ما در وب سایت قادر به انجام این کار نیستیم . چون که سایت پاورقی ندارد .

به همین دلیل از تگ abbr استفاده میکنیم .

تگ abbr : این تگ به صورت Container و inline level می باشد ئ با خاصیتی به نام title کامل میگردد .

شما کافیست هر جا کلمه ای مخفف را به کار بردید , آن را در داخل تگ abbr انداخته و سپس مخفف نشده ی آن را به خاصیت title بدهید .

<abbr title="vahid majidi sadr"> vms </abbr>

حال کاربر با ایستادن ماوس بر روی آن کلمه , باکسی که به آن تولتیب میگویند را خواهد دید , که در درون آن , نوشته ی داخل خاصیت title را نشان میدهد .

خاصیت title چیست : این خاصیت , یک خاصیت global و همگانی می باشد . یعنی شما میتوانید به تمامی تگ های html این خاصیت را بدهید که اتفاقا کار سئویی هم هست .

اما این خاصیت را وقتی به تگ abbr میدهیم , به معنی مخفف شده کلمات است , اما وقتی به دیگر تگ های html میدهیم , به معنی توضیح مختصری در مورد نوشته های داخل آن تگ می باشد .

به عنوان مثال :

<p title="dr ali shariati">لحظه ها را گذراندیم که به خوشبختی برسیم ؛ غافل از آنکه لحظه ها همان خوشبختی بودند</p>

پخش اختصاصی

آموزش : وحید مجیدی