telegram

توضیحات

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

Css کوتاه شده یا مخفف عبارت Cascading Style Sheets می باشد که قابلیت صفحه آرایی؛ استایل دهی و زیبا سازی صفحات وب را برای طراحان سایت فراهم می سازد. در واقع ساختار یک صفحه با استفاده از HTML تعیین می شود و سپس با به کار بردن کدهایی دیگر به این ساختار و چیدمان استایل داده می شود. تمامی رنگ ها، ابعاد و اندازه ها، حاشیه ها، مکان قرارگیری، فونت ها و سایر خصوصیات اجزای یک صفحه ی وب، با استفاده از CSS تعیین خواهند شد

HTML CSS طراحی وب طراحی سایت

مدرس دوره علی شیخ
مدت دوره 04:51:23
تعداد ویدو 28
وضعیت دوره : کامل شده
قیمت دوره : رایگان
ابتدا وارد سایت شوید
دسته بندی دوره ها
HTML CSS طراحی وب FlexBox Bootstrap فریمورک طراحی سایت جاوا اسکریپت اکما اسکریپت پی اچ پی php mysql javascript jquery oop mvc composer laravel emmet npm nodejs

دوره های پیشنهادی

دوره های آموزشی
آموزش Javascript OOP پروژه محور
کامل شده

آموزش Javascript OOP پروژه محور

OOP برگرفته از Object-Oriented Programming به معنی برنامه‌نویسی شی‌گرا میباشد. که یک الگو یا روش برنامه نویسی می باشد....

عضویت ویژه
01:53:50
آموزش Asynchronous Javascript پروژه محور
کامل شده

آموزش Asynchronous Javascript پروژه محور

در این دوره با برنامه نویسی Asynchronous (ناهمگام) و Synchronous (همگام) و نحوه کارکرد آنها در دنیای جاوااسکریپت صحبت می...

عضویت ویژه
03:47:45
آموزش FlexBox پروژه محور
کامل شده

آموزش FlexBox پروژه محور

Flexbox ها کدهای جدید در CSS می باشند که توسط W۳C برای رفع مشکلات استفاده از کد های float و طراحی زیبا و دقیق تر سایت ها...

رایگان
01:57:13
آموزش Grid Layout پروژه محور
کامل شده

آموزش Grid Layout پروژه محور

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

رایگان
02:19:59

نظرات ارزشمند شما:

