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

یکشنبه, ۱۴ام تیر , ۱۳۸۸ | ۶۳ دیدگاه

با سلام

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

به دنیای مهیج اینترنت و وب خوش آمدید.

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

این خود آموز به صورت پله پله نوشته شده است پس با ما همراه باشید.

سازمان جهانی وب  ( World Wide Web Consortium )

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

Html چیست ؟

Hyper Text Markup Language

یا زبان نشانه گذاری فوق متن یک زبان برنامه نویسی نیست بلکه این زبان یک زبان برای نشانه گذاری عناصر یک صفحه وب است به طوری که یک مرورگر مانند Internet Explorer بتواند آن صفحه وب را به عناصر قابل رویت ترجمه کند و روی صفحه نمایشگر شما نشان بدهد.

یک زبان نشانه گذاری از عناصر علامت گذاری (Tag ) ساخته شده است.

HTML از عناصر علامت گذاری و یا تگ ها برای توضیح یک صفحه وب استفاده می کند.

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

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

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

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

تگ چیست ؟

تگها کلماتی هستند که به وسیله یک جفت علامت <> احاطه شده اند مانند <html> .

تگها معمولا به صورت یک جفت می باشند مانند <b> و <b/>.

اولین تگ ( تگ ابتدایی) و دومین ( تگ انتهایی) نامیده می شوند.

تگ ابتدایی تگ شروع ویا تگ باز و تگ انتهایی تگ پایان ویا تگ بسته نیز نامیده می شوند.

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

منظور از یک مرورگر وب مانند Internet Explorer و یا FireFox وسیله ایست برای خواندن کدهای html و ترجمه ونمایش آنها به صورت صفحات وب .یک مرورگر تگها را نشان نمی دهد بلکه از آنها برای ترجمه صفحه وب استفاده می کند.

در زیر میتوانید نمونه ای از کدهای html را ببینید :

  1. <html>
  2. <body>
  3. <h1>My First Heading</h1>
  4. <p>My first paragraph</p>
  5. <body/>
  6. <html/>

متن بین <html> و <html/> صفحه وب را مشخص می کند.

متن بین <body> و <body/> قسمت قابل رویت یک صفحه وب را نشان میدهد.

متن بین <h1> و <h1/> به صورت یک سر فصل نمایش داده می شود.

متن بین <p> و <p/> به صورت یک پاراگراف نمایش داده می شود.

چه چیزی احتیاج دارید؟

شما برای شروع یادگیری html احتیاج به هیچ نرم افزار پیچیده و یا یک وب سایت ندارید. در این خود آموز ما از نرم افزار Notepad موجود در windows برای نوشتن و ویرایش کدهای html استفاده میکنیم و اعتقاد داریم که این بهترین راه برای یادگیری html می باشد.

کد نویسان و طراحان حرفه ای از نرم افزارهایی مانند Front Page و Dream Weaver برای تولید صفحات وب استفاده می کنند.

ساخت اولین صفحه وب

برای شروع شما میتوانید نرم افزار Notepad خود را از آدرس Start>Program>Accessories باز کنید و متن زیر را درون آن بنویسد .

  1. <html>
  2. <body>
  3. <h1>This is my Main Page</h1>
  4. <p>This is some text.</p>
  5. <p><a href=”page1.htm”>This is a link to Page 1</a></p>
  6. <p><a href=”page2.htm”>This is a link to Page 2</a></p>
  7. <body/>
  8. <html/>

پس از اتمام ، نوشته مورد نظر خود را با یکی از پسوندهای .htm و یا .html به نام Mainpage ذخیره کنید.

این اولین صفحه وب ساخته شما است.

html. یا .htm ؟

برای ذخیره یک صفحه وب شما باید یکی از این پسوندها را انتخاب کنید .htm و یا .html

در عمل این دو پسوند تفاوتی با یکدیگر ندارند . پسوند .htm یک پسوند قدیمیست و مربوط به زمانی است که پسوندها از ۳ حرف تشکیل می شدند ولی امروزه بهتر است از پسوند .html استفاده کنید.

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

مثال ها

برای یادگیری بهتر از چندین مثال شروع می کنیم.

سرفصل و یا Head Line

  1. <h1>This is a heading</h1>
  2. <h2>This is a heading</h2>
  3. <h3>This is a heading</h3>

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

پاراگراف

  1. <p>This is a paragraph</p>
  2. <p>This is another paragraph</p>

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

پیوندها و یا link ها

  1. <a href=”www.TopDesign.ir”> This is a link </a>

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

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

تصاویر

  1. </img src=”TopDesign.jpg” width=”104″ height=”142″>

