لیست قالب های HTML (اچ تی ام ال) مجموعه برنامه نویسی وب شیفت به صورت کاملا اختصاصی و ریسپانسیو
قالب HTML (یا همان HTML Template) یک ساختار ابتدایی و استاندارد برای ایجاد صفحات وب است که در آن، محتوای صفحه وب با استفاده از زبان نشانه‌گذاری HTML تعریف می‌شود. این قالب‌ها معمولاً برای طراحی صفحات وب از پیش آماده به کار می‌روند و به توسعه‌دهندگان این امکان را می‌دهند که به سرعت صفحات وب را ایجاد کرده و سپس محتوای لازم را در آن‌ها قرار دهند.
HTML (HyperText Markup Language) زبان نشانه‌گذاری استاندارد برای ایجاد صفحات وب است. این زبان ساختار و محتوای صفحات وب را مشخص می‌کند. HTML از تگ‌ها (Tags) برای تعریف بخش‌های مختلف صفحه استفاده می‌کند.
یک صفحه HTML معمولاً شامل اجزای مختلفی است که در زیر آمده است:
console.log( 'Code is Poetry' );<!DOCTYPE html>
<html lang="fa">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>عنوان صفحه</title>
<link rel="stylesheet" href="style.css"> <!-- لینک به فایل CSS -->
</head>
<body>
<header>
<h1>عنوان صفحه</h1>
</header>
<nav>
<ul>
<li><a href="#">خانه</a></li>
<li><a href="#">درباره ما</a></li>
<li><a href="#">تماس با ما</a></li>
</ul>
</nav>
<main>
<h2>محتوای اصلی صفحه</h2>
<p>این یک پاراگراف نمونه است.</p>
</main>
<footer>
<p>تمامی حقوق محفوظ است © 2025</p>
</footer>
<script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode-wpr",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
</html>
این ساختار شامل بخش‌های زیر است:
<!DOCTYPE html>: اعلام نوع سند HTML5.<html>: عنصر اصلی صفحه که تمام محتوای HTML را در بر می‌گیرد.<head>: شامل متا دیتاهای صفحه مانند تنظیمات charset و viewport، عنوان صفحه و لینک‌ها به فایل‌های CSS و JS.<body>: بخش اصلی صفحه که محتوای نمایش داده‌شده را شامل می‌شود.<header>: شامل اطلاعات ابتدایی صفحه مانند عنوان یا لوگو.<nav>: بخش منو یا ناوبری.<main>: بخش اصلی محتوای صفحه.<footer>: حاوی اطلاعات پایانی صفحه مانند کپی‌رایت یا لینک‌های اضافی.قالب‌های HTML به توسعه‌دهندگان این امکان را می‌دهند که بدون نیاز به شروع از صفر، سریعاً یک صفحه وب بسازند. این قالب‌ها ممکن است شامل طراحی‌های از پیش تعریف‌شده برای بخش‌های مختلف صفحه مانند منو، هدر، فرم‌ها، جدول‌ها و بخش‌های دیگر باشند.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>صفحه نمونه</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>خوش آمدید به وبسایت ما</h1>
<p>یک قالب ساده HTML برای شروع سریع!</p>
</header>
<nav>
<ul>
<li><a href="#">خانه</a></li>
<li><a href="#">درباره ما</a></li>
<li><a href="#">خدمات</a></li>
<li><a href="#">تماس با ما</a></li>
</ul>
</nav>
<section>
<h2>درباره ما</h2>
<p>ما یک شرکت پیشرفته در زمینه طراحی وب هستیم.</p>
</section>
<footer>
<p>© 2025 تمامی حقوق محفوظ است.</p>
</footer>
</body>
</html>
برای استفاده از قالب‌های HTML معمولاً مراحل زیر طی می‌شود:
برای استفاده از قالب‌های HTML، معمولاً به ابزارهای زیر نیاز خواهید داشت:
در سیستم‌های مدیریت محتوا مانند WordPress، قالب‌های HTML به قالب‌های وردپرس تبدیل می‌شوند. این کار با استفاده از فایل‌های PHP و تم‌های مخصوص انجام می‌شود، ولی در نهایت، پایه‌گذار این قالب‌ها همان HTML است.
قالب‌های HTML ابزارهای بسیار مفیدی برای توسعه‌دهندگان وب هستند که سرعت طراحی و پیاده‌سازی صفحات وب را افزایش می‌دهند. با استفاده از این قالب‌ها، شما می‌توانید به راحتی یک صفحه وب جذاب و کاربرپسند بسازید و محتوای خود را به صورت سریع و کارآمد در وب منتشر کنید.
