آموزش طراحی وب سایت از پایه – قسمت چهارم

240
12552

 

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

مفهوم کامنت و لزوم استفاده از آن

نظم در برنامه نویسی ارزش بالایی دارد به طوری که می بایست برنامه نوشته شده توسط شما قابل دنبال کردن توسط برنامه نویس دیگری باشد. یکی از ابزارهایی که در این زمینه به ما کمک می کند گذاشتن کامنت است.
کامنت در واقع نوشته هایی است که در سورس برنامه وجود دارند ولی در نمایش خروجی ظاهر نمی شوند . کامنت گذاری در HTML  و CSS و JavaScript  کاربرد زیادی دارند. به مثال زیر دقت کنید:

<!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”>
<head>
<title>Comment example</title>
<meta http-equiv=”Content-Type”
content=”text/html; charset=utf-8″/>
</head>
<body>
<p>I really, <em>really</em> like this XHTML stuff.</p>
<!– Added emphasis using the em element. Handy one, that. –>
</body>
</html>

و خروجی بدین صورت است:

design-web-41.gif
در واقع با کامنت توضیح داده است  که چرا از تگ em  استفاده کرده است. کامنت  گذاری در HTML   بیشتر برای جدا کردن قسمت های مختلف وب سایت می باشد به طور مثال قسمت منو را با کامنت مشخص می کنیم و می گویم  مثلا این قسمت از HTML برای منو است.

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

<!– Beginn Navigation –>

در جاوا اسکریپت به 2 صورت زیر صورت :

/* comment  */
// comment

و در CSS :

/*  comment  */

بگذارید یک ذره جلوتر برویم و یک استفاده حرفه ای تر کامنت را هم براتون توضیح بدهم :

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

<!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”>
<head>
<title>Commenting out XHTML</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/>
</head>
<body>
<h1>Current Stock</h1>
<p>The following items are available for order:</p>
<ul>
<li>Dark Smoke Window Tinting</li>
<li>Bronze Window Tinting</li>
<!– <li>Spray mount</li>
<li>Craft knife</li> –>
</ul>
</body>
</html>

و حالا خروجی برنامه

design-web-42.gif

دقت کنید که 2 آیتم  li نمایش نمی یابد ولی حذف نشده تا شاید در آینده دوباره فعال شوند.

اگر سوالي در اين قسمت داريد در بخش كامنت ها پاسخ خواهم داد و يا از طريق فرم تماس وب سايتم با من در تماس باشيد .

کاراکترها وسمبل ها و نحوه استفاده در  XHTML

بسیاری موارد پیش می آید که می خواهید در متن خود مانند نوشتن همین مقاله از کاراکترهایی مثل > ویا &  و یا هر کاراکتر خاص دیگری استفاده کنید. در XHTML  ما به جای درج مستقیم این کاراکترها از کد خاصی که برای آنها تعریف شده استفاده می کنیم. مثلا به جای & از &amp;   استفاده می کنیم و این یکی از تفاوت های HTML با XHTML است ، یعنی اگر بدین صورت عمل نکنیم سند ما Valid نخواهد شد.

برای آگاهی از این کد ها میتوانید به این آدرس رجوع کنید.

صفحه اول ، نقطه شروع هر وب سایت

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

مثال زیر را در ادیتور خود بنویسید و با نام index.html  ذخیره نمایید

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/>
</head>
<body>
<h1>BubbleUnder.com</h1>
<p>Diving club for the south-west UK – let’s make a splash!</p>
<h2>Welcome to our super-dooper Scuba site</h2>
<p>Glad you could drop in and share some air with us! You’ve
passed your underwater navigation skills and successfully
found your way to the start point – or in this case, our home
page.</p>
<h3>About Us</h3>
<p><img  src=”divers-circle.jpg” width=”200″ height=”162″
alt=”A circle of divers practice their skills”/></p><p>When we’re not diving, we often meet up in a local pub
to talk about our recent adventures (any excuse, eh?).</p>
<h3>Contact Us</h3>
<p>To find out more, contact Club Secretary Bob Dobalina
on 01793 641207 or <a
href=”mailto:[email protected],com”>email
[email protected]</a>.</p> </body>
</html>

