آموزش html5 (قسمت اول) | تفاوت های html5 با html

با نام و یاد خدای مهربون. سلام خدمت تمام کاربران عزیز
در 24 جلسه گذشته با مفاهیم مهم و پرکاربرد در  html و css آشنا شدیم و در نهایت با طراحی یک وب سایت شرکتی خیلی ساده آموزه های خودمون رو به کار گرفتیم.از این جلسه قصد داریم با بعضی از امکانات جدید و پرکاربرد html5 در خدمت شما همراهان همیشگی باشیم.در این جلسه دو مبحث کلی را بررسی می کنیم. ابتدا به معرفی تگ های معنادار در html5 می پردازیم، سپس به انواع جدید ورودی در html5 می پردازیم.

راحت تر شدن کدنویسی

قبل از اینکه سراغ اصل مطلب برویم به یکی از بارزترین خصوصیات HTML5 می پردازیم و آن این است که نحوه نوشتن کدها در html5 راحت تر شده است یعنی چی؟ به جدول زیر توجه کنید، ما در این جدول چند مورد از تگ هایی که در html5 کوتاه تر یا خلاصه تر شده اند را نمایش دادیم:

html5	html4
<meta charset=”utf-8″>	<meta http-equiv=”content-type” content=”text/html;charset=utf-8″>
تگ های بسته مثل: <link > – <img > – <br >	تگ های بسته مثل: </link /> – <img /> – <br >
حذف خصوصیت type : <link rel=”stylesheet” href=””> <script src=””></script>	<link rel=”stylesheet” type=”text/css” href=””> <script src=”” type=”text/javascript”></script>

ایجاد تگ های معنادار در html5

با ایجاد تگ های معنادار در html5 ، موتورهای جستجو درک بهتری از صفحات وب پیدا کردند و به تمام بخش های سایت  این خیلی خیلی مهم است ، از این جهت در سئو سایت بسیار موثر است!

در دوره مقدماتی Html  و CSS ، برای ایجاد هر قسمت از طرح وب سایت شرکتی مثل منو ، فوتر و سایر قسمت ها از تگ div استفاده کردیم در واقع به این نتیجه رسیده بودیم که برای راحتی کار بهتر است صفحات وب را با تگ div بلوک بندی کنیم سپس طرح مورد نظرمون رو پیدا کنیم اما با ایجاد تگ های معنادار در HTML5 قضیه به کلی عوض شد.

به شکل زیر توجه کنید:

تصویر زیر نمونه ساده ای از چندین تگ معنادار مهم در html5 می باشد همانطور که در تصویر زیر مشخص است، در html5 برای هر قسمتی تگ معناداری وجود دارد که هر کدام شامل المان های مختلفی می شوند:(برای دسترسی به سایر تگ های معنادار در html5 به این لینک مراجعه کنید)

• تگ <header> : برای ایجاد هدر از این تگ استفاده می شود.
• تگ <nav> : برای ایجاد منو سایت استفاده می شود.
• تگ <article> : برای ایجاد مقالات سایت استفاده می شود.
• تگ <aside> : برای ایجاد منو کناری سایت استفاده می شود.
• تگ <footer> : برای ایجاد فوتر سایت استفاده می شود.
• تگ <section> : برای ایجاد سایر قسمت های سایت استفاده می شود.(بیشتر برای محتواهایی که از لحاظ ساختاری شبیه هم هستند از این تگ استفاده می شود البته توجه داشته باشید که داخل تگ section از تگ های h1، h2، h3و … استفاده شود.)

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

برای فهم بهتر، قسمتی از سایت soft98 را در تصویر زیر نمایش دادیم. همانطور که مشاهده می کنید جدا از اینکه از تگ های header  و footer برای چیدمان کلی استفاده شده است در داخل تگ article نیز از تگ header و footer استفاده شده است و یا داخل تگ aside از تگ های section و داخل تگ section از تگ header وfooter  با توجه به نیاز و طرح کلی استفاده شده است.

نکته: تگ nav برای منوهای موجود در سایت استفاده می شود ولی نه هر منویی، منوهایی که دسته بندی اصلی وب سایت ما رو مشخص می کنند.

دو تا تگ دیگری که در html5 معرفی شد و برای بالارفتن سئو سایت بهتر است مورد استفاده قرار بگیرد، تگ figure و figcaption می باشد:

• تگ figure: از این تگ برای نمایش تصاویر استفاده می شود.در واقع تگ img که قبلا یاد گرفتیم رو داخل این تگ می دهیم و این طوری موتورهای جستجو درک بهتری از تصاویر دارند.
• تگ figcaption: این تگ برای نمایش متن در رابطه با تصویر به کار می رود.

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

<figure>
<img src=”” title=”” alt=””>
<figcaption>
عنوان
</figcaption>
</figure>

انواع جدید ورودی در html5

قبلا با تگ form آشنا شدیم و فهمیدیم که مهمترین المان برای فرم ، تگ input می باشد که با استفاده از آن اطلاعات از کاربر دریافت می شود.  Input ها انواع مختلفی را شامل می شدند که به صورت کامل به موارد مهم آن پرداختیم. مثل: text، password وsubmit و …

