زبان نشانه گذاری html

زبان نشانه گذاری html | انواع زبان های نشانه گذاری | زبان نشانه گذاری فرامتن

آموزش html برای همه افرادی که قصد دارند، آموزش طراحی سایت را استارت بزنند ضروری است.

دربین زبان های نشانه گذاری ، زبان اچ تی ام ال یک زبان نشانه گذاری فرامتن محسوب میشود.

کلمه HTML ، مخفف عبارت Hyper Text Markup Language می باشد.

پس اگر جزو افراد علاقمند به یادگیری هستید و اطلاعاتی در این زمینه ندارید یا تازه شروع کرده‌اید، html را بایستی بطور کامل بگیرید. سایت آموزی تدریس کامل زبان html را از صفر تا صد برای شما همراهان گرامی ارائه می دهد.

ساخت یک سند HTML

برای شروع طراحی سایت باید ایجاد یک فایل یا سند html را یاد بگیرید.

یادگیری زبان نشانه گذاری html بسیار ساده است و ایجاد یک فایل اچ تی ام ال به راحتی آب خوردن است!

برای ایجاد اسناد html نه به برنامه خاصی نیاز دارید و نه به سیستم عامل بخصوصی.

در واقع شما فایل‌های html را می‌توانید حتی به کمک نرم‌افزار NotePad ویندوز نیز ایجاد کنید.

با این وجود توصیه می‌کنیم برای راحت‌تر نوشتن کدها و همچنین فهم بهتر مطالب از نرم افزارهای ویرایش متن رایگان همچون ++Notepad یا Sublime Text و یا Adobe dream viewer و… استفاده کنید.

تگ‌ها (Tag)

اولین جمله هر سند اچ تی ام ال <DOCTYPE html!> است.

این بخش در واقع به همه بیان می‌کند که ما در حال ایجاد یک صفحه HTML با نسخه ۵ هستیم.

پس اولین کاری که انجام می‌دهیم، آن است که همین کلمه را در ابتدای سند بنویسیم.

اگر نگاهی به صفحه ساده‌ای که برایتان مثال زدیم نیز بیندازید, در خط اول کلمه <!DOCTYPE html> را می‌بینید.

پس بخاطر داشته باشید که در زبان نشانه گذاری html ما همیشه این کد را در اولین خط سند قرار می‌دهیم.

تگ html

دومین رکن اصلی هر صفحه HTML ، استفاده از تگ های باز و بسته <html> و <html/> است.

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

همه محتویات یک صفحه اچ تی ام ال را از این به بعد در بین این دو تگ html می نویسیم.

تگ head

بین دو تگ <html> و <html/> تگ‌های جدیدی با اسم تگ باز <head> و تگ بسته <head/> قرار می‌گیرند.

به این عمل, یعنی قرار دادن یک تگ در دل تگ دیگر ، nest می‌گویند.

تگ <head> و <head/> در برگیرنده اطلاعات ابتدایی را در رابطه با صفحه html است.

مثلا می‌گوید نویسنده این صفحه چه کسی است یا توضیحاتی در رابطه با خود سایت ارائه می‌کند.

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

تگ Body در زبان نشانه گذاری HTML

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

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

تگ body به عنوان پدر تگ های درونی خود محسوب میشود. و از مهمترین عناصر در زبان نشانه گذاری html است.

و مانند سایر تگ ها از قانون سلسله مراتبی در زبان html تبعیت می کند.

body پس از تگ های meta ، head ، html و title و.. در سند html به کار می رود.

درون تگ body تگ های مهمی جهت طراحی چارچوب سایت استفاده می شوند.

تگ a

لینک دادن به معنی ایجاد پیوندهای داخلی و خارجی در صفحه یا صفحات مختلف به یکدیگر می باشد.

برای ایجاد لینک بر روی متن و یا حتی عکس مورد نظر ، از تگ a استفاده می شود.

همانطور که در شکل می بینید ، تگ a نیز دارای دو بخش تگ باز ( Opening-tag ) و تگ بسته ( Closing-tag ) می باشد.

