آغاز !
خب توی این قسمت میخواهیم شروع کنیم چند تا مثال کار کنیم با هم و چند تا تگ اصلی HTML رو بررسی کنیم .
سعی و تلاش ما این هست که کاملا بصورت کاربردی و خلاصه دوره رو توضیح بدیم ولی بعضی جاها باید یکم حوصله کنی.
اسناد HTML
آقا خیلی سخته فارسی داریم توضیح میدیم . اسناد ! منظورمون همون Document هست . بعضی اصطلاحات رو فارسی استفاده میکنیم به بزرگی خودتون ببخشین !
همه اسناد HTML باید با یک اعلان نوع سند شروع شوند: <!DOCTYPE html>.
خود سند HTML با شروع <html>و به پایان می رسد </html>. یعنی تگ HTML آغاز کل قضیه هست و بسته شدن تگHTML هم پایان همه کدهای صفحه هستش.
قسمت قابل مشاهده سند HTML بین <body>و است </body> .
یعنی همون چیزی که کاربر میبینه تو سایت .
<!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>
تعریف <!DOCTYPE>
خلاصه بخواهیم بگیم این اعلان نوع سند را نشون میده و به مرورگرها کمک می کنه تا صفحات وب را به درستی نمایش بده.
فقط باید یک بار، در بالای صفحه (قبل از هر تگ HTML) ظاهر بشه.
به حروف کوچک و بزرگ حساس نیست.
تگ های هدینگ ( H ها )
سرفصل های HTML با تگ های <h1> تعریف می شوند.
حالا بستگی به سرفصل که میخواهیم استفاده کنیم میتونیم از عدد ۱ تا ۶ استفاده کنیم . یعنی اگر داریم راجع به یک مطلب اصلی صحبت میکنیم خود مطلب میشه h1 و اگه میخواهیم راجع به یه سرفصل داحل اون مطلب اصلی صحبت کنیم میشه h2 و تا آخر !
توضیحش شاید یکمی سخت باشه واستون ولی تو عکس پایین کامل مشخص هستش !
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
تگ پاراگراف
نیاز به توضیح زیادی نداره! هر جا که خواستید یک متن بنویسی که عنوان نبود و داشت توضیخان میداد ( منظور اینکه پاراگراف بود ) از این تگ استفاده کنین . مثال توی کد زیر هستش :
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
تگ لینک دهی
این مورد هم همیشه یادتون باشه هر جا خواستیم به صفحه دیگه یا المانی توی همون صفحه لینک بدیم از تگ a استفاده میکنیم و لینک میدیم به جایی که دلمون میخواد !
مقصد پیوند در ویژگی hrefمشخص شده است. حالا ویژگی ها چی هستن رو بعدا کاملا مبحثش رو باز میکنیم و توضیح میدیم که این ویژگی ها یا همون attribute ها به چه دردی میخورن. فقط الان در همین حد که هر تگ تو HTML میتونه کلی ویژگی داشته باشه و بسته به تگی که استفاده میشه این ویژگی ها متفاوت هستن…
از ویژگی ها برای ارائه اطلاعات اضافی در مورد عناصر HTML استفاده می شه.
تو مثال زیر کامل تگ رو آوردیم و لینک دادیم به این وب سایت :
<a href="https://www.bs-design.ir">This is a link</a>
تگ عکس
عکس ها توی HTML بصورت رایج و عمومی با تگ img شناخته میشه . حالا تو تگ img که همون تگ عکس یا تصویر هست چندتا ویژگی میتونیم استفاده کنیم که مشخصات خاصی بده به تصویر . مثلا آدرس تصویر رو باید حتما بدیم به این تگ که عکس رو بره ورداره بیاره لود کنه و به کاربر نشون بده. یه ویژگی دیگه هم alt هست که تقریبا میشه گفت متن جایگزین عکس هست . چندتا کاربرد داره ویژگی alt که بعد اشاره میکنیم بهش.
یه ویژگی دیگه هم عرض و ارتفاع تصویر یا عکس هستش که با width و height مشخص میشه. خیلی ساده به تصویر میگیم توی عرض اینقدر و ارتفاع اینقدر ظاهر شو تو سایت برای کاربر!
<img decoding="async" src="bsdesign-logo.jpg" alt="bs design logo" width="104" height="142">
دیدن کدهای HTML سایت های دیگه !
تو این مطلب چندتا تگ کوچیک درباره HTML آشنا شدیم. حالا یه قابلیتی توی مرورگها وجود داره که کدهای HTML هر سایتی که دوست داشته باشیم رو میتونیم ببینیم که چجوری کد زده شده. بیشتر جنبه یادگیری داره این قضیه که بعضی جاها میتونیم تمرین کنیم ببینیم چجوری تعریف شده کدهای HTML اثر هنری طراح اون سایت .
حالا اینکه چجوری میتونیم این کدها رو ببینیم اصلا کاری نداره . چند تا روش ساده داره. یه روش کلید میانبر داره ! یه روش هم راست کلیک داره. دکمه های ترکیبی Ctrl+U رو روی کیبورد وقتی تو سایت مورد نظرتون هستید فشار بدید . تمامی کدهای HTML اون صفحه از وب سایت رو میتونید ببینید. اون یکی روش هم که راست کلیک میکنید توی صفحه و گزینه View Source رو انتخاب میکنید و خیلی ساده میشه اون کدها رو دید.
یه کار دیگه هم هست که روی یک المان توی هر صفحه وب سایت میتونین راست کلیک کنید و گزینه inspect element رو بزنید . یه صفحه براتون باز میشه که میتونین اون المان بخصوص که روش راست کلیک کردین رو مشخصاتش رو ببینین.
حتما امتحان کنید تا این کدهایی که اینجا توضیح دادیم رو توی سایت های مختلف پیدا کنید و کم کم دستتون راه بیوفته و چشمتون عادت کنه به دیدن این کدها که تو قسمت های بعدی باید بریم سروقت آغاز کدنویسی. حتما از قابلیت inspect هم استفاده کنید که بتونید المان های متفاوت توی صفحات وب سایت رو ببینین.
