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

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






تمام صفحات وب با نوعی از HTML ساخته می شوند. لذا برای ايجاد وب سايت های پيشرفته يادگيری HTML ضروری می باشد. در اين دوره آموزشی سعی شده است که با به کارگيری مثال های فراوان و دوری از هر گونه اضافه گوِيی در سريعترين زمان ممکن توانايی ايجاد صفحات وب بدون نياز به برنامه ای کمکی در شما ايجاد گردد.

مقدمه ای بر وب و HTML وب گسترده جهانی

وب گسترده جهانی(www , World Wide Web) که معمولا فقط وب گفته می شود؛ شبکه ای است که تمام رايانه های متصل به آن را در سراسر جهان به هم وصل می کند؛ و تمام رايانه ها در وب می توانند با هم ارتباط داشته باشند.
www چگونه کار می کند ؟
اطلاعات وب در فايلهايی به نام Web Page قرار می گيرند که آنها نيز در رايانه هايی به نام Web Server قرار دارند و رايانه ها برای ديدن صفحات وب از استانداردی ارتباطی به نام HTTP (Hyper Text Transfer Protocol ) استفاده می کنند. رايانه های متصل به وب اطلاعات موجود در Web Page ها را از طريق برنامه هايی با نام مرورگر وب (Web Browser) نشان می دهند. معمولترين مرورگرها که مورد استفاده قرار می گيرند Internet Explorer وNetscape Navigator می باشند.
چگونه مرورگرها صفحات وب را نشان می دهند ؟
همه صفحات وب شامل دستورالعمل هايی برای نمايش توسط مرورگر ها هستند، و مرورگر ها با خواندن اين دستورالعمل ها صفحات را نشان می دهند. دستورالعمل های نمايش صفحات وب، برچسبهای HTML
(Hyper Text Markup Language) ناميده می شوند مانند:
<p>This is a paragraph.</p>

يک فايل HTML چيست ؟

يک فايل HTML فايل متنی ساده ای شامل برچسب ها (Tag) می باشد؛ که بهتر است پسوند html يا htm داشته باشد و می تواند توسط يک ويرايشگر ساده متن مانند Notepad ساخته شود. برای بهتر روشن شدن مطلب بهتر است يک فايل HTML بسازيم. در Windows برنامه Notepad را اجرا کنيد و متن زير را بنويسيد :

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

اين فايل را با نام "Test.htm" ذخيره کنيد. حال مرورگر اينترنت خود را باز کرده و گزينه Open يا Open Page را از منوی File مرورگر انتخاب کنيد؛ يک جعبه محاوره ای باز خواهد شد، Browse يا ChooseFileرا انتخاب کنيد و فايل"Test.htm" که هم اکنون ساخته ايد را بيابيد، انتخابش کنيد و روی Open کليک کنيد. حال شما يک آدرس مانند:
"D:\My Documents\Test.htm" را در جعبه محاوره ای خواهيد ديد. روی OK کليک کنيد، مرورگر صفحه ساخته شده توسط شما را نشان می دهد.
بدين ترتيب شما اولين صفحه HTML خود را بدون استفاده از برنامه های طراحی وب و فقط با يک ويرايشگر متن ساده ساختيد و نتيجه آن را نيز توسط مرورگر ديديد. حال بياييد کمی درباره صفحه ای که ساخته ايد صحبت کنيم :
اولين برچسب در فايل HTML شما <html> است. اين برچسب به مرورگر می گويد که اين شروع يک فايل HTML است. آخرين برچسب در فايل شما </html> است. اين برچسب به مرورگر می گويد که اين پايان يک فايل HTML است. نوشته های بين برچسب <head> و برچسب </head> اطلاعات سربرگ می باشند و در پنجره مرورگر نمايش داده نمی شوند. متن بين برچسب <title> و برچسب </title> عنوان فايل می باشد و در نوار عنوان مرورگر نمايش داده خواهد شد. متن بين <body> و </body> توسط مرورگر نشان داده خواهد شد. همچنين متن بين <b> و</b> به صورت پررنگ نمايش داده می شود.

نکته ای درباره ويرايشگرهای HTML :

شما می توانيد صفحات HTML را با ويرايشگرهای WYSIWYG (What You See Is What You Get) مانند: FrontPage و Claris Home Page و Adobe PageMill به جای نوشتن برچسبهای مورد نياز در يک فايل متنی ساده؛ ويرايش نماييد. اما اگر می خواهيد يک طراح حرفه ای صفحات وب شويد بهتر است از يک ويرايشگر ساده متن استفاده کنيد تا HTML را به خوبی درک کنيد و در مباحث پيشرفته به درستی و با تسلط از آن استفاده کنيد.

برچسبهای HTML

برچسبها برای مشخص کردن عناصر فايل HTML استفاده می شوند و توسط دو حرف < و > احاطه می شوند. برچسبها معمولا به صورت جفت استفاده می شوند مانند <b> و </b> ؛ برچسب اول، برچسب ابتدايی و برچسب دوم، برچسب انتهايی ناميده می شود و متن بين آنها مندرجات عنصر می باشد. برچسبها به بزرگی يا کوچکی حروف حساس نيستند مثلا <b> همانند <B> می باشد اما ما در اين کتاب از حروف کوچک استفاده می کنيم. اگر می خواهيد خود را برای استفاده از نسل جديد HTML آماده کنيد شما نيز بهتر است از حروف کوچک استفاده کنيد. ضمنا اين پيشنهادی است که W3C (World Wide Web Consortium) برای استفاده از XHTML می کند.

عناصر HTML

برای روشن شدن مفهوم عنصر به دو مثال زير بسنده می کنيم:
خط زير يک عنصر است:
<b>This text is bold</b>
اين عنصر با برچسب ابتدايی <b> شروع شده و با برچسب انتهايی </b> پايان می پذيرد و Thistext is bold نيز مندرجات عنصر است.
خطوط زير نيز مجموعا يک عنصر می باشد که شروع آن با برچسب ابتدايی <body> و پايان آن با برچسب انتهايی </body> می باشد.
<body>
This is my first homepage. <b>This text is bold</b>
</body>

مشخصه برچسب ها

برچسبها می توانند دارای مشخصه (Attribute) باشند. مشخصه ها می توانند اطلاعات بيشتری در باره عناصر HTML صفحه شما تدارک ببينند.
برچسب <body> عنصر بدنه صفحه شما را تعريف می کند. با اضافه کردن مشخصه bgcolor شما می توانيد به مرورگر بگوييد که رنگ پس زمينه شما مثلا قرمز باشد؛ مانند:
<body bgcolor="red">
برچسب <table> يک جدول ايجاد می کند. با اضافه کردن مشخصه border می توانيد به مرورگر بگوييد که مثلا جدول شما حاشيه ندارد؛ مانند:
<table border="0">
مشخصه ها همواره به شکل جفت نام و مقدار به کار می روند: name="value" ؛ و همواره به برچسب ابتدايی اضافه می شوند. در ضمن بهتر است که مقدار مشخصه ها بين علامتهای نقل قول قرار گيرند.
ادامه دارد ......
ارسال مقاله توسط عضو محترم سایت با نام کاربری : davidfattahi
/س


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