آموزش " html " و " xhtml "

شروع موضوع توسط E-Boy ‏1 ژوئن 2009 در انجمن زبان HTML

وضعیت موضوع:
موضوع بسته شده است.
  1. E-Boy

    E-Boy کاربر فعال انجمن طراحی وب سایت

    ارسال‌ها:
    1,268
    تشکر شده:
    1,571
    امتیاز دستاورد:
    36
    سلام دوستان .
    من خیلی در بخش " طراحی سایت های اینترنتی " این انجمن گشتم اما ندیدم که کسی " html " و " xhtml " رو آموزش داده باشه .
    به همین دلیل تصمیم گرفتم خودم این زبان ها رو آموزش بدم .
    اما یه درخواستی از دوستان دارم و اونم اینه که در این تاپیک پست ندن چون می خوام بین آموزش ها فاصله نباشه .
    اگر هم که مدیران محترم لطف کنن و این تاپیک رو مهمش کنن ممنون میشم .
    با تشکر از همه دوستان .
     
    نوشته شده توسط E-Boy در ‏1 ژوئن 2009
    repaircenter2019، Mocha، saeed-n و 40 نفر دیگر از این ارسال تشکر کرده اند.
  2. E-Boy

    E-Boy کاربر فعال انجمن طراحی وب سایت

    ارسال‌ها:
    1,268
    تشکر شده:
    1,571
    امتیاز دستاورد:
    36
    نکاتی که باید قبل از خواندن آموزش ها خوانده شود

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

    1 - من در این آموزش " html " و " xhtml " رو با هم آموزش میدم . حال شاید این سوال برای شما پیش بیاید که " xhtml " چیست و یا این که چه تفاوت هایی با " html " دارد . باید بگوییم " xhtml " یک زبان پیشرفته تر از " html " می باشد که پایه و اساس آن همان " html " است . تفاوت این دو زبان در پشتیبانی از استاندارد ها و همچنین تفاوت اندکی در نگارش آن ها می باشد . من برای آسان شدن کار از این به بعد به جای به کار بردن " html " و " xhtml " عبارت " x-html " را به کار می برم و این کار من به این علت است که این دو زبان در اکثر مواقع مانند هم می باشند و من فقط در زمان هایی که می خواهم تفاوت این دو زبان را بیان کنم نام آن ها را جداگانه به کار می برم . همچنین سعی می کنم در آینده ای نه چندان دور تفاوت این دو زبان را با هم بیان کنم . امیدوارم اطلاعات مفیدی را در باره این دو زبان در اختیار شما گذاشته باشم .

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

    3 - من بخشی را برای رفع مشکلات شما پس از خواندن آموزش ها نیز در نظر گرفته ام پس لطفا از زدن پست در این تاپیک خودداری فرمایید . برای تشکر هم نیازی به زدن پست نیست و شما می توانید از تکمه تشکر زیر پست ها استفاده کنید . پس لطفا از زدن هرگونه پست در هر شرایطی خودداری فرمایید .

    موفق باشید .
     
    آخرین ویرایش: ‏17 ژوئن 2009
    نوشته شده توسط E-Boy در ‏1 ژوئن 2009
    repaircenter2019، f-mojtaba، Mehrdad-p70 و 28 نفر دیگر از این ارسال تشکر کرده اند.
  3. E-Boy

    E-Boy کاربر فعال انجمن طراحی وب سایت

    ارسال‌ها:
    1,268
    تشکر شده:
    1,571
    امتیاز دستاورد:
    36
    " html " چیست ؟

    " HTML " چیست ؟
    " HTML " یا " Hyper Text Markup Language " یک زبان مبتنی بر وب می باشد که با به کارگیری برچسب های آن می توان یک صفحه وب را ایجاد کرد . به طور کلی باید گفت که پایه و اساس یک صفحه وب " HTML " می باشد . کد ها در یک فایل " HTML " متن های ساده می باشند . این متن ها شامل بر چسب هایی است که در صفحه وب متفاوت دیده می شوند و این به این معنی است که برای دیدن یک صفحه " HTML " باید این صفحه به یک سرویس دهنده وب ارسال شود و سپس کد ها خط به خط اجرا شوند و خروجی ها بر روی یک صفحه وب نمایش داده شوند . نوشتن یک صفحه " HTML " کار سختی نمی باشد و شما می توانید در چند دقیقه یک صفحه وب جدید ایجاد کنید همچنین یادگیری این زبان هم دشوار نمی باشد تا جایی که می توان گفت یکی از ساده ترین زبان های برنامه نویسی در جهان " HTML " می باشد .
    " HTML " دو ویژگی اساسی دارد :
    1 - ابر متن بودن : یعنی شما می توانید یک پیوند بر روی یک صفحه وب ایجاد کنید که مراجعه کننده را به هر چیز دیگری بر روی وب هدایت کند .
    2 - سراسری بودن : یعنی از هر نقطه جهان با هر دستگاهی که بتواند به اینترنت وصل شود می توان به فایل های " HTML " دسترسی داشت و آن ها را برای مشاهده بارگزاری کرد .
    امیدوارم با این مطلب توانسته باشم اطلاعاتی کلی را در اختیار شما قرا دهم .
    در آینده به توضیحاتی درباره " XHTML " و تفاوت های آن با " HTML " می پردازیم .
    موفق باشید .
     
    نوشته شده توسط E-Boy در ‏3 ژوئن 2009
    repaircenter2019، f-mojtaba، Mehrdad-p70 و 23 نفر دیگر از این ارسال تشکر کرده اند.
  4. E-Boy

    E-Boy کاربر فعال انجمن طراحی وب سایت

    ارسال‌ها:
    1,268
    تشکر شده:
    1,571
    امتیاز دستاورد:
    36
    " xhtml " چیست ؟

    " XHTML " چیست ؟
    " XHTML " یک زبان مبتنی بر وب می باشد که پایه و اساس آن همان " HTML " است . این زبان یک زبان پیشرفته تر از " HTML " می باشد که از نظر انعطاف پذیری و قدرت از " HTML " قوی تر است . اما در نوشتن کد ها سخت گیرانه تر عمل می کند . " X " این زبان از زبان دیگری به نام " XML " گرفته شده است که کوتاه شده " Extensible Markup Language " می باشد . در واقع " XHTML " تلفیقی از " HTML " و " XML " می باشد . " XHTML " به اندازه " HTML " ساده گیر نیست . این زبان به قواعد خیلی اهمیت می دهد و این باعث شده است که صفحه هایی که با این زبان نوشته می شوند خوانا تر و مرتب تر از صفحه هایی باشند که با " HTML " نوشته می شوند . اما مهمترین علت به وجود آمدن این زبان استفاده از " CSS " یا " Cascading Style Sheets " می باشد . در واقع این زبان زیر بنایی برای استفاده از " CSS " یا صفحات سبک می باشد . " XHTML " را می توان در همین چند جمله که گفته شد خلاصه کرد زیرا اگر بیشتر وارد جزئیات شوم ممکن است از موضوع کار خارج شوم پس همین جا این مطلب را به پایان می رسانم و بدست آوردن دیگر اطلاعات در باره این زبان یا زبان های " XML " و " CSS " را به خود شما می سپارم . در آینده ای نه چندان دور به نوشتن مطلبی درباره تفاوت های " HTML " و " XHTML " می پردازم .
    موفق باشید .
     
    نوشته شده توسط E-Boy در ‏4 ژوئن 2009
    repaircenter2019، f-mojtaba، Mehrdad-p70 و 21 نفر دیگر از این ارسال تشکر کرده اند.
  5. E-Boy

    E-Boy کاربر فعال انجمن طراحی وب سایت

    ارسال‌ها:
    1,268
    تشکر شده:
    1,571
    امتیاز دستاورد:
    36
    تفاوت های " html " و " xhtml "

    تفاوت های " HTML " و " XHTML "

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

    1 - اولین تفاوت این دو زبان این است که " HTML " اهمیتی نمی دهد که شما از عناصر " HEAD " و " HTML " و " BODY " و " DOCTYPE " استفاده کنید اما اگر در " XHTML " استفاده از این عناصر الزامی است و در صورتی که از این عناصر به درستی استفاده نشود صفحه وب شما از حالت استاندارد خارج می گردد .

    2 - در زبان برنامه نویسی " HTML " به شما اجازه داده می شود که علامت نقل قولی که در دور مقدار ها به کار می رود را حذف کنید اما در " XHTML " چنین نیست و رعایت این مورد بسیار مهم می باشد .

    در " HTML " :
    کد (Text):
    <div align=right></div>
    در " XHTML " :
    کد (Text):
    <div align="right"></div>
    3 - زبان " HTML " به کوچک یا بزرگ بودن حروفی که در کد ها به کار می روند اهمیتی نمی دهد اما در " XHTML " الزامی است که فقط از حروف کوچک در کد نویسی استفاده شود .

    4 - زبان برنامه نویسی " HTML " به شما اجازه می دهد که بعضی از تگ های بسته را حذف کنید اما در " XHTML " استفاده از تگ های بسته برای تمام تگ ها الزامی است اما به علت این که بعضی از مرورگر ها با تگ هایی که نباید در " HTML " بسته شوند ولی باید در " XHTML " بسته شوند ناسازگاری دارند در " XHTML " به جای بستن یک تگ که در " HTML " بسته نمی شود از علامت " / " و یک فاصله خالی در پایان تگ آغازین استفاده می کنند .

    در " HTML " :
    کد (Text):
    <img src="test.gif" alt="test" width="100" hight="100">
    در " XHTML " :
    کد (Text):
    <img src="test.gif" alt="test" width="100" hight="100" />
    5 - زبان " HTML " به شما امکان می دهد مقادیری که نامشان با نام شاخص مربوطه یکی است را حذف کنید اما " XHTML " الزام می کند که تمام مقادیر به طور کامل ذکر شوند .

    در " HTML " :
    کد (Text):
    <hr hight="1" width="100" noshade>
    در " XHTML " :
    کد (Text):
    <hr hight="1" width="100" noshade="noshade" />
    خوب بالاخره این مقاله هم به پایان رسید .
    موفق باشید .
     
    آخرین ویرایش: ‏8 ژوئن 2009
    نوشته شده توسط E-Boy در ‏8 ژوئن 2009
    repaircenter2019، f-mojtaba، mohsen-m3 و 25 نفر دیگر از این ارسال تشکر کرده اند.
  6. ninjaghaleb

    ninjaghaleb Member

    ارسال‌ها:
    290
    تشکر شده:
    203
    امتیاز دستاورد:
    16
    توضیحات بیشتر img

    با سلام
    HTML:

    <img src="آدرس عکس" align="top" width="300" height="150" border="0" title="مجید آنلاین">
     
    توضیحاتی در مورد کد بالا:
    از این کد برای قرار دادن عکس استفاده می شود
    برخی از خاصیت های این کد

    align:این متد محل قرار گرفتن عکس را مشخص می کند که شامل مقادیر زیر است

    botoom :پایین left:چپ right:راست top:بالا

    border:با این متد می توانیید ضخامت خط دور کس را تایین کنید (( ما برای از بین بردن خط آن را برابر صفر قرار می دهیم))

    title: عنوان عکی را مشخص می کند

    width:طول عکس را مشخص می نماید

    height:عرض عکس را مشخص می نماید
     
    آخرین ویرایش: ‏9 ژوئن 2009
    نوشته شده توسط ninjaghaleb در ‏9 ژوئن 2009
    Ali_GM، f-mojtaba، Mehrdad-p70 و 15 نفر دیگر از این ارسال تشکر کرده اند.
  7. ninjaghaleb

    ninjaghaleb Member

    ارسال‌ها:
    290
    تشکر شده:
    203
    امتیاز دستاورد:
    16
    قرار دادن لینک

    برای قرار دادن لینک در Html

    HTML:

    <a href="آدرس لینک" title="" target="_blank" style="text-decoration: none " >اسم لینک</a>
     
    href :آدرس لینک را در این قسمت قرار می دهیم

    title :عنوان لینک را مشخص می کند

    traget :چکونگی باز شدن صفحه را مشخص می کند
    (( که ما پیشفرض آن را برابر _blank قرار می دهیم در این حالت برای لینک صفحه ی جدیدی باز خواهد شد))

    style:برای دادن ویژگی های خاصی به کار می رود
    (( که این جا خاصیت text-decoration: none را به آن اختصاص دادیم این ویژگی باعث می شود که خط زیر لینک از بین برود))
     
    نوشته شده توسط ninjaghaleb در ‏9 ژوئن 2009
    f-mojtaba، Mehrdad-p70، rozhin66 و 12 نفر دیگر از این ارسال تشکر کرده اند.
  8. E-Boy

    E-Boy کاربر فعال انجمن طراحی وب سایت

    ارسال‌ها:
    1,268
    تشکر شده:
    1,571
    امتیاز دستاورد:
    36
    نرم افزار های مورد نیاز برای تولید یا ویرایش یا اجرای فایل های " x-html "

    نرم افزار های مورد نیاز برای تولید یا ویرایش یا اجرای فایل های " X-HTML "


    ما برای کار کردن با فایل های " X-HTML " نیاز نیاز به دو نوع نرم افزار داریم :


    1 - نرم افزاری برای تولید یا ویرایش یک فایل " X-HTML " : شما می توانید برای این کار از یکی از ساده ترین نرم افزار های موجود یعنی نرم افزار " Note Pad " سیستم عامل استفاده کنید . این نرم افزار یکی از بهترین انتخاب ها برای این کار می باشد و توصیه من هم به کسانی که قصد یادگیری " X-HTML " رو دارند و تازه این یادگیری این زبان رو شروع کرده اند همین نرم افزار می باشد به این علت که کار کردن با این نرم افزار بسیار آسان می باشد همچنین تقریبا بر روی تمام کامپیوتر ها این نرم افزار وجود دارد و دسترسی به آن بسیار آسان است . اما حالا می رسیم به آموزش استفاده از این نرم افزار .



    برای اجرا کردن این نرم افزار باید به آدرس زیر بروید :
    Start > All Programs > Accessories > Note Pad
    بعد از اجرا کردن این برنامه یک صفحه سفید در جلوی شما ظاهر می شود که شما میتوانید هر چیزی را در آن وارد کنید .
    حال فرض کنید که کد های خود را نوشته اید و قصد ذخیره کردن آن ها را دارید . برای این کار باید از منو بالایی نرم افزار مسیر زیر را طی نمایید :
    File > Save As
    بعد از طی کردن مسیر بالا یک صفحه جدید در مقابل شما ظاهر می شود . از طریق بخش " Save In " می توانید محل ذخیره شدن فایل خود را انتخاب نمایید . در بخش " File Name " هم باید نام فایل خود را انتخاب نمایید اما توجه داشته باشید که بعد از نوشتن نام فایل باید پسوند فایل را بعد از نام آن اضافه نمایید . در این جا پسوند باید " html. " باشد . بخش " Save As Type " نیازی به تغییر ندارد پس آن را رها کرده و به بخش بعد می رویم . در بخش " Enccoding " شما باید روش کد گزاری صفحه خود را تعیین نمایید . کد گزاری مناسب برای زبان هایی که از راست به چب می باشند " UTF-8 " می باشد پس در این بخش این کد گزاری را انتخاب می کنیم . حال با انتخاب گزینه " Save " فایل ما ذخیره می شود . به همین سادگی .


    2 - نرم افزاری برای اجرای فایل های " X-HTML " : به این گونه نرم افزار ها در اصطلاح " Browser " یا " مرورگر وب " می گویند . معمولا بر روی هر کامپیوتر حداقل یکی از این نوع نرم افزار ها موجود می باشد . این نرم افزار ها برای اجرای فایل های تولید شده مورد نیاز می باشند به همین دلیل من لینک دانلود آن ها را در زیر قرار دادم تا در صورت نیار آن ها را دریافت نمایید .


    Internet Explorer
    Opera
    Fire Fox
    Google Chrome


    بالاخره این مقاله هم به پایان رسید . امیدوارم که توانسته باشم تمام مطالب را به طور کامل بیان کنم . موفق باشید .
     
    نوشته شده توسط E-Boy در ‏9 ژوئن 2009
    mohsen-m3، Mehrdad-p70، pouya saadeghi و 17 نفر دیگر از این ارسال تشکر کرده اند.
  9. E-Boy

    E-Boy کاربر فعال انجمن طراحی وب سایت

    ارسال‌ها:
    1,268
    تشکر شده:
    1,571
    امتیاز دستاورد:
    36
    ساختار کلی یک صفحه وب ( بخش اول )

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


    عناصر :


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


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


    کد (Text):
    <div>HTML Learning</div>

    <div> : تگ باز
    </div> : تگ بسته
    HTML Learning : محتویات عنصر


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


    کد (Text):
    <br>

    <br> : یک عنصر خالی


    کد (Text):
    <br />

    </ br> : یک عنصر خالی که از استاندارد های " XHTML " پیروی می کند و برای مرورگر ها هم مشکلی ایجاد نمی کند



    شاخص ها و مقدار ها :


    در " X-HTML " ممکن است هر عنصر شامل یک شاخص و هر شاخص شامل یک مقدار باشد . شاخص ها اجزایی از یک صفحه وب می باشند که اطلاعاتی درباره عناصر به کار رفته در صفحه وب را در بر می گیرند . مقدار ها هم همان اطلاعاتی می باشند که شاخص ها درباره عناصر به کار رفته در صفحه وب در بر می گیرند . اما در استفاده کردن از شاخص ها و مقدار ها تفاوت های اندکی در میان " HTML " و " XHTML " وجود دارد که در زیر بیان شده است . مثال :


    برای تگ های عیر خالی :

    کد (Text):
    <div id="Test">HTML Learning</div>

    id : شاخص
    Test : مقدار


    برای تگ های خال :

    کد (Text):
    <br id="Test" />

    id : شاخص
    Test : مقدار


    تفاوت ها در " HTML " و " XHTML " :


    1 - در زبان برنامه نویسی " HTML " وجود علامت های نقل قول به دور مقدار ها الزامی نیست اما در " XHTML " وجود آن ها الزا می می باشد .


    2 - در زبان برنامه نویسی " X-HTML " بعضی از شاخص ها مقدار ندارند و در " HTML " هم نیازی نیست که مقداری در جلوی آن ها بنویسیم اما در " XHTML " تمام شاخص ها باید دارای مقدار باشند به همین دلیل برای شاخص هایی که مقدار ندارند نام آن شاخص همراه با علامت نقل قول را در جلوی شاخص به عنوان مقدار می آورند . مثال :


    در " HTML " :


    کد (Text):
    <hr noshade />

    در " XHTML " :



    کد (Text):
    <hr noshade="noshade" />

    بالاخره این مقاله هم به پایان رسید . امیدوارم اطلاعات خوبی بدست آورده باشید .
     
    نوشته شده توسط E-Boy در ‏16 ژوئن 2009
    ya3amin، Mehrdad-p70، rozhin66 و 18 نفر دیگر از این ارسال تشکر کرده اند.
  10. shnoit

    shnoit Well-Known Member

    ارسال‌ها:
    532
    تشکر شده:
    397
    امتیاز دستاورد:
    63
    سلام

    با تشکر از توضیحات جامع و کامل دوست عزیز E-Boy:neutral:

    در برنامه Dreamweaver نسخه cs3 (cs4 رو هنوز نصب نکردم) این جزئیات از قبیل اضافه کردن / به آخر بعضی از تگها مثل <br /> یا <hr />

    نمونه کد صفحه خالی html در شروع اولیه کار:

    HTML:


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    </head>

    <body>
    </body>
    </html>

     
    ورود نسخه های جدید این مشکلات رو برای طراحان حل کرده.

    بازم تشکر میکنم از توضیحات کامل E-Boy جان. منتظر ادامه توضیحات هستیم.:rose:
     
    نوشته شده توسط shnoit در ‏16 ژوئن 2009
    mohsen-m3، Mehrdad-p70، rozhin66 و 11 نفر دیگر از این ارسال تشکر کرده اند.
  11. E-Boy

    E-Boy کاربر فعال انجمن طراحی وب سایت

    ارسال‌ها:
    1,268
    تشکر شده:
    1,571
    امتیاز دستاورد:
    36
    پرسش و پاسخ مربوط به تاپیک آموزش " html " و " xhtml "

    سلام دوستان .
    من یه تاپیک جدید ایجاد کردم تا اگر سوالی درباره آموزش ها داشتین و یا با مشکلی برخورد کردین اون جا سوالتون رو بپرسید .
    اینم آدرسش : پرسش و پاسخ مربوط به تاپیک آموزش " html " و " xhtml "
    موفق باشید .
     
    آخرین ویرایش: ‏21 ژوئن 2009
    نوشته شده توسط E-Boy در ‏17 ژوئن 2009
    pouya saadeghi، amindada، <3pehr> و 12 نفر دیگر از این ارسال تشکر کرده اند.
  12. E-Boy

    E-Boy کاربر فعال انجمن طراحی وب سایت

    ارسال‌ها:
    1,268
    تشکر شده:
    1,571
    امتیاز دستاورد:
    36
    ساختار کلی یک صفحه وب ( بخش دوم )

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

    <html> و <html/>

    هر صفحه وب با <html> شروع می شود و با <html/> به پایان می رسد . البته برای استاندارد شدن یک صفحه وب قبل از این عنصر یک عنصر دیگر به نام " DOCTYPE " به کار می رود که درباره آن درمقاله ای جدا به طور مفصل بحث خواهیم کرد . بقیه عناصر و شاخص ها و مقدار ها درون این عنصر قرار می گیرند و خود این عنصر به دو عنصر اصلی دیگر که یکی از آن ها <head> و <head/> و دیگری <body> و <body/> می باشد تقسیم می شود .

    نکته : در صورتی که صفحه وب شما با زبان برنامه نویسی " XHTML " ایجاد شده باشد تگ آغازین این عنصر به صورت زیر در می آید :

    کد (Text):
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head> و <head/>

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

    <body> و <body/>

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


    حال از اطلاعات بالا می توان فهمید که پیکربندی کلی یک صفحه وب به صورت زیر می باشد :

    در " HTML " :

    کد (Text):

    < ... DOCTYPE!>
    <html>

        <head>
        </head>

        <body>
        </body>

    </html>

     
    در " XHTML " :

    کد (Text):

     < ... DOCTYPE!>
      <html xmlns="http://www.w3.org/1999/xhtml">

         <head>
         </head>
     
         <body>
         </body>
     
     </html>

     
    بالاخره این آموزش هم به پایان رسید . امیدوارم که از این آموزش هم استفاده کافی را ببرید .
     
    آخرین ویرایش: ‏21 ژوئن 2009
    نوشته شده توسط E-Boy در ‏21 ژوئن 2009
    saeed-n، Mehrdad-p70، pouya saadeghi و 15 نفر دیگر از این ارسال تشکر کرده اند.
  13. E-Boy

    E-Boy کاربر فعال انجمن طراحی وب سایت

    ارسال‌ها:
    1,268
    تشکر شده:
    1,571
    امتیاز دستاورد:
    36
    " doctype " چیست ؟

    سلام دوستان . در مقاله قبل گفتیم که به طور مفصل و جداگانه درباره " DOCTYPE " بحث خواهیم کرد . هدف این مقاله هم بحث درباره " DOCTYPE " می باشد . امیدوارم از این آموزش هم لذت ببرید .

    " DOCTYPE " چیست ؟

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

    Strict

    Transitional

    Frameset

    شما باید با توجه به نیاز خود از میان این سه نوع " DOCTYPE " یکی را انتخاب کنید . البته در حال حاضر معمول ترین آن ها " Transitional " می باشد که پیشنهاد خود من هم استفاده از این نوع " DOCTYPE " در صفحات وب شما می باشد . اما بهترین آن ها " Strict " هست که به شدت بر استاندارد سازی توجه دارد . اما من استفاده از آن را به علت دلایلی که در آینده مطرح خواهیم کرد پیشنهاد نمی کنم . حال شاید این سوال برای شما پیش آید که تفاوت این سه نوع " DOCTYPE " در چیست . پس تفاوت های و ویژگی های هرکدام را در زیر بیان می کنیم :

    Strict : در زبان برنامه نویسی " X-HTML " هر از مدتی بعضی از عناصر و شاخص ها و مقدار ها حذف می شوند و ممکن است چیز های جدیدی جای آن ها را پر کند . در صورتی که شما از عناصر و شاخص ها و مقدار هایی که حذف شده اند در صفحه وبی که " DOCTYPE " آن " Strict " می باشد استفاده کنید صفحه شما یک صفحه وب غیر استاندارد به شمار می آید . همچنین در چنین صفحه های وبی که " DOCTYPE " آن ها " Strict " می باشد استفاده از فریم ها منع شده است .

    Transitional : در این نوع " DOCTYPE " شما می توانید از عناصر و شاخص ها و مقدار هایی که حذف شده ان نیز استفاده نمایید بدون این که صفحه وب شما از حالت استاندارد خارج شود . همچنین این " DOCTYPE " هم مانند " Strict " استفاده از فریم ها را منع کرده است .

    Frameset : این نوع " DOCTYPE " هم مانند " Transitional " به شما اجازه استفاده از عناصر و شاخص ها و مقدار های حذف شده را می دهد با این تفاوت که در این نوع " DOCTYPE " اجازه استفاده از فریم ها را دارید .

    حال شما می توانید با توجه به اطلاعاتی که بدست آوردید " DOCTYPE " مورد نیاز خود را انتخاب نمایید . اما همان طور که در قبل گفتم معمول ترین آن ها " Transitional " اما بهترین نمی باشد بلکه بهترین نوع آن " Strict " است که اگر از این نوع استفاده کنید ممکن است در آینده ای نه چندان دور مجبور به تغییر دادن کد های صفحه وب خود شوید .

    بالاخره در این آموزش هم به پایان رسید . در مقاله بعد کد های این سه نوع " DOCTYPE " را بیان خواهیم کرد .
     
    نوشته شده توسط E-Boy در ‏25 ژوئن 2009
    Mehrdad-p70، pouya saadeghi، amindada و 12 نفر دیگر از این ارسال تشکر کرده اند.
  14. E-Boy

    E-Boy کاربر فعال انجمن طراحی وب سایت

    ارسال‌ها:
    1,268
    تشکر شده:
    1,571
    امتیاز دستاورد:
    36
    کد های انواع " doctype "

    سلام دوستان . در این پست کد های انواع " DOCTYPE " را در دو بخش " HTML " و " XHTML " ذکر می کنیم . امیدوارم استفاده کافی را ببرید .

    در صفحات وب برنامه نویسی شده با HTML

    Strict
    کد (Text):
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    Frameset
    کد (Text):
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
    Transitional
    کد (Text):
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    در صفحات وب برنامه نویسی شده با XHTML

    Strict
    کد (Text):
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    Frameset
    کد (Text):
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
    Transitional
    کد (Text):
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    موفق باشید .
     
    نوشته شده توسط E-Boy در ‏27 ژوئن 2009
    mohsen-m3، rozhin66، alireza4 و 15 نفر دیگر از این ارسال تشکر کرده اند.
  15. hussein_alilou

    hussein_alilou New Member

    ارسال‌ها:
    6
    تشکر شده:
    9
    امتیاز دستاورد:
    1
    waiting....
     
    نوشته شده توسط hussein_alilou در ‏7 جولای 2009
    mohsen-m3، amindada، zaloo2000 و 5 نفر دیگر از این ارسال تشکر کرده اند.
  16. E-Boy

    E-Boy کاربر فعال انجمن طراحی وب سایت

    ارسال‌ها:
    1,268
    تشکر شده:
    1,571
    امتیاز دستاورد:
    36
    سلام دوستان .
    به خاطر وقفه طولانی که در آموزش ها ایجاد شده عذر خواهی میکنم .
    انشا الله از تاریخ 17 / 04 / 88 دوباره آموزش رو شروع می کنم .
    فکر کنم میشه فردا:-?.
    موفق باشید .
     
    نوشته شده توسط E-Boy در ‏7 جولای 2009
    mohsen-m3، ferihapt، pouya saadeghi و 7 نفر دیگر از این ارسال تشکر کرده اند.
  17. E-Boy

    E-Boy کاربر فعال انجمن طراحی وب سایت

    ارسال‌ها:
    1,268
    تشکر شده:
    1,571
    امتیاز دستاورد:
    36
    معرفی برچسب هایی که بین دو تگ <head> و <head/> به کار می روند

    سلام دوستان . در این مقاله قصد دارم به معرفی برچسب هایی بپردازم که بین دو تگ <head> و <head/> به کار می روند . امیدوارم از این آموزش لذت ببرید .


    تگ های <title> و <title/> :


    این برچسب عنوان صفحه وب شما را تعیین می کند و یکی از مهم تریم و اصلی ترین برچسب های این بخش می باشد . نحوه استفاده از این برچسب به صورت زیر می باشد :
    کد (Text):
    <title> عنوان صفحه وب <title/>
    تگ های <style> و <style/> :



    در بین این تگ ها کد های زبان برنامه نوسی CSS به کار می رود که برای سبک دهی موارد به کار رفته در صفحه وب می باشند . نحوه استفاده از این برچسب به صورت زیر می باشد :
    کد (Text):
    <style type="text/css">
    کد های CSS برای سبک دهی
    </style>

    تگ های <script> و < script/> :


    در میان این تگ ها کد های زبان های اسکریپت نویسی سمت سرویس گیرنده مانند Java Script به کار می روند . نحوه استفاده از این برچسب به صورت زیر است :
    کد (Text):
    <script type="نوع زبان اسکریپت نویسی" language="نام زبان اسکریپت نویسی">
    کد های زبان اسکریپت نویسی سمت سرویس گیرنده
    </script>
     

    تگ <link> :



    به وسیله این تگ می توان دیگر صفحات خارجی را به صفحه وب پیوند داد مانند صفحات سبک که به زبان CSS نوشته می شوند و برای سبک دهی موارد به کار رفته در صفحه وب استفاده می شوند . نحوه استفاده از این برچسب به صورت زیر می باشد :
    کد (Text):
    <link href="آدرس فایل پیوندی" rel="دلیل پیوند فایل" type="نوع فایل پیوندی" />

    تگ <meta> :


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


    1 - اعلام روش کد گذاری :
    کد (Text):
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

    2 - کلمات کلیدی :
    کد (Text):
    <meta name="keywords" content="لیست کلمات کلیدی" />

    3 - توضیحات :
    کد (Text):
    <meta name="description" content="توضیحات" />

    4 - زبان وب سایت :
    کد (Text):
    <meta content="زبان وب سایت" http-equiv="Content-Language" />

    و ...


    بالاخره این مقاله هم تمام شد . امیدوارم مفید باشه .
    موفق باشید .
     
    نوشته شده توسط E-Boy در ‏8 جولای 2009
    mohsen-m3، Mehrdad-p70، rozhin66 و 15 نفر دیگر از این ارسال تشکر کرده اند.
  18. E-Boy

    E-Boy کاربر فعال انجمن طراحی وب سایت

    ارسال‌ها:
    1,268
    تشکر شده:
    1,571
    امتیاز دستاورد:
    36
    نحوه اضافه کردن توضیحات به یک صفحه وب

    سلام دوستان .
    برای اضافه کردن توضیحات می تونید به روش زیر عمل کنید :
    کد (Text):
    <!--
    توضیحات
    -->
    امیدوارم استفاده کافی رو ببرید .
    موفق باشید .
     
    نوشته شده توسط E-Boy در ‏8 جولای 2009
    mohsen-m3، alireza4، pouya saadeghi و 12 نفر دیگر از این ارسال تشکر کرده اند.
  19. echessdesign

    echessdesign مدیر انجمن طراحی وب

    ارسال‌ها:
    4,375
    تشکر شده:
    3,833
    امتیاز دستاورد:
    113
    درود بر شما
    در ادامه توضیحات کامل e-boy جان ارز کنم که:
    HTML:
    <!--
    توضیحات
    -->
    در مرورگر های قدیمی مانند NS4 برای اینکه یکسری کد های CSS رو از دید این مرورگر های قدیمی مخفی کرد تا به صورت کد های ناشناخته در صفحه وب نمایش ندهد و یا هنگ نکند بدین شکل استفاده می کنیم:
    HTML:
    <style type="text/css" media="all">
    <!--
        body {
                background:red;
    }
    -->
    </style>
     
     
    نوشته شده توسط echessdesign در ‏9 جولای 2009
    mohsen-m3، alireza4، ferihapt و 13 نفر دیگر از این ارسال تشکر کرده اند.
  20. E-Boy

    E-Boy کاربر فعال انجمن طراحی وب سایت

    ارسال‌ها:
    1,268
    تشکر شده:
    1,571
    امتیاز دستاورد:
    36
    نحوه ایجاد پاراگراف ها

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

    تعریف تگ های <p> و <p/> : این تگ ها برای ایجاد یک پاراگراف جدید در صفحه وب به کار می روند .
    برای ایجاد پاراگراف ها می توانید به روش زیر عمل کنید :

    کد (Text):
    <p align="derection">

    You Can Write Your Text Here

    </p>
    توضیحات :

    1 - برای آغاز یک پاراگراف جدید باید از تگ آغازین <p> استفاده کنید .
    2 - برای پایان یک پاراگراف باید از تگ پایانی <p/> استفاده کنید .
    3 - شاخص align برای تعیین نحوه چیدمان متن به کار میرود و میتواند مقدار های زیر را بپذیرد :

    right : برای راست چین کردن
    left : برای چپ چین کردن
    center : برای وسط چین کردن
    justify : برای همسان کردن طول خطوط

    4 - استفاده از تگ پایانی <p/> در XHTML الزامی می باشد .
    5 - استفاده از تگ پایانی <p/> برای سبک دهی پاراگراف ها به وسیله CSS الزامی می باشد و اگر وجود نداشته باشد پاراگراف سبک ها را قبول نمی کند .
    6 - بودن یا نبودن تگ پایانی <p/> در HTML تاثیری ندارد پس استفاده از آن را در همه مواقع به شما پیشنهاد می کنم .

    بالاخره رسیدیم به پایان مقاله .
    موفق باشید .
     
    نوشته شده توسط E-Boy در ‏15 جولای 2009
    saeed-n، mohsen-m3، Mehrdad-p70 و 11 نفر دیگر از این ارسال تشکر کرده اند.
وضعیت موضوع:
موضوع بسته شده است.

به اشتراک بگذارید