کارگاه آموزشی توسعه وب

کارگاه آموزشی توسعه وب

اسلاید 1: کارگاه آموزشی توسعه وببخش اول - HTMLارائه: عباس نادریانجمن علمی دانشجوییمهندسی کامپیوتردانشگاه شهید بهشتینسخه 1

اسلاید 2: عناوین مطرحیوب چیست؟Web 2پروتکل HTTPکاوشگر وبپروتکل HTTPSپروتکل FTPپروتکل های دیگر وبHTML چیست؟

اسلاید 3: وب چیست؟

اسلاید 4: وب چیست؟تور گسترده جهانی (World Wide Web) مجموعه ابرمتن های متصل به هم از طریق اینترنت است. اسناد وب (ابرمتن) توسط کاوشگر وب (Web Browser) قابل مطالعه هستند.استانداردترین سند وب، HTML یا HyperText Markup Language (زبان مشخص ابرمتنی) تقریبا تمام وب را تشکیل داده است.وب در سال 1980 ابداع شد.اسناد وب از طریق ابراتصال (Hyperlink) به یکدیگر متصل هستند.استانداردهای وب از طرف World Wide Web Consortium (W3C) و Internet Engineering Task Force (IETF) وضع می شوند.مایکروسافت در عرصه وب از استانداردها پیروی نمی کند و استانداردهای خود را وضع نموده است.

اسلاید 5: Web 2خاصیت اصلی وب استاندارد بودن شکل ظاهری و سادگی دسترسی به آن بود.به دلیل کمبودها و عدم پویایی وب، وب 2 در سال 2004 شکل گرفت.”وب 2 انقلابی تجاری درصنعت کامپیوتر است که به وسیلهاتکا به اینترنت به عنوان سکوی تجارت شکل گرفته است.“در واقع تکنولوژی وب 2 تفاوتی با وب ندارد، بلکه وب 2 بدین معناست که نرم افزارها و کاربردهای مختلف همگی بر روی وب اتکا کنند و به وسیله وب توسعه یابند.با توسعه وب 2 استفاده از تکنولوژی های خاص با هدف پویا سازی صفحات رونق گرفت و دریچه جدیدی به روی وب باز شد.در وب 2، شرکتها خدمات و محصولات خود را بر روی وب و برای وب ارائه می دهند.وب 2 تا جایی پیش رفت که سیستم عامل های تحت وب پدید آمدند.

اسلاید 6: پروتکل HTTPپروتکل اصلی وب پروتکل HTTP یا HyperText Transfer Protocol است.HTTP یک پروتکل تقاضا-پاسخی (Request-Responce) است. در این پروتکل کلاینت، یک درخواست به سرور فرستاده و سرور درخواست وی را پاسخ می گوید. پس از این تراکنش، اتصال مابین طرفین منقطع می گردد.HTTP یک پروتکل بدون وضعیت (Stateless) است، بدین معنی که سرور از وضعیت فعلی کلاینت خبری ندارد و تنها تقاضای وی را دریافت می کند.تقاضا انواع مختلفی داراست. معمول ترین انوع تقاضا، POST و GET است.پاسخ سرور به تقاضا می تواند اطلاعات، HTML، فایل های تکمیلی (مانند تصاویر) و یا انواع دیگر داده باشد.در صورتی که پاسخ سرور HTML باشد، یک صفحه وب برای کاربر فرستاده می شود.

اسلاید 7: کاوشگر وبکاوشگر وب (یا Web Browser) نرم افزاریست که می تواند تحت پروتکل های وب با اینترنت کار کند.کاوشگر وب خواسته کاربر را در قالب درخواستهای HTTP برای سرور ارسال می کند و نتایج سرور را نمایش می دهد.کاوشگر وب علاوه بر قابلیت قالب بندی و نمایش اسناد HTML، توانایی دریافت تمام فایلهای تکمیلی که در سند HTML استفاده شده اند را به صورت خودکار داراست.کاوشگرهای امروزه وب علاوه بر توانایی های اصلی بالا، قابلیت های بیشمار دیگری نیز دارا هستند.کاوشگرهای معروف را می توان Internet Explorer مایکروسافت که از نیمی از استانداردهای وب تبعیت نمی کند، Firefox موزیلا که قدرتمندترین کاوشگر حرفه ای دانسته می شود و اخیرا Google Chrome که برای اهداف وب 2 طراحی شده است، دانست.

