HTML زبان نشانه‌گذاری استاندارد برای صفحات وب است.
با استفاده از HTML، می‌توانید وب‌سایت خود را بسازید.
یادگیری HTML آسان است و از آن لذت خواهید برد!
یادگیری آسان با HTML "خودت امتحان کن"
با ویرایشگر بصری ما، شما می‌توانید کد HTML را ویرایش کنید و نتیجه را مشاهده نمایید.
برای مثال
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.kk-star-ratings .kksr-stars .kksr-star .kksr-icon, .kk-star-ratings:not(.kksr-disabled) .kksr-stars .kksr-star:hover ~ .kksr-star .kksr-icon{--wpr-bg-7425862f-3f07-4a0b-b91f-fe27b860b4c6: url('https://academy.irannet.net/wp-content/plugins/kk-star-ratings/src/core/public/svg/inactive.svg');}.kk-star-ratings .kksr-stars .kksr-stars-active .kksr-star .kksr-icon{--wpr-bg-5ce5ed63-118e-45ae-bb2d-73885b4821da: url('https://academy.irannet.net/wp-content/plugins/kk-star-ratings/src/core/public/svg/active.svg');}.kk-star-ratings.kksr-disabled .kksr-stars .kksr-stars-active .kksr-star .kksr-icon, .kk-star-ratings:not(.kksr-disabled) .kksr-stars:hover .kksr-star .kksr-icon{--wpr-bg-2f944cc0-8ff9-491c-9a7d-1a4018255b72: url('https://academy.irannet.net/wp-content/plugins/kk-star-ratings/src/core/public/svg/selected.svg');}.mejs-overlay-button{--wpr-bg-2920bf90-a47d-4db2-86c7-252f4cdb9f1a: url('https://academy.irannet.net/wp-includes/js/mediaelement/mejs-controls.svg');}.mejs-overlay-loading-bg-img{--wpr-bg-b4f89baf-1644-4d97-bce0-5a6bc740ea31: url('https://academy.irannet.net/wp-includes/js/mediaelement/mejs-controls.svg');}.mejs-button>button{--wpr-bg-16127632-0e3d-48a6-8a9a-fb234b29104f: url('https://academy.irannet.net/wp-includes/js/mediaelement/mejs-controls.svg');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".kk-star-ratings .kksr-stars .kksr-star .kksr-icon, .kk-star-ratings:not(.kksr-disabled) .kksr-stars .kksr-star ~ .kksr-star .kksr-icon","style":".kk-star-ratings .kksr-stars .kksr-star .kksr-icon, .kk-star-ratings:not(.kksr-disabled) .kksr-stars .kksr-star:hover ~ .kksr-star .kksr-icon{--wpr-bg-7425862f-3f07-4a0b-b91f-fe27b860b4c6: url('https:\/\/academy.irannet.net\/wp-content\/plugins\/kk-star-ratings\/src\/core\/public\/svg\/inactive.svg');}","hash":"7425862f-3f07-4a0b-b91f-fe27b860b4c6","url":"https:\/\/academy.irannet.net\/wp-content\/plugins\/kk-star-ratings\/src\/core\/public\/svg\/inactive.svg"},{"selector":".kk-star-ratings .kksr-stars .kksr-stars-active .kksr-star .kksr-icon","style":".kk-star-ratings .kksr-stars .kksr-stars-active .kksr-star .kksr-icon{--wpr-bg-5ce5ed63-118e-45ae-bb2d-73885b4821da: url('https:\/\/academy.irannet.net\/wp-content\/plugins\/kk-star-ratings\/src\/core\/public\/svg\/active.svg');}","hash":"5ce5ed63-118e-45ae-bb2d-73885b4821da","url":"https:\/\/academy.irannet.net\/wp-content\/plugins\/kk-star-ratings\/src\/core\/public\/svg\/active.svg"},{"selector":".kk-star-ratings.kksr-disabled .kksr-stars .kksr-stars-active .kksr-star .kksr-icon, .kk-star-ratings:not(.kksr-disabled) .kksr-stars .kksr-star .kksr-icon","style":".kk-star-ratings.kksr-disabled .kksr-stars .kksr-stars-active .kksr-star .kksr-icon, .kk-star-ratings:not(.kksr-disabled) .kksr-stars:hover .kksr-star .kksr-icon{--wpr-bg-2f944cc0-8ff9-491c-9a7d-1a4018255b72: url('https:\/\/academy.irannet.net\/wp-content\/plugins\/kk-star-ratings\/src\/core\/public\/svg\/selected.svg');}","hash":"2f944cc0-8ff9-491c-9a7d-1a4018255b72","url":"https:\/\/academy.irannet.net\/wp-content\/plugins\/kk-star-ratings\/src\/core\/public\/svg\/selected.svg"},{"selector":".mejs-overlay-button","style":".mejs-overlay-button{--wpr-bg-2920bf90-a47d-4db2-86c7-252f4cdb9f1a: url('https:\/\/academy.irannet.net\/wp-includes\/js\/mediaelement\/mejs-controls.svg');}","hash":"2920bf90-a47d-4db2-86c7-252f4cdb9f1a","url":"https:\/\/academy.irannet.net\/wp-includes\/js\/mediaelement\/mejs-controls.svg"},{"selector":".mejs-overlay-loading-bg-img","style":".mejs-overlay-loading-bg-img{--wpr-bg-b4f89baf-1644-4d97-bce0-5a6bc740ea31: url('https:\/\/academy.irannet.net\/wp-includes\/js\/mediaelement\/mejs-controls.svg');}","hash":"b4f89baf-1644-4d97-bce0-5a6bc740ea31","url":"https:\/\/academy.irannet.net\/wp-includes\/js\/mediaelement\/mejs-controls.svg"},{"selector":".mejs-button>button","style":".mejs-button>button{--wpr-bg-16127632-0e3d-48a6-8a9a-fb234b29104f: url('https:\/\/academy.irannet.net\/wp-includes\/js\/mediaelement\/mejs-controls.svg');}","hash":"16127632-0e3d-48a6-8a9a-fb234b29104f","url":"https:\/\/academy.irannet.net\/wp-includes\/js\/mediaelement\/mejs-controls.svg"}]; const rocket_excluded_pairs = [];</script></head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<script>var rocket_lcp_data = {"ajax_url":"https:\/\/academy.irannet.net\/wp-admin\/admin-ajax.php","nonce":"c24e4a07e3","url":"https:\/\/academy.irannet.net\/html\/home","is_mobile":false,"elements":"img, video, picture, p, main, div, li, svg, section, header","width_threshold":1600,"height_threshold":700,"delay":500,"debug":null}</script><script data-name="wpr-lcp-beacon" src='https://academy.irannet.net/wp-content/plugins/wp-rocket/assets/js/lcp-beacon.min.js' async></script><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>
روی دکمه خودت امتحان کن کلیک کن تا ببینی چطور کار میکند
تفسیر این قطعه کد HTML :
بیایید نگاهی به هر بخش بیندازیم:
<!DOCTYPE html>: این خط به مرورگر می‌گوید که این سند یک صفحه HTML5 است و استاندارد‌های مدرن وب را دنبال میکند.<html>: تگ شروع و پایانی است که کل محتوای وب‌سایت شما را دربرمی‌گیرد.<head>: این قسمت شامل اطلاعاتی است که معمولا در خود صفحه نمایش داده نمی‌شوند اما برای تنظیمات صفحه ضروری هستند، مانند عنوان صفحه.<title>: متن قرار گرفته در این تگ در برگه مرورگر نمایش داده می‌شود و به کاربران کمک میکند تا محتوای صفحه شما را تشخیص دهند.<body>: بدنه اصلی صفحه شما که شامل تمام محتوایی است که کاربران می‌توانند ببینند.<h1>: این یک سرفصل است که برای نشان دادن عناوین اصلی استفاده می‌شود و بزرگترین اندازه متن را دارد.<p>: تگ پاراگراف که برای نوشتن متن استفاده می‌شود.
این تنها آغاز ماجراست! در آموزش‌های بعدی، به تفصیل به هر یک از این المان‌ها و نحوه استفاده بهینه از آن‌ها در طراحی وب‌سایت‌های شما خواهیم پرداخت. برای یادگیری بیشتر، به آموزش‌های بعدی ما مراجعه کنید و با جزئیات هر بخش آشنا شوید.
نمونه‌های HTML
در این دوره آموزشی HTML، شما با بیش از ۲۰۰ مثال مختلف آشنا خواهید شد. با استفاده از ویرایشگر آنلاین «خودت امتحان کن» ما، می‌توانید به طور مستقیم هر نمونه را ویرایش کرده و تست نمایید!
مراجع HTML
در آکادمی ایران نت شما می‌توانید مراجع کاملی درباره المان‌ها، ویژگی‌ها، رویدادها، نام‌های رنگ، موجودیت‌ها، مجموعه‌های کاراکتر، کدگذاری URL، کدهای زبان، پیام‌های HTTP، پشتیبانی مرورگر و موارد دیگر HTML را پیدا کنید.