مراحل یادگیری HTML

مراحل یادگیری HTML

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

 

قبل از همه چیز

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

 

اولین فایل HTML شما

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

HTML یک زبان انتشار در شبکه جهانی وب است.

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

اجازه دهید اولین فایل HTML خودمان را ایجاد کنیم. ابتدا شما نیاز به یک ویرایشگر مثل TextEdit در سیستم عامل OS X یا NotePad در سیستم عامل های ویندوز.

  • با استفاده از ویرایشگر خود یک فایل ایجاد کنید.
  • مقداری متن دلخواه مثل “!Hello, World” تایپ کنید.
  • فایل را به عنوان مثال در دسکتاپ خود با نام index.html ذخیره کنید (پسوند .html در اینجا بسیار است).

hello-world

حال به برنامه دوم نیاز دارید، یک مرورگر. می توانید از مرورگرهایی مثل Internet Explorer، Google Chrome، Firefox، Safari یا Opera برای باز کردن فایل index.html استفاده کنید.

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

remember

در مورد این پنجره اشکال زدایی نگران نباشید، این فقط نقطه نظر ما را نشان می دهد.

بنابراین شکا اول قدم در راه HTML را همین الان برداشتید! شما حالا می دانید که موضوع از چه قرار است و می دانید که مرورگر با فایل HTML شما چه کار می کند.

 

تگ های HTML

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

html-tag

گذشته از آنکه doctype declaration چیست، ما از تگ های html برای ساخت سندمان استفاده می کنیم، آنگاه ما سندمان را با استفاده از بستن تگ به پایان می رسانیم – توجه داشته باشید اگثر تگ ها در html همانطور که باز می شوند، باید همانطور هم بسته شوند:

html-closing

اسلش (/) در تگ دوم را مشاهده می کنید؟ این نشان دهنده یک تگ بسته است. هر چیزی که ما بین تگ های باز و بسته قرار می دهیم، صفحه html می باشد. و این اولین قانون تگ ها در html است. تگ ها به نوعی محتوا را بسته بندی می کنند. تگ های زیر پارگراف محتوا را بسته بندی می کنند:

howdy

خــوب، حال قصد داریم یک بار دیگر به فایل index.html نگاهی بیندازیم، بعد از آن قول می دهم درباره منابع آموزشی حرف بزنم 🙂 ، شما دیدید که چگونه تگ ها، دور تگ های دیگر را احاطه می کنند؟ که به این عمل تو در تو گویند. تگ ها می توانند دور تگ های دیگر احاطه شوند. حتی این تگ ها می توانند درو تگ های بیشتری قرار گیرند. و این تو د تویی می تواند به طور نا محدود باشد.

elements

در این روش ما قصد داریم این بخش از صفحه را درست کنیم – یک سر صفحه یا (Header) که شامل عنوان است، پاراگراف ها که شامل لینک ها و span ها است. پاورقی یا (Footer) که حاوی فهرستی است. این ها بر اساس پایه HTML ساخته می شوند.

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

nesting-structure

 

ماموریت اول: دوره های مقدماتی را دنبال کنید

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

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

codeacademy

  • 30 روز یادگیری HTML و CSS یک مجموعه آموزش از وب سایتTutspluse است که توسط Jeffrey Way آموزش داده می شود. می توانید با صرف 10 یا 15 دقیقه در روز به مدت یک ماه، شما تمام چیزهای لازم برای ساخت وب سایت را فرا می گیرید (به شما قول می دهم). این مجموعه آموزش را می توانید به سادگی با جستجو در سایت های ایرانی پیدا و دانلود کرد.

tutsplus

Jeffrey Way شما را با تمام اصول HTML آشنا خواهد کرد. می توانید قسمت اول این مجموعه بی نظیر را در زیر، از سایت youtube مشاهده کنید:

 

ماموریت دوم: انتخاب یک ویرایشگر

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

مزایای کلیدی استفاده از ویرایشگرها:

  • هایلایت کردن دستورها: تگ های شما را با رنگ های خاص نشان می دهد، همچنین محتوا، نظرات و دیگر تگ های HTML به صورت رنگی خاص دیده می شود، تا یک محیط کدنویسی واضح تر داشته باشیم. بیشتر ویرایشگرها تعدادی  طرح های رنگی (schemes) برای انتخاب دارند، بعضی ها تیره و بعضی ها روشن، می توانید نمونه هایی را در این وب سایت ها مشاهده کنید: justinhileman.info یــا colour-schemes
  • تکمیل کد و نکات: تگ صحیح برای ساخت سر صفحه (Header) چیست؟ شاید بعضی وقتها برخی از تگ ها را فراموش کنید. خوشبختانه، بسیاری از ویرایشگرها هنگامی که شروع به تایپ می کنید، پیش بینی می کنند که از چه تگی می خواهید استفاده کنید. بسیاری از آنها هم مستنداتی ارائه می دهند که هر کجا که گمراه شدید از آنها استفاده کنید.
  • مدیریت پروژه: داشتن تمام فایل های پروژه کنار دستتان خیلی مفید است، به شما اجازه می دهد که در پوشه ها پیمایش کنید و به سرعت فایل ها را ویرایش کنید.
  • شماره خط ها: یک مزیت ظریف در ویرایشگرها نشان دادن شماره های خط است، که نشمان می دهد فایل شما چند خط دارد و هنگام اشکال زدایی کار را آسان می کند.

