parsgreen.com
article

بررسی تگ های اصلی و کلیدی HTML در صفحات وب

html-main-tags

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

تگ چیست؟


تگ از نظر لغوی به معنی برچسب است، اما در زبان های برنامه نویسی و از جمله در html، تگ ها به معنی کدهای تعریف شده این زبان هستند که معمولا به صورت دو قسمتی به کار می روند، قسمت اول نشانگر شروع تگ و قسمت دوم نشانگر پایان آن است، هر قسمت نیز بین علامت های <> محصور شده است، ذکر این نکته نیز ضروری است که بعضی تگ های html تک قسمتی و یکتا هستند، مانند تگ های مربوط به خط یا فاصله.
-

تگ head ، title ، html و body


کدهای وب بین تگ های html و body ساخته می شوند و تگ head دارای قابلیتهایی خاص جهت معرفی آن صفحه، قرار دادن تیتر صفحه (تگ title)، ایمپورت فایل های css و جاوا اسکریپت (javascript)، متاتگ ها (metatags) و... است، تقریبا در تمام صفحات وب، این تگ ها را خواهید یافت، چرا که چارچوب اصلی یک صفحه وب را تعریف می کنند و از اهمیت زیادی برخوردارند.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | تگ های اصلی html</title>
<!-- http://webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
</style>
</head>
<body>
این یک سند اچ تی ام ال ساده است!
</body>
</html>
پیش نمایش
-

تگ h1 تا h6، سرتیترها


تگ های فوق جهت معرفی سرتیترها (header) به کار می روند و نشان دهنده میزان اهمیت محتوای درون خود هستند، تگ h1 بیشترین اهمیت و به ترتیب تا h6 کم ترین اهمیت را دارند، امروزه به دلیل اینکه موفقیت در وب تا حدود زیادی به سازگاری یک سایت با موتورهای جستجو بستگی دارد، توصیه می شود حتما از تگ های مربوط به سرتیترها جهت قابل فهم شدن مطالب مهم برای ربات های خزنده، استفاده شود، ذکر این نکته نیز ضروری است که در استفاده از تگ های h1 تا h6، ترتیب آنها باید از با اهمیت ترین (h1) به کم اهمیت ترین (h6) از بالای صفحه به پائین آن باشد.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> وبگو | تگ های اصلی html - سرتیترها</title>
<!-- http://webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
</style>
</head>
<body>
<h1>این یک متن اچ تی ام ال تیتر شده است!</h1>
</body>
</html>
پیش نمایش
-

تگ های ایجاد کننده خط و فاصله


