در این فصل ما چند مثال اولیه HTML را نشان خواهیم داد.
اگر از برچسب هایی استفاده می کنیم که هنوز درباره آن ها یاد نگرفته اید، نگران نباشید.
همه اسناد HTML باید با یک اعلان نوع سند شروع شوند: <!DOCTYPE html>.
خود سند HTML با <html> شروع می شود و با </html> به پایان می رسد.
قسمت قابل مشاهده سند HTML بین <body> و </body> است.
<!DOCTYPE html>
<html>
<head>
<title>عنوان برگه</title>
</head>
<body>
<h1>تگ هدر یا تگ عنوان</h1>
<p>تگ پاراگراف </p>
<script>var rocket_beacon_data = {"ajax_url":"https:\/\/webshift.ir\/wp-admin\/admin-ajax.php","nonce":"20ce0209a4","url":"https:\/\/webshift.ir\/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-html-%D8%AC%D9%84%D8%B3%D9%87-%DA%86%D9%87%D8%A7%D8%B1%D9%85-%D9%85%D8%AB%D8%A7%D9%84-%D9%87%D8%A7%DB%8C-%D9%BE%D8%A7%DB%8C%D9%87-html","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"atf":true,"lrc":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800}</script><script data-name="wpr-wpr-beacon" src='https://webshift.ir/wp-content/plugins/wp-rocket/assets/js/wpr-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>
اعلان <!DOCTYPE> نوع سند را نشان می دهد و به مرورگرها کمک می کند تا صفحات وب را به درستی نمایش دهند.
فقط باید یک بار، در بالای صفحه (قبل از هر تگ HTML) ظاهر شود.
اعلان <!DOCTYPE> به حروف کوچک و بزرگ حساس نیست.
اعلان <!DOCTYPE> برای HTML5 این است:
<!DOCTYPE html>
سرفصل های HTML با تگ های <h1> تا <h6> تعریف می شوند.
<h1> مهمترین عنوان را تعریف می کند. <h6> کم اهمیت ترین عنوان را تعریف می کند:
<h1>عنوان 1</h1>
<h2>عنوان 2</h2>
<h3>عنوان 3</h3>
پاراگراف های HTML با تگ <p> تعریف می شوند:
<p>این تگ پاراگراف است</p>
پیوندهای HTML با تگ <a> تعریف می شوند:
<a href="https://webshift.ir">لینک سایت وب شیفت</a>
مقصد پیوند در ویژگی href مشخص شده است.
از ویژگی ها برای ارائه اطلاعات اضافی در مورد عناصر HTML استفاده می شود.
تصاویر HTML با تگ <img> تعریف می شوند.
فایل منبع (src)، متن جایگزین (alt)، عرض و ارتفاع به عنوان ویژگی ارائه می‌شوند:
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20104%20142'%3E%3C/svg%3E" alt="webshift.ir" width="104" height="142" data-lazy-src="webshift.jpg"><noscript><img decoding="async" src="webshift.jpg" alt="webshift.ir" width="104" height="142"></noscript>
