i
در حال برنامه نویسی و آماده سازی نسخه جدید «وبگو» هستیم، در این نسخه قابلیت ها و ظاهر سایت به کلی متفاوت و کاملتر خواهد بود، این فرآیند زمانبر و از مدتی پیش شروع شده و همچنان ادامه دارد، روند پیشرفت پروژه در این قسمت به صورت درصدی مشخص است و به تناوب به روزرسانی می شود.
parsgreen.com
نکته:
با توجه به تاریخ نگارش آموزش های سایت و پیشرفت تکنولوژی های مرتبط با وب در سالیان اخیر، محتوای برخی از مطالب قدیمی ممکن است نیاز به ویرایش و به روزرسانی داشته باشند که این کار هم زمان با تهیه نسخه جدید «وبگو» به مرور در حال انجام است، لطفا در استفاده از مطالب سایت به این نکته دقت داشته و حتی المقدور از چند منبع مختلف استفاده نمائید.
article

آشنایی با HTML، زبان پایه کدنویسی وب

html

هنگامی که با مرورگر خود (به طور مثال برنامه فایرفاکس) صفحه وب (سایت، وبلاگ و...) را فراخوانی می کنید، نتیجه معمولا به شکل کدهایی از سرور به مرورگر شما ارسال می شود، سپس این کدها توسط مرورگر پردازش شده و در نهایت برای شما معمولا به شکل یک صفحه جذاب و کاربردی نمایش داده می شود بدون اینکه متوجه شوید در پس این صفحه، کدنویسی منظم و استانداردی نهفته است، این کدها در واقع همان دستورات HTML (مخفف Hypertext Markup Language) هستند، زبانی که تقریبا تمام کسانی که دستی در دنیای وب دارند با آن سر و کار داشته یا لااقل اسم آن را بارها شنیده اند، HTML از زمان پیدایش (توسط Tim Berners-Lee) یعنی از سال 1980 میلادی تا امروز همواره روندی رو به رشد داشته، در اهمیت آن همین بس که حاصل کدنویسی برنامه نویسان وب (با هر زبان برنامه نویسی از جمله PHP، ASP.NET، Payton و...)،  نهایتا به صورت خروجی HTML و در مرورگر کاربران نشان داده خواهد شد، لذا نقطه آغاز یادگیری برنامه نویسی وب، آموزش و فراگیری این زبان است.

HTML زبان نشانه گذاری یا Markup


قبل از اینکه وارد دنیای کدنویسی وب شویم باید بدانیم که HTML زبانی قراردادی است، هدف از ایجاد این زبان در واقع نیاز به تعریف استانداردی فراگیر جهت استفاده در شبکه وب بود که بتوان با آن صفحات اینترنتی را ساخته و در برنامه هایی تحت عنوان مرورگر، نتیجه کار را مشاهده کرد، بدین منظور HTML از علائم نشانه گذاری تحت عنوان Tag استفاده می کند (و به همین دلیل آن را Markup می گویند)، تگ در واقع نشانه ای برای یک منظور در سند HTML است، عنوان مربوط به هر تگ نیز بین علامت های <> درج می شود، به طور مثال اگر بخواهیم متنی به صورت برجسته تر از سایر متن ها نمایش داده شود، آن را درون تگ strong یا b قرار می دهیم، به فرض:
<strong>متن برجسته</strong>
به این صورت هر تگ برای منظور خاصی استفاده می شود که با درک آنها می توان یک صفحه وب کاربردی ایجاد کرد، هرچند مرورگرها به کوچک یا بزرگ بودن تگ ها اهمیتی نمی دهند اما بهتر است به جز در موارد خاص، تگ ها را به صورت حروف کوچک استفاده کنیم تا سورس کدهای تمیزتر و خواناتری داشته باشیم.

اولین صفحه وب با کدهای HTML