اسلاید 8: پروتکل HTTPSپروتکل HTTP به صورت تمام متن و مستقیم کار میکند. از این رو احتیاجات امنیتی را برآورده نمی سازد. برای مثال تعاملات بانکی که با استفاده از HTTP انجام شوند، کاملا قابل دید برای همگان خواهند بود.برای جبران این کمبودها، پروتکل HTTPS یا Secure HTTP ابداع شد. این پروتکل با استفاده از پروتکل امنیتی SSL ( Secure Sockets Layer ) و یا TLS ( Transport Layer Security) تبادلات سرور و کلاینت را امن می سازد. از این پروتکل در تمامی وب هایی که به امنیت احتیاج است استفاده می گردد.برای کارکرد درست HTTPS، لازم است که سرور خود را با یک گواهینامه دیجیتال (Digital Certificate) اهراز هویت کند. برای تهیه یک گواهینامه دیجیتال، لازم است تا به مراکز اعطای گواهی هزینه ای معادل 100 هزار تومان برای هر سال پرداخت.به دلیل هزینه بالا و قدیمی بودن اکثر پیاده سازی های HTTPS، این پروتکل نقاط امنیتی بسیاری را برای وب باز گذارده است.

اسلاید 9: پروتکل FTPFTP یا File Transfer Protocol یک استاندارد نسبتا قدیمیست که برای تبادل فایل در وب استفاده می شود. امروزه فایل را می توان با استفاده از HTTP به سادگی FTP منتقل کرد.در واقع FTP راه دیگری دسترسی به داده های موجود بر روی سرورهای وب است، که معمولا در دو کاربرد استفاده می شود:دریافت فایلهای بسیار بزرگ از اینترنتقراردادن فایلها و اسناد بر روی وب توسط نگهدارنده یا سازنده آناز آنجایی که FTP فقط برای تعامل فایل ایجاد شده است، هیچ سند دارای نمود ظاهری (مانند HTML برای HTTP) ندارد.

اسلاید 10: پروتکل های دیگر وبپروتکل های فراوان دیگری در وب وجود دارند که تعداد بسیار زیادی از آنها برای تبادل داده های صوتی و تصویری به کار می روند. برای کارکرد با هر پروتکل، نرم افزار مخصوص آن پروتکل احتیاج است.با روی کار آمدن وب 2 و تکنولوژی های جدید آن، نیاز به پروتکل های دیگر تقریبا مرتفع شده است. به همین دلیل آنها تقریبا کاربردهای متعدد خود را از دست داده و فراموش شده اند.

اسلاید 11: HTML چیست؟

اسلاید 12: HTML چیست؟زبان استاندارد صفحات وب. این زبان در واقع یک قالب ارائه اطلاعات است و برنامه نویسی خاصی در آن وجود ندارد.امروزه HTML تقریبا توانایی نمایش هرگونه داده ای با هر قالبی را داراست. می توان آنرا یک فرمت خیلی ساده دانست که مانند PDF و Word تصویر، متن و داده های دیگر را در کنار یکدیگر نمایش می دهد.HTML یک زبان برچسبی (Tag) است. از این رو Markup Language دانسته می شود، مانند XML که یک زبان برچسبی بدون محدودیت برچسب است.برچسب های HTML محدودند و هرکدام نمایانگر داده خاصی هستند.عنوان شروع برچسب در داخل علامت بزرگتر و کوچکتر قرار می گیرد، و پایان برچسب همانند شروع آن، فقط با تفاوت یک / است:<tagName>tagdata here, as mush as you want </tagName>

اسلاید 13: برچسب چیست؟تمام اطلاعات یک سند برچسبی، در داخل برچسب ها قرار می گیرد. هر برچسب 3 بخش دارد:عنوان برچسب (معین کننده نوع آن)صفات برچسب (معین کننده ویژگیها و رفتار آن)داده برچسب (معین کننده داده ای که برچسب ارائه می دهد)برچسب ها می توانند در یک ساختار درختی در داخل یکدیگر قرار گیرند، بدین معنی که داده یک برچسب می تواند خود شامل برچسبهای دیگر باشد.مثال برای برچسب تو در تو به همراه صفات و مقدار صفات برچسب:<tag attribute1=“attributeValue” attribute2=“attributeValue2”><innerTag> some data <anotherInnerTag /> </innerTag></tag>همانطور که در مثال مشخص است، برچسبی که داده نداشته باشد، در داخل خود بسته می شود.

اسلاید 14: برچسب ریشههمانگونه که یک فایل XML، با برچسب های خود یک ساختار درختی می سازد که تنها یک ریشه دارد (برچسب ریشه)، ریشه فایلهای HTML هم برچسب <html> است. تمام محتویات صفحه وب در داخل این برچسب قرار می گیرد.نکته: همانند فایلهای XML می توانید یک نوع و فضای نام برای فایلهای HTML تعریف کنید. این کار اخیرا به یک استاندارد تبدیل شده و بهتر است رعایت شود. نوع در خط اول فایل قرار می گیرد. انواع قابل استفاده:HTML 4.01 Strict (غیر ارائه ای)<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd>HTML 4.01 Transitional<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtdHTML 4.01 Frameset<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Frameset//EN http://www.w3.org/TR/html4/frameset.dtd>

