آموزش HTML و CSS مقدماتی

آدرس کوتاه این صفحه : http://darkoobedu.ir/?p=1887

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

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

زبان HTML چیست؟

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

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

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

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

آموزش html مقدماتی چقدر زمان می برد؟

آموزش HTML مقدماتی چقدر زمان می برد؟

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

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

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

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

اصول بنیادی آموزش HTML مقدماتی

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

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

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

My cat is very grumpy

اگر بخواهیم این خط را به یک پاراگراف جدا تبدیل کنیم، می توانیم با استفاده از المنت پاراگراف که جزو تگ های انکلوزینگ است این کار را انجام دهیم. المنت پاراگراف به شکل (<p>) نوشته می شود و به شکل زیر مورد استفاده قرار می گیرد:

<p>My cat is very grumpy</p>

آموزش html و css مقدماتی

آناتومی یک المنت HTML

بیاید نگاه دقیق تری به مثال قبل بیندازیم:

همانطور که در عکس بالا می بینید یک المنت HTML از این بخش ها تشکیل شده است:

  • اپنینگ تگ: این بخش شامل نام المنتی می شود که قرار است از آن استفاده شود (در این مثال p نشانه المنت پاراگراف است)، که همان طور که می بینید در بین علامت <> قرار گرفته است. اپنینگ تگ یا همان تگ بازگشایی مشخص می کند که المنت کار خود را از کدام نقطه شروع می کند. در این مثال، المنت پاراگراف از ابتدای متن آغاز شده است.
  • محتوا: محتوایی که المنت روی آن اثر می گذارد. در این مثال همان جمله متنی که نوشته شده محتوای ما است.
  • کلوزینگ تگ: در نگاه اول مانند همان اپنینگ تگ است اما یک تفاوت ظریف دارد آن هم استفاده از اسلش قبل از نام المنت است. فراموش کردن این اسلش یک اشتباه رایج بین کارآموزان تازه کار HTML است. پس حواس خود را جمع کنید!

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

المنت ها انواع متنوعی دارند و روی فرم های مختلف محتوا اعم از متن و عکس و ویدیو اثر می گذارند. دیگر المنت های پرکاربرد html را در تصویر زیر ببینید:

تگ های متداول اچ تی ام ال

همچنین المنت ها می توانند دو دسته زیر را شامل شوند:

  • متا المنت ها
  • المنت های ساختاری

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

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

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

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

به عنوان مثال المنت های ساختاری مانند <div> و <span>  برای مشخص کردن محتوای block-level (یعنی محتوایی که از تمام عرض صفحه یا کادر خود استفاده می کند) و جدا کردن آن از محتوای inline (یعنی محتوایی که فقط فضای بین تگ ها را اشغال می کند) به کار می روند.

در حالی که المنت هایی مانند <header> برای مشخص کردن محتوایی که باید در قسمت هدر صفحه نشان داده شود و المنت <footer> برای مشخص کردن محتوایی که باید در قسمت فوتر صفحه نشان داده شود استفاده می شوند.

مفهوم Attributes در HTML

یکی دیگر از مفاهیم کلیدی در HTML مفهوم اتربیوت ها یا attributes است. اتربیوت ها دستورالعمل هایی هستند که می توانید آن ها را به تگ های HTML اضافه کنید تا اطلاعات بیشتری را راجع به المنت ها ارائه دهند. برای مثال، یک المنت پاراگراف HTML را در نظر بگیرید.

این المنت می تواند دارای attribute هایی باشد که مشخص می کنند این پاراگراف چگونه نمایش داده شود (چپ چین، راست چین و یا وسط). برای استفاده از attribute ها باید از فرمول زیر استفاده کنید. به عنوان مثال ما در اینجا attribute راست چین بودن پاراگراف را نوشته ایم:

Example: <p = align=”right”>This is my paragraph!</p>

همان طور که می بینید attribute در پرانتز تگ اپنینگ استفاده می شود.

چطور با HTML وب سایت طراحی کنیم؟

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

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

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

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

البته برای داشتن یک سایت جذاب و موفق، HTML به تنهایی کافی نیست و شما برای اضافه کردن گرافیک ها، فرم ها، اسلاید ها و دیگر امکانات و ویژگی های کارآمد به سایت خود به تکنیک های برنامه نویسی بیشتری نیاز دارید.

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

آموزش css مقدماتی

آموزش css مقدماتی

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

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

زبان CSS چیست و چه ارتباطی با HTML دارد؟

