♥به بهترین آکادمی آنلاین برای آموزش HTML-CSS خوش آمدید♥

با پایه ای ترین زبان برنامه نویسی و طراحی سایت آشنا میشویم.

زبان نشانه گذاری HTML به عنوان اولین پایه برای هر دوره آموزش طراحی سایت در نظر گرفته می‌شود.

HTML را عنصر کلیدی صفحات وب می‌دانند و تمامی زبان‌های برنامه‌نویسی برای طراحی سایت، به شکلی به HTML وابسته هستند.

مرورگرها اسناد HTML را از وب سرور یا مخزن لوکال (Local) دریافت کرده و آن‌ها را به صفحات وب چند رسانه‌ای تبدیل می‌کنند. در واقع HTML ساختار معنایی صفحات وب را تعریف کرده و شامل مشخصات ظاهری سند است.

 

 

 

روش های طراحی سایت:

طراحی سایت با کدنویسی: نیازمند آشنایی کامل و تسلط به HTML- CSS -Javascript و تمام فریمورک های آنها و همچنین برنامه نویسی بک اند

طراحی سایت بدون کدنویسی: از طریق استفاده محیط های تولید محتوا و مدیریت محتوا مانند وردپرس

HTML  یک پیش نیاز بسیار مهم برای طراحی سایت چه با کدنویسی چه بدون کدنویسی!

 

HTML مخفف واژه Hyper Text Markup Language است. در حقیقت معنی و مفهوم آن زبان نشانه گذاری متن است. از HTML برای ایجاد ساختار کلی صفحه وب استفاده می شود. این زبان نشانه گذاری توسط تمامی مرورگرها پشتیبانی می شود و شما می توانید به واسطه آن صفحات وب را توصیف کنید.

پشت تمام وب‌سایت‌ها، تیمی از طراحان و توسعه‌دهندگان وب حضور دارند که تلاش می‌کنند تا یک سایت هم از نظر زیبایی‌شناختی و هم کاربرد، جذاب به‌نظر برسد. HTML و CSS دو زبان پایه برای ایجاد صفحات وب هستند. HTML ساختار صفحه را آماده می‌کند، در حالی‌که CSS طرح‌بندی را برای دستگاه‌های مختلف ارائه می‌دهد. برای همین می‌توان گفت که یادگیری HTML و CSS برای طراحی سایت از اهمیت بالایی برخوردار است.

زبان HTML چیست؟

HTML مخفف “Hypertext Markup Language” است. این زبان به‌عنوان یک زبان نشانه‌گذاری استاندارد، برای ساخت صفحات وب و اپلیکیشن‌ها استفاده می‌شود. HTML از مجموعه‌ای از برچسب‌ها برای ساختار محتوا و تعریف طرح صفحه وب استفاده می‌کند. این برچسب‌ها توسط مرورگرهای وب برای نمایش متن، تصاویر، پیوندها و سایر عناصر رسانه‌ای در اینترنت تفسیر می‌شوند. یادگیری اصول طراحی سایت با HTML و CSS برای ایجاد صفحات وب تعاملی و بصری جذاب، یک ضرورت است. مهم‌ترین کاربردهای HTML عبارتند از:

• توسعه صفحات وب
• پیمایش در اینترنت
• طراحی‌های واکنش‌گرا
• عملکرد ذخیره‌سازی در مرورگر
• پشتیبانی از ورود اطلاعات
• ایجاد اسناد وب
• توسعه بازی
• برنامه‌های وب آفلاین
• ویژگی Cutting Edge
• غنی‌سازی وبسایت

فرانت اند (Front End) به چه معناست؟

HTML یکی از پرکاربردترین زبان‌ها در زمینه طراحی سایت فرانت اند است. به مجموعه تکنولوژی هایی که روی ظاهر و گرافیک سایت تاثیر گذاشته و هیچ ارتباطی با عملکرد آن ندارند فرانت اند گفته می‌شود. در فرانت اند فقط با عناصر بصری سایت کار می‌کنیم و هر تغییری که ایجاد می‌کنیم در چهره سایت مشخص می‌شود.

تاریخچه زبان HTML

برای اینکه بدانیم HTML از کجا آمده باید سفر کوتاهی به سال ۱۹۹۱ داشته باشیم. زمانی که آقای Tim Berners-Lee کار خود را روی ۱۸ Tag یا همان برچسب ساده شروع کرد و اولین نسخه HTML را طراحی کرد. HTML روز به روز پیشرفت کرد و در هر نسخه امکانات بیشتری را در قالب تگ‌‌های کاربردی‌تر در اختیار طراحان قرار داد.

به این ترتیب این زبان مشکلات قبلی خود را به مرور رفع کرد. HTML4 در سال ۱۹۹۹ معرفی شد و توانست تا مدت‌ها توسط طراحان وب مورد استفاده قرار گیرد، تا این که بزرگترین تحول تاریخ HTML با معرفی HTML5 اتفاق افتاد. این نسخه از زبان HTML توانست بیش از پیش به توسعه دهندگان در طراحی سایت‌ها کمک کند

HTML5 چیست؟

