فروشنده شوید و کسب در آمد کنید
09142393101
0

آموزش HTML – بخش اول : ساخت یک سند HTML

ایجاد یک فایل اچ تی ام ال از آب خوردن نیز آسان‌تر  است. برای ایجاد فایل‌های اچ تی ام ال نه به برنامه خاصی نیاز دارید و نه به سیستم عامل بخصوصی. در واقع شما فایل‌های اچ‌تی‌ام‌ال را می‌توانید حتی به کمک نرم‌افزار نوت پد NotePad ویندوز نیز ایجاد کنید. با این وجود توصیه می‌کنیم برای راحت‌تر نوشتن کدها و همچنین فهم بهتر مطالب از نرم افزارهای ویرایش متن رایگان همچون  ++Notepad یا Sublime Text استفاده کنید.

ما در این آموزش، به شما نحوه ایجاد یک فایل Html را در برنامه ویرایش متن پیش فرض ویندوز، یعنی نوت پد Notepad آموزش می‌دهیم.

مرحله اول: در نسخه‌های قبل از ویندوز ۸، بر روی دکمه Start ویندوز کلیک کنید. سپس از بخش All Programs وارد بخش Accessories شوید و از آنجا برنامه Notepad را اجرا کنید. در ویندوز ۸ یا نسخه‌های جدیدتر نیز منوی استارت (گوشه سمت چپ صفحه) را کلیک کرده و کلمه Notepad را تایپ کنید تا برنامه در لیست روبرویتان قرار گیرد. حالا متن کدها را در فایل متنی که باز کرده‌ایم وارد می‌کنیم. در حال حاضر چون متنی را نمی‌دانیم هر چه دوست دارید در آن بنویسید و به مرحله بعدی بروید.

مرحله دوم: حالا وقت ذخیره فایل در قالب صفحه Html است. برای این کار از منوی file در نرم افزار NotePad گزینه save As را انتخاب کنید. فایلتان را به نام دلخواه مثلا coderschool.Html تغییر دهید. توجه داشته باشید که حتما پسوند html. را بعد از نام دلخواهتان قرار دهید تا فرمت متن به یک سند اچ تی ام ال تبدیل شود.

بیشتر
تگ Iframe

مرحله سوم:‌ در این قسمت یک گزینه کشویی به نام encoding دیده می‌شود که بهتر است آن را روی UTF-8 قرار دهید.

مرحله پایانی: حالا فایلتان را در جایی که دوست دارید ذخیره کنید. با کلیک بر روی آن خواهید دید که فایل در مرورگر وب پیش فرض شما باز خواهد شد و همه چیز آماده شروع کد نویسی به زبان HTML است.

حالا که با پایه کدنویسی در HTML یعنی نوشتن تگ آشنا شدیم, نوبت آن رسیده است تا وارد نوشتن اولین صفحه HTML شوید.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

اولین جمله هر سند اچ‌تی‌ام‌ال <!DOCTYPE html> است. این بخش در واقع به همه بیان می‌کند که ما در حال ایجاد یک صفحه HTML هستیم. پس اولین کاری که انجام می‌دهیم، آن است که همین کلمه را در ابتدای سند می‌نویسیم. پس بخاطر داشته باشید که ما همیشه آن را در اولین خط از کدهایمان قرار می‌دهیم.

دومین رکن اصلی هر صفحه HTML، همان <html> و <html/> است که برای شروع نوشتن زبان اچ تی ام ال از آن استفاده می‌کنیم. پس در قدم بعدی و بعد از <!DOCTYPE html> آن را می‌نویسیم. همه محتویات یک صفحه اچ تی ام ال را از این به بعد در بین این دو تگ نوشته می‌شود.

بین دو <html> و <html/> تگ‌های جدیدی با اسم <head> و <head/> قرار می‌گیرند. به این عمل, یعنی قرار دادن یک تگ در دل تگ دیگر, nest می‌گویند. تگ <head> و <head/> در برگیرنده اطلاعات ابتدایی را در رابطه با صفحه اچ‌تی‌ام‌ال است. مثلا می‌گوید نویسنده این صفحه چه کسی است یا توضیحاتی در رابطه با خود سایت ارائه می‌کند. معمولا چیزهایی که در این بخش گفته می‌شود به صورت مستقیم در سایت شما نمایش داده نمی‌شوند.

بیشتر
کد کامپیوتر در HTML

حروف فارسی در وب:
یکی از کدهای مهمی که در این بخش قرار میگیرد، <“meta charset=”UTF-8> است. این کد در واقع با انکود صفحه مطابق با استانداردی است که برای نوشتن حروف فارسی ضروری است. پس اگر قصد نوشتن فارسی در صفحات دارید، حتما از این کد در بین تگ <head> و <head/> استفاده کنید.

در بین دو تگ <head> و <head/> علاوه بر کدهای متا، تگ جدیدی قرار می گیرد که عنوان صفحه شما خطاب می‌شود.این تگ همان <title> و <title/> است که یک عنوان برای صفحه اچ‌تی‌ام‌ال شما معین می‌کند و در نوار بالای مرورگر به عنوان اسم صفحه نشان می‌دهد. مثلا عنوان سایت ما “مدرسه کد نویسی -بزرگ ترین پروژه آموزش آنلاین ایران” است.

حالا نوبت به نوشتن چیزهایی می‌رسد که قرار است در صفحه مرورگر مشاهده شوند. اینچنین چیزهایی که ما به آن‌ها المان‌های اچ‌تی‌ام‌ال می‌گوییم، در بین دو تگ <body> و <body/> قرار می‌گیرند. در واقع هر چه که در این تگ نوشته شود, به طور مستقیم در صفحه اچ تی ام ال دیده می‌شود چرا که این تگ بدنه اصلی صفحه اچ‌تی‌ام‌ال را تشکیل می‌دهد. بعد از تگ <body/> معمولا کد دیگری قرار نمی‌گیرد و صفحه تمام می‌شود.

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

از آنجا که تگ‌هایی که در بالا با هم خوانده‌ایم، نقشی ثابت در صفحه HTML ایفا می‌کنند، می‌توانید همیشه یک کپی از آن‌ها را در صفحات جدید بچسبانید و تنها محتویات جدید را در بین تگ <html> </html> وارد کنید. همچنین اگر قصد نوشتن کلمات فارسی را دارید، حتما کد <“meta charset=”UTF-8> را در بین تگ <head> و <head/> قرار دهید.

بیشتر
جدول در Html

همه مواردی که در بالا گفتیم را در قالب زیر به شما نمایش داده‌ایم تا بهتر متوجه ترتیب آن‌ها شوید. همچنین توجه داشته باشید که تنها قسمتی که در یک مرورگر دیده می‌شود، بخش سفید رنگ شکل زیر است که در برگیرنده محتویات تگ <body></body> است.

آموزش HTML

خب تا به اینجای کار فکر می‌کنیم که برای شروع چیزهای بسیار خوبی آموخته‌ایم. در قسمت بعدی شما را با انواع تگ‌ نوشتن متن, آشنا خواهیم کرد.

ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

{"cart_token":"","hash":"","cart_data":""}
×

سلام کاربر عزیز

هر سوالی دارید در این بخش هستیم تا شما رو راهنمائی کنیم

روی لوگومون کلیک کنید

× چطور میتونم کمکتون کنم؟