اصول اولیه HTML
HTML (زبان نشانه گذاری Hypertext Markup Language) کد است که برای ساختن یک صفحه وب و محتوای آن استفاده می شود. به عنوان مثال، محتوا را می توان در مجموعه ای از پاراگرافها، لیستی از نقاط دلخواه یا با استفاده از تصاویر و جداول داده ها ساخت. همانطور که عنوان نشان می دهد، این مقاله به شما یک درک ساده از HTML و توابع آن را می دهد.
بنابراین کد HTML چیست؟
HTML یک زبان برنامه نویسی نیست این یک زبان نشانه گذاری است که ساختار محتوای شما را تعریف می کند. HTML حاوی مجموعه ای از عناصر است که شما می توانید از قسمت های مختلف محتوا استفاده کنید تا قسمت خاصی از محتوا را به نمایش بگذارید یا به نحوی خاص عمل کنید. تگ های محصور می توانند یک لینک یا لینک تصویری به جای دیگری ایجاد کنند، می توانند کلمات را به صورت کلاسیک، فونت بزرگتر یا کوچکتر و غیره ایجاد کنند. برای مثال، خط زیر را وارد کنید:
گربه من خیلی خسته کننده است
اگر ما می خواستیم که خط به صورت خودمان ایستاد، می توانیم مشخص کنیم که یک پاراگراف با محصور کردن آن در برچسب های پاراگراف است:
<p> گربه من خیلی خسته کننده است </ p>
آناتومی عنصر HTML
بیایید این عنصر پاراگراف را کمی بیشتر بررسی کنیم.
بخش اصلی عنصر ما به شرح زیر است:
تگ باز: این شامل نام عنصر (در این مورد، p) است که در بازه ها و محصوالات زاویه ای بسته می شود. این می گوید که عنصر شروع می شود یا آغاز می شود در این مورد که در آن پاراگراف شروع می شود.
تگ بستن: این همان تگ باز است، به جز اینکه اسلش قبل از نام عنصر وجود دارد. این نشان می دهد که کدام عنصر به پایان می رسد در این مورد که در آن پاراگراف به پایان می رسد. عدم اضافه کردن یک تگ بستن یکی از اشتباهات مبتدی استاندارد است و می تواند منجر به نتایج عجیب و غریب شود.
محتوا: این محتوای عنصر است که در این مورد فقط متن است.
عنصر: تگ باز، تگ بسته و محتوا، عنصر را تشکیل می دهند.
عناصر همچنین می توانند ویژگی هایی داشته باشند که به شرح زیر هستند:
خصوصیات حاوی اطلاعات اضافی در مورد عنصری است که شما نمی خواهید در محتوای واقعی ظاهر شود. در اینجا، کلاس نام اسامی است، و علامت ویرایشگر مقدار مشخصه است. ویژگی کلاس به شما اجازه می دهد عنصر را شناسایی کنید که بعدا می تواند برای عنصر با اطلاعات سبک و سایر موارد مورد استفاده قرار گیرد.
یک ویژگی همیشه باید موارد زیر را داشته باشد:
فضای بین آن و نام عنصر (یا ویژگی قبلی، اگر عنصر قبلا یک یا چند ویژگی داشته باشد).
نام ویژگی، به دنبال علامت برابر است.
مقدار ویژگی، با باز کردن و بستن علامت نقل قول بسته بندی شده است.
نکته: مقادیر مشخصه ساده که فضای خالی ASCII را ندارند (یا هر کدام از کاراکترها '' = =>) می تواند بدون نقلقول باقی بماند، اما توصیه می شود که همه مقادیر صفت را نقل قول کنید، زیرا کد را سازگار تر و قابل فهم تر می کند.
عناصر درج
شما می توانید عناصر را در داخل عناصر دیگر قرار دهید این لاین نامیده می شود. اگر ما می خواستیم بگوییم که گربه ما بسیار خشن است، می توانیم کلمه "very" را در عنصر <strong> قرار دهیم، یعنی این کلمه به شدت تاکید می شود:
<p> گربه من <strong> بسیار </ strong> خجالت آور است </ p>
با این حال باید مطمئن شوید که عناصر شما به درستی در توالت قرار دارند: در مثال بالا، ابتدا عنصر <p> را باز کردیم، سپس عنصر <strong>؛ بنابراین، ما ابتدا ابتدا element <strong> را ببندیم، سپس عنصر <p>. زیر نادرست است:
<p> گربه من <strong> بسیار خشن است </ p> </ strong>
عناصر باید به درستی باز و بسته شوند تا به وضوح داخل یا خارج از یکدیگر باشند. اگر آنها همانطور که در بالا نشان داده شده همپوشانی داشته باشند، مرورگر وب شما سعی خواهد کرد بهترین حدس را در آنچه که می خواهید بگوید، که می تواند منجر به نتایج غیر منتظره شود. پس این کار را نکن!
عناصر خالی بخش
برخی از عناصر دارای محتوای نیستند و عناصر خالی نامیده می شوند. عنصر <img> که قبلا در صفحه HTML ما داشته اید را بیابید:
<img src = "images / firefox-icon.png" alt = "تصویر تست من">
این شامل دو ویژگی است، اما تگ بسته </ img> و محتوای داخلی وجود ندارد. این به این دلیل است که یک عنصر تصویر محتوا را تحت تاثیر قرار نمی دهد. هدف آن این است که یک تصویر را در صفحه HTML در جاییکه به نظر می رسد جاسازی کنید.
آناتومی یک سند HTML
این مبانی عناصر HTML خاص را پیچیده می کند، اما آنها به تنهایی مفید نیستند. در حال حاضر ما در مورد چگونگی ترکیب عناصر فردی برای ایجاد یک صفحه کامل HTML نگاه خواهیم کرد. اجازه دهید دوباره کد ما را به مثال index.html خود (که ما در ابتدا در مقاله مربوط به معاملات فایل ها ملاقات کردیم) بازبینی کنیم:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
<head/>
<body>
<img src="images/firefox-icon.png" alt="My test image">
<body/>
<html/>
تو این بخش
DOCTYPE html> doctype!>. در زمان غیبت زمانی که HTML جوان بود (در حدود 1991/92)، نوع doctypes به عنوان پیوند به مجموعه ای از قوانینی که صفحه HTML باید دنبال کند تا HTML خوب را در نظر بگیرد، می تواند به معنای چک کردن خودکار خطا و دیگر چیزهای مفید با این حال، این روزها هیچ کس در مورد آنها اهمیتی ندارد و آنها فقط یک مصنوعات تاریخی هستند که باید برای آن الزامی باشد
همه چیز برای کار درست است در حال حاضر، این همه چیزی است که شما باید بدانید.
<html> </ html> - عنصر <html>. این عنصر تمام مطالب را در کل صفحه پیچیده می کند و گاهی اوقات به عنوان عنصر ریشه شناخته می شود.
<head> </ head> - عنصر <head>. این عنصر به عنوان یک ظرف برای همه چیزهایی که می خواهید در صفحه HTML فعال کنید، محتوا که شما به نمایشگرهای صفحه خود نشان می دهد، عمل می کند. این شامل چیزهایی مانند کلمات کلیدی و توصیف صفحه ای است که می خواهید در نتایج جستجو نمایش داده شود، CSS برای محتوی محتوای ما، اعلامیه کاراکترها و موارد دیگر.
<meta charset = "utf-8"> - این عنصر شخصیتی را تنظیم می کند که سند شما باید به UTF-8 استفاده کند که شامل اکثر شخصیت ها از اکثریت زبان های نوشته شده است. اساسا، اکنون می توانید هر محتوای متنی را که ممکن است روی آن قرار دهید، مدیریت کنید. هیچ دلیلی برای تنظیم آن وجود ندارد و می تواند بعدها از برخی مشکلات جلوگیری کند.
<title> </ title> - عنصر <title> این مجموعه عنوان صفحه شما است که عنوان در زبانه مرورگر ظاهر می شود که صفحه بارگذاری شده است. همچنین برای توصیف صفحه هنگام نشانه گذاری / مورد علاقه آن استفاده می شود.
<body> </ body> - عنصر <body>. این شامل تمام محتوایی است که می خواهید به کاربران وب هنگام بازدید از صفحه خود، متن، تصاویر، فیلم ها، بازی ها، آهنگ های صوتی قابل پخش، و یا هر چیز دیگری را نشان می دهد.
