آموزش HTML (کدنویسی)
اسلاید 1: آموزش HTML
اسلاید 2: مقدمه ای بر وب و HTMLتمام صفحات وب با نوعی از HTML ساخته می شوند. همه صفحات وب شامل دستورالعمل هايی برای نمايش توسط مرورگر ها هستند، و مرورگر ها با خواندن اين دستورالعمل ها صفحات را نشان می دهند. دستورالعمل های نمايش صفحات وب، برچسبهای HTML (Markup Language Text Hyper ) ناميده می شوند.
اسلاید 3: يک فايل HTML چيست ؟ يک فايل HTML فايل متنی ساده ای شامل برچسب ها (Tag) می باشد؛ که بهتر است پسوند html يا htm داشته باشد و می تواند توسط يک ويرايشگر ساده متن مانند Notepad ساخته شود. برای بهتر روشن شدن مطلب بهتر است يک فايل HTML بسازيم.در Windows برنامه Notepad را اجرا کنيد و متن زير را بنويسيد <html> <head> <title>title of page </title> </head> <body> This is my first home page.<b> This text is bold </b> </body> </html>
اسلاید 4: اين فايل را با نام Test.htm ذخيره کنيد. حال مرورگر اينترنت خود را باز کرده و گزينه Open يا Open Page را از منوی File مرورگر انتخاب کنيد؛ يک جعبه محاوره ای باز خواهد شد، Browse يا Choose Fileرا انتخاب کنيد و فايلTest.htm که هم اکنون ساخته ايد را بيابيد، انتخابش کنيد و روی Open کليک کنيد. حال شما يک آدرس مانند: D:My DocumentsTest.htm را در جعبه محاوره ای خواهيد ديد. روی OK کليک کنيد، مرورگر صفحه ساخته شده توسط شما را نشان می دهد.
اسلاید 5: نکته ای درباره ويرايشگرهای HTML : شما می توانيد صفحات HTML را با ويرايشگرهای WYSIWYG (What You See Is What You Get) مانند: FrontPage و Claris Home Page و Adobe PageMillبه جای نوشتن برچسبهای مورد نياز در يک فايل متنی ساده؛ ويرايش نماييد. اما اگر می خواهيد يک طراح حرفه ای صفحات وب شويد بهتر است از يک ويرايشگر ساده متن استفاده کنيد تا HTML را به خوبی درک کنيد و در مباحث پيشرفته به درستی و با تسلط از آن استفاده کنيد.هنگامی که شما یک فایل HTML را ذخیره می کنید شما می توانید هرکدام از پسوندهای htm. یا html. را انتخاب کنید.ما در مثال هایمان از پسوند htm. استفاده می کنیم. این ممکن است یک رفتار بد موروثی از گذشته باشد که بیشتر نرم افزارهایی که استفاده می شوند فقط پسوند سه حرفی را قبول می کنند.با نرم افزار جدیدتر ما فکر می کنیم که اگر از پسوند html. استفاده کنیم بسیار ایمن تر خواهیم بود.
اسلاید 6: برچسبهای HTML برچسبها برای مشخص کردن عناصر فايل HTML استفاده می شوند و توسط دو حرف < و > احاطه می شوند. برچسبها معمولا به صورت جفت استفاده می شوند مانند <b> و </b> ؛ برچسب اول، برچسب ابتدايی و برچسب دوم، برچسب انتهايی ناميده می شود و متن بين آنها مندرجات عنصر می باشد. برچسبها به بزرگی يا کوچکی حروف حساس نيستند مثلا <b> همانند <B> می باشد اما ما در اين کتاب از حروف کوچک استفاده می کنيم. اگر می خواهيد خود را برای استفاده از نسل جديد HTML آماده کنيد شما نيز بهتر است از حروف کوچک استفاده کنيد. ضمنا اين پيشنهادی است که W3C (World Wide Web Consortium) برای استفاده از XHTML می کند.
اسلاید 7: عناصر HTML برای روشن شدن مفهوم عنصر به دو مثال زير بسنده می کنيم: خط زير يک عنصر است: <b>This text is bold</b> اين عنصر با برچسب ابتدايی <b> شروع شده و با برچسب انتهايی </b> پايان می پذيرد و This text is bold نيز مندرجات عنصر است. خطوط زير نيز مجموعا يک عنصر می باشد که شروع آن با برچسب ابتدايی <body> و پايان آن با برچسب انتهايی </body> می باشد. <body>This is my first homepage. <b>This text is bold</b></body>
اسلاید 8: مشخصه برچسبها برچسبها می توانند دارای مشخصه (Attribute) باشند. مشخصه ها می توانند اطلاعات بيشتری در باره عناصر HTML صفحه شما تدارک ببينند. برچسب <body> عنصر بدنه صفحه شما را تعريف می کند. با اضافه کردن مشخصه bgcolor شما می توانيد به مرورگر بگوييد که رنگ پس زمينه شما مثلا قرمز باشد؛ مانند: <body bgcolor=red> برچسب <table> يک جدول ايجاد می کند. با اضافه کردن مشخصه border می توانيد به مرورگر بگوييد که مثلا جدول شما حاشيه ندارد؛ مانند: <table border=0> مشخصه ها همواره به شکل جفت نام و مقدار به کار می روند: name=value ؛ و همواره به برچسب ابتدايی اضافه می شوند. در ضمن بهتر است که مقدار مشخصه ها بين علامتهای نقل قول قرار گيرند.
اسلاید 9: برچسبهای اساسی HTML
اسلاید 10: سربرگ HTML<HTML> يعني آغاز سند html و </HTML> يعني پايان سند. دستورات رابين اينها قرار مي دهيم. اينها تگهاي آغازين وپاياني هستند. براي ایجاد تگ پاياني كافيست يك / به تگ آغازين اضافه كنيم. ولي همه تگها داراي تگ پاياني نیستند . برچسب <head> اين برچسب شامل اطلاعاتی عمومی درباره فايل HTML می باشد. عناصر داخل برچسب <head> توسط مرورگر نشان داده نمی شوند. بر اساس استانداردهای HTML فقط تعداد کمی از برچسبها مجاز به قرار گرفتن در برچسب <head>می باشند و آنها عبارتند از :<title> و <base> و <link> و <meta> و <style> و <script>. برچسب <title> توسط اين برچسب می توانيم عنوانی در نوار عنوان مرورگر بنويسيم. همانطور که در مثال زير می بينيد عبارت The title در نوار عنوان به نمايش در خواهد آمد. در ضمن اين عبارت در متن مرورگر ديده نمی شود و فقط محتويات داخل برچسب پاراگراف ديده خواهد شد.
اسلاید 11:
اسلاید 12: عنوانها عنوانها توسط برچسب <h1> تا <h6> ايجاد می شوند که <h1> بزرگترين عنوان و <h6> کوچکترين عنوان را ايجاد می کند. HTML به طور خودکار يک خط خالی قبل و بعد از عنوان اضافه می کند. به مثال زير توجه کنيد. <H1> This is a heading </H1><H2> This is a heading </H2><H3> This is a heading </H3><H4> This is a heading </H4><H5> This is a heading </H5><H6> This is a heading </H6>
اسلاید 13: پاراگراف پاراگرافها توسط برچسب <p> ايجاد می شوند؛ و همانند عنوانهای HTML به طور خودکار يک خط خالی قبل و بعد از عنوان اضافه می کند.
اسلاید 14: شکست خطوط برچسب <br> هنگامی استفاده می شود که شما می خواهيد يک خط را پايان دهيد و ادامه متن به خط بعدی برود ولی پاراگراف جديدی را شروع نکنيد. برچسب <br> يک برچسب خالی می باشد و بر چسب انتهايی ندارد.
اسلاید 15: توضيحات در HTML برچسب توضيحات برای قرار دادن توضيحاتی در فايل HTML استفاده می شود؛ و مرورگر آنها را ناديده می گيرد <!-- This is a comment --> ) (و در خروجی نمايش نمی دهد. شما توسط اين برچسب می توانيد فايل HTML خود را تشريح کنيد و هنگامی که می خواهيد آن را ويرايش نماييد به شما کمک خواهد کرد تا سردرگم نشويد، اين مسئله خصوصا در فايلهای HTML بزرگ صادق است.
اسلاید 16: برچسب خط افقی برای جدا کردن قسمتهايی از متن می توانيد از بر چسب <hr> استفاده کنيد. برای درک مطلب، بهتر است مثال زير را ببينيد.
اسلاید 17: چند نکته مفيد : * هنگامی که متنی را در HTML می نويسيد هرگز نمی توانيد مطمئن باشيد که متن شما در مرورگرهای ديگر چگونه ديده خواهد شد. چون بعضی از صفحه نمايشها کوچک و بعضی بزرگ هستند. ضمنا متن شما هرگاه که کاربر اندازه پنجره خود را تغيير می دهد، شکل جديدی به خود می گيرد. پس هرگز سعی نکنيد که متن خود را با اضافه کردن خط خالی و يا فاصله بين حروف مرتب کنيد. * در HTML هر تعداد فاصله که درکنار هم استفاده کرده ايد به عنوان يکی حساب می شود. پس از استفاده کردن فاصله های اضافی در کنار هم خودداری کنيد، چون فقط اندازه فايل HTML خود را زياد می کنيد. * هرگز از پاراگراف(<p>) خالی برای قرار دادن فاصله بين خطوط استفاده نکيد و به جای آن از <br> استفاده کنيد، در ضمن از <br> برای ساختن فهرست استفاده نکنيد؛ کمی صبر کنيد تا طرز ساختن فهرست ها را در HTML فرا بگيريد.
اسلاید 18: جدول برچسبهای اساسی و کاربرد آنها
نقد و بررسی ها
هیچ نظری برای این پاورپوینت نوشته نشده است.