آموزش برنامه نویسی با HTML – برنامه نویسی HTML بخش اول

ارسال توسط

در تاریخ ۱۴۰۴-۰۱-۲۲

زبان HTML یک زبان استاندارد نشانه گذاری است که برگرفته از عبارت Hyper Text Markup Language است. این زمان به صورت گسترده برای ساخت صفحات وب به کار گرفته می شود. زبان HTML توسط Tim Berners-Lee در سال ۱۹۹۱ میلادی اختراع شد، اما نسخه HTML 1.0 در سال ۱۹۹۳ میلادی منتشر شد و نسخه HTML 2.0 که اولین زبان استاندارد HTML به شمار می رود در دو سال بعد از آن یعنی سال ۱۹۹۵ منتشر گردیده است.
در این سری از آموزش های زبان برنامه نویسی HTML در سایت هاست باز، در تلاشیم که مفاهیم اصلی و پایه ای این زبان را همراه با تکنیک های پیشرفته تر مانند ساخت فرم ها، مدال ها، استفاده از فایل های چند رسانه ای و غیره را که در نسخه HTML 5.0 ارائه شده است را به شما آموزش دهیم. این آموزش ها هم برای افراد تازه کار و هم برای افراد دارای تجربه های برنامه نویسی طراحی شده است و به شما کمک می کند که بتوانید وب سایت های پویا و واکنشگرایی را ایجاد کنید

زبان HTML چیست؟

زبان HTML برگرفته از عبارت Hyper Text Markup Language است که یک زبان استاندارد نشانه گذاری است که با کمک آن می توانید ساختارهای صفحه های وب را ایجاد کنید. زبان HTML از ترکیب دو بخش هایپرتکس (Hyper Text) و زبان نشانه گذاری (Markup Language) ساخته شده است. بخش هایپرتکس اشاره به ایجاد لینک (Link) های داخلی در بین صفحه های وب دارد و بخش زبان نشانه گذاری نیز روش طرح بندی و ارائه نوشته و سایر رسانه ها در صفحه های وب را تعریف و بیان می کند.

ساختار اصلی زبان HTML

ساختار اصلی یک پرونده HTML محتوی برخی از تگ ها (Tags) اجباری است که باید برای ساخت یک صفحه وب به کار گرفته شوند. این ساختار باید در هر یک از صفحه هایی که با زبان HTML برنامه نویسی می شود به کار گرفته شوند.
در مثال زیر می توانید یک نمونه از کدهای زبان HTML که برای ساخت یک صفحه ساده به کار گرفته شود را مشاهده کنید:

<!DOCTYPE html>
<html>
<head>
   <title>Page title</title>
</head>
<body>
   <h1>Webpage's Heading</h1>
   <p>Content (Your first paragraph).</p>
</body>
</html>

عناصر یک ساختار پایه ای در زبان HTML

در هر پرونده HTML ساختارهای پایه ای یکسانی که در ادامه می آید باید به کار گرفته شوند:

تگ `<!DOCTYPE html>`

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

تگ `<html>…</html>`

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

تگ `<head>...</head>`

تگ head شامل تمام عناصری است که مستقیماً در صفحه نمایش داده نمی شوند، اما برای آن که یک صفحه وب بتواند محتواها را به درستی نمایش دهد، به آن ها احتیاج دارد. آن شامل انواع متا تگ ها (که برای فرایند SEO به کار می روند)، تگ عنوان و تگ های اسکریپت و غیره می شود.

تگ `<title>...</title>`

تگ عنوان یا title برای تعریف نام صفحه وب به کار گرفته می شود. شما می توانید نام مورد نظر برای پرونده و یا صفحه وب خودتان را در این تگ وارد کنید. این نام در سربرگ مرورگری که صفحه وب در آن نمایش داده می شود، نمایش داده می شود.

تگ `<h1>...</h1>`

تگ h1 اصلی ترین تگ عنوان در صفحه شما هست. این تگ مهمترین عنوان هر صفحه را نمایش می دهد که با کمک آن می توان به موضوع صفحه وب پی برد. هر نوشته ای که در میان دو تگ h1 نوشته شوند، در بالاترین عنوان ها نمایش داده می شود. دقت کنید که از این تگ بهتر است در هر صفحه وب تنها یک بار استفاده شود تا سبب ابهام در موضوع صفحه وب نشود.

تگ `<p>...</p>`