برای ارسال نظر ابتدا باید وارد سایت شوید

  • ati

    باسلام و ادب
    هزاران بار متشكرم از سايت خوب و آموزش هاي رايگان و خوب و كامل شما.
    بسيار ارزش مند هستيد.
    فايل هاي تمريني را دانلود كردم. آيا امكان دانلود ويدئو هاي آموزشي هم هست؟ چگونه؟

    • علی شیخ

      1 ماه پیش

      سلام وقت بخیر.
      ممنون از شما که به ما انرژی میدین❤
      برای دانلود قسمت ها، شما وارد هر قسمت از دوره که بشید دکمه ای با عنوان "دانلود این قسمت" هست که با کلیک، اون قسمت از دوره دانلود میشه

  • ati

    با سلام و ادب
    ابتدا بسيار سپاس گزارم از آموزشهاي شفاف و همچنين اينكه پاسخگوي سوالات هستيدو اميدوارم خدا براتون خير بخواد.
    خواستم راهنمايي بفرماييد در مورد چگونگي ساخت سايت هايي كه با فتوشاپ يك PSD از يك صفحه سايت را مي گيريم و با HTML , CSS طراحيش مي كنيم اما آيا براي صفحات داخلي سايت هم بايد دوباره PSD همون صفحه را با HTML , CSS بسازيم و يا اگر از وردپرس استفاده مي كنيم چطوري ميشه براي درست كردن صفحات داخلي از وردپرس استفاده كنيم.
    خيلي عذرخواهي مي كنم اگر سوالم خيلي ابتدايي هست اما واقعا نمي دونم روند كار چطور هست بايد سايتي شركتي طراحي كنم با چند صفحه، اما نمي دونم همه صفحاتش را بايد با HTML , CSS طراحي كنم، و آيا بايد PHP هم يادبگيرم يا وردپرس مي تونه كمكم كنه يا نه؟
    خيلي ممنون ميشم راهنماييم بفرماييد.

    • علی شیخ

      1 ماه پیش

      سلام وقت بخیر.
      ممنون، خداروشکر که دوره مفید بوده براتون❤
      ببینید ما در طراحی سایت، بخش فرانت اند و بک اند داریم.
      که این دو بخش از همه دیگه جدا هستند.
      در بخش فرانت اند شما از html و css استفاده میکنید و در بخش بک اند از زبان های برنامه نویسی مثله php ،پایتون و ...
      در بخش فرانت اند شما نیاز به یک طراحی برای ui سایت دارید، که میتونید در ابتدا توی فتوشاپ یا نرم افزار های دیگه، طراحی اولیه سایت رو بزنید (تمام صفحات سایت) و به کارفرمای پروژه نشون بدید و اگه تایید کرد شما با html و css پیاده سازی میکنید.
      پس تمام صفحات رو با فتوشاپ یا نرم افزار های دیگه میزنید و بعد از اون پیاده سازی میکنید.استفاده از فتوشاپ اختیاری هست و شما میتونید مستقیم html و css رو بزنید بستگی به کارفرما و مهارت شما داره.
      تا اینجا سایت شما استاتیک هست و مرحله بعدی پویا سازی سایت هست (بک اند).
      شما در بک اند میتونید از زبان های برنامه نویسی مختلف استفاده کنید.
      به عنوان مثال میتونید از php خام استفاده کنید و یا فریمورک های که برای php هست و یا از وردپرس استفاده کنید، شما میتونید قالب سایتی که ایجاد کرده اید رو به وردپرس وصل کنید که دوره های فارسی زیادی براش توی اینترنت هست که میتونید مشاهده و استفاده کنید

  • Yalda Jahanshahi

    سلام واقعا ممنون از آموزش های عالیتون.
    یه سوال داشتم ازتون من یک تازه کارم و باید پروژه تحویل بدم تا آخر شهریور، اومدم سایت شما html,css,javascript رو دانلود کردم و همچنین bootstrap۴ و node.js رو حالا وقتی به فیلماتون نگاه می کردم دیدم گفتین که باید php و فریم ورک لاراول و هم یادبگیرم که متاسفانه برا اونا وقت کافی ندارم.
    حالا سوالم اینه که به نظرتون می تونم با استفاده از html,css,javascript و bootstrap۴ و node.js یه سایت کامل طراحی کنم و براش هاست و دامنه بخرم و تکمیل کنم یا نه؟؟
    خلاصه اینا کافین یا باید php و laravel رو هم یاد بگیرم؟؟؟

    • علی شیخ

      2 ماه پیش

      سلام ممنون از شما❤
      ببینید ما دو بخش در دنیای وب داریم یکی فرانت اند و دیگری بک اند.
      فرانت اند میشه همون ظاهر وب سایت که html و css و javascript هست که از بوت استرپ هم به عنوان فریمورک html و css برای راحتی کار استفاده میکنیم.
      بک اند هم کارش ارتباط با دیتابیس و تبدیل وبسایت به یک سایت پویا هست که میتوتید از زبان های برنامه نویسی مختلف مثله php و node.js و یا پایتون و ... در بک اند استفاده کنید.
      برای شما که تازه کار هستید یه مقدار node سخت و پیچیده هست مخصوصا کانفیگ سرور ولی اگه با php خام و یا لاراول که فریمورک php هست سایت رو بزنید خیلی راحتر هست و کانفیگ سرور هم نمیخواد و شما میتونید روی سرور های اشتراکی با کمترین هزینه سایت را بالا بیارید

  • coal

    سلام ببخشید من چند تا سوال داشتم که خیلی منو گیج کرده
    یکی اینکه ما هنگامی که از تگ مفهومی استفاده میکنیم دیگه نباید از تگ div استفاده کنیم؟
    مثلا فرض کنید ما یک هدر داریم که داخل هدر یک لوگو و یک باکس سرچ و یک نو بار داریم به این صورت:

    <header>

    

    <nav>

    <ul>

    <li><li/>

    <ul/>

    <nav/>

    <"img src="logo.png>

    <"input type="text" placeholder="search>

    <header/>

    حالا اگر بخوایم داخل هدر این هارو تقسیم کنیم باید چیکار کنیم؟
    اینطوری درسته؟

    <header>```

    <"div id="navbar-right>
    <nav>
    <ul>
    <li><li/>
    <ul/>
    <nav/>
    <div/>

    <"div id="logo>
    <"img src="logo.png>
    <div/>

    <"div id="search>

    <"input type="text" placeholder="search>
    <header/>
    ```
    در اینجا من هدر رو به بخش های باکس سرچ نوبار و لوگو تقسیم کردم
    آیا کاری که کردم واقعا نیازه؟
    فکر کنم اگر ما از div استفاده نکنیم هم میتونیم به هر کدوم از المنت ها class یا id بدیم و در css به اون ها استایل بدیم تا در جای درستی قرار بگیرند
    حالا چه کاریه از div استفاده کنیم؟
    حالا این از هدر بود
    شما در آموزش اشاره کردین به تگ های مفهومی article و section
    تا جایی که من میدونم تگ section برای بخش بندی هستش دقیقا مثل div ولی تگ section فرقش با div اینه که تگ section یک تگ مفهومی هستش و فرق خاصی با div نداره
    article هم هروقت خواستیم مطلبی داخل سایت بذاریم میتونیم اون رو با تگ section به بخش های هدر کانتنت و فوتر تقسیم بندی کنیم
    اما در اینجا چند سوال پیش میاد

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

    • علی شیخ

      3 ماه پیش

      سلام وقت بخیر.
      توی html5 ویژگی جدیدی اضافه شد به اسم تگ های مفهومی یعنی اینکه نشون بده این تگ کارش چیه!؟!؟
      مثلا من برای هدر میام div قرار میدم و داخلش کد های مربوط به هدر را قرار میدم و از طرفی میام برای فوتر هم تگ div قرار میدم و کدهای فوتر داخلش قرار میدم.
      برای اینکه کدها تمیز تر باشه و خوانایی بیشتر داشته باشه و متور های جستجو مثله گوگل خیلی راحتر کد های html شما را index یا بخونن امدن از تگ مفهومی استفاده کردن
      گفتن آقا ما یه div داشتم داخلش کد های هدر قرار دادیم، بیایم و بجای div بزاریم header.
      اینجوری وقتی از تگ header استفاده کردم میفهمم که توی این تگ کد های هدر هست.
      پس تگ header (یا تگ های مفهومی) هیچ فرقی با div ندارند ما به این دلیل ازشون استفاده میکنیم که کد ها تمیز تر و قابل خواندن باشه و از همه مهتر توی SEO تاثیر داره به دلیل اینکه متورهای جستجو خیلی بهتر سایت ما رو درک میکنن.

  • ffuser

    سلام خسته نباشید و ممنونم از آموزش خوبتون.
    ببخشید من به صورت آفلاین کار می کنم و آیکن ها که از سایت fontawsom هستند آفلاین کار نمیکنن درسته؟ چون وقتی آنلاین میشم درست نشون داده می شه. راهکار چیه؟

    • علی شیخ

      4 ماه پیش

      سلام وقت بخیر.
      برای cdn نیاز هست که شما به اینترنت وصل باشید و اون کد ها رو از سرور بخونید و به پروژه اضافه کنید، حالا بجای اینکه از سرور خارجی بخونید میتونید خودتون اون لینک cdn را کپی کنید و توی مرورگر وارد کنید کد ها را مشاهده میکنید که میتونید کد ها را کپی کنید و توی یک فایل به هر اسمی با پسوند css ذخیره کنید و اون فایل را به پروژه اضافه کنید.

    • علی شیخ

      5 ماه پیش

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

    • علی شیخ

      5 ماه پیش

      شما نباید با دانلود منیجر یا نرم افزار IDM دانلود کنید و باید با خوده مرورگر اینکارو انجام بدید، از کروم استفاده میکنید پایین سمت چپ نمایش میده شروع دانلود را و فایرفاکس بالا سمت راست.
      برای دانلود ویدیو ها شما یک فایل mp4 دانلود میکنید و برای فایل تمرینی یک فایل rar دانلود میکنید

    • علی شیخ

      5 ماه پیش

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

  • Security 32

    سلام استاد میشه یه آموزش در مورد ساخت منوبار سایت درست کنید من خیلی گیرم تو این مبحث اگه هم میتونید بگید کی فیلم رو درست میکنید!

    • علی شیخ

      6 ماه پیش

      سلام ساخت navbar ساده هست و از تگ ul استفاده میکنید.که توی این دوره در قسمت ۲۲ ایجاد کردیم با float ولی توی دوره flexbox که با flexbox آشنا میشیم با اون ایجاد میکنیم.دوره flexbox هم مشاهده کنید.همچنین میتونید سرچ کنید navbar با html و css توی اینترنت و نمونه کد ببینید و سعی کنید خودتان پیاده سازی کنید

    • علی شیخ

      6 ماه پیش

      وردپرس یک مدیریت محتوا هست و با زبان php نوشته و در سمت بک اند هست ولی html و css سمت فرانت اند هست و اصلا با هم مقایسه نمیشن بلکه مکمل هم هستن

    • علی شیخ

      6 ماه پیش

      نه اینجوری نیست که حتما باید وردپرس ببینید، فرانت و بک اند دو بحث کاملا جدا هستند.شما فرانت از html و css استفاده میکنید در سمت بک اند میتونید از زبانهای بک اند مثله php، پایتون و ... و یا حتی از وردپرس که با زبان php نوشته شده استفاده کنید.