همان طور که در بخش قبلی آموزش مقدماتی html گفتیم هرچه که در تگ body بنویسیم در صفحه وب به ما نشان میدهد. پس بهتر است برای نوشتن مطلب و راعایت چینش متن در سایت از تگ ها استفاده کنیم. اکثر تگ های html یکسری attribute (ویژگی) هایی دارند که میتوانیم با استفاده از آنها تنظیماتی را اعمال کنیم.
برای اعمال این ویژگیها از style استنفاده میکنیم. بطور کلی style مجموعه ای از attribute هاست. و برای آشنایی بیشتر با این attributeها در بخش CSS به آن رجوع مخواهیم کرد.
در این بخش تعدادی از تگ هارا به شما معرفی خواهیم کرد.
direction : نحوه چیدمان پاراگراف ها و آیتم ها در تگ body را تعیین میکند. و دو مقدار را می پذیرد.
ltr ( left to right ) : چپ به راست و rtl ( right to left ) : راست به چپ
بعنوان مثال اگر بخواهیم یک صفحه فارسی بسازیم به آن direction : rtl میدهیم و اگر صفحه انگلیسی باشد به آن direction : ltr را میدهیم. (مثلا اگر بخواهیم در فارسی از علائم ؟ و ! و… استفاده کنیم چون ltr است چینش آن به هم میخورد و این علائم بجای اینکه در آخر جمله قرار بگیرد در اول میرود.)
بهتر است این استایل را همان اول به تگ body بدهیم تا این استایل بر روی کلیه ی آیتم ها اعمال شود.
در این مطلب می خوانیم:
تگ <p>
برای ایجاد و نوشتن یک پاراگراف از این تگ استفاده میکنیم. دراینجا یک سری attribute هایی که میتوان به تگ <p> استایل دهی کرد را معرفی میکنیم.
font-size :میتوان با آن به نوشته ی خود سایز دلخواهی داد که واحدهای آ« میتواند pt ، px و… باشد.
color : یک واحد جزئی است و از آن برای تعیین رننگ نوشته و آیتم استفاده میشود.
background-color : رنگ زمینه را تغییر میدهد.
نکته ای که در اینجا وجود دارد ؛ هرچقدر که متن ما کم باشد بازهم 100 درصد تگی رو که درآن قرار دارد را میگیرد. پس میتوانیم برای آن عرض تعیین کنیم.
width : با این ویژگی میتوان عرض تعیین کرد . که هم میتواند واحد px بگیرد و هم درصدی . وقتی به آن درصدی بدهیم یعنی چه مقدار از صددرصد (کل صفحه) را این تگ شامل میششود.
height : همانند عرض عمل میکنیم و به آن ارتفاع میدهیم.
text-align : چینش متن را تعیین میکند. پیش فرض آن left است و ما میتوانیم با دادن مقدار right به آن ،آنرا راست چین کنیم. و یا center بدهیم و آنرا وست چین کنیم.
font-weight : وزن فونت شمارا را تعیین میکند. اعدادی مثل 100-200 تا900 را پذیراست و یا اینکه میتوانیم به آن مقدار های bold – bolder را بدهیم.
درواقع { 400 میشه normal } ، { 700 میشه bold } ، { 900 میشه bolder }
background-image : به پاراگراف یا تگ یک بکگراند تصویری میدهد. به این صورت
background-image : url( ‘ name or address ‘ )
در قسمت name or address نام تصویر موردنظر یا آدرسش را مینویسیم . باید توجه داشته باشیم که به همان اندازه که عرض و ارتفاع میدهیم تصویر همان اندازه نمایش داده میشود.
باقی استایل هارا در بخش CSS به آن اشاره خواهیم کرد.
تگ های heading
<h6> ، <h5> ، <h4> ، <h3> ، <h2> ، <h1>
بخواهیم عنوان یا تیتری را برای پاراگراف خود درنظر بگیریم در تگ body از تگ های heading استفاده میکنیم. ما 6 تگ heading داریم که بزرگترین سایز آن <h1> و کوچکترین سایز آن <h6> است.
به لحاظ منطقی نباید بیشتر از یک تگ <h1> قرار بدهیم و همچنین برای سئو سایت تگ <h1> بسیار مهم است و همین طور تاثیرگذار.
تگ <h2> زیرمجموعه ای از تگ <h1> است.
تگ <span>
همانند تگ <p> میتوان در آن متن قرار داد. مثلا برای تغییر استایل کلمه یا عبارتی یا قسمتی از متنی ، عبارت را داخل این تگ قرار داد و به آن استایل دیگری داد.
آموزش مقدماتی html
موجودیت های HTML
اگر به پاراگراف مثال قبل دقت کنید میبینید که درتگ body ادیتور بین کلمات متن یکسری فاصله و enter وجود دارد که در خروجی اعمال نشده است.
در html این موارد مورد پذیرش نیست یعنی هرچقدر space یا enter را در تگ های html ادیتور خود قرار دهیم در خروجی اعمال نمیشود.
پس برای اعمال این فاصله ها در عبارات هر تعداد که میخواهیم space بگذاریم بجای آن از nbsp& استفاده میکنیم
و اگر بخواهیم عبارت را به خط بعد منتقل کنیم از تگ <br> یعنی break استفاده میکنیم و هر تعداد <br> بزنیم به همان تعداد پایین میرود.
برای ادامه آموزش مقدماتی تگ های html با ما همراه باشید.
——- ما را در اینستاگرام دنبال کنید. ——-
