HTML

آموزش HTML: مقدمه

هادی حاجی (ادمین)

5 دقیقه زمان خواندن

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

یادگیری HTML بسیار ساده است و شما از آن لذت خواهید برد.

یک فایل HTML چیست؟

HTML مخفف زبان نشانه گذاری فرا متنی است(hyper text markup language).
یک فایل HTML یک فایل متنی حاوی برچسب های کوچک نشانه گذاریست
بر چسب های نشانه گذاری به مرورگرهای وب بیان می کنند که صفحه را چگونه نشان دهد
یک فایل HTML باید دارای پسوند html. یا html. باشد
یک فایل HTML می تواند توسط یک ویرایشگر متنی ساده ساخته شود

آیا می خواهید یکبار امتحان کنید؟

اگر در حال کار با ویندوز هستید برنامه note pad را اجرا کنید. متن زیر را تایپ کنید.

<html>
<head>
<title>title of page </title>
</head>
<body>
This is my first home page.<b> This text is bold </b>
</body>
</html>

فایل را تحت عنوان “mypage.htm”ذخیره کنید.
مرورگر اینترنت خود را باز کنید، از منوی فایل گزینه “open” یا “open page” را انتخاب کنید. یک جعبه گفتگو ظاهر خواهد شد .گزینه “brows” یا “choose file” را انتخاب کنید و در مکانی که فایل HTML خود را ساخته اید قرار گیرید. آن را انتخاب کنید و روی گزینه “open” کلیک کنید.حالا شما یک آدرس در جعبه گفتگوی خود مشاهده خواهید کرد. بعنوان مثال “C:\mypage.html” گزینه ok را کلیک کنید و مرورگر صفحه را به شما نشان خواهد داد.

مثال تشریح شده

اولین برچسب در فایل HTML شما ، <html> است.این برچسب به مرورگر شما می فهماند که این آغاز یک فایل HTML است، آخرین برچسب در فایل شما <html/> است.این برچسب به فایل شما می فهماند که این انتهای یک فایل HTML است.
متن های بین برچسب و اطلاعات سرانداز (header)شماست .اطلاعات سر انداز در پنجره مرورگر نشان داده نخواهد شد. متن بین برچسب <title>، سرتیتر پرونده شماست. سرتیتر در قسمت عنوان صفحه مرورگر نشان داده خواهد شد.
متنی که در مرورگر نشان داده خواهد شد ، متنی است که بین برچسب <body> نشان داده خواهد شد.
متنی که بین برچسب <b> قرار گیرد در مرورگر بصورت برجسته نشان داده خواهد شد.

پسوند htm. یا html.؟

هنگامی که شما یک فایل HTML را ذخیره می کنید شما می توانید هرکدام از پسوندهای htm. یا html. را انتخاب کنید.ما در مثال هایمان از پسوند htm. استفاده می کنیم. این ممکن است یک رفتار بد موروثی از گذشته باشد که بیشتر نرم افزارهایی که استفاده می شوند فقط پسوند سه حرفی را قبول می کنند.با نرم افزار جدیدتر ما فکر می کنیم که اگر از پسوند html. استفاده کنیم بسیار ایمن تر خواهیم بود.

به ویرایشگر های HTML توجه کنید:

1. ++Notepad (بهترین ویرایشگر رایگان ویندوزی)

++Notepad یکی از بهترین انتخاب‌های پیش‌ روی کاربران ویندوزی است. این ویرایشگر مجهز به قدرتمندترین پلاگین‌هایی است که در این زمینه وجود دارد. PreviewHTML، HTML tag که برای های‌لایت کردن برچسب‌های HTML مورد استفاده قرار می‌گیرد، Tidy2 برای ایجاد تورفتگی‌ها و…. از جمله این موارد هستند. از جمله ویژگی‌های کلیدی Notepad++ می‌توان به رابط Tab که قادر است با چند فایل کار کند، ترکیب نحوی انعطاف‌پذیر، رابط کاربری قابل پیکربندی، محیط چند زبانه‌ و…. اشاره کرد.

2. Brackets ( ویندوز، لینوکس و مک)

Brackets یکی دیگر از ابزارهای محبوب و جامعی است که برای طراحی وب و دستکاری HTML در اختیارتان قرار دارد. برعکس Notepad++، این ویرایشگر چندسکویی بوده و روی سیستم‌عامل‌های مختلف قابل استفاده است. Brackets همراه با قابلیت‌های توسعه اضافی در اختیار توسعه دهندگان قرار دارد که از آن جمله به موارد زیر می‌توان اشاره کرد.

Emmet- Emmet یکی از محبوب‌ترین توسعه‌هایی است که سرعت شما در نوشتن کدهای HTML و CSS را افزایش می‌دهد.

Beautify- این افزونه می‌تواند فایل‌های جاوااسکریپت، CSS و HTML را فرمت‌بندی کند.

W3C validation- این افزونه کاربردی برای انطباق هر چه دقیق‌تر و بررسی کدها مورد استفاده قرار می‌گیرد.

3. Coffecup (رایگان + پولی)