با پیدایش html5 ،یک سری type جدید برای دریافت ورودی از کاربر معرفی شد که امکانات کامل تری برای کنترل ورودی ها فراهم کرد. در ادامه با این type ها آشنا می شویم:

• Color: این نوع type برای وارد کردن رنگ در فرم استفاده می شود.
• Date : این نوع type برای وارد کردن تاریخ(سال،ماه،روز) در فرم استفاده می شود.(می توان از max و min برای مشخص کردن محدوده تاریخ استفاده کرد)
• email : این نوع type برای وارد کردن ایمیل در فرم استفاده می شود.ظاهر خاصی ندارد فقط در صورتی که ایمیل درست وارد نشود پیغام خطا می دهد (دیگر لازم نیست برای چک کردن ایمیل کد php بنویسیم)
• Month: این نوع type برای وارد کردن ماه و سال برحسب زمان محلی در فرم استفاده می شود.
• Number: این نوع type برای وارد کردن عدد در فرم استفاده می شود.(می توان محدوده عددی را مشخص کرد)
• Range: این نوع type هم برای وارد کردن عدد در فرم استفاده می شود اما به شکل اسلایدبار می باشد(می توان محدوده عددی را مشخص کرد)
• Search: این نوع type برای وارد کردن متن مورد جستجو استفاده می شود.
• Tel: این نوع type برای وارد کردن شماره تلفن در فرم استفاده می شود.(با کمک ویژگی maxlength می توان تعداد کاراکترها را محدود کرد)
• Time: این نوع type برای وارد کردن زمان در فرم استفاده می شود.
• url: این نوع type برای وارد کردن url در فرم استفاده می شود. (در صورتی که url  درست وارد نشود پیغام خطا می دهد)
• Week: این نوع type برای مشخص کردن هفته وسال برحسب زمان محلی استفاده می شود.
• file: این نوع type برای دریافت فایل از کاربر در فرم استفاده می شود.

نکته: امکان این وجود دارد که در بعضی مرورگر ها بعضی از type های بالا کار نکند. درصورتی که  type ای برای مرورگری قابل درک نباشد آن type را به عنوان type=”text” در نظر می گیرد.

برای مشاهده تک تک type های بالا یک فرم به شکل زیر ایجاد می کنیم:

کد html و CSS

و نتیجه اجرا به شکل زیر می باشد:

بعد از اجرا ، تک تک موارد خواسته شده در فرم را وارد کنید تا خطا ها را دریابید و بهتر انواع جدید ورودی ها در html5 را درک کنید.

آشنایی با چند ویژگی جدید در html5

در ادامه میخواهیم با چندین خاصیت جالب که در html5 رونمایی شد آشنا شویم:

• Autofocus: این ویژگی برای ورودی های از نوع text به کار می رود و وظیفه اش این است که به محض لود شدن صفحه ، اشاره گر موس در آن textbox قرار بگیرد بدون این که نیاز باشد کاربر اشاره گر را در آن باکس قرار دهد. مثال عینی سایت گوگل می باشد که به محض لود شدن اشاره گر موس در textbox قرار گرفته می گیرد.
• Autocomplete: این ویژگی دو مقدار on یا off می تواند داشته باشد .در صورتی که این خاصیت را با مقدار on به یک ورودی از نوع text بدهیم ، هر باری که کاربر قصد تکمیل این فیلد را داشته باشد، تمام مقادیر قبلی به او پیشنهاد می شود . مثلا کاربر مقدار نام کاربری را یک بار dazhyar وارده کرده است، بار دومی که قصد پرکردن این فیلد را داشته باشد، مرورگر به صورت خودکار dazhyar و تمام مقادیر قبلی این فیلد را به او پیشنهاد می دهد (که در حالت پیش فرض مقدارش off می باشد. )

• pattern: با کمک این ویژگی می توان یک الگو برای مقادیر ورودی در یک فرم تعریف کرد. در واقع می توان از این ویژگی برای اعتبارسنجی ورودی المان هایی مثل password، url ، search ،Email و … استفاده کرد.

مثال1) : اگر بخواهیم کاربر ، نام کاربری را بدون فاصله وارد کند باید برای این صفت مقدار \s را قرار دهیم به شکل زیر:

<input type=”text” pattern=”\s”>

مثال 2): الگو برای اینکه تعداد کاراکترهای ورودی بین 10  تا 20 باشد و فقط حروف کوچک و بزرگ انگلیسی را شامل شود :

<input type=”text” pattern=”[A-Za-z]{10,20}”>

و خیلی الگوهای دیگری که وجود دارد و  با سرچ در گوگل می توان به آن ها دسترسی پیدا کرد.(از سایت regexr.com می توانید استفاده کنید)

در آموزش امروز با تگ های معنادار در html5 و انواع جدید ورودی در html5 آشنا شدیم و با یک مثال ساده برای هر کدام ، تسلط بهتری روی مطالب پیدا کردیم. در جلسات بعد با تگ های جدیدی که در html5 معرفی شد آشنا می شویم.با ما همراه باشید.

باز هم تاکید می کنم اگر خودتون دست به کار نشین و کد نزنید، خوندن این مطالب هیچ فایده ای نداره! اگر سوال یا نظری دارین میتونید از طریق دیدگاه زیر همین پست با ما در ارتباط باشین. شاد باشید  ;-)