آموزش HTML به زبان ساده-قسمت دوم: ایجاد سند HTML

قسمت دوم آموزش html

قسمت دوم آموزش html

فایل HTML چه نوع فایلی است؟

در قسمت اول از این دوره آموزشی گفتیم که HTML یک سند متنی است و به وسیله برنامه های ویرایش متن، ایجاد یا ویرایش می‌شود. اما در نهایت به جای پسوند txt که مربوط به فایل های متنی ساده است، پسوند html را به خود می‌گیرد. این نکته را هرگز فراموش نکنید که HTML یک زبان برنامه نویسی نیست بلکه یک زبان نشانه گذاری فرامتنی است. با توجه به این توضیحات به سراغ آموزش ایجاد فایل HTML می‌رویم.

ایجاد فایل HTML

ایجاد یک فایل HTML به چند روش امکان پذیر می‌باشد که ما ساده ترین و البته بهترین راه ها را به شما آموزش می‌دهیم. برای انجام چنین کاری ما دو راه را پیشنهاد می‌دهیم. راه اول با استفاده از ویرایشگر های متنی مانند NotePad و ++NotePad و راه دوم با استفاده از برنامه قدرتمند Adobe DreamWeaverاست. در زیر به شرح هر کدام از آنها می‌پردازیم.

راه اول: استفاده از NotePad

این روش بسیار ساده بوده و تنها کاری که باید انجام بدهید این است که در taskbar یا همان نوار وظیفه ویندوز که در پایین صفحه نمایش قرار دارد، روی آیکون ذره‌ بین کلیک کنید و عبارت NotePad را جستجو کنید. پس از این، برنامه NotePad را اجرا کنید و قطعه کد زیر را در آن جای گذاری کنید.

See the Pen KKPoYGJ by amir (@amir5250) on CodePen.0

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

پس از Copy و Paste کردن کد های بالا در NotePad حالا نوبت به ذخیره کردن آن می‌رسد که باید به نکاتی که ذکر می‌شود توجه کامل داشته باشید. برای ذخیره فایل باید از منوی سربرگ به قسمت File رفته سپس گزینه Save as را بزنید. حال به عکس زیر توجه کنید.

ایجاد فایل html

در قسمت اول ما نام پرونده خود را “bezafeh.html” قرار دادیم. دقت کنید که پس از نامی که برای فایل خود گذاشتید باید حتما پسوند html را قرار بدهید. همچنین توجه کنید که پسوند شما با حروف کوچک نوشته می‌شود نه حروف بزرگ.

در قسمت شماره دو به نکته ابتدایی این آموزش اشاره دارد که گفتیم:”فایل HTML یک سند متنی است” و این قسمت مهر تاییدی بر جنسیت فایل html است.

قسمت سوم از این تصویر مربوط به “Encoding” به معنی “رمز گذاری” است. هر کدام از این رمزگذاری ها کاربرد خاص خود را دارد اما گزینه UTF-8 برای زبان ایرانی مناسب است. پس حتما در هنگام ذخیره فایل خود به این موضوع دقت کافی را داشته باشید.

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

راه دوم: استفاده از DreamWeaver

در ابتدای کار محیط نرم افزار Adobe DreamWeaver بسیارپیچیده به نظز می‌رسد اما پس از اینکه کمی با HTML آشنا شدید متوجه سادگی در عین قدرتمند بودن این برنامه می‌شوید. برای اینکه از همین ابتدای کار با ویژگی های فوق‌العاده آن آشنا شوید به ایجاد یک فایل HTML توسط این برنامه می‌پردازیم.

برای شروع ابتدا برنامه DreamWeaver را باز کنید و از منوی سربرگ گزینه File سپس New را انتخاب کنید. همچنین می‌توانید برای سادگی کار از کلید میانبر Ctrl + N استفاده کنید. پس از انجام این فرآیند یک کادر مانند تصویر زیر برای شما باز می‌شود که به تشریح آن می‌پردازیم.

ایجاد html با DreamWeaver

از آنجایی که ِDreamWeaver بیشتر زبان های برنامه نویسی و نشانه گذاری را پشتیبانی می‌کند مانند قسمت اول در تصویر شما باید نوع فایل خود که html است را انتخاب کنید.

توجه کنید که قسمت شماره دو نام فایل شما نیست بلکه title یا عنوان سایت شما است. به عنوان مثال عنوان سایت ما bezafeh.ir است در حالی که ممکن است نام فایل html خود را برابر index.html قرار دهیم. برای اینکه بهتر متوجه شوید به ادامه این مطلب آموزشی دقت کنید.

کادر شماره سه در تصویر به نوع سند اشاره دارد. قبل تر گفتیم که html یک زبان نشانه گذاری است و نوع سند آن متنی است در حالی که اینجا نوع سند را برابر HTML5 قرار داده است. برای درک بهتر این موضوع باید بدانید که HTML5 نوع پیشرفته تری از HTML است و این نکته به معنای این نیست که این نوع فایل ها متنی نیستند. بلکه HTML5 امکانات بیشتری را به کاربر می‌دهد. لازم به ذکر است که پسوند فایل HTML5 نیز با HTML تفاوتی ندارد و هر دو دارای پسوند “html.” هستند.

*باید بدانید که در این دوره آموزشی امکانات HTML5 نیز به شما آموزش داده می‌شود و نیازی به نگرانی در این مورد نیست.

کادر شماره چهارم در تصویر مربوط به اضافه کردن استایل های CSS به طور جداگانه است و در حال حاضر نیازی به این کادر ندارید پس آن را خالی رها کنید.

حالا نوبت به زدن دکمه Create است تا سند شما ایجاد شود. پس از این کار شما با تصویری مانند تصویر زیر روبرو می‌شوید که به توضیح آن می‌پردازیم.

HTML ایجاد شده با DreamWeaver

توانایی های این برنامه در اینجا نمودار می‌شود که به طور خودکار متن اولیه فایل شما را به طور خودکار آماده می‌کند. همانطور که مشاهده می‌کنید bezafeh.ir که در ابتدای ایجاد فایل در کادرtitle نوشته بودیم در اینجا، میان تگ عنوان قرار گرفته تا مرورگر آن را به صورت عنوان این سند ترجمه کند. حالا اگر این فایل را ذخیره و سپس توسط مرورگر آن را باز کنید در نوار url عنوان سایت را مشاهده میکنید.

در میان تگ head یک تگ meta باز شده است که Encoding را به طور پیش فرض روی UTF-8 تنظیم کرده است وشما دیگر نیازی به تنظیم آن ندارید.

در بالای کادر کد ها سه گزینه مشاهده می‌کنید که در حالت پیش فرض روی Code قرار دارد. با فعال کردن حالت split شما می‌توانید علاوه بر کد نویسی، به طور زنده تغییراتی که ایجاد می‌کنید را مشاهده نمایید.

برای ذخیره کردن سند خود، کافی است از منوی سربرگ گزینه File سپس Save را انتخاب کنید. یا اینکه از کلید میانبر Ctrl+S استفاده کنید. توجه کنید که در این جا شما نیاز به تعیین پسوند فایل ندارید و فقط کافی است نام فایل خود را تغییر دهید. زیرا پسوند به طور خودکار تنظیم شده است.

0 دیدگاه

برای نوشتن دیدگاه ، باید وارد حساب کاربری خود شوید.

قوانین و مقررات ارسال دیدگاه در "به اضافه" را مطالعه کرده و آنها را می‌پذیرم.


نمایش دیدگاه ها
هیچ دیدگاهی وجود ندارد!