آموزش رایگان فرانت اند؛ جلسه هشتم Semantic HTML

آموزش رایگان فرانت اند؛ جلسه هشتم Semantic HTML

سلام خدمت دوستان و همراهان عزیز هولوسن

این دوره برنامه نویسی فرانت اند (front-end) تحت وب، با زبان های HTML و CSS را شامل می‌شود.

در جلسه اول با معرفی برنامه نویسی وب در خدمتتان بودیم. و در جلسات گذشته با زبان HTML آشنا شدیم و همینطور با ساخت اولین صفحه HTML ، اکستنشن‌های VSCode و Chrome ، لینک‌ها و تصاویر آشنایی با استایل‌ها، کامنت، جداول، لیست‌ها و تگ div در خدمتتان بودیم. همینطور در جلسه قبل تحت عنوان تگ‌های فرم در خدمتتان بودیم. در این جلسه قرار است تا با تگ‌های معنادار یا سمنتیک در HTML آشنا شویم.

پس با ما همراه باشید. 👨‍💻
مارو هم از نظرات خوب خودتون بی بهره نذارید. ❤💬

جهت دانلود فایل‌های این جلسه اینجا کلیک کنید

اکثر تگ‌هایی که دیدیم مثل تگ‌های a، div، ol، li تگ‌های غیر معنادار هستند. یعنی فرض کنید کسی که با زبان انگلیسی آشنا است، با دیدن این تگ‌ها نمی‌تواند حدس بزند که این تگ‌ها چه کاری انجام می‌دهند. اما تگ‌های معنادار مثل address، aside، section، footer یک انگلیسی زبانی که کمی با HTML آشنا باشد، می‌تواند حدس بزند که کاربرد این تگ‌ها کجاست. مثلا می‌تواند حدس بزند که footer به عنوان پاورقی سایت در پایین استفاده خواهد شد. به این تگ‌ها، تگ‌های معنادار می‌گوییم. البته برخی از وب‌سایت‌ها به غلط فقط تعدادی از تگ‌های HTML5 را مثل article و section و aside و امثالشان را به عنوان تگ معنادار می‌شناسند.

حالا که به انتهای بخش HTML رسیدیم باید نکته‌ای را در رابطه با تگ‌های HTML بدانید. برخی از تگ‌های HTML بلاکی (block-level) هستند و برخی دیگر این‌لاین (inline) هستند.

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

تگ‌های بلاکی شامل :

addressarticleasideblockquote
canvasdddivdl
dtfieldsetfigcaptionfigure
footerformh1h6
headerhrlimain
navnoscriptolp
presectiontabletfoot
ulvideo

تگ‌های inline هم شامل :

aabbracronymb
bdobigbrbutton
citecodedfnem
iimginputkbd
labelmapobjectoutput
qsampscriptselect
smallspanstrongsub
suptextareatimett
var

هولوسن

با من یاد بگیر

آموزش های بیشتر در وبسایت هولوسن : https://holosen.net

۲ نظر
  • Agahi90
    ارسال در : ۱۲:۲۰h, ۱۷ بهمن پاسخ
    (5/5)

    هوالرزاق
    سلام و احترام
    فرض کنید میخواهیم از سمت راست به چپ موارد زیر رو بچینیم “در یک خط” ولی کمی تنظیمات داره راهنمایی نمایید :
    یک تصویر با ابعاد مربع ۶۰ , بعد یک فاصله , بعد یک h1 , بعد تصویر با ابعاد متسطیل ۹۸ در ۳۸۵ بصورت خوابیده
    میخواهیم این تصاویر بصورت css باشه کد هاشو بفرمایید در دو حالت
    ۱- با استفاده از ul
    2- بدون استفاده از ul
    خوب بعد از قرار گرفتن این موارد در یک خط یه مشکل وجود داره ما میخواهیم h1 در اون وسط دو تصویر هم در وسط ارتفاع دو تصویر قرار بگیره
    راستی قبل از ارسال این موارد یاد امتحانات داشنگاه افتادم و با خودم گفتم الان مهندس میگه این کاربرمون هم داره از من امتحان میگیره
    سپاس بیکران

    • هولوسن
      ارسال در : ۱۹:۵۱h, ۱۷ بهمن پاسخ

      سلام و عرض ادب
      امیدوارم که حالتون خوب و پر از انرژی مثبت باشید.
      پیشنهاد میکنم حتما در دوره طراحی وب بصورت کاملا رایگان ثبت نام کنید. در این دوره بصورت کامل مواردی که مطرح کردید پوشش داده شده و میتوانید با دیدن این دوره نه تنها این موارد بلکه هر طرح دیگری که در ذهن دارید رو پیاده سازی کنید.
      آدرس دوره طراجی وب رایگان : https://holosen.net/web-design
      با تقدیم احترام، هولوسن.

**پرسش و پاسخ** سوال خود مطرح کنید.
امتیاز شما*