HTMLکه مخفف عبارت Hyper Text Markup Language می باشد، د
Download
Report
Transcript HTMLکه مخفف عبارت Hyper Text Markup Language می باشد، د
HTMLکه مخفف عبارت Hyper Text Markup Languageمی باشد ،در
واقع زبان مرورگرهای وب است.
تاریخچه :HTML
اقای تیم برنرز لی در سال 1989شبکه جهانی وب را طرح ریزی کرد .در واقع هدف اصلی وی فراهم اوردن ساز و کاری بود که از ان طریق محقیق
بتوانند نتایج تحقیقات خود را با یکدیگر به اشتراک بگذارند .سپسزبان نشانه گذاری فرامتنی یا Hypertext Markup
Languageکه به صورت مختصر HTMLخوانده می شود را طرح ریزی نمود و در نهایت در سال 1991این زبان به طور رسمی به دنیا
معرفی شد و این زبان به جای ی رسید که دنیای اینترنت بدون ان بی معنا است.
*************************************************
عبارت Hyperدر مقابل عبارت Linearقرار دارد .منظور از Linearساختاری "خطی" است .به عبارت دیگر فرض کنیم یک زبان برنامه
نویسی است که ساختاری خطی دارد و در ان کارها یکی پس از دیگری انجام می شوند .فرض کنیم دو دستور داریم :دستور الف و دستور ب .حال
مادامیکه دستور الف انجام نشده باشد قادر نخواهیم بود دستور ب را اجرا کنیم .اما قضیه در مورد زبان اچ تی ام ال که یک زبان Hyperاست
فرق می کند به این شکل که در هر کجای وب و در هر زمانی که باشیم می توانیم به بخش دیگری رفته و به هیچ وجه نیاز نیست تا دستورات یکی
پس از دیگری انجام شوند .به طور مثال ً
اصال نیازی نیست تا اول به سایت گوگل رفته سپس وارد سایت یاهو شویم (الزم به ذکر است که معنی
لغوی Hyperعبارت است از ماوراء ،فوق ،باال و .)...
کلمه Textکه گویا است و به معنی "متن" است .به طور کلی Hypertextبه منزله متنی است که با کلیک روی ان می توان به صفحه دیگری
رفت.
منظور از Language Markupزبانی است که در ان ،متن کاری بیش از قرار گرفتن روی صفحه مروگر انجام می دهد و از سوی دیگر به جای
متون می توان از تصاویر ،لینک ها ،جداول ،منوها و ...استفاده کرد.
همانطور که پیش از این توضیح داده شد زبان اچ تی ام ال یک زبان Markupاست .به عبارت دیگر برخالف زبان های Scriptingیا
Programmingکه برای انجام کارهای مختلف از دستورات خاصی استفاده می کنند ،زبان اچ تی ام ال از تگ ها برای انجام کارهای خود
استفاده می کنند (منظور از زبان Scriptingزبانی است که اپلیکیشن های نوشته شده با ان فقط در صورت مشاهده یک درخواست کاری را
انجام می دهد اما یک زبان Programmingزبانی است که برنامه های نوشته شده با ان بدون نیاز به دریافت درخواست از طرف کاربر هم
می توانند دستوری را اجرا کنند).
*****************************************
به طور کلی زبان اچ تی ام ال زبان قابل فهم برای کلیه مرورگرها است .در حقیقت مرورگر کدهای اچ تی ام ال را تفسیر نموده و به متونی تبدیل می کند که
برای کاربر قابل مشاهده باشند.
پس از معرفی اولین نسخه این زبان ،در هر نسخه جدید قابلیت های فراوانی به این زبان اضافه شد بطوریکه سیر پیشرفت این زبان در جدول زیر نشان داده شده است:
همانطور که در جدول باال مشاهده می شود نسخه ای تحت عنوان XHTML 1.0و XHTML5در لیست دیده می شوند .سازمانی به ادرس
www.w3c.comمتولی ارتقاء و انتشار زبان اچ تی ام ال است ً
تقریبا در سال 2000نسخه جدیدی از زبان اچ تی ام ال را تحت عنوان اکس اچ
تی ام ال را را منتشر کرد ( الزم به ذکر است که w3cمخفف World Wide Web Consortiumبه معنی کنسرسیوم شبکه جهانی
وب می باشد).
به طور کلی منظور از اکس اچ تی ام ال ترکیبی از زبان اچ تی ام ال با زبان اکس ام ال است .در واقع پس از ترکیب دو زبان با یکدیگر زبان اچ تی ام ال
توسعه پذیر تر شد و به طور کلی دست برنامه نویسان به مراتب باز تر شد .در نسخه اول این زبان کلیه تگ ها شبیه به تگ های نسخه اچ تی ام ال 4بود
با این تفاوت که یکسری تگ های تکمیلی به ان اضافه شده و یکسری قوانینی هم به ان اضافه شده است که می شود گ فت قوانین سخت گیرانه ای بودند.
همانطور که در جدول باال مشخص است ،اخرین نسخه از زبان اچ تی ام ال نسخه 5است که در این سری از اموزش ها نیز این نسخه را مد نظر قرار
خواهیم داد .به طور کلی نسخه 5این زبان به منزله نسخه تکمیلی نسخه 4است با این تفاوت که یکسری تگ های تکمیلی به ان اضافه شده است که به
مراتب برنامه نویس را در ساخت صفحات وب یاری می رسانند .عالوه بر این در نسخه 5از زبان اچ تی ام ال یک تفاوت عمده می بینیم و ان هم اینکه
نسخه 5زبان اچ تی ام ال این امکان را به برنامه نویسان می دهد تا عالوه بر صفحات وب بتوانند وب اپلیکیشن نیز طراحی کنند.
:HTML5
Html5تکنولوژی جدیدی است برای از بین بردن وابستگی وب سایت ها به نرم افزارهای مولتی مدیا و پخش کنندهای
ویدوئ مانند ادوب فلش و سیلور الیت .در حقیقت html5تمامی امکانات این نرم افزار ها را به راحتی با نوشتن چند
خط کد پیاده سازی می کند.گوگل و ایل برای پیشرفت html5و جایگزین ان با ابزار فلش با جدیت تالش میکنند.
این افزونه در ای پد تاچ تاچ و ایفون و همچنین دستگاه جدید ای پد وجود ندارد.مدیراجرای ی اپل(استیو جایز)استفاده از
برنامه ی فلش را به دلیل مناسب نبودن برای محصوالت شرک تش ممنوع کرده و همچنین از فلش به دلیل مشغول کردن
زیاد پردازنده انتقاد کرده است.
به استدالل بعضی از شرکت های فن اوری اطالعات استفاده ی جامع و گسترده از html5در نسل های بعدی تلفن
همراه امری ضروری است .مرورگرهای وب در دستگاه های ایفون نسل سوم ،حشمئ حقث و اندروید گوگل ،مرورگرهای
مبتنی بر وب کیت را مورد استفاده قرار میدهند که موتور مرورگر وب کد باز است به این معنی که محتوای مبتنی بر
،html5برای مثال ویدوئ میتوانند به طور مستقیم وبدون نیاز به به هیچ افزونه ای در مرورگر موبایل قابل مشاهده
باشند.
چه چیزهای ی را میتوان از html5انتظار داشت؟
فضای افالین Google Gearsرا میشناسید؟ html5قرار است چیزی شبیه ان در خود داشته باشد .برای مثال میتوان
با html5ایمیلهای خود را به صورت افالین خواند .مثال دیگر این است که سایتها میتوانند برخی از اطالعات خود را بر روی سیستم شما
ذخیره کنند و این یعنی چند برابر سرعتی که االن داریم درست مثل یک “ابر کوکی”.
اشکال غیر منظم :با امکانات کنونی تنها شکلی که می توان برای قسمتهای صفحه داشت مستطیل است در حالیکه در html5دیگر از این
محدودیت ها خبری نیست .می توانید از هر گوشه صفحه بهترین استفاده را ببرید .حتی میتوانید تنها با کد نویسی تصاویر ,نمودارها و هرچیزی را
که فکر کنید در صفحه خود داشته باشید .دیگر مجبور به استفاده از فلش یا افزونه های دیگر نیستید.
پخش صوت و ویدیو به صورت مستقل :این یعنی اینکه دیگر الزم به استفاده از Flashبرای پخش ویدیو و صدا نیستید .به راحتی می توان از
یک خط کد برای اینکار استفاده کرد و در عین حال تمام قابلیتهای ی نظیر عقب و جلو کردن ,ذخیره ویدیو و … را در اختیار داشته باشید.
مکان یابیhtml5 :میتواند مکان شما را تشخیص دهد و نتایج جستجو را بر حسب مکان شما سفارشی کند و یا اینکه ورودی های توییتر شما
را برچسب گذاری کند.
فرمهای هوشمندتر :جعبه های متنcheckbox ,ها ,منوهای کشوی ی و تمام عناصر یک فرم هوشمندانه تر عمل خواهند کرد و به شما
امکانات بیشتری برای کنترل اطالعات خواهند داد .برای مثال شما می توانید هنگام ورود اطالعات صحت و اعتبار انها را کنترل کنید .همچنین
عناصر فرم تعامل بیشتری با هم خواهند داشت.
تمرکز بر برنامه های تحت وب :اینده ازان برنامه های انالین خواهد بودhtml5 .این امکان را میدهد که یک برنامه تحت وب بدون درد و خون
ریزی با هر نوع سیستمی سازگار باشد و به کاربران این فرصت را میدهد تا بدون استفاده از ابزاری خاص از یک برنامه لذت ببرند .با html5
میتوان ابزارهای چت ,انجمن ,سایتهای drag-and-dropنوشت
بررسی سرعت
به نظر خودم سرعت در HTML5واقعا کافیه .ولی باز هم به غیر از لود شدن کل صفحه لود شدن خود عنصر را هم می خواهد .می
توانید از chrome.angrybirds.comامتحان کنید! البته باید مرورگر حتما کروم باشه.
بررسی هماهنگی بیشتر
اک ثر مرورگرها دیگر با HTML5هماهنگ شده اند .ولی نحوه اجرای ان در هر مرورگر فرق داره .فعال مرورگر کروم از نظر هماهنگی
بیشتر با HTML5رتبه اول رو داره .از اون جای ی که HTML5یه دفعه گسترده شد ،باالخره طول میکشه تا همه مرورگرها باهاش
هماهنگ بشن
رابط کاربری بهتر
اگه منظورم رو متوجه نشدید بخونید گرافیک! این CSS 3که به HTML5اضافه شده گرافیک خیلی باال رفته .شما می تونید افکت
های زیاد فتوشاپ ی رو با چند خط CSS 3و جاوا اسکریپت به تصویرتون اعمال کنید.
نوشتن کمتر ،کار بیشتر ()Less Code, More Work
با اضافه شدن ابزار Canvasو متدهاش به جای این که هر عکس رو جدا جدا با اسم پهلوی فایل بذاری ،فقط کافیه همه عکس ها را در
یک عکس بزاری و بعد با ابزار مخصوص خودش عکس مورد نظرت رو جدا کنی .تازه این فقط یه کارشه! بازی های ی مثل Canvas
Riderاز همین تگ برای راه اندازی بازیشون استفاده می کنند.
امنیت
ما در HTML5چیزی داریم به اسم local Storageو session Storageکه اطالعات در در سمت Client
ذخیره می کنه .حال به فرض ما که برنامه نویس باشیم از این دو برای حافظه بازی استفاده کردیم .یک نفر براحتی می تونه بازی ما رو هک
کنه و مرحله های بازی را باز کنه .حال این چیز مهمی نیست.
تاریخچه :CSS
زمانیکه زبان سی اس اس )(CSSبوجود نیامده بود ،هر مرورگری دارای قواعد مختص به خود برای نمایش تگ های اچ تی ام ال
)(HTMLبود .بنابراین می توانستیم این انتظار را داشته باشیم که یک وب سایت در مرورگر الف با ظاهر به مراتب متفاوت
تری نسب به مرورگر ب به نمایش در اید.
باالخره به خاطر وجود این ناهماهنگی ها در سال 1996نسخه اول زبان سی اس اس )(CSSتحت عنوان CSS 1.0ایجاد
شد و در سال 1998هم نسخه CSS 2.0به بازار عرضه شد .سپس در سال 2004با اعمال برخی بازنگری ها در کدهای سی اس
اس ،نسخه CSS 2.1شکل گرفت و در نهایت در سال 2011با رفع برخی مشکالت این نسخه ،مجدد تحت همین عنوان به
دنیا عرضه شد و این نسخه از سی اس اس )(CSSهمان نسخه ای است که طراحان وب با ان سر و کار دارند.
با توجه به سرعت گسترش وب و همچنین ایجاد وب اپلیکیشن ها و دستگاه های موبایل نیاز به نسخه جدیدی از سی اس اس بود
که می بایست رویکردی ً
کامال متفاوت را اتخاذ می کرد .از این رو نسخه CSS 3ایجاد شد که هنوز هم در حال توسعه و تکمیل
است.
استایل CSSچیست؟
-
-
-
-
CSSمخفف کلمه Cascading Style Sheetsمیباشند.
اولین ورژن استایلها در سال ۱۹۹۶ساخته شد .که اولین ورژن ان CSS1بود. دیگر وژن ان CSS2می باشد که در سال ۱۹۹۸ساخته شد که بیشتر برای ویرایش صفحات ،نحوه نمایشها تگها و … کاربرد دارد. فایل استایلها با فرمت CSSذخیره میشوند. جدا کردن ظاهر صفحات اعم از طرح بندی و رنگ بندی و… از محتوای صفحات مانند کد های HTMLو …انواع استایلها:
:Inline Style .۱
این نوع استایل در داخل تگهای HTMLبه کار گرفته میشوند ،و این استایل فقط بروی همان تگ به خصوص تاثیر خواهد گذاشت و به
صورت زیر نوشته خواهد شد.
:Embedded or Global Style .۲
در این نوع ،استایل نوشته شده در تمامی صفحه تاثیر خواهد گذاشت ،اینرا بین دو تگ (< )>head></headبه صورت زیر نوشته
خواهد شد.
:Linked or External style sheet .۳
نوع اخر هم معروف به استایلهای خارجی هستند که به صورت لینک فایل استایل را به صفحات خود لینک میدهید .فایلهای استایل با فرمت
CSSذخیره میشوند و به صورت زیر به صفحات لینک داده میشود.
5مورد از اثرات :CSS3
گوشههای گرد
اینترنت به تدریج دارد گردتر میشود ،ولی اکنون با CSSاز حرکت باز ایستاده و جامد شده است .به مستطیل دور این پارگراف نگاهی بیاندارید.فقط
یک تصویر نیست-روی ان کلیک راست کن تا ببینیدCSS .بدون نقص و خالص.
سایهی متن
متن گاهی اوقات می تواند واقعا به نوبه ی خود خشن به نظر بیایند ،اما کمی سایه ساده واقعا به اشیاء کمک می کند.سایه ای را که به این پارگراف
داده شده را بررسی کنید.
شیب
دیگر رنگ های یکنواخت و تصاویرشیب دارپس زمینه وجود نخواهد داشت .اکنون تنها با استفاده از CSSمیتوان شیب های محشری به وجود اورد.
متاسفانه ،به خاطر مسائل ناسازگاری جاری بین مرورگرها نیاز به چند خط دارید ،ولی میتوانید از ابزاری که بعدا برایتان توضیح میدهم برای ایجاد
اتوماتیک ان استفاده کنید.
چرخش
این که کاربردی برای این از لحاظ متن تصور کرد کاری بس دشوار است ولی برای مثال ،هنگام استفاده از تصاویر می توانید عناصر طراحی خوبی به
متن اضافه کنید .بعالوه ،توجه داشته باشید که اگرچه این تصویر چرخانده شده است ،از انجا که هنوز متنی عادی است هنوز می توانید ان را
انتخاب و با ان ارتباط متقابل داشته باشید.
انیمیشن
اه ،بله ،من بهترین نک ته را تا حاال نگه داشته امCSS .اشکال مختلف انیمیشن را برای هرتعداد از تاثیرات خوب CSSکه توصیف ان شد معرفی
می کند .در این پارگراف انتقال مالکیت را انگونه که در زیر امده تعریف کرده ام ،همچنین رنگ ساده پس زمینه و چرخش هنگام پرسه روی ان نیز
تعریف شده است .اگر هنوز برای شما بیان نشده این متن از پارگراف را ببینید تا تاثیر عملی را ببینید .شما می توانید هر چیزی را به خوبی زنده کنید.
هر عنصری را که در صدد چرخاندنش باشید احتیاج به یک کد انتقالی شبیه به این دارد.همچنین نیاز است که از بعضی از CSSهای مشابه استفاده
کنید ( مثل :مترصد بودن برای تغییر هر ویژگی که می خواهید انیمیشن کنید مثل رنگ،اندازه ،یا چرخش
ناسازگاری مرورگر متقابل
اگرچه اک ثر مرورگرهای امروزی به نوعی از تمام CSSها پشتیبانی میکند ولی بعضی از انها هنوز نیازمند کد و یا ضربه ای تا حدودی متفاوت هستند تا
ان ها را وادار به کار با اجرای استاندارد بخصوصشان کنند.برای مثال ،در کد باال ،نمونه های بسیاری ازمز) ( mozیا وب کیت) ( weskitرا
مشاهده می کنید که بعضی از مشخصات CSSرا به پیش می راند که یا به مرورگرهای براساس موزیال و یا وب کیت مربوط میشود .نوشتن این
خطهای اضافی می تواند دردسرسازشود ،بنابراین توجه داشته باشید ژنراتور CSS3ان ها را برای شما بنویسد
CSSچه تفاوتی با HTMLدارد؟
از HTMLبرای ایجاد ساختار و عناصر تشکیل دهنده صفحه استفاده می شود ،صفحه ایجاد شده با HTMLفرمت و قالب مشخصی ندارد
و عناصر صفحه به شکل نامرتبی در وب سایت نمایان می شوند .به همین دلیل باید از CSSاستفاده کرد تا بتوان صفحات ایجاد شده با
HTMLرا به فرم و قالب کاربر پسندی تبدیل کرد.
نتیجه گیری
وب میخواهد کاری کند که تمام قسمتها با استفاده از ضمیمههای CSS3و HTML5جدید هیجان انگیز تر شوند.مسلم بدانید ،ما
جهش ناگهانی دیگری از متن و همچنین نسبت باالی ی از سر و صدا را در متن واقعی خواهیم دید( درست مثل کاری که وقتی GIFهای انیمیشن
شده برای اولین بار پدیدار شدند انجام دادیم) ولی در دراز مدت خواهیم اموخت که چگونه از ابزارهای CSS3برای ایجاد هم کنشگرهای وب
جالبتری استفاده کرد .و همیشه هم میتوانید هر وقت دلتان خواست خاموشش کنید!
اگر شما خودتان طراح یا توسعه دهنده وب هستید ،فقط به خاطر داشته باشید که CSS3نباید تنها گزینه ی انتخاب باشد.اگر سایت شما
بدون CSS3کار نمیکند به این خاطر بوده است که از ان به درستی استفاده نکرده اید .از CSSبایستی برای افزایش تجربه استفاده کرد نه
کارامدی برنامه.
سرفصل های اموزشی و انچه در این مجموعه خواهید اموخت عبارتند از :
معرفی زبان طراحی اچ تی ام ال
اشنای ی با تگ ها
اشنای ی با ارتباط متن ها و تگ ها
اشنای ی با قرار دادن لینک در صفحات
اشنای ی با قرار دادن تصاویر در صفحات
اشنای ی با ایجاد جداول در صفحات
اشنای ی با اسکریپت های بوت استراپ
اشنای ی با تقسیم بندی صفحه توسط جدول
اشنای ی با ارتباط بین جداول و متون در صفحات
اشنای ی با لیست های مرتب شده و غیر مرتب شده
اشنای ی با استایل دادن به صفحات و متون
اشنای ی با روش طراحی به کمک دیو
اشنای ی با کسکیت استایل شیت ها ()CSS
اشنای ی با روش اعمال استایل درون خطی
اشنای ی با روش اعمال استایل درون صفحه ای
اشنای ی با روش اعمال استایل خارجی
اشنای ی با تگ ها و استایل ها
اشنای ی با ای دی ها و استایل ها
اشنای ی با کالس ها و استایل ها
اشنای ی با تصاویر و استایل ها
اشنای ی با دیو ها و استایل ها