اسلاید 15: برچسب ریشه (ادامه)XHTML 1.0 Strict<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>XHTML 1.0 Transitional<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>XHTML 1.0 Frameset<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Frameset//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd>XHTML 1.1 (strict)<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.1//EN http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd>

اسلاید 16: سرصفحه و بدنههر سند HTML از دو قسمت اصلی تشکیل شده است، سرصفحه (Head) و بدنه (Body). اطلاعات مربوط به صفحه که نمایش ظاهری ندارند، در سرصفحه قرار گرفته و اطلاعات نمایشی صفحه در قسمت بدنه جای می گیرند. به عنوان مثال:<html><head><title> Sample Webpage </title></head><body><p> hello there this is a paragraph </p><p> hello again another paragraph with <b> bold </b> text! </p></body></html>

اسلاید 17: فایل متنیاز آنجایی که HTML یک فایل متنی است، دانستن نکاتی در مورد فایل متنی سودمند به نظر می رسد:فایل های متنی سه نوع ذخیره می گردند:کاراکتر بندی ASCII: در این مدل هر کاراکتر 1 بایت می گیرد و 256 حالت دارد. این نوع کاراکتر بندی فاقد توانایی نمایش زبانهای غیر انگلیسی است.کاراکتر بندی ویندوز : در این مدل هر کاراکتر در فایل متنی 2 بایت می گیرد و بر اساس استاندارد ویندوز به شکل خاصی تبدیل می شود.کاراکتر بندی Unicode: در این مدل، هر کاراکتر 2 بایت می گیرد و توانای نمایش به اکثر زبانها وجود دارد. یونیکد خود به استانداردهای متفاوتی تقسیم می گردد که زبان فارسی در استاندارد اصلی آن، UTF-8 پشتیبانی شده است.کاراکتر انتهای خط در ویندوز و لینوکس تفاوت می کند، در ویندوز یک کاراکتر 13 (Enter) و یک کاراکتر کمکی با شماره 10 معین کننده پایان خط است ولی در لینوکس کاراکتر 10 وجود ندارد. ازاین رو فایلهای متنی لینوکس در ویندوز، یکسره و بدون خط بندی به نظر می رسند.

اسلاید 18: نکات HTMLتمامی فضاهای خالی (whitespace) پیوسته، در خروجی یک Space می شوند.از آنجایی که علامت های < > & برای معین کردن برچسب ها کاربرد دارند، برای وارد کردن آنها در متن باید تبدیل زیر انجام شود:< : &lt;> : &gt;& : &amp;برای تولید اسناد HTML می توانید از نرم افزارهای بسیاری بهره جویید، نرم افزارهای زیر از معروفترین آنها هستند:Microsoft FrontpageAdobe DreamweaverZendStudio for Eclipse

اسلاید 19: برچسبهای HTML

اسلاید 20: برچسب های مجازHTML دارای حدود 75 برچسب مجاز (امروزه) و حدود 100 برچسب معمول است. هر کدام از این برچسب ها، کاربرد خاصی دارند و اطلاعات خاصی را ارائه می دهند. در بخش بعدی تعدادی از معمول ترین این برچسب ها را بررسی خواهیم کرد.حدود 25 برچسب HTML با گذر زمان منقرض شده اند (استفاده از آنها غیر استاندارد شده است) بیشتر آنها برچسب های قالب بندی هستند که با به وجود آمدن CSS استفاده از آنها ناصحیح دانسته می شود.HTML مانند هر زبان برنامه نویسی و اسکریپتینگ دیگری، از توضیحات (Comments) پشتیبانی می کند، اما متاسفانه قالب آن کمی دشوار است:<!-- this is a comment! -->در HTML از توضیحات استفاده نمی شود مگر در موارد بسیار محدود، زیرا حجم صفحات بسیار مهم است و تا جای ممکن باید آنرا کمینه نمود.

اسلاید 21: برچسب <html>HTML به بزرگی و کوچکی حروف در نام برچسب ها حساس نیست.نام برچسب: HTMLوظیفه: مشخص کردن یک سند HTMLبدون محتوی: خیرصفات استاندارد:اختیاریDir: مشخص کننده جهت سند (چپ به راست یا بالعکس) مقادیر مجاز “rtl” و “ltr”مقدار پیش فرض: rtlLang: مشخص کننده زبان سند (بر اساس مخفف 2 حرفی زبان) مانند “fa” یا “en”