حالا خروجی را ببینیم :

design-web-43.gif
در مورد تگ های p  و h قبلا صحبت کرده ایم ولی اینجا در قسمت contact متن آبی رنگی را می بینید که لینک است یعنی تگ a ولی یک لینک معمولی نیست .این یک لینک برای ارسال ایمیل است و اگر در ویندوز خود برنامه مدیریت ایمیل داشته باشید مانند outlook با آن می توانید به شخص مورد نظر ایمیل ارسال نمایید.
صفحاتی که تا به حال درست کرده ایم به صورت متنی و بسیار کسل کننده است و برای جذابیت بیشتر می بایست از عکس ها استفاده کرد . با استفاده از تگ img می توان تصاویر را به صفحه اضافه کرد. بدین ترتیب :

<img  src=”divers-circle.jpg”  width=”200″ height=”162″ alt=”A circle of divers practice their skills” />

این تگ یک تگ empty است و دارای attribute های زیر است :

src  برای آدرس عکس

alt  برای توضیح تصویر

width عرض تصویر به پیکسل

height ارتفاع تصویر به پیکسل

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

Alt هم متنی است که عکس را توصیف می کند و در مرورگرهای متنی و یا زمانی که مرورگر تصاویر را نشان نمیدهد به جای نمایش عکس این متن نمایش می یابد و اما فایده دیگر اهمیتش برای موتورهای جستجو است.

این نکته را هم در پایان اضافه کنم که برای Valid شدن در XHTML صفحه وجود alt  الزامی است .

اگر سوالي در اين قسمت داريد در بخش كامنت ها پاسخ خواهم داد  .

ادامه دارد اگر مورد استقبال قرار گیرد!

آموزش توسط بهزاد علی بیگی

برای مقاله های بیشتر و هم چنین دریافت pdf سری کامل آموزش ما را دنبال کنید در

 

کانال تلگرام عصرنوشتن

