شروع !
المان های HTML چیزی هستش که با یه تگ شروع آغاز میشه و وسطاش یه سری اطلاعات هست و آخرش هم با تگ پایان بسته میشه و اون المان خاته میابه !
<tagname>Content goes here...</tagname>
تا اینجای کار چندتا تگ کد هایی که یاد گرفتیم رو مرور میکنیم :
<h1>My First Heading</h1>
<p>My first paragraph.</p>
عناصر تو در تو HTML
خیلی از المان های HTMLر و میتونیم تو در تو استفاده کنیم . یعنی اینکه یه المان داخل المان دیگه ای باشه ! تا اینجا چند تا تگ یاد گرفتیم که تو در تو استفاده هم کردیم ازشون . چی ها بودن !؟ اولی تگ HTML که خودش دو تا تگ کد توش داره که head و body هستش . خود تگ body هم میتونه زیر مجموعه داشته باشه که تا اینجا چند تا تگ هدینگ و عکس و لینک و پاراگرف یاد گرفتیم . پس مسیر که میرسیم به یک المان تعریف شده در وب سایت بصورت خیلی ابتدایی میتونه اینجوری باشه :
HTML -> body -> p
<!DOCTYPE html>
<html>
<body data-rsssl=1>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<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>المان ریشه است و کل سند HTML را تعریف می کند.
دارای یک تگ شروع <html>و یک تگ پایان است </html>.
سپس، در داخل عنصر یک عنصر <html>وجود دارد :<body>
عنصر <body>بدنه سند را تعریف می کند.
دارای یک تگ شروع <body>و یک تگ پایان است </body>.
سپس در داخل <body>عنصر دو عنصر دیگر وجود دارد: <h1>و <p>:
عنصر <h1>یک عنوان را تعریف می کند.
دارای یک تگ شروع <h1>و یک تگ پایان است </h1>:
عنصر <p>یک پاراگراف را تعریف می کند.
دارای یک تگ شروع <p>و یک تگ پایان است </p>:
هرگز تگ پایان را نادیده نگیر !
یکی از اشتباهاتی که اکثر تازه کاران انجام میدن این هست که تگ های پایان رو یادشون میره ببندن و بعدا توی کدها اختلالا ایجاد میشه و گم میشن و توی خط کدهای بالا براشون پیدا کردن آغاز و پایان کدها سخت میشه .
با این حال بعضی از کدها نیاز به بسته شدن ندارن ! و میشه اون ها رو باز هم گذاشت .
<html>
<body data-rsssl=1>
<p>This is a paragraph
<p>This is a paragraph
</body>
</html>
المان های HTML خالی
المان های HTML بدون محتوا المان خالی نامیده می شوند. مثلا :
تگ <br>یک شکست خط را تعریف می کند و یک عنصر خالی بدون برچسب بسته است. توی مثال زیر یک تگ پاراگراف استفاده شده که این تگ در وسط انگاری یک Enter خورده و رفته خط بعدی . خط قطع شده در اصل وسط کار!
<p>This is a <br> paragraph with a line break.</p>
HTML به حروف بزرگ و کوچک حساس نیست
خیلی تلاش نکنید که این تگ حروف بزرگ بود کوچیک بود چی بود!؟ کلا بزرگوار اهمیتی نمیده کوچیک بزرگ باشه تگ شما. مثلا برای HTML فرقی نداره که شما بزنید <p> یا <P> . خودش کار خودش رو میکنه . خیلی با فهم و کمالات هست .
اما کلا استانداردهای جهانی HTML از تگ های کوچیک استفاده میکنه و همه حروف کوچیک کار میکنن و کسی نمیاد بزنه P بزرگ برای تگ پاراگراف . نکنین این کارها رو ولی بدونین که مشکلی نیست اگه استفاده کنین.
