۱۳۹۱/۳/۲۶، ۰۲:۵۶:۱۵ صبح
مقدمه:
دراین آموزش ها سعی داریم تا htmlرااز مبتدی تا پیشرفته به شما آموزش دهیم در صورتی که موردحمایت شما قرار بگیرد آن رادرحد html روزادامه خواهیم داد.حتی شما اگرهیچ چیزی از htmlندانید درپایان این آموزش ها قادر خواهیدبودبه راحتی قالب های خود را ویرایش کنید و یا یک قالب برای خود طراحی کنید و لذت دنیای اینترنت راتجربه خواهیدکرد.علاوه برآن درموردتگ های روز فردبلاگ درآموزش های آینده این مبحث صحبت خواهیم کرد و روش سئوسازی صحیح قالب درسطح تیم ملی وهرآنچه که مربوط به html زبان موردعلاقه من باشد.
درآخرهم چنانچه موردعلاقه دوستان وحمایت آنان قرار گیردسعی برآن خواهیم کردکه تحت یک جزوه آموزشی آن رادرآوریم ودرسراسراینترنت منتشرکنیم.
آیامیخواهیدکه یک طراح قالب شویدوخودقالب های خودراطراحی کنید؟
-پس باما همراه باشید و به دقت به مبحث های ما توجه کنید.
html چیست؟
html یا Hyper-Text Markup Language یک زبان ساده آرایش دهنده متنی است که برای توزیع اسنادمبتنی برمتن برروی شبکه های کامپیوتری طراحی شده و مجموعه ای ازفرمان های ازپیش تعریف شده است(tagتگ)که میتوان بااستفاده ازآنها،اسنادمبتنی برای نمایش مرورگرها(Browser) قالب بندی کردوبااستفاده ازامکان فراپیوند سازی( Hyperlinking)اسنادمختلف که درمیلیون هاخدمات دهنده وب درسراسردنیاوجوددارندرابه هم مرتبط کرد،به طورکل ازHTML برای ایجاد صفحات وب بهره گرفته میشود.
خوب حالا که بطور کلي با يک سري از مفاهيم پايه اي اينترنت و وب آشنا شديم نوبت به فراگيري خود زبان HTML رسيده و از اين قسمت به بعد کار خود را آغاز ميکنيم.
-برای فراگیریHTMLبه چه امکاناتی نیازداریم ؟
به غیر از کامپیوتر و یا هرسیستم دارای مرورگر که دراختیار داریدکه ما به شما کامپیوترراپیشنهادمیکنیم .نیازمند یک نرم افزار
ویرایش گر متن مثل NOTEPAD ساده یاNotepad++ احتیاج خواهیدداشت که درخودویندوزXPبه صورت پیش فرض گنجانده شده است ویک مرورگرکه ماهمیشه فایرفکس روپیشنهادمیکنیم اما به دلیل اینکه ممکن هست قالب طراحی شده شما بااین مرورگربرای مرورگرهای دیگرناخوانا وبهم ریخته نشان داده شود پس توصیه میکنیم ازInternet explorer استفاده کنیدتا قالب های طراحی شده باتمام مرورگرها خوانا باشد،دلیل این که Internet explorer بامرورگرهای دیگرخوانا میباشداین است که ازکدهای قدیمی استفاده میکندکه دراکثرمرورگرها موجودمیباشد.
پس هرگاه کاربه تنگنا کشید وپای کدهای جدید به میان آمد حتما ازآخرین نسخه فایرفکس استفاده کنید.
تگ ها درزبان(html):
اولين چيزي که شما در اين مرحله بايد با آن آشنا شويم مفهوم تگ(Tag) است. تگ ها دستورات ساده اي هستند که به مرورگر وب شما مي گويند که چه عملي انجام دهد. تمامي تگهاي HTML بين علائم > و < قرار ميگيرند تا از متون ساده درون صفحه تفکيک شوند. بيشتر تگهايHTML يک بخش آغازين و پاياني دارند.
بخش پاياني تگ همانند بخش آغازين آن است که فقط در ابتداي آن کاراکتر / قرار ميگيرد.ميگيرد.در زبان و فرقي نميکند که تگها را با حروف کوچک تايپ کنيد يا حروف بزرگ. مثلا هيچ فرقي بين از نظر عملکرد وجود ندارد.اما بهتراست ازحروف کوچک استفاده کنیدبرای زیبایی.
به مثال زیرتوجه کنید:
کد:
<نام تگ/> رشته کاراکتری <نام تگ>
![[تصویر: photos.png]](http://mybbiran.com/1/photos.png)
نمونه:
کد:
<h2> فردبلاگ</h2>
----------------
کد:
<hn>
این تگ بیان میکند که فردبلاگ رابه صورت متنی دراندازه خاص نمایش دهد.بعدادرموردتگ بیشتربحث خواهیم کرد.
نکته:مرورگروب نسبت به کوچکی وبزرگی حروف حساسیت نداردوموجب بهم ریختگی قالب شما نخواهد شدبرخلاف برنامه های کامپیوتری وphp ها.یک ویژگی جالب دیگردرمورد تگ ها این هست که اگرمرورگرشما نداند تگی که نوشته شده است چیست!آن رانادیده میگیرد.
مثال:
کد:
<google><h2> فردبلاگ</gogle></h2>
درمثال بالا ازتگ
کد:
gogle
صرف نظرشده است به دلیل اینکه عملی برای آن تعریف نشده است.
تگ (html ) :
حالا که بابازوبسته کردن تگ آشناشدید!
نخستین تگی یادستوری که شما بایددر html بدانید تگ شروع وپایان صفحه هست این کدبه مرورگرشما میگویدکه فایل حاضریک فایل htmlمی باشد.دراولین خط صفحه وآخرین خط کدپایان صفحه بایدگذاشته شود.
که درhtml1 به این صورت:
کد:
کد:
واستاندارد آن به این صورت :
کد:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></html>[/code][/code][/code][/code]
وبرای راست چین شدن آن کد:
کد:
<html dir="rtl" lang="fa-IR">
رابعدازتگ
کد:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
قرارمیدهیم بدین صورت:
کد:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html dir="rtl" lang="fa-IR">
ودرhtml5 که آموزشش راانشاالله خواهیم داد بدین صورت شروع وپایان داده میشود:
کد:
<!DOCTYPE html></html>[/code][/code][/code][/code]
دقت داشته باشیداین دوتا تگ بازوبسته شدن html بایددرشروع وپایان صفحه گذاشته شوند.
برای شروع:
کد:
کد:
دراین آموزش ها سعی داریم تا htmlرااز مبتدی تا پیشرفته به شما آموزش دهیم در صورتی که موردحمایت شما قرار بگیرد آن رادرحد html روزادامه خواهیم داد.حتی شما اگرهیچ چیزی از htmlندانید درپایان این آموزش ها قادر خواهیدبودبه راحتی قالب های خود را ویرایش کنید و یا یک قالب برای خود طراحی کنید و لذت دنیای اینترنت راتجربه خواهیدکرد.علاوه برآن درموردتگ های روز فردبلاگ درآموزش های آینده این مبحث صحبت خواهیم کرد و روش سئوسازی صحیح قالب درسطح تیم ملی وهرآنچه که مربوط به html زبان موردعلاقه من باشد.
درآخرهم چنانچه موردعلاقه دوستان وحمایت آنان قرار گیردسعی برآن خواهیم کردکه تحت یک جزوه آموزشی آن رادرآوریم ودرسراسراینترنت منتشرکنیم.
آیامیخواهیدکه یک طراح قالب شویدوخودقالب های خودراطراحی کنید؟
-پس باما همراه باشید و به دقت به مبحث های ما توجه کنید.
html چیست؟
html یا Hyper-Text Markup Language یک زبان ساده آرایش دهنده متنی است که برای توزیع اسنادمبتنی برمتن برروی شبکه های کامپیوتری طراحی شده و مجموعه ای ازفرمان های ازپیش تعریف شده است(tagتگ)که میتوان بااستفاده ازآنها،اسنادمبتنی برای نمایش مرورگرها(Browser) قالب بندی کردوبااستفاده ازامکان فراپیوند سازی( Hyperlinking)اسنادمختلف که درمیلیون هاخدمات دهنده وب درسراسردنیاوجوددارندرابه هم مرتبط کرد،به طورکل ازHTML برای ایجاد صفحات وب بهره گرفته میشود.
خوب حالا که بطور کلي با يک سري از مفاهيم پايه اي اينترنت و وب آشنا شديم نوبت به فراگيري خود زبان HTML رسيده و از اين قسمت به بعد کار خود را آغاز ميکنيم.
-برای فراگیریHTMLبه چه امکاناتی نیازداریم ؟
به غیر از کامپیوتر و یا هرسیستم دارای مرورگر که دراختیار داریدکه ما به شما کامپیوترراپیشنهادمیکنیم .نیازمند یک نرم افزار
ویرایش گر متن مثل NOTEPAD ساده یاNotepad++ احتیاج خواهیدداشت که درخودویندوزXPبه صورت پیش فرض گنجانده شده است ویک مرورگرکه ماهمیشه فایرفکس روپیشنهادمیکنیم اما به دلیل اینکه ممکن هست قالب طراحی شده شما بااین مرورگربرای مرورگرهای دیگرناخوانا وبهم ریخته نشان داده شود پس توصیه میکنیم ازInternet explorer استفاده کنیدتا قالب های طراحی شده باتمام مرورگرها خوانا باشد،دلیل این که Internet explorer بامرورگرهای دیگرخوانا میباشداین است که ازکدهای قدیمی استفاده میکندکه دراکثرمرورگرها موجودمیباشد.
پس هرگاه کاربه تنگنا کشید وپای کدهای جدید به میان آمد حتما ازآخرین نسخه فایرفکس استفاده کنید.
تگ ها درزبان(html):
اولين چيزي که شما در اين مرحله بايد با آن آشنا شويم مفهوم تگ(Tag) است. تگ ها دستورات ساده اي هستند که به مرورگر وب شما مي گويند که چه عملي انجام دهد. تمامي تگهاي HTML بين علائم > و < قرار ميگيرند تا از متون ساده درون صفحه تفکيک شوند. بيشتر تگهايHTML يک بخش آغازين و پاياني دارند.
بخش پاياني تگ همانند بخش آغازين آن است که فقط در ابتداي آن کاراکتر / قرار ميگيرد.ميگيرد.در زبان و فرقي نميکند که تگها را با حروف کوچک تايپ کنيد يا حروف بزرگ. مثلا هيچ فرقي بين از نظر عملکرد وجود ندارد.اما بهتراست ازحروف کوچک استفاده کنیدبرای زیبایی.
به مثال زیرتوجه کنید:
کد:
<نام تگ/> رشته کاراکتری <نام تگ>
نمونه:کد:
<h2> فردبلاگ</h2>
----------------
کد:
<hn>
این تگ بیان میکند که فردبلاگ رابه صورت متنی دراندازه خاص نمایش دهد.بعدادرموردتگ بیشتربحث خواهیم کرد.
نکته:مرورگروب نسبت به کوچکی وبزرگی حروف حساسیت نداردوموجب بهم ریختگی قالب شما نخواهد شدبرخلاف برنامه های کامپیوتری وphp ها.یک ویژگی جالب دیگردرمورد تگ ها این هست که اگرمرورگرشما نداند تگی که نوشته شده است چیست!آن رانادیده میگیرد.
مثال:
کد:
<google><h2> فردبلاگ</gogle></h2>
درمثال بالا ازتگ
کد:
gogle
صرف نظرشده است به دلیل اینکه عملی برای آن تعریف نشده است.
تگ (html ) :
حالا که بابازوبسته کردن تگ آشناشدید!
نخستین تگی یادستوری که شما بایددر html بدانید تگ شروع وپایان صفحه هست این کدبه مرورگرشما میگویدکه فایل حاضریک فایل htmlمی باشد.دراولین خط صفحه وآخرین خط کدپایان صفحه بایدگذاشته شود.
که درhtml1 به این صورت:
کد:
کد:
کد:
<html></html>
[/code][/code]واستاندارد آن به این صورت :
کد:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></html>[/code][/code][/code][/code]
وبرای راست چین شدن آن کد:
کد:
<html dir="rtl" lang="fa-IR">
رابعدازتگ
کد:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
قرارمیدهیم بدین صورت:
کد:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html dir="rtl" lang="fa-IR">
ودرhtml5 که آموزشش راانشاالله خواهیم داد بدین صورت شروع وپایان داده میشود:
کد:
<!DOCTYPE html></html>[/code][/code][/code][/code]
دقت داشته باشیداین دوتا تگ بازوبسته شدن html بایددرشروع وپایان صفحه گذاشته شوند.
برای شروع:
کد:
کد:
کد:
<html>
برای پایان:
کد:
</html>
[/code][/code]