تا سال ۲۰۰۸ بازار HTML4 داغ بود و به طور گسترده استفاده می‌شد. اما مشخص بود که این نسخه از HTML ضعف‌هایی دارد و باید بروزرسانی شود. به همین دلیل کمپانی WHATWG توسعه این زبان را در دست گرفت و استانداردهای آن را ارتقا داد. ضعف اصلی که باید روی آن کار می‌شد مربوط به چندرسانه‌ای (multimedia) و گرافیک بود.

HTML5 در سال ۲۰۱۴ یک آپدیت مهم و اساسی را تجربه کرد. در این آپدیت تگ‌های HTML جدیدی اضافه شدند که تاثیر بسیار مثبتی در بالا بردن کیفیت و بهبود تجربه کاربران داشتند. پس از این آپدیت طراحی سایت‌ها ساختار منظمی پیدا کرد و مفاهیم قدیمی (مانند استفاده از table در بدنه اصلی صفحات) کنار گذاشته شدند.

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

قسمت ظاهری یک وبسایت یا همان فرانت‌اند، با استفاده از زبان نشانه‌گذاری HTML ایجاد می‌شود، در حقیقت اچ تی ام ال مانند اسکلت و چهارچوب‌های یک وبسایت عمل می‌کند، فرقی نمی‌کند برنامه‌نویسی سمت سرور را با چه زبانی انجام دهید، شما در هر صورت باید آشنایی نسبتا کاملی با زبان HTML داشته باشید، بدون وجود اچ تی ام ال هیچ وبسایتی وجود نخواهد داشت!

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

ما در آکادمی آنلاین قاسمی نه تنها تمام تگ ها را درس به درس ، نکته به نکته تدریس کرده ایم بلکه css را به شکل کاملاً متفاوت و اصولی و پروژه محور تدریس کرده ایم . بعد از اتمام دوره طراحی سایت با html/css  آکادمی آنلاین قاسمی شما به راحتی قادر خواهید بود صفحه اصلی هر سایت         (landing page) را طراحی کنید و کم کم به فکر کسب درامد از طریق طراحی سایت با HTML/CSS  باشید.

 

نقش CSS در طراحی سایت

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

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

 

مهمترین سرفصل های طراحی سایت با HTML

• معرفی زبان HTML
• تعریف ساختار یک سایت با HTML
• شروع ایجاد یک سایت
• معرفی تگ ها و تعریف بدنه سایت
• ایجاد یک صفحه اینترنتی
• آشنایی با تگ های حرفه ای تر
• کار با رنگ ها ، جداول و ساختار ها در HTML
• معرفی HTML5 و تگ های که اضافه شده

معرفی و کار با زبان CSS

• معرفی زبان استایل دهی CSS
• کار با HTML و CSS
• معرفی خاصیت های زبان CSS
• معرفی خاصیت های جدید در CSS3
• استایل دهی های حرفه ای به کدهای HTML

تگ HTML چیست؟

HTML به کمک برچسب‌‌ها (Tags) عناصر مختلف را کنار هم می‌چیند و هر کاربر با توجه به نیاز خود از آن‌ها استفاده می‌کند. تگ‌ها عناصری هستند که وظایف گوناگونی دارند و با فراخوانی هر کدام کارشان شروع شده و با بستن تگ کارشان تمام می‌شود. مثلا برای نوشتن پاراگراف‌ها در زبان HTML از تگ p استفاده می‌شود و زمانی که پاراگراف تمام شده، تگ هم بسته می‌شود. همچنین برای نشان دادن لینک‌ها از تگ a استفاده در صفحات وب استفاده می‌شود.

 ریسپانسیو کردن سایت

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

در طراحی سایت با HTML و CSS برای ریسپانسیو کردن سایت می بایست یک بوت استرپ پاسخگو تنظیم کنید. برای این کار باید یک کدنویسی ساده انجام دهید. زمانی که کد متا تگ را تعریف کردید، در حقیقت به مرورگر اعلام کرده اید که عرض وب سایت را مطابق عرض دستگاه مورد نظر تنظیم کند. در گام بعدی باید پیوندی را در کتابخانه های Bootstrap به وجود آورید. برای این کا نیز باید از کدنویسی استفاده کنید.

طراحی سایت واکنشگرا مربوط به تغییر ظاهر صفحات سایت متناسب با سایز صفحه نمایش دستگاه کاربران است. امروزه کاربران با موبایل، تبلت، لپتاپ و سیستم هایی با مانیتورهای wide از اینترنت استفاده می‌کنند و بنابراین صفحات وب سایت ما باید به گونه‌ای طراحی شده باشند که کاربران موقع بازدید و استفاده از این صفحات نیاز به زوم کردن، اسکرول کردن افقی و… را نداشته باشند و  وب سایت ما در صفحه نمایش های مختلف با اندازه های مختلف به درستی نمایش پیدا کند. در این دوره ما به طور کامل در رابطه با Media Query ها صحبت کرده ایم و به شما یاد می دهیم که چطور بدون استفاده از فریمورک ها سایت خود را ریسپانسیو کنید. حتی یاد می گیریم که چطور با کمک Flexbox و CSS Grid ریسپانسیو کردن سایت را راحت تر انجام داده و خیلی سریع سایت های خود را ریسپانسیو کنیم.

