آموزش گام به گام HTML : قسمت دوم

• هنگامی که متنی را در HTML می نويسيد هرگز نمی توانيد مطمئن باشيد که متن شما در مرورگرهای ديگر چگونه ديده خواهد شد. چون بعضی از صفحه نمايشها کوچک و بعضی بزرگ هستند. ضمنا متن شما هرگاه که کاربر اندازه پنجره خود را تغيير می دهد، شکل جديدی به خود می گيرد. پس هرگز سعی نکنيد که متن خود را با اضافه کردن خط خالی و يا فاصله بين حروف مرتب کنيد.
پنجشنبه، 29 بهمن 1388
تخمین زمان مطالعه:
موارد بیشتر برای شما
آموزش گام به گام   HTML : قسمت دوم
آموزش گام به گام  HTML (2)
آموزش گام به گام HTML : قسمت دوم






برچسب های اساسی HTML

عنوانها

عنوانها توسط برچسب <h1> تا <h6> ايجاد می شوند که <h1> بزرگترين عنوان و <h6> کوچکترين عنوان را ايجاد می کند. HTML به طور خودکار يک خط خالی قبل و بعد از عنوان اضافه می کند. به مثال زير توجه کنيد.

آموزش گام به گام   HTML : قسمت دوم

پاراگراف

پاراگرافها توسط برچسب <p> ايجاد می شوند؛ و همانند عنوانهای HTML به طور خودکار يک خط خالی قبل و بعد از عنوان اضافه می کند.

آموزش گام به گام   HTML : قسمت دوم

شکست خطوط

برچسب <br> هنگامی استفاده می شود که شما می خواهيد يک خط را پايان دهيد و ادامه متن به خط بعدی برود ولی پاراگراف جديدی را شروع نکنيد. برچسب <br> يک برچسب خالی می باشد و بر چسب انتهايی ندارد.

آموزش گام به گام   HTML : قسمت دوم

توضيحات در HTML

