آموزش html-جلسه چهارم-مثال های پایه html

آموزش html

مثال های پایه HTML


در این فصل ما چند مثال اولیه HTML را نشان خواهیم داد.

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

 

اسناد 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":"543cd7be58","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>


اعلان <!DOCTYPE> نوع سند را نشان می دهد و به مرورگرها کمک می کند تا صفحات وب را به درستی نمایش دهند.

فقط باید یک بار، در بالای صفحه (قبل از هر تگ HTML) ظاهر شود.

اعلان <!DOCTYPE> به حروف کوچک و بزرگ حساس نیست.

اعلان <!DOCTYPE> برای HTML5 این است:

				
					<!DOCTYPE html>

				
			

سرفصل های HTML


سرفصل های HTML با تگ های <h1> تا <h6> تعریف می شوند.

<h1> مهمترین عنوان را تعریف می کند. <h6> کم اهمیت ترین عنوان را تعریف می کند:

				
					<h1>عنوان 1</h1>
<h2>عنوان 2</h2>
<h3>عنوان 3</h3>
				
			

پاراگراف های HTML


پاراگراف های HTML با تگ <p> تعریف می شوند:

				
					<p>این تگ پاراگراف است</p>

				
			

لینک های HTML


پیوندهای HTML با تگ <a> تعریف می شوند:

				
					<a href="https://webshift.ir">لینک سایت وب شیفت</a>
				
			

مقصد پیوند در ویژگی href مشخص شده است.

از ویژگی ها برای ارائه اطلاعات اضافی در مورد عناصر HTML استفاده می شود.

 

تصاویر 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>
				
			
error: شماره تماس : 09193156178