آموزش HTML – مقدمه

به نام خدا

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

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

با ما باشید 😉

 

HTML چیست؟

  • HTML مخفف Hyper Text Markup Language و به معنای زبان نشانه گذاری ابر متن است.
  • HTML زبان نشانه گذاری (Markup language) اصلی برای ساخت صفحات وب (Web pages) و نمایش اطلاعات در مرورگر وب (Web browser) است.

یک زبان نشانه گذاری مجموعه تگ ها(Tag) است که محتویات سند رو شرح میدن.

نکته: به اسناد HTML یا HTML documents  صفحات وب (Web pages) هم گفته میشه.

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

HTML یه زبان برنامه نویسی(Programming language) نیست بلکه یه زبان نشانه گذاریه. اگر شما از قبل زبانهای نشانه گذاری دیگه ای مثل XML رو بلدید یاد گرفتن HTML براتون خیلی ساده تر خواهد بود!

نگاهی به گذشته

اولین سند HTML در ماه November سال ۱۹۹۰ میلادی دیده شد اما در اون موقه اسناد HTML از هیچ استانداردی پیروی نمیکردن تا اینکه گروهی به اسم World Wide Web Consortium یا کنسرسیوم جهانی وب تشکیل شد تا برای کدنویسی HTML استانداری رو تعریف کنن. کدهایی که برای شما گذاشته میشه همگی از این استاندارد ها پیروی میکنن.

 

ساخت یک صفحه وب

ساخت یک سند HTML یا صفحه وب کار بسیار آسونیه شما فقط به یه ادیتور متن(text editor) ساده مثل Notepad ویندوز نیاز دارید بعد از اینکه کدها رو نوشتید فایل رو با پسوند html. یا htm. ذخیره میکنید و با دابل کلیک روی فایل میتونید نتیجه رو در مرورگر پیشفرض ببینید.

یکی دیگه از ایتورهای محبوب توسعه دهندگان وب ادیتور ++Notepad که امکانات خیلی خوبی در اختیارتون میذاره وکد نویسی رو راحتتر و لذتبخش تر میکنه توصیه میکنیم حتما ازش استفاده کنید.

 

مفهوم تگ (Tag)

تگها کلمات کلیدی هستن که برای نشانه گذاری قسمتهای داکیومنت استفاده میشن، وقتی مرورگر به این کلمات کلیدی برخورد میکنه اصطلاحا اونها رو تفسیر (interpret) کرده و در نهایت به شکل خاصی که از قبل تعریف شده به ما نشون میده. مثلا وقتی به تگ <strong> میرسه میفهمه که محتویات درون این تگ رو باید بصورت پر رنگ در خروجی نمایش بده.

  • تگ های HTML کلمات کلیدی هستند که در دو براکت زاویه (angle bracket) قرار میگیرند مثل: <tag>
  • تگ های HTML معمولا جفت هستند مثل <b> و <b/>.
  • به تگ اول، تگ شروع(start tag) و به تگ دوم تگ پایان(end tag) گفته میشود.
  • تگ پایان مانند تگ شروع نوشته میشود اما قبل از آن باید یک Forward slash قرار بگیرد مثل <b/>.

مثال

<strong>I am new to HTML!</strong> it is easy to learn 🙂

خروجی:

I am new to HTML! it is easy to learn 🙂

لطفا به Forward slash تگ پایانی توجه کنید اگر یادتون بره نتیجه چیز دیگه ای میشه مثلا در مثال بالا نتیجه به این شکل میشه:

I am new to HTML! it is easy to learn 🙂

بخاطر اینکه تگ رو نبستید مرورگر کل متن رو بصورت Bold نمایش میده.

مفهوم Element

به یه تگ کامل که شامل تگ شروع ، تگ پایان و محتویاتش هست المنت(Element) گفته میشه.

مثال

 <p>This is a paragraph.</p>

 

 

مثال

کد پایین رو توی یه ادیتور کپی کنید و با پسوند htm یا html ذخیره کنید و بعد اجراش کنید تا نتیجه رو ببینید.

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

 توضیح کد:

  • DOCTYPE نوع سند ما را مشخص میکند و به مرورگر کمک میکند تا یک صفحه وب را بدرستی نمایش بدهد.
  • محتویات بین <html> و <html/> صفحه وب را توصیف میکند.
  •  محتویات بین <body> و <body/> قسمتهای هستند که دیده میشوند.
  • محتویات بین <h1> و <h1/> یک heading را تعریف میکند که در ادامه به آن میپردازیم.
  • محتویات بین <p> و <p/> یک پاراگراف را تعریف میکند که در ادامه به آن میپردازیم.

خروجی کدها در HTML

در HTML هیچوقت نمیتونید مطمئن بشید که نتیجه کدتون بدرستی و همونطور که انتظار دارید نمایش داده میشه، صفحات کوچیک و بزرگ، مرورگرها و … میتونن نتیجه های تفاوتی نشون بدن! پس شما با ید سعی کنید کد روطوری بنویسید که همهجادرست نمایش داده بشه.

فضاهای خالی در HTML

در HTML شما نمیتونید با گذاشتن فاصله(با دکمه space) بیشتر و یا ایجاد لاین جدید نتیجه رو تغییر بدید و باید با کاراکترها و یا تگهایی که HTML گفته اینکارو انجام بدید. مرورگرشما فاصله های اضافی رو نادیده میگیره.

مثال

<html>
<body>
"hello               how are you?"
</body>
</html>

خروجی:

“hello how are you?”

همونطور که دیدید ما فاصله زیادی بین hello و how گذاشتیم اما در نهایت فقط یک فاصله بین اونها قرار گرفت.

در مثال بالا برای گذاشتن فاصله(space) بیشتر باید از کاراکتر مخصوص HTML که ;nbsp& هست استفاده کنید. [ نمایش همه کاراکترهای مخصوص HTML ]

به این صورت:

<html>
<body>
"hello&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;how are you?"
</body>
</html>

خروجی:

“hello     how are you?”

سوالی دارید؟

بدون گرفتن نتیجه اینجا رو ترک نکنید! هر سوالی دارید میتونید در عرض ۱۵ ثانیه ثبت نام و خیلی زود جواب بگیرید.

5 دیدگاه برای «آموزش HTML – مقدمه»

  1. باسلام .من در ساخت صفحه وب اشکال دارم.وقتی که کد های شمارو تو نوت پد کپی می کنم اون هارو تو نوت پد سیو می کنم .
    در مرحله بعدی به اخر اسم فایل اhtml اضافه می کنم ولی وقتی با فایر فاکش یا یه مرور گر دیگه باز میکنم
    کد هارو نشون میده نه حاصل خروجی رو
    اگه میشه راهنماییم کنید خیلی نیاز دارم
    در صورت امکان ایمیل کنید

پاسخ دهید

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

به سوال زیر پاسخ بدهید *