آموزش طراحی سایت (مقاله ۲)
خیلی بدبدمعمولیخوبخیلی عالی
  • 2 شهریور 1398
  • ۱۹ دیدگاه
  • آی وحید

آموزش طراحی سایت (مقاله ۲)

آموزش

شروع آموزش طراحی سایت با زبان شیرین Html

پیشگفتار : با سلام و عرض ادب و احترام ؛ امروز براتون مقاله شماره ۲ طراحی سایت را آماده کرده ام، در مقاله شماره ۱ با مراحل طراحی سایت آشنا شدیم اکنون در این آموزش قصد دارم آموزش طراحی سایت را از صفر شروع و انشالاه در مقاله های بعدی طراحی سایت، به صورت حرفه ای (پیشرفته) آموزش دهم پس با ما همراه باشید.

چگونه توسط زبان Html سایت طراحی کنیم ؟

همانگونه که در آموزش قبلی گفتیم برای طراحی سایت نیاز به دانش برنامه نویسی تحت وب دارید ( مانند : Html,Css ) با یادگیری زبان های برنامه نویسی لازم میتوانید طراحی سایت انجام دهید.

اکنون من در این آموزش طراحی سایت با زبان Html کار را آغاز میکنم، لطفأ در تمامی مراحل آموزش گام به گام با آموزش پیش بروید تا با مشکل برنخورید..

ابزار های مورد نیاز برای طراحی سایت :

  1. نرم افزار نت پد ( لاتین : Notepad ) – برای دانلود آخرین نسخه اینجا کلیک کنید. ( رمز عبور فایل : www.download.ir )
  2. مجموعه ای از تصاویر، آیکن و… آماده شده ( میتوانید از اینترنت دانلود کنید و یا میتوانید آن را خریداری نمایید )
  3. لیست جداول استفاده صحیح و استاندارد از مقدار ها در کد نویسی ( World Wide Web )
  4. و غیره … که تا اینجا همین ۳ مورد برای ما کافی است.

آشنایی با قوانین و نکات آموزش طراحی سایت با زبان Html :

  1. تگ در زبان html چیست؟  تگ به یک سری از دستورات اجرایی میگویند که توسط برنامه نویس نوشته و اجرا میگردد.
  2. نحوه نوشتن تگ ها در زبان html چگونه است ؟ به عنوان مثال برای شروع تگ  <html> و برای پایان تگ <html/> استفاده میشود ( شیوه کلی : برای شروع از علامت <> و برای پایان تگ از علامت </> استفاده میکنیم )
  3. روش نوشتن یک متن بدون اینکه در اجرا سایت نمایش داده شود (تایپ کامنت) ؟ برای نوشتن کامنت یا توضیحات در بین کد نویسی جهت ارائه توضیح از تگ  <– متن کامنت –!> استفاده میکنیم.
  4. و موارد دیگر که در صورت لزوم در هر آموزش طراحی سایت بیان خواهم کرد.

آموزش طراحی سایت و ایجاد یک سند Html :

پس از نصب نرم افزار نت پد، آن را باز کنید و یک سند به نام Test با پسوند html بسازید ( فرم کلی فایل نهایی : Test.html ).

اکنون در فایل Test.html جمله Learn Html by ivahid را تایپ کنید، اما قبل از نوشتن باید از تگ هایی برای معرفی دستورات لازم به صفحه وب استفاده کرد، مانند تگ : <html> که باید ابتدا کد نویسی نوشته شود.

تگ   <html> : برای تعریف یک سند اچ تی ام ال

تگ   <head> : یک تگ مهم و اساسی که کد های درون آن همه به نمایش در نمی آید و خصوصیات مهم یک صفحه اچ تی ام ال را در بر میگیرد.

تگ   <body> : یک تگ کاربردی که مقادیر قابل نمایش در صفحه را مشخص میکند.

تگ     <title> : این تگ برای عنوان صفحه سایت بکار برده میشود.

تگ <center> : از این تگ میتوانید برای نمایش متن، عکس و… در موقعیت وسط صفحه استفاده کنید.

تگ         <b> : از تگ برای درشت کردن قلم نوشتاری میتوان استفاده کرد که کاربرد زیادی در کد نویسی دارد.

نمونه کد نویسی که با تگ های فوق میتوان نوشت :

<html>  <!-- نمونه کد نویسی با تگ های فوق -->

<head>
<title> آموزش طراحی سایت با آی وحید </title>
</head>

<body>
<center><b> جمله شما : Learn Html By ivahid </b></center>
</body>

</html>

پس از ذخیره سازی این کد ها در نت پد آن را با یک مرورگر باز کنید و نتیجه را مشاهده کنید.

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

دیدگاه شما عزیزان
  • مهمان 30 آبان 1394

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

    • سلام دوست عزیز ، باشه حتمأ آموزش تصویری هم منتشر میکنیم .
      با تشکر از ارسال نظر شما

  • طراحی سایت 16 دی 1394

    مرسی از سایت خوبتون، خیلی خوبه

  • عباس 8 خرداد 1395

    عالی بود!

  • طراحی سایت دیارا 5 تیر 1395

    ممنون از مطلب عالیتون

  • علی 4 آبان 1396

    سلام، عالی بود. من خیلی کار طراحی سایت دوست دارم؛ میشه آموزشاتونو بصورت PDF بزارین؟

  • محمد 19 اسفند 1396

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

  • آرگان 14 فروردین 1397

    خوب بود اتفاقی از گوگل اومدم اینجا ولی خوب بود برای دوستم فرستادم اونم دنبالشه اونم بیاد ببینه

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

    ممنون

  • زهرا 4 اردیبهشت 1397

    سلام وقتتون بخیر خسته نباشین ♥️
    من میخوام کدهای Html رو به php وصل کنم بلد نیستم کمکم میکنید؟؟
    باتشکر.

  • ساقی 18 اردیبهشت 1397

    https://t.me/joinchat/Eu-NO1JwrxfPFum_nrt2tg در این گروه میتونید سوالات خودتون در مورد لاراول php و طراحی وب مطرح کنید

    تو این کانالم آموزش ها پروژه محور با بهترین کیفیت قرار داده شده https://t.me/easyprogrammming

  • علی کاظمی 4 تیر 1397

    سایت عالی دارید

  • مسلم آخوندی 24 مرداد 1397

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

  • هاشم 30 مهر 1397

    سلام میشه بگید چجوری میشه کد هایی که نوشتم رو در قالب سایت نگاه کرد

    • مجید عابد 9 آبان 1397

      سلام خدمت شما
      اگر شما کدهاتون html باشه میتونید با مرورگر اونها را مشاهده کنید . در صورتی که فایلهاتون php است باید روی هاست و یا با برنامه هایی مثل ومپ و زمپ نگاه کنید .

  • محمد 23 آذر 1397

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

    • مجید عابد 25 آذر 1397

      سلام خدمت شما
      پیشنهاد میشود ابتدا تعریف HTML را در منابع معتبر مثل ویکی پدیا مشاهده کنید . لینک مربوط به ویکی پدیا
      اچ تی ام ال مخفف Hypertext Markup Language است و احتمالا کلمه آخر مشخص است که میتوان نام آن را زبان دانست یا نه !

  • طراحی 2 اردیبهشت 1398

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

    • مجید عابد 2 اردیبهشت 1398

      ممنون از نظر شما دوست عزیز
      چشم ویدیوهای آموزشی را هم اضافه خواهیم کرد .

  • سارا 29 خرداد 1398

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