« به وبلاگ من خوش آمدید »

فعال در همه زمینه ها ...

« به وبلاگ من خوش آمدید »

فعال در همه زمینه ها ...

مقدمه ای بر HTML ...

در این درس با ویژگیهای فایلهای HTML یا اچتمل و نحوه ایجاد یک فایل ساده و نمایش آن در صفحه مرورگرتان آشنا خواهید شد.

یک فایل HTML چیست؟
  • HTML را "اچ تی ام ال" و یا اچتمل بخوانید.
  • HTML برگرفته از حروف اول Hyper Text Markup Language میباشد.
  • یک فایل HTML فایلی از نوع text میباشد که متشکل از markup tag ها میباشد.
  • مرورگر یا Browser از روی markup tag ها می فهمد که چگونه باید صفحه را نمایش بدهد.
  • یک فایل HTML باید دارای انشعاب htm و یا html باشد.
  • یک فایل HTML فایلی از نوع text میباشد که با هر ادیتور ساده ای قابل ایجاد است.
  • وظیفه اصلی تگ های اچتمل ( markup tags ) بیان چگونگی نمایش اطلاعات میباشد.

میخواهید که یک فایل اچتمل بسازید؟

اگر از ویندوز مایکروسافت استفاده میکنید، Notepad را باز کرده (Mac کارها از SimplaeText استفاده کنند. ) و متن زیر را در آن تایپ کنید:

<html>
<head>
<title>Title of page</title>
</head>
<body>
This is my first html page. <b>This text is bold</b>
</body>
</html>

سپس فایل را با نام مثلا test.html در درایو c: ذخیره کنید.

برای دیدن فایل اچتمل بالا در مرورگر یا Brower تان ( معمولا اینترنت اکسپلورر و یا نتسکیپ نویگیتور ) کافی است که از روی منوی File/Open file فایل بالا را از روی محل ذخیره شده بخوانید. ( به آدرس فایل در قسمت Address توجه کنید، مثلا c: est.html)
یکی از مهمترین وظایف مرورگرها نمایش صفحات اچتمل میباشد، چه این صفحات روی کامپیوتر شما ذخیره شده باشند و یا اینکه از اینترنت خوانده شوند. با کلیک روی یک لینک فایلی شبیه فایل ذخیره شده توسط شما از روی وب سرور توسط مرورگرتان خوانده شده و سپس نمایش داده خواهد شد!!! ( به آدرس فایل در قسمت Address توجه کنید. )


توضیح مثال بالا

اولین تگ مثال بالا تگ <html> میباشد. از روی این تگ، مرورگر نوع متن یعنی اچتمل بودنش را یافته و از روی <html/> انتهای متن اچتمل را میبابد.

متن بین تگ <head> و تگ <head/> اطلاعات شناسنامه ای یا "Header information" متن اچتمل بوده و نمایش داده نخواهند شد. در این مثال با کمک تگهای <title> و <title/> تیتر و یا Title صفحه که در این مثال عبارت "Title of page" میباشد در بالای مرورگر نمایش داده خواهد شد.

متن بین تگ <body> و انتهای آن یعنی تگ <body/> تنها اطلاعاتی است که توسط مرورگرنمایش داده خواهند شد.

متن بین تگ <b> و انتهای آن یعنی تگ <b/> بصورت Bold و یا توپر نمایش داده خواهند شد.


انشعاب فایل htm یا html ؟

اغلب مرورگرها هر دو نوع انشعاب را به خوبی میشناسند ولی ترجیحا به هنگام ذخیره فایلهای اچتمل از html استفاده کنید.( استفاده از انشعابهای سه حرفی مانند htm مربوط به قدیم و سیستم عاملهائی چون DOS بودند.)


نکته ای در مورد ادیتورهای اچتمل ( HTML Editors )

با وجودیکه با استفاده از ادیتورهای اختصاصی اچتمل مانند FrontPage و یا Claris Home Page امکان نوشتن و طراحی صفحات اچتمل بصورت WYSIWYG یا "What You See Is What You Get" وجود دارد اما توصیه میشود که از ادیتورهای معمولی متن برای تهیه صفحات خود استفاده کرده، عملکرد تگها را شناخته و هیچگاه بدون اینکه بدانید کاربرد یک تگ چیست آنرا بکار نبرید.


بیشترین سوالات پرسیده شده ( FAQ ) :

فایلم را درست کردم ولی هنوز نمیتوانم آنرا در صفحه مرورگرم ببینم، مشکل کجاست؟
مطمئن شوید که فایل را با انشعاب درست (htm یا html ) ذخیره کرده اید. در ضمن مطمئن شوید که همان فایل را Open کرده اید.( نام و مسیر فایل را در قسمت Address مرورگرتان چک کنید.)

هر بار پس از تغییر و ادیت مثالها نسخه اولیه را در صفحه مرورگرم میبینم و تغییرات داده شده مشاهده نمیشود، مشکل کجاست؟
به خاطر بالا بردن سرعت، همیشه مرورگرها از نسخه های موجود در Cache یا حافظه موقت خود برای خواندن صفحات استفاده میکنند.برای وادار کردن مرورگر به خواندن اصل صفحه کافی است که در مرورگرتان Refresh/Reload کنید. در اینترنت اکسپلورر کلید F5 یا View/Refresh و در نت اسکیپ Ctrl+R یا View/Reload اینکار را انجام خواهند داد.

آیا میتوانم از هر دو مرورگر Internet Explorer و Netscape Navigator استفاده کنم؟
بله، فقط اگر از استاندارد یونیکد برای فارسی نویسی استفاده میکنید، برای دیدن درست صفحات فارسی باید از نسخه 5 Internet Explorer و به بالا و در مورد Netscape Navigator از نسخه 6.2 و به بالا استفاده کنید.