برنامه Notepad را باز کنید و کد زیر را در آن کپی نمائید:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | اولین صفحه HTML من</title>
<!-- Webgoo.ir -->
</head>
<body>
<h1>اولین صفحه من</h1>
<p>اولین پاراگراف من</p>
</body>
</html>
پیش نمایش
اکنون فایلتان را با پسوند html و با یونیکد UTF-8 ذخیره کنید (برای این کار از منوی File گزینه Save As را انتخاب کرده و در قسمت تعیین نام فایل، به جای پسوند txt، پسوند html را جایگزین کنید، در قسمت Encoding نیز عبارت UTF-8 را انتخاب نمائید، به طور مثال نام فایل در هنگام ذخیره سازی باید به صورت first-html-code.html باشد)، فایل را با یک مرورگر وب (مانند اینترنت اکسپلورر یا فایرفاکس) اجرا (Open) کرده و حاصل اولین کدنویسی وب خود را ببینید!
توضیح:
- عبارت DOCTYPE html جهت تعریف نوع سند و راهنمای مرورگرهای وب در پردازش صحیح صفحه و تعیین نسخه HTML است، در نسخه های قدیمی تر HTML ممکن است این قسمت به صورت های دیگری باشد که این موضوع با توجه به هر نسخه مشخص می شود، در حال حاضر این قسمت را به همین صورت درج کنید.
- تگ head و body جز اصلی ترین تگ های HTML هستند که دربرگیرنده تگ ها و عناصر مورد نیاز و محتوای درونی یک صفحه وب به شمار می روند، درون تگ head می توان از meta تگ ها استفاده کرد (در مورد متاتگ ها در آموزش های بعدی بیشتر خواهیم گفت)، همچنین خواهیم دید که در این قسمت می توان فایل های مربوط به استایل دهی CSS و کدنویسی JavaScript را وارد کرد (برای این مرحله از آموزش، صرف آشنایی شما با این اصطلاحات کفایت خواهد کرد!).
- تگ title برای نمایش عنوان صفحه در مرورگر لازم است، این عنوان همان متنی است که در سربرگ مرورگر شما، برای هر صفحه نمایش داده می شود.
- تگ h1 نشانگر سرتیتر ها است که می تواند مقادیری تا h6 داشته باشد، هرچه مقادیر عددی مقابل h بزرگتر باشد، اهمیت متن درون تگ کمتر است، به طور مثال تگ h1 مهمتر از تگ h3 است!
- تگ p در کدهای HTML نشانگر پاراگراف است، گفتیم که HTML زبان نشانه گذاری است و p در این نشانه گذاری نماینده پاراگراف است.
- اکثر تگ های HTML  به صورت جفتی بوده و با افزودن یک اسلش (/) به ابتدای تگ آغازین بسته می شوند، این تگ ها اصولا شامل محتوایی درون خود هستند، به طور مثال:
<div>آموزش مقدماتی وب</div>
البته برخی تگ های HTML نیز تکی هستند و به خودی خود بسته می شوند، به طور مثال:
<br>
<hr>
یا:
<br />
<hr />
در نسخه های پیشین HTML برای تگ های تکی مانند br، hr و... درج اسلش پایانی ضرورت داشت اما در نسخه جدید HTML (در حال حاضر نسخه 5) این محدودیت رفع شده و می توان این نوع تگ ها را بدون اسلش پایانی به کار برد.
نکته 1: همان طور که گفتیم هدف از ایجاد زبانی به نام HTML  (مخفف Hypertext Markup Language) در وب، در واقع به ضرورت ایجاد استانداردی تعریف شده برای یکسان سازی و سهولت کار برمی گردد، این زبان توسط کنسرسیوم جهانی وب یا W3C توسعه یافته و امروزه تبدیل به استانداردی فراگیر گشته است که توسط انواع مختلف مرورگرها و واسطه های کاربری در دستگاه های کاربردی (کامپیوتر، تلفن همراه و...)، قابل پردازش است.
نکته 2: HTML در حقیقت یک زبان برنامه نویسی نیست، بلکه بیشتر شبیه یک قرار داد با پیروی از اصولی منظم است (HTML زبان نشانه گذاری یا Markup است)، چرا که محدود به تگ ها و دستور عمل های خاصی است و خارج از چارچوب تعریف شده خود، قدرت مانور ندارد (HTML قادر به تصمیم گیری و شرط گذاری به آن صورت که در زبان های برنامه نویسی دیده می شود، نیست)، اما از این جهت که زبان تفهیم خواسته های برنامه نویس از مرورگر تلقی می شود، اهمیت زیادی دارد، یعنی وقتی در وب برنامه ای به یک زبان که در سرور اجرا می شود (مانند PHP) می نویسیم، هدف، هر چه که باشد، نهایتا معمولا باید خروجی خود را در بستر HTML به مرورگر انتقال دهیم، در واقع مرورگرها فقط زبان HTML را درک می کنند و با پردازش کدهای آن، نتیجه دلخواه را نمایش می دهند.
sectionدسته بندی: آموزش مقدماتی » HTML
related مطالب بیشتر:
» کار با تگ فرم (form) در HTML
» لایه بندی در html با تگ div و span
» آشنایی با مفهوم Semantic در HTML
» ایجاد جدول با تگ table در html
» فرمت بندی و کار با پاراگراف و متن در HTML
commentنظرات (۵۵ یادداشت برای این مطلب ارسال شده است)
نویسنده: آشوری
زمان: ۲۳:۴۱:۳۲ - تاریخ: ۱۳۹۱/۰۵/۱۵
من تازه وبلاگ نویسی رو شروع کردم و صرفا هدفم یادگیری اصول آن است. خیلی روان و خوب توضیح دادید. برای من که برنامه نویسی بلد نیستم خیلی خوب بود. ممنون
نویسنده: es
زمان: ۱۳:۳۷:۰۵ - تاریخ: ۱۳۹۱/۰۹/۲۰
سلام
من از dreamweaver استفاده می کنم، اما در هنگام نوشتن کدها ، نرم افزار فاصله ها یا در واقع تو رفتگی ها رو رعایت نمی کنه . تمام منو ها رو هم گشتم چیزی پیدا نکردم . خواهشا یه راهنمایی کنید
thanks
پاسخ: 
این برنامه به طور پیش فرض برای زبان های برنامه نویسی (مانند PHP) یا اسکریپت نویسی (مانند JavaScript) کدها را به صورت درختی نشان می دهد، اما برای تنظیمات بیشتر از آیکن های کوچک سمت چپ، آخرین آیکن (Format Source Code) را انتخاب و تنظیمات مورد نظر را می توانید در این قسمت انجام دهید (تغییرات این قسمت باید با دقت انجام شود تا دچار مشکلات دیگر نشوید، در مورد زبان هایی مانند HTML ممکن است چنین قابلیتی وجود نداشته باشد).
نکته: می توانید برنامه هایی مانند PhpStorm را نیز امتحان کنید.
نویسنده: roya
زمان: ۱۶:۵۴:۱۶ - تاریخ: ۱۳۹۱/۱۰/۱۰
ممنونم خوب بود.
نویسنده: ali
زمان: ۲۳:۴۸:۵۲ - تاریخ: ۱۳۹۱/۱۱/۲۱
سلام چرا برای من وقتی میخوای سیو کنی، پسوند html نداره؟
پاسخ: 
پسوند html جزء پیش فرض های Notepad نیست، هنگام ذخیره کردن (به صورت دستی) به جای file.txt به صورت file.html نام فایل را وارد کنید!
نویسنده: rastin
زمان: ۰۱:۳۳:۴۶ - تاریخ: ۱۳۹۱/۱۱/۲۸
سلام توضیحتون عالی بود یعنی به زبان ساده بود... من مدت زیادی هست که بلاگ دارم و الان مدتی هم میشه تصمیم دارم خودم طراحی و کد نویسی کنم.. اخه ایده های زیادی دارم که متاسفانه به دلیل اینکه برنامه نویسی یا اصول کار رو بلد نیستم نتونستم. میخواستم ازتون خواهش کنم یه مسیر رو پیش پام بزارید تا از بلاتکلیفی دربیام. میدونم که استعدادش رو دارم و میخوام به صورت حرفه ای ادامه بدم.
پاسخ: 
اینکه مشتاق فراگیری هستید جای خوشحالی دارد، مسلما با تلاش و پیگیری به هدفتان خواهید رسید.
در آموزش های بخش طراحی وب مطالبی در این خصوص منتشر کرده ایم، اما به طور خلاصه ابتدا به یک برنامه قوی برای کدنویسی وب احتیاج دارید، مانند Adobe Dreamweaver، PhpStorm یا نرم افزارهای متن باز مانند Aptana Studio، سپس سعی کنید مباحث HTML، CSS و جاوا اسکریپت را از پایه و کم کم یاد بگیرید و با کدهای کوچکتر تمرین کنید، بهترین راه برای فراگیری دانش وب، آزمایش و خطا است، پس تا می توانید تمرین کنید.
بعد از آشنایی با زبان های پایه می توانید به سمت برنامه نویسی پیشرفته تر مانند PHP یا ASP بروید و مهارتهای وب خودتان را تکمیل کنید.
در کنار این موارد دانستنی های عمومی وب و تکنیک های طراحی و استفاده از نرم افزارهایی مانند فتوشاپ را هم در نظر داشته باشید.
نویسنده: مهدی
زمان: ۱۷:۲۳:۰۵ - تاریخ: ۱۳۹۲/۰۱/۳۱
سلام..
توی قسمت آموزش مقدماتی HTML تمام مطالب و مباحث این زبان رو پوشش دادید؟ یعنی منظورم اینه هر آنچه که برای یادگیری HTML نیازه رو گفتید یا نه قسمتهای دیگه ای هم مونده و فقط اینها نیست؟
راجع به بقیه چطور؟ CSS، جاوا اسکریپت، پی اچ پی و .. ؟
البته خب میدونم پی اچ پی مباحثش بیشتر از ایناست
با تشکر از زحمتی که می کشید..
پاسخ: 
خیر، در حال حاضر آموزش های مقدماتی در هیچ قسمتی کامل نیستند، مباحث به تدریج در حال تکمیل شدن هستند.
نویسنده: aaatish
زمان: ۰۰:۰۵:۴۹ - تاریخ: ۱۳۹۲/۰۳/۰۹
سلام خسته نباشید
من مطالبتون رو خوندم خیلی خوب بودن ولی مشکل منو حل نکرد متاسفانه
می خوام مثلا از یه اهنگی که خوشم میاد بذارم تو یکی از پستام وقتی روش کلیک میکنیم اون آهنگ بازشه و بخونه هر کاری کردم نمیشه
اهنگم رو کم حجم کردم و اپلودشم کردم و ادرسش رو گذاشتم تو قسمت درج لینکم وقتی روش کلیک می کنم به صورت دانلود باز می کنه
اگه میشه راهنماییم کنید که چی کار کنم وقتی روی اهنگ کلیک کنم شروع کنه به خوندن
ممنون
پاسخ: 
پخش آهنگ در وب روش های خاصی دارد که آموزش آن به طور کامل در سایت گفته شده، از قسمت جستجو عبارت "آهنگ" را وارد کنید.
نویسنده: حسین
زمان: ۰۱:۳۱:۵۸ - تاریخ: ۱۳۹۲/۰۵/۰۱
سلام
با هزار بدبختی این سایت رو پیدا کردم مطالبش واضح و شیوا است خیلی راحت میشه یاد گرفت حالا این مطالب کامل هستن اگه کامل نیستن کدوماش کاملن بعد کی کامل میشن
قربونت
پاسخ: 
سعی شده تا هر مطلب در جای خود کامل باشد، منتها مباحث (به طور مثال مبحث HTML) هنوز کامل نیستند، به عبارتی بخشی از آموزش های مقدماتی تر منتشر شده و هنوز مباحث پیشرفته تری باقی مانده، انتشار مطالب در سایت آهسته و پیوسته است!
نویسنده: ف.خ
زمان: ۱۹:۳۹:۲۷ - تاریخ: ۱۳۹۲/۰۵/۲۰
سلام
من خیلی دوست دارم برنامه نویسی یاد بگیرم
ولی هیچ آشنایی در این زمینه ندارم
میشه لطف کنید راهنماییم کنید از کدام قسمت از سایت تان شروع به مطالعه کنم ؟!
با تشکر
پاسخ: 
برای شروع به یادگیری برنامه نویسی وب، از HTML و سپس CSS شروع کنید.
نویسنده: م
زمان: ۰۳:۴۰:۱۳ - تاریخ: ۱۳۹۲/۰۵/۲۹
سلام و خسته نباشید
ضمن تشکر فروان از این سایت مفید شما و حمایت ما به طرق مختلف برای برپا نگه داشتن این سایت کارآمد زمانی که تمامی مراحل رو به دستور شما انجام دادیم برای دیدن نتیجه کار در یک مرورگر همین کدها رو دوباره بهمون نشون میده . یک توضیحی بدهید . با سپاس
پاسخ: 
مرورگرها تگ ها را نمایش نمی دهند! لذا مشکلی در مراحل انجام شده وجود دارد، به طور مثال ممکن است فرمت فایل html یا htm نباشد، یا اینکه تگی به درستی بسته نشده، باید فایل خود را ارسال کنید تا بررسی شود.
نویسنده: hosein
زمان: ۲۰:۵۱:۲۱ - تاریخ: ۱۳۹۲/۰۶/۰۵
ببخشید زبانهای برنامه نویسی وب زبانهای سطح بالا هستند و اینکه درسطح بندی زبانهای برنامه نویسی اسمی از این زبانها نیست.
پاسخ: 
در مورد زبان بودن یا نبودن HTML، به هر صورت حرف L در این عبارت به معنی Language است (HyperText Markup Language) و لذا در اصطلاح می توان به آن عنوان زبان اطلاق کرد (Markup نیز در اینجا یعنی روش نشانه گذاری برای جداسازی تگ ها از متن ساده)، هرچند نباید با زبان های برنامه نویسی مانند PHP، Java و... مقایسه شود.
نویسنده: غزل
زمان: ۱۳:۴۰:۱۸ - تاریخ: ۱۳۹۲/۰۷/۱۷
سلام امیدوارم به سوالم زود جواب بدین من با استفاده از روش هایی که گفتین که البته خیلیم عالی و کامل بودن برنامه رو نوشتم اما رو صفحه ی وب خوب از آب در نیومد و یه سوال دیگه اینکه چطوری میشه تو برنامه نویسی شکلی مثل دلتا گذاشت بازم از راهنماییتون ممنونم
پاسخ: 
منظورتان از "خوب از آب در نیومد" مشخص نیست، لطفا مشکل را با جزئیات بیشتری توضیح دهید.
در مورد علامت های خاص، آموزشی جداگانه در سایت وجود دارد، عبارت "علامت" را در قسمت جستجو وارد کنید.
نویسنده: امید
زمان: ۱۵:۳۲:۴۸ - تاریخ: ۱۳۹۲/۰۸/۰۱
خیلی عالیه ممنون
نویسنده: محمد
زمان: ۱۲:۱۴:۰۲ - تاریخ: ۱۳۹۲/۰۸/۰۸
سلام.
خسته نباشید. سه خط اول چی هستند ؟ اینایی که قبل از head نوشته شدن. کار خاصی توی پیج انجام میدن؟ آدرس سایته مهمه که همین باشه؟
و اینکه حروف بزرگ و کوچک فرق می کنند توی کد نویسی ؟
پاسخ: 
DOCTYPE و مقادیر بعد از آن برای راهنمایی مرورگر جهت پیروی از استاندارد و نسخه مشخصی از HTML است، تگ html و مقادیر آن نیز برای تعیین شروع سند و در برخی نسخه ها مرجع XML صفحه است، در برخی نسخه های قدیمی تر HTML باید به سایت w3.org که مربوط به کنسرسیوم جهانی وب است و استانداردهای HTML را تعریف می کند ارجاع داده شود، بزرگ یا کوچک بودن حروف اهمیتی ندارد (استفاده از حروف کوچک توصیه می شود).
نویسنده: black.s
زمان: ۱۰:۲۱:۳۳ - تاریخ: ۱۳۹۲/۰۸/۲۸
سلام خسته نباشین
مرسی از اموزش زیباتون . خیلی عالی بود
من تازه کارم و از امروز شروع کردم .
می شه راهنماییم کنید که از کجا شروع کنم.
پاسخ: 
برای طراح یا برنامه نویس وب شدن باید از مقدمات شروع کنید، یعنی آشنایی با مبانی وب و در گام بعدی زبان های HTML، CSS و سپس JavaScript، در نهایت به سمت زبان های سمت سرور مانند PHP یا ASP بروید.
paged صفحه 1 از 4




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

3 × 4
 refresh
آگهی
رنگین کمان عکس
Ranginkamaan.com

آرشیو عکس های باکیفیت با موضوعات متنوع...
پرشین آی تی
Persianit.net

آموزش و دانلود پروژه های برنامه نویسی سی شارپ (#C)