پاورپوینت HTML

بخشی از پاورپوینت

اسلاید 1 :

HTML که مخفف عبارت Hyper Text Markup Language می باشد، در واقع زبان مرورگرهای وب است.

اسلاید 2 :

تاریخچه HTML:

آقای تیم برنرز لی در سال 1989 شبکه جهانی وب را طرح ریزی کرد. در واقع هدف اصلی وی فراهم آوردن ساز و کاری بود که از آن طریق محقیق بتوانند نتایج تحقیقات خود را با یکدیگر به اشتراک بگذارند. سپسزبان نشانه گذاری فرامتنی یا Hypertext Markup Language که به صورت مختصر HTML خوانده می شود را طرح ریزی نمود و در نهایت در سال 1991 این زبان به طور رسمی به دنیا معرفی شد و این زبان به جایی رسید که دنیای اینترنت بدون آن بی معنا است.

عبارت Hyper در مقابل عبارت Linear قرار دارد. منظور از Linear ساختاری "خطی" است. به عبارت دیگر فرض کنیم یک زبان برنامه نویسی است که ساختاری خطی دارد و در آن کارها یکی پس از دیگری انجام می شوند. فرض کنیم دو دستور داریم: دستور الف و دستور ب. حال مادامیکه دستور الف انجام نشده باشد قادر نخواهیم بود دستور ب را اجرا کنیم. اما قضیه در مورد زبان اچ تی ام ال که یک زبان Hyper است فرق می کند به این شکل که در هر کجای وب و در هر زمانی که باشیم می توانیم به بخش دیگری رفته و به هیچ وجه نیاز نیست تا دستورات یکی پس از دیگری انجام شوند. به طور مثال اصلاً نیازی نیست تا اول به سایت گوگل رفته سپس وارد سایت یاهو شویم (لازم به ذکر است که معنی لغوی Hyper عبارت است از ماوراء، فوق، بالا و .).

اسلاید 3 :

کلمه Text که گویا است و به معنی "متن" است. به طور کلی Hypertext به منزله متنی است که با کلیک روی آن می توان به صفحه دیگری رفت.

منظور ازLanguage Markup زبانی است که در آن، متن کاری بیش از قرار گرفتن روی صفحه مروگر انجام می دهد و از سوی دیگر به جای متون می توان از تصاویر، لینک ها، جداول، منوها و . استفاده کرد.

همانطور که پیش از این توضیح داده شد زبان اچ تی ام ال یک زبان Markup است. به عبارت دیگر برخلاف زبان های Scripting یا Programming که برای انجام کارهای مختلف از دستورات خاصی استفاده می کنند، زبان اچ تی ام ال از تگ ها برای انجام کارهای خود استفاده می کنند (منظور از زبان Scripting زبانی است که اپلیکیشن های نوشته شده با آن فقط در صورت مشاهده یک درخواست کاری را انجام می دهد اما یک زبان Programming زبانی است که برنامه های نوشته شده با آن بدون نیاز به دریافت درخواست از طرف کاربر هم می توانند دستوری را اجرا کنند).

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

اسلاید 4 :

پس از معرفی اولین نسخه این زبان، در هر نسخه جدید قابلیت های فراوانی به این زبان اضافه شد بطوریکه سیر پیشرفت این زبان در جدول زیر نشان داده شده است:

اسلاید 5 :

همانطور که در جدول بالا مشاهده می شود نسخه ای تحت عنوان XHTML 1.0 و XHTML5 در لیست دیده می شوند. سازمانی به آدرس www.w3c.com متولی ارتقاء و انتشار زبان اچ تی ام ال است تقریباً در سال 2000 نسخه جدیدی از زبان اچ تی ام ال را تحت عنوان اکس اچ تی ام ال را را منتشر کرد ( لازم به ذکر است که w3c مخفف World Wide Web Consortium به معنی کنسرسیوم شبکه جهانی وب می باشد).

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

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

اسلاید 6 :