صاویر در توسط تگهای <img/> علامت گذاری می شوند که دارای نشانه ها و تفاوت هایی با ۳ تگ قبلی است که در ادامه توضیح داده می شود. ( مانند نام و اندازه تصاویر )

عناصر HTML

عناصر HTML اجزاء سازنده یک مجموعه HTML هستند. عنصر HTML یعنی هر چیزی که بین تگ ابتدایی و انتهایی وجود دارد.

با توجه به مثالهای بالا

تگ پایانی

محتوای عناصر HTML

تگ شروع

</p>

This is a paragraph

<p>

</a>

This is a link to Page 1

<a href=”default.htm” >

</br>

تگ شروع تگ باز و تگ پایانی تگ بسته نیز نامیده می شوند.

عناصر و یا اجزاء یک مجموعه HTML  دارای نظام و قواعد خاصی هستند که تعدادی از آنها در زیر گفته می شود.

  • عناصر HTML با یک تگ باز شروع می شوند.
  • عناصر HTML با یک تگ بسته به پایان می رسد.
  • محتوای عناصر در بین تگهای ابتدایی و انتهایی قرار می گیرند.
  • بعضی از عناصر HTML محتوایی ندارند.
  • این عناصر در تگ ابتدایی بسته می شوند مانند (<br/> )
  • بعضی از عناصر HTML دارای مشخصات و تواناییهایی هستند.

البته در مورد تواناییها و مشخصات عناصر HTML   در ادامه به صورت کامل توضیح داده خواهد شد.

تگهای HTML تو در تو (Nested)

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

  1. <html>
  2. <body>
  3. <p>This is my first paragraph</p>
  4. <body/>
  5. <html/>

در این مثال تگ <html> در ابتدای همه تگها باز شده است و در انتهای همه آنها با <html/> بسته شده . محتوای تگ <html> تگهای <body> و <p> هستند.

تگ <body> که بعد از آن باز شده قبل از آن با <body/> بسته شده است. محتوای تگ <body> که در واقع بدنه و قسمت قابل رویت یک صفحه HTML است در این مثال یک تگ <p> است. در مورد تگ <p> هم این موضوع تکرار شده است.

تگهای پایانی را فراموش نکنید

  1. p>   This is a paragraph>

یکی از اشتباهات متداول در نوشتن کدهای HTML رعایت نکردن قانون (Nesting) و یا همان تگهای تو در تو و یا نبستن تگهای باز به وسیله تگهای بسته است . فراموش کردن تگهای پایانی در مثال بالا باعث بروز خطا نمیشود .

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

عناصر HTML خالی

عناصر HTML بدون محتوا را عناصر خالی (empty element) می نامند .این عناصر در همان تگ ابتدایی بسته می شوند.

تگ <br> یکی از عناصر خالی است که بسته نمیشود و باعث شکستن خط بعد از خود می شود.

البته در زبانهای پیشرفته تر مانند XHTML و XML تگها حتما باید بسته شوند بنابرین استفاده از تگ <br/> به جای <br> مناسب تر می باشد.

حروف بزرگ یا کوچک؟

HTML حساس به بزرگ بودن و یا کوچک بودن حروف نیست به طور مثال <p> همان کاری را انجام می دهد که <P> انجام میدهد.بسیاری از صفحات وب از حروف بزرگ برای ساختن تگهای HTML استفاده میکنند. ولی استفاده از حروف کوچک طبق استانداردهای سازمان جهانی وب یک امر کاملا ضروریست.

در نهایت خودآموز فوق بصورت فایل PDF برای راحتی ذخیره کردن و در آرشیو داشتن برای شمت عزیزان آماده شده است که میتوانید فایل فوق را دانلود نمایید :

قسمت اول این خودآموز به پایان رسید و زمان ارائه قسمتهای بعدی آموزش زبان برنامه نویسی HTML از مقدماتی تا پیشرفته به نظر شما عزیزان و میزان استقبال شما عزیزان مربوط میشه.

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

Be Sociable, Share!


