سلام عرض می کنم خدمت دوستان عزیز
در جلسه قبل، مقدماتی را راجع به HTML5 خدمت شما ارائه کردیم. در این درس قصد داریم نحوه نوشتن کدهای HTML از طریق text editor ها را به شما آموزش دهیم.
برای این کار، وارد وب سایت w3schools.com می شویم و از آموزش اچ تی ام ال، منوی سمت چپ، HTML Editors را انتخاب می کنیم.
نوشتن HTML توسط Notepad یا TextEdit
عنوانی که برای این بخش انتخاب کرده است؛ Write HTML Using Notepad or TextEdit می باشد.
Notepad و TextEdit نرم افزارهایی هستند که به ترتیب بر روی سیستم عامل های ویندوز و مکینتاش موجود می باشند.
توضیحاتی که در اینجا ارائه شده است را خدمت شما عرض می کنم:
- صفحات وب می توانند از طریق HTML Editor های حرفه ای ایجاد و تغییر داده شوند.
- اگرچه برای آموزش HTML، پیشنهاد می کنیم که از ویرایشگرهای ساده مثل Notepad یا TextEdit استفاده کنید.
- به این دلیل که در این ویرایشگرها شما مجبورید که تمام کدها را خودتان بنویسید و این باعث می شود که کدها، خیلی بهتر در ذهن شما بماند.
مراحلی که در ادامه توضیح میدهم را انجام دهید تا بتوانید صفحات HTML را در سیستم عامل های ویندوز یا مکینتاش ایجاد کنید.
مراحل ایجاد فایل HTML
باز کردن notepad
برای باز کردن نوت پد در سیستم عامل های ۸ و بالاتر، از منوی Start، نوت پد را جستجو کنید و این نرم افزار را باز کنید.
اما در ویندوز ۷ شما باید این مسیر را دنبال کنید:
Start > Programs > Accessories > Notepad
باز کردن textedit در مکینتاش
Finder > Applications > TextEditor
در اینجا توضیح داده است: برای این که بتوانیم کدهای اچ تی ام ال را در این نرم افزار بنویسیم، باید یک سری تنظیمات را انجام دهیم که به صورت زیر است:
Preferences > Format و از آنجا Plain Text را انتخاب می کنیم و بعد از آن در پائین بخش Open and Save روی باکس Display HTML files as HTML code instead of formatted text کلیک می کنیم و بعد از آن نرم افزار را باز می کنیم و کد نویسی می نماییم.
سیستم عامل من ویندوز است؛ توضیحاتی که ارائه شد برای دوستانی است که از سیستم عامل مکینتاش استفاده می کنند.
نحوه نوشتن کدهای HTML
طبق توضیحات، NotePad را باز کنید.
میتوانیم کدی که در وب سایت است را copy و در نرم افزار paste کنیم یا این که خودمان کد را بنویسیم.
<!DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
ذخیره کردن فایل HTML
بعد از این که کد را در نرم افزار paste کردیم، از منوی file گزینه save را انتخاب می کنیم و در مکان دلخواه، فایل را ذخیره می کنیم.
در بخش File Name اسم فایل را می نویسیم (اسم دلخواه) و بعد از آن پسوند فایل اچ تی ام ال که می تواند: htm یا html باشد را می نویسیم.
تفاوتی بین این دو نیست، من پسوند html را می نویسم.
در بخش encoding باید UTF-8 را انتخاب کنیم به این خاطر که اگر متن فارسی در فایل نوشتیم، به درستی نمایش داده شود.
فایل را ذخیره می کنیم و به پوشه ای که فایل را ذخیره کرده بودیم، می رویم و فایل را از طریق یک مرورگر باز می کنیم.
باز کردن فایل HTML
اگر آیکن فایل، شکل مرورگر داشت، فایل خودبخود در یک مرورگر باز می شود. در غیر این صورت می توانید کلیک راست کنید و از گزینه open with یک مرورگر را انتخاب کنید مثل کروم یا فایرفاکس و …
من فایل را با دوبار کلیک باز می کنم. نتیجه کد را در مرورگر مشاهده می کنید.
بررسی فایل HTML
نرم افزار نوت پد را باز می کنیم و می بینیم که کد ما بدنه فایل HTML را داراست. و در بخش body که درواقع بدنه فایل HTML را تشکیل میدهد یک تگ h1 داریم که برای header ها و در واقع عنوان ها استفاده می شود و سایز بزرگ تری دارد.
تگ بعدی، تگ p است؛ که برای پاراگراف های متن استفاده می شود. که نحوه نمایش آن را در مرورگر می بینیم.
به وبسایت w3schools.com و ادامه آموزش برمی گردیم:
در مرحله ۳ نحوه ذخیره کرده فایل اچ تی ام را توضیح داده است و مرحله ۴ در واقع همان نمایش فایل است؛ که ما توضیح دادیم.
در بخش بعدی توضیح می دهد که w3schools یک ادیتور آنلاین دارد و ما می توانیم از آن استفاده کنیم. این درس در اینجا به پایان می رسد.
ممنون از همراهی شما
دیدگاه بگذارید