کتابخانه HTML

به نام خداوند بخشنده مهربان با مقاله HTML چیست؟ در خدمت شما عزیزان هستیم. در این مقاله سعی داریم شما را با زبان HTML تگ‌ها و همینطور کاربرد آن در طراحی‌وب آشنا کنیم. HTML در سال 1993 منتشر و کوتاه شده عبارت Hyper Text Markup Language که به معنی زبان نشانه‌گذاری ابرمتن است. زبان نشانه‌گذاری HTML در نسخه‌های مختلفی ارائه شده است و جدیدترین این نسخه‌ها، نسخه شماره 5 آن است.

 

تفاوت زبان های برنامه نویسی و نشانه گذاری

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

زبان‌های برنامه‌نویسی این قابلیت را دارند که به سرور ارتباط پیدا کنند ولی زبان‌های نشانه‌گذاری این قابلیت را ندارند. برای مثال زبان php یکی از زبان‌های برنامه‌نویسی و زبان HTML یک زبان نشانه‌گذاری است. در ادامه بیشتر با تفاوت‌های زبان‌های برنامه‌نویسی و زبان‌های نشانه‌گذاری آشنا خواهید شد.

 

 

تگ چیست؟

بعد از پاسخ به سوال HTML چیست؟ زمان آن رسیده پیرامون تگ‌های زبان HTML صحبت کنیم. تگ به معنی کوتاه نویسی است زیرا اکثر تگ‌های HTML کوتاه شده کلمات انگلیسی است. تگ‌ها کلمات ارتباطی شما با دنیای وب‌سایت و طراحی‌وب هستند.زبان HTML دارای 119 تگ است، که تعدادی از آنها در نسخه‌های قبل منسوخ و یا جایگزین شده اند. برای مثال تگ <big> منسوخ شده است و تگ <abbr> جایگزین تگ <acronym> شده است.

 

نحوه نوشتن تگ ها

برای آشنایی بهتر با زبان HTML و تگ‌‌های آن مثال هایی در ادامه قرار داده‌‎ایم. از نظر نگارشی تگ‌ها دو دسته‌اند یا انفرادی هستند و یا دارای نقطه شروع و پایان هستند. تگ‌های انفرادی محتوای متنی نمایش نمی‌دهند و یا محتوا از کاربر دریافت می‌کنند، برای مثال تگ <br> برای ایجاد کردن فاصله و تگ <input> برای دریافت اطلاعات است. تگ‌هایی که دارای نقطه شروع و پایان هستند اغلب برای نمایش محتوا به کاربر و یا محل قرار‌گیری تگ‌های دیگر هستند، برای مثال تگ <p> که برای نمایش متن در وب‌سایت به کار می‌رود.

 

 

ویژگی‌ها(Attributes) در HTML

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

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

 

ویژگی‌های جهانی (Global Attributes) در HTML

در قسمت قبل گفتیم که بعضی از ویژگی‌ها را می‌توان در تمام تگ‌ها استفاده کرد، این ویژگی‌ها تعداد کمتری نسبت به مابقی ویژگی‌های HTML دارند، و اگر سند HTML را تا به حال دیده باشید حتما آنها را مشاهده کرده‌اید. اگر بخواهیم برای این دسته از ویژگی‌ها مثال داشته باشیم، باید بگوییم ویژگی (Id) که برای ایجاد کردن نام در هر ویژگی است و یا ویژگی (class) که برای مشخص کردن و انتخاب یک گروه است.

 

ویژگی‌های رویداد(Event Attributes) در HTML

زبان نشانه‌گذاری HTML تنها برای طراحی‌ وب‌سایت کافی نیست. برای همین از زبان‌های دیگری از جمله CSS و Javascript نیز در طراحی‌وب استفاده می‌کنیم. ویژگی‌های(Event) آن دسته از ویژگی‌هایی هستند که فعالیت‌های خاص وب‌سایت را انجام می‌دهند، برای مثال وقتی وارد وب‌سایت می‌شوید گزینه عضویت در تلگرام برای شما نمایش داده می‌شود، این فعالیت‌ها را در طراحی‌وب می‌توان با کمک ویژگی‌های (Event) انجام داد. اگر بخواهیم ساده‌تر بگویم این ویژگی‌ها رابط بین دستورات و کد‌های جاوااسکریپت با HTML هستند.

 

ایجاد کردن فایل HTML

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

نکته اول: برای تغییر پسوند فایل‌‎ها ابتدا باید آن را از تنظیمات سیستم خود فعال کنید.

نکته دوم: اگر بعد از تغییر پسوند فایل به HTML نماد آن به نماد مرورگر تغییر کرد نگران نباشید، تنها کافی است روی آن کلیک راست نمایید و روی گزینه Openwith کلیک کنید و آن را داخل notepad بازکنید.

 

تفاوت اصلی تگ‌ها

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

 

چهارچوب فایل استاندارد

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

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

 

 

مثال کاربردی

بعد از اینکه یک سند HTML با چهارچوب استاندارد ایجاد کرده‌اید می‌توانید با یک مثال طراحی‌وب را شروع کنید. تگ <p> کوتاه شده عبارت Paragraph به معنی بند و متن است و دارای نقطه شروع و پایان است. با استفاده از این تگ می‌‎توانید نام خود را در این فایل خود درج و آن را برای ما ارسال نمایید.

 

سخن پایانی

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

دوستان عزیز برای مشاهده الفبا و آموزش تگ‌های HTML ما را همراهی کنید.

 

 

ویژگی چیست؟

به نام خدا با سلام با آموزش تخصصی زبان HTML در خدمت شما عزیزان هستیم. در این جلسه از آموزش می‌خواهیم توضیح کاملی پیرامون ویژگی‌ها خدمت شما عزیزان بدیم. و همینطور چند تا از کاربردی‌ترین ویژگی‌ها را برای شما عزیزان توضیح دهیم.
فرض کنید می‌خواهید یک وب‌سایت طراحی کنید، در چند جای مختلف از تگ استفاده کرده‌اید. اما نمی‌خواهید همه این تگ‌ها به یک شکل باشد برای این کار باید حتما از ویژگی‌ها استفاده کنید. ما امروز چند تا از این ویژگی‌ها که خیلی کاربرد دارند را آموزش می‌دهیم.
ویژگی‌های عمومی و اختصاصی
اولین نکته این است که ویژگی‌ها را می‌توانیم به دو دسته عمومی و اختصاصی تفکیک کنیم. بعضی از ویژگی‌ها به صورت اختصاصی برای تگ‌های خاص تعریف شده‌اند و در دیگر تگ‌ها کاربردی ندارند این ویژگی‌ها را ویژگی اختصاصی می‌نامند. اما بعضی از ویژگی‌ها هستند که در تمامی تگ‌ها کاربرد دارند و این ویژگی‌ها عمومی نامیده می‌شود. برای مثال ویژگی href و ویژگی type ویژگی اختصاصی تگ و هستند و در تگ کاربردی ندارد ولی ویژگی مانند class و id عمومی هستند و در تمامی تگ‌ها کاربرد دارند و می‌توانید از آنها استفاده کنید.

 

جلسه اول آموزش