brackets1

مزایای بیشتری هم وجود دارد، تمام اینها هنگام نوشتم کد پدیدار می شوند. خــوب پس، انتخاب شما چیست؟ در زیر تعدادی ویرایشگر وجود دارد که نسخه مخصوص به سیستم عامل های Windows و OS X و Linux را پشتیبانی می کند. البته بعضی از آنها رایگان نیستند، و قرار هم نیست که آنها را خریداری کنیم، پیشنهاد می کنم که اگر از ویندوز استفاده می کنید از ویرایشگر Sublime Text یا phpStorm استفاده کنید که می توانید نسخه کرک شده را در سایت p30download پیدا کنید، احتمالا یکی از محبوبترین انتخاب ها در بین توسعه دهنده Sublime Text می باشد، منبع باز (Open Source) است و توسط یک جامعه بزرگ گسترش می یابد.

 

ماموریت سوم: ساخت چیزی ساده

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

  •  صفحه HTML خالی: شاید این زیاد جذاب نباشد، اما ساخت یک صفحه خالی شما را با استاندارد های HTML و اجزا آن آشنا می کند. تگ های این ها را به یاد داشته باشید: doctype!، تگ های <html> و <body>. از تگ <head> استفاده کنید و از تمام تگ هایی مثل <meta> و <title> و <link> استفاده کنید.
  • وبلاگ مقاله: یک مقاله می تواند تمام تگ های مخصوص HTML را در خود نگه دارد. مقاله خود را با <article> شروع کنید، از تگ <h2> برای عنوان مقاله استفاده کنید، معلوم است! از تگ <p> هم برای محتوا یا پاراگراف ها استفاده کنید، از تگ های <em> یا <strong> هم برای تاکید می شود استفاده کرد.
  • عکس های نمونه کار شما: می توانید چیز هایی پیچیده درست کنید، به خاطر داشته باشید که در واقع به هیچ کدام از اینها Style نمی دهید، شما فقط ساختار صفحه خود را ایجاد می کنید. در این مرحله باید از لیست بدون شماره <ul> با آیتم <li> برای هر کدام از نمونه کارها استفاده کنید، هر کدام از نمونه کار ها می تواند یک عکس داشته باشد که این کار را با تگ <""=img="" src="" alt> می شود ایجاد کرد (مشخصه src آدرس عکس شما را تعیین می کند). این تگ img را بیت تگ <""=a href> قرار دهید تا عکس شما قابلیت لینک داشته باشد. توجه کنید که قوانین تو در تو را باید کاملا درک کرده باشید.

Grid-Portfolio-Retina-Template

نشانه گذاری (markup) خود را تمیز نگه دارید تا تگ های تو در تو به آسانی قابل خواند باشد. هم چنین می توانید برای کد های خود نوشته (comments) بگزارید، (comments) یک متن دلخواه است که در خروجی نشان داده نمی شود و فقط برای کسانی که کد شما را مشاهده می کنند مفید است که در زیر مشاهده می کنید:

 

کار خود را بررسی کنید

حال که فایل HTML خود را ایجاد کرده ایم، وقت بررسی کردن آن است. به وب سایت validator.w3.org رفته و فایل خود را اعتبار سنجی کنید.

 

پاداش!

هنگامی که اعتماد به نفش شما در ساخت چیزی بالا رفت، چرا در یک پروژه واقعی از آن استفاده نکنیم؟ به طرح زیر نگاه کنید و ببینید که چگونه با استفاده از نشانه گزاری های ساده به وجود آمده است:

dribbble

 

ماموریت چهارم: توسعه نشانه گذاری ها

این مهم است که یاد بگیرید چگونه و کجا از یک عنصر استفاده کنید

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

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

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

در زیر منابع ای وجود دارد که عناصر HTML را پوشش می دهد:

ماموریت پنجم: خواندن کتاب

داشتن کتاب در دست یک مرجع خوب بوده است یا به اندازه کافی بوده است. کتاب را اول تا آخر بخوانید. زمانی را صرف خواند کتاب کنید. در زیر تعداد کتاب را معرفی کرده ایم که مفید است، البته به زبان انگلیسی است. بهتـــر! خواندن کتاب های انگلیسی باعث بهبود زبان خارجی هم می شود. 🙂

html5

البته این کتاب ها رایگان نیستند، ولی به راحتی می توانید از دیگر سایت ها مجانی دریافت کنید.

 

ماموریت ششم: نگاه به انجمن ها (Forum)

این یکی از قدم هایی است که برای تبدیل شدن به یک توسعه دهنده وب لازم دارید. هر سوالی یا مشکلی که دارید، همشیه کسی است که همان مشکل شما را داشته باشد و می تواند به شما کمک کند. بروید و در یک انجمن عضو شوید، در خواست کمک کنید و به توصیه های با تجربه ها گوش دهید!

در کنار انجمن ها، شبکه های اجتماعی هم عالی هستند که می توانید با قهرمانان خود تبادل اطلاعات کنید:

 

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