اچ تی ام ال - HTML5 - مهندس پیمان محمدپور

[pmpr_card title=”%D8%A7%DA%86%20%D8%AA%DB%8C%20%D8%A7%D9%85%20%D8%A7%D9%84%20%DB%B5%20%E2%80%93%20HTML5″ icon=”40″ icon_color=”info” description=”%D8%A7%DA%86%20%D8%AA%DB%8C%20%D8%A7%D9%85%20%D8%A7%D9%84%20%D9%86%D8%B3%D8%AE%D9%87%20%DB%B5%D8%8C%E2%80%8C%20%D8%A2%D8%AE%D8%B1%DB%8C%D9%86%20%D9%86%D8%B3%D8%AE%D9%87%20%D8%A7%D8%B3%D8%AA%D8%A7%D9%86%D8%AF%D8%A7%D8%B1%D8%AF%20%D8%A7%D8%B3%D8%AA%20%DA%A9%D9%87%20%D8%A8%D8%B1%D8%A7%DB%8C%20%D8%A7%DA%86%20%D8%AA%DB%8C%20%D8%A7%D9%85%20%D8%A7%D9%84%20%D8%B9%D8%B1%D8%B6%D9%87%20%D8%B4%D8%AF%D9%87%20%D8%A7%D8%B3%D8%AA.%20%D9%86%D8%B3%D8%AE%D9%87%E2%80%8C%D8%A7%DB%8C%20%D8%AC%D8%AF%DB%8C%D8%AF%20%D8%A7%D8%B2%20%D8%B2%D8%A8%D8%A7%D9%86%E2%80%8C%20%D9%86%D8%B4%D8%A7%D9%86%D9%87%20%DA%AF%D8%B0%D8%A7%D8%B1%DB%8C%20%D8%A7%DA%86%20%D8%AA%DB%8C%20%D8%A7%D9%85%20%D8%A7%D9%84%20%D8%A8%D9%87%20%D9%87%D9%85%D8%B1%D8%A7%D9%87%20%D8%AA%DA%AF%E2%80%8C%D9%87%D8%A7%D8%8C%20%D8%B5%D9%81%D8%A7%D8%AA%20%D9%88%20%D8%B1%D9%81%D8%AA%D8%A7%D8%B1%D9%87%D8%A7%DB%8C%20%D8%AC%D8%AF%DB%8C%D8%AF%20%D9%88%20%D9%85%D8%AC%D9%85%D9%88%D8%B9%D9%87%E2%80%8C%D8%A7%DB%8C%20%D9%88%D8%B3%DB%8C%D8%B9%DB%8C%20%D8%A7%D8%B2%20%D8%AA%DA%A9%D9%86%D9%88%D9%84%D9%88%DA%98%DB%8C%E2%80%8C%D9%87%D8%A7%20%DA%A9%D9%87%20%D8%A7%D9%85%DA%A9%D8%A7%D9%86%20%D8%B3%D8%A7%D8%AE%D8%AA%20%D8%B3%D8%A7%E2%80%8C%DB%8C%D8%AA%E2%80%8C%D9%87%D8%A7%20%D9%88%20%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87%E2%80%8C%D9%87%D8%A7%DB%8C%20%D8%AA%D8%AD%D8%AA%E2%80%8C%D9%88%D8%A8%20%D9%85%D8%AA%D9%86%D9%88%D8%B9%20%D9%88%20%D9%82%D8%AF%D8%B1%D8%AA%D9%85%D9%86%D8%AF%DB%8C%20%D8%B1%D8%A7%20%D9%81%D8%B1%D8%A7%D9%87%D9%85%20%D9%85%DB%8C%E2%80%8C%DA%A9%D9%86%D8%AF.%20%D9%85%D9%85%DA%A9%D9%86%20%D8%A7%D8%B3%D8%AA%20%D8%A7%DB%8C%D9%86%20%D9%85%D8%AC%D9%85%D9%88%D8%B9%D9%87%20%D8%B1%D8%A7%20%DA%AF%D8%A7%D9%87%DB%8C%20%D8%A8%D8%A7%20%D8%A7%D8%B3%D9%85%20%D8%A7%DA%86%20%D8%AA%DB%8C%20%D8%A7%D9%85%20%D8%A7%D9%84%20%DB%B5%20%D9%88%20%D8%AF%D9%88%D8%B3%D8%AA%D8%A7%D9%86%20%D9%86%DB%8C%D8%B2%20%D8%A8%D8%A8%DB%8C%D9%86%DB%8C%D8%AF%D8%8C%E2%80%8C%20%D9%88%D9%84%DB%8C%20%D8%A7%D8%BA%D9%84%D8%A8%20%D8%A7%D9%88%D9%82%D8%A7%D8%AA%20%D8%A7%DA%86%20%D8%AA%DB%8C%20%D8%A7%D9%85%20%D8%A7%D9%84%20%DB%B5%20%D9%86%D8%A7%D9%85%E2%80%8C%DA%AF%D8%B0%D8%A7%D8%B1%DB%8C%20%D9%85%DB%8C%E2%80%8C%D8%B4%D9%88%D8%AF.” gradient=”0″ layout=”horizontal_left_image_text_borderless”]

