صفحه 1 از 2 12 آخرینآخرین
نمایش نتایج: از شماره 1 تا 10 , از مجموع 18

موضوع: آموزش طراحی وب با زبان ساده بخش اول xhtml

  1. #1
    عضو جدید
    تاریخ عضویت
    Jan 2012
    نوشته ها
    12
    تشکر تشکر کرده 
    28
    تشکر تشکر شده 
    97
    تشکر شده در
    29 پست

    پیش فرض آموزش طراحی وب با زبان ساده بخش اول xhtml

    بسم الله الرحمن الرحیم
    سلام خدمت دوستان عزیز بنده قصد دارم آموزش طراحی وب رو از ابتدا تا جائی که دانشم اجازه بده با زبانی ساده آموزش بدم قبل از شروع کار یه سری مقدمه باید بگم من خودم تا حالا یک بار هم نشده تو عمرم مقدمه یک کتاب رو خونده باشم همیشه این سئوال برام مطرح بود که نویسنده ها مقدمه رو واسه کی مینویسن چون هیشکی نمیخونه حالا که خودم اومد شروع کنم دیدم شتریه که باید در خونه هر کسی بخوابه ، سعی میکنم زیاد از این شاخه به اون شاخه نپرم تا باعث سردرگمی نشه
    برای اینکه تاپیک منحرف نشه یک تاپیک دیگه به اسم http://www.webhostingtalk.ir/f151/44639/#post409004 زده شده که همه سئوال هاتون ، نظراتتون و ... رو میتونید در اون مطرح کنید بخاطر اینکه این تاپیک شلوغ نشه چرا که اگر همینجا بپرسید و و در آخر پاک سازی بشه شاید همون سئوالی که برای شما پیش اومده ممکن هست که برای دیگری هم پیش بیاد و بعد از پاک سازی دیگه وجود نداره فقط دوستان اگر پرسشی دارن همگام با مطالب باشه و نه جلوتر که باعث سردرگمی دیگر دوستان نشه

    انواع ورژن های html

    1)
    html0.0 : در حقیقت جنبه تجاری نداره و بیشتر برای آزمایش مرورگرها نسبت به زبان تازه تاسیس شده مورد استفاده قرار گرفت (1994)
    2)
    html2.0 : در این ورژن تنها می توانستند وب سایتهائی رو طراحی کنند که فقط در داخل آنها متن بوده است text-base 1995
    3)
    html3.2 : این ورژن به عنوان بزرگترین ورژن html تلقی می شود چرا که در آن طراحان میتوانستند از عکس ، صدا و تصویر در طراحی خود استفاده نمایند اصطلاحاً به صدا و تصویر تحت وب java applet گفته میشود در این ورژن بود که طراح می توانست از یک تکنیک طراحی برای صفحات وب خود استفاده نمایند ، در این ورژن روش طراحی table معرفی شد
    table چیست؟قرار گرفتن اجزاءیک سایت در جای مناسب
    4)
    html4.0 و html4.01 : در این ورژن قابلیت های Table بهبود پیدا کرد و همچنین قابلیت (internationalization) جهانی سازی به صفحات وب اضافه شد ، یعنی میتوان با زبان های مختلف جهان طراحی کرد مانند زبان فارسی
    5)
    xhtml1.0 => extensible hypertext markup language => html4.01+xml
    یعنی وقتی xhtml رو میخونید هم xml هم html رو میخونید (زبانی که در این دوره آموزش داده میشه اون هم به این دلیل هست رسمی ترین ورژن هست و تمام مرورگرها ساپورتش می کنند یکی از چالش های مهم یک طراح این است که تمام مرورگرها طراحی اون رو ساپورت کنند
    6)
    html5.0 : ورژن جدیدی هست که به وجود آمده که استاندارد نیست به این دلیل که هنوز تمام مرورگر ها ساپورتش نمیکنن و قابلیت های جدیدش رو ساپورت نمیکنن به اصطلاح استفاده ازش هنوز زوده

    ---------- Post added at 11:16 PM ---------- Previous post was at 10:37 PM ----------

    تنها نرم افزاری که در این دوره برای طراحی صفحات وب مورد استفاده قرار میگیره notepad هست ، از دوستان هم خواهش میشه فقط از همین نرم افزار استفاده کنن تا این زبان رو اصولی یاد بگیرن در دوره بعدی که آموزش css هست اون رو با نرم افزار Adobe Dreamweaver CS5 آموزش میدم و کار با اون نرم افزار رو هم یاد خواهید گرفت

    تعریف وب سایت : به مجموعه صفحات وبی گفته میشود که از عنصر های مختلف تشکیل شده باشه web page , image , scripte , video , sound و غیره
    مجموعه یک وب سایت باید در فولدر ویژه قرار بگیره که نامش rootfolder هست که تمام آبجکت های یک وب سایت در داخل اون قرار میگیره (برای متمرکز کردن فایل های یک وب سایت)

    قوانین نام گذاری فایل ها در صفحات وب:
    1) هرگز از گذاشتن space و special character در نام گذاری استفاده نشه ولی میشه برای فاصله داخل کلمات از underline و underscore استفاده کنید
    2)از دادن نام های فارسی جداً خودداری کنید
    3)نام مورد نظر نباید بیش از 255 کارکتر باشه

    نکته:اگر بخواهیم زمانی داخل صفحه وب فارسی بنویسیم درست نشون داده نمیشه و باید encoding آن رو utf-8 بذارید (فقط تا زمانی که از notepad استفاده میکنیم)

    مرورگر ها کد ها را تفسیر میکنند و به ما نشان میدن ، tag ها پارامتر اصلی برای رسیدن به آن هدف طراحی هستن
    تگ ها با این علامت > شروع میشوند که اسمش opening angel braket گفته میشه و با علامت < بسته میشوند که به آن closing angel braket گفته میشه = > <tag>

    چند نمونه تگ:
    <p> تگ پاراگراف
    <img> تگ عکس

    انواع تگ ها :
    تگ ها به دو دسته تقسیم میشوند
    1 container 2 empty
    کانتینر به تگ هائی گفته میشه که علاوه بر داشتن تگ باز (opening tag) تگ بسته (closing tag) هم دارند کلوزینگ تگ دقیقاً مانند اپنینگ تگ هست به همرا یک / اضافه یعنی
    کد:
    <opening tag>object</closing tag>
    مثال:
    کد:
    <b>object</b>
    امپتی به تگ هائی گفته میشه که بر خلاف کانتینر ها دارا تگ کلوزینگ تگ نیستن و فقط اوپنینگ تگ دارن
    کد:
    <object>
    مثال :
    کد:
    <img>
    نکته ائی که باید در نظر بگیرید تفاوت زبان html و xhtml است هر دوی این زبان هابرای طراحی وب هستن و تفاوت چندانی با هم ندارن البته درسته بعضی از تگ ها حذف و یا اضافه شدن ولی تفاوت اصلی این دو زبان در این هست که ما در زبان xhtml به هیچ وجه تگ های empty نداریم و همه تگ های باید بسته بشوند گذاشتن یک / در آخر تگ های empty باعث بسته شدن تگ های xhtml میشه

    مثال:
    کد:
    <img />
    ویرایش توسط sr.majid : April 2nd, 2012 در ساعت 15:09

  2. تعداد تشکر ها ازsr.majid به دلیل پست مفید


  3. # ADS




     

  4. #2
    عضو جدید
    تاریخ عضویت
    Jan 2012
    نوشته ها
    12
    تشکر تشکر کرده 
    28
    تشکر تشکر شده 
    97
    تشکر شده در
    29 پست

    پیش فرض پاسخ : آموزش طراحی وب با زبان ساده بخش اول xhtml

    تگ های اساسی و بنیادی (fundamental tag):
    کد:
    <html>,</html>
    این تگ به عنوان اصلی ترین تگ محسوب میشود و تمام تگهای دیگر ما بین این تگ قرار میگیرن

    کد:
    <head>,</head>
    این تگ به عنوان پشتیبان صفحه وب تلقی میگردد و معمولاً هر آنچه بین این تگ نوشته شود ، کاربر در چارچوب سفید رنگ پنجره مرورگر نمی بیند ، معمولاً در این بخش دستورات پشتیبانی مانند کدهای javascript , css و ... نوشته میشود

    کد:
    <title>,</title>
    مکان نوشتن این تگ در داخل head است و هر text ائی ما بین این تگ نوشته شود کاربر در titlebar مرورگر خود می تواند آن را ببیند (منظور همون نوشته بالای پنجره مرورگر هست یا نوشته داخل تب باز شده)

    کد:
    <body>,</body>
    مکان نوشتن این تگ بعد از head است و هر آنچه داخل این تگ نوشته شود به عنوان طراحی قلمداد شده و کاربر در چهارچوب سفید رنگ پنجره مرورگر میتواند آن را ببیند (این تگ خیلی مهم هست)

    توجه داشته باشید که کد های html به دو روش برای نوشتن داره یکی good coding و bad coding گود کدینگ منظم نوشتن هست و بد کدینگ به قولی یلخی کار کردن هست که اگر در آینده خودتون هم بخواهید تغییری داخلش انجام بدین یا کسی بخواد ازش سر در بیاره مخش سوت میکشه پس سعی کنید حتماً گود کدینگ رو رعایت کنید چرا که خیلی به کمک شما میاد
    حالا عکس همین تگ هائی که معرفی شد رو میذارم تا منظور گود کدینگ رو متوجه بشید
    Snap1.jpg
    تصاویر پیوست شده تصاویر پیوست شده
    • نوع فایل: jpg Snap1.jpg (47.2 کیلو بایت, 14 نمایش)
    ویرایش توسط sr.majid : March 30th, 2012 در ساعت 15:33

  5. تعداد تشکر ها ازsr.majid به دلیل پست مفید


  6. #3
    عضو جدید
    تاریخ عضویت
    Jan 2012
    نوشته ها
    12
    تشکر تشکر کرده 
    28
    تشکر تشکر شده 
    97
    تشکر شده در
    29 پست

    پیش فرض پاسخ : آموزش طراحی وب با زبان ساده بخش اول xhtml

    doctype چیست؟
    بزرگترین مشکل یک طراح وب سایت ، طراحی کردن صفحه وبی هست که در تمام مرورگر ها به صورت یکسان نشون داده بشه و از طرفی دیگر می دانیم ورژن های مختلف html و xhtml وجود داره که این هم به مشکلات طراح وب سایت خواهد افزود چرا که باید بدانیم مرورگرها هر طوری که دلشان بخواهد کدهای ما را تفسیر میکنند و هیچ استانداردی بین همه آنها وجود ندارد
    لذا توسط doctype طراح میتواند دقیقاً به مرورگر اعلام نماید که از کدام ورژن html یا xhtml استفاده نموده است که مرورگر طبق آن قوانین کدها را تفسیر نماید ، لذا اگر doctype تعریف نشود مرورگر به صورت دلخواه تفسیر مینماید
    مکان نوشتن doctype در اولین خط و حتی قبل از تگ html است

    انواع doctype ها در html و xhtml :
    1. strict
    2. transitional
    3. framest

    داکتایپ اول : زمانی که طراح بخواهد از روش طراحی به نام css در وب سایت خود استفاده کند باید از این نوع داکتایپ استفاده کند
    داکتایپ دوم : این نوع یکی از متداول ترین و پر کاربردترین هست و زمانی که طراح بخواهد از روش هائی مثل table به همراه css استفاده کنده از این داکتایپ استفاده میکند
    داکتایپ سوم : در زمان قدیم یه روشی برای طراحی وجود داشت به اسم framest کهاین روش دیگه منسوخ شده و به تاریخ پیوسته ولی زمانی که بخوایم از روش framest استفاده کنیم قاعدتاً باید از این روش داکتایپ استفده کنیم

    نکته : doctype ها به روش های طراحی بستگی دارند

    اصلی ترین داکتایپ انواع ورژن های مختلف html و xhtml رو اینجا قرار میدم البته تعداد داکتایپ های خیلی بیشتر از اینهاست اگر علاقه داشتید میتونید کل داکتایپ ها رو از سایت www.w3.org (سازمان استاندارد) ملاحظه کنید

    html 1.0 transitional
    کد:
    <!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">
    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 strict
    کد:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    html 5
    کد:
    <!DOCTYPE HTML>
    xhtml 1.0 transitional
    کد:
    <!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">
    xhtml 1.0 strict
    کد:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    xhtml 1.1
    کد:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    xhtml mobile 1.0
    کد:
    <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    http://www.w3.org/QA/2002/04/valid-dtd-list.html
    ویرایش توسط sr.majid : March 31st, 2012 در ساعت 17:13

  7. تعداد تشکر ها ازsr.majid به دلیل پست مفید


  8. #4
    عضو جدید
    تاریخ عضویت
    Jan 2012
    نوشته ها
    12
    تشکر تشکر کرده 
    28
    تشکر تشکر شده 
    97
    تشکر شده در
    29 پست

    پیش فرض پاسخ : آموزش طراحی وب با زبان ساده بخش اول xhtml

    با notepad چگونه یک فایل با فرمت html بسازیم؟
    همونطور که داخل عکس زیر میبینید گزینه save as رو انتخاب میکنیم و پایان اسم پیجمون html. رو مینویسیم ، اگر صفحه طراحی شده به زبان انگلیسی بود encoding رو تغییری نمیدیم اما اگر فارسی بود encoding رو روی utf-8 میگذاریم
    برای باز کردن پیج مورد نظرمون روش کلیک راست میکنیم و گزینه open with رو انتخاب میکنیم و با یکی از مرورگرهای نصب شده بر روی سیستممون بازش میکنیم

    چند نکته:
    1. تگی Tag که اتریبیوت Attribute دارد صد در صد یک مقدار ولیو Value دارد
    2. مکان نوشتن attribute و value های یک تگ در داخل opening tag هست
    3. attribute یک تگ توسط فاصله از خود تگ شروع میشه
    4. attribute و value از طریق مساوی از هم نوشته میشوند و ولیو داخل کوتیشن " قرار میگیره
    5. اگر یک تگ چند Attribute داشت اتریبیوت هارو با یک فاصله از هم جدا میکنیم
    6. attribute های یک تگ مهم نیست کدام اول یا آخر نوشته بشن
    نمونه:
    کد:
    <tag attribute="value">object</tag>
    اولین تگی که آموزش داده میشه برای تغییر خصوصیات نوشته یا text هست که اسمش تگ font هست تگ فونت از نوع container هست و خودش به خودی خود هیچ کاری انجام نمیده و این اتریبیوت ها و ولیو ها هست که به نوشته ها خصوصیت میدن

    تگ فونت سه اتریبیوت داره
    1. color
    2. size
    3. face

    اولی رنگ رو تغییر میده دومی اندازه رو و سومی فونت رو
    به ترتیب مثال میزنیم تا بهتر متوجه بشید
    1.color :
    کد:
    <font color="red">neveshte</font>
    همینطور که مشخصه این تگ و اتریبیوتش باعث میشه رنگ نوشته عوض بشه و اینجا قرمز میشه
    نکته : برای استفاده از رنگ از نوشته استفاده نمیکنیم و از هگزادسیمال ولیو استفاده میکنیم که به موقعش توضیح داده میشه ولی فعلاً از همین روش استفاده کنید و اسم رنگ رو بنویسید مثلاً pink black blue و ...

    2.size
    کد:
    <font size="5">neveshte</font>
    این تگ و ولیوهاش باز هم مشخصه که سایز رو تغییر میده
    ولیو سایز از 1 تا 7 هست که بر واحد پوینت هست:
    1 = 7.5pt
    2 = 10pt
    3 = 12pt
    4 = 13.5pt
    5 = 18pt
    6 = 24pt
    7 = 36pt

    3.face
    کد:
    <font face="arial">neveshte</font><
    این تگ هم فونت نوشته رو عوض میکنه
    نکته:
    1. ما اگر از این اتریبیوت استفاده نکنیم کاربر صفحه طراحی شده توسط ما رو با اون فونتی میبینه که پیشفرض مرورگر خودش هست و هر مرورگری یک فونت پیش فرض خودش رو داره
    2. فونتی که ما برای طراحی استفاده میکنیم حتماً باید رو سیستم کاربر نصب باشه تا با اون فونت بتونه نوشته رو ببینه
    3. میتونیم چنیدین فونت برای این اتریبیوت استفاده کنیم که اگر اولی را رو سیستمش نداشت با دومین فونتی که ما براش تعریف کردیم بیبینه و همینطور سومی چهارمی و ... برای استفاده از چند فونت باید از کاما , استفاده کنیم
    4. در css3 میشه یک فونت که داخل سیستم کاربر نیست رو به نوعی داخل سیستمش نصب کنیم تا با فونت مورد نظر ما نوشته رو ببینه که تو دوره بعد آموزشش رو میدم
    5.برای اطلاعات بیشتر خودتون مسیر فونت پیش فرض مرورگر فایر فاکس رو در پائین میتونید ببینید (برای اومدن منوبار در فایر فاکس باید کلید alt رو بزنید تا نمایش داده بشه)
    tools=>options=>content=>fonts&color
    مثال
    کد:
    <font face="arial,verdana,titr>neveshte</font>
    و در آخر یک مثال کلی میزنم و یک شات میذارم تا کاملاً متوجه بشید
    کد:
    <font color="red' size="3" face="arial,verdana">neveshte</font>
    تصاویر پیوست شده تصاویر پیوست شده
    ویرایش توسط sr.majid : April 2nd, 2012 در ساعت 15:24

  9. تعداد تشکر ها ازsr.majid به دلیل پست مفید


  10. #5
    عضو جدید
    تاریخ عضویت
    Jan 2012
    نوشته ها
    12
    تشکر تشکر کرده 
    28
    تشکر تشکر شده 
    97
    تشکر شده در
    29 پست

    پیش فرض پاسخ : آموزش طراحی وب با زبان ساده بخش اول xhtml

    تگ بولد و ایتالیک bold , italic
    هرگز از تگ
    کد:
    <b>object</b>
    استفاده نکنید و از معادل آن استفاده کنید
    کد:
    <strong>object</strong>
    این تگ برای پر رنگ کردن نوشته به کار برده میشود
    Snap1.jpg

    هرگز از تگ
    کد:
    <i>object</i>
    استفاده نکنید و از معادل آن استفاده کنید
    کد:
    <em>object</em>
    این تگ برای کج کردن نوشته به کار برده میشود em مخفف کلمه emphasize است
    Snap2.jpg

    قانون nesting tag چیست؟ تگ های تو در تو : یعنی به صورت همزمان میتوانیم چنیدن تگ را به یک آبجکت نسبت بدهیم با رعایت این قانون که هر تگی که ابتدا از همه باز میشود در آخر از همه باید بسته بشود
    دومثال میزنم یکی درست و یکی غلط تا درست متوجه بشید
    مثال اول و درست:
    کد:
    <strong><em>text</em></strong>
    مثال دوم و غلط :
    کد:
    <strong><em>text</strong></em>
    Snap3.jpg

    تگ پاراگراف paragraph
    کد:
    <p>object</p>
    این تگ به اصطلاح کار اینتر را انجام میدهد
    اتریبیوت تگ پاراگراف align هست
    اتریبیوت الاین چهار ولیو دارد
    1.left
    2.right
    3.center
    4.justify
    کد:
    <p align="right">object</p>
    Snap4.jpg

    در صفحات وب دو حقیقت کاملاً پنهان وجود دارد که بر روی طراحی وب تاثیر مستقیم داره
    حقیقت اول : چنانچه در کدهای html بیش از یک space زده شود هرگز space اضافه محاسبه نمیشود (یعنی اگر شما در جائی 10 اسپیس هم که بزنید فقط یکیش محاسبه میشه
    حقیقت دوم : در صفحات وب چنانچه در یک آبجکت enter زده شود برای رفتن به سطر بعد حتی یک بار آن هم محاسبه نخواهد شد

    انواع تگ ها:
    1.container
    2.empty
    1)block-level
    2)text-level

    block-level : به تگ هائی گفته می شود که به صورت اتوماتیک object قبل از تگ و object بعد از تگ ، از خود تگ فاصله پیدا میکند یعنی به سط بعد از تگ می رود مانند تگ p

    text-level : به تگ هائی گفته می شود که object قبل از تگ و object بعد از تگ از خود تگ فاصله پیدا نمی کند و ساختارشان به همان صورت حفظ خواهد شد تعداد این نوع تگ ها بیشتر از بلوک لول ها هستن مانند تگ font

    تگ سطر بندی :
    کد:
    <br />
    Snap5.jpg
    تصاویر پیوست شده تصاویر پیوست شده
    • نوع فایل: jpg Snap1.jpg (58.5 کیلو بایت, 5 نمایش)

  11. تعداد تشکر ها ازsr.majid به دلیل پست مفید


  12. #6
    عضو جدید
    تاریخ عضویت
    Jan 2012
    نوشته ها
    12
    تشکر تشکر کرده 
    28
    تشکر تشکر شده 
    97
    تشکر شده در
    29 پست

    پیش فرض پاسخ : آموزش طراحی وب با زبان ساده بخش اول xhtml

    تگ لیست ها در طراحی وب:
    لیست ها به دو دسته تقسیم می شوند:
    1. ordered list
    مثل : 1,A,a,I,i,...
    2. unordered list
    مثل : مربع تو پر ، دایره تو پر و دایره تو خالی

    برای درست کردن ordered list باید از تگ ol استفاده کنیم و آیتم لیست ها هر کدام باید در تگ li قرار بگیره
    مثال همراه با تصویر تا بهتر متوجه بشید:


    تگ ol دو اتریبیوت دارد :
    1. type
    2. start
    اتریبیوت type مشخص میکند که لیست با چه چیزی شروع بشه و ولیو آن میتواند عدد ، حروف انگلیسی بزرگ یا کوچیک ، اعداد یونانی و ... باشه
    مثلاً : A,a,1,i,I,...
    اتریبیوت start مشخص میکند که لیست از کجا شروع شود مثلاً از حرف پنج حروف انگلیسی شروع باشه و ولیو آن یک عدد هست که نشان گر این هست که از کجا شروع شود



    برای درست کردن undered list باید از تگ ul استفاده نمائیم و گزینه ها باید در تگ li قرار بگیره


    تگ ul یک اتریبیوت دارد type و ولیو آن سه گزینه است circle دایره تو خالی ، square مربع تو پر ، disc دایره تو پر
    (در آینده در css آموزش ساخت بولت رو آموزش خواهیم داد ولی در html تنها میشه از همین سه بولت استفاده کرد)


    special characters چیست : به کارکتر هائی گفته مشود که به صورت معمول بر روی کیبورد وجود ندارد مانند علامت کپی رایت
    اسپشیال کارکتر دو نوع ساختار دارد
    اسمی : که با علامت & آمپرسند شروع میشود و با علامت ; سیمی کالر تمام میشود
    عددی : مانند اسمی شروع و پایان می شود ولی از علامت # نامبر یا شارپ استفاده میشود
    چند اسپشیال کارکتر اصلی
    کد:
    &amp;     &
    کد:
    &plusmn;     ±
    کد:
    &frac34;     ¾
    کد:
    &cent;     ¢
    کد:
    &copy;     ©
    کد:
    &reg;     ®
    تصاویر پیوست شده تصاویر پیوست شده
    • نوع فایل: jpg Snap1.jpg (13.3 کیلو بایت, 243 نمایش)
    • نوع فایل: jpg Snap2.jpg (15.9 کیلو بایت, 242 نمایش)
    • نوع فایل: jpg Snap3.jpg (11.9 کیلو بایت, 241 نمایش)
    • نوع فایل: jpg Snap4.jpg (15.1 کیلو بایت, 240 نمایش)
    • نوع فایل: jpg Snap5.jpg (7.8 کیلو بایت, 240 نمایش)
    ویرایش توسط sr.majid : April 5th, 2012 در ساعت 20:21

  13. تعداد تشکر ها ازsr.majid به دلیل پست مفید


  14. #7
    عضو جدید
    تاریخ عضویت
    Jan 2012
    نوشته ها
    12
    تشکر تشکر کرده 
    28
    تشکر تشکر شده 
    97
    تشکر شده در
    29 پست

    پیش فرض پاسخ : آموزش طراحی وب با زبان ساده بخش اول xhtml

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


    transparancy : به عکسی گفته میشود که بک گراند ندارد و رنگ بک گراند آبجکت زیری خودش رو میگیره
    animation : به عکس های متحرک گفته میشه (معمولاً در مواقعی استفاده میشه که بخواهیم جائی جلوه توجه بکنه)
    interlacing : در بسیاری از سایت ها عکس حرف اول رو میزنه مثل سایت های گالری که باید در موقع استفاده از عکس این کار رو هوشمندانه استفاده بکنیم روال به این شکل هست که یک عکس کوچک قرار داده شده که حجمش هم از نظر رزولیشن هم از نظر کیلوبایتی کمتر هست و با کلیک بر روی اون عکس بزرگتر از نظر رزولیشن و کیلوبایتی رو میبینیم ، اگر دقت کنید در زمان لود شدن یک عکس اون عکس به یکباره نشون داده نمیشه بلکه به صورت تدریجی و مرحله به مرحله از بالا به سمت پائین نشان داده میشه به این قابلیت اینترلیسینگ گفته میشه
    comperssion : یکی از عوامل بسیار مهم در طراحی وب این هست که از عکس هائی استفاده کنیم که حجم کمی داشته باشن تا صفحه راحت تر لود بشه کامپریشن در طراحی وب به دو دسته تقسیم میشود

    1. lossy : در این نوع فشرده سازی اگر سایز عکس از نظر کیلوبایتی کاهش پیدا کنه عکس هم به تدریج کیفیت خودش رو از دست میده (یعنی عناصر تشکیل دهنده عکس یا همان پیکسل کاملاً مشخص میشه)
    2. lossless : در این نوع فشرده سازی وقتی سایز عکس از نظر کیلوبایتی کاهش پیدا میکند کیفیت عکس از بین نمیرود

    نکته : قابلیت ترنسپرنسی در ورژن ie6 ساپورت نمیشود
    نکته : فرمت gif دو نوع ورژن دارد 87a که انیمیشن رو ساپورت نمیکنه و 89a که انیمیشن رو ساپورت میکنه
    نکته : عکس هائی که تحت وب هستن رزولیشنشون باید رو 72 پیکسل باشه چون بیشتر از اون به هیچ دردی نمیخوره


    web addressing : آدرس دهی در صحات وب به دو دسته تقسیم میشن relative و absolute
    ریلیتیو : این نوع آدرس دهی یکی از متداول ترین آدرس دهی هست زمانی استفاده میشه که بخواهیم آبجکتی رو از داخل یک وب سایت (rootfolder) به داخل صفحه ائی وارد کنیم که آن صفحه هم داخل همون وب سایت هست ، به عبارتی اگر بخواهیم در یک وب سایت به صفحه دیگری برویم که آن صفحه هم در همان وب سایت قرار دارد از آدرس دهی relative استفاده میکنیم

    ابسولوت : این آدرس دهی نسبت به قبلی کمتر مورد استفاده قرار میگیره زمانی که بخواهیم آبجکتی رو از خارج از یک وب سایت (rootfolder) وارد یکی از صفحات سایتمان نمائیم از این آدرس دهی استفاده میکنیم ، به عبارت دیگه اگر بخواهیم از یکی از صفحات وب سایتمان به یک وب سایت دیگر برویم از این آدرس دهی استفاده میکنیم این آدرس دهی با پروتوکول
    کد:
    http://
    آغاز میشه


    تگ img از خانواده empty هست پس بنابراین به این صورت نوشته میشه
    کد:
    <img />
    اتریبیوت تگ img هست : src
    ولیو آن آدرس عکسی هست که میخواهیم قرار بدیم

    نکته : همیشه در rootfolder یک پوشه بسازید به اسم images و همه عکس هارو در اون ذخیره کنید
    نکته : برگشتن به یک ریشه عقب تر از
    کد:
    ../
    استفاده میکنیم و اگر خواستیم به دو ریشه عقب تر برویم باید از
    کد:
    ../../
    استفاده کنیم
    مثال:
    کد:
    <img src="http://www.webhostingtalk.ir/images/pasha.jpg" />
    اتریبیوت دیگر تگ img هست : border
    ولیو اون یک عدد هست این اتریبوت دور عکس حاشیه ایجاد میکنه اگر روی 0 باشه بدون حاشیه خواهد بود و هر چه عدد بزرگتر باشه حاشیه ضخیم تر خواهد بود


    اتریبیوت دیگر تگ img هست : hspace
    ولیو آن یک عدد هست ، برای فاصله قرار دادن افقی بین آبجکت ها استفاده میشه هم از راست هم از چپ بصورت مساوی


    اتریبیوت دیگر تگ img هست : vspace
    ولیو آن یک عدد هست ، برای فاصله قرار دادن عمودی بین آبجکت ها استفاده میشه هم از بالا هم از پائین بصورت مساوی


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

    اتریبیوت دیگر تگ img هست : align
    ولیو آن top , bottom , middle , left , right هست وظیفه این اتریبیوت کنار هم قرار دادن یک عکس و یک متن هست


    نکته : چنانچه در داخل تگ img از اتریبیوت align استفاده شده باشه و متن کنار تگ img به واسطه jusstify شدن در داخل تگ p باشه به صورت استثنائی تگ p خاصیت بلاک لول بودن خودش رو از دست میده (فقط از لحاظ اینتر زدن)
    نکته : برای کنار هم قرار دادن یک متن و یک عکس باید حتماً متن مورد نظرمون سمت راست تگ img قرار داشته باشه

    اتریبیوت دیگر تگ img هست : alt
    این اتریبویت خیلی مهم هست و حدالمقدور ازش استفاده کنید ، این اتریبیوت سه کار انجام میده ولیو اون هم بسته به این هست که بخواهید چه نوشته ائی داشته باشه مثلاً عکسی طر صفحه وبتو طراحی کردید که لینک شده به صفجه home به این شکل نوشته میشه
    کد:
    <img src="http://www.webhostingtalk.ir/images/pasha.jpg" alt="pasha" title="pasha" />
    1.tooltip
    2.replace text when
    3.search engine optimization (seo)
    اولی زمانی که موس رو روی یک عکس قرار بدیم نوشته ائی به ما نشون میده
    دومی زمانی که یک عکس به هر دلیلی لود نشه بجای اینکه ضربدر به ما نشون بده متن داخل اتریبیوت آلت رو به ما نشون میده این گزینه زمانی خودش رو خیلی خوب نشون میده که یک سایت لینک هاش از عکس درست شده باشن
    سومی هم که کاملاً مشخص هست در موتور های جستجو خیلی به کمکتون میاد (در مقطع خودش کاملتر راجع به سئو توضیح داده میشه)
    نکته: تولتیپ در فایر فاکس عمل نمیکنه قابلیت تولتیپ در ورژنهای جدید ie ساپورت نمیشه
    نکته: اتریبیوتی که تولتیپ رو در فایرفاکس ساپورت میکنه title هست



    این هم برای اطلاعات عمومی خودتون میگم ، برای غیر فعال کردن عکس در مرورگر ie و firefox
    alt>internet option>advance>mulrrimedia>show picture
    alt>option>content>load image automatically

    اتریبیوت دیگر تگ img هست : ismap و usemap
    این اتریبیوت رو زمانی بهتون آموزش میدم که لینکهارو آموزش داده باشم اگر الان آموزش بدم سردرگم میشید فقط اگر من یادم رفت شما یادم بندازید
    تصاویر پیوست شده تصاویر پیوست شده
    • نوع فایل: jpg Snap1.jpg (11.6 کیلو بایت, 230 نمایش)
    • نوع فایل: jpg Snap2.jpg (14.3 کیلو بایت, 230 نمایش)
    • نوع فایل: jpg Snap3.jpg (22.6 کیلو بایت, 232 نمایش)
    • نوع فایل: jpg Snap4.jpg (25.9 کیلو بایت, 230 نمایش)
    • نوع فایل: jpg Snap5.jpg (45.9 کیلو بایت, 229 نمایش)
    • نوع فایل: jpg Snap6.jpg (13.8 کیلو بایت, 229 نمایش)
    ویرایش توسط sr.majid : April 9th, 2012 در ساعت 18:03

  15. تعداد تشکر ها ازsr.majid به دلیل پست مفید


  16. #8
    عضو جدید
    تاریخ عضویت
    Jan 2012
    نوشته ها
    12
    تشکر تشکر کرده 
    28
    تشکر تشکر شده 
    97
    تشکر شده در
    29 پست

    پیش فرض پاسخ : آموزش طراحی وب با زبان ساده بخش اول xhtml

    خوب چند روز بود تاپیک رو آپدیت نکردم مشقاتونو بذارید رو میز خط بزنم هر کی هم تکالیفشو انجام نداده بره یه تاپیک بزنه صد بار از روی این تاپیک بنویسه

    امروز راجع به رنگ ها توضیح میدم
    در طراحی صفحات وب ما به سه صورت میتونیم از رنگ ها استفاده کنیم
    1. نام بردن رنگ مثلاً red
    2. RGB value
    3. hexadecimal value

    ما تعداد 16.777.256 رنگ داریم که از سه رنگ اصلی قرمز ، آبی و سبز تولید میشن

    روش اول : همین ابتدا فهمیدیم که روش اول اصلاً قابل استفاده نیست چون این تعداد اسم برای رنگ موجود نیست و اگر هم بود حفظ کردنش عاقلانه نبود

    روش دوم : ساختار RGB از سه بخش درست شده -,-,- هر کاما سه رنگ اصلی هست و هر خط تیره از اعداد 0 (سیاه) تا 255 (سفید) هست
    مثال:
    red : 255,0,0
    green : 0,255,0
    blue : 0,0,255
    white : 255,255,255
    black : 0,0,0
    طریقه نوشتن RGB در html به این شکل هست

    کد:
    <body bgcolor="34,120,40">
    که ما از این روش هم استفاده نمیکنیم

    روش سوم : این روش بهترین روش هست و ساختار اون به این شکل هست -- -- --# دو تای اول قرمز ، دوتای دوم سبز و دوتای آخر آبی عدد 0 مشکی و عدد 9 سفید
    مثال:
    red : #ff0000
    green : #00ff00
    blue : #0000ff
    black : #000000
    white : #ffffff
    طریقه نوشتن هگزادسیمال در html به این شکل هست

    کد:
    <body bgcolor="#54fd5a">
    web-safe color چیست؟ : وب سایت طراحی شده توسط طراح تو تمام سیستم های دنیا با هر امکانات سخت افزاری و نرم افزاری دیده میشه ولی در بعضی از موارد با توجه با قابلیت سیستم کاربر رنگ ها به صورت درست تفسیر نمیشن و نزدیک ترین رنگ به آن رنگ نمایش داده میشه به این رویداد color dithering گفته میشه
    رنگ های وب سیف به رنگ هائی گفته میشه که در تمام سیستم های دنیا با هر امکانات سخت افزاری و نرم افزاری به همان صورت دیده میشن و color dithering در آنها اتفاق نمی افتد تعداد این رنگ ها از بین 16.777.256 رنگ فقط 216 رنگ هست البته این مطلب نباید اینگونه تفسیر بشه که طراح خودش رو به این 216 رنگ فقط محدود کنه فکر نکنم دیگه کسی الان سیستم های خیلی قدیمی داشته باشه و اگر هم داره مشکل خودش هست

    حالا چجوری رنگ های web-safe در RGB و Hexadecimal شناسائی کنیم:

    RGB
    0,51,102,153,204,255 اگر از این رنگ ها استفاده بشه وب سیف هست
    دو مثال که راحت تر متوجه بشید:
    51,102,254 وب سیف نیست
    51,102,255 وب سیف هست

    Hexadecimal
    00,33,66,99,cc,ff اگر همه اینها باشند وب سیف هست
    سه مثال که راحت تر متوجه بشید:
    #0033cc وب سیف هست
    #006666 وب سیف هست
    #006665 وب سیف نیست

    حالا با این اطلاعات تگ hr رو بهتون آشنا میکنم
    تگ hr از خانواده empty هست و block-level
    hr=Horizontal Rule=خط افقی
    hr چهار اتریبیوت داره :

    1. color که رنگ رو مشخص میکنه و ولیوش یک رنگ هست
    2. size که ضخامت خط رو مشخص میکنه و ولیوش یک عدد هست
    3. width که طول خط رو مشخص میکنه که میتونه بر حسب pixel یا percent باشه
    pixel : زمانی که از این مقدار برای کنترل طول خط استفاده کنیم در هر شرایطی (کوچک و بزرگ کردن پنجره مرورگر) اندازه تغییر پیدا نمیکنه و اندازه ثابت میمونه
    percent : زمانی که از این مقدار برای کنترل طول خط استفاده کنیم اندازه بر حسب درصد خواهد بود مثلاً اگر بر حسب 50% قرار داده بشه اندازه خط ما 50 درصد اندازه مرورگر خواهد بود یعنی اگر عرض مرورگر ما به اندازه 20 باشه عرض خط 10 خواهد بود
    4.َ align که جهت قرار گرفتن خط را مشخص میکند و سه ولیو دارد : left , right , center
    مثال:


    تگ های sub و sup ساب برای پائین قرار دادن یک آبجکت زیر یک آبجکت استفاده میشه و ساپ برای بالا قرار دادن
    من خودم این دو تگ رو به این شکل حفظ کردم نیم دایره b پائین هست آبجکت پائین قرار میگیره و نیم دایره p بالا هست آبجکت بالا قرار میگیره
    مثال:


    تو پست بعدی سعی میکنم مبحث اصلی در html که table ها باشه رو آموزش بدم
    تصاویر پیوست شده تصاویر پیوست شده
    • نوع فایل: jpg Snap3.jpg (37.4 کیلو بایت, 212 نمایش)
    • نوع فایل: jpg Snap4.jpg (25.0 کیلو بایت, 215 نمایش)
    ویرایش توسط sr.majid : April 23rd, 2012 در ساعت 16:44

  17. تعداد تشکر ها ازsr.majid به دلیل پست مفید


  18. #9
    عضو جدید
    تاریخ عضویت
    Jan 2012
    نوشته ها
    12
    تشکر تشکر کرده 
    28
    تشکر تشکر شده 
    97
    تشکر شده در
    29 پست

    پیش فرض پاسخ : آموزش طراحی وب با زبان ساده بخش اول xhtml

    روش های طراحی صفحات وب:
    بطور کلی برای ساختن یک وب سایت و قرار دادن آبجکت در مکان مورد نظر طراح وب سایت باید روشی رو برای خودش انتخاب بکنه ، در واقع این روش هست که باعث بهتر پیچیده شدنعناصر در یک صفحه وب هست
    برای این کار سه روش طراحی وجود داره:
    1. table
    2. frameset
    3. css

    table : این روش اولین روش و پایه ائی ترین روش برای طراحی هست در حقیقت از این روش در تیبل ها و سلول های آنها در جهت کنار هم قرار دادن آبجکت ها استفاده میکنیم ، در حال حاضر این روش بهترین روش نیست ولی برای یاد گرفتن بهترین روش دانش و اطلاعات مربوط به تیبل بسیار لازم هست
    frameset : این روش منسوخ شده و از بین رفته و وب سایت های مبتنی بر این روش خیلی خیلی کم هستن
    css : این روش بهترین روش هست که از مزایای بزرگ آن میشه به سرعت لود شدن فوق العاده سریع وب سایت اشاره کرد

    تعریف table : به یک ماتریس دوبعدی گفته میشه که از سلول ها در جهت قرار دادن آبجکت های خودمون استفاده میکنیم
    Untitled-1.jpg
    همانطور که داخل عکس بالا مشاهده میکنید
    ما دو تا سطر (row) و سه تا ستون (column) داریم و شش سلول (cell)

    تگ table از خانواده تگ های container و block-level هست
    برای درست کردن سطر و ستون در table باید از تگ tr برای ساخت سطر و td برای ساخت ستون استفاده کنیم
    tr = table row
    td = table data
    یک مثال برای اینکه بهتر متوجه بشید:
    Snap3.jpg
    به اتریبیوت و ولیوش border="1" توجه نکنید فقط برای اینکه بهتر متوجه بشید این اتریبیوت و ولیوش رو زودتر گذاشتم تا ساختار تیبل رو متوجه بشید

  19. تعداد تشکر ها از sr.majid به دلیل پست مفید


  20. #10