برچسب توضيحات برای قرار دادن توضيحاتی در فايل HTML استفاده می شود؛ و مرورگر آنها را ناديده می گيرد <!-- This is a comment -->) (و در خروجی نمايش نمی دهد. شما توسط اين برچسب می توانيد فايل HTML خود را تشريح کنيد و هنگامی که می خواهيد آن را ويرايش نماييد به شما کمک خواهد کرد تا سردرگم نشويد، اين مسئله خصوصا در فايلهای HTML بزرگ صادق است.

آموزش گام به گام   HTML : قسمت دوم

برچسب خط افقی

برای جدا کردن قسمتهايی از متن می توانيد از بر چسب <hr> استفاده کنيد. برای درک مطلب، بهتر است مثال زير را ببينيد.

آموزش گام به گام   HTML : قسمت دوم

چند نکته مفيد :

• هنگامی که متنی را در HTML می نويسيد هرگز نمی توانيد مطمئن باشيد که متن شما در مرورگرهای ديگر چگونه ديده خواهد شد. چون بعضی از صفحه نمايشها کوچک و بعضی بزرگ هستند. ضمنا متن شما هرگاه که کاربر اندازه پنجره خود را تغيير می دهد، شکل جديدی به خود می گيرد. پس هرگز سعی نکنيد که متن خود را با اضافه کردن خط خالی و يا فاصله بين حروف مرتب کنيد.
• درHTML هر تعداد فاصله که درکنار هم استفاده کرده ايد به عنوان يکی حساب می شود. پس از استفاده کردن فاصله های اضافی در کنار هم خودداری کنيد، چون فقط اندازه فايل HTML خود را زياد می کنيد.
• هرگز از پاراگراف(<p>) خالی برای قرار دادن فاصله بين خطوط استفاده نکيد و به جای آن از <br> استفاده کنيد، در ضمن از <br> برای ساختن فهرست استفاده نکنيد؛ کمی صبر کنيد تا طرز ساختن فهرست ها را در HTML فرا بگيريد.

جدول برچسب های اساسی و کاربرد آنها

برچسب ابتدايی

کاربرد

<html>

يک فايل HTMLرا ايجاد می کند.

<body>

بدنه فايل HTMLرا ايجاد می کند.

<h1>-<h6>

عنوان با اندازه يک تا شش را ايجاد می کند.

<p>

يک پاراگراف را ايجاد می کند.

<br>

يک شکست در يک خط قرار می دهد.

<hr>

يک خط افقی در متن قرار می دهد.

<!-->

توضيحاتی به فايل HTMLاضافه می کند.

HTML برچسبهای متعددی برای قالببندی متن در نظر گرفته است که در جداول زير کاربرد هر يک ذکر شده است و برای درک بهتر کاربرد هر يک از برچسب ها، مثالهای متعددی آورده شده است.

جدول برچسب های قالببندی متن

برچسب ابتدايی

کاربرد

<b>

يک متن با حروف پررنگ را ايجاد می کند.

<big>

يک متن با حروف بزرگتراز اندازه پيش فرض را ايجاد می کند.

<em>

يک متن با حروف ايتاليک را ايجاد می کند.

<i>

يک متن با حروف ايتاليک را ايجاد می کند.

<small>

يک متن با حروف کوچکتراز اندازه پيش فرض را ايجاد می کند.

<strong>

يک متن با حروف پررنگ را ايجاد می کند.

<sub>

يک متن زيرنويس را ايجاد می کند.

<sup>

يک متن بالانويس را ايجاد می کند.

<ins>

يک متن زيرخطدار را ايجاد می کند.

<del>

يک متن با خطی بر روی آن را ايجاد می کند.

جدول برچسب های اطلاعات خروجی رايانه

برچسب ابتدايی

کاربرد

<code>

يک متن که شامل کدهای رايانه ايست را ايجاد می کند.

<kbd>

يک متن که شامل حروف صفحه کليد است را ايجاد می کند.

<samp>

يک متن که شامل مثال هايی ازکدهای رايانه ايست را ايجاد می کند.

<tt>

يک متن که شامل حروف ماشين تحرير است را ايجاد می کند.

<var>

يک متن که شامل متغيرهای رايانه ايست را ايجاد می کند.

<pre>

يک متن با قالببندی از پيش تعيين شده را ايجاد می کند.


جدول برچسب های نقل قول، اختصار، تعريف

برچسب ابتدايی

کاربرد

<abbr>

يک کلمه اختصاری را ايجاد می کند.

<acronym>

يک کلمه متشکل از حروف اول چند کلمه را ايجاد می کند.

<address>

يک عنصر آدرس را ايجاد می کند.

<bdo>

جهت متن را تعيين می کند.

<blockquote>

يک نقل قول طولانی را ايجاد می کند.

<q>

يک نقل قول کوتاه را ايجاد می کند.

<cite>

يک نقل قول را ايجاد می کند.

<dfn>

يک متن توصيفی را ايجاد می کند.

مثال زير به شما نشان می دهد که چگونه می توانيد يک متن را در يک فايل HTML قالب بندی کنيد.

آموزش گام به گام   HTML : قسمت دوم

• مثال زير به شما نشان می دهد که چگونه می توانيد يک متن خط خورده و يک متن زير خط دار را در يک فايل HTML قالب بندی کنيد.

آموزش گام به گام   HTML : قسمت دوم

• مثال زير نشان می دهد که برچسبهای مختلف خروجی رايانه چگونه نمايش داده می شوند.

آموزش گام به گام   HTML : قسمت دوم

• مثال زير نشان می دهد که چگونه می توان فاصله ها و شکست خطوط را با برچسب <pre> از قبل تنظيم کرد.

آموزش گام به گام   HTML : قسمت دوم

• از دو برچسب استفاده شده در مثال زير هنگامی استفاده می شود که بخواهيم کلمه ای را به صورت اختصاری در متن استفاده کنيم؛ همچنين کاربر اين امکان را داشته باشد که با بردن ماوس بر روی کلمه اختصاری و نگه داشتن ماوس بر روی آن برای چند لحظه، کلمات کاملی را کلمه اختصاری از آنها نشات گرفته است را در يک کادر کوچک زرد رنگ ببيند.

آموزش گام به گام   HTML : قسمت دوم

• مثال زير نشان می دهد که آدرس را در يک فايل HTML چگونه بنويسيم.

آموزش گام به گام   HTML : قسمت دوم

• مثال زير طريقه استفاده از برچسب <bdo> را نشان می دهد. همان گونه که مشاهده می کنيد اين برچسب می تواند جهت نمايش متن را تغيير دهد مثلا حروف از راست به چپ نوشته شوند يا بر عکس.

آموزش گام به گام   HTML : قسمت دوم

• توسط برچسب <blockquote> مرورگر يک خط خالی قبل و بعد از نقل قول قرار می دهد وهمچنين حاشيه ای برای آن در نظر می گيرد. اما <q> کار خاصی روی متن انجام نمی دهد و فقط برای شما به عنوان سازنده فايل HTML مشخص می کند که عبارت داخل آن يک نقل قول است.

آموزش گام به گام   HTML : قسمت دوم

• مثال زير جمله ای از کتابی خاص و يک جمله تعريفی را به نمايش می گذارد.

آموزش گام به گام   HTML : قسمت دوم

همانطور که در مثالهای فوق می بينيد خروجی بعضی از بر چسبها کاملا مثل هم است و بعضی کار خاصی را انجام نمی دهند. در اين موارد گاهی هدف از استفاده اين برچسبها تنها مشخص کردن نوع متن برای نويسنده فايل HTML می باشد. به هر حال استفاده از قالبندی های فوق به سليقه نويسنده فايل HTML است و ضرورتی ندارد که حتما از موارد فوق دقيقا بر اساس کاربرد استفاده شود.
ادامه دارد ......
ارسال مقاله توسط عضو محترم سایت با نام کاربری : davidfattahi
/س


تبلیغات در راسخون
ارسال نظر
با تشکر، نظر شما پس از بررسی و تایید در سایت قرار خواهد گرفت.
متاسفانه در برقراری ارتباط خطایی رخ داده. لطفاً دوباره تلاش کنید.
موارد بیشتر برای شما
چطور از سنگ کلیه پیشگیری کنیم؟
چطور از سنگ کلیه پیشگیری کنیم؟
حضرت فاطمه (سلام الله علیها) و شکوه قیامت؛ از شکایت تا شفاعت
حضرت فاطمه (سلام الله علیها) و شکوه قیامت؛ از شکایت تا شفاعت
آموزش ثبت درخواست بررسی مجدد دریافت کالابرگ
play_arrow
آموزش ثبت درخواست بررسی مجدد دریافت کالابرگ
موشک‌های اسرائیل‌زن را اینجا از نزدیک ببینید
play_arrow
موشک‌های اسرائیل‌زن را اینجا از نزدیک ببینید
شاهکار دیدنی زیدان پس از ۲۰ سال تکرار شد!
play_arrow
شاهکار دیدنی زیدان پس از ۲۰ سال تکرار شد!
سردار محبی: موشک‌های ایران رادارگریز شده‌اند
play_arrow
سردار محبی: موشک‌های ایران رادارگریز شده‌اند
سردار محبی: رونمایی از شهر موشکی هدیۀ ویژۀ هوافضای سپاه به مردم خواهد بود.
play_arrow
سردار محبی: رونمایی از شهر موشکی هدیۀ ویژۀ هوافضای سپاه به مردم خواهد بود.
جنگنده‌های سعودی مزدوران خود را در یمن هدف قرار دادند
play_arrow
جنگنده‌های سعودی مزدوران خود را در یمن هدف قرار دادند
شنود نیروهای امنیتی رژیم صهیونیستی توسط بادیه‌نشینان عرب
play_arrow
شنود نیروهای امنیتی رژیم صهیونیستی توسط بادیه‌نشینان عرب
تصاویر مردمی از پرواز موشک‌های ایرانی در آسمان بندرعباس + فیلم
play_arrow
تصاویر مردمی از پرواز موشک‌های ایرانی در آسمان بندرعباس + فیلم
انفجار لاستیک کامیون هنگام باد کردن در ویتنام + فیلم
play_arrow
انفجار لاستیک کامیون هنگام باد کردن در ویتنام + فیلم
لحظه هدف قرار دادن یک کشتی تجاری در خلیج عمان توسط آمریکا + فیلم
play_arrow
لحظه هدف قرار دادن یک کشتی تجاری در خلیج عمان توسط آمریکا + فیلم
لاریجانی: دعوا در آمریکا بر سر تجاوز به ایران نیست، مسئله اصلی شکست ترامپ و پیروزی ایران است + فیلم
play_arrow
لاریجانی: دعوا در آمریکا بر سر تجاوز به ایران نیست، مسئله اصلی شکست ترامپ و پیروزی ایران است + فیلم
انتشار ویدیوی جدید تسلا از پرواز و حرکات نمایشی رودستر+ فیلم
play_arrow
انتشار ویدیوی جدید تسلا از پرواز و حرکات نمایشی رودستر+ فیلم
قطعه اصلی یا تقلبی لوازم خانگی؟ چطور از کیفیت قطعات تعویضی مطمئن شویم؟
قطعه اصلی یا تقلبی لوازم خانگی؟ چطور از کیفیت قطعات تعویضی مطمئن شویم؟