اسلاید 22: مثال <html><html dir=rtl lang=fa><head></head><body>سلام روز شما به خیر</body></html><html><head></head><body>Hello, World! </body></html>

اسلاید 23: برچسب <head>نام برچسب: Headوظیفه: مشخص کردن محدوده اطلاعات راجع به یک سندبدون محتوی: خیرصفات استاندارد: نداردمحل قرارگیری: داخل Htmlنکته: تمام برچسب هایی که در head قرار می گیرند، می توانند در body و یا جای دیگر نیز استفاده شوند، ولی استاندارد آن است که داخل head استفاده شوند.

اسلاید 24: برچسب <title>نام برچسب: Titleوظیفه: مشخص کردن عنوان صفحهبدون محتوی: خیرصفات استاندارد: نداردمحل قرارگیری: داخل Headعنوان صفحه در بالای پنجره کاوشگر نمایش داده می شود.

اسلاید 25: مثال <title><html lang=fa><head><title>عنوان صفحه</title></head><body>سلام روز شما به خیر</body></html>

اسلاید 26: برچسب <p>نام برچسب: Pوظیفه: تعریف پاراگرافبدون محتوی: خیرصفات استاندارد: Align: مرتب کردن متن داخل پاراگراف، مقادیر مجاز:Left به چپ (پیشفرض) Rightبه راستCenter به مرکزJustify هم ترازدقت کنید که برای سند های RTL جای چپ و راست در این مرتب کردن جابجا می گردد.محل قرارگیری: داخل Body و غیره

اسلاید 27: برچسب <br>نام برچسب: Brوظیفه: مشخص کردن انتهای خط (رفتن به خط بعدی)بدون محتوی: بلهصفات استاندارد: نداردمحل قرارگیری: همه جا

اسلاید 28: برچسب <img>نام برچسب: Imgوظیفه: تعریف تصویربدون محتوی: بلهصفات استاندارد: src: آدرس فایل تصویریAlt: متن جایگزین (تا هنگامی که تصویر بار شود، یا اگر نشود، این متن در جای آن نمایش داده می شود) Align: مقادیر قابل استفاده top, bottom, middle, left , rightWidth , Height: ابعاد تصویر، در صورتی که ذکر نشود اندازه خود تصویرTitle: متن راهنمای کمکی (Tooltip)Usemap: کاربرد حرفه ای (جهت تخصیصی یک نقشه منطقه بندی به تصویر)لازم به ذکر است که تقریبا تمام برچسب های HTML از صفت Title پشتیبانی میکنند، از این رو از تکرار آن می پرهیزیم.محل قرارگیری: داخل Body و غیره

اسلاید 29: مثال <img><html><head><title>عنوان صفحه</title></head><body><p>سلام روز شما به خیر، این پاراگراف اول است، <br/>تصویر هم دارد.<img src=image1.jpg width=200 align=middle/></p><p>این هم پاراگراف دوم</p><img src=image1.jpg width=200 height=200 /></body></html>

اسلاید 30: برچسب <a>نام برچسب: Aوظیفه: تعریف لنگرگاه، اتصال به صفحات دیگر یا قسمتی از صفحه جاریبدون محتوی: خیر، محتوی عنوان اتصال استصفات استاندارد: href: آدرس (URL) اتصال یا لنگرگاهName: تعریف نام لنگرگاه برای ارجاعTarget: صفحه جدید، در کجا باز شود:_blank : صفحه جدید (پنجره جدید باز می شود)_parent : در داخل صفحه ای که صفحه جاری را باز کرده است_self : (پیشفرض) در همین صفحهنام فریم: برای صفحات فریم بندی شدهمحل قرارگیری: داخل Body و غیرهاین برچسب می تواند اتصالی به یک صفحه دیگر برقرار کند، یا یک لنگرگاه در این صفحه تعریف کند. (لنگرگاه چیست؟)

اسلاید 31: مثال <a><html><body><p> This is a sample paragraph. Click<a href=http://www.google.com>Here</a>to visit Google website.<br/><a href=http://hackersite.com/hack.htmltitle=Click me to die!>Yahoo!</a><br/><br/><a href=http://somesite.com/somepage.html#anchor><img src=img.gif /></a></body></html>

اسلاید 32: برچسب <b>نام برچسب: Bوظیفه: تعریف متن Boldبدون محتوی: خیرصفات استاندارد: نداردمحل قرارگیری: داخل Body و غیرهبرچسب های دیگری مانند i و big و small و ... نیز برای قالب بندی متن به کار می روند که کاربرد آنها با css جایگزین شده است.

اسلاید 33: برچسب <sup>,<sub>نام برچسب: Sup, Subوظیفه: تعریف رو/زیر متنبدون محتوی: خیرصفات استاندارد: نداردمحل قرارگیری: داخل Body و غیرهبرچسب های دیگری مانند i و big و small و ... نیز برای قالب بندی متن به کار می روند که کاربرد آنها با css جایگزین شده است.