کجا میتوانم آخرین نسخه از مرورگرهای Internet Explorer و Netscape Navigator را داونلود کنم؟
Internet Explorer اینجاست و Netscape Navigator اینجا.

سرفصل مطالب کلاس آموزش Html مقدماتی ...

به کلاس آموزش Html مقدماتی خوش آمدید!

یادگیری زبان HTML بسیار ساده است.در این درسها یاد خواهید گرفت که چگونه با کمک HTML صفحاتتان را ساخته و وب سایت شخصی فارسی و یا وبلاگتان را راه اندازی کنید. مبنای این دروس نسخه 4 استاندارد اچتمل بوده و نکته بسیار مهم این نسخه جداسازی فرمت بندی و انتقال آن به style sheet ها میباشد. لازم به توضیح است که که تاکید دروس و مقالات این راهنما بر فارسی نویسی مطابق استاندارد یونیکد بوده و اولین مجموعه دروس آموزشی ما شامل آموزش مقدماتی HTML بهمراه مثالهای متعدد فارسی نویسی خواهد بود. ادامه این بخش به شرح سرفصل مطالب ارائه شده خواهد پرداخت: 


سرفصل مطالب کلاس Html مقدماتی :

  • مقدمه
    در این درس با ویژگیهای فایلهای اچتمل، اجزا تشکیل دهنده آن یعنی عناصر و تگ ها ( Elements & Tags ) و نحوه ایجاد یک فایل ساده و نمایش آن در صفحه مرورگرتان آشنا خواهید شد.

  • HTML & WWW
    در این درس با مفاهیم وب ( تار عنکبوت جهانی یا World Wide Web ) ، اینترنت، مرورگرها و استانداردهای وب آشنا خواهید شد. همچنین با تفاوتهای مرورگرهای وب ( Web Browsers ) و سرویس دهنده های وب ( Web Servers ) آشنا خواهید شد.

  • عناصر ( Elements )
    یک متن و یا فایل اچتمل از عناصر یا element ها تشکیل میشود و برای ایجاد عناصر از تگ ها یا tags استفاده میشود. در این فصل با عناصر و تگ ها آشنا خواهید شد.

  • تگ های اصلی ( Basic Tags )
    تگ ها ( tags ) اجزا تشکیل دهنده عناصر یا elements های اچتمل هستند و یکی از بهترین روش های یادگیری اچتمل دیدن مثالها و تغییر آنها میباشد. در این فصل با تگ های پایه و مهم آشنا شده و با کمک ادیتور اختصاصی ما و با امکانات فارسی نویسی آن به صورت آنلاین میتوانید به مطالعه و یادگیری مثالها بپردازید.

  • فــارسی نویسی
    در این درس با فارسی نویسی، فارسی سازی و استاندارد یونیکد و نحوه استفاده از ادیتور آنلاین و فارسی این سایت آشنا خواهید شد.

  • فرمت دهی ( Formatting )
    وظیفه گروهی از تگ های اچتمل فرمت دهی و تعیین شکل نمایش متون ( مثلا توپر و bold بودن و یا ایتالیک بودن ) میباشد و در این درس با این گروه از تگهای formating آشنا خواهید شد. همچنین یاد خواهید گرفت که چگونه source یا اصل کدهای اچتمل یک صفحه یا page را ببینید.

  • نهادها ( Entities )
    گروهی از نویسه های ( Character ) اچتمل مانند (<) و یا (>) دارای معنی خاصی ( مثلا نویسه < شروع یک تگ را نشان میدهد. ) در استاندارد اچتمل بوده و برای نمایش آنها در صفحاتتان مستقیما قابل مصرف نمیباشند. در این فصل با این نویسه ها آشنا شده و با کمک Character Entities چگونگی استفاده از این گروه از نویسه ها را فرا خواهید گرفت.

  • پیوندها ( Links )
    در این درس با پیوندها ( Links ) ، شناسه های مرتبط مخصوصا href و نحوه به کار گیری آنها آشنا خواهید شد.

  • جداول ( Tables)
    در این درس با مفاهیم جدول ( Table ) ، ردیف یا row ، سلولها یا خانه ها، مرز یا border در جداول و عناصر مرتبط مخصوصا TABLE ، TD , TR آشنا خواهید شد.

  • فریمها ( Frames )
    در این درس با مفاهیم فریم ( Frame ) و عناصر مربوطه مخصوصا Frame و Frameset آشنا خواهید شد.

  • فهرستها ( Lists )
    این درس شما را با نحوه نمایش فهرستها ( List ) ، انواع فهرستها و تگ های مربوطه آشنا خواهد ساخت.

  • فرمها ( Forms )
    از طریق استفاده از تگ های فرم ( form ) قادر به دریافت اطلاعات از بازدیدکنندگان صفحاتتان و یا تبادل اطلاعات بین صفحات مختلف خواهید شد. با کمک این گروه از تگ ها قادر به نمایش باکسهای ورود اطلاعات متن (text fields) ، چک باکسها (check-boxes) ، رادیو باتونها (radio-buttons) و ... شده و همچنین امکان گذاشتن دکمه های ارسال (submit button) و یا حذف (reset) را خواهید داشت. این فصل با شرح تگ های form و input و ... به چگونگی ایجاد ارتباط با بازدیدکنندگان و گرفتن اطلاعات از آنها خواهد پرداخت.

  • تصاویر ( Images )
    در این درس با عنصر img و چگونگی نمایش تصاویر و همچنین تنظیم محل آنها آشنا خواهید شد.

  • پس زمینه ( Background )
    در این درس با چگونگی نمایش تصاویر و یا تعیین رنگ پس زمینه آشنا خواهید شد.