مزایای HTML :

• یادگیری آسان و لذت‌بخش
• قابلیت اجرا در تمام مرورگرها
• متن باز و رایگان بودن
• ادغام آسان با زبان‌های سمت سرور مثل php

معایب HTML:

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

HTML چه رابطه‌ای با زبان‌‌های css و javascript دارد؟

کمتر پیش می‌آید که از HTML صحبت کنیم و ذهنمان به سمت زبان‌های css و JavaScript کشیده نشود. اما به این نکته توجه داشته باشید که امروزه HTML به تنهایی کاربرد زیادی ندارد.

چون فقط ساختار صفحه را شکل داده و اجازه اضافه کردن جذابیت‌های ظاهری را نمی‌دهد. صفحات HTML به تنهایی ارزشی برای انتشار ندارند اما زمانی که در کنار css و JavaScript قرار می‌گیرند، زیبایی واقعی خود را در طراحی وب نشان می‌دهند.

آموزش استایل دهی به سند html

برای style دادن به صفحه html خود سه روش داریم :

Internal : با استفاده از تگ style در قسمت head می توانیم به کد خود استایل دهیم.

Inline : استایل دادن در هر خط از کد html را استایل اینلاین می گویند .

External : استایل دادن به صورت ایجاد یک فایل خارجی و قراردادن لینک آن در قسمت head را اکسترنال می گویند.

امروزه با توجه به پیشرفت های تکنولوژی، برنامه نویسان می بایست برای جذابیت یک وب سایت با استفاده از بروزترین ابزارها کار ویرایشگری و طراحی را انجام دهند. که در این میان یکی از دو ابزار IDE و TEXT می تواند بسیار کاربر باشد. البته برای انجام نوشتن کدها نیز ادیتورهای به روزی وجود دارد. اما هنگامی که شما از نرم افزارهایی مانند Notepad برای کدنویسی استفاده کنید دیگر خبری از تشخیص دادن خطاها، رنگ گذاری کردن کلمات اصلی و کلیدی و بسیاری امکانات دیگر نیست. خوب است بدانید در طراحی سایت به کارگیری از نرم افزارهای گرافیکی مشهوری مانند Sketch می تواند بسیار کاربردی باشد.

 برخی از معروف‌ترین Code Editor‌ها:

• PhpStorm
• Microsoft Visual Studio
• Microsoft Expression Web
• Notepad++
• Adobe Dreamweaver
• Komodo Edit
• NetBeans

مزایای یادگیری HTML در طراحی سایت چیست؟

یادگیری HTML برای طراحی سایت چندین مزیت دارد که در ادامه به برخی از آن‌ها اشاره می‌کنیم.

• ساختاربندی و سازمان‌دهی:
  HTML پایه و اساس ساختاربندی و سازماندهی محتوای یک سایت است. این مزیت به شما امکان می‌دهد تا سرفصل‌ها، پاراگراف‌ها، فهرست‌ها، تصاویر، پیوندها و سایر عناصر صفحه را تعریف و به‌راحتی یک سایت سازمان‌یافته و کاربرپسند ایجاد کنید.
• کنترل بر محتوا:
  با یادگیری HTML برای طراحی سایت، کنترل محتوای وبسایت خود را به‌دست می‌آورید. بدین ترتیب می‌توانید طرح‌بندی، قالب‌بندی و نحوه قرارگیری متن و تصاویر را سفارشی کنید و مطمئن شوید که وبسایت، طراحی و برند مورد نظر شما را منعکس می‌کند.
• سازگاری و دسترسی:
  HTML یک زبان جهانی است که همه مرورگرهای وب آن را درک می‌کنند. بنابراین سایت شما برای طیف گسترده‌ای از کاربران قابل دسترسی خواهد بود. همچنین به شما این امکان را می‌دهد که وبسایت خود را برای موتورهای جستجو بهینه کنید و دید و دسترسی آن را بهبود بخشید.
• همکاری با توسعه‌دهندگان:
  درک HTML، امکان همکاری بهتر با توسعه‌دهندگان وب را فراهم می‌کند. شما می‌توانید به‌طور موثر نیازهای طراحی خود را به اشتراک بگذارید و برای ساخت وبسایتی که با چشم‌انداز شما مطابقت دارد با یکدیگر همکاری کنید.
• یادگیری مستمر:
  HTML بلوک سازنده توسعه وب است. با آموزش طراحی سایت با HTML و CSS، درک سایر زبان‌های وب مانند جاوا اسکریپت آسان‌تر می‌شود، مجموعه مهارت‌های شما گسترش می‌یابد و فرصت‌های جدیدی را در این زمینه به‌دست می‌آورید.

 

ما در آکادمی آنلاین قاسمی این امکان را فراهم نموده ایم تا با سبکی کاملا متفاوت و اصولی شما را از آغاز تا پایان دوره طراحی سایت با HTML/CSS همراهی کنیم و موفقیت شما را در این درس شاهد باشیم.