توضیحات

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

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


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

مدرس دوره علی شیخ
مدت دوره 04:51:23
تعداد ویدو 28

وضعیت دوره : کامل شده
قیمت دوره : رایگان

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

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

  • سلام ببخشید من چند تا سوال داشتم که خیلی منو گیج کرده
    یکی اینکه ما هنگامی که از تگ مفهومی استفاده میکنیم دیگه نباید از تگ 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 اما هنوز مشکل دارم هنگام طراحی سایت و بعضی اوقات چیزایی رو در سایت های مختلف میبینم که وقتی نمیتونم طراحی کنم اعتماد به نفسم میاد پایین
    ممنون میشم کمکم کنید تا بتونم راهمو پیدا کنم و مثل شما استاد عزیز بتونم حرفه ای باشم و بتونم هر چیزی رو بدون دیدن کدش طراحی کنم سپاس از وقتی که میذارید

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

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

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

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

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

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

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

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

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

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