عنوان یا سرتیتر در HTML
عنوان ها در سندهای HTML، عناصر مهمی هستند.
عنوان ها در HTML
عنوان یا سرتیتر در HTML به وسیله تگ های <h1> تا <h6> تعریف می شود.
<h1> برای مهمترین سرتیتر استفاده می شود. <h6> کم اهمیت ترین سرتیتر را تعریف می کند.
مثال (عنوان یا سرتیتر در HTML)
<h2>This is a heading</h2>
<h3>This is a heading</h3>
نکته: مرورگرها به طور خودکار مقداری فضای خالی (یک حاشیه) را قبل و بعد از هر سرتیتری اضافه می کنند.
سرتیترها عناصر مهمی هستند
از عنصر heading تنها برای سرتیترها استفاده کنید. از آنها برای بزرگ یا bold کردن استفاده نکنید.
موتورهای جستجو از سرتیترهای شما برای شاخص گذاری ساختار و محتوای صفحات وب شما استفاده می کنند.
از آنجایی که کاربران ممکن است صفحات وب شما را با نگاه کردن به سرتیترها از نظر بگذرانند، استفاده از سرتیترها برای اینکه ساختار سند را نشان دهید مهم است.
h1 برای مهمترین سرتیتر استفاده می شود، بعد از آن h2 و سپس h3 برای سرتیترهای کم اهمیت تر و به همین ترتیب سایر سرتیترها.
ایجاد خطوط افقی در HTML
تگ </ hr> یک خط افقی را در صفحه HTML ایجاد می کند.
عنصر hr برای جدا کردن محتویات از یکدیگر استفاده می شود.
مثال (عنوان یا سرتیتر در HTML)
<hr />
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
توضیحات (Comment ها) در HTML
توضیحات می توانند در کدهای HTML وارد شوند تا کدها را خواناتر و قابل فهم تر نمایند. توضیحات توسط مرورگرها نادیده گرفته می شوند و نمایش داده نمی شوند.
توضیحات به صورت زیر نوشته می شوند:
نکته: علامت تعجب بعد از علامت باز نوشته می شود نه قبل از علامت بسته.
نکته: چگونه کدهای HTML را ببینیم
آیا تاکنون وقتی یک صفحه وب را دیده اید از خود پرسیده اید "چگونه می توان کدهای HTML آن را دید."
برای دیدن این کدها روی صفحه مورد نظر راست کلیک کرده و از منوی باز شده گزینه "View Source" را در (IE) و یا "View Page Source" را در Firefox و یا گزینه مشابه را در سایر مرورگرها انتخاب کنید.
مثال - خودتان امتحان کنید
Headings
چگونه سرتیترها را در یک سند HTML نشان دهیم.
Hidden comments
چگونه توضیحی را در کد HTML درج کنیم.
Horizontal lines
چگونه خط افقی درج کنیم.
منبعی از تگ ها در HTML
در فصل های بعد در مورد تگ های HTML و خصوصیت های آن ها بیشتر خواهید آموخت.
تگ | توضیح |
---|---|
<html> | یک سند HTML را تعریف می کند. |
<body> | بدنه یک سند را تعریف می کند. |
<h1> تا <h6> | سرتیترهای HTML را تعریف می کند. |
<hr /> | یک خط افقی را تعریف می کند. |
<!--> | توضیحی را درج می کند. |
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 74289
دیدگاهها
سلام یه سوالی که ذهن منو در گیر کرده اینه که این تگ چیه و به چه درد میخوره !DOCTYPE html
با سلام.
در html4 به قبل این تگ کاربرد متفاوتی داشت و دارای خصوصیت. ولی از html5 به بعد فقط کافیه همین کلمه نوشته بشه.
علتش هم اینه که در دنیا مرورگرهای مختلفی هست که صفحات وب رو قدری متفاوت نسبت به هم نشون میدن. همینطور صفحات وب ممکنه از نسخههای متفاوتی از html نوشته شده باشن، یا از خصوصیاتی استفاده کنن که در ورژنهای بالاتر این زبان منسوخ شده باشه. وظیفهی DOCTYPE مشخص کردن نسخهی htmlایست که طراح در صفحهی وب استفاده کرده، اون هم برای مرورگر نه کاربر!!!
در html5 فقط کافیه نوشته بشه DOCTYPE html تا خود مرورگر کارش رو انجام بده.
اطلاعات تکمیلی رو میتونید با سرچ کردن به دست بیارید.
سلام.
میشه در مورد توضیحات شرطی که در جایی خوندم اما چیزی متوجه نشدم کمی توضیح بدین. یا اگه در دروس هست آدرسش رو لطف کنید.
ممنون
با سلام.
لطفا بیشتر توضیح بدید تا بشه کامل راهنمایی کرد.
در زبان برنامهنویسی کلا توضیحات برای این به کار میره که برنامهنویسی لابهلای کدها متنی رو بنویسه به عنوان توضیح یا شرح کد. این متن عملا کد نیست. برای اینه کامپایلر متوجه این قضیه بشه، باید توسط علامتی بهش اعلام بشه. این علامتها در زبانهای مختلف فرق میکنه. مثلا در زبان php میتوان با علامتهای comment // یا /*comment*/ توضیح اضافه کرد.
در زبان html توسط علامت میتوان توضیح درج کرد، در برخی از زبانها توسط علامت ; در ابتدای خط و ...
از اونجایی که دارم هم زمان هم سایت شما و هم سایت زبان اصلی رو میخونم به این قسمت برخورم.
Conditional Comments
You might stumble upon conditional comments in HTML:
Conditional comments defines some HTML tags to be executed by Internet Explorer only.
بله دوست عزیز.
ولی باز من متوجه منظور شما نشدم.
اگر سؤالی هست بفرمایید.
سلام.
در اطلاعات مرجع کد hr اومده:
تفاوت بین HTML 4.01 و HTML5
در HTML5، تگ برای جدا کردن دو موضوع در صفحه HTML به کار می رود.
در HTML 4.01، تگ نشان دهنده یک خط افقی است.
به هر حال ممکن است تگ هنوز هم به عنوان یک خط افقی در مرورگرهای بصری نمایش داده شود، اما در حال حاضر از لحاظ معنایی تعریف می شود نه از لحاظ نمایشی.
این که الان بیشتر از لحاظ معنایی تعریف میشه و نه از لحاظ نمایشی دقیقا یعنی چی؟ چون من کاربرد نمایشی در اون میبینم.
با سلام و تشکر.
دوست عزیز شاید جوابی که میدم، اصلا مرتبط نباشه و جواب صحیحی هم نباشه. برای یادگیری به مواردی از این قبیل زیاد حساس نشید، چون از هدف اصلی یعنی یادگیری جا میمونید. تگ hr برای ایجاد خط افقی در صفحه نمایش به کار میره. اینکه تعریفش تو html4.1 یه چیزه و تو html5 یه چیزه دیگه، تو اصل قضیه خیلی فرقی نمیکنه.
hr مخفف horizontal هست.
سلام
توضیحات کامنت ها برای چی استفاده میشودمنظورم اینه چرا باید توضیحات اضافه نماش ندهد لطفا توضیحات لطفا بفرماید بگید این قسمتشو نفهیدم
تشکر وسپاس
با سلام.
معمولا زمانهایی پیش میاد که برنامه نویس نیاز داره متنی رو در لابلای کدها قرار بده، ولی این متون، کد نیستن. اگر درحالت عادی قرار بگیرن، باعث عدم اجرای صحیح میشن یا در زبانهایی مثل html باعث نمایش اون در صفحه میشه، که این مدنظر برنامه نویس نیست.
با ایجاد قابلیت کامنت میشه در لابلای کدها متن ایجاد کرد. استفاده های خیلی خوبی هم داره.
مثلا توضیحاتی راجع به کدها،
سعی و خطا برای اجرای یه کد که معمولا به صورت کامنت کردن کد صورت میگیره و ...
دقت کنید متنی که کامنت میشه، مورد پردازش نمیگیره و فقط برنامه نویس از اون مطلع هست.
ببخشین استفاده از تگ پایان به صورت استاندارد هست یا یا بصورت شروع و پایان . یکی هم اینکه اون فصله قبل از اسلش لازم هس یا نه
با سلام.
سؤال اولتون واضح نیست. بیشتر توضیح بدید!
اما در مورد سؤال دوم وجود یا عدم وجود فاصله قبل از اسلش خللی ایجاد نمیکنه.
حتماً باید آموزش جاوا اسکریپت را هم کنار آموزش اچ تی ام ال فرا بگیریم؟؟؟؟چون داخل آموزش اچ تی ام ال بعضی جاها کدهای جاوا هم هست که باعث ابهام میشه.
بهتره اول تا حدودی html رو فرا بگیرید. بعد از کمی آموزش و فراگیری html میتونید اقدام به یادگیری جاوااسکریپت کنید.
چطور می تونیم در کنار یک عنوان,یک متن را اضافه کنیم به طوری که در یک خط قرار بگیرند؟
مثال زیر را مشاهده کنید:
jsfiddle.net/F3Bcd/3/
موتورهای جستجو از سرتیترهای شما برای شاخص گذاری ساختار و محتوای صفحات وب شما استفاده می کنند..این جماله یعنی چی؟
این جمله یعنی که، وقتی موتورهای جستجو می خواهند صفحه ی وب شما را دسته بندی یا به عبارت دیگر رتبه بندی کنند از عنوان ها یا همان سرتیترها استفاده می کنند.
خداخیرتون بده
ایشالاااا
سلام
خداقوت
خیلی سایت خوبی دارین
الان آرزو میکنم زمان دانشجوییم بود و با سایتتنون آشنا شده بودم
آخه آی تی خوندم ولی همه اینا برام تازگی داره
میشه بگین بازار کاره چه زبان برنامه نویسی بهتره که روی همون تمرکز داشته باشم
بازم ممنون
سلام و ممنون از دیدگاهتون ...
به سراغ ASP.Net برید اگر میخواهید برای یک شرکت خاص Application بنویسید ولی اگر میخواهید برای یک شخص و یا یک مغازه دار یک سایت ساده بزنید به سراغ جوملا یا وردپرس برید.
ممنون
ینی میگین نیازی به یادگیری اچتمل و سی اس اس نیست دیگه
یه راست برم سراغ asp.net یا جوملا
خیر، قبل از آموزش ASP.Net باید HTML و CSS را فراگرفته باشید.
سلامی دوباره:)
یک سوال دیگه تو این صفحه پیش اومد:توضیحات (کامنت ها)اگه در مرورگر دیده نمیشوند پس چرا نوشته میشوند؟
چون من امتحان کردم چه وقتی مینوشتم چه نمینوشتم فرقی نمیکرد!:|
در ادامه پاسخ کامل امیر پهلوان بنده هم اضافه میکنم با گذاشتن کامنت(توضیحات اضافه در رابطه با برنامه)
اگه خود شما یا کسی بخواد به برنامه شما رجوع کنه و کدهای شما رو بخونه راحت تر و در زمان کمتری با نهوه و نوع
برنامه آشنا خواهد شد.
سلام، به جمله زیر توجه کنید:
"توضیحات می توانند در کدهای HTML وارد شوند تا کدها را خواناتر و قابل فهم تر نمایند" ...!
آقا عرفان منظور از خواناتر و قابل فهم تر شدن چیه؟
تصور نمایید یکی از مشتریان تان با شما تماس بگیره و درخواست تغییر در سایتی که شما 1 سال پیش طراحی کردید را مطرح کند ...! وقتی شما پروژه را باز می کنید، بعد از گذشت 1 سال یادتون نمی یاد که چی کار کردید و باید کلی کدها را نگاه کنید تا شاید یادتون بیاد ...! اما اگر برای هر block از کد comment گذاری کرده باشید، خیلی سریع تر می تونید اونها رو تغییر بدید تا مطابق با نیازهای جدید مشتری بشه ...
سلام و درود
یک سوال داشتم : در بخش عناصر (مقدمه) نوشته بودین "تگ br یک خط را تعریف می کند."
و توی این صفحه هم نوشتین : "تگ hr یک خط افقی را در صفحه HTML ایجاد می کند."
میخواستم بدونم فرقشون چیه و کی استفاده میشن؟
با تشکر//وممنون بخاطر سایت بسیار عالیتون...
سلام
تگ br: برای رفتن سرخط استفاده می شود. یعنی داخل یک پاراگراف فرض کنید، جایی از متن، بخواهید به سر خط رفته و ادامه متن را از ابتدا شروع کنید. راه حل استفاده از br است.
تگ hr: برای ایجاد یک خط افقی استفاده می شود. در همین سایت، بسیار زیاد از این تگ استفاده شده است. اگر توجه فرمایید هر مطلب شامل چند قسمت است، با جدا کردن این قسمت ها با استفاده از تگ hr، آنرا منظم تر کرده ایم.
سلام.چطوری اینhrها رو بصورت نقطه چین(......)به کار ببرم؟
سلام
از خصوصیت border با مقدار "1px dotted #000" استفاده کنید.
به نقل از پهلوان صادق:
وااااااا.
یعنی من اول بایدcssیاد بگیرم؟چون الان این چیزی که شما گفتید رو نفهمیدم.
یادگیری CSS کار آسونیه، و چون در ارتباط با طراحی ظاهر عناصر هست، مطمئناً از یادگیریش لذت خواهی برد ...!
در ضمن برای فهمیدن خصوصیت border به لینک زیر برید:
www.beyamooz.com/cssref/227-css-properties/751-border