آموزش Html؛ آموزش کار با پاراگراف و استایل در Html

بدون توضیح اضافه آموزش کار با پاراگراف و استایل در Html را شروع خواهیم کرد. لطفا در ادامه مطلب با ما همراه باشید…

آموزش کار با پاراگراف(Paragraphs) در Html

عنصر <p> پاراگراف را در یک سند HTML تعریف می‌کند

<span class="token tag"><span class="token punctuation">&lt;</span>p<span class="token punctuation">&gt;</span></span>This is a paragraph.<span class="token tag"><span class="token punctuation">&lt;/</span>p<span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token punctuation">&lt;</span>p<span class="token punctuation">&gt;</span></span>This is another paragraph.<span class="token tag"><span class="token punctuation">&lt;/</span>p<span class="token punctuation">&gt;</span></span>

مرورگرها به صورت خودکار به قبل و بعد از یک پاراگراف کمی فضای سفید اضافه می‌کنند.

پیش نمایش

 

نحوه نمایش HTML

شما نمی توانید از چگونگی نمایش کدهای HTML خود توسط مرورگرها مطمئن باشید. هنگامی که صفحه نمایش بازدید کننده بزرگ یا کوچک باشد و یا پنجره مرورگر در سایز های مختلفی تنظیم شود، شکل نمایش صفحات وب شما تغییر خواهد کرد. با کم و زیاد کردن فضای خالی بین حروف (Space) نمی توانید فاصله بین حروف را در متنی که در کدهای HTML خود می نویسید کم و زیاد کنید. مرورگر تمام فضاهای اضافه ایجاد شده در کد HTML شما را حذف کرده و تنها به یک فضای خالی بین کلمات تبدیل می کند. به هر تعدادی از فضای خالی یا خط خالی بین حروف استفاده کنید، نتیجه یک فضای خالی بین دو کلمه خواهد بود.

<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>

<p>
This paragraph
contains         a lot of spaces
in the source         code,
but the        browser
ignores it.
</p>

پیش نمایش

 

تگ پایانی را فراموش نکنید

بیشتر مرورگرها حتی اگر در هنگام نوشتن کدها تگ پایانی را فراموش کنید باز هم HTML را به درستی نمایش می‌دهند. ولی هرگز تگ پایانی را فراموش نکنید.

<p>This is a paragraph.
<p>This is another paragraph.

مثالی که در بالا آورده شد در بیشتر مرورگرها به درستی کار می‌کند اما بر این اصل تکیه نکنید. فراموش کردن تگ پایانی می‌تواند نتایج پیش‌بینی نشده و یا خطاهایی را به دنبال داشته باشد.

پیش نمایش

 

شکست خط در HTML

عنصر <br> در HTML یک شکست خط را تعریف می‌کند. اگر می‌خواهید بدون ایجاد یک پاراگراف جدید در خط خود شکست ایجاد کرده و به خط بعد بروید از عنصر <br> استفاده کنید:

<span class="token tag"><span class="token punctuation">&lt;</span>p<span class="token punctuation">&gt;</span></span>This is<span class="token tag"><span class="token punctuation">&lt;</span>br<span class="token punctuation">&gt;</span></span>a paragraph<span class="token tag"><span class="token punctuation">&lt;</span>br<span class="token punctuation">&gt;</span></span>with line breaks.<span class="token tag"><span class="token punctuation">&lt;/</span>p<span class="token punctuation">&gt;</span></span>

تگ <br> یک تگ خالی محسوب می‌شود یعنی نیازی به تگ پایانی ندارد.

پیش نمایش

 

نمایش شعر در Html

نمایش شعرگونه در سند HTML محتوا را در خطوط تفکیک شده و به صورت جداجدا نمایش می‌دهد که در زیر یک نمونه از آن را مشاهده می‌کنید

<span class="token tag"><span class="token punctuation">&lt;</span>p<span class="token punctuation">&gt;</span></span>
  My Bonnie lies over the ocean.

  My Bonnie lies over the sea.

  My Bonnie lies over the ocean.

  Oh, bring back my Bonnie to me.
<span class="token tag"><span class="token punctuation">&lt;/</span>p<span class="token punctuation">&gt;</span></span>

پیش نمایش

 

عنصر <pre> در HTML

عنصر <pre> در HTML متن‌های از پیش قالب‌بندی شده را تعریف می‌کند. متنی که داخل عنصر <pre> قرار می‌گیرد با فونتی با عرض ثابت (معمولا Courier) نمایش داده شده و فضا و شکست خط را حفظ می‌کند. در زیر یک نمونه از این کد را مشاهده می‌کنید

<span class="token tag"><span class="token punctuation">&lt;</span>pre<span class="token punctuation">&gt;</span></span>
  My Bonnie lies over the ocean.

  My Bonnie lies over the sea.

  My Bonnie lies over the ocean.

  Oh, bring back my Bonnie to me.
<span class="token tag"><span class="token punctuation">&lt;/</span>pre<span class="token punctuation">&gt;</span></span>

پیش نمایش

 

آموزش کار با استایل(Style) در Html

مشخص کردن استایل یک عنصر HTML می‌تواند از طریق خصوصیت style انجام شود که دارای اصول چینش زیر است

<span class="token tag"><span class="token punctuation">&lt;</span>tagname<span class="token style-attr language-css"><span class="token attr-name"> style</span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">property</span><span class="token punctuation">:</span>value<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>

