نویسنده : سئوگل | نظرات (0)
دوره آموزش مفاهیم مقدماتی در HTML5
به دوره رایگان اموزش HTML5 خوش آمدید. هدف این دوره آموزش مفاهیم مقدماتی در HTML5 است.
برنامه نویسی به طور خلاصه به دو دسته تقسیم می شود:
دسته اول را میتوان Front-End که به آن (Client-Side) برنامه نویسی سمت کاربر گفته می شود.
دسته دوم را میتوان Back-End که به آن (Server-Side) برنامه نویسی سمت سرور گفته می شود.
البته بعضی از برنامه‌نویسان می‌توانند در هر دو حوزه کار کنند که به آنها Full Stack گفته می شود.
HTML برگرفته از حروف اول Hyper Text Markup Language است
یک زبان برنامه‌نویسی نیست بلکه یک زبان توصیف صفحات وب و برای تدوین قالب و طراحی صفحه‌های وب به کار می‌برند.
HTML یک زبان برچسب یا نشانه گذاری است و برای آن مجموعه از تگ‌ها (tag) استفاده می شود.
تگ‌های HTML در دو حالت ارائه می‌شوند. تگ‌هایی که تگ بسته منحصر به فرد دارند و تگ‌هایی که خودشان، به تنهایی بسته می شوند.
حالت اول ، تگ ها عناصر محصور شده توسط براکت زاویه < > هستند. تگ ها به صورت باز و بسته بکار میروند که اولین تگ ، تگ شروع و بعدی تگ پایان می باشد. در بین باز و بسته شدن تگ نیز محتوا قرار می‌گیرد.
حالت دوم تگ‌ها، تگ‌هایی هستند که نیاز به تگ بستن ندارند. در واقع این تگ‌ها خودشان به صورت خودکار بسته می‌شوند. به این تگ‌ها Self Closing می‌گویند.
اعلان <DOCTYPE!>
<DOCTYPE!> یک تگ HTML نیست بلکه یک اعلان است به منظور راهنمایی مرورگر ها می باشد و به مرورگر می گوید از چه نسخه HTML در صفحه استفاده شده است. کنسرسیوم جهانی وب (W3C) به طور جدی توصیه می کند که در صفحات خود از این دستور استفاده کنیم. همیشه اعلان <DOCTYPE!> را به اسناد HTML خود اضافه کنید، تا مرورگر بداند با چه نوع سندی سر و کار دارد.
آموزش کامل ساختار بندی یک سند HTML
هر صفحه وب یا هر سند HTML با یک تگ <html> شروع و به یک تگ بسته <html/> ختم می شود. کلا ساختار یک سند HTML بدین صورت است که که تمامی کدها داخل دو تگ <html> </html> قرار می گیرند. محتوای خارج از این تگ به عنوان کد HTML شناخته نمی‌شود.
ساختار سند html از دو قسمت تشکیل شده است. در داخل عنصر html دو عنصر اصلی صفحه وجود دارند:
یکی تگ head که صفحه html و دیگری تگ body که بدنه صفحه html را تشکیل می دهد.
تگ Head
همه ی صفحات یک وب سایت از یک قسمت به نام سر صفحه یا head تشکیل شده اند.
این عنصر صفحه حاوی اطلاعات عمومی در مورد صفحه است که این اطلاعات را در اختیار مرورگرها ، موتورهای جستجو ، رباط ها و خزنده های موتور جستجو و .... قرار میدهد. این تگ حاوی المان‌های غیر بصری همچون عنوان صفحه ، کلمات کلیدی ، استایل های خارجی و داخلی ، جاوا اسکریپت های خارجی و داخلی ، آیکون صفحه ، توضیحاتی راجع به سازنده و ... می باشد که کاربران نمی توانند آنها را مشاهده کنند.
تگ body
و یک قسمت دیگر به نام body یا بدنه تشکیل شده است. در این نوشته با ساختار بندی سند HTML که به نوعی می توان آن را استخوان بندی کلیه صفحات وب نامید، آشنا می شوید.
تگ ها معمولا به صورت جفتی به کار می روند و ساختار جدیدی به نام عنصر (element) را تشکیل می دهند
یک عنصر از سه قسمت اصلی تشکیل می شود: تگ آغازین، محتوای تگ (که می‌تواند یک متن ساده، یک عنصر دیگر و یا خالی باشد) و تگ پایانی.
نرم افزارهای مورد نیاز برای کدنویسی HTML
برای شروع ما از یک ابزار بسیار ساده استفاده میکنیم که در دسترس همه‌ی ما قرار دارد، Notepad ویندوز. این نرم افزار بصورت پیشفرض روی تمام سیستم‌عامل‌های ویندوز از قبل نصب شده است. برای شروع کار فقط کافی است در منوی Start عبارت Notepad رو جستجو کنیم تا یک نرم افزار برای ما باز شود و شروع به استفاده از آن کنیم.
در هرحال، به بحث اصلی باز می گردیم. نرم افزارهای مورد نیاز برای برنامه نویسی کدهای مورد نیاز در یک طراحی وب سایت شامل موارد زیر می باشد:
DreamWeaver
FrontPage
VisualStudio
Sublime Text
Atom
Microsoft WebMatrix
فعلا با نرم افزارهای فوق کاری نداشته باشید و پیشنهاد ما این است اگر با ویندوز کار می کنید از نرم افزار و اگر با mac کار می کنید از نرم افزار TextEdit استفاده کنید.
با یک مثال نحوه استفاده از notepad رو برای نوشن کدهای html به شما خواهیم گفت:
برای باز کردن notepad در ویندوز 7 یا 10 بر روی منوی start کلیک کنید سپس بر روی All Programs رفته و بعد Accessories و در اینجا notepad را مشاهده می کنید و روی آن کلیک کنید.
برای یادگیری html در ابتدا بهتر است از ویرایشگرهای ساده استفاده کنیم ، چون ویرایشگرهای حرفه ای که در بالا نام بردیم به دلیل امکانات اماده و زیادی که دارند باعث می شوند که شما نتوانید کدها را یاد بگیرید و به استفاده از یک سری کدهای آماده عادت کنید.
ذخیره یا save کردن فایل
در این مرحله باید فایل خود را ذخیره کنید. به منوی فایل notepad رفته سپس بر روی save as کلیک کنید.
تنظیمات را مانند تصویر انجام دهید. دقت کنید پسوند فایل را html قرار دهید برای مثال index .html
نکته بعدی کدگذاری فایل است که باید بر روی UTF-8 قرار دهید چون زبان فارسی را پشتیبانی می کند.
ک سند اچ‌تی‌ام‌ال، یک پروندهٔ مبتنی بر متن (Text–based) است که معمولاً با پسوند .htm یا .html نام‌گذاری شده و محتویات آن از برچسب‌های اچ‌تی‌ام‌ال تشکیل می‌شود.