اسلاید 34: برچسب<hr> نام برچسب: Hrوظیفه: تعریف خط جدا کننده افقی (Horizontal Line)بدون محتوی: بلهصفات استاندارد: نداردمحل قرارگیری: داخل Body و غیرهبه مانند برچسب br که یک خط را تمام می کند و به ابتدای خط بعدی می رود، hr نیز خطی خالی کرده، در خط بعدی یک خط نازک افقی کامل رسم می کند و به ابتدای خط بعدی می رود.

اسلاید 35: مثال <sub>,<sup><html><body>Some text with^supertext.<hr/>Some more text with_subtext.</body></html>

اسلاید 36: برچسب<ol>,<ul> نام برچسب: OL,ULوظیفه: تعریف لیست مرتب (Ordered List) و لیست نامرتب (Unordered List)بدون محتوی: خیرصفات استاندارد: نداردمحل قرارگیری: داخل Body و غیرهاین دو برچسب محدوده یک لیست عددی و یا گلوله ای را مشخص می کنند. سپس با استفاده از برچسب li می توان در داخل لیست، عنصر افزود.نکته: در صورتی که در داخل برچسب های محدوده لیست، از برچسب های دیگر استفاده کنید (خارج از li)، اکثر کاوشگرها آنرا به درستی نمایش خواهند داد ولی از استاندارد خارج شده اید.

اسلاید 37: برچسب<li>نام برچسب: LIوظیفه: تعریف عنصر لیست (List Item)بدون محتوی: خیرصفات استاندارد: نداردمحل قرارگیری: داخل OL و ULهر عنصر لیست در لیستهای مرتب یک شماره می گیرد و در لیست های گلوله ای یک گلوله در ابتدای آن قرار می گیرد. لیست ها می توانند تو در تو استفاده شوند.

اسلاید 38: مثال لیست ها<html><body><ol><li>عنصر اول</li><li>عنصر دوم</li><li>عنصر سوم</li></ol><ul><li> List 1</li><li> List 2</li><li> List 3</li></ul></body></html>

اسلاید 39: برچسب های ناحیه بندینام برچسب: Span, Divوظیفه: تعریف یک ناحیه در سندبدون محتوی: خیرصفات استاندارد: نداردمحل قرارگیری: همه جابرچسب های ناحیه بندی برای جدا کردن ناحیه های HTML استفاده می شوند. این برچسب ها بسیار پرکاربرد بوده و در اسناد HTML به تعداد استفاده می شوند.برچسب Span برای ناحیه بندی قسمتی از متن استفاده می شود و تفاوتی در ظاهر سند ایجاد نمی کند.برچسب Div برای ناحیه بندی قسمتی از سند استفاده می شود و می تواند انواع برچسب های دیگر (حتی Div) را در خود نگه دارد.در بخش CSS بیشتر راجع به این برچسب ها بحث خواهد شد.

اسلاید 40: جدول ها

اسلاید 41: جدول های HTMLجدول ها از مهمترین و پرکاربردترین برچسب های HTML هستند. آنها کاربردهای زیادی دارند از جمله:ارائه اطلاعات قالب بندی شدهقالب بندی صفحاتقالب بندی تصاویریک جدول کامل با یک برچسب Table شروع و پایان می یابد.هر جدول می تواند یک قسمت بالایی (Header)، یک قسمت میانی (Body) و یک قسمت تحتانی (Footer) داشته باشد.سطر ها و ستون ها در هر ناحیه جداگانه مشخص می شوند.

اسلاید 42: برچسب <Table>نام برچسب: Tableوظیفه: تعریف یک جدول کاملبدون محتوی: خیرصفات استاندارد: Border: اندازه کادر خانه های جدول. یک عدد صحیحCellpadding: فاصله میان دیواره خانه های جدول و داده درون آنهاCellspacing: فاصله میان دو خانه جدولWidth: عرض جدول به عدد یا درصد (درصد از اندازه کل صفحه)محل قرارگیری: داخل Body

اسلاید 43: برچسب <Tr>نام برچسب: Trوظیفه: تعریف یک سطر جدول (Table Row)بدون محتوی: خیرصفات استاندارد: Align: جهت گیری محتوای یک خانه (4 حالتی)VAlign: جهت گیری عمودی محتوای یک خانه:TopMiddleBottomBaselineمحل قرارگیری: داخل Table,Tbody,Thead,Tfoot

