خواندن ۵ دقیقه·۴ سال پیش

تگ های پایه ایی HTML

برای نمایش پاراگراف <p>

نمایش پیوند (لینک) <a>

تصویر <img>

نمایش عنوان ها <h6 > ... <h1>

لیست ها <ul> ... <li>

مطلب مرتبط: آموزش زبان HTML5

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

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

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

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

بدنه ی اصلی یک فایل Html به شکل زیر می باشد :

<!DOCTYPE html>

<html>

<head>

‏<‏title‏/>‏ آموزش های رایگان ‏<‏title‏>‏

</head>

<body>

<body/>

</html>

مطلب مرتبط: آموزش زبان HTML5

تگ های ‏ ‏Html :

همان طور که در کدهای بالا مشاهده میکنید ، یک صفحه ی Html با تگ آغازی <html> شروع شده و با تگ پایانی <html/> خاتمه یافته است . و مابقی کدها و تگ‌های مورد نیاز در بین این دو تگ، قرار خواهند گرفت .

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

تگ‌های Head :

این تگ سر صفحه با تگ آغازی <head> شروع شده و با تگ پایانی <head/> خاتمه یافته است .

تگ‌های Title :

‏ این تگ نشان دهنده عنوان ، با تگ آغازی <‏ title‏> شروع شده و با تگ پایانی <‏ title‏/> خاتمه یافته است .‏

متنی که بین تگ <title> و <title/> قرار می گیرد عنوان صفحه را مشخص کرده و در بالای نوار عنوان مرورگر نمایش داده میشود.

تگ‌های Body :

می توان گفت مهمترین تگ های Html همین تگ‌های بادی هستند که با تگ آغازی <body> شروع و با تگ پایانی <body/> به پایان میرسند .

بعد از آموزش تگ های اصلی html نوبت به سایر تگ ها می رسد که به ترتیب اهمیت به شما آموزش داده خواهد شد. بنابراین نیاز می باشد ، شما نیز برنامه NotePad را باز کرده و همراه بنده تمرین را شروع نمایید.

البته بعد از اتمام کدها و تگ ها ، با انجام یک پروژه جامع، نیز با یکدیگر تمرین خواهیم نمود.

آموزش تگ های پایه ایی ‏HTML

تگ‌های ‏p :‏

برای ایجاد یک پاراگراف در HTML از تگ <p> استفاده می شود. المان پاراگراف (paragraph) برای انتشار متن (text) در صفحات وب استفاده می شود. تگ پاراگراف بسیار ساده است و معمولا اولین تگی است که برای انتشار متن در صفحات وب از آن استفاده خواهید نمود.

تگ پاراگراف به صورت زیر است:

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

تگ br :

تگ ‏br‏ که از کلمه (‏Break‏) گرفته شده است و برای رفتن به خط جدید (شکستن خط در HTML) بدون اینکه پاراگراف جدیدی را شروع کنیم استفاده می شود. تگ ‏br‏ درواقع در نقش ‏enter‏ ظاهر شده، بدین صورت که در یک پاراگراف با استفاده ازاین تگ به خط بعدی پاراگراف رفته، بدون اینکه پاراگراف جدیدی را شروع ‏کنیم. نوشته های بعد از آن تگ به سطر جدید در همان پاراگراف منتقل می شود.‏

‏تگ ‏br‏ از جمله تگ هایی است که به صورت سینگل تگ استفاده شده و تگ پایانی ندارد. میتوان تگbr را در صفحات html به صورت ‎</ br>‎ یا <br>استفاده کرد.

‏بکار بردن تگ ‏br‏ برای ایجاد فاصله هایی بیش از یک خط در بین خطوط و یا عناصر دیگر ‏اشتباه ‏است. برای ایجاد فاصله بیشتر از یک خط در بین خطوط می توانید به راحتی از ‏تگهای ‏p‏ و یا ‏خصویت ‏padding‏ و ‏margin‏ و حتی ‏line-height‏ استفاده نمایید. استفاده بیش از حد این تگ باعث کاهش سرعت بارگزاری سایت خواهد شد.

در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.‏

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

‏ <‏p>This is another paragraph.</p‏>‏

<html>

<head>

</head>

‏<‏body‏>‏

</p>برای قرار دادن این تگ نیازی به بستن ان نیست‏<br> سلام. این یک متن آزمایشی است.<‏p‏>‏

‏</‏body‏>‏

</html>

تگ ‏h‏ ‏:

تگ h در html یکی از مهمترین تگ های ساختاری ، صفحه html به شمار می آید. این تگ ها مرسوم به تگ های هدینگ ‏، تگ های تیتر، تگ های عنوانبندی هستند که در ترجمه لاتین Heading Tags‏ ‏نامیده می شوند و در دسته‌ تگ ‌های قالب بندی متن جای دارند. ‏

مقاله مرتبط: ايجاد پيوند يا لينک يکي از مهمترين بخش های html

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

تگ های ‏h‏1 تا ‏h‏6‏ دارای رتبه بندی متفاوتی بوده و بر اساس درجه اهمیت رتبه بندی می شوند. میزان اهمیت تگ های هدینگ ‏ در ‏html‏ در واقع بزرگترین عنوان که‏ با اهمیت بسیار زیادی است با تگ <‏h‏1> و ‏کوچکترین عنوان که دارای کمترین اهمیت از دید موتورهای جست و جو است،‏ با تگ <‏h‏6> نمایش داده می شوند.‏ پس سعی کنید در استفاده از تگ ها در طراحی وبسایت خود نهایت دقت را داشته باشید.‏

ازنظررعایت اصول سئوی داخلی در طراحی سایت، نمی توان بیش از یک عنوان h1 برای صفحات وب استفاده کرد. زیرا علاوه بر ضعف ساختاری وب سایت شما، در بحث سئو نیز تاثیر منفی خواهد داشت.‏

ازتگ های هدینگ هیچ وقت نباید برای bold کردن متن صفحه استفاده کنید.

تگ های ‏هدینگ توسط تمامي مرورگرها پشتيباني مي‌شوند .‏

‏ تمامي مرورگرها به صورت پيش فرض تگ های ‏هدینگ را به صورت درون خطي يا ‏inline level‏ نمايش مي‌دهند.

همچنین بخوانید: آموزش سئو مقدماتی تا پیشرفته کاملا تخصصی

html دوره آموزشی HTML تگ های پایه ای در html

زهره ابوالقاسمی

در مورد نویسنده : "من همیشه می توانم آزادانه انتخاب کنم، اما باید بدانم که اگر انتخاب نکنم، باز هم انتخابی کرده ام."

شاید از این پست‌ها خوشتان بیاید