آموزش PHP و Laravel از پایه تا پیشرفته همراه با پروژه‌های عملی
آموزش برنامه نویسی - تاپ دمی
ورود عضویت
مسیر برنامه نویسی frontend در صد روز - روز دوم

مسیر برنامه نویسی frontend در صد روز - روز دوم

طراحی وب

18 دی، 1402

در این سری از مقالات آموزشی ، قصد داریم مسیر برنامه نویسی frontend را به صورت کامل ، از صفر تا صد در مدت صد روز بررسی کنیم ، در این جلسه به بررسی تگ های بیشتری از html می پردازیم.

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

روز دوم

بخش بندی اولیه یک وب سایت

آشنایی با ساختار تگ table

بررسی تگ video

بررسی تگ audio

بررسی تگ progress

بررسی تگ picture

آشنایی با meta tag

بخش بندی اولیه یک یک وب سایت

باتوجه به این که ساختار اصلی وب سایت ما در بخش تگ body شکل میگیرد بخش بندی کلی آن به صورت زیر است :

<body>
  <header>
    <nav>TOPDEMY</nav>
  </header>
  <main>
    <h1>topdemy</h1>
  </main>
  <footer>
    <p>تاپ دمی</p>
  </footer>
</body>

همانطور که مشاهده می کنید وب سایت ما از سه بخش header ، main و footer تشکیل می شود.

آشنایی با ساختار تگ table

ساختار کلی جداول در HTML به صورت زیر است 

<table>
    <thead>
        <tr>
            <td>name</td>
            <td>age</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Roberta</td>
            <td>39</td>
        </tr>
        <tr>
            <td>Oliver</td>
            <td>25</td>
        </tr>
    </tbody>
</table>

تگ table

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

تگ th

برای هدر یک ستون از این تگ استفاده میشود

تگ tr

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

تگ td

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

تگ caption

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

بررسی تگ video

همانطور که از اسم این تگ پیداست شما میتوانید برای پخش ویدیو در وب سایت خود از آن استفاده کنید :

<video controls="" width="100%">
    <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">
</video>

بررسی تگ audio

از این تگ برای پخش صدا در وب سایت استفاده می شود :

<audio controls
    src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3">
</audio>

بررسی تگ progress

progress همانطور که از شکل بالا مشخص است از این تگ برای لحظاتی که سایت قرار است لود شود استفاده می شود ، که کد های آن به صورت زیر است :

<progress value="50" max="100"></progress>

بررسی تگ picture

از این تگ برای قرار دادن تصاویر درون وب سایت استفاده می شود :

<picture>
  <source srcset="/media/cc0-images/surfer-240-200.jpg" media="(orientation: portrait)" />
  <img src="/media/cc0-images/painted-hand-298-332.jpg" alt="" />
</picture>

آشنایی با meta tag

به صورت خلاصه می توان گفت برای بهبود SEO در موتور های جست جو گر از متا تگ ها استفاده می کنیم ، وظیفه اصلی این تگ ها برقراری ارتباط یک وب سایت با موتور جست و جو است متاتگ ها در قسمت هدر یک وب سایت قرار میگیرند در ادامه با برخی از این meta tag ها آشنا می شویم.

<!-- description -->
<meta name="description"         content="···">
<meta property="og:description"  content="···">
<meta name="twitter:description" content="···">
<!-- image -->
<meta property="og:image"  content="https://···">
<meta name="twitter:image" content="https://···">

تگها:

#فرانت_اند #road_map #مسیر_برنامه_نویسی_در_صد_روز

توسعه دهنده وب

شروع آشنایی من با دنیای برنامه نویسی 9 سال پیش بود ، اول مسیر با وردپرس آشنا شدم و بعد از اون شروع به یادگیری زبان جاوا اسکریپت کردم و رفته رفته سعی کردم یک برنامه نویس Front-end بشم که به مبحث گرافیک هم علاقه منده و هر روز تلاش میکنه تا پیشرفت کنه و اگر تجربه ای داره با بقیه به اشتراک بزاره.

محبوب ترینها
دسته بندی مقالات
پی اچ پی
طراحی وب
جاوا اسکریپت
کاربردی
لاراول
دیتابیس

این مقاله چقدر مفید بود ؟

مقالات مشابه