اسلاید 44: برچسب <Td>نام برچسب: Tdوظیفه: تعریف یک خانه داده در یک سطر جدول (Table Data)بدون محتوی: خیرصفات استاندارد: Align: جهت گیری محتوای یک خانه (4 حالتی)VAlign: جهت گیری عمودی محتوای یک خانهColspan: این خانه چند ردیف را در بر بگیرد (ادغام ستونی خانه ها)Rowspan: این خانه چند ستون را در بر بگیرد(ادغام ردیفی خانه ها)محل قرارگیری: داخل tr,th

اسلاید 45: مثال جدول ساده<html><body><table border=1><tr><td>Cell 11</td><td>Cell 12</td></tr><tr><td>Cell 21</td><td>Cell 22</td></tr></table><hr/><table border=1><tr><td rowspan=2>Cell 11 <br/>Cell 21</td><td>Cell 12</td></tr><tr><!-- Cell 21 ommited --><td>Cell 22</td></tr></table></body></html>

اسلاید 46: برچسب <Tbody>نام برچسب: Tbodyوظیفه: تعریف ناحیه بدنه جدول (Table Body)بدون محتوی: خیرصفات استاندارد: Align: جهت گیری محتوای یک خانه (4 حالتی)VAlign: جهت گیری عمودی محتوای یک خانهمحل قرارگیری: داخل Table

اسلاید 47: برچسب <Thead>نام برچسب: Theadوظیفه: تعریف ناحیه فوقانی جدول (Table Header)بدون محتوی: خیرصفات استاندارد: Align: جهت گیری محتوای یک خانه (4 حالتی)VAlign: جهت گیری عمودی محتوای یک خانهمحل قرارگیری: داخل Table

اسلاید 48: برچسب <Tfoot>نام برچسب: Tfootوظیفه: تعریف ناحیه تحتانی جدول (Table Footer)بدون محتوی: خیرصفات استاندارد: Align: جهت گیری محتوای یک خانه (4 حالتی)VAlign: جهت گیری عمودی محتوای یک خانهمحل قرارگیری: داخل Table

اسلاید 49: برچسب <Th>نام برچسب: Thوظیفه: تعریف یک خانه داده در سطر ناحیه فوقانی جدول ( Table Header Data)بدون محتوی: خیرصفات استاندارد: Align: جهت گیری محتوای یک خانه (4 حالتی)VAlign: جهت گیری عمودی محتوای یک خانهمحل قرارگیری: داخل Thead>Tr

اسلاید 50: مثال جدول ناحیه بندی شده<html><body><table border=1><thead><tr><th>Month</th><th>Pays</th></tr></thead><tbody><tr><td>January</td><td>$100</td></tr><tr><td>February</td><td>$80</td></tr></tbody><tfoot><tr><td>Sum</td><td>$180</td></tr></tfoot></table></body></html>

اسلاید 51: جدول های قالب بندیهنگامی که از جداول برای قالب بندی صفحه استفاده می شود، Border آنها صفر قرار می گیرد تا مشخص نباشند.با استفاده از CSS می توان به جدول ها نمود بسیار خوب و مطلوبی داد.قالب بندی با جداول باعث استاندارد شدن شیوه نمایش صفحه می شود.جدول ها بر اساس نوع سند (DOCTYPE) به انواع مختلفی تفسیر می شوند.برای مثال سایت bazitab.com با استفاده از جداول قالب بندی شده است:

اسلاید 52:

اسلاید 53:

اسلاید 54: فرم ها

اسلاید 55: فرم های HTMLهمانطوری که اشاره شد، پروتکل HTTP بر مبنای تقاضا/پاسخ کار می کند. برای ارسال یک تقاضای پویا از صفحات وب به یک سرور، از فرمهای HTML استفاده می شود.فرم و اجزای آن نیز برچسب های HTML هستند. به هنگام ارسال (Submit) یک فرم، کاوشگر به صورت اتوماتیک محتوای درخواست فرم را به سرور ارسال می نماید.با استفاده از اتصالات، می توان درخواست های Get ایستا ایجاد کرد.درخواست ها دو نوع معمول دارند: Get و Post:در نوع Get پارامترهای درخواست در انتهای URL اضافه می شوند و قابل دیدن هستند، به همین دلیل محدودیت اندازه دارند (1 کیلوبایت)در نوع Post پارامترهای درخواست غیرقابل دید به سرور فرستاده می شوند و محدودیت کمتری دارند (64 مگابایت)مزایا و معایب Post و Get در چیست؟http://hosting.pershe.com/viewticket.php?tid=109338&c=X4jQ3Ukcپارامترهای Get (c , tid) جداکننده پارامترها از آدرس جداکننده پارامترها از یکدیگر

