پاراگراف در HTML
یادگیری HTMLعنصر <p> در HTML پاراگراف را تعيين مي كند.
مثال :
<p>This is a paragraph.</p>
<p>This is another paragraph.</p> مشاهده مثالنكته ! مرورگرها بطور خودكار ،مقداري فضاي خالي (margin) به قبل و بعد پاراگراف اضافه مي كنند.
نمايش HTML
نمي توان مطمئن بود كه 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> مشاهده مثالتگ پايان را فراموش نكنيد
حتي اگر تگ پايان را فراموش كنيد ، بسياري از مرورگر ها سند را به درستي نمايش خواهند داد :
مثال :
<p>This is a paragraph.
<p>This is another paragraph. مشاهده مثالمثال بالا در بسياري از مرورگر ها درست كار خواهد كرد. اما فقط به اين نكته اتكا نكنيد.
نكته ! ننوشتن تگ پايان مي تواند موجب ايجاد نتايج يا خطاهاي غير منتظره شود.
سطر فاصله در HTML
عنصر <br> يك سطر فاصله را تعيين مي كند. براي ايجاد يك سطر جديد بدون اينكه پاراگراف جديدي شروع كنيم ،از اين تگ استفاده مي كنيم :
<p>This is<br>a paragraph<br>with line breaks.</p> مشاهده مثالتگ <br> يك تگ تهي است ،پس تگ پايان ندارد.
مشكل اشعار
مصراع هاي شعر زير كلا و بطور متوالي در يك سطر نمايش داده خواهد شد :
<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> در فونتي با عرض ثابت نمايش داده مي شود (معمولا فونت "courier" ) و فاصله و سطر خالي هاي ايجاد شده صرفا توسط كليد اينتر را نيز نگه مي دارد.
مثال :
<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> مشاهده مثال
یادگیری HTML
- مقدمه ای بر CSS
- ترکیب کدهای CSS
- CSS چگونه کار میکند؟
- رنگ ها در CSS
- پس زمينه در CSS
- خط حاشيه ( border ) در CSS
- margin (حاشیه) در CSS
- صفت padding در CSS
- عرض و ارتفاع در CSS
- مدل جعبه ای CSS
- outline در CSS
- متن در CSS
- فونت ها در CSS
- آیکون ها در CSS
- لینک ها در CSS
- لیست ها در CSS
- جدول در CSS
- نمايش در قالب بندی CSS
- حداكثر عرض در CSS
- صفت position در CSS
- صفت overflow در CSS
- صفت float در CSS
- بلوک اینلاین در CSS
- تراز بندی در CSS
- combinator در CSS
- Pseudo-classes در CSS
- Pseudo-Elements در CSS
- تاری و شفافیت در CSS
- منو ناوبری در CSS
- کرکره ها در CSS
- ابزار راهنما (tooltip) در CSS
- گالری تصاویر در CSS
- اسپرایت تصویر در CSS
- سلکتور های صفات در CSS
- فرم ها در CSS
- شمارشگر ها در CSS
- معرفی CSS3
- گوشه های گرد در CSS3
- حاشیه های تصویری در CSS3
- پس زمینه در CSS3
- رنگ ها در CSS3
- گرادیانت در CSS3
- سایه در CSS3
- متن در CSS3
- فونت ها در CSS3
- ترنسفرم های دوبعدی در CSS3
- ترنسفرم های سه بعدی CSS3
- انتقال در CSS
- انیمیشن در CSS
- Tooltip در CSS
- استایل تصویر در CSS
- ویژگی object-fit در CSS
- دکمه ها در CSS
- صفحه بندی در CSS
- چندستونی در CSS
- رابط کاربری CSS
- متغیرهای CSS
- اندازه جعبه (Box) در CSS
- Flexbox در CSS
- کوئری Media در CSS
- مثال کوئری Media در CSS
- طراحی ریسپانسیو وب – مقدمه
- طراحی ریسپانسیو وب – viewport
- طراحی ریسپانسیو وب – Grid-View
- طراحی ریسپانسیو وب – کوئری Media
- طراحی ریسپانسیو وب – تصاویر
- طراحی ریسپانسیو وب – ویدیو
- طراحی ریسپانسیو وب – چارچوب (Frameworks)
- چیدمان شبکه ای در CSS
- Container شبکه(Grid) در CSS
- Item های گرید در CSS
مقالات و دروس
-
53
یادگیری HTML
-
71
یادگیری CSS
-
87
یادگیری JavaScript
-
28
یادگیری jQuery
-
59
یادگیری SEO
-
32
مفاهیم طراحی وب
-
12
مفاهیم برنامه نویسی
-
19
معرفی ابزار و نرم افزار
-
5
یادگیری UML
-
16
یادگیری AngularJS
-
35
یادگیری SQL
-
28
یادگیری Bootstrap
-
14
یادگیری XML
-
11
یادگیری JSON
-
2
یادگیری نقشه گوگل
-
1
چطور میتونم ؟
-
1
آموزش کاربردی Asp.net Core
-
2
آموزش Ajax
-
0
آموزش Font Awesome 5
عضویت در خبرنامه شرکت نرم افزاری وب مهراز
برای اطلاع از بسته ها ، تخفیف های استثنایی و تازه های ما به خبرنامه وب مهراز بپیوندید.
نظر شما
>