معرفی کامل تگ های معنایی در HTML5
تگ های معنایی در HTML5 : امروزه اهمیت طراحی سایت و رقابت بر سر داشتن بهترین رتبه سایت در میان سایت های موجود بر کسی پوشیده نیست، اما طراحی سایت حرفه ای رمز و رموزی دارد که طراحان سایت باید به آن ها آگاهی داشته باشند تا بتوانند در میان طراحان سایت ها به جایگاه بالایی برسند،اما خب همان طور که می دانید آموزش طراحی سایت Html5 و یادگیری آن نیز همانند سایرعلوم باید گام به گام و با صبر و حوصله پیش برود.تیم طراحی سایت اصفهان وب یار با هدف ارتقای سطح تخصص علاقمندان به یادگیری طراحی سایت اقدام به آموزش طراحی سایت حرفه ای در اصفهان نموده است،کافیست هر روز فقط 30 دقیقه وقت برای آموزش طراحی سایت Html5 صرف کنید تا شما هم بتوانید یک طراح سایت حرفه ای شوید.
آموزش طراحی سایت با دستورات HTML5
HTML5 جدیدترین زبان برنامه نویسی برای طراحی سایت است که در مقایسه با نسخه های قبلی خود، قابلیت ها و امکانات جدیدی را برای کاربرانش فراهم کرده است و به همین جهت نسبت به سایر نسخه ها برتری دارد. این زبان همچنان در حال پیشرفت است و مرورگرهای Chrome ، Safari ، Firefox ، Opera ، IE از آن پشتیبانی می کنند.در ادامه خیلی راحت و ساده با هم دستورات html5 را مرور می کنیم.
پرکاربردترین تگ های html5 در طراحی وب سایت
یک وب سایت از 3 قسمت زیر تشکیل شده است:
1-Header
2- Section
3- Footer
در این ورژن HTML به جای استفاده از div ها از این 3 تگ استفاده می کنند ولی به این معنی نیست که چون از تگ header استفاده کردید بدون اینکه در css به آن خصوصیت هایی را نسبت دهید در بالای صفحه قرار بگیرد.
تگ های معنایی در HTML5
یک عنصر معنایی به وضوح معنای خود را برای مرورگر و توسعه دهنده توصیف می کند.
تگ های معنایی یا همان semantic tags ، عناصری هستند که با توجه به نام آن ها می توان به محتوای این عناصر پی برد. به عنوان مثال محتوای تگ های <img> ، <table> و <header> را می توان از روی نام آن ها تشخیص داد ولی محتوای تگ هایی مانند <p> یا <div> از روی نام مشخص نیست.
استفاده از تگ های معنایی در طراحی سایت باعث می شود تا ساختار صفحه ی وب مشخص باشد. برنامه نویسان و موتورهای جستجو با بررسی این تگ ها به راحتی می توانند ساختار وب و محتویات سایت را شناسایی کنند. استفاده از تگ های معنایی به افزایش سئو سایت نیز کمک می کند.
انواع تگ html
تگ های اچ تی ام ال معرف عناصر صفحه سایت هستند و باید بدانید که برای نمایش عناصر یا به عبارتی elements وب سایت از دو نوع تگ مشخص استفاده می کنیم که عبارتند از
- تگ های باز (Opening Tag)
- تگ های بسته (Closing Tag)
باید بدانید که برخی از عناصر برای نمایش داده شدن در صفحات وب سایت به هر دو تگ احتیاج داردند و برخی دیگر به تنهایی با تگ باز یا opening نمایش داده می شوند.
DOCTYPE HTML
این تگ باعث می شود تا ما متوجه شویم که کد های HTML با چه ورژنی از آن نوشته شده اند. در جدول زیر DOCTYPE ورژن های مختلف را مشاهده می کنید.
این تگ برای معرفی نوع سند استفاده می شود و یک راهنمایی برای مرورگرهای وب است تا مرورگرها در برخورد با صفحات متفاوت بتوانند استانداردهای صحیح را شناسایی کنند و صفحات وب را به درستی نمایش دهند. برای نسخه ی HTML5 کافی است مانند زیر از این دستور استفاده کنید.
همین طور که در جدول بالا مشاهده کردید در این ورژن از HTML تگ ها بهینه شده اند.
عنصر <section> در html
عنصر <section> یک بخش را در یک سند تعریف می کند. تگ section که یک تگ جدید و از تگ های معنایی HTML5 است، یک بخش مجزا در سند تعریف می کند.
در واقع از این تگ برای محتواهایی استفاده می شود که با هم ارتباط معنایی دارند و معمولاً برای این محتواها می توانیم یک heading تعریف کنیم.
تگ section از ویژگی های عمومی و رویدادهای عمومی در HTML پشتیبانی می کند. در جدول زیر اولین نسخه ای از مرورگرها که از این تگ پشتیبانی می کنند، نشان داده شده است.
FirefoxoperaInternet explorersafarichrome4.011.19.05.06.0
در کد زیر می توانید نحوه ی استفاده از عنصر section را مشاهده کنید.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<section>
<h1>What is HTML?</h1>
<p> HTML is the standard markup language for creating Web pages.<br> HTML stands for Hyper Text Markup Language<br> HTML describes the structure of Web pages using markup<br> HTML elements are the building blocks of HTML pages<br> </p>
</section>
</body>
</html>
خروجی کد بالا را می توانید در تصویر زیر مشاهده کنید.
با توجه به مستندات HTML W3C: “یک بخش یک گروه بندی موضوعی از محتوا است، معمولا با یک عنوان.”
نمونه هایی از جایی که می توان از عنصر <section> استفاده کرد:
فصل ها
معرفی
مطالب خبری
اطلاعات تماس
یک صفحه وب معمولاً می تواند به بخش هایی برای معرفی، محتوا و اطلاعات تماس تقسیم شود.
عنصر <article>
عنصر <article> محتوای مستقل را مشخص می کند.
یک مقاله باید به خودی خود معنا داشته باشد و باید بتوان آن را به طور مستقل از بقیه وب سایت مجزا کرد.
نمونه هایی از جایی که می توان از عنصر <article> استفاده کرد:
پست های انجمن
پست های وبلاگ
نظرات کاربران
کارت های محصول
مقالات روزنامه
عنصر header در HTML5
تگ header از تگ های معنایی در HTML5 می باشد که برای اضافه کردن یک هدر به سند از آن استفاده می شود. برای مثال در این عنصر می توانید لوگوی سایت و منویی برای دسترسی به سایر صفحات سایت قرار دهید.
لازم به ذکر است که از این تگ برای اضافه کردن هدر به بخشی از سند هم می توان استفاده کرد و به عبارتی در یک صفحه شما می توانید از چندین عنصر header استفاده کنید.
در کد زیر از عنصر header استفاده شده است.
خروجی کد بالا:
عنصر footer در HTML5
تگ footer نیز از تگ های معنایی است که یک پا صفحه به سند اضافه می کند. در این عنصر معمولاً اطلاعات کپی رایت، اطلاعات تماس و غیره قرار داده می شود. این عنصر هم مانند عنصر header می تواند برای بخشی از سند نیز استفاده شود و در یک صفحه می توانید چندین عنصر footer داشته باشید. به مثال زیر توجه کنید.
خروجی کد بالا:
عنصر aside در HTML5
تگ aside حاشیه ای در کنار متن اصلی ایجاد می کند و برای نمایش ستون های چپ و راست در صفحه استفاده می شود. همچنین از این تگ می توان در تگ های دیگر استفاده کرد. برای مثال می توانید در تگ article از عنصر aside استفاده کنید اما دقت داشته باشید که محتوایی که برای aside در نظر می گیرید باید با محتوای تگ article ارتباط معنایی داشته باشد.
تگ aside از تگ های جدید و از تگ های معنایی در HTML5 است. این تگ از ویژگی های عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.در جدول زیر اعداد نشان دهنده ی اولین نسخه ای از مرورگرها است که از عنصر aside پشتیبانی می کنند.
Firefox opera Internet explorer safari chrome 4.0 11.1 9.0 5.0 6.0
در کد زیر از دستور aside استفاده شده است.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<aside>
<h4>Learn HTML5 </h4>
<p>Tabs<br> Dropdowns<br> Accordions<br> Convert Weights<br> Animated Buttons<br> Side Navigation<br>Top Navigation</p>
</aside>
</body>
</html>
خروجی کد بالا به صورت زیر است.
آموزش عنصر nav در HTML5
تگ nav نیز از تگ های معنایی و از تگ های جدید در HTML5 است که جهت قرار دادن گروهی از لینک ها در کنار هم از آن استفاده می شود. لازم به ذکر است که از این تگ فقط برای لینک های اصلی صفحه استفاده می شود.
عنصر nav از رویدادها و ویژگی های عمومی در HTML پشتیبانی می کند. در جدول زیر اولین نسخه ی مرورگرهایی که از این تگ پشتیبانی می کنند را می توانید مشاهده کنید.
FirefoxoperaInternet explorersafarichrome 4.0 11.1 9.0 5.0 6.0
کد زیر کاربرد تگ ها را نشان می دهد.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<nav>
<a href="#" >HTML</a> | <a href="#" >CSS</a> | <a href="#">JavaScript</a> | <a href="#">jQuery</a> |
</nav>
</body>
</html>
در شکل زیر خروجی کد بالا نمایش داده شده است.
عنصر main در HTML5
تگ main از تگ های معنایی در HTML5 است که برای مشخص کردن محتوای اصلی سند استفاده می شود. این عنصر نمی تواند داخل تگ های <aside>، <nav>، <footer>،<header> و <article> قرار گیرد و در هر سند فقط می توان از یک تگ main استفاده کرد.
تگ main در HTML5 جدید است و از ویژگی های عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.
در جدول زیر می توانید اولین نسخه ی مرورگرهایی که از عنصر main پشتیبانی می کنند را ببینید.
| Firefox | opera | Internet explorer | safari | chrome |
| 4.0 | 11.1 | پشتیبانی نمی شود | 5.0 | 6.0 |
به کد زیر دقت کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<main> <article> <h1 >New HTML5 Elements</h1> <p> The most interesting new HTML5 elements are:<br> New semantic elements like header, footer, article, and section.<br> New attributes of form elements like number, date, time, calendar, and range.<br> New graphic elements: svg and canvas.<br> New multimedia elements: audio and video. </p> </article> </main> |
خروجی کد بالا:
آموزش عنصر mark در HTML5
تگ mark برای هایلایت کردن قسمتی از متن به کار می رود. این تگ از تگ های معنایی و جدید در HTML5 است و از ویژگی های عمومی و رویدادهای عمومی در html پشتیبانی می کند.
اعدادی که در جدول مشاهده می کنید، اولین نسخه از مرورگرهایی است که از این عنصر پشتیبانی می کنند.
| Firefox | opera | Internet explorer | safari | chrome |
| 4.0 | 11.1 | 9.0 | 5.0 | 6.0 |
نحوه ی استفاده از این تگ را می توانید در مثال زیر ببینید.
|
1 2 3 4 5 6 |
<p> HTML tags normally come in pairs like <p> and </p><br> The start tag is also called the <mark>opening tag </mark> , and the end tag the <mark> closing tag </mark>. </p> |
خروجی کد بالا:
عنصر details و summary در HTML5
تگ details از تگ های معنایی در html5 است. این تگ مربوط به توضیحات اضافه درباره ی یک موضوع است که کاربر می تواند این توضیحات را مخفی یا نمایان سازد برای این کار کافی است که روی علامت فلش کلیک کند.
تگ summary یک عنوان قابل مشاهده برای عنصر details تعریف می کند که علامت فلش هم در کنار آن قرار می گیرد.
اولین نسخه ی مرورگرهایی که از عنصر details پشتیبانی می کنند، در جدول زیر نمایش داده شده است.
| Firefox | opera | Internet explorer | safari | chrome |
| 49.0 | 15.0 | پشتیبانی نمی شود | 6.0 | 12.0 |
به کد زیر توجه کنید.
|
1 2 3 4 5 |
<details> <summary> HTML details Tag </summary> <p>The details tag specifies additional details that the user can view or hide on demand.< / p > <p>The details tag can be used to create an interactive widget that the user can open and close. Any sort of content can be put inside the details tag.< / p > </details> |
خروجی کد بالا:
با کلیک کردن روی فلش اطلاعات نمایش داده می شود که در تصویر زیر نشان داده شده است.
به صورت پیش فرض توضیحات مخفی هستند اگر بخواهید از همان ابتدا توضیحات را هم ببینید باید خاصیت open را به تگ details اضافه کنید.
عنصر figure و figcaption در html5
تگ figure یک قسمت جداگانه در سند برای تصاویر، لیست کدها، نمودارها و غیره مشخص می کند. در صورتی که این تگ را بعداً حذف کنید تاثیری روی سند نمی گذارد. در واقع می توان گفت که این تگ یک موقعیت جداگانه دارد ولی با جریان اصلی سند در ارتباط است.
در جدول زیر اولین نسخه از مرورگرهایی که از این تگ پشتیبانی می کنند برای شما نمایش داده شده است.
| Firefox | opera | Internet explorer | safari | chrome |
| 4.0 | 11.1 | 9.0 | 5.0 | 6.0 |
تگ figure از تگ های جدید و تگ های معنایی در HTML5 است. این عنصر از ویژگی های عمومی و رویدادهای عمومی در html پشتیبانی می کند.
تگ figcaption توضیحی برای تگ figure ارائه می دهد. از این تگ هم در ابتدای عنصر figure و هم در انتهای آن می توان استفاده کرد.
در مثال زیر می توانید نحوه ی استفاده از این دو تگ را مشاهده کنید.
|
1
2
3
4
|
<figure>
<img src=“image/fkcm9pWjvCT1VStySqeA2Tl72eJkfbmt4t8yenImKBVvK0kTmF0xjctABnaLJIm9.jpg” width=“140px” height=“170px” >
<figcaption> image for html5 </figcaption >
</figure>
|
خروجی کد بالا:
عنصر article در HTML5
تگ article یک محتوای مستقل و جامع را تعریف می کند و می توان آن را مستقل از سایر اجزای سایت در مکان های مختلف قرار داد.
از این تگ برای نوشتن مطلب در وبلاگ ها، فروم ها، توضیحات و غیره استفاده می کنیم. عنصر article در HTML5 جدید است و از ویژگی های عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.
در جدول زیر اولین نسخه ی مرورگرهایی که از این تگ پشتیبانی می کنند، نمایش داده شده است.
| Firefox | opera | Internet explorer | safari | chrome |
| 4.0 | 11.1 | 9.0 | 5.0 | 6.0 |
در کد زیر از تگ article استفاده شده است.
|
1
2
3
4
|
<article>
<h1>Google Chrome</h1>
<p>Google Chrome is a free, open–source web browser developed by Google, released in 2008.< / p >
</article>
|
خروجی کد بالا:
آموزش عنصر time در HTML5
تگ time از تگ های معنایی و جدید در HTML5 است. از این عنصر برای تعریف تاریخ و زمان استفاده می شود. این تگ یک روش است که زمان و تاریخ را به صورت رمز در می آورد تا برای ماشین قابل فهم باشد. در صورت استفاده از این تگ، موتورهای جستجو می توانند جستجوی دقیق تر و هوشمندانه تری را ارائه دهند. عنصر time از ویژگی ها و رویدادهای عمومی در HTML پشتیبانی می کند.
ویژگی datetime در تگ time یک تاریخ و زمان قابل خواندن برای ماشین ارائه می دهد.
اولین نسخه ی مرورگرهایی که از این عنصر پشتیبانی می کنند، در جدول نوشته شده است.
| Firefox | opera | Internet explorer | safari | chrome |
| 4.0 | 11.1 | 9.0 | 5.0 | 6.0 |
به کد زیر دقت کنید.
|
1
2
3
4
5
6
|
<h1>Learn HTML5</h1>
<p>
Article published on:
<time>10:22</time><br>
<time datetime=“2017-09-05 10:21” >5th September 2017</time>
</p>
|
خروجی کد بالا:
عناصر معنایی در HTML
در زیر لیستی از برخی از عناصر معنایی در HTML آمده است.
<article> محتوای مستقل و مستقل را تعریف می کند
<aside> محتوا را جدا از محتوای صفحه تعریف می کند
<details> جزئیات بیشتری را که کاربر می تواند مشاهده یا پنهان کند را تعریف می کند
<figcaption> یک عنوان برای عنصر <figure> تعریف می کند
<figure> محتوای مستقل مانند تصاویر، نمودارها، عکس‌ها، فهرست کدها و غیره را مشخص می‌کند.
<footer> یک پاورقی برای یک سند یا بخش تعریف می کند
<header> یک هدر برای یک سند یا بخش مشخص می کند
<main> محتوای اصلی یک سند را مشخص می کند
<mark> متن علامت گذاری شده/برجسته شده را تعریف می کند
<nav> پیوندهای ناوبری را تعریف می کند
<section> یک بخش را در یک سند تعریف می کند
<summary> یک عنوان قابل مشاهده برای عنصر <details> تعریف می کند
<time> تاریخ/زمان را تعریف می کند
برخی از تگ های مهم html را تحت عنوان تگ های معنایی در HTML5 معرفی کردیم. برای طراحی سایت های خود به بهینه ترین شکل با یک تیم متخصص همکاری کنید. تا مشکلاتی که به دلیل استفاده از قالب های آماده و سئو نشده وجود دارد برای شما رخ ندهد. مجموعه وب یار در 20 سال گذشته در زمینه طراحی وبسایت چه وب سایت های وردپرسی و یا سامانه های اختصاصی خدمات قوی و حرفه ای را به شما ارائه داده و همچنان نیز در خدمت شما عزیزان است. جهت آگاهی از آخرین مقالات منتشر شده در سایت صفحه اینستاگرام وب یار را دنبال کنید.
دنیای امروزه دنیای ارتباطات می باشد واهمیت رسانه ها بیشتر از همیشه احساس می شود. شبکه های اجتماعی با هدف ارتباط گرفتن افراد به وجود آمد و امروزه برای تبلیغات کسب و کارها بسیار مهم تلقی می شود. درعصر ارتباطات اغلب کسب وکارها برای پیشرفت زمینه ی شغلی خود به سمت تبلیغات در شبکه های اجتماعی روی آورده اند.شبکه های اجتماعی محبوب در اطلاع رسانی برای خبرهای روزانه نقش بسیار مهمی را ایفا می کنند. با وب یار همراه باشید تا با بهترین شبکه های اجتماعی در ایران آشنا شویم. در جامعه ی امروزی شبکه های اجتماعی جزئی از زندگی مردم شده که برای تبلیغات ،اطلاع رسانی ها و آموزش و…از این شبکه ها بهره می برند.باتوجه به همگانی شدن شبکه های اجتماعی بین مردم لازم است که در مورد هر کدام از این شبکه ها اطلاعاتی کسب کنیم تا از جوامع امروز عقب نمانیم. تاریخچه مختصری در مورد شبکه های اجتماعی : ریشه شکل گرفتن مفهوم شبکه های اجتماعی در سال 1960در دانشگاه ایلی نویز در آمریکا بود.و بعد از روی کار آمدن مفهوم شبکه های اجتماعی در سال 1997سایتی تشکیل شد که اجازه ایجاد پروفایل به افرادمختلف را داد هدف این سایت جمع کردن لیستی از دوستان در کنار هم بود و بعد از آن هم شبکه های اجتماعی مختلفی با اهداف متنوع روی کار آمد. در سال […]
طراحی قالب وردپرس امروزه طرفداران زیادی پیدا کرده است. وردپرس یک سیستم مدیریت محتوای قوی است که می توان با آن قالب های زیبایی طراحی کرد. در مطلب امروز وب یار می خواهیم با نحوه طراحی قالب وردپرس آشنا شویم. بیشتر سایت های دنیای وب امروزی با این سیستم مدیریت طراحی می شودو بازار کار خوبی دارد به ویژه اگر این قالب مختص کسب وکار شما باشد و با توجه به نیاز ها و سلایق شما طراحی شده باشد در این صورت است که علاوه برتکراری نبودن پاسخگوی نیازهای مجموعه شما می باشد. قالب وردپرس چیست ؟ وقتی شما هاست ودامنه ای برای سایت خود خریداری می کنید و سیستم مدیریت محتوای وردپرس را روی هاست خود نصب می کنید در این صورت یک سیستم مدیریت محتوا در دسترس شما قرار می گیرد با استفاده از این سیستم شما می توانید صفحه هاتی را به سایتتان اضافه کنید ،عکس و ویدیو منتشر کنید ،منو بالایی وپایین اضافه کنید ،انواع فرم ها را در سایت خود داشته باشید و… پس طراحی قالب وردپرس به شما امکان داشتن سایتی مجهز به امکانات خاص می باشد حال بسته به اینکه سایت شما شرکتی یا فروشگاهی ویا نه شخصی است لیست این امکانات متفاوت می باشد. دانلود قالب برای وردپرس بعد از اینکه شما وردپرس را نصب کردید سایت شما از یک ظاهر ساده […]
ساخت نرم افزار بدون کد نویسی و با استفاده از کدنویسی انجام میشود. در این مقاله از وب یار قصد داریم تا به چگونگی ساخت نرم افزار تحت ویندوز بدون کد نویسی و مزایای آن نسبت به روش‌های قدیمی بپردازیم. با پیشرفت تکنولوژی بستر استفاده از موبایل‌ها و کامپیوترها گسترده‌تر شده است، زیرا روز به روز به تعداد کاربران آن‌ها افزوده میشود. اگر شما نیز ایده‌ای برای تولید نرم افزار و سرویس‌دهی در این بستر را دارید، بهتر است هر چه سریعتر دست به کار شوید و از این فضا که پتانسیل بالایی دارد برای کسب درآمد استفاده کنید. ساخت نرم افزار بدون کد نویسی چگونه ممکن است؟ این روزها دیگر نیاز نیست تا پروسه‌ی طولانی آموزش برنامه نویسی را طی کنید تا بتوانید به ساخت نرم افزارها بپردازید. در گذشته اگر قصد ساخت برنامه‌ای را داشتید باید ساعت‌ها زمان صرف می‌کردید تا با استفاده از کدها دستور العمل‌هایی را برای برنامه تعریف کنید تا عملکرد درستی داشته باشد. همچنین پس از تعریف آن دستور العمل‌ها باید مراحل آزمون و خطا را طی می‌کردید تا به اصطلاح برنامه‌ای که ساخته‌ای را باگ گیری (اشکال‌گیری) کنید. اما دیگر ساخت نرم افزار بدون کد نویسی یک رویا نیست! متخصصان نرم افزارهای زیادی را به عنوان ابزارهای کمکی طراحی کرده‌اند تا کاربران بتوانند بدون نوشتن حتی یک خط کد، نرم افزار ایده‌آل خود […]
در این لینک مقالات مرجع جاوا اسکریپت برای شما عزیزان فراهم شده تا دسترسی راحت تری به مطالب حوزه جاوااسکریپت داشته باشید. آموزش زبان جاوا اسکریپت javascript + جلسه اول زبان برنامه نویسی جاوا اسکریپت یک زبان سمت کلاینت (کاربر) است و روی اکثر مرورگر های امروزی کار می کند. این زبان به تمام خصوصیت های عناصر html و css دسترسی داشته و نسبت به رویدادهای کاربر واکنش نشان می دهد محل قرار گیری کدهای جاوا اسکریپت + جلسه دوم تگ های جاوا اسکریپت این توانایی را دارند که در هر جایی از صفحات html به کار روند. آموزش دستورات مهم جاوا اسکریپت + جلسه سوم دستور جاوا اسکریپت شامل مقادیر، عملگرها،کلمات کلیدی و توضیحات است.دستورات جاوا اسکریپت زیر همان کلمات کلیدی رزرو شده ای هستند که نمی توانند به عنوان نام متغیر به کار روند. آموزش توضیحات در جاوا اسکریپت + جلسه چهارم توضیحات در جاوا اسکریپت به دو صورت به کار می روند: 1- توضیحات تک خطی 2- توضیحات چند خطی تعریف متغیرها در جاوا اسکریپت + قسمت پنجم متغیرها در javaScript حافظ و حامل اطلاعات هستند. یعنی این متغیرها اطلاعاتی را در خود ذخیره نموده و در حین اجرای برنامه با شرایط مختلف تغییر می کنند. انواع داده ها در JavaScript + جلسه ششم زبان جاوا اسکریپت نیز همانند سایر زبان های برنامه نویسی از انواع داده های عددی (Number) ، رشته ای (String) ، […]
در این مقاله از وب یار میخواهیم لیست ها در HTML5 که شامل لیست مرتب ، لیست نامرتب و لیست توضیحات را به شما بگوییم. آموزش لیست ها در HTML5 لیست ها کاربردهای فراوانی در متون مختلف داشته و حتما تا به حال نمونه هایی از آن ها را در کتاب ها ، مجلات ، روزنامه ها و.. دیده اید. اما کاربرد لیست ها محدود به مطالب چاپی نمی شود و امروزه در انواع طراحی صفحات وب ، شبکه های اجتماعی و یا پیام رسان ها نیز دیده می شوند. با کمک لیست ها می توانید موضوعات مرتبط به هم را در یک دسته قرار داده و آن ها را گروه بندی کنید. HTML نیز به منظور ایجاد انواع لیست ها در صفحات وب تگ هایی مشخص کرده است. در HTML5 سه نوع لیست با کاربردهای متفاوت وجود دارد که شامل موارد زیر است : Unordered Lists Ordered Lists Description Lists در ادامه به کاربرد و نحوه ی نوشتن هر لیست می پردازیم : لیست مرتب Unordered Lists در این لیست ها ترتیب آیتم ها اهمیت نداشته و تنها عناصر مرتبط به هم در یک لیست قرار می گیرند. به عنوان مثال به لیست زیر توجه کنید: انواع نوشیدنی های گرم قهوه چای نسکافه همان طور که مشاهده می کنید در این لیست ترتیب اهمیت نداشته و فرقی نمی کند […]
اقدامات اولیه برای شروع طراحی سایت چیست؟ با انواع طراحی سایت و روش‌های طراحی آشنا هستید؟ طراحی به چه منظوری انجام میشود؟ اگر کمی زرنگ باشید و با توجه به تغییر و تحولات بسیار عظیم صورت گرفته در کسب‌وکارها بیندیشید کماکان با هدف اصلی طراحی سایت و اهمیت آن آشنا می‌شوید. با وب یار همراه باشید تا با روند طراحی سایت آشنا شویم. علم همچنان در حال پیشرفت است و در راستای توسعه و رشد اقدامات بسیاری اعم از اینترنتی شدن کسب‌وکارها صورت می‌گیرد. اما نکته مهم این است که باوجود گسترش وب‌سایت‌ها در سرتاسر دنیا، نمی‌توان گفت که تمامی سایت‌ها یک سایت موفق و بدون نقص هستند. طراحی تنها به منظور ایجاد یک وبسایت نیست، بلکه جهت راه‌اندازی یک سایت نیاز به انجام پارامترهایی است که در ادامه برخی از اقدامات اولیه برای شروع طراحی سایت را معرفی خواهیم کرد. اقدامات اولیه برای شروع طراحی سایت طراحی سایت یکی از اقدامات بسیار مهمی است که برای ساخت وب‌های متنوع از آن استفاده می‌کنند. حال این طراحی سایت می‌تواند شامل طراحی سایت خبری، طراحی سایت خصوصی، طراحی سایت پزشکی و سلامت، طراحی سایت آموزشی، طراحی سایت طلافروشی و یا طراحی سایت فروشگاهی باشد. این طراحی باید بر اساس اصول و رعایت نکات بسیار زیادی باشد که باید یک‌به‌یک انجام شوند. انتخاب نام دامنه اولین و مهم‌ترین قدم برای طراحی یک […]