تگ abbr

تگ <abbr> برای نشان دادن یک مخفف استفاده می شود.

این تگ اغلب با خاصیت عمومی title همراه است که امکان ارائه عبارت کامل یک مخفف را فراهم میکند.

در صورت استفاده از خاصیت عمومی title فقط از عبارت کامل مخفف باید استفاده کرد .

تگ acronym

از دیگر عناصر زبان نشانه گذاری html ، تگ <acronym> است. این تگ مخفف یک عبارت را نشان میدهد.

با علامت گذاری مخفف یک عبارت، اطلاعات مفیدی به مرورگرها، سیستم های مترجم و موتور های جستجو ارائه می دهید.

تگ <acronym> به عنوان یکی از تگ های منسوخ در HTML5 محسوب می شود.

و به جای آن معمولا از تگ abbr استفاده می شود.

تگ applet

عنصر <applet> برای فراخوانی برنامه های کوچک جاوا که تنها سمت کاربر اجرا می شود و اپلت نام دارد استفاده می شود.

تگ <applet> در HTML5 پشتیبانی نمی شود.

به جای آن می توان از تگ <object> و یا تگ embed استفاده کرد.

تگ area

تگ area منطقه ای را در داخل یک image-map مشخص می کند.

( image-map به تصویری گفته می شود که بعضی قسمت های آن قابلیت کلیک کردن دارد )

تگ <area> همیشه داخل یک تگ <map> قرار می گیرد.

تگ article

یکی از تگ های جدید در اسناد html که در نسخه ۵ این زبان اضافه شد، تگ article می باشد.

تگ article به عنوان یکی از تگ های مستقل در سند html کاربرد دارد.

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

تگ aside

تگ <aside> نشان دهنده یک بخش از صفحه می باشد که شامل محتوایی است که در حاشیه محتوای اصلی مربوط به آن قرار میگیرد و می تواند جدا از محتوای اصلی در نظر گرفته شود.

این تگ عمدتا به عنوان سایدبار سایت نشان داده میشود.

درون تگ <aside> اغلب توضیحات جانبی، مانند تعریف لغات یا چیزهایی که کمتر به محتوای اصلی مرتبط هستند مانند تبلیغات ، زندگینامه نویسنده و یا برنامه های کاربردی وب سایت ها ، اطلاعات پروفایل و یا لینک وبلاگ های مرتبط و… قرار می گیرد.

تگ audio

تگ audio تعیین صوت، مانند موسیقی یا دیگر جریان های صوتی را مشخص می کند.

در حال حاضر سه نوع فرمت صوتی در تگ audio پشتیبانی می شود که عبارتند از: MP3 ، Wav و Ogg

عنصر b

تگ <b> در html باعث میشود که محتوای آن به صورت توپر و bold نشان داده شود.

تگ b مانند بسیاری از تگ های html دارای یک تگ باز ( opening tag ) و یک تگ بسته ( closing tag ) می باشد.

درون تگ باز و بسته محتوایی که می خواهید در سند html برجسته کنید را قرار دهید.

تگ base در زبان نشانه گذاری HTML

تگ <base> یک URL مورد نظر پایه برای تمام URL های نسبی در یک سند مشخص می کند.

اگر این تگ وجود نداشته باشد ، URL پایه ، URL پوشه حاوی سند خواهد بود.

تگ <base> درون تگ head و همواره به عنوان اولین تگ موجود درون این تگ استفاده می شود.

تگ های دیگر در بخش head را پس از تگ <base> قرار می گیرند.

عنصر منسوخ basefont

عنصر basefont جهت تغییر نوع ، اندازه و رنگ متن در سند HTML به کار می رفت.

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

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

اخیرا اینگونه کارها به راحتی توسط css انجام می شود.

عنصر big

تگ <big> در سند HTML قسمتی از متن را برجسته تر نشان می دهد.

تگ big نیز به عنوان یکی از تگ های منسوخ در سند html شناخته می شود، بطوریکه در HTML5 پشتیبانی نمی شود.