HTML5:
Html5 تکنولوژی جدیدی است برای از بین بردن وابستگی وب سایت ها به نرم افزارهای مولتی مدیا و پخش کنندهای ویدئو مانند ادوب فلش و سیلور لایت. در حقیقت html5 تمامی امکانات این نرم افزار ها را به راحتی با نوشتن چند خط کد پیاده سازی می کند.گوگل و ایل برای پیشرفت html5 و جایگزین آن با ابزار فلش با جدیت تلاش میکنند. این افزونه در آی پد تاچ تاچ و آیفون و همچنین دستگاه جدید آی پد وجود ندارد.

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

اسلاید 7 :

فضای آفلاین Google Gearsرا میشناسید؟ html5 قرار است چیزی شبیه آن در خود داشته باشد. برای مثال میتوان باhtml5 ایمیلهای خود را به صورت آفلاین خواند. مثال دیگر این است که سایتها میتوانند برخی از اطلاعات خود را بر روی سیستم شما ذخیره کنند و این یعنی چند برابر سرعتی که الان داریم درست مثل یک “ابر کوکی”.

اشکال غیر منظم: با امکانات کنونی تنها شکلی که می توان برای قسمتهای صفحه داشت مستطیل است در حالیکه در html5 دیگر از این محدودیت ها خبری نیست. می توانید از هر گوشه صفحه بهترین استفاده را ببرید. حتی میتوانید تنها با کد نویسی تصاویر, نمودارها و هرچیزی را که فکر کنید در صفحه خود داشته باشید. دیگر مجبور به استفاده از فلش یا افزونه های دیگر نیستید.

پخش صوت و ویدیو به صورت مستقل: این یعنی اینکه دیگر لازم به استفاده از Flash برای پخش ویدیو و صدا نیستید. به راحتی می توان از یک خط کد برای اینکار استفاده کرد و در عین حال تمام قابلیتهایی نظیر عقب و جلو کردن, ذخیره ویدیو و … را در اختیار داشته باشید.

مکان یابی: html5 میتواند مکان شما را تشخیص دهد و نتایج جستجو را بر حسب مکان شما سفارشی کند و یا اینکه ورودی های توییتر شما را برچسب گذاری کند.

چه چیزهایی را میتوان از html5انتظار داشت؟

اسلاید 8 :

فرمهای هوشمندتر: جعبه های متن, checkbox ها , منوهای کشویی و تمام عناصر یک فرم هوشمندانه تر عمل خواهند کرد و به شما امکانات بیشتری برای کنترل اطلاعات خواهند داد. برای مثال شما می توانید هنگام ورود اطلاعات صحت و اعتبار آنها را کنترل کنید. همچنین عناصر فرم تعامل بیشتری با هم خواهند داشت.
تمرکز بر برنامه های تحت وب: آینده ازآن برنامه های آنلاین خواهد بود. html5 این امکان را میدهد که یک برنامه تحت وب بدون درد و خون ریزی با هر نوع سیستمی سازگار باشد و به کاربران این فرصت را میدهد تا بدون استفاده از ابزاری خاص از یک برنامه لذت ببرند. با html5 میتوان ابزارهای چت, انجمن, سایتهای drag-and-drop نوشت

بررسی سرعت

به نظر خودم سرعت در HTML5 واقعا کافیه. ولی باز هم به غیر از لود شدن کل صفحه لود شدن خود عنصر را هم می خواهد. می توانید از chrome.angrybirds.com امتحان کنید! البته باید مرورگر حتما کروم باشه.

بررسی هماهنگی بیشتر

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

اسلاید 9 :

رابط کاربری بهتر

اگه منظورم رو متوجه نشدید بخونید گرافیک! این CSS 3 که به HTML5 اضافه شده گرافیک خیلی بالا رفته. شما می تونید افکت های زیاد فتوشاپی رو با چند خط CSS 3 و جاوا اسکریپت به تصویرتون اعمال کنید.

نوشتن کمتر، کار بیشتر (Less Code, More Work)

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

امنیت

ما در HTML5 چیزی داریم به اسم local Storage و session Storage که اطلاعات در در سمت Client ذخیره می کنه. حال به فرض ما که برنامه نویس باشیم از این دو برای حافظه بازی استفاده کردیم. یک نفر براحتی می تونه بازی ما رو هک کنه و مرحله های بازی را باز کنه. حال این چیز مهمی نیست.