[pmpr_icon shortcode_title=”%DA%86%D8%B1%D8%A7%20%D8%A7%DA%86%20%D8%AA%DB%8C%20%D8%A7%D9%85%20%D8%A7%D9%84%20%DB%B5%20%DA%AF%D8%B2%DB%8C%D9%86%D9%87%E2%80%8C%20%D9%85%D9%86%D8%A7%D8%B3%D8%A8%E2%80%8C%D8%AA%D8%B1%DB%8C%20%D9%86%D8%B3%D8%A8%D8%AA%20%D8%A8%D9%87%20%D9%86%D8%B3%D8%AE%D9%87%20%D9%82%D8%AF%DB%8C%D9%85%DB%8C%E2%80%8C%D8%AA%D8%B1%20%D8%A7%D8%B3%D8%AA%D8%9F” shortcode_justify=”1″ shortcode_align=”center” align=”center” custom=”(icon=’firefox’,title=’%D8%B3%D8%A7%D8%B2%E2%80%8C%DA%AF%D8%A7%D8%B1%20%D8%A8%D8%A7%20%D8%A7%DA%A9%D8%AB%D8%B1%20%D9%85%D8%B1%D9%88%D8%B1%DA%AF%D8%B1%E2%80%8C%D9%87%D8%A7%DB%8C%20%D9%85%D8%B7%D8%B1%D8%AD’),(icon=’mobile’,title=’%D9%88%DB%8C%DA%98%DA%AF%DB%8C%20%D9%85%D9%88%D8%A8%D8%A7%DB%8C%D9%84%20%D9%81%D8%B1%D9%86%D8%AF%D9%84%DB%8C’),(icon=’drag’,title=’%D9%82%D8%A7%D8%A8%D9%84%DB%8C%D8%AA%20Drag%20%26%20Drop’),(icon=’video-camera’,title=’%D8%A8%D9%87%D8%A8%D9%88%D8%AF%20%D8%AF%D8%B1%20%D8%B2%D9%85%DB%8C%D9%86%D9%87%20%DA%86%D9%86%D8%AF%D8%B1%D8%B3%D8%A7%D9%86%D9%87%E2%80%8C%D8%A7%DB%8C’),(icon=’amp’,title=’%D9%82%D8%A7%D8%A8%D9%84%DB%8C%D8%AA%20%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF%20%D9%86%D8%B3%D8%AE%D9%87%E2%80%8C%20%D8%A2%D9%81%D9%84%D8%A7%DB%8C%D9%86%20%D8%A8%D8%B1%D8%A7%DB%8C%20%D8%B5%D9%81%D8%AD%D8%A7%D8%AA’),(icon=’play-circle-o’,title=’%D9%BE%D8%AE%D8%B4%20%D9%88%DB%8C%D8%AF%DB%8C%D9%88%20%D8%A8%D8%AF%D9%88%D9%86%20%D8%A7%D9%81%D8%B2%D9%88%D9%86%D9%87%20%D8%A7%D8%B6%D8%A7%D9%81%DB%8C’),(icon=’spinner’,title=’%D8%A8%D8%A7%D8%B1%DA%AF%D8%B0%D8%A7%D8%B1%DB%8C%20%D8%B3%D8%B1%DB%8C%D8%B9%E2%80%8C%D8%AA%D8%B1%20%D8%B5%D9%81%D8%AD%D8%A7%D8%AA’),(icon=’users’,title=’%D9%82%D8%A7%D8%A8%D9%84%DB%8C%D8%AA%20%D9%88%D8%A8%20%D9%88%D8%B1%DA%A9%D8%B1%E2%80%8C%D9%87%D8%A7′)” column=”col-md-3″ size=”30″ color=”primary” gradient=”0″ has_card=”0″ layout=”top_image_text”]