عنصر bdi

تگ <bdi> برای جهت دادن به متن یا کاراکتراهایی که خارج از زبان اصلی صفحه بوده و از لحاظ فرمت با آن فرق دارد استفاده می شود.

عنصر bdi جهت تعبیه محتوایی که کاربر ایجاد می کند و جهت نوشتاری که زبان آن نامشخص است به کار می رود.

bdi مخفف Bi-Directiona-Isolationl یعنی جدا سازی دو جهته می باشد.

تگ <bdi> یک تگ جدید در HTML5 است. و در HTML 4.0.1 وجود نداشته است.

تگ bdo

تگ bdo جهت فعلی متن را نادیده می گیرد.

bdo مخفف Bi-Directional Override و به معنای نادیده گرفتن دو جهته میباشد.

تگ blockquote در زبان نشانه گذاری

تگ blockquote یک عنصر برای نقل قول در html می باشد، و متن محصور شده یک نقل قول طولانی است.

معمولا، این عنصر از نظر ظاهری به صورت تو رفته نشان داده میشود.

تگ body

تگ body بدنه سند را تعریف می کند و شامل تمام محتویات یک سند HTML ، مانند متن، لینک ها، تصاویر، جداول، لیست ها، و غیره است.

یعنی شما در وبسایت خود هر آیتم بصری را باید درون تگ <body> ایجاد کنید.

به عبارت دیگر در زبان نشانه گذاری html چارچوب دیداری سایت شما شامل تگ های زیادی است.

عنصر br در زبان نشانه گذاری فرامتن

تگ br این شکست خط و انتقال بخشی از متن را در سند html به خط بعدی انجام می دهد.

تگ br به عنوان یک تگ خالی یا تگ تهی در زبان نشانه گذاری html شناسایی می شود.

به عبارت دیگر تگ <br> مانند برخی تگ های سند HTML شامل تگ باز ( opening tag ) می باشد و تگ پایانی ( تگ بسته ) (closing tag ) را ندارد.

عنصر button در زبان نشانه گذاری html

عنصر button یک دکمه قابل کلیک را در سند شما تعریف می کند.

علی رغم اینکه تگ button بیشتر در داخل تگ form و ساخت دکمه های قابل کنترل کاربرد دارد، اما این تگ را می توانیم برای ساخت دکمه های فرم قابل کلیک به صورت مستقل نیز بسته به نیازمان در سند html خود تولید کنیم.

تگ canvas

برای ترسیم اشکال گوناگون گرافیکی در HTML از تگ <canvas> استفاده میشود، که کاربردها و قابلیتهای جالب و متنوعی دارد.

تگ canvas از تگ های جدید در سند HTML و دارای یک تگ باز ( opening tag ) و یک تگ بسته ( closing tag ) می باشد.

تگ <canvas> به منظور رسم گرافیک های شناورکه از طریق برنامه نویسی با JavaScript به کار می رود.

تگ caption

تگ caption برای جدول یک عنوان معرفی می کند. و می بایست بلافاصله بعد از تگ table بیاید.

تگ <caption> مانند بسیاری از تگ های html دارای یک تگ باز ( opening tag ) و یک تگ بسته ( closing tag ) می باشد.

تگ <caption> در زبان نشانه گذاری html حتما بایستی درون تگ table استفاده شود.

عنصر center

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

در اسناد HTML به جای تگ <center> از زبان css استفاده می شود.

تگ cite در زبان نشانه گذاری HTML

تگ cite عنوان یک اثر را تعریف می کند و نشان دهنده یک رفرنس به یک کار خلاقانه است.

که باید شامل عنوان اثر و یا نام نویسنده ( فرد، افراد یا سازمان ) و یا یک URL مرجع باشد.

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

برای جلوگیری از italic شدن نوشته های داخل تگ <cite> میتوانیم از CSS استفاده کنیم.

تگ code در زبان نشانه گذاری فرامتن

تگ code یک تگ عبارتی است که یک قطعه از کد کامپیوتری را تعریف می کند.

