آموزش ساده HTML بخش اول
آموزش HTML
در اولین بخش از آموزش HTML در رابطه با مفاهیم ابتدایی
همچون مفهوم Tag، نحوه نوشتن المان‌های اچ تی ام ال صحبت خواهیم کرد و در
نهایت شما خواهید توانست تا با کمک آموخته‌های خود، یک یک صفحه وب ساده و
ابتدایی را ایجاد کنید.
همانطور که می‌بینید در این مثال‌ها ما در ابتدا حرف اول تگی که قرار است استفاده نماییم را بین دو علامت < > می‌نویسیم. (در
جلسات آینده با این حروف آشنا خواهید شد و در این جلسه فقط نحوه استفاده
از آن‌ها را فراخواهید گرفت). سپس در سمت راست، همان تگ را با علامت / تکرار می‌کنیم. در بین دو تگ باز شده و بسته شده نیز محتوای مورد نظرمان را یادداشت می‌کنیم.
حالا که با پایه کدنویسی در اچ تی ام ال یعنی نوشتن تگ آشنا شدیم, نوبت آن رسیده است تا وارد نوشتن اولین صفحه اچ تی ام ال شوید.
یک صفحه ساده:
<!DOCTYPE html>
<html>
<title> یادگیری اچ تی ام ال با زومیت</title>
<body>
<h1> من تگ عنوان هستم </h1>
<p> من تگ پاراگراف (متن) هستم </p>
</body>
</html>
اولین جمله هر سند اچ‌تی‌ام‌ال <!DOCTYPE html>
است. این بخش در واقع به همه بیان می‌کند که ما در حال ایجاد یک صفحه HTML
هستیم. پس اولین کاری که انجام می‌دهیم، آن است که همین کلمه را در ابتدای
سند می‌نویسیم. اگر نگاهی به صفحه ساده‌ای که برایتان مثال زدیم نیز
بیندازید, در خط اول کلمه <!DOCTYPE html> را می‌بینید. پس بخاطر داشته باشید که ما همیشه آن را در اولین خط از کدهایمان قرار می‌دهیم.
دومین رکن اصلی هر صفحه HTML، همان <html> و <html/> است که برای شروع نوشتن زبان اچ تی ام ال از آن استفاده می‌کنیم. پس در قدم بعدی و بعد از <!DOCTYPE html> آن را می‌نویسیم. همه محتویات یک صفحه اچ تی ام ال را از این به بعد در بین این دو تگ نوشته می‌شود.
بین دو <html> و <html/> تگهای جدیدی با اسم <head> و <head/> قرار می‌گیرند. به این عمل, یعنی قرار دادن یک تگ در دل تگ دیگر, nest می‌گویند. تگ <head> و <head/>
در برگیرنده اطلاعات ابتدایی را در رابطه با صفحه اچ‌تی‌ام‌ال است. مثلا
می‌گوید نویسنده این صفحه چه کسی است یا توضیحاتی در رابطه با خود سایت
ارائه می‌کند. معمولا چیزهایی که در این بخش گفته می‌شود به صورت مستقیم در
سایت شما نمایش داده نمی‌شوند.
حروف فارسی در وب:
یکی از کدهای مهمی که در این بخش قرار میگیرد، <"meta charset="UTF-8> است.
این کد در واقع با انکود صفحه مطابق با استانداردی است که برای نوشتن حروف
فارسی ضروری است. پس اگر قصد نوشتن فارسی در صفحات دارید، حتما از این کد
در بین تگ <head> و <head/> استفاده کنید.
در بین دو تگ <head> و <head/> علاوه بر کدهای متا، تگ جدیدی قرار می گیرد که عنوان صفحه شما خطاب می‌شود.این تگ همان <title> و <title/>
است که یک عنوان برای صفحه اچ‌تی‌ام‌ال شما معین می‌کند و در نوار بالای
مرورگر به عنوان اسم صفحه نشان می‌دهد. مثلا عنوان سایت ما "زومیت-دنیای
فناوری" است.
حالا نوبت به نوشتن چیزهایی می‌رسد که قرار است در صفحه مرورگر مشاهده
شوند. اینچنین چیزهایی که ما به آن‌ها المان‌های اچ‌تی‌ام‌ال می‌گوییم، در
بین دو تگ <body> و <body/> قرار
می‌گیرند. در واقع هر چه که در این تگ نوشته شود, به طور مستقیم در صفحه اچ
تی ام ال دیده می‌شود چرا که این تگ بدنه اصلی صفحه اچ‌تی‌ام‌ال را تشکیل
می‌دهد. بعد از تگ <body/> معمولا کد دیگری قرار نمی‌گیرد و صفحه تمام می‌شود.
خب، تا به اینجای کار با مفاهیم اولیه هر سند اچ تی ام ال آشنا شدیم. حالا وقت آن است تا اولین صفحه اچ‌تی‌ام ال خود را ذخیره کنید. ما در مثال زیر آنچه را که شما و ما در کنار یکدیگر ساخته‌ایم را نشان دادهایم.
پیشنهاد زومیت: از آنجا که تگ‌هایی که در بالا با هم
خوانده‌ایم، نقشی ثابت در صفحه اچ تی ام ال ایفا می‌کنند، میتوانید همیشه
یک کپی از آن‌ها را در صفحات جدید بچسبانید و تنها محتویات جدید را در بین
تگ <html> </html> وارد کنید. همچنین اگر قصد نوشتن کلمات فارسی را دارید، حتما کد <"meta charset="UTF-8> را در بین تگ <head> و <head/> قرار دهید.
همه مواردی که در بالا گفتیم را در قالب زیر به شما نمایش دادهایم تا
بهتر متوجه ترتیب آن‌ها شوید. همچنین توجه داشته باشید که تنها قسمتی که در
یک مرورگر دیده می‌شود، بخش سفید رنگ شکل زیر است که در برگیرنده محتویات
تگ <body></body> است.
خب تا به اینجای کار فکر می‌کنیم که برای شروع چیزهای بسیار خوبی آموخته‌ایم. در قسمت بعدی شما را با انواع تگ نوشتن متن, آشنا خواهیم کرد. اما قبل از آن, بد نیست اگر خلاصه‌ای از آموزشی که در این مقاله یادگرفته‌اید را با هم مرور کنیم.
خلاصه جلسه اول:
در این قسمت چیزهایی که یادگرفته‌ایم را به صورت کاملا خلاصه مرور می‌کنیم.
- در اولین قسمت از سری آموزش HTML با نحوه ایجاد یک صفحه اچ‌تی‌ام ال آشنا شدید.
- در ادامه با تگ‌ها و مفاهیم اولیه یک صفحه HTML آشنا شدید و الان می‌دانید که در واقع تگ‌ها بدین صورت نوشته می‌شوند:<tagname> content </tagname>
- یعنی یک بار تگ ما باز می‌شود و سپس دوباره بعد از آنکه کارمان تمام شد بسته می‌شوند و محتوای مورد نظر نیز در بین تگ باز و بسته نوشته می‌شود.
- همچنین فهمیدیم که در ابتدای هر صفحه اچ‌تی‌ام‌ال تگهای ثابت و مخصوصی
وجود دارند که می‌گویند قصد ایجاد یک صفحه HTML داریم. این تگ‌ها عبارتند
از
<doctype HTML!>و<HTML>و<head>و<title>و<Body>. این تگ‌ها همیشه در صفحات قرار می‌گیرند.
برای نمایش صحیح حروف فارسی در صفحه، حتما کد <"meta charset="UTF-8> را در بین تگ<head>و<head/>قرار دهید.
نوبت شما:
وقت آن رسیده آنچه فرا گرفته‌اید را در ادیتور آنلاین زیر امتحان کنید. تنها کافیست با دست‌‍‌های خودتان کدهای اچ‌تی‌ام‌ال را در کادر اول نوشته و نتیجه آن را در کادر دوم به صورت زنده ببینید. در ضمن نگران فراموش کردن نباشید! آموزش‌های بالا همیشه در اختیار شما است.
در نهایت امیدواریم که اولین بخش از آموزش اچ‌تی‌ام‌ال به سبک زومیت، موفق به انتقال مفاهیم این زبان به شما زومیتی‌های عزیز شده باشد. تجربیات، پیشنهادات و همچنین ابراز محبت شما بدون شک نه تنها در ایجاد انرژی بیشتر در ما همراه خواهد بود, باعث بهبود سطح این مقالات در آینده خواهد شد. پس با ما در ارتباط باشید.
