اموزش html جلسه اول

اموزش html جلسه اول

می پسندم
1 ستاره2 ستاره3 ستاره4 ستاره5 ستاره
2,934 بار
1 نظر
محمد رحمتی
۸ دی ۱۳۹۴

html - اموزش html جلسه اول

اموزش html جلسه اول

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

مقدمه:

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

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

کد نویسی تحت وب بسیار ساده تر است و حتی با یک نوت پد میتوان کد نویسی کرد.

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

 

نصب نرم افزار های مورد نیاز:

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

نرم افزار Adobe Dreamweaver یکی از محصولات شرکت ادوبی است که محیط بسیار حرفه ای دارد و برای کد نویسی های سنگین و بزرگ مورد استفاده قرار میگیرد.

یکی از قابلیت های بسیار عالی Adobe Dreamweaver  این است که شما وقتی تگی را باز میکنید به صورت خودکار و هوشمند ان را میبندد یا میتوان ان را به سرور وصل کرده و به ویرایش انلاین فایل ها پرداخت.

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

نرم افزار بعدی که پیشنهادی بنده است Notepad++ است که نسخه بسیار عالی تر نوت پد ویندوز هست و برای کد نویسی تحت وب تکامل یافته.این نرم افزار نرم افزاری کاملا رایگان سبک و بسیار راحت تر نصبت بهDreamweaver است.

میتونید این نرم افزار رو در اخر پست دانلود کنید.

نصب نرم افزار هم مثل تمام نرم افزار های دیگر است و حتی ساده تر با چند next زدن نصب میشود.

ساخت اولین صفحه html

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

پس همین الان یه فایل درست کرده و پسوند اون رو به html تقیر بدین.

خب حالا روی اون فایل کلیک راست کرده و بر روی  Edit by notpadکلیک کنید.

حال وارد صفحه نوت پد پلاس پلاس میشوید.

 

استخوان بندی html

در  زبان تگ گذاری html هر تگ که باز میشود باید بسته شود.به تگ شروع و پایان html دقت کنید.

<html>



در اینجا کد ها و تگ ها قرار میگیرد و پس از پایان باید با علامت / بسته شود



</html>

هر صفحه html باید در شروع تگ باز( منظور از تگ باز همان <html> هست )شروع شده و ان تگ با علامت / بسته شود.

 

خب  تا اینجا فهمیدیم که در html ما باید هر تگی رو که باز میکنیم  ببندیم و هر صفحه html باید باید تگ <html>شروع شده و با تگ </html>بسته شود.

مفهوم تگ های html

در html هر تگ باید بین دو علامت <>قرار بگیره و با علامت </>بسته بشه.

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

<html>

<تگ مورد نظر>





</تگ مورد نظر>

</html>

 

حالا که با ماهیت تگ ها در html اشنا شدیم باید به سراغ تگ های اصلی و بدنه برویم.

تگ head

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

تمام این ها در تگی به نام headقرار میگیرند.

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

<html>


<head>
کد هایی که در قالب قرار نمیگیرند و دیده نمیشوند.

</head>


</html>

تگ body

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

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

<html>

<body>


هر انچه که قابل نمایش است

</body>

</html>

 

 

نتیجه گیری

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

نتیجه نهایی این است

<html>

<head>

کد های پنهان

</head>

<body>
 
کد های قابل نمایش

</body>


</html>

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

اموزش html

هر نوع سوال و یا نظری داشتین با ما در میون بزارین.

دیدگاه کاربران

یک دیدگاه

مقالات مرتبط

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