اسلاید 56: <form>یک فرم HTML داخل یک برچسب Form قرار می گیرد. هر فرم می تواند (در حالت معمول) یک کلید ارسال (Submit) داشته باشد، که با کلیک شدن آن یا فشرده شدن کلید Enter در هر جای فرم، کاوشگر به طور خودکار محتوای فرم را ارسال کرده و صفحه را بارگزاری مجدد می کند.یک فرم دو پارامتر اصلی داراست:Method: شیوه ارسال را معین می کند (Get/Post)Action: مقصدی که اطلاعات به آن ارسال می شوند را مشخص می سازد.برای مثال به فرم زیر توجه کنید:<form></form><form action=‘getData.php’ method=‘get’></form><form action=‘http://google.com/’ method=‘get’></form>

اسلاید 57: <input>معمول ترین فیلدهایی که در یک فرم مورد استفاده قرار می گیرند، فیلدهای ورود مستقیم اطلاعات (دکمه یا جعبه متن) هستند. انواع مختلف این فیلدها توسط صفت type مشخص می شوند:Button: یک دکمه معمولی (برای کاربردهای اسکریپتی)Checkbox: یک مربع سفید کوچک قابل تیک خوردنFile: یک فیلد انتخاب فایل (برای آپلود)Hidden: یک فیلد متنی غیرقابل دیدن (دارای کاربردهای فراوان)Password: یک فیلد متنی که محتوای خود را به شکل ستاره نشان می دهدRadio: یک دایره کوچک. از یک مجموعه Radio تنها یکی می تواند انتخاب شودText: فیلد متنی معمولیSubmit: دکمه ارسال فرمReset: دکمه پاک کردن محتوای تمام فیلدهای فرم

اسلاید 58: مثال <input><html><body><form method=get><input type=checkbox> I am a checkbox! <br/><input type=file> <br/><input type=password value=sth> <br/><input type=radio> Radio button! <br/><input type=text value=Normal!> <br/><input type=submit> | <input type=button></form></body></html>

اسلاید 59: <input> (ادامه)تقریبا اکثر فیلدهای یک فرم با استفاده از برچسب input تامین می شوند! صفات معمول یک input به شرح زیرند:Checked: در صورتی که Radio یا Checkbox استفاده شود، می تواند تیک خوردن یا نخوردن آنرا مشخص کند : Checked=‘Checked’ or elseDisabled: هر ورودی که غیرفعال شود، خاکستری شده و غیرقابل تعامل خواهد شد.MaxLength: برای text یا password حداکثر تعداد کاراکتر قابل تایپ استReadonly: برای فیلدهای text یا password، آنها را غیرقابل تغییر می کندSize: اندازه ظاهری فیلد را مشخص می کند (بر حسب تعداد کاراکتر)Value: برای دکمه ها، متن روی آنها را مشخص می سازد. برای مابقی، محتوای مقداری را مشخص می کند (که فقط در فیلدهای متنی قابل مشاهده است). این محتوا پس از ارسال فرم، به سرور ارسال می شود.Name: نامیست که سرور اطلاعات هر فیلد را با آن تمیز می دهد.

اسلاید 60: مثال دوم <input><html><body><form method=get action=http://google.com/search>عبارتی را وارد کنید تا در گوگل جستجو شود:<br/><input text value=Search String /><br/><input type=submit value=Search><br/></form></body></html>

اسلاید 61: <textarea>برچسب <textarea> جهت تعریف یک محیط ورود متن (چند خطی) استفاده می شود. از این برچسب هنگامی که لازم است متن بزرگی وارد شود، استفاده می کنند.صفت readonly برای این برچسب معتبر است.صفات rows و cols به ترتیب تعداد سطرها و ستون های یک محوطه متنی را بر حسب کاراکتر مشخص می کنند.دقت کنید هنگامی که می خواهید یک فضای متن خالی ایجاد کنید، بین شروع و پایان برچسب، خط یا فاصله وجود نداشته باشد، زیرا هرچیزی که مابین دو برچسب textarea باشد، محتوی آن محسوب می گردد:<textarea rows=‘5’ cols=‘10’>HelloThere</textarea>همانطور که مشاهده می کنید، متحوای textarea از اصولHTML پیروی نمی کند (عدم احتیاج به <br/>)

اسلاید 62: <select>برچسب Select یک Dropdown Combo ایجاد می کند، یعنی لیستی که تنها یک عنصر آن مشخص است و با کلیک بر روی آن، مابقی به صورت کرکره ای قابل انتخاب می گردند.در صورتی که صفت Mutiple از یک Select تنظیم شود، دیگر کرکره ای نبوده و به مانند یک لیست معمولی با قابلیت انتخاب چندین مورد خواهد بود. محتویات لیستهای اینگونه در قالب یک آرایه برای سرور ارسال می شوند.موارد یک لیست Select توسط برچسب های Option مشخص می گردند.هر Option ای که صفت Selected آن تنظیم شده باشد، در لیست به صورت انتخاب شده خواهد بود.هر Option اگر صفت Value تنظیم شده داشته باشد، در صورت انتخاب، Value آن به سرور ارسال می شود و در غیر اینصورت محتوای متنی آن.