اسلاید 10 :

تاریخچه CSS:
زمانیکه زبان سی اس اس(CSS) بوجود نیامده بود، هر مرورگری دارای قواعد مختص به خود برای نمایش تگ های اچ تی ام ال (HTML) بود. بنابراین می توانستیم این انتظار را داشته باشیم که یک وب سایت در مرورگر الف با ظاهر به مراتب متفاوت تری نسب به مرورگر ب به نمایش در آید.

بالاخره به خاطر وجود این ناهماهنگی ها در سال 1996 نسخه اول زبان سی اس اس (CSS) تحت عنوان CSS 1.0 ایجاد شد و در سال 1998 هم نسخه CSS 2.0 به بازار عرضه شد. سپس در سال 2004 با اعمال برخی بازنگری ها در کدهای سی اس اس، نسخه CSS 2.1 شکل گرفت و در نهایت در سال 2011 با رفع برخی مشکلات این نسخه، مجدد تحت همین عنوان به دنیا عرضه شد و این نسخه از سی اس اس (CSS) همان نسخه ای است که طراحان وب با آن سر و کار دارند.

با توجه به سرعت گسترش وب و همچنین ایجاد وب اپلیکیشن ها و دستگاه های موبایل نیاز به نسخه جدیدی از سی اس اس بود که می بایست رویکردی کاملاً متفاوت را اتخاذ می کرد. از این رو نسخه CSS 3 ایجاد شد که هنوز هم در حال توسعه و تکمیل است.

اسلاید 11 :

استایل CSS چیست؟
CSS مخفف کلمه Cascading Style Sheets میباشند.
- اولین ورژن استایلها در سال ۱۹۹۶ ساخته شد. که اولین ورژن آن CSS1 بود.- دیگر وژن آن CSS2 می باشد که در سال ۱۹۹۸ ساخته شد که بیشتر برای ویرایش صفحات، نحوه نمایشها تگها و … کاربرد دارد.- فایل استایلها با فرمت CSS ذخیره میشوند.- جدا کردن ظاهر صفحات اعم از طرح بندی و رنگ بندی و… از محتوای صفحات مانند کد های HTML و …

انواع استایلها:

۱. Inline Style:این نوع استایل در داخل تگهای HTML به کار گرفته میشوند، و این استایل فقط بروی همان تگ به خصوص تاثیر خواهد گذاشت و به صورت زیر نوشته خواهد شد.

۲. Embedded or Global Style:در این نوع، استایل نوشته شده در تمامی صفحه تاثیر خواهد گذاشت، اینرا بین دو تگ ( ) به صورت زیر نوشته خواهد شد.

۳. Linked or External style sheet: نوع آخر هم معروف به استایلهای خارجی هستند که به صورت لینک فایل استایل را به صفحات خود لینک میدهید. فایلهای استایل با فرمت CSS ذخیره میشوند و به صورت زیر به صفحات لینک داده میشود.

اسلاید 12 :

5مورد از اثرات :CSS3
گوشههای گرد
اینترنت به تدریج دارد گردتر میشود، ولی اکنون با CSS از حرکت باز ایستاده و جامد شده است. به مستطیل دور این پارگراف نگاهی بیاندارید.فقط یک تصویر نیست-روی آن کلیک راست کن تا ببینید. CSS بدون نقص و خالص.
سایهی متن متن گاهی اوقات می تواند واقعا به نوبه ی خود خشن به نظر بیایند، اما کمی سایه ساده واقعا به اشیاء کمک می کند.سایه ای را که به این پارگراف داده شده را بررسی کنید.
شیب
دیگر رنگ های یکنواخت و تصاویرشیب دارپس زمینه وجود نخواهد داشت. اکنون تنها با استفاده از CSS میتوان شیب های محشری به وجود آورد. متاسفانه، به خاطر مسائل ناسازگاری جاری بین مرورگرها نیاز به چند خط دارید، ولی میتوانید از ابزاری که بعدا برایتان توضیح میدهم برای ایجاد اتوماتیک آن استفاده کنید.
چرخش این که کاربردی برای این از لحاظ متن تصور کرد کاری بس دشوار است ولی برای مثال ،هنگام استفاده از تصاویر می توانید عناصر طراحی خوبی به متن اضافه کنید. بعلاوه، توجه داشته باشید که اگرچه این تصویر چرخانده شده است، از آنجا که هنوز متنی عادی است هنوز می توانید آن را انتخاب و با آن ارتباط متقابل داشته باشید.