لغت CSS مخفف عبارت Cascading Style Sheets است و تمرکز ویژه ای بر استایل یا همان طرح و سبک صفحات وب دارد.

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

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

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

آموزش مقدماتی CSS – نحوه کار با CSS

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

p  {  color:pink;  font-weight:bold;  }

در این کد، p نماد پاراگراف است و در زبان CSS به آن سلکتور (“selector”) می گویند. سلکتور بخشی از یک کد CSS است که مشخص می کند CSS روی کدام المنت HTML باید اثر بگذارد و به آن حالت دهد. همانطور که در کد بالا می بینید در زبان CSS، سلکتور سمت چپ اولین (}) قرار می گیرد. عبارتی که درون {} قرار می گیرد declaration نام دارد که می شود آن را اعلامیه معنی کرد.

 Declaration حاوی ویژگی ها و ارزش هایی است که باید روی سلکتور اعمال شوند و آن را تغییر دهند. این ویژگی ها شامل مواردی مانند سایز فونت، رنگ و فاصله ها می شوند. ارزش ها نیز مشخص می کنند که هر کدام از این ویژگی ها تا چه حد و به چه شکل تغییر کنند.

در مثال بالا،  “color” و “font-weight”  به عنوان ویژگی یا همان properties شناخته می شوند. در ادامه “pink” و “bold” نیز به عنوان ارزش یا values نام گذاری می شوند.

همینطور به کل عبارت {  color:pink;  font-weight:bold;  } اعلامیه یا Declaration گفته می شود. با استفاده از همین فرمول می شود در CSS فونت ها را تغییر داد، رنگ پس زمینه را عوض کرد، فاصله گذاری بین متون را تنظیم کرد و بسیاری از کار های دیگر. به یک مثال دیگر توجه کنید:

body  {  background-color:lightblue;  }

این کد باعث می شود تا پس زمینه صفحه شما آبی کمرنگ شود. برای یادآوری دوباره تاکید می کنیم که body در اینجا یکی از المنت های HTML است که می خواهیم تغییراتی را با استفاده از کد CSS روی آن اعمال کنیم. یک مثال دیگر:

p  {  font-size:20px;  color:red;  }

با این کد سایز فونت پاراگراف مورد نظر شما ۲۰ و رنگ آن به رنگ قرمز در می آید.

آموزش مقدماتی css – css اکسترنال، اینترنال و اینلاین

آموزش مقدماتی css – css اکسترنال، اینترنال و اینلاین

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

تنها کافی است روی یک برنامه ورد یا تکست ادیتور روی کامپیوتر کد مورد نظر خود را بنویسید. حالا برای اضافه کردن کد CSS به صفحات HTML سه راه پیش روی شما است.

کد های CSS (یا استایل شیت ها) می توانند به سه شکل اکسترنال، اینترنال و اینلاین مورد استفاده قرار بگیرند. استایل شیت های اکسترنال با پسوند.CSS ذخیره می شود.

از این فایل ها می توانید برای طراحی کل صفحات یک وب سایت استفاده کنید (به جای آن که برای هر کدام از المنت های HTML در هر صفحه یک کد css جدا بنویسید).

برای استفاده از استایل شیت یا CSS اکسترنال، فایل.HTML شما باید شامل یک قسمت هدر باشد که فایل HTML را به استایل شیت اکسترنال مرتبط و لینک می کند. برای مثال به این هدر توجه کنید:

<head>

<link rel=”stylesheet”  type=”text/css”  href=mysitestyle.css”>

</head>

این کد باعث می شود فایل.HTML به فایل استایل شیت اکسترنال شما (در این مثال فایل mysitestyle.css) لینک شود. در نتیجه تمام دستورات CSS شما روی تمام صفحات HTML وب سایت اجرا خواهند شد.

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

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

<head>

<style>

Body  {  background-color:thistle;  }

P  {  font-size:20px;  color:mediumblue;  }

</style>

</head>

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

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

<h1  style=”font-size:40px;color:violet;”>Check out this headline!</h1>

این کد باعث می شود تا فقط یک سر تیتر مشخص در یک صفحه مشخص از.HTML با فونت ۴۰ و رنگ بنفش نمایش داده شود.

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

دلیل این امر این است که در این روش شما تنها روی یک فایل CSS تمرکز دارید و می توانید با ایجاد تغییرات تنها در همین یک فایل، کل وب سایت را طراحی و یا اصلاح کنید.

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

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

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