و برای نوشتن توابع ، کدهای برنامه نویسی و متغیر ها مناسب است.

مرورگرها اغلب متنی را که درون تگ <code> می آید، با یک فونت monospaced ( فونتی با عرض ثابت ) نمایش میدهند ، مگر اینکه با استفاده از CSS در ظاهر آن تغییراتی بدهیم.

تگ col در زبان نشانه گذاری HTML

تگ col در جداول برای تعیین ویژگی های مشترک برای سلول های یک یا چند ستون در یک colgroup استفاده می شود. استفاده از این تگ برای جلوگیری از تکرار استایل در سلول های هر ستون مفید است.

تگ col در زبان نشانه گذاری html خواص مربوط به ستون های موجود در یک تگ <colgroup> را مشخص می کند.

تگ <col> برای استفاده از سبک های به کل ستون، به جای تکرار سبک برای هر سلول یا برای هر ردیف مفید است.

عنصر colgroup

تگ <colgroup> گروهی از یک یا چند ستون در یک جدول را جهت قالب بندی مشخص می کند. از تگ <colgroup> برای سبک یا استایل دادن به کل ستون، به جای تکرار سبک برای هر سلول و برای هر ردیف استفاده می شود.

تگ colgroup در زبان نشانه گذاری html باید به عنوان فرزند تگ <table> باشد.

تگ <colgroup> بعد از تگ <caption> وقبل از تگ های <thead> ،<tbody> ،<tfoot> و <tr> قرار می گیرد.

برای تعریف خواص مختلف به یک ستون در <colgroup> از تگ <col> در داخل تگ <colgroup> استفاده کنید.

تگ datalist در زبان نشانه گذاری HTML

تگ datalist در HTML5 به عنوان یکی از تگ های کاربردی در این زبان برنامه نویسی تحت وب می باشد.

این تگ در html به تنهایی کاربرد ندارد و معمولا باید در کنار تگ input و درون یک تگ form به کار رود.

از طرفی در زبان نشانه گذاری html ، تگ input مورد نظر می بایست دارای یک Attribute به نام list باشد.

خاصیت list در تگ input مورد نظر بر روی تگ datalist با تشکیل یک id مشترک و هم نام کنترل دارد.

یعنی مقدار این خصوصیت list را در تگ input باید برابر با id مورد نظر در تگ datalist قرار بدهید.

تگ datalist در حقیقت در ساخت یک یا چند آیتم به صورت لیست بازشو برای تگ input استفاده می شود.

تگ dd

عنصر dd توصیف یک واژه یا نام را در یک فهرست توصیفی مشخص میکند و در ارتباط با <dl> و <dt> استفاده می شود.

در داخل تگ <dd> می توانید پاراگراف ، شکست خط ( br ) ، عکس ، لینک ، لیست ، و غیره قرار دهید.

یک لیست توصیفی شبیه به لیست های دیگر است، اما هر آیتم در لیست شامل دو یا چند واژه یا توصیف است .

لیست توصیفی در زبان نشانه گذاری html می تواند در مورد فهرست لیست تک به تک توضیح دهد.

تگ del در زبان نشانه گذاری html

تگ <del> متنی را که قصد حذف کردن آن را از یک سند HTML دارید، مشخص میکند.

برای مشخص کردن متنی که جایگزین متن حذف شده میشود باید از تگ <ins> استفاده کرد.

برای به روز رسانی و تغییرات در یک سند از دو تگ <del> و تگ ins استفاده میشود .

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

نشانه گذاری متن حذفی می تواند در تعیین تفاوت بین نسخه های متعدد در یک سند ، مفید باشد.

پیوندهای مهم و کاربردی

تگ های HTML در سایت آموزی

تگ های جدید HTML5 در سایت آموزی

صفات تگ های HTML در سایت آموزی

عناصر منسوخ HTML5 در سایت آموزی

تگ های block level و inline level در سایت آموزی

تگ های HTML در W3school

ویژگی های CSS در سایت آموزی

ویژگی های CSS در W3schools