تگ <P> برای ایجاد نوشته های پاراگراف به کار گرفته می شود. هر نوشته ای که بین این تگ ظاهر شود، به عنوان نوشته متنی در صفحه وب نمایش داده می شود. شما می توانید برای هر پاراگراف در صفحه وب از این تگ استفاده کنید.

نوشتن صفحه وب Hello World با زبان HTML

با استفاده از آنچه که درباره ساختار صفحه وب آموختید، می توانید پرونده های مختلفی ایجاد کنید که یکی از آن ها فرم برنامه نویسی کلاسیک «Hello World» است.
در پایین کدی که برای نوشتن کد Hello World به آن احتیاج دارید را نمایش داده ایم.

<!DOCTYPE html>
<html>
<head>
   <title>Hello World Example by TutorialsPoint</title>
</head>
<body>
   <h1>Hello, World!</h1>
</body>
</html>

در کد مثال بالا شما می توانید نحوه نمایش عبارت Hello world در مرورگر را ببینید. این کد در تگ عنوان اصلی صفحه نمایش داده می شود.

کامنت نویسی در زبان HTML

دقیقاً مانند سایر زبان های برنامه نویسی، شما می توانید از کامنت (Comment) در زبان HTML بهره بگیرید. این کار را با استفاده از تگ ها انجام می شود.
هر نوشته ای که بین–> و <!— قرار گیرد به عنوان یک کامنت یا یادداشت برنامه نویسی در نظر گرفته می شود و در صفحه وب شما نمایش داده نمی شود اگرچه شما می توانید آن را در بین کدهای صفحه مشاهده کنید.

نمونه

در پایین یک نمونه کامنت نویسی در فایل HTML را می بینید :

<!--<h1>Hello World Example</h1>-->

استفاده از ویرایشگر های آنلاین

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

ایجاد یک پرونده HTML

یک پرونده HTML در واقع فایلی نوشتاری است که با پسوند htm. یا html. ذخیره شده است. برای ساخت یک پرونده به زبان HTML شما نیازمند یک ویرایشگر ساده نوشته (Text Editor) یا یک محیط ساده یکپارچه برنامه نویسی (Integrated Development Environment به اختصار IDE) هستید. همچنین برای نمایش فایل های HTML نیازمند یک مرورگر وب نیز هستید.
کارهایی که برای ساخت یک پرونده HTML باید انجام دهید ساده هستند.

برنامه ویرایشگر نوشته یا کد خودتان را باز کنید.
کدهای مورد نظر HTML را در آن وارد کنید.
سپس پرونده ویرایش شده را در قالب htm یا html ذخیره کنید.

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

چرا باید برنامه نویسی HTML را بیاموزیم؟

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

مزایای آموختن زبان HTML

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

ساختن وب سایت: شما می توانید با استفاده از زبان HTML قالب وب سایت خودتان را ایجاد کنید و آن را شخصی سازی کنید.
تبدیل شدن به یک طراح وب: اگر شما می خواهید که دوره کاری و شغلی خودتان را به عنوان یک طراح وب شروع کنید، باید زبان هایی نظیر HTML و CSS را در گام نخست بیاموزید، زیرا آن ها برای سایر اقدامات مورد نیاز است.
درک وب: اگر شما می خواهید وب سایت های خودتان را شخصی سازی کنید، یا آنکه عملکرد آن ها را ارتقا دهید، دانستن زبان HTML بسیار مهم است و می تواند سبب ایجاد بیشترین نتایج برای شما شود.
آموختن زبان های دیگر: در زمانی که شما مقدمات زبان HTML را آموختید، می توانید به سراغ تکنولوژی های دیگر توسعه وب مانند زبان JavaScript یا PHP بروید. با دانستن HTML درک سایر زبان های سطح وب ساده تر می شود.

کاربردهای زبان HTML

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

