سلام بچه ها! همه خوبن؟
این پست برای مبتدیانی است که در درک چیستی HTML و CSS مشکل دارند. اما آیا واقعا می توان این موضوع را در 10 دقیقه فهمید؟ این پاسخ …
این HTML است
چیست؟
زبان نشانه گذاری HyperText، در پرتغالی برزیل، یک زبان نشانه گذاری است که برای تعریف ساختار محتوا استفاده می شود، HTML استانداردی برای ساختار یک وب سایت است و دارای نحو و معنایی است.
محتوای یک سند HTML از انواع مختلفی از عناصر تشکیل شده است، بنابراین یک پاراگراف، یک تصویر یا یک جدول یک عنصر در HTML است.
یک عنصر HTML
برای درج یک عنصر در سند HTML، یک تگ (نشانه گذاری) نیاز است، این برچسب یک باز دارد، اما همیشه بسته شدن ندارد، علاوه بر این، هر تگ در HTML یک نام دارد، چیز دیگری که در عنصر مورد نیاز است. محتوای آن (تصویر، متن، ویدئو، صدا و غیره) است.
ساختار تگ افتتاحیه به صورت زیر است:
- علامت کمتر از (<)
- نام تگ
- بزرگتر از علامت (>)
- سابق.
<h1>
ساختار تگ بسته به این صورت است:
- علامت کمتر از (<)
- بارا (/)
- نام تگ
- بزرگتر از علامت (>)
- سابق.
</h1>
ساختار یک عنصر عنوان:
نحو یک سند html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Olá Mundo!</title>
</head>
<body>
<h1> Olá Mundo! </h1>
<p> Esse é um parágrafo. </p>
</body>
</html>
صبح. شما هستید DOCTYPE عبارتی است که به مرورگر می گوید که سند چگونه باید رفتار کند.
ب. عنصر html عنصری است که تمام محتوای صفحه را احاطه کرده است، می توان آن را به عنوان عنصر ریشه شناخته شد.
w عنصر سر این عنصری است که تمام محتوای مهم صفحه HTML را احاطه می کند، اما به کاربر و قابلیت مشاهده آن مربوط نمی شود.
- عنصر متا هر گونه اطلاعات فراداده ای را که توسط عنصر دیگری قابل تعریف نباشد، تعریف می کند.
- o مجموعه شخصیت رمزگذاری کاراکتر مورد استفاده در صفحه را تعریف می کند، در این مورد UTF-8.
- عنصر عنوان عنوان سند نشان داده شده در برگه صفحه مرورگر را مشخص می کند.
د عنصر بدن این عنصری است که تمام محتوای صفحه را در بر می گیرد و این عنصر برای کاربر قابل مشاهده است.
- عنصر h1 عنوان اصلی را در صفحه تعریف می کند، عناصر عنوان از h1 تا h6 وجود دارد، آنها به صورت سلسله مراتبی مانند فصل ها و زیرفصل های یک کتاب عمل می کنند.
- عنصر پ یک پاراگراف را در سند HTML تعریف می کند.
ویژگی های
یک عنصر در بدنه می‌تواند دارای ویژگی‌هایی مانند ویژگی کلاس یا id (شناسه) باشد. ویژگی class در CSS و JavaScript برای انتخاب عنصر و استایل یا تغییر آن از طریق توابع یا DOM استفاده می شود.
سابق 1.
<h1 class="title"> Olá Mundo! </h1>
سابق 2.
<div id="containerTitle">
<h1 class="title"> Olá Mundo! </h1>
</div>
برای کسب اطلاعات بیشتر در مورد عناصر و ویژگی های HTML، اینجا را کلیک کنید.
O CSS
چیست؟
CSS (Cascading Style Sheets) یک زبان سبک است که برای توصیف ارائه یک سند نوشته شده در HTML یا XML استفاده می شود. طبق برخی قوانین تعریف شده است.
نحو
. قانون با انتخابگر باز می شود.
- انتخابگر می تواند: نام یک تگ، یک کلاس یا یک شناسه باشد
- برچسب: h1;
- کلاس: .title;
- شناسه: #containerTitle.
ب. سپس مهاربندهای باز ( { );
w ویژگی برای تغییر، یک دونقطه (:)، مقدار، و یک نقطه ویرگول (;)
د در نهایت، مهاربند بسته شدن ( } );
نتیجه به شرح زیر است:
سابق 1.
h1{
color: purple;
}
سابق 2.
.title{
color: green;
}
سابق 3.
#containerTitle{
background-color: #dfdfdf;
}
درج فرم های غیر HTML
3 راه ساده برای استفاده از CSS در HTML وجود دارد
1a
این مورد اول مستقیماً با استفاده از ویژگی style وارد عنصر می شود:
سابق.
<h1 style="font-size: 30px;">Olá Mundo!</h1>
توجه داشته باشید که درج ویژگی و مقدار مطابق با الگوی ذکر شده در قسمت قبل است (property:value;)
2a
راه دوم برای استایل دادن به یک سند HTML استفاده از عنصر style در داخل عنصر head است:
<style>
p{
color:darkblue;
font-size: 15px;
}
</style>
همانطور که ما یک ویژگی style در داخل یک تگ داریم، عنصر style را نیز برای استایل داریم، این دومی از الگوی نحوی که در بخش قبل ذکر شد پیروی می کند:
- انتخابگر
- باز کردن کلید
- خاصیت: ارزش;
- قفل کلیدها
3a
این سومین راه برای کار با CSS مناسب ترین است. متشکل از:
- یک سند css ایجاد کنید و انتخابگرها و تغییرات مورد نظر را اضافه کنید: مثال.
.title{
color: green;
}
p{
color:darkblue;
font-size: 15px;
}
- این سند .css را در html. با عنصر پیوند فراخوانی کنید:
<link rel="stylesheet" href="https://dev.to/devs-jequie/css/styles.css">
. پیوند عنصری است که برای پیوند، ایجاد پیوند با سند یا فایل دیگری که در سند HTML نیست استفاده می شود.
ب. ویژگی rel رابطه بین آنچه وارد می شود و سند جاری را تعریف می کند. در این مورد، این یک رابطه استایل است.
ویژگی href مسیری را که برای واردات باید دنبال شود را مشخص می کند. در این حالت سند .css در پوشه css قرار دارد.
برای کسب اطلاعات بیشتر در مورد استایل، اینجا را کلیک کنید.
بنابراین، آیا می توانید در 10 دقیقه یاد بگیرید؟
بستگی به سطح انتزاع شما دارد، اگر نوشته من منسجم و منسجم بود، اگر مجبور بودم آن را بیش از یک بار بخوانم.
یادگیری در 10 دقیقه اتفاق نمی افتد، حتی در یک ماه. توصیه اینجاست: برای یادگیری نیاز به ثبات دارید، هر روز تمرین کنید، خود را به چالش بکشید، زیرا دانشی که به کار نرود فایده ای ندارد. گم می شود، فراموش می کند.
این محتوایی که در اینجا ارائه می شود کمی از دنیای زبان ها و سبک های نشانه گذاری است. خیلی بیشتر هم هست.
کنجکاو باشید، تحقیق کنید و اعمال کنید.
ارزش اینجا بودن را داشت
بعدی!
