آموزش Html – قسمت دوم

شنبه, ۲۰ام تیر , ۱۳۸۸ | ۳۲ دیدگاه

تواناییها و خصوصیات عناصر HTML

حال به تفصیل به تواناییهای بعضی از عناصر HTML  می پردازیم.
هر عنصرHTML  دارای تواناییها و خصوصیتهایی می باشد.این خصوصیتها یک سری اطلاعات اضافی و تکمیلی در مورد هر عنصر HTML  است. این اطلاعات در تگهای ابتدایی در بین  یک جفت ”    ” قرار می گیرند مانند name=”value”

<a href=”http://www.TopDesign.com”> This is a link</a>

در اینجا شما نمونه ای از عناصر HTML  به همراه توضیحات تکمیلی (Attribute)  را می بینید که در بین یک جفت    ”   ”  قرار گرفته است.

تگهای Head Line و یا سرفصلها

سرفصلها توسط تگهای  h1   تا h6  علامت گذاری می شوند. تگ h1  باعث ایجاد اندازه بزرگتری نسبت به h6   می شود.

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

مرورگرها به صورت اتوماتیک یک خط فاصله بعد از این تگها ایجاد میکند.

اهمیت تگهای Head Line

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

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

ترتیب اهمیت این تگها به ترتیب اهمیت بیشتر از h1  به h6  می رسد.

تگهای خط کشی و یا خط (line)

تگ  <hr/>  برای کشیدن خط ها افقی استفاده میشود.

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

نوشتن توضیحات برای کدها HTML

این توضیحات باید به صورتی در درون کدهای HTML    قرار گیرند که توسط مرورگرها خوانده نشوند. بنابراین این توضیحات را به این صورت

می نویسیم.

<!– This is a comment –>

این نوشته ها توسط مرورگرها خوانده نمی شوند.علامت تعجب فقط در ابتدا قرار می گیرد و در پایان نمی آید.

چگونه کدهای HTML یک صفحه وب را ببینیم؟

برای این کار شما میتوانید در صفحه مرورگرتان گزینه view   را از نوار ابزار انتخاب کنید و سپس گزینه view source   و یا source  را انتخاب کنید.در این حالت یک پنجره جدید باز می شود که کدهای HTML  را به شما نشان می دهد.

تگهای پاراگراف (Paragraph)

پاراگراف ها توسط تگهای <p>   علامت گذاری می شوند.

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

مرورگرها به صورت اتوماتیک یک خط فاصله  قبل و بعد از این تگها ایجاد میکند.

باز هم این نکته را یاد آوری می کنیم که تگهای ابتدایی و انتهایی را فراموش نکنید.

تگهای شکستن خط ( Line Breaks )

برای ایجاد شکست در یک خط و رفتن به خط بعدی و ایجاد فاصله از تگ </br>  که یک تگ خالی (empty) است استفاده می شود.

این نکته قابل ذکر است که کلیه فاصله ها در بین تگهای HTML  در هنگام نمایش توسط  مرورگرها از بین می رود.

<h1> Headline1 </h1>

به طور مثال فاصله ای که قبل از محتوای این عنصر HTML   وجود دارد در مرورگر از بین می رود.

تگهای نوع نمایش نوشته ها ( Text Formatting )

This text is bold

This text is big

This text is italic

This is computer output

This is subscript and superscript

تگهایی مانند <i>  و یا <b>  باعث می شوند که نوشته ها به صورت Italic  و یا Bold   نمایش داده شوند . این تگها را تگهای نوع نمایش یا

(Text Formatting )  می نامند.

برای آشنایی بیشتر با این تگها صفحات وب را به دقت نگاه کنید.در زیر تعدادی از این تگها را به نمایش می گذاریم.

<p> <b> This text is bold <b></p>                    This text is bold

<p> <strong>This text is strong </strong></p>            This text is strong

<p><big>This text is big</big></p>                          This text is big

<p><em>This text is emphasized</em></p>               This text is emphasized

<p><i>This text is italic</i>                     This text is italic

<p><small>This text is small</small></p>                 This text is small

<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>

This is subscript and superscript

برای دانلود این خود آموز در فرمت PDF کلیک نمایید :

میتوانید تمامی مثالهای فوق را در یک فایل zip دانلود نمایید :

پستهای مرتبط :

آموزش HTML – قسمت اول