توسعه وب سایت ها: زبان HTML برای ساخت صفحه های وب و وبسایت ها به کار می رود. تقریباً هر صفحه ای وب با استفاده از تگ های HTML ساخته می شود و جزئیات صفحه ها وب با استفاده از این زبان در مرورگرها رندر می شوند.
هدایت در دنیای وب: زبان HTML تگ هایی را در اختیار ما قرار می دهد که می توانیم با کمک آن ها در میان صفحه های وب جا به جا شوید و از آن ها به خصوص در دنیای اینترنت بسیار استفاده می شود.
ایجاد رابط کاربری واکنشگرا: صفحه برنامه نویسی شده با زبان HTML در دیوایس های مختلفی مانند گوشی های همراه، تبلت ها و نمایشگرهای خانگی و دیگر سیستم ها نمایش داده می شوند، واکنشگرا بودن صفحه نقش مهمی را در ارائه مطلب درست در هر نمایشگر دارد.
پشتیبانی آفلاین: صفحه های HTML یکبار بارگذاری می شوند، اما بعد از بارگذاری آن ها بر روی یک دیوایس می توانند محتواهای خودشان را بدون نیاز به اینترنت نمایش دهند.
توسعه بازی: یکی از کاربردهای زبان HTML 5 پشتیبانی از رسانه های مختلف است که کمک زیادی را به توسعه بازی ها و سایر اقدامات چند رسانه ای می کند.
توسعه نرم افزارهای تحت گوشی همراه: زبان HTML و نیز زبان CSS و JavaScript به صورت گسترده برای توسعه نرم افزارهای موبایل به کار گرفته می شود.
پخش استریم های ویدئویی و صوتی: زبان HTML 5 تگ هایی را برای پشتیبانی موارد چند رسانه ای مانند ویدئوها و صداها ارائه می کند که با کمک آن ها می توان استریم های رسانه ای را در مرورگرها مشاهده و پخش کرد.

مخاطبین آموزش HTML هاست باز

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

پیش نیازهای آموختن زبان HTML

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

نرم افزار Notepad++ یا یک ویرایشگر کد ساده متناسب با سیستم عامل خودتان را بر روی سیستم تان نصب کنید.
با روش هدایت و آدرس دهی فایل ها بر روی سیستم عامل خودتان آشنایی داشته باشید.
بدانید که چطور می توان بین بخش های رایانه جابجا شد.
بتوانید فعالیت های نظیر باز کردن، ساختن و ذخیره کردن فایل های نوشتاری را بر روی سیستم عامل خودتان انجام دهید.
درک کلی درباره فرمت های مختلف تصویر مانند JPEG و PNG داشته باشید.

پرسش های پر تکرار در زمینه زبان HTML

نام کامل زبان HTML چیست و این زبان مختصر چه عناوینی است؟

نام HTML برگرفته از عبارت Hyper Text Markup Language است این عبارت به معنای زبان استاندار نشانه گذاری هایپرتکس است.

چرا از زبان HTML در صفحه های وب استفاده می شود؟

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

چطور یک فایل HTML را ذخیره کنیم؟

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

چه کسی زبان HTML را اختراع کرد؟

زبان HTML توسط تیم برنرز لی (Tim Berners Lee) یکی از فیزیک دان های مشغول در پروژه CERN در سال ۱۹۹۱ میلادی ابداع شد، اگرچه اولین نسخه استاندارد این زبان در سال ۱۹۹۵ منتشر شد.

اصلی ترین ویژگی های زبان HTML چیست؟

زبان HTML چند ویژگی اساسی دارد که در ادامه به بررسی آن ها می پردازیم:
• سادگی: این زبان بسیار ساده است و به خاطر سر راست بودن سینتکس آن می تواند به راحتی آموخته شود.
• انعطاف پذیری: زبان HTML به برنامه نویسان اجازه می دهد که بتوانند انواع مختلفی از پرونده های وب را ایجاد کنند. شما می توانید از فرم های ساده تا صفحه های پیچیده وب را با استفاده از این زبان ایجاد کنید.
• عدم وابستگی به پلتفرم: زبان HTML یک زبان استاندارد است و در تمام مرورگرهای مدرن پشتیبانی می شود. این به معنای آن است که پرونده هایی که با زبان HTML نوشته شده اند می توانند در سرتاسر وب به نمایش در آیند.
• لینک دهی: یکی از ویژگی های زبان HTML آن است که می توان در آن لینک هایی به صفحه های دیگر وب ایجاد کرد.
• قرار دادن رسانه ها: این زبان به شما اجازه می دهد که انواع مختلفی از رسانه ها نظیر تصاویر، صوت و دیگر موارد را در صفحه وب خودتان قرار دهید.
• تعاملی بودن: زبان HTML از عناصر تعاملی و خلاقانه متعددی پشتیبانی می کند که به کاربران اجازه وارد کردن اطلاعات را می دهند. همچنین با استفاده از این زبان می توانید فعالیت هایی نظیر ثبت نام، ثبت فرم، جستجو و غیره را انجام دهید.
• معناگرا بودن: در نسخه HTML 5.0 به بعد عناصر معناگرا و مفهومی زیادی به کار گرفته شدند که کار را برای توسعه دهندگان وب ساده تر می کند. برای مثال تگ هایی مانند header، footer، article و غیره در این نسخه معرفی شدند که کار کردن با این زبان را صریح تر و واضح تر می کنند.
• یکپارچگی: زبان HTML می تواند با زبان های دیگری که اغلب برای توسعه صفحه های وب به کار گرفته می شوند مانند زبان CSS و JavaScript کار کند. شما می توانید از زبان CSS برای استایل دهی به صفحه های وب استفاده کنید. زبان JavaScript نیز می توانند برای تعامل های در سطح به کار گرفته شوند.

