آموزش html به زبان ساده و کاملا پروژه محور

 

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

آموزش html به زبان ساده و پروژه محور

سلام خیلی از شما ممنونم که برای یادگیری زبان html سایت ما را انتخاب کردید و در دوره ی آموزش html به زبان ساده شرکت کردید.

جهت رفتن به تمامی سرفصل های دوره روی لینک بالا کلیک کنید.

ما چرا باید زبان html را یاد بگیریم؟

چون این زبان برای ساخت بدنه ی اولیه ی سایت مورد استفاده قرار می گیرد. بدنه ی اولیه ی سایت شامل فیلد ها، جداول، مطالب، لینک ها و… می شود. بدون html سایت هیچ معنایی ندارد.

پیش نیاز ها برای شروع برنامه نویسی و شرکت در دوره ی آموزش html به زبان ساده

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

اگر با سیستم عامل ویندوز کار می کنید، می توانید از ویرایش گر متن سیستمتان که همان notepad است استفاده کنید.

ولی اگر خواستید حرفه ای تر کار کنید، می توانید از برنامه هایی نظیر ++notepad استفاده کنید.

دانلود ++notepad

سومین مورد هم یک مرورگر است که در آن خروجی بگیرید. خروجی گرفتن یعنی همان نتیجه ای که از اجرای کد به دست می آید. در این واره در ادامه توضیحات بیشتری ارائه خواهد شد. هر مرورگری می شود (کروم، فایرفاکس و…)

چگونه در دوره ی آموزش html به زبان ساده آموزش می دهیم؟

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

بعد از اینکه این زبان را یاد گرفتیم و دوره ی آموزش html به زبان ساده را پشت سر گذاشتیم به سراغ کدام زبان بریم؟

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

توضیح مختصری درباره با قالب سایت

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

با html می توان فهرست ها که در هدر یا بخش بالایی هستند را طراحی کرد ولی بدون رنگ و جذابیت.

می توان مطالب را بارگذاری کرد به صورت خشک و خسته کننده.

این قابلیت وجود دارد که سایدبار(همان قسمت کناری سایت) را بدون ترتیب خاص برنامه نویسی کرد.

فوتر را غیر قابل تشخیص با بقیه ی موارد طراحی کرد.

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

شاید با خود بگویید که این موارد چرا گفته شد؟

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

ولی شما باید هر دوی آنها را یاد بگیرید.

html چیست؟

html، یک زبان برنامه نویسی نیست بلکه یک زبان نشانه گذاری open source تحت وب است. این زبان، اولین زبانی است که برای ورود به زمینه ی برنامه نویسی تحت وب باید حتما یاد بگیرید.

چرا به html می گویند html؟

به این دلیل ⇓

چرا به html میگن html

شاید این سوال که چرا به html می گویند html برای شما پیش آمده باشه

تگ چیست؟

تگ به مواردی گفته می شود که درون دو <> قرار می گیرد. تمام تگ ها جایی باز و جایی بسته می شوند. باز شدن <>و بسته شدن</> البته بعضی از آنها هستند که هیچ وقت بسته نمی شوند.

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

مثال یک تگ:

<html></html>

هر جایی در دوره ی آموزش html به زبان ساده گفته شد مثلا، تگ p باید بدانید که منظور ما در واقع این است که: <p>

در مورد تگ p توضیح داده خواهد شد به عنوان مثال عرض می کنم

برای اینکه بهتر متوجه شوید به مثال های زیر دقت کنید. این کد ها به صورت مثال هستند و شما اگر نمی دانید که این کد ها چه هستند اصلا نگران نباشید.

تگ b منظور در واقع <b> است.

تگ h1 منظور در واقع <h1> است.

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

تگ html چیست؟

ما با این تگ، به مرورگر می گوییم که ما می خواهیم کد های html بنویسیم.

ما تمامی کد های html را در داخل این تگ می نویسیم. و در پایان <html/> که به معنای اتمام کد های ماست.

html از چند بخش تشکیل می شود؟

این زبان از دو بخش تشکیل می شود.

یکی از این بخش ها، تگ <head> است که در آن مواردی نظیر عنوان صفحه کلمات کلیدی و متا تگ ها قرار می گیرند.

ما متا تگ ها را در جلسات بعد توضیح خواهیم داد.

و بخش دوم تگ <body> است. که در آن بخش اصلی قالب وب سایت ما قرار می گیرد.

ما در جلسه ی اول آموزش html به زبان ساده تنها به شما درکی از این زبان انتقال می دهیم و در جلسات آینده بیشتر توضیح داده می شود.