اسلاید 63: مثال <select><html><body><select><option value=Wood>چوب</option><option value=Iron>آهن</option><option value=Stone>سنگ</option></select></body></html>

اسلاید 64: <label>,<fieldset>برای تنظیم راهنما و متن معرف یک فیلد در یک فرم، بهتر است بجای متن عادی از برچسب Label استفاده کنیم. اینکار توانایی قالب بندی صفحات را بیشتر می کند.تنها صفت یک Label، For است که نام یک فیلد دیگر را دریافت می کند.<label for=‘myname’>Enter your name:</label><input type=‘text’ name=‘myname’ />برای گروه بندی منطقی دسته ای از فیلدهای یک فرم، از برچسب fieldset استفاده می شود. اینکار مخصوصا در هنگام استفاده از Radio های متعدد لازم است:<fieldset><input type=‘radio’><input type=‘radio’></fieldset><fieldset><input type=‘radio’><input type=‘radiou’></fieldset>

اسلاید 65: نکات سودمند

اسلاید 66: صفتهای اشتراکیشش صفت وجود دارند که برای تمامی برچسب های HTML معتبر هستند:صفتهای هسته ای:Class: کلاس یک برچسب را مشخص می سازد (برای استفاده در CSS)Id: یک اسم برای برچسب مشخص می کند. در یک سند HTML اسم هیچ دو برچسبی نباید یکسان باشد. در اسکریپت و CSS می توان با اسم بردن یک برچسب به آن دسترسی یافت.Style: وضعیت ظاهری یک برچسب را مشخص می کند (توصیه می شود به جای آن از CSS استفاده شود)Title: متن راهنمای کمکی برچسب را مشخص می کند (با نگه داشتن ماوس نمایان می شود)صفت زبانی:Dir: جهت متن، LTR یا RTLصفت دستیابی:Tabindex: ترتیب دسترسی به یک برچسب را برای استفاده کنندگان از کیبود مشخص می سازد. در صورتی که بر روی کیبورد کلید TAB را فشار دهید، به ترتیب Tabindex روی عناصر جابجا خواهید شد.

اسلاید 67: برچسب های دیگربرچسب های زیر نیز در HTML وجود دارند که در دوره های دیگری مطرح خواهند شد:Style: یک سند CSS در درون این برچسب تعریف می شودScript: اسکریپتهای Javascript درون این برچسب نوشته می شوندMeta: برای تعریف متاداده در Head یک سند. برچسب های متا در واقع می توانند مکمل پارامترهای HTTP باشند.صفت Content برای مشخص کردن محتوای Headerصفت http-equiv برای مشخص کردن خود Headerصفت Name برای مشخص کردن نام متا دادهLink: برای تعریف یک منبع خارجی:Rel: رابطه منبع با سندHref: آدرس منبعType: نوع منبع<link rel=shortcut icon href=/favicon.ico type=image/x-icon />

اسلاید 68: تمرینات

اسلاید 69: تمریناتیک سند HTML بسازید که توسط آن بتوانید جستجوی تصاویر گوگل را انجام دهید.یک صفحه سه ستونی (مانند SBCE) بسازید و آنرا با مطالب دلخواه پر کنید، سپس آنرا بر روی کاوشگرهای مختلف (حداقل Firefox و IE) تست کنید و تفاوتها را بیان کنید. سعی کنید سند را طوری اصلاح کنید که در همه کاوشگرها یکجور دیده شود.یک وبلاگ دستی بسازید. وبلاگ شما باید چندین مطلب داشته باشد. همچنین در وبلاگ باید چند فایل برای دانلود وجود داشته باشد.یک سایت معتبر (مانند Download.com) را باز کنید، سعی کنید همانند آنرا بسازید (از نظر ظاهر عینا برابر باشد). تمام لینکهایی که در آن سایت وجود دارد را به همان مقصد پیوند بزنید، به طوری که اگر کسی سند شما را دید، نتواند تفاوت آنرا با سایت اصلی تشخیص دهد.یک فرم زیبا و قالب بندی شده برای دریافت اطلاعات کامل یک کاربر طراحی کنید.با مراجعه به اینترنت و مطالعه بیشتر راجع به برچسب IMG، یک تصویر ایجاد کنید که با کلیک بر روی هر قسمتی از آن، یک سایت مجزا باز شود. (قسمتها لزوما مربعی نباشند)