Property یک خصوصیت از CSS و value یک مقدار CSS است. ب. CSS به کدهای شما استایل میده و از نظر گرافیکی خیلی برانامه شما رو زیبا می کنه. فیلم های آموزشی بسیاری برای یادگیری CSS روی سایت موجود هست که میتونید استفاده کنید.

 

رنگ پشت زمینه در HTML

خصوصیت background-color در واقع رنگ پشت زمینه را برای یک عنصر HTML تعریف می‌کند. مثال زیر رنگ پشت زمینه صفحه را به آبی تغییر می‌دهد

<span class="token tag"><span class="token punctuation">&lt;</span>body<span class="token style-attr language-css"><span class="token attr-name"> style</span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">background-color</span><span class="token punctuation">:</span>powderblue<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token punctuation">&lt;</span>h1<span class="token punctuation">&gt;</span></span>This is a heading<span class="token tag"><span class="token punctuation">&lt;/</span>h1<span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token punctuation">&lt;</span>p<span class="token punctuation">&gt;</span></span>This is a paragraph.<span class="token tag"><span class="token punctuation">&lt;/</span>p<span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token punctuation">&lt;/</span>body<span class="token punctuation">&gt;</span></span>

پیش نمایش

 

رنگ متن در HTML

خصوصیت color رنگ متن را برای عنصر HTML تعریف می‌کند

<span class="token tag"><span class="token punctuation">&lt;</span>h1<span class="token style-attr language-css"><span class="token attr-name"> style</span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">color</span><span class="token punctuation">:</span>blue<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>This is a heading<span class="token tag"><span class="token punctuation">&lt;/</span>h1<span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token punctuation">&lt;</span>p<span class="token style-attr language-css"><span class="token attr-name"> style</span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">color</span><span class="token punctuation">:</span>red<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>This is a paragraph.<span class="token tag"><span class="token punctuation">&lt;/</span>p<span class="token punctuation">&gt;</span></span>

پیش نمایش

 

کار با فونت در HTML

خصوصیت font-family در واقع فونتی که باید در یک عنصر HTML به کار رود را تعریف می‌کند

<span class="token tag"><span class="token punctuation">&lt;</span>h1<span class="token style-attr language-css"><span class="token attr-name"> style</span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">font-family</span><span class="token punctuation">:</span>verdana<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>This is a heading<span class="token tag"><span class="token punctuation">&lt;/</span>h1<span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token punctuation">&lt;</span>p<span class="token style-attr language-css"><span class="token attr-name"> style</span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">font-family</span><span class="token punctuation">:</span>courier<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>This is a paragraph.<span class="token tag"><span class="token punctuation">&lt;/</span>p<span class="token punctuation">&gt;</span></span>

پیش نمایش

 

اندازه متن در HTML

خصوصیت font-size اندازه متن را برای هر یک از عنصرهای HTML تعریف می‌کند:

<span class="token tag"><span class="token punctuation">&lt;</span>h1<span class="token style-attr language-css"><span class="token attr-name"> style</span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">font-size</span><span class="token punctuation">:</span>300%<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>This is a heading<span class="token tag"><span class="token punctuation">&lt;/</span>h1<span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token punctuation">&lt;</span>p<span class="token style-attr language-css"><span class="token attr-name"> style</span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">font-size</span><span class="token punctuation">:</span>160%<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>This is a paragraph.<span class="token tag"><span class="token punctuation">&lt;/</span>p<span class="token punctuation">&gt;</span></span>

پیش نمایش

 

هم ترازی متن در HTML

خصوصیت text-align هم ترازی متن افقی را برای یک عنصر HTML تعریف می‌کند که در زیر نمونه کد آن را مشاهده می‌کنید

<span class="token tag"><span class="token punctuation">&lt;</span>h1<span class="token style-attr language-css"><span class="token attr-name"> style</span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">text-align</span><span class="token punctuation">:</span>center<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Centered Heading<span class="token tag"><span class="token punctuation">&lt;/</span>h1<span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token punctuation">&lt;</span>p<span class="token style-attr language-css"><span class="token attr-name"> style</span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">text-align</span><span class="token punctuation">:</span>center<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Centered paragraph.<span class="token tag"><span class="token punctuation">&lt;/</span>p<span class="token punctuation">&gt;</span></span>

پیش نمایش

امیدواریم این مطلب مورد توجه دوستان قرار گرفته باشد…

 

لیست جلسات قبل آموزش Html

1. آموزش HTML؛ آموزش اصول اولیه و عناصر HTML
2. آموزش Html؛ آموزش کار با خصوصیات(Attribute) و عناوین(Heading) در Html

 

پیشنهاد ویژه ۱ : دانلود کاملترین آموزش تصویری HTML به زبان فارسی

پیشنهاد ویژه ۲ : آموزش کامل Html مهندس رحمانی به زبان فارسی

پیشنهاد ویژه ۳ : دانلود تمامی مجموعه های آموزشی HTML سورس باران

پیشنهاد ویژه ۴ : کتاب آموزش HTML5 و CSS3 در قالب پروژه

پیشنهاد ویژه ۵ : فیلم آموزش Css و Css3 به زبان فارسی جلسه اول

The post آموزش Html؛ آموزش کار با پاراگراف و استایل در Html appeared first on آموزش برنامه نویسی.