بدون توضیح اضافه آموزش کار با پاراگراف و استایل در Html را شروع خواهیم کرد. لطفا در ادامه مطلب با ما همراه باشید…
آموزش کار با پاراگراف(Paragraphs) در Html
عنصر <p> پاراگراف را در یک سند HTML تعریف میکند
<span class="token tag"><span class="token punctuation"><</span>p<span class="token punctuation">></span></span>This is a paragraph.<span class="token tag"><span class="token punctuation"></</span>p<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>p<span class="token punctuation">></span></span>This is another paragraph.<span class="token tag"><span class="token punctuation"></</span>p<span class="token punctuation">></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"><</span>p<span class="token punctuation">></span></span>This is<span class="token tag"><span class="token punctuation"><</span>br<span class="token punctuation">></span></span>a paragraph<span class="token tag"><span class="token punctuation"><</span>br<span class="token punctuation">></span></span>with line breaks.<span class="token tag"><span class="token punctuation"></</span>p<span class="token punctuation">></span></span>
تگ <br> یک تگ خالی محسوب میشود یعنی نیازی به تگ پایانی ندارد.
پیش نمایش
نمایش شعر در Html
نمایش شعرگونه در سند HTML محتوا را در خطوط تفکیک شده و به صورت جداجدا نمایش میدهد که در زیر یک نمونه از آن را مشاهده میکنید
<span class="token tag"><span class="token punctuation"><</span>p<span class="token punctuation">></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"></</span>p<span class="token punctuation">></span></span>پیش نمایش
عنصر <pre> در HTML
عنصر <pre> در HTML متنهای از پیش قالببندی شده را تعریف میکند. متنی که داخل عنصر <pre> قرار میگیرد با فونتی با عرض ثابت (معمولا Courier) نمایش داده شده و فضا و شکست خط را حفظ میکند. در زیر یک نمونه از این کد را مشاهده میکنید
<span class="token tag"><span class="token punctuation"><</span>pre<span class="token punctuation">></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"></</span>pre<span class="token punctuation">></span></span>پیش نمایش
آموزش کار با استایل(Style) در Html
مشخص کردن استایل یک عنصر HTML میتواند از طریق خصوصیت style انجام شود که دارای اصول چینش زیر است
<span class="token tag"><span class="token punctuation"><</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">></span></span>
Property یک خصوصیت از CSS و value یک مقدار CSS است. ب. CSS به کدهای شما استایل میده و از نظر گرافیکی خیلی برانامه شما رو زیبا می کنه. فیلم های آموزشی بسیاری برای یادگیری CSS روی سایت موجود هست که میتونید استفاده کنید.
رنگ پشت زمینه در HTML
خصوصیت background-color در واقع رنگ پشت زمینه را برای یک عنصر HTML تعریف میکند. مثال زیر رنگ پشت زمینه صفحه را به آبی تغییر میدهد
<span class="token tag"><span class="token punctuation"><</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">></span></span> <span class="token tag"><span class="token punctuation"><</span>h1<span class="token punctuation">></span></span>This is a heading<span class="token tag"><span class="token punctuation"></</span>h1<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>p<span class="token punctuation">></span></span>This is a paragraph.<span class="token tag"><span class="token punctuation"></</span>p<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"></</span>body<span class="token punctuation">></span></span>پیش نمایش
رنگ متن در HTML
خصوصیت color رنگ متن را برای عنصر HTML تعریف میکند
<span class="token tag"><span class="token punctuation"><</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">></span></span>This is a heading<span class="token tag"><span class="token punctuation"></</span>h1<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</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">></span></span>This is a paragraph.<span class="token tag"><span class="token punctuation"></</span>p<span class="token punctuation">></span></span>پیش نمایش
کار با فونت در HTML
خصوصیت font-family در واقع فونتی که باید در یک عنصر HTML به کار رود را تعریف میکند
<span class="token tag"><span class="token punctuation"><</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">></span></span>This is a heading<span class="token tag"><span class="token punctuation"></</span>h1<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</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">></span></span>This is a paragraph.<span class="token tag"><span class="token punctuation"></</span>p<span class="token punctuation">></span></span>پیش نمایش
اندازه متن در HTML
خصوصیت font-size اندازه متن را برای هر یک از عنصرهای HTML تعریف میکند:
<span class="token tag"><span class="token punctuation"><</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">></span></span>This is a heading<span class="token tag"><span class="token punctuation"></</span>h1<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</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">></span></span>This is a paragraph.<span class="token tag"><span class="token punctuation"></</span>p<span class="token punctuation">></span></span>پیش نمایش
هم ترازی متن در HTML
خصوصیت text-align هم ترازی متن افقی را برای یک عنصر HTML تعریف میکند که در زیر نمونه کد آن را مشاهده میکنید
<span class="token tag"><span class="token punctuation"><</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">></span></span>Centered Heading<span class="token tag"><span class="token punctuation"></</span>h1<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</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">></span></span>Centered paragraph.<span class="token tag"><span class="token punctuation"></</span>p<span class="token punctuation">></span></span>پیش نمایش
امیدواریم این مطلب مورد توجه دوستان قرار گرفته باشد…
لیست جلسات قبل آموزش Html
- آموزش HTML؛ آموزش اصول اولیه و عناصر HTML
- آموزش Html؛ آموزش کار با خصوصیات(Attribute) و عناوین(Heading) در Html
پیشنهاد ویژه ۱ : دانلود کاملترین آموزش تصویری HTML به زبان فارسی
پیشنهاد ویژه ۲ : آموزش کامل Html مهندس رحمانی به زبان فارسی
پیشنهاد ویژه ۳ : دانلود تمامی مجموعه های آموزشی HTML سورس باران
پیشنهاد ویژه ۴ : کتاب آموزش HTML5 و CSS3 در قالب پروژه
پیشنهاد ویژه ۵ : فیلم آموزش Css و Css3 به زبان فارسی جلسه اول
The post آموزش Html؛ آموزش کار با پاراگراف و استایل در Html appeared first on آموزش برنامه نویسی.