جدیدترین مطالب

واگرا سیستم تبلیغ در تلگرام و مدیریت کانال تلگرام

واگرا سیستم تبلیغ در تلگرام و مدیریت کانال تلگرام

امروزه کانال های تلگرام محبوبیت زیادی بین کاربران اینترنت پیدا کرده اند. اما اگر از…

ادامه مطلب

دانلود جدیدترین نسخه تلگرام و تلگرام فارسی

دانلود جدیدترین نسخه تلگرام و تلگرام فارسی

تلگرام یک ابزار پیام رسانی سریع و ایمن بوده که در بین کاربران فارسی زبان…

ادامه مطلب

معرفی کانال های برتر تلگرام در ایران

معرفی کانال های برتر تلگرام در ایران

با فعالیت روز افزون تلگرام در ایران و گسترش آن کانال های تلگرامی روز به…

ادامه مطلب

آموزش بورس در 20 دقیقه

آموزش بورس در 20 دقیقه

در این مطلب آموزش بورس در 20 دقیقه را به صورت پاورپوینت نمایشی برایتان آماده…

ادامه مطلب

آینده وب در دستان پیام رسان هایی مثل تلگرام!

آینده وب در دستان پیام رسان هایی مثل تلگرام!

در ادامه این مطلب سعی خواهیم کرد به پیش بینی آینده وب بپردازیم. اینکه وب…

ادامه مطلب

اعتراض یک طراح وب برای اتمام جنگ (معرفی سایت)

اعتراض یک طراح وب برای اتمام جنگ (معرفی سایت)

چند روزی هست که توی تمامی رسانه ها شاهد این هستیم که بازهم جنگ توی…

ادامه مطلب

15 طرح اولیه (sketch) در طراحی لوگو

15 طرح اولیه (sketch) در طراحی لوگو

طراحی لوگو ممکن است به سادگی چیزی که ما در نگاه اول به آن پی…

ادامه مطلب

7 افزونه جی کوئری برای بهبود فرم های html

7 افزونه جی کوئری برای بهبود فرم های html

فرم ها جزء مهم ترین بخش های یک وب سایت می باشد. زیبایی فرم ها،…

ادامه مطلب

5 وب سایت که با اسکرول شان داستان تعریف می کنند!

5 وب سایت که با اسکرول شان داستان تعریف می کنند!

در این مطلب به معرفی چند وب سایت جذاب می پردازیم که با اسکرول ویژه…

ادامه مطلب

دانلود آیکون های تخت - سری سوم

دانلود آیکون های تخت - سری سوم

همانطور که قبلا درباره ی آیکــون ها بحث کرده ایم، این بار سری جدیدی از آیکون…

ادامه مطلب

10 صفحه 404 جذاب و خلاقانه

10 صفحه 404 جذاب و خلاقانه

همانطور که در مطالب قبل در رابطه با صفحات 404 گفتیم، اینگونه صفحات که از…

ادامه مطلب

خداحافظ SEO , سلام بر SMO

خداحافظ SEO , سلام بر SMO

مدت زمان زیادی است که مفهوم بهینه سازی وب سایت ها برای موتورهای جستجو (SEO)…

ادامه مطلب

محبوب های ماه



 

مفتخریم به اطلاع برسانیم سایت استــــوا با شعار دور دنیای وب در یک سایت شروع به کار کرده است. این سایت با...


دوشنبه, 06 آبان 1392 ساعت 06:02

جلسه اول HTML مبتدی : تگ ها، خواص و عناصر

نوشته شده توسط 
امتیاز دهید
(2 امتیاز)

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

تگ ها

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

ساده ترین شکل html :

<!DOCTYPE html>
<html>
<body>
    This is my first web page
</body>
</html>

بعد از نوشتن کدهای بالا، فایل را با فرمت html ذخیره کرده  و با مرورگرتان باز کنید. این مثال دربردارنده ی عناصر اصلی و بنیادی صفحه ی وب سایت می باشد. کد سطر اول از نوع document می باشد و به نوعی نشان دهنده ی این است که از کدام ورژن html استفاده می کنید. (در این مورد html5 ). در صورتیکه این کد را ننویسید، مرورگر شما این طور فرض می کتد که شما دقیقا نمی دانید که چه کاری انجام می دهید.

تگ html نشان می دهد که کدنویسی تان شروع شده و همه چیز قبل از تگ بسته ی <html/> پایان می یابد. در مورد body هم که دربرگیرنده ی محتوای اصلی می باشد و چیزی که مرورگر نمایش می دهد در این قسمت نوشته می شود.

پس تگ هایمان به دو صورت شروع <> و پایان </> نوشته می شود. البته باید به یاد داشته باشید که تمامی تگ ها به این شکل نمی باشد. برای مثال تگ break line تنها به صورت <br> و یا </ br> می باشد، که در این موارد بیشتر بحث خواهیم کرد. فعلا این چارچوب کلی را به یاد داشته باشید: تگ باز -> محتوا -> تگ بسته.

خواص:

تگ ها می توانند خواص هایی نیز داشته باشند و اطلاعات بیشتری را شامل می شوند. این خواص در تگ شروع ظاهر می شوند و ارزش آن ها بین دو کوتیشن (") مشخص می گردد. حالت کلی این نوع تگ ها بدین صورت می باشد:

<tag attribute="value"> My html </tag>

در این مورد بیشتر صحبت خواهیم کرد.

عناصر:

عنصرها بیت هایی برای ساختار دادن به صفحات وب می باشند. برای مثال شما می توانید بگویید که هرچیزی بین تگ شروع <body> و پایان <body/> باشد، عنصر body محسوب می شود. و یا مثلا <title> و <title/> تگ ها نامیده می شوند و <title> MyTitle </title> عنصر title محسوب می شود.

برای مطلع شدن از مطالب جدید استــــوا می توانید در خبرنامه ی پیامکی و ایمیلی سایت عضو شوید.

بازدید 3712 بار
سعید نجفی

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

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

وب سایت: www.saeednajafi.ir
مطالب دیگر این مجموعه: « شروع آموزش HTML مبتدی

نظر خود را اضافه کنید

0

نظرات (6)

بارگذاری نظرات قدیمی تر
  • در صورتی که می خواین به سریع ترین شکل ممکن برنامه نویسی یاد بگیرید می تونید توی کلاس های حضوری شرکت کنین یا اینکه فیلم های آموزشی معتبری مثل فیلم های lynda رو مشاهده کنید.
    در آخر همه چیز بستگی به تمرین شما داره و وقتی که می ذارید.

  • sinister

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

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

  • با سلام ما شرکت همراه رایانه هستیم از وب سایت شما بازدید کردیم از منو قسمت نرم افزاری تون خالی بود کاش راجع به اشکالات رایانه ای و نرم افزاری هم مطلب قرار بدید راستی لینک تجارت الکترونیک هم بدین منوال بود و خالی بود
    سایت رایانه ای استوا : جسارت ما را ببخشید ... پیروز باشید ;););)

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

عضویت در خبرنامه ایمیلی و پیامکی

خبرنامه ایمیلی و پیامکی
نام (*)
ورودی نامعتبر
ایمیل (*)
ورودی نامعتبر
دریافت موارد (*)
لطفا موارد دلخواه خودت را انتخاب کن.
نام خانوادگی (*)
ورودی نامعتبر
شماره موبایل
شماره موبایل خود را بدون صفر وارد کنید.