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

0 دیدگاه

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

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

عنصر پاراگراف را در یک سند 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>

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

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

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

پیش نمایش

نحوه نمایش 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>

This paragraph

contains a lot of lines

in the source code,

but the browser

ignores it.

This paragraph

contains a lot of spaces

in the source code,

but the browser

ignores it.

پیش نمایش

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

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

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

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

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

پیش نمایش

شکست خط در HTML

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

<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>

<p>This is<br>a paragraph<br>with line breaks.</p>

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

پیش نمایش

نمایش شعر در 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>

<p>

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.

</p>

پیش نمایش

عنصر <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>

<pre>

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.

</pre>

پیش نمایش

آموزش کار با استایل(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>

<h1>This is a heading</h1>

</body>

پیش نمایش

رنگ متن در 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>

<h1 style="color:blue;">This is a heading</h1>

<p style="color:red;">This is a paragraph.</p>

پیش نمایش

کار با فونت در 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>

<h1 style="font-family:verdana;">This is a heading</h1>

<p style="font-family:courier;">This is a paragraph.</p>

پیش نمایش

اندازه متن در 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>

<h1 style="font-size:300%;">This is a heading</h1>

<p style="font-size:160%;">This is a paragraph.</p>

پیش نمایش

هم ترازی متن در 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>

<h1 style="text-align:center;">Centered Heading</h1>

<p style="text-align:center;">Centered paragraph.</p>

پیش نمایش

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

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

آموزش اصول اولیه و عناصر HTML

آموزش کار با خصوصیات(Attribute) و عناوین(Heading) در Html

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

آموزش کار با قالب بندی متن در Html

آموزش کار با کامنت در HTML

آموزش کار با کامنت در HTML

آموزش کار با رنگ ها در HTML

آموزش کار با تصاویر در HTML

آموزش کار با لینک در HTML

آموزش کار با جدول در HTML

آموزش کار با لیست ها در HTML

آموزش کار با عناصر Block و Inline در HTML

آموزش کار با عنصر Class در HTML

آموزش Html؛ آموزش iframe در HTML

آموزش Html؛ آموزش جاوا اسکریپت در HTML

آموزش کار با عنصر Head در HTML

آموزش Layout در HTML

آموزش طراحی سایت ریسپانسیو در HTML

آموزش عناصر کد کامپیوتر در HTML

آموزش موجودیت (Entities) در HTML

آموزش نمادها (Symbols) در HTML

آموزش کار با Character (کاراکترهای رزرو شده) در HTML

آموزش رمزگذاری URL در HTML

آموزش کامل کار با فرم ها در HTML

آموزش انواع ورودی (Input) در HTML

آموزش خصوصیات ورودی در HTML

حتما بخوانید 1 : فیلم آموزش رایگان Html مهندس رحمانی

حتما بخوانید 1 : فیلم آموزش رایگان CSS مهندس رحمانی

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

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

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

5/5 - (1 امتیاز)

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.

نظرات

برچسب ها: html, آموزش اچ تی ام ال, آموزش رایگان html, اچ تی ام ال, عنصر در HTML

صابر بوستانی

داستان من با دنیای برنامه‌ نویسی آغاز شد، و در ادامه به عنوان یک توسعه‌ دهنده نرم‌ افزار، طراح وب سایت و متخصص سئو، مهارت ‌های تکنیکی و تحلیلی خودم رو پرورش دادم. علاقه م به دنیای مالی منو به سمت یادگیری ترید و معامله‌گری سوق داد. و در حال حاضر در برنامه نویسی و معامله گری ارز دیجیتال انجام میدم. از سال 96 سعی کردم معامله گری در کریپتو رو یاد بگیرم. ترید و معامله گری برام پر از چالش و شکست‌ های متعدد بود. اما هر شکست، درسی ارزشمند برام داشت و من رو به یک تریدر و معامله گر قوی‌ تر و هوشمندتر تبدیل کرد. با پشتکار و یادگیری مداوم، تونستم به موفقیت‌های قابل توجهی دست یابم و به معامله گری موفق تبدیل بشم. در اینجا بزرگترین تجربیات و مهمترین دانش خودم رو در اختیار شما قرار میدم تا در مدت زمان کوتاه تر و شکست های کمتر در این مسیر به موفقیت برسید.

پکیج جامع و پروژه محور ASP.NET MVC + طراحی فروشگاه اینترنتی فروش فایل

منبع : سورس باران
رمز فايل : www.sourcebaran.com
انتشار: ۱۹ آبان ۱۳۹۷

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

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

نحوه نمایش HTML

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

شکست خط در HTML

نمایش شعر در Html

عنصر <pre> در HTML

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

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

رنگ متن در HTML

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

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

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

صابر بوستانی

دسته بندی موضوعات

آخرین محصولات فروشگاه

نظرات

بازخوردهای خود را برای ما ارسال کنید

لغو پاسخ

مطالب مرتبط