چگونه یک سند html درست کنیم؟

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

و بعد از همان منو روی save as کلیک کرده و بعد مکان فایل خود را انتخاب کنید، سپس برای فایل خود یک نام با پسوند html بگذارید مثال:

اگر نام مورد نظر شما index است، باید بنویسید index.html

روش دیگری هم وجود دارد که شما باید در مکانی که قصد دارید این فایل را بسازید کلیک راست کرده موس را روی گزینه ی new نگه داشته تا زبانه ای باز شود سپس شما باید گزینه ی Text document یا کلمه ای مشابه را انتخاب کنید تا یک فایل با پسوند txt ساخته شود. سپس شما باید پسوند فایل خود را تغییر دهید نام مهم نیست ولی پسوند باید حتما html باشد.

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

خروجی گرفتن

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

برای خروجی گرفتن از فایلی با پسوند html دو روش وجود دارد.

  1. روی فایل مورد نظر کلیک راست کرده و موس را روی گزینه ی open with ببرید و منتظر بمانید تا زبانه ای باز شود سپس روی یکی از مرورگر های خود که در زبان موجود هستند کلیک کنید تا بتوانید خروجی را مشاهده کنید.
  2. روش دوم که روش ساده تری است این است که شما باید مرورگر خود را باز کرده و عمل دراپ و درگ را انجام دهید.

تگ p

ما تمامی متون خود را در این تگ p می نویسیم.

این تگ مخفف کلمه ی پاراگراف می باشد.

به عنوان مثال به کد زیر دقت کنید.

بازهم تکرار می کنم اگر متوجه نشدید نگران نباشید چون ما در این جلسه تنها قصد داریم درکی از این زبان در ذهن شما ایجاد کنیم.

شما اگر از کد بالا خروجی بگیرید خروجی، کاملا درست کار می کند.

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

 

در مثال بالا شما تگ p را مشاهده می کنید که باز شده. باز شدن تگ p=

<p>

ما هر چیزی را که بین باز و بسته شدن یک تگ قرار دهیم بنا به نوع تگ و کاری که آن تگ انجام می دهد عنصری که در بین این تگ است تغییر می کند. در بالا هم ما در میان باز و بسته شدن تگ p عبارت hello world را قرار داده ایم.

بعد از آن هم ما این تگ را بسته ایم. بسته شده تگ p=

<p/>

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

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

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

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

خروجی:

hello world

توضیح قطعه کد بالا

خط اول که در آن به مرور گر گفته ایم که کدهای ما html هستند.(برای ساختار استاندارد کد ها مورد استفاده قرار می گیرد)

در خط دوم تگ <head> بخش اول کد ها را باز کرده ایم.(این تگ هم برای ساخت صفحات استاندارد است)

و بعد هم این تگ را بسته ایم. شما هنوز عناصری که در این بخش از زبان html هستند را نیاموخته اید برای همین میان این تگ را خالی می گذاریم. ولی در جلسات بعدی دوره ی آموزش html به زبان ساده به صورت کامل به این موضوعات می پردازیم.

بعد تگ<body> قسمت دوم زبان html باز شده است.(و آخرین تگی که برای ساخت صفحات استاندارد به کار می آید)

در ادامه هم که همان گونه که گفته شده تگ p قرار گرفته است و ما به مرور گر گفته ایم که جمله ی مخصوص کدنویسان یا همان hello world را نمایش دهد. سپس تگ p به صورت <p/> بسته شده است.

و بعد هم به ترتیب تگ های استاندارد سازی صفحات زیر بسته شده اند.

<body/>

<html/>

هستند که بسته شده اند.

سخن پایانی جلسه ی اول آموزش html به زبان ساده

من در جلسه ی اول دوره ی آموزش html به زبان ساده  قصد داشتم به صورت کلی درکی از html به شما انتقال دهم. از جلسه ی بعد به صورت تخصصی تر به آموزش html خواهیم پرداخت.

یک جمله ی انگیزشی:

شما در پایین لینکی را مشاهده می کنید که اگر روی آن کلیک کنید به آموزش بعدی دوره ی آموزش html به زبان ساده خواهید رفت. آیا می دانستید که این لینک ها همگی با این زبان نوشته شده اند؟

برای دیدن تمامی سرفصل های دوره کلیک کنید.

نوشتهٔ قبلی
رفع مشکل روشن نشدن apache در xampp و غیر فعال سازی iis
نوشتهٔ بعدی
تگ br و تگ های قالب بندی متن در html

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

این فیلد را پر کنید
این فیلد را پر کنید
لطفاً یک نشانی ایمیل معتبر بنویسید.

فهرست