Be Sociable, Share!


۳۲ دیدگاه


  1. امیر
    ۲۰ تیر ۱۳۸۸

    با سلام دوباره.
    خوشحالم که با قسمت دوم آموش HTML در خدمتتون هستم.
    برای بهتر شدن این خودآموز لطفا نظر بدید.
    برای آگاهی از بروز شدن این خود آموز عضوی از ITT بشید و در قسمت خبرنامه ثبت نام کنید.
    با تشکر.




  2. قاصدک
    ۲۱ تیر ۱۳۸۸

    سلام آقای امیر ، تشکر واسه خودآموز . خیلی خوبه . کلا سایت جالبی دارین. یه عالمه تبریک.
    من کدهای html همین صفحه ی خودتونو دیدم و سرگیجه گرفتم . با توجه به اینکه تازه دارم html یادمی گیرم ، به نظرتون با خودآموزای این چنینی می شه حرفه ای شد ؟ اگه نه کتابه خاصی هست بهم معرفی کنید ؟
    ممنون




  3. امیر
    ۲۱ تیر ۱۳۸۸

    سلام قاصدک.
    ممنون از نظرت.
    باید اعتراف کنم من هم اولین باری که کدها HTML رو دیدم وحشت کردم وپیش خودم گفتم میشه یه روزی اینهارو بفهمم و یاد بگیرم.
    و در حال حاضر دارم خود آموز HTML می نویسم.
    کتابهای زیادی در زمینه HTML وجود داره در بازار ولی من سعی می کنم نکات کلیدی و مهم رو به صورت خیلی ساده بیان کنم.
    قدم به قدم با ITT پیش بیا و نا امید نباش.در ضمن تمرین فراموش نشه.اگه اشکالی داشتید می تونین mail بزنین.
    amir@ittutorial.ir




  4. n
    ۲۱ تیر ۱۳۸۸

    عالیست. سعی کنید این مطالب را در جدول مرتب کنید. چون مثلا من این چیزا رو بلیم اما اگر در جدول بنویسید چاپ می کنم می گذارم بالای کامپیوتر. بعد راحت می توانم حفظش کنم.




  5. مهرداد
    ۲۱ تیر ۱۳۸۸

    خیلی ممنون
    ولی میشه لطف کنید سی‌اس‌اس و جی‌کوئری را هم شروع کنید؟ (طبق قول خودتان)
    یعنی هم‌زمان. لازم نیست اچ‌تی‌ام‌ال تموم بشه بعد بقیه‌ی آموزش‌ها. البته کسانی که اچ‌تی‌ام‌ال را بلد نیستند باید گام به گام جلو برند.
    اگه زودتر اون دو آموزش رو هم شروع کنید خیلی خیلی خوب میشه.



  6. با عرض سلام خدمت مدیریت سایت مرجع طراحان سایت
    از آموزش های بی نظیر شما متشکرم
    من طراحی سایت رو از شما یاد گرفتم
    می تونید سایت منو ببینید
    خودم طراحی کردم؟
    بازم از شما متشکرم




  7. کامران
    ۲۱ تیر ۱۳۸۸

    سلام علی جان
    خواهش میکنم وظیفمونه
    سایت شما رو دیدم اگر واقعا اولین طراحی شماست و با گفته ها و خودآموزهای ما اینکارو انجام دادید باید به شما تبریک بگم چرا که برای اولی کار خیلی خوبه
    اما نکته اینه که سایت شما آلاوده به ویروس هست. یعنی فایلهایی که از کامپیوتر آپلود کرده اید ویروسی بوده اند و مرورگر Google Chrome سایت شما رو خطرناک و M a l w a r e تشخیص میده
    یه آنتی ویروس خوب مثل کاسپرسکی بریز آپدیتش کن و کل سیستمو اسکن کن
    موفق باشی




  8. کامران
    ۲۱ تیر ۱۳۸۸

    مهرداد جان بیشتر مسئله زمانی است
    یعنی وقت کافی برای پیش بردن چند موضوع رو از اول با هم نداریم
    ولی چشم به فکر آنها هم هستیم




  9. Kamijon
    ۲۱ تیر ۱۳۸۸

    سلام و خسته نباشید خدمت شما دوستان خوب.
    خیلی کار جالبی دارید انجام میدید ، بهتون تبریک میگم.
    قسمت اول خیلی خوب بود ولی قسمت دوم برای کسانی که تازه وارد هستند یک مقدار گنگ به نظر من میرسه.
    فقط اگه امکان داره یک مقدار سریعتر آموزشها را بگذارید که به مباحث پیشرفته تر برسیم.
    با تشکر




  10. shiva
    ۲۱ تیر ۱۳۸۸

    با سلام و خسته نباشید
    آموزش خیلی جالبه و آموزنده ولی کاش یه مقدار سریعتر و مطالب بیشتری را در آموزشتان قرار دهید .
    در ضمن آیا ممکنه آموزش ASP.NET و VB.NET وFLASH را هم شروع کنید .
    کاش میشد .و کاشکی برای انتهای هر سری مطالب یک تمرین کامل و جامعی هم میگذاشتید که ما بدانیم چه وقت اینها را بکار بگیریم
    باز هم سپاسگزارم




  11. کامران
    ۲۱ تیر ۱۳۸۸

    با تشکر از نظر شما
    فایلی بصورت Zip در انتهای این خودآموز قرار داده شده که حاوی مثالها میباشد.
    بهترین تمرین مرور همین مثالهاست و عالیترین تمرین زمانی صورت میگیرد که شما بخواهید در یک کار عملی این نکات را بکار ببرید. هنوز هم به قسمتی نرسیده ایم که شما بخواهید این مثالها رو بصورت عملی بکار ببندید و وقتی که سطح آشنایی بیشتر شد و جلوتر رفتیم مثالهای کاربردی و عملی رو با هم اجرا میکنیم




  12. قاصدک
    ۲۲ تیر ۱۳۸۸

    ممنون از دلداری و آدرس ایمیل استاد 🙂




  13. بهزاد علي بيگي
    ۲۳ تیر ۱۳۸۸

    سلام کامران جان
    هر روز بهتر میشه سایت .خیلی خوبه.
    تبریک میگم به امیر با پشت کارش.
    چند نفر نیرو ‍css کار حرفه ای نیاز دارم.جایی که هستم حجم کار بالاست و تنهایی از عهدش بر نمیام
    اگه کسی رو میشناسی لطفا معرفی کن.
    راستی مقاله جدیدمو چند روز دیگه میفرستم.موفق باشید.




  14. Murderer
    ۶ شهریور ۱۳۸۸

    مثل این که واقعا نمیتونه بخونتش
    اون کدی که گفتین مرور گرهانمیتونن بخونن مد نظرم هست.
    هر کار کردم نشد .یعنی خونده نمیشه.من متوج نشدم.مصلا من داخلش چند صدتا هدر درست میکنم.مرور گر این ها رو نمیتونه بخونه یا سایت های جستو جو گر؟




  15. امیر
    ۶ شهریور ۱۳۸۸

    از این تگ برای نوشتن توضیحات استفاده میشه .دلیلش اینه که اگر بعد از ما کسی به کدهای نوشته شده توسط ما نگاه کرد بتونه بفهمه نحوه کار ما چطور بوده. کاری که در بین کد نویس های ایران مرسوم نیست و برعکس سعی میکنن که کسی نفهمه چکار کردن.در صورتی که پیشرفت با به اشتراک گذاشتن اطلاعات به وجود مییاد.




  16. محمد
    ۱۱ اسفند ۱۳۸۸

    درود ،
    خوب بنده این html و css و تا حدودی‌php رو با علاقه و پشتکاری که داشتم یاد گرفتم، از اونجاییکه از این ITT خیلی خوشم اومده دارم همه جاشو سرک میکشم. خیلی خوبه واقعا توضیحات بدون هیچ پیچیدگی اضافی گفته شده. دست نویسندگان درد نکنه.

    چند تا کامنت بالاتر آقای بهزاد علی بیگی گفتن کسی که css بدونه لازم دارن. اگر هنوز هم نیرو میخوان ما در خدمتیم.

    راستی میتونم نویسنده سایت باشم؟
    علاقه هام که اونها رو بلدم:
    ۱- html
    ۲- css
    ۳- WP
    ۴- PHP
    ۵- Graphic : البته گرافیکم خوب نیست ولی دارم سطح پیشرفته میخونم !

    من محمد هستم دانشجو رشته کامپیوتر ، زبان C فعلا یاد گرفتم، بیشتر علاقه‌ام یوزر اینترفیس هست، خیلی دوست دارم چشم و ذهن کسی که طرحمو میبینه تحت تاثیر قرار بدم …. کلا دیوانه این دنیام …

    موفق باشید دوست داشتید باهام تماس بگیرید:

    Bartareen@yahoo.com

    http://www.Roxeen.net/contact




  17. علی
    ۱۱ اسفند ۱۳۸۸

    این کار آموزشتون حرف نداره.خیلی کمک می کنه. اگه ممکنه آموزش CSS رو هم به صورت فصل بندی شده. مثل همین HTML قرار بدین. ممنون.




  18. النا
    ۲۲ اسفند ۱۳۸۸

    من کاملا مبتدی هستم و به نظرم خیلی عالی و روان هست.
    خیلی چیزها رو نمیدونستم که اان بعد از تین ۲ سری می دونم.




  19. امیر
    ۱۶ مرداد ۱۳۸۹

    سلام
    واقعا از زحماتی که برای سایت بسیار پربارتون می کشید ممنون هستیم




  20. محدثه
    ۲۶ مرداد ۱۳۸۹

    سلام
    اینم خوب بود با اینکه طراح صفحات وبم و تا تگش واسم جدید بود مرسی




  21. رسول
    ۳ شهریور ۱۳۸۹

    سلام
    از آموزشتون بسیار ممنون!
    من یادگیری را با این وبسایت شروع کردم
    من برام یک سوال پیش اومد که نمیدونم کجا باید میپرسیدم! ولی خب اینجا میپرسم!
    من بعد از نوشتن کد و نوشتن متن در تگ پاراگراف یا heading به زبان فارسی و بعد از سیو کردنش مشکل دارم! بعد از اجرا کردنش به جای متن فارسی یه سری علائم عجیب میاد! اگه ما بخوایم فراسی تایپ کنیم چیکار کنیم؟




  22. امیر
    ۳ شهریور ۱۳۸۹

    رسول >> با تشکر و دوست عزیز شما باید در قسمت head این کد رو قرار بدی




  23. سیروس
    ۲۷ آذر ۱۳۸۹

    عالی بود




  24. آرشام
    ۲۴ مرداد ۱۳۹۰

    خیلی عالی.من اصلا رشتم چیز دیگس ولی ذارم یاد می گیرم.عاقبت به خیر بشی عزیز




  25. فاضل
    ۲۱ مهر ۱۳۹۰

    سلام.
    باتشکر از آموزشهای خوبتون.
    امیدوارم تا آخرین مرحله هم آموزشهاتون به همین ترتیب پیش بره.چون برای افراد آماتوری مثل من که خیلی مفید بود.
    دستتون درد نکنه.خسته نباشید.




  26. یاسر
    ۱۳ آبان ۱۳۹۰

    سلام خدمت شما
    خوشحالم که یک سایت حرفه ای در این زمینه در حال فعالیته! چند خواهش داشتم
    – برای ساخت قالب های حرفه ای وردپرس با نرم افزار دریو ویور CS5 باید چیکار کنم؟!
    . اگه طرحی قالب وردپرس رو یاد بگیرم میتونم با استفاده از نرم افزارها قالب های حرفه ای درست کنم؟
    . وورد پرس بیشتر بلاگر هست تا CMS . حالا این مورد محدودیت های در ساخت صفحات خاص ایجاد می کنه؟ یعنی می تونم صفحات خاص یک قالب با مدیریت خاص درست کنم که بتونم از طریق وردپرس مدیریتش کنم؟(مثله مدیریت نگارش مطالب)
    . ساخت پلاگین با هدفی که ازش می خوام راحته؟ چه زبانی باید استفاده کرد؟
    . ترجمه پلاگین های انگلیسی به زبان فارسی و راستچین و …. چطوری انجام میشه؟

    بسیار ازتون ممنونم
    هیچ وقت ناامید نشید اگه بزادید کننده ای که مدنظرتونه نداشتید چون اکثرا فقط مطالب رو می خونند و میرن! مطمئن باشید شما هدفی خیری که داشتید بهش رسیدید که باعث شده و من و امثال من ازتون کمک بخوایم و شما هم لطف میکنید جواب بمیدید. ازتون سپاسگزارم



دیدگاه خود را بنویسید