آموزش اچ تی ام ال : تگ های اصلی و فرمت بندی متن در html

دسته بندی: آموزش
زمان مطالعه: 2 دقیقه
۱۱ دی ۱۳۹۳

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

مواردی که در این جلسه به توضیح و تدریس اون خواهیم پرداخت عبارتند از :

  • پاسخ تمرین جلسه پیش و توضیح رنگ های HSL و HSLA
  • تگ های Block و Inline و تفاوت های آن ها
  • آموزش جزئی مجموعه تگ های فرمت دهی متن
  • تگ <!DOCTYPE> و کاربردهای آن
  • تگ <html> و کاربردهای آن
  • تگ <title> و کاربردهای آن
  • تگ <body> و کاربردهای آن
  • تگ <!--...--> و کاربردهای آن
  • تگ های <h1> ... <h6> و کاربردهای آن
  • تگ <p> و کاربردهای آن
  • تگ <br> و کاربردهای آن
  • تگ <hr> و کاربردهای آن
  • تگ <acronym> و کاربردهای آن
  • تگ <abbr> و کاربردهای آن
  • تگ <address> و کاربردهای آن
  • تگ <b> و کاربردهای آن
  • تگ <bdi> و کاربردهای آن
  • تگ <bdo> و کاربردهای آن
  • تگ <big> و کاربردهای آن
  • تگ <blockquote> و کاربردهای آن
  • تگ <center> و کاربردهای آن
  • تگ <cite> و کاربردهای آن
:: توجه

این مطلب یک جلسه از آموزش طراحی وب سایت می باشد و برای مشاهده آن باید در دوره ثبت نام کنید.

ثبت نام در آموزش طراحی وب سایت

نویسنده
بیش از 15 سال هست که برنامه نویسی می کنم و از بین همه زبون هایی که کار کردم جاوا، اسمبلی و php رو دوست دارم. دانشجوی دکترای نرم افزارم و توی دانشگاه روی پردازش بیگ دیتا و پردازش موازی کار کردم و عاشق چالش از هر نوعیش هستم! سون لرن مثل بچه منه که 12 سال براش وقت گذاشتم، اینجا همه تلاش می کنیم از شروع یادگیری تا ورود به بازر کار حوزه برنامه نویسی و IT همراهتون باشیم.

جلسات دوره

نظرات کاربران

احسان فلاح پور

سلام استاد من تو php storm
Doctypeرو که بر میدارم که بخوام متن رو جاهای مختلف قرار بدم با تگ alignبرام لیست نمیکنه php storm هم اخرین ورژن هست

mststrange

سلام فایل ها دانلود نمیشه لطفا چک کنید

سام جهانگیری

سلام
فاصله ای که با دکمه Tab در نرم افزار های متن برای فاصله اول پاراگراف ایجاد میکنیم رو چجوری باید در HTML به وجود بیاریم؟

کیوان علی محمدی

سلام همون دکمه Tab مگه کار نمیکنه؟

پوریا نخعی

سلام خسته نباشید
ببخشید لینک های دانلود امروز درست کار نمیکنن و نمیتونم ویدئو هارو دانلود کنم مشکل از کجاست؟

مصطفی قدیمی

سلام وقت بخیر
موردی وجود نداره دوست عزیز لطفا دوباره بررسی کتید

Ali Azad

سلام استاد آوند ممنونم از آموزش فوق العاتون.
شما در آموزشتون فرمودید از تگ h1 فقط یک بار در صفحه ی وب میشه استفاده کرد. اما اینو عرض نکردید که از تگ های h2 یا بقیه ی تگ ها تا h6 هم یکبار میشه استفاده کرد یا نه؟؟ ممنون میشم پاسخ بدید.

مصطفی قدیمی

سلام وقت بخیر

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

Ali Azad

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

یاسین عبّاسے

آیا امکان تعمیم دادن یک attribute به تمام تگ‌های مشخصی در صفحه وجود داره؟ برای نمونه می‌خوام ویژگی سراسری title رو برای تمامِ تگ‌های داخل وب پیج، قرار بدم و تک تک وارد نکنم… .

amirfff

سلام خدمت استاد آوند
می خواستم بدونم در صفحه ی اصلی سایت , در قسمت بدنه ی سایت , چرا مقالات و بانک کد و همچنین جعبه ابزار که یک عنوان به حساب می آیند , درون تگ h قرار نگرفته اند؟؟؟؟

لقمان آوند

سلام
روی قالب فعلیمون خیلی از لحاظ سئو حساس نبودیم.
قالب جدیدمون در دو سه هفته آینده رونمایی میشه و وقتمون رو روی اون میزاریم …

پرستو کفیلی

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

لقمان آوند

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

Mehran

سلام استاد شما در تفاوت دو تگ strong و b فرمودید که اولی در سئو کاربرد داره و نشون دهنده ی متن و کلمه ی مهمه،الان استاد ما بخواییم به گوگل بفهمونیم که یه کلمه ای مهمه می تونیم بین تگ strong بیاریمش ولی نمی خواییم کاربر به صورت بولد و تو پر ببینه اون متن رو(یعنی ظاهری مثل بقیه ی متن ها داشته باشه)،اگر در css از خصوصیت font-weight استفاده کنیم می تونیم تمام تگ های strong رو نازک تر کنیم
الان سوالم اینکه آیا این کار (یعنی نمایش strong به صورت متن غیر بولد با css) از نظر سئو تاثیر منفی داره یا نه؟
با تشکر

لقمان آوند

خوب از css استفاده کنید و font-weight:normal بهش بدید.

Sarkhosh Zahra

سلام و خسته نباشید خدمت مسئولین وبسایت عالی سون لرن
یه سوال دارم :
در آموزش ها یکی از تاکید های جناب آوند اینه که تگ ها رو بر اساس معنا بکار ببریم چون موتور جستجو فهم بیشتری پیدا میکنه و در نتیجه در بهینه شدن سایت تاثیر داره
حالا سوال من اینه :
من میخوام یه قالب رو طراحی کنم مثلا برای وردپرس
خب چطور میشه تگ های معنا دار بکار برد؟مگه هسته وردپرس قانون نداره؟
مثلا یکی از تگ ها نام داره که میشه مثلا در یک مقاله برای نویسنده قرار داد
خب این در هسته وردپرس انجام میشه؟
ممنون میشم توضیح بدید
تشکر مجدد

لقمان آوند

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

سید حسن میرعربشاهی

ببخشید از خصوصیت cite در تگ blockquote چطوری باید استفاده کنیم؟ و مقدار url چیست ؟

لقمان آوند

خوب آدرس یا همون url منبع رو باید در قسمت cite بیارید دیگه …

پایان زمان پشتیبانی

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

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

نیاز به لاگین

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