[pmpr_card title=”%D8%AA%DA%AF%E2%80%8C%D9%87%D8%A7%DB%8C%20%D8%AC%D8%AF%DB%8C%D8%AF%20%D8%A7%DA%86%20%D8%AA%DB%8C%20%D8%A7%D9%85%20%D8%A7%D9%84%20%DB%B5″ icon=”bullhorn” icon_color=”info” description=”همه زبان‌های برنامه نویسی برای زنده‌ ماندن و حل مشکلاتی که توسعه‌ دهندگان با آن‌ها روبه‌رو می‌شوند، نیاز به بروزرسانی و ارتقاء منظم دارند. بیایید نگاهی به تگ‌های جدید آخرین و بروزترین نسخه اچ تی ام ال بیندازیم.” gradient=”0″ layout=”horizontal_right_image_text_borderless”]

%D8%AA%DA%AF%20Video

بهتون اجازه میده به راحتی وید‌ئوهاتون رو توی وب‌سایتتون پخش کنید. توی قطعه‌ کد مورد نظر، width و height ابعاد بلوک ویدئو رو تعیین می‌کنند. صفت controls یه سری دکمه مثل Play و Pause رو براتون ایجاد می‌کنه. صفت src داخل تگ source لینک ویدیو مورد نظری که می‌خواهید در این بلوک نمایش داده شود را به عنوان مقدار می‌پذیرد، و صفت type هم نوع ویدئو مورد نظر را مشخص می‌کند که در این مثال خاص video/mp4 است.


            <video width="450px" height="350px" controls>
  <source src="video-url.mp4" type="video/mp4">
</video>

%D8%AA%DA%AF%20Figure

از این تگ می‌توان برای نمایش محتوای بصری، مانند عکس، نمودار، قطعه کد و ... استفاده کرد. در این مثال کد مورد نظر از دو تگ Figure استفاده شده است که هر کدام دارای یک تگ img هستند.


            <figure class="gallery-item">
  <img src="image-1.png">
</figure>
<figure class="gallery-item">
  <img src="image-2.png">
</figure>

%D8%AA%DA%AF%20Section

تگ Section، مانند تگ Div، به منظور سازماندهی محتوای یک صفحه وب در گروه‌های موضوعی مختلف مورد استفاده قرار می‌گیرد. برای مثال، در کد مربوط به این بخش تگ Section برای ارائه یک فرم به نام Contact Us (ارتباط با ما) مورد استفاده قرار گرفته است.


            <section class="contact-form">
  <h2>Contact Us</h2>
  <form>
    ... 
  </form>
</section>

%D8%AA%DA%AF%20Nav

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


            <nav>
  <p><a href="login.html">Log In</a></p>
  <p><a href="signup.html">Sign Up</a></p>
  <p><a href="contact.html">Contact Us</a></p>
</nav>

%D8%AA%DA%AF%20Header

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


            <header>
  <img src="company-logo.png">
  <nav>
    <p><a href="login.html">Log In</a></p>
    <p><a href="signup.html">Sign Up</a></p>
    <p><a href="contact.html">Contact Us</a></p>
  </nav>
</header>

%D8%AA%DA%AF%20Footer

تگ Footer، معمولا در پایین یک صفحه وب استفاده می‌شود،‌ می‌تواند شامل اطلاعات مربوط به حق کپی رایت، پیوند‌هایی به رسانه‌های اجتماعی، پیوند‌های خدمات ارائه شده و دیگر‌ موراد مد نظر توسعه دهنده یا دارنده سایت شود. در مثال مربوط به این بخش در یک تگ Footer، اطلاعاتی در مورد کپی رایت و پیوند‌ به شبکه‌های اجتماعی را می‌بینیم.


            <footer>
  <p>&copy; Acme Granola Corporation 2016<p>
  <div class="social">
    <a href="#"><img src="instagram-icon.png"></a>
    <a href="#"><img src="facebook-icon.png"></a>
    <a href="#"><img src="twitter-icon.png"></a>
  </div>
</footer>

اچ تی ام ال – HTML5