صفحه 1 از 2 12 آخرینآخرین

اطلاعات موضوع

کاربرانی که در حال مشاهده این موضوع هستند

در حال حاضر 1 کاربر در حال مشاهده این موضوع است. (0 کاربران و 1 مهمان ها)

موضوعات مشابه

  1. آموزش جامع html-xhtml
    توسط Milad-Ku در انجمن HTML-XHTML
    پاسخ ها: 5
    آخرين نوشته: July 8th, 2016, 12:17
  2. آموزش جامع html-xhtml
    توسط Rozhin Karimi در انجمن HTML-XHTML
    پاسخ ها: 7
    آخرين نوشته: April 7th, 2015, 13:07
  3. مرجع آموزش html و xhtml
    توسط a.n1 در انجمن مباحث دیگر
    پاسخ ها: 0
    آخرين نوشته: March 15th, 2013, 23:40
  4. پاسخ ها: 14
    آخرين نوشته: November 1st, 2012, 04:42
  5. کتاب الکترونیکی آموزش html و xhtml
    توسط parsiaplus در انجمن مباحث دیگر
    پاسخ ها: 0
    آخرين نوشته: May 4th, 2012, 19:05

کلمات کلیدی این موضوع

مجوز های ارسال و ویرایش

  • شما نمیتوانید موضوع جدیدی ارسال کنید
  • شما امکان ارسال پاسخ را ندارید
  • شما نمیتوانید فایل پیوست کنید.
  • شما نمیتوانید پست های خود را ویرایش کنید
  •