اسلاید 13 :

انیمیشن
آه، بله ، من بهترین نکته را تا حالا نگه داشته ام.CSS اشکال مختلف انیمیشن را برای هرتعداد از تاثیرات خوب CSS که توصیف آن شد معرفی می کند. در این پارگراف انتقال مالکیت را آنگونه که در زیر آمده تعریف کرده ام، همچنین رنگ ساده پس زمینه و چرخش هنگام پرسه روی آن نیز تعریف شده است. اگر هنوز برای شما بیان نشده این متن از پارگراف را ببینید تا تاثیر عملی را ببینید. شما می توانید هر چیزی را به خوبی زنده کنید.
هر عنصری را که در صدد چرخاندنش باشید احتیاج به یک کد انتقالی شبیه به این دارد.همچنین نیاز است که از بعضی از CSS های مشابه استفاده کنید ( مثل: مترصد بودن برای تغییر هر ویژگی که می خواهید انیمیشن کنید مثل رنگ،اندازه ، یا چرخش

ناسازگاری مرورگر متقابل

اگرچه اکثر مرورگرهای امروزی به نوعی از تمام CSS ها پشتیبانی میکند ولی بعضی از آنها هنوز نیازمند کد و یا ضربه ای تا حدودی متفاوت هستند تا آن ها را وادار به کار با اجرای استاندارد بخصوصشان  کنند.برای مثال، در کد بالا، نمونه های بسیاری ازمز) (moz یا وب کیت) (weskit را مشاهده می کنید که بعضی از مشخصات CSS را به پیش می راند که یا به مرورگرهای براساس موزیلا و یا وب کیت مربوط میشود. نوشتن این خطهای اضافی می تواند دردسرسازشود، بنابراین توجه داشته باشید ژنراتور CSS3 آن ها را برای شما بنویسد

اسلاید 14 :

CSSچه تفاوتی با HTMLدارد؟

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

نتیجه گیری

وب میخواهد کاری کند که تمام قسمتها با استفاده از ضمیمههای CSS3 و HTML5 جدید هیجان انگیز تر شوند.مسلم بدانید، ما جهش ناگهانی دیگری از متن و همچنین نسبت بالایی از سر و صدا را در متن واقعی خواهیم دید( درست مثل کاری که وقتی GIF های انیمیشن شده برای اولین بار پدیدار شدند انجام دادیم) ولی در دراز مدت خواهیم آموخت که چگونه از ابزارهای CSS3 برای ایجاد هم کنشگرهای وب جالبتری استفاده کرد . و همیشه هم میتوانید هر وقت دلتان خواست خاموشش کنید!

اگر شما خودتان طراح یا توسعه دهنده وب هستید ، فقط به خاطر داشته باشید که CSS3 نباید تنها گزینه ی انتخاب باشد.اگر سایت شما بدون CSS3 کار نمیکند به این خاطر بوده است که از آن به درستی استفاده نکرده اید. از CSS بایستی برای افزایش تجربه استفاده کرد نه کارامدی برنامه.

اسلاید 15 :

سرفصل های آموزشی  و آنچه در این مجموعه خواهید آموخت عبارتند از :
معرفی زبان طراحی اچ تی ام ال
آشنایی با تگ ها
آشنایی با ارتباط متن ها و تگ ها
آشنایی با  قرار دادن لینک در صفحات
آشنایی با  قرار دادن تصاویر در صفحات
آشنایی با ایجاد جداول در صفحات
آشنایی با اسکریپت های بوت استراپ
آشنایی با تقسیم بندی صفحه توسط جدول
آشنایی با ارتباط بین جداول و متون در صفحات
آشنایی با لیست های مرتب شده و غیر مرتب شده
آشنایی با استایل دادن به صفحات و متون

اسلاید 16 :

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