br و hr دو تگی هستند که از آنها برای ایجاد فاصله و خط استفاده می شود، استفاده از این دو تگ به جهت موارد کاربرد زیاد، در صفحات html به وفور تکرار می شود، از طرفی همانطور که پیش تر گفتیم، این تگ ها یکتا هستند و قسمت دوم ندارند.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> وبگو | تگ های اصلی html - فاصله و خط</title>
<!-- http://webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
</style>
</head>
<body>
<h1>این یک متن اچ تی ام ال تیتر شده است!</h1>
<br />
<h2>این یک متن اچ تی ام ال تیتر شده  با h2 است!</h2>
<hr />
</body>
</html>
پیش نمایش
sectionدسته بندی: آموزش مقدماتی » HTML
related مطالب بیشتر:
» کار با تگ های ایجاد کننده لیست در HTML
» کاربرد تگ img و نمایش تصاویر در HTML
» ایجاد جدول با تگ table در html
» کار با تگ فرم (form) در HTML
» فرمت بندی و کار با پاراگراف و متن در HTML
commentنظرات (۱۴ یادداشت برای این مطلب ارسال شده است)
نویسنده: roya
زمان: ۱۷:۰۱:۵۰ - تاریخ: ۱۳۹۱/۱۰/۱۰
مرسی.
نویسنده: omid
زمان: ۱۱:۰۵:۴۹ - تاریخ: ۱۳۹۱/۱۲/۲۶
وب بسیار خوبی داری من از مطالب نحوه ی استفاده را بردم خواهشا وبلاگ من را بزار تو لینکت. ممنونم
نویسنده: خلیل
زمان: ۱۶:۲۹:۳۲ - تاریخ: ۱۳۹۲/۰۷/۲۵
ممنون
نویسنده: محمد
زمان: ۱۲:۳۱:۵۱ - تاریخ: ۱۳۹۲/۰۸/۰۸
خسته نباشید. یه سوال که خیلی وقته ذهنم رو درگیر کرده
این که خط ها اولشون فاصله گذاشته میشه تاثیری داره تو کد نویسی ؟
مثلا اینجا
body{
font-family:Tahoma, Geneva, sans-serif;
آیا ضروریه که خط دوم که فونت هست فاصله بگیره اولش ؟
پاسخ: 
ضرورتی وجود ندارد، تنها به دلیل خواناتر شدن کدنویسی این کار (معمولا به صورت خودکار و توسط نرم افزارهای برنامه نویسی) انجام می شود.
نویسنده: الکترو مگ
زمان: ۱۴:۰۳:۱۶ - تاریخ: ۱۳۹۳/۰۱/۰۱
ممنون خیلی مفید بود
خیلی سایت خوبی دارید
نویسنده: کیانی
زمان: ۱۶:۲۶:۱۵ - تاریخ: ۱۳۹۳/۰۱/۳۱
سلام
خیلی ممنون از سایت خوبتون
من به صورت تجربی html و css رو یاد گرفتم میخوام یک قالب با html5 و css3 طراحی کنم فقط یک مشکلی دارم من نمیدونم از تگ های html5 باید چه جوری در قالبم استفاده کنم یعنی میخوام قالب فعلی که دارم رو به html5 تبدیل کنم
مثلا من یک آی دی دارم به نام
<"div id="contentText>
میخوام اینو بنویسم
section
باید چی کار کنم؟
وقتی می نویسم
<"section id="contentText>
قالبم بهم میریزه
ممنونم میشم راهنمایی کنید
پاسخ: 
سلام
در کل HTML5 تفاوت بنیادی با سایر نسخه های HTML ندارد، منتها باید اصول و روش های جدید آن را با مطالعه از ابتدا و در قالب یک منبع آموزشی جداگانه مطالعه کنید، به طور مثال در HTML5 تگ div حذف نشده که بخواهید آن را با section جایگزین کنید، بلکه section نحوه تعریف و کاربرد خاص خودش را دارد، section برای قسمت بندی صفحه به بخش های خاص مانند header، footer، chapters و... است و درون آن می توان از div استفاده کرد، در واقع section معمولا تاثیر مرئی در صفحه ندارد بلکه بیشتر برای رعایت اصول بهینه سازی و HTML Semantic به کار می رود.
نویسنده: مراد
زمان: ۱۹:۱۶:۵۳ - تاریخ: ۱۳۹۳/۰۲/۲۱
من میخوام بعضی از قسمتهای کدهای html رو بصورت php بنویسیم چون فرمت صفحه ام php هست و میتونم قسمتی از کدها رو در یک تابع خلاصه کنم که هم فضای کمتری بگیره هم از دید کاربر پنهان بمونه ایا این کار از لحاظ سرعت و امنیت مفید هست یا همون html بمونه بهتره؟
پاسخ: 
PHP و HTML دو کاربرد متفاوت دارند، HTML خروجی یک صفحه وب است که می تواند به صورت ثابت یا داینامیک (با استفاده از کدهای PHP) تولید شود، لذا در نهایت نتیجه همان می شود، منتها برای ایجاد قابلیت های سیستماتیک از PHP استفاده می کنند تا خروجی HTML را بدون کدنویسی مستقیم و تکرار مکررات داشته باشند که این کار را راحت تر و حرفه ای تر می کند، اما اینکه از PHP استفاده کنید یا خیر در خروجی HTML شما و به تبع در امنیت سایت تاثیری ندارد.
نویسنده: مبتدی
زمان: ۰۰:۵۰:۱۶ - تاریخ: ۱۳۹۳/۰۳/۰۷
سلام
با تشکر از راهنمایی های خوبتون. میخواستم بدونم کدومیک از کدهای تعریف شده ی شما باعث مرتب نوشه شدن متن فارسی شده! چون من این قسمت رو:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
فقط به صورت
<DOCTYPE html>
نوشتم و متن فارسی که می نویسم مثل شما وقتی از علامت تعجب یا کلمه ی انگلیسی استفاده می کنم نامرتب میشه، منتهی برخلاف کار شما که در پیش نمایش مرتب میشه، مال من همینطور به هم ریخته باقی میمونه. میشه بپرسم کدوم کد باعث شده مال شما مرتب نمایش داده بشه؟ چون من همه کارایی که گفتین رو انجام دادم.
پاسخ: 
سلام
از اینکه تا این حد دقیق هستید جای خوشحالی است!
این حالت مربوط به راست چین یا چپ چین بودن نوشته است که با استایل CSS آن را تنظیم کرده ایم:
<style type="text/css">
body{
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
direction:rtl;
}
</style>
خاصیت direction با مقادیر rtl یا right to left برای این قسمت است، البته در حال حاضر نیازی به آشنایی با CSS نیست و فعلا باید بر روی HTML کار کنید.
نویسنده: عرفان
زمان: ۲۲:۲۵:۰۳ - تاریخ: ۱۳۹۳/۰۷/۱۸
جالب بود
نویسنده: لیلی
زمان: ۱۵:۵۹:۴۵ - تاریخ: ۱۳۹۳/۰۸/۱۷
عاااااااااالی بود
نویسنده: مگنولیا
زمان: ۲۱:۰۴:۴۳ - تاریخ: ۱۳۹۳/۰۹/۰۲
سلام.
آیا تگهای - h1 دارای خصوصیات تنظیم متن نیز میباشند؟
ممنون.
پاسخ: 
سلام
خیر، برای این کار باید از استایل CSS استفاده کنید.
نویسنده: مهشید
زمان: ۱۶:۰۹:۰۰ - تاریخ: ۱۳۹۴/۰۴/۱۲
سلام.
میشه توضیح بدید قسمت font-family چه کاربردی داره دقیقا و چه چیز رو مشخص میکنه؟
یه سوال دیگه هم این که بجای فونت هایی که توی این قسمت نوشتید میشه فونت های دیگه ای رو نوشت؟ اگه میشه چه فونت هایی؟
پاسخ: 
سلام
font-family مربوط به تنظیم خانواده فونت در CSS است که در جای خود توضیح داده شده، فونت های تنظیم شده جزء موارد پیش فرض هستند و می توانید سایر موارد عمومی نظیر Arial و ... را نیز قرار دهید، منتها اگر هدفتان درج فونت های فارسی است، باید با خاصیت
@font-face
در CSS3 آشنا باشید (لطفا در وب عبارت "نحوه استفاده از فونت فارسی با font-face" را جستجو کنید).
نویسنده: Arash BTF
زمان: ۰۱:۲۵:۴۴ - تاریخ: ۱۳۹۴/۰۵/۲۰
واقعا ممنون ، مطالب سایتتون عالیه
نویسنده: mohammad
زمان: ۱۱:۰۰:۳۶ - تاریخ: ۱۳۹۴/۰۶/۲۸
تشکر از زحمات شما




more لطفا دقت کنید که یادداشت های زیر منتشر نشده و حذف خواهند شد:
- یادداشت های خارج از موضوع این مطلب.
- سوالات کلی، غیر ضروری و مشکلاتی که هیچ تلاشی برای رفع آن نکرده باشید.
- نظرات حاوی کدها و اسکریپت های خیلی طولانی (به طور مثال کد کامل قالب وبلاگ).

2 × 4
 refresh
آگهی
seonab.com
طراحی نرم افزار اندروید
رنگین کمان عکس
Ranginkamaan.com

آرشیو عکس های باکیفیت با موضوعات متنوع...