بدون شک نسخه تجاری Coffecup یکی از بهترین ویرایشگرهای HTML است. البته نسخه رایگان آن نیز قابلیت‌های خوبی را در اختیارتان قرار می‌دهد. از ویژگی‌های کلیدی این ویرایشگر می‌توان به نوار ابزار قابل تنظیم، تکمیل کننده کدها برای عناصر، خصلت‌ها و انتخاب‌گرها، تم‌ها و پوسته‌ها، پشتیبانی از قابلیت markdown در اچ‌اتی‌ام‌ال، پشتیبانی از FTP/SFTP، پشتیانی از ویژگی کشیدن و رها کردن تصاویر، ارائه پیش‌نمایش، های‌لایت کردن ترکیب نحوی و ده‌ها ویژگی دیگر اشاره کرد. نسخه پولی آن نیز قابلیت‌هایی همچون اعتبارسنجی HTML و CSS، شفاف و بهینه کردن کدها، داشبورد خطایابی کلمات و…. را ارائه می‌کند. این ویرایشگر همچنین یکسری ماژول‌های پیشرفته دارد که از آن جمله به Foundation framer، Bootstrap builder و ماوژول ویژه طراحی سایت‌های واکنش‌گرا می‌توان اشاره کرد.

4. Notetab (رایگان +پولی)

Notetab یکی دیگر از ویرایشگرها HTML است که برای ویرایش کدهای CSS نیز مورد استفاده قرار می‌گیرد. این ویرایشگر در سه نگارش سبک، استاندارد و حرفه‌ای مورد استفاده قرار می‌گیرد. نسخه سبک رایگان بوده و قابلیت‌های عادی را ارائه می‌کند، اما نسخه حرفه‌ای به خوبی از HTML5 و کتابخانه‌های CSS، bootstrap پشتیبانی کرده و ویژگی‌های دیگری همچون تکمیل کننده خودکار کدها، سازمان‌دهی فایل‌ها را در اختیارتان قرار می‌گیرد. این ویرایشگر به راحتی از روی یک حافظه فلش قابل اجرا بوده و نیازی نیست آن‌را نصب کنید.

5. Eclipse

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

6. HTML-Online

اگر به دنبال یک ویرایشگر آنلاین کدهای HTML هستید و تمایل دارید این‌کار را از درون مرورگر خود خود انجام دهید بهتر است HTML-online.com را مورد استفاده قرار دهید. بدون نیاز به نصب یا پرداخت هزینه‌ای همه چیز در اختیارتان قرار دارد. از جمله ویژگی‌های قدرتمند آن می‌توان به پشتیبانی از انواع مختلفی از فرمت‌های فایلی، ساخت قدرتمند صفحات وب، تبدیل جداول به عناصر div، بهینه‌سازی کدها و… اشاره کرد.

7. BlueGriffon

BlueGriffon یکی از قدرتمندترین ویرایشگرهایی است که در سه نسخه رایگان، اصلی و حرفه‌ای با قابلیت پشتیبانی از EPUB در اختیارتان قرار دارد. نسخه رایگان قابلیت‌های قدرتمندی در ارتباط با HTML5 audio، ویدیو و فرم‌ها، تم‌های روشن و تاریک، پشتیبانی از CSS3، SVG، فونت‌ها، پشیتبانی از زبان‌های مختلف، پانل ویژه DOM و…. ارائه می‌کند.

8. Emacs همراه با افزونه‌ها

Emacs یکی دیگر از ویرایشگرهای محبوب است که به شکل رایگان بهترین قابلیت‌ها را در اختیارتان قرار می‌دهد. Emacs تمام قدرت خود را از افزونه‌هایی که برای ساخته شده به دست می‌آورد. حالت HTML این ویرایشگر به خوبی قادر است فرآیند ویرایش کدهای HTML را انجام می‌دهد.

9. Atom

Atom یک ویرایشگر متنی قابل پیکربندی بوده که از سوی توسعه‌دهندگان گیت‌هاب ارائه شده است. اتم یکی از سریع‌ترین ویرایش‌گرهایی است که به دو شکل تجاری و شخصی در اختیارتان قرار دارد. اما مهم‌ترین ویژگی اتم در ارتباط با گروه‌هایی است که از آن پشتیبانی می‌کنند. اتم همراه با یکسری ویژگی‌هایی پایه در ارتباط با ویرایش کدها در اختیار شما قرار می‌گیرد، اما زمانی که بسته‌های جانبی آن‌را نصب کنید به یک ویرایشگر تمام عیار HTML تبدیل می‌شود. از جمله این بسته‌ها می‌توان به Emmet، atom-html-preview، Autocomplete-plus، Atom-color-highlight، Autocomplete-CSS، linter، minimap، gaml، jade و…. اشاره کرد.

10. Visual Studio Community

Visual studio Community عالی‌ترین محیطی است که از سوی مایکروسافت ارائه شده و توسعه‌دهندگان به شکل رایگان می‌توانند از آن استفاده کنند. ویژوال استودیو مجموعه غنی از قابلیت‌ها در ارتباط با ویرایش کدهای HTML و CSS را در اختیارتان قرار می‌دهد و همچنین طیف گسترده‌ای از افزونه‌ها از آن پشتیبانی می‌کنند. از جمله افزونه‌های محبوب در این زمینه به HTML Snippets، HTMLHint، HTML CSS support، Intellisense for CSS class و… می‌توان اشاره کرد. این ابزار برای ساخت سایت‌های پیچیده و در مقیاس بزرگ با فناوری‌های چندگانه ایده‌آل است.

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

شروع آموزش