240 دیدگاه

  1. سلام دوستان اگه تگ img رو اگه می نویسید و عکستون رو نشون نمیده به خاطر اینه که کاراکتر ” (روی کیبورد در حالت انگلیسی شیفت + گ) رو باید برای جدا کردن هر attribute قرار بدین. مثلا برای نمایش عکسی با عنوان لیانا ۰۱ که در فولدر html نوشته شده هست دستور زیر رو وارد می کنیم:

  2. سلام.برای من هم عکس با این روش باز نشد ولی عکسو تو نت آپلود کردم بجای آدرس, لینک وب پیجه عکسمو گذاشتم باز شد.این کار بعدا تو ظراحی مشکل ایجاد می کنه؟

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

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

  5. سلام آقای علی بیگی
    هرکاری کردم نشد تصویرم نمایش داده بشه! راهنماییم میفرمائید؟
    alt هم که برای عدم نمایش تصویر به کار میاد چرا اون متنی که نوشتم رو نشون نمیده؟

  6. اول اینو بگم که دستتون درد نکنه. اما من نفهمیدم در درس سه اولین صفهه وب ساختیم ولی اسم وب انتخاب نکردیم یا ننوشتیم

  7. سلام چرا با وجود اينكه اگر alt رو حذف كنيم اتفاقي در نمايش تصوير بوجود نمي آد ولي شما ميگين وجود اين برچسب اجباريه؟؟

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

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

  9. سلام
    در جواب دوستانی که مشکل دیدن تصاویر رو دارن باید بگم شما بایستی تمام عبارت (“) را پاک و مجدد تایپ کنید. البته فقط برای تصوی این کار را انجام بدید کافیه.

  10. با سلام.ممنون از اموزش عالی تون.من نمی تونم تصویر رو ببینم.راهنماییم کنید یا اینکه چه طوری یه عکس دیگه از سیستم خودم جایگزین کنم؟؟

  11. باعرض سلام وخسته نباشید
    منم مشکل دوستان که گفتن عکس رونمیاره یا چرا از doctypeاستفاده نشده رو میخواستم ازتون سوال کنم.باتشکراززحماتتان

  12. سلام
    منم مشکل همون دستمون رودارم عکس نمایش داده نمیشه و فقط عین کدهایی که نوشتم نمایش داده میشه.

    • عجب… تو کامنتها خودش اتومات اجرا میکنه برنامرو 😐

      باز هم اصلاح میکنم ، برنامه ای که بعد از این متنه منظورمه :

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

  13. سلام و خسته نباشید
    من هر کاری میکنم عکس نمایش داده نمیشه ، یه عکس اوردم تو مسیر فولدر و حجمشم کم کردم ولی فقط یه ایکون عکس و حرف بزرگ A نمایش داده میشه
    راستی این چرا DOCTYPE نداره ؟
    ممنون از زحماتتون

  14. باعرض سلام. برای گذاشتن تصویر هم کد یک بار کپی کردم هم یه بار کلا خودم نوشتم ولی بازم عکس نشون نمیده. عکس مورد نظرمو با نام imag.jpg در همان فایل وب سایت و کدشو نوشتم ولی بازم نشد. نمیدونم مشکل کجاست. راهنمایی کنید.
    ممنون به خاطر آموزش خوبتون.

  15. از همراهی با شما واقعاً لذت می برم.
    بابت زحمتی که برای ترجمه و البته بازنویسی انجام می دهید بسیار متشکرم

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

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

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

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

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

  21. داداش دستت درد نکنه خیلی مفیده مطالبت ولی الان این کد رو من کپی کردم ولی ۱ تفاوتهایی داره مثلا عکس نمیاد اصلا و بعضی کاراکتر ها نامفهومه
    چطوری باید عکس دیگری جاش بذاریم
    من قسمت ادرس عکس رو متوجه نمیشم که ادرس عکس باید اینتر نتی باشه یا باید تو همون پوشه که صفحات وب رو میسازیم باشه اگر باید تو پوشه باشه ادرش چه جوری باد بنویسم مثلا اسم پوشه منweb هستش و اسم عکس toni.gpg حالا ادرسش چی میشه؟؟؟؟؟؟؟

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

  23. سلام .ممنون از آموزشی که تو سایتتون ارائه دادید خواهشاً نحوه قرار دادن عکس رو بیشتر و دقیقتر توضیح دهید یا اگر راه دیگریهست توضیح بفرمایید در مورد نرم افزار note tab و نحوه کار با آن هم اگر براتون ممکنه لطفاً توضیحاتی بفرمایید . با تشکر از جنابعالی

  24. ممنون از سایتتون.در مثال دومی دو سطر آخری در خروجی حذف نمی شوند .امتحان کنید .من خروجی تمام مثالها رو آوردم به جز این مورد .به نظر میرسد در کد مشکلی نباشد چون در مثال اول با همین روش جواب آمد پس اشکال از چیست؟

  25. با عرض سلام و تشکر.
    متاسفانه نحوه قراردادن عکس و مسیر دهی رو متوجه نشدم. حتی وقتی قسمت ادرس عکس رو حذف کردم باز هم save نشد.
    ممنون مشیم بیشتر توضیح بدبد.

  26. دوستانی که با وارد کردن عکس مشکل دارید
    برای این کار اون آدرسی که در تگ img بین
    ” ” مینویسید خیلی مهمه یعنی وقتی یکی از
    حروف در کنار یکی از ” فرار میگیره ممکنه
    که ترکیب این دو رو مرورگر نتونه شناسایی
    کنه برای این کار شما باید ” مخصوص
    سیستمتون که ازش پشتیبانی میکنه رو قرار بدید
    یعنی کد های بالا رو که کپی کردید در text editor
    ” رو خودتون وارد کنید تا با حروف قبل و بعدش قاتی
    نشه و برای مرورگر قابل فهم باشه

  27. سلام
    منم تو آدرس عکس مشکل دارم.عکسی رو که میخوام آوردم تو فولدری که فایل HTML هم هست و اسم عکس رو تو آدرسش زدم ولی نمایش نمیده.مشکل چیه؟

    • در جواب دوستمون ul یک نوع list میباشد که به صورت بدون ترتیب نمایش دارد یعنی بر خلاف ol که در کنارش شماره دارد ul در ابتدای هر کدام یک نماد یا شکلی مثل دایره یا مثلث دارد

  28. سلام
    ببخشيد من در قسمت كامنت مشكل دارم مثال دومش من اين را امتحان كردم ولي خروجي من با خروجي شما فرق داشت.
    سوال ديگه اي كه ازتون دارم اينه كه درباره ساخت يك ايميل كه به صورت آبي هست چطور بايد ساخت توضيح بيشتر بديد.لطفا همين جا جوابم را بدهيد ممنون از زحماتتون.

  29. سلام،
    تفاوت XHTML و HTML رو ميشه بيشتر توضيح بديد؛ و سوال ديگه اينكه من تو ادرس دادن براى تصوير مشكل دارم اگر امكانش هست ادرس عكسى رو در فولدرى غير از فولدر صفحه بنويسيد.
    ممنون

  30. سلام.
    خوبه ولی بعضی جاها زیاد تخصصی میشه و برای مبتدی ها یکم فهمش سخته.
    یه سوال دارم.چطور میتونم alt تصویرمو بدست بیارم.یعنی نمیدونم تو قسمت alt عکسی که میخوام بذارم چی بنویسم.اگه میشه راهنمایی کنین

  31. ببخشید میخواستم بگم برای من ک چیزی بلد نیستم و میخوام یاد بگیرم و اگه میشه درآمدیم ب دست بیارم پیشنهادی دارین؟ممنون

  32. سلام.ببخشید ی سوال داشتم.تا الان ک این آموزشارو خوندم از این کدهاو… چیزی متوجه نشدم.مثلا فهمیدم چی هستن ولی کاربردشونو نفهمیدم.راستش نمیدونم منظورمو چطوری بگم.میخواستم بدونم در آینده اگه ادامه بدم خوندن این آموزشارو,متوجه میشمو میتونم کار کنم؟الان چیز زیادی متوجه نمیشم ی جوری هست برام.اما علاقه دارم.باتشکر.ازآقای علی بیگی هم خیلی تشکر میکنم.واقعا خسته نباشید

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

  34. سلام ممنون از اموزش شما واقعا مفید بود

    فقط من هرکاری کردم هر عکسی که گذاشتم بجای عکس ضربدر قرمز میاد لطفا راهنماییم کنید ممنون منتظر هستم

  35. سلام
    خسته نباشید
    واقعا ممنون،توضیحاتتون خیلی عالیه و به من خیلی کمک کرده
    در مورد کامنت یه مشکلی داشتم
    وقتی یه عبارت رو تو حالت لیست کامنت میکنم،بازم اون مورد رو تو نمایش خروجی نشون میده!(این مشکل تو کامنت کردن در حالت های دیگه وجود نداره!)
    حتی وقتی کدی که شما برای مثال این قسمت قرار دادید رو (Commenting out XHTML) کپی و عینا save میکنم،این مشکل وجود داره و اون خروجی که شما تو عکس نشون دادید نمیگیرم و عبارت های Spray mount و Craft knife نشون داده میشن!
    ممنون میشم راهنماییم کنید…

  36. سلام در قسمت کامنت گذاری کد برنامتونو کپی کردم و یک صفحه وب ساختم اون دو خطی که نوشتید <!– Spray mount
    Craft knife –>
    تو صفحه وب نمایش داده شد ولی تو عکس خروجی برنامه شما نشون داده نمیشه ممنون میشم بکید کجای کارم اشکال داشته

  37. سلام و ممنون از آموزش خوبتون
    چند تا سوال داشتم :
    من تا قسمت چهارم رو مطالعه کردم متوجه نشدم این علائم( ” – / – >) چی هستن و کجا ها قرار میگیرن نحوه قرار گیریشون به چه شکلیه ؟. مثلا بعضی مواقع عبارت رو تو این مینوسین و گاهی یه همچین خطی در اول یا آخرش هست . ممنون میشم یه توضیح بدین

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

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

  39. سلام و عرض ارادت
    خسته نباشین اقا عااالیه کارتون . ایشالا مه همیشه سلامت و سرزنده باشین .
    یه سوال . در دستور اضافه کردن ایمیل href=”mailto:[email protected],com”
    این به چه منظوره ؟

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

  41. سلام.
    واقعا میتونم بگم خیلی عالیه.سایت فوق العاده ای دارین.
    ولی یه سوال توی عکس گذاشتن.
    تصویری که میذارم نمایش داده نمیشه.
    کاری که جناب مهرداد گفت رو هم انجام دادم آدرس جلوی location رو copy کردم ولی بازم عکسیو نشون نمیده

  42. مرسی از توضیحات فقط من صفحه hdml و index درست کردم ولی تو مرورگر همون جوری نشونشون میده ایراد کارم کجاست؟

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

  44. سوال: چرا توی کدهای اول و دوم از همین بخش تایتل هست اما وقتی وببسایت ساخته میشه تایتل نمیاد؟ و اینکه چرا سومی کلا تایتل نداره؟

  45. سلام.بابت آموزش عالیتون ممنونم.مشکلی که دارم عکس های jpeg رو نشون داده نمیشه ولی بقیه ی نوع ها رو نمایش میده.چه کار باید بکنم
    ممنون میشم جواب بدین

  46. سلام دوستان
    منم اولش مشکله “ذاشتن عکس داشتم ولی حالا که یاد گرفتم به شما قدم به قدم میگم
    اول برین تو گوگل سرچ کنید مثلا عکس ماشین image رو بزنین تا فقط عکس ها رو سرچ کنه
    بعد روی عکس راست کلیک کنین بعد روی
    view image info کلیک کنین بعدش آدرسی رو که جلوی
    location نوشته رو همشو کپی کنید بعد تو نت پد کد هایی رو که گفته یه جا نوشته
    “src=”divers-circle.jpg
    داخل دو تا دابل کوتیشن ( ” )
    رو خلی کنید و او ن آدرس رو که کپی کرده بودین رو توش پیست کنین تمام!!

  47. سلام .خواستم ازتون تشکر کنم….واقعا عالیه.من دارم از روی همین سایت طراحی وب رو میخونم .تا الان که واقعا لذت بردم.خواهشا ادامه بدید, .ممنون از زحمتاتون.

  48. سلام
    واقعا خسته نباشید واز زحماتتون تشکر می کنم
    من هم مثل دوستان هر کار که کردم عکسی ظاهر نشد و عکس ها به صورت بلاک قرار می گرفتند
    تااینکه یه عکس رو تو سایت tiny pic
    وارد کردم و از طریق Inspect element
    آدرس رو در قسمت کدها کپی کردم و الحمدلله که موفق شدم
    با تشکر

  49. ببینید شما می تونید برید تو گوگل ویک عکس رو پیدا کنید روش کلیک راست کنید گزینه view image info آدرسشو پیدا کنید. برای یه عکس تو هاردتون هم یک عکس رو تو یکی از سایتهای آپلود ، آپلود کنید و بعد آدرسشو وارد کنید

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

  51. من کدی رو که گفتید کپی کردم ولی عکسش نمیاد،آدرس یه عکسو تو هاردم هم بهش دادم بازم نمیاد.راهنمایی می کنید؟؟؟؟؟؟؟؟؟؟؟

  52. سلام! خیلی خوبه اما کاش با هم پیش میرفتیم ینی اینکه شما می گفتید ما انجام میدادیم مثل اونجایی که گفتید کپی کنید و فایل رو سیو کنید و ادامش اینطوری خیلی بهتر بود!!!

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

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

  55. سلام
    می خواستم از ارائه ساده،خوب و شفافتون در آموزش طراحی وب تشکر کنم.تا الان تمام مطالبی رو که گفتید،راحت یاد گرفتم.انشاالله همین طور کارتون ادامه داشته باشه و ما بتونیم استفاده کنیم.
    موفق باشید

  56. با سلام
    مي خواستم بدونم چه زماني از xhtml استفاده مي کنيم؟
    اگر از html ورژن5 استفاده بشه چه لزومي داره؟
    با تشکر

  57. سلام
    دارم به اين نتيجه ميرسم كه آي كيوم پايينه هيچي نميفهمم يك راه حلي بگيد ميخوام هرطور شده سايت داشته باشم ممنون خواهشا بي جواب نذاريد ببخشيد مزاحم شدم

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

  59. سلام مرسی بابت آموزشهاتون.یه اشکالی داشتم در مورد قرار دادن عکس توو سایت.چه جوری یه عکس از کامپیوتر خودم به سایت اضافه کنم؟یعنی src img چی مینویسم؟

  60. عالی بود، لطفا قسمت ایمیل که از طریق تگ a بود بیشتر توضیح بدین، یعنی موقع طراحی سایت ایمیل خودمون رو از این طریق در سایت قرار میدیم تا بقیه نظرشون رو ارسال کنن؟

  61. من نمی دونم چرا وقتی خروجی رو می بندم مثله برای شما نمی شه،(ازکامنت گذاشتن تا نقطه ی شروع)وبعد وقتی آدرسه عکسو می ذارم بازم خروجی نت پت می مونه البته آدرس عکسو با موزیلا می گیرم ینی با موزیلا باز می کنم آدرسو کپی پیست می کنم تو تگ امیج با””ولی نمی دونم چرا نمی شه ….ممنون از زحمتاتون.

  62. سلام.امیدوارم خسته نباشید.ببخشید میخواستم بدونم چجوری میتونم داخل این سایتی که ساختیم کامنت بذارم؟با تشکر.

  63. “href=”mailto:[email protected],com در تگ a اين عبارت يك arttribute هست. درسته؟ هميشه از اين استفاده مى شه براى لينك ارسال ايميل؟

  64. با درود و سپاس از مطالب خوبتون
    سوالى كه دارم در مورد مثال index.html هست كه چرا شامل داك تايپ و تگ بازشونده html و head و title نيست؟ فكر مى كردم اگه اينها رو ننويسيم چيزى نمايش نمى ده.

  65. منظورم اینه
    مثلا اون قسمتی که کامنت توضیحش این بود که یکی از لیست هارو مخفی کنه.
    دستور خاصی زده شد توی متن تگ؟
    برای هرکار یه دستوری داره؟
    بنظر کل آموزش تا اینجا کامل بود فقط کامنت خوب توضیح داده نشده

  66. سلام.ببخشید اینجایی که کامنت مثلا میاد یه متنی رو واسش توضیح میده یا پنهانش میکنه
    برای اینکه ببینیم چه عملی رو باید انجام بده کلا از چه دستوراتی استفاده میشه؟

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

  68. با سلام.
    من نفهمیدم چطور باید کدهای جدید رو اضافه کنم تا مثلا بتونم یک عکسو وارد کنم.
    ممنون میشم اگه راهنمایی کنید

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

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

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

  72. ببخشید عکس رو تو همون فلدر گذاشتم ولی بازش نکرد
    باید چه تغییراتی بدم تا عکسو نشون بده؟
    ممنون میشم نکاتشو بگید
    ممنون از سایت خوبتون

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

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

  75. با سلام
    درباره ی href=”mailto:[email protected],com”>email
    بیشتر توضیح بدید
    :[email protected],com چیه و چه چیزی رو مشخص میکنه؟
    ممنون

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

  77. سلام ممنون از توضیحات خوبتون من تازه به جمعتون پیوستم تو این قسمت متاسفانه منم مثل دوستام نتونستم عکسمو ببینم با اینکه عکس و html تو یک فلدر بودن

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

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

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

  81. سلام ، بهزاد عزیز ممنون از اینکه دانش و تجربیاتت رو با دیگران تقسیم می کنی . تو ایران نسبت به جاهای دیگه دنیا افرادی مثل شما کم هستند . موفق باشی !

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

  83. با تشکر از مطالب خوب ات.اگر امکانش هست من رو برای انتخاب موضوع برای سایت ام راهنمایی کن.سایت رو برای پایان نامه ام میخوام ولی خیلی وارد نیستم در طراحی سایت مبتدی هستم

  84. سلام. مطالبتون واقعا عالیه منکه خیلی استفاده کردم و دارم میکنم . خیلی کمکم کرد …
    امیدوارم همیشه ادامه دار باشه
    با تشکر فراوان …

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

  86. سلام بهزاد جان . تو قسمت درج تصویر بعد اینکه من تو ادیتور سیو می کنم تصویرو نمیبینم. مشکل از چیه؟؟ باید آدرس تصویر از هارد من باشه؟؟؟

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

  88. آقای بهزاد سلام، میشه توضیح بدین سایتهایی که تحت فلش ساخته میشوند چه ایراداتی دارند؟و آیا میشه واسه سرعت آپلودشون یه کاری کرد؟!و اینکه آیا کار سختیه سایت تحت فلش درست کرد؟

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

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

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

  92. با سلام
    اطلاعات داده شده بسيار مفيد بود خيلي ممنون
    لطف كنيد درمورد كدهاي css توضيح دهيد
    من چطور مي تونم از اين كدها استفاده كنم.
    كدهاي HTMLدر ويرايشگر نوشته ميشه ودر نهايت نمايش داده ميشوداما كدهاي cssچطور استفاده ميشه؟

  93. از این که مطالب رو دلسوزانه وارد سایت می کنید خیلی ممنونم.با اینکه واسه خرید کتاب هزینه زیادی کردم ولی هیچکدام با این جزئیات مطالب رو نگفتن.
    انشاا…. به راهتون همین تور ادامه بدبن

  94. بله سعی می شود مثال های بیشتری آورده شود
    تصاویر عناصر اینلاین هستند یعنی اگر عناصر اینلاین دیگری بعد از آن اضافه شود کنا ر آن درج خواهد شد
    یعنی اگر 2 تصویر پشت هم در کد قرار دهید در ظاهر کنار هم خواهند آمد
    برای اطلاعات بیشتر در مورد عناصر بلاک یا اینلاین به مقاله من در آدرس زیر بروید
    http://www.ittutorial.ir/?p=725
    و اما برای فاصله بین تصاویر از سی اس اس استفاده کنید
    به تصاویر مارجین بدهید بدین صورت
    style=”margin-right:50px;”
    اگر این استایل را به تگ اول بدهبد باعث می شود تصویر دوم 50 پیکسل از تگ اول فاصله بگیرد
    دقت شود که اگر دایرکشن صفحه که در کامنت قبل توضیح دادم راست به چپ شود، استایلی که به تصویر اول می دهید بدین صورت خواهد شد
    style=”margin-left:50px;
    روش های دیگری هم وجود دارد که در آینده توضیح خواهم داد

  95. با سلام
    يك دنيا ممنونم از مطالب بسيار مفيد شما
    خيلي ياد گرفتم.
    مطالب شما را هميشه دنبال ميكنم اما اكثر اوقات نظر نميدم ، اين دفعه نظر دادم كه بگم منم هستم.
    خواهشا در هر مورد مثال هاي بيشتري بگذاريد كه ما با مقايسه انها و ديدن تغييرات درك بيشتري پيدا كنيم.
    چگونه در يك رديف دو عكس را كنار هم در يك فاصله دلخواه قرار دهيم ؟
    تشكر

  96. می توانید در تگ اچ دی ام ال گزینه دایرکشن را بدین ترتیب اضافه نمایید
    dir=”rtl”
    تا چیدمان صفحه از راست به چپ شود
    بحث دایرکشن بسیار گسترده است که بعدا توضیح تکمیلی بیشتری ارائه می شود

ارسال یک پاسخ