1 / 69

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

کارگاه آموزشی توسعه وب. بخش اول - HTML. ارائه: عباس نادری انجمن علمی دانشجویی مهندسی کامپیوتر دانشگاه شهید بهشتی. نسخه 1. عناوین مطرحی. وب چیست؟ Web 2 پروتکل HTTP کاوشگر وب پروتکل HTTPS پروتکل FTP پروتکل های دیگر وب HTML چیست؟. وب چیست؟. وب چیست؟.

Download Presentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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. پروتکل FTP • FTP یا 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.dtd" HTML 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 Frontpage • Adobe Dreamweaver • ZendStudio 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” مقدار پیش فرض: rtl • Lang: مشخص کننده زبان سند (بر اساس مخفف 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 , right • Width , 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.html' title='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 <sup>super</sup> text. <hr/> Some more text with <sub>sub</sub> text. </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: جهت گیری عمودی محتوای یک خانه: • Top • Middle • Bottom • Baseline محل قرارگیری: داخل 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>

More Related