آخرین نسخه HTML کدام است؟

تا سال ۲۰۱۴ نسخه HTML 5.0 توسط W3C به بازار عرضه شده است.
آیا زبان HTML یک زبان برنامه نویسی کامل است؟
نه، زبان HTML یک زبان کامل برنامه نویسی نیست. آن یک زبان نشانه گذاری است که با کمک آن می توان ساختارهای محتوایی صفحه های وب را مشخص کرد. در واقع آن یک زبان نشانه گذاری هایپرتکس است.

یک HTML Web Storage چیست؟

یک ذخیره کننده وب HTML یا (DOM Storage) یکی از ویژگی های HTML 5 است که به برنامه های تحت وب این اجازه را می دهد که داده ها به صورت محلی در مرورگرها ذخیره شوند. این داده ها می توانند به صورت جفت های «کلید:مقدار» باشند.
در اینجا دو نمونه از فضاهای ذخیره سازی تحت وب وجود دارند:
• فضاهای محلی (LocalStorage): که یک آبجکت ذخیره سازی داده است که هیچ تاریخ انقضائی ندارد. داده ها در این حال در زمانی پاک می شوند که مرورگر بسته شوند اما این داده ها هنوز برای جلسه ها (Session) بعدی در دسترس هستند.
• فضاهای ذخیره جلسه ای (SessionStorage): این آبجکت داده ها را برای یک جلسه ذخیره می کنند. اگر شما مرورگر را ببندید تمام اطلاعات این آبجکت پاک می شود.

چطور یک فایل HTML را بر روی مرورگر اجرا کنیم؟

برای اجرای یک فایل HTML بر روی مرورگر ، در ابتدا باید فایل شما با پسوند htm یا html ذخیره شده باشد. سپس می توانید با دوبار کلیک کردن بر روی این فایل آن را در مرورگر پیش فرض سیستم خودتان مشاهده کنید.

اجزای یک پرونده HTML کدامند؟

جزای اصلی یک پرونده HMTL که به عنوان عناصر HTML (HTML Element) نیز نامیده می شوند، بلوک های سازنده صفحه های وب شما هستند. آن ها می توانند بخش های مختلفی از یک صفحه وب را به وسیله تگ های HTML (HTML tags) ارائه می شوند را در خود ذخیره کنند. برخی از مهمترین عناصر سازنده پرونده HTML به شرح زیر هستند:
• شناسه پرونده DOCTYPE که تگی به شکل است و در ابتدای صفحه HTML قرار می گیرد و مشخص می کند که مرورگر چطور باید صفحه را تفسیر کند.
• تگ های عناوین: این تگ ها شامل تگ های h1 تا h6 هستند که برای نمایش عنوان های صفحه به کار می روند. تگ h1 مهمترین تگ عنوان و تگ h6 کم اهمیت ترین تگ عنوان یک صفحه است.
• تگ پاراگراف: تگ p برای نمایش پاراگراف های نوشتاری به کار می رود.
• لینک ها: تگ a برای تعریف هایپرلینک ها به کار می رود. از این لینک ها می توانید برای رفتن به صفحه های مختلف استفاده کنید.
• تصاویر: تگ img، این تگ برای قرار دادن تصاویر در صفحه های وب به کار می رود.
• لیست ها: تگ های مختلفی در زبان HTML برای ساخت انواع لیست ها به کار می روند.
• جداول: تگ table و چند تگ دیگر برای ساخت جداول در صفحه های HTML به کار می رود.
• فرم ها: تگ form برای ساخت فرم در زبان HTML به کار می رود.
• انواع بخش بندی ها: تگ هایی نظیر div، section، article و غیره برای تقسیم بندی صفحه های وب به صورت معناگرا به کار می روند. هر کدام از این بخش های کارکردهای خاص خودشان را در ادامه خواهند داشت.
• عناصر رسانه های: در نسخه HTML 5.0 به بعد انواع گوناگونی از تگ های چند رسانه ای استفاده شده است که در جای خود به توضیح آن ها می پردازیم.