۶۳ دیدگاه


  1. آرمان
    ۱۴ تیر ۱۳۸۸

    بهتر از این نمیشه، ادامه بدید




  2. حمیده
    ۱۴ تیر ۱۳۸۸

    خدا قوت 🙂




  3. مهرداد
    ۱۴ تیر ۱۳۸۸

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




  4. مهرداد
    ۱۴ تیر ۱۳۸۸

    الان خوندم. عالی بود. خیلی ساده و خوب توضیح داده بودید.
    یه نکته‌ی کوچیک: تو پی‌دی‌اف، ستون وسط جدول صفحه‌ی ۵ خالیه. یادتون رفته محتوای عناصر رو بنوسید.




  5. کامران
    ۱۴ تیر ۱۳۸۸

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




  6. امیر
    ۱۴ تیر ۱۳۸۸

    ممنونم کامران جان.
    امیدوارم که بتونم باعث پیشرفت علاقه مندان وب بشم.




  7. khak313
    ۱۵ تیر ۱۳۸۸

    سلام
    و بابت آموزش و فایل pdf ممنون
    – فونتی و سایزی که برای کتابچه انتخاب کردین کمی آزار دهنده است؛
    – کمی حاشیه و استفاده از رنگ ها مطمئنا زیباترش می کرد.
    موفق و سربلند باشین




  8. سعید
    ۱۵ تیر ۱۳۸۸

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




  9. امیر
    ۱۵ تیر ۱۳۸۸

    ممنون از نظرات شما دوستان.
    فایل pdf تصحیح شد.




  10. هادی
    ۱۵ تیر ۱۳۸۸

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




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

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




  12. محمد
    ۱۶ تیر ۱۳۸۸

    سلام
    خوبه بد نیست اما خیلی خلاصه شده است
    به هر حال موفق باشید




  13. میثم
    ۱۶ تیر ۱۳۸۸

    سلام
    خیلی ممنون از آموزش.
    این تگ‌هایی که میگین و خواهید گفت W3 رو که زیر پاشون نمیذارن؟
    مثلا میشه از به جایه استفاده کرد، فرق این دوتا چیه اونوخ؟
    موفق باشید.




  14. امیر
    ۱۷ تیر ۱۳۸۸

    ممنون از نظرات شما.
    این خود آموز طبق استاندارد w3c نوشته شده و میشه.




  15. علیرضا
    ۱۸ تیر ۱۳۸۸

    خیلی خوب نوشتید، مطمئنا در فصل های بعدی پخته تر خواهد شد .. منتظر قسمت بعدی هستم




  16. جوک
    ۲۷ تیر ۱۳۸۸

    آقا دمت گرم ادامه بده
    مخصوصا CSS
    JQuery هم بعدا شاید بخونم
    درکل خیلی خوبه!




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

    خیلی خیلی خیلی ممنون.لطفا همین طور ادامه بدین.۸ هم بذارین.
    p>This is a link to Page 1

    جایه ی This is a link to Page 1 چی باید بنویسم؟




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

    ممنون از نظرت،میتونی سرفصل صفحه ای رو که میخوای بهش لینک بدی یا موضوعی رو که می خوای بهش لینک بدی رو بنویسی .




  19. Heidi
    ۱۷ آبان ۱۳۸۸

    kheily mamnoon ali bood




  20. amir
    ۹ آذر ۱۳۸۸

    SALAM

    kheiliii alli bood

    aaghean ke ostad besiyar khoobi hastid che ghadr rahat amoozesh dadid




  21. سعید
    ۶ دی ۱۳۸۸

    سپاسگذارم/خیلی کارآمدبود/با آرزوی پیروزی وبهروزی و شادکامی

    شادزی / مهرافزون




  22. tayyeb
    ۷ بهمن ۱۳۸۸

    تداوم please




  23. کامران
    ۷ بهمن ۱۳۸۸

    آموزش HTMLسطح مقدماتی رو تا آخر تموم کردیم که ؟؟؟




  24. آرام
    ۱۸ بهمن ۱۳۸۸

    سلام
    من واقعا ازتون ممنونم
    این سایت فوق العاده است
    با اینکه تازه شروع به یاد گیری کرده ام اما مطالب ساده و کامل گفته شده اند
    بازهم ممنون




  25. شهرزاد
    ۵ اسفند ۱۳۸۸

    خیلی خوب بود، مرسی. من اولین بار هست به این سایت میام، مطالب آموزشی کامل و مفید هستند، تبریک می گم کارتون خیلی خوبه 😉 موفق باشید! 🙂




  26. سيامك دهقان
    ۵ اسفند ۱۳۸۸

    سلام دوست عزیز واقعاً لذت بردیم انشاال… مطالب رو ادامه بدی
    با تشکر
    به امید موفقیت شما




  27. نگار
    ۲۳ اسفند ۱۳۸۸

    لطفا JQuery راهم شروع کنید. متشکرم




  28. کامران
    ۲۳ اسفند ۱۳۸۸

    نگار جان ۹ جلسه از شروع آموزش پایه ای jQuery گذشته ؟؟؟!!!!!



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