کامپیوتر پرسش - آموزش رایگان کامپیوتر

آموزش زبان HTML | قسمت سوم - کامپیوتر پرسش

کانال تلگرام ما ما را از طریق کانال دنبال کنید.
کامپیوتر پرسش: چیزی را که دیروز نمیدانستی امروز یاد بگیر
شنبه 27 بهمن 1397
مبحث آموزش کامپیوتری بعدی
مبحث بعدی آموزش ورد مایکروسافت زمان انتشار: به زودی
تبلیغات اینجا محل تبلیغات شماست اینجا محل تبلیغات شماست
سخت افزار – آموزش مقدماتی کامپیوتر
سخت افزار – آموزش مقدماتی کامپیوتر
Zorin چیست؟
Zorin چیست؟
پورت ها – آموزش مقدماتی کامپیوتر
پورت ها – آموزش مقدماتی کامپیوتر
Zune چیست؟
Zune چیست؟
Zoomed Video چیست؟
Zoomed Video چیست؟
اخطاریه جدید پلیس فتا درمورد اینستاگرام: ارسال کامنت توهین آمیز جرم است!
اخطاریه جدید پلیس فتا درمورد اینستاگرام: ارسال کامنت توهین آمیز جرم است!
ZX81 چیست؟
ZX81 چیست؟
کوتاه کننده لینک

تگهای اصلی HTML - قسمت سوم

تگهای اصلی HTML - قسمت سوم

قسمت سوم آموزش زبان HTML در رسانه کامپیوتر پرسش، در این قسمت به شرح و بررسی تگهای عمومی این زبان میپردازیم که این تگها یا همان برچسبها نقطه ی ابتدایی شروع کار در این زبان میباشد.

 

تگهای عنوان

هر سند با عنوان شروع می شود. شما می توانید برای مقادیر خود از اندازه های مختلف استفاده کنید. HTML دارای شش سطح عنوان است که از عناصر <h1>، <h2>، <h3>، <h4>، <h5> و <h6> استفاده می کند. در هنگام نمایش هر عنوان یا Heading مرورگر یک خط بعد و یک خط قبل از آن اضافه میکند.

مثال:

<DOCTYPE html!>

<html>

 

   <head>

      <title>Heading Example</title>

   <head/>

        

   <body>

      <h1>This is heading 1</h1>

      <h2>This is heading 2</h2>

      <h3>This is heading 3</h3>

      <h4>This is heading 4</h4>

      <h5>This is heading 5</h5>

      <h6>This is heading 6</h6>

   <body/>

        

<html/>

پس از نوشتن این سند نتیجه ای مشابه زیر را مشاهده خواهید کرد:

 

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5
This is heading 6

 

تگ پاراگراف

تگ <p> یک روش برای ساختار متن شما در پاراگرافهای مختلف را ارائه میدهد. هر متن باید بین یک تگ باز <p> و یک تگ بسته </p> قرار گیرد.

مثال:

<DOCTYPE html!>
<html>
 
   <head>
      <title>Paragraph Example</title>
   <head/>
         
   <body>
      <p>Here is a first paragraph of text.</p>
      <p>Here is a second paragraph of text.</p>
      <p>Here is a third paragraph of text.</p>
   <body/>
         
<html/>

با نوشتن دستورات بالا شما نتیجه ای مشابه به زیر را مشاهده خواهید کرد:

Here is a first paragraph of text.

Here is a second paragraph of text.

Here is a third paragraph of text.

 

تگ شکست خط

هرگاه که شما از تگ <br /> استفاده میکنید، هرچیزی که بعد از آن نوشته شود از خط بعد آغاز میشود. این تگ نمونه ای از یک عنصر خالی است که در آن شما نیازی به باز کردن و بستن تگ ها ندارید، زیرا هیچ چیز بین آن قرار نمیگیرد.

 

در نوشتن این برچسب دقّت کنید طرز صحیح نوشتن آن به شکل یک براکت باز (<) سپس حروف br، یک فاصله و در نهایت اسلش (/) و بستن براکت (<) میباشد. اگر شما فاصله را نادیده بگیرید، مرورگرهای قدیمی برای شکستن خط دچار مشکل خواهند شد و اگر از اسلش رو به جلو استفاده نکنید و فقط به شکل <br> بنویسید دیگر در XHTML معتبر نیست.

 

مثال:

<DOCTYPE html!>
<html>
 
   <head>
      <title>Line Break  Example</title>
   <head/>
         
   <body>
      </ p>Hello<br>
         You delivered your assignment ontime.<br
         </ Thanks<br
         <Mahnaz</p
   <body/>
         
<html/>

با نوشتن کدهای بالا نتیجه ای مشابه به زیر خواهید داشت:

Hello
You delivered your assignment on time.
Thanks
Mahnaz

 

محتوا در مرکز

شما می توانید از برچسب <center> برای قرار دادن هر گونه محتوا در مرکز صفحه استفاده کنید.

مثال:

<DOCTYPE html!>
<html>
 
   <head>
      <title>Centring Content Example</title>
   <head/>
         
   <body>
      <p>This text is not in the center.</p>
      
      <center>
         <p>This text is in the center.</p>
      <center/>
   <body/>
         
<html/>

با وارد کردن کدهای بالا نتیجه ای مشابه به زیر را مشاهده خواهید کرد:

This text is not in the center.

This text is in the center.

 

خطوط افقی

خطوط افقی همانطور که از نامش پیداست در قسمتهایی از سند استفاده میشود که بخواهید یک خط افقی مابین محتوای خود ایجاد کنید. با استفاده از تگ <hr> شما یک خط از موقعیت فعلی سند تا حاشیه سمت راست را ایجاد میکنید و بر طبق آن خط را میشکنید.

 

به طور مثال شاید بخواهید دو پاراگراف را با استفاده از یک خط افقی از هم جدا کنید:

<!DOCTYPE html>
<html>
 
   <head>
      <title>Horizontal Line Example</title>
   </head>
         
   <body>
      <p>This is paragraph one and should be on top</p>
      <hr/>
      <p>This is paragraph two and should be at bottom</p>
   </body>
         
</html>

با وارد کردن کدهای بالا نتیجه ای مشابه به زیر را خواهید داشت:

This is paragraph one and should be on top


This is paragraph two and should be at bottom

 

برچسب <hr /> باز هم یک نمونه از عنصر خالی است، جایی که شما نیازی به باز کردن و بستن تگ ها ندارید، زیرا هیچ محتوایی بین آنها وجود ندارد.

 

در نوشتن تگ <hr / > نیز دقّت داشته باشید طریقه نوشتن این تگ مانند تگ <br /> است که در بالا ذکر کردیم.

 

حفظ قالب بندی

گاهی اوقات ممکن است شما بخواهید همان متنی را که مینویسید عینا در سند نمایش داده شود. در این موارد، شما می توانید از پیش برچسب <pre> استفاده کنید.

 

هرمتنی که در بین تگ <pre>....</pre> قرار گیرید عینا همانگونه که نوشته میشود نمایش داده میشود.

مثال:

<!DOCTYPE html>
<html>
 
   <head>
      <title>Preserve Formatting Example</title>
   </head>
         
   <body>
      <pre>
         function testFunction( strText ){
            alert (strText)
         }
      </pre>
   </body>
         
</html>

با وارد کردن کدهای بالا نتیجه ای مشابه به زیر را خواهید دید:

function testFunction( strText ){ 
   alert (strText) 
} 

سعی کنید یک بار همان کد را بدون تگ <pre> امتحان کنید و نتیجه را مشاهده کنید.

 

ایجاد فضا بدون شکستن

فرض کنید شما می خواهید از عبارت "12 Angry Men." استفاده کنید و نمیخواهید مرورگر آنرا به دو خط "12, Angry" و "Men" تقسیم کند.

An example of this technique appears in the movie "12 Angry Men."

در چنین مواردی شما باید از یک فضای بدون شکستن به جای فضای عادی استفاده کنید برای اینکار نیاز به نوشتن &nbsp;خواهید داشت. برای مثال، هنگام کدگذاری "12 Angry Men" در یک پاراگراف، شما باید چیزی شبیه به کد زیر را استفاده کنید:

مثال:

<!DOCTYPE html>
<html>
 
   <head>
      <title>Nonbreaking Spaces Example</title>
   </head>
         
   <body>
      <p>An example of this technique appears in the movie "12&nbsp;Angry&nbsp;Men."</p>
   </body>
         
</html>

 

نتیجه دستورات بالا به شکل زیرخواهد بود:

An example of this technique appears in the movie "12 Angry Men."

 

توجه: اگر آموزشهای قبل را نخوانده اید از پیوندهای زیر استفاده کنید:

ورود به جلسه دوم

ورود به جلسه اوّل

دیدگاه کاربران
    • دیدگاه ارسال شده توسط شما ، پس از تایید توسط مدیران سایت منتشر خواهد شد.
    • دیدگاهی که به غیر از زبان فارسی یا غیر مرتبط با مطلب باشد منتشر نخواهد شد.
نام
ایمیل (منتشر نمی‌شود) (لازم)
وبسایت
:) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B /:) :S
نظر خصوصی
مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
کد امنیتیرفرش کد امنیتی

درخواست آموزش کامپیوتر

آموزش مورد نیاز خود را درخواست کنید.

تبلیغات بنری
محل تبليغ شما
آمار سایت
  • تعداد مطالب 147
  • تعداد دیدگاه ها 560
  • بازدید امروز 143
  • بازدید دیروز 421
  • بازدید کل 44,825
کدهای اختصاصی
    جستجو در این وب:

    Google      Yahoo      MSN
    کد متن افکت دار
تبلیغات متنی
هایپرتمپ

دانلود جدیدترین قالب های روز دنیا

www.hypertemp.ir
دانلود فیلم ایرانی جدید

پلان فیلم دنیای فیلم و سریال

Www.PelanFiLm.Com
تبلیغات متنی شما

محل تبلیغات متنی

computerquestion
تبلیغات متنی شما

محل تبلیغات متنی شما

computerquestion