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 مطالب بیشتر:
» کار با تگ فونت (font) و استایل در html
» کار با تگ های ایجاد کننده لیست در HTML
» آشنایی با متاتگ ها (Meta tags) و کاربرد آنها در صفحات وب (HTML)
» ایجاد جدول با تگ table در html
» نحوه ایجاد لینک در HTML
commentنظرات (۵۵ یادداشت برای این مطلب ارسال شده است)
نویسنده: علی اکبر فضلی
زمان: ۲۲:۲۶:۵۹ - تاریخ: ۱۳۹۳/۰۶/۳۰
سلام ضمن تشکر از سایت بسیار کاربردیتان ، من طراحی سایت رو تازه شروع کردم سئوالی دارم :
میشه سایتی درست کرد که از قسمتهای متنوع فیلم و بنر و کاتالوگ و متن و ... تشکیل شده باشه هم درش ایمیل کاربران رو داشته باشی هم ایمیلشون و تائید کنی و تا عضو نشن نتونن از مطالبش استفاده کنن یا از مشخصات کاربران اطلاعات جمع آوری کنی و ... درگاه پرداخت داشته باشه خبر های استخدامی رو داخلش بذاری ؟ یعنی یه سایت اجتماعی اقتصادی خبری و علمی و... طراحی کرد ؟
پاسخ: 
چنین مواردی جزء قابلیت های عادی در وب محسوب می شوند و شدنی است، اما قاعدتا نباید انتظار داشته باشید که بدون داشتن دانش فنی و تجربه به راحتی بتوانید همه موارد را طراحی کنید، بخشی از امکانات در CMS های آماده و رایگان وجود دارد، اما اگر بخواهید امکاناتی در سطح حرفه ای داشته باشید، باید برنامه نویسی وب کار کنید و خودتان موارد را طراحی و برنامه نویسی نمائید.
نویسنده: عرفان
زمان: ۲۲:۰۵:۳۶ - تاریخ: ۱۳۹۳/۰۷/۱۸
عالی یود
نویسنده: وحید
زمان: ۱۹:۵۷:۵۷ - تاریخ: ۱۳۹۳/۰۷/۲۷
سلام خسته نباشید سایتتون خیلی خوبه واقعا مرسی
...ببخشید من تازه شروع کردم به برنامه نویسی و یه ویرایشگر متن htmlpad هم دانلود و نصب کردم به نظرتون خوبه یا از نرم افزار دیگه ای استفاده کنم ؟؟
پاسخ: 
هرچند کدهای HTML را با اغلب نرم افزارها و حتی Notepad می توان نوشت، توصیه ما استفاده از نرم افزار Adobe Dreamweaver یا PhpStorm است.
نویسنده: وحید
زمان: ۱۸:۳۲:۵۳ - تاریخ: ۱۳۹۳/۰۷/۲۸
سلام ممنون که به نظرم جواب دادید... نرم افزار adobe dreamweaver رو دانلود و نصب کردم آیا کتاب یا سایتی رو سراغ دارید که نحوه کار باهاش رو یاد بده؟؟
پاسخ: 
کار با این برنامه خیلی سخت نیست و در فرصت کوتاهی می توان با امکانات آن آشنا شد (مگر برخی امکانات که شاید برای شروع کار چندان مورد نیاز هم نباشند)، به هر صورت برای آشنایی بیشتر آموزش های زیادی در وب وجود دارد، کافی است جستجو کنید.
نویسنده: نوروز
زمان: ۱۸:۱۴:۱۵ - تاریخ: ۱۳۹۳/۰۸/۱۶
سلام یه پروژه دارم در مورد ویژگی های زبان اچ تی ام ال اگه مقاله یا چیز دیگه ای در موردش دارید که ویژگی های اون رو بهم داشته باشه ممنون میشم
پاسخ: 
آموزش های HTML در وب وجود دارد، برای ایجاد پروژه در این رابطه باید این آموزش ها را مطالعه و با منابع مختلف آشنا باشید.
نویسنده: faryasad
زمان: ۲۱:۳۶:۱۵ - تاریخ: ۱۳۹۳/۰۸/۱۹
سلام من در یک سایتی عضو هستم که لینک زیر مجموعه گیری داره حالا هر کاری میکنم این لینک رو تو وبلاگم بذارم بلاگفا قبول نمیکنه چکار باید بکنم ؟ :(
پاسخ: 
متاسفانه چاره ای برای اینگونه مشکلات وجود ندارد، تمام محتوا و کدهای شما به صورت سیستماتیک توسط بلاگفا بررسی می شود و لذا راه حلی برای درج لینک های غیر مجاز (از دید بلاگفا) نیست!
نویسنده: maryam
زمان: ۱۳:۰۲:۰۶ - تاریخ: ۱۳۹۳/۰۹/۰۶
سلام من دانشجو نرم افزار هستم و این ترم برنامه نویسی وب دارم از کجا شروع کنم برای یادگیری بهتر ؟
پاسخ: 
بستگی به میزان آشنایی قبلی شما دارد، در هر صورت برای کار حرفه ای همیشه توصیه می شود از مقدماتی ترین مباحث (HTML، CSS) و آهسته و پیوسته کار کنید، اما اگر با اینها آشنا باشید می توانید به اسکریپت نویسی سمت کاربر (JavaScript) و برنامه نویسی سرور (PHP, ASP.NET و...) بپردازید.
نویسنده: hasan
زمان: ۲۳:۵۷:۳۱ - تاریخ: ۱۳۹۳/۰۹/۰۶
سلام
با اینکه مطالبتون آموزنده بود ولی باز هم کمه اگه میتونید بیشتر بذارید ممنونم
نویسنده: milad
زمان: ۱۲:۵۹:۴۴ - تاریخ: ۱۳۹۴/۰۱/۲۸
سلام دوست خوبم
از زحماتتون بسیار سپاسگذارم
من کلا برنامه نویسی رو بلد نیستم
اما خیلی بهش علاقه دارم
خودمم یه سایت دارم
خواستم بدونم با آموزش هایی که شما دادین من بخوام شروع کنم و وقتمو بزارم میتونم کامل یاد بگیرم کلا برنامه نویسی رو؟
پاسخ: 
برای شروع یادگیری برنامه نویسی وب می توانید از مطالب سایت استفاده کنید، منتها هیچ گاه نباید به یک منبع قناعت نمائید، ترکیب چند منبع حالت ایده آل است + علاقه + تمرین و تکرار.
نویسنده: m.f
زمان: ۱۹:۴۲:۲۶ - تاریخ: ۱۳۹۴/۰۲/۲۲
سلام و خسته نباشین
ممنون از اموزش زیباتون عالی بود .
من تازه شروع کردم به سایت درست کردن یه سوال داشتم
برای اینکه متن روی تصویر بیاد چه کدی را باید وارد کنیم هر کاری میکنم نمیشه ممنون میشم راهنماییم کنید
پاسخ: 
چنین امکانی در وب تنها با استفاده از CSS قابل ایجاد است، به طور مثال می توانید متن را داخل یک بلاک div بنویسید و به آن بلاک یک پس زمینه اختصاص دهید، یا اینکه چند بلاک داشته باشید، بلاک اصلی با خاصیت position و مقدار relative و برای تصویر و متن با خاصیت position و مقدار absolute، مثال:
http://jsfiddle.net/EgLKV/3
نویسنده: پارسا
زمان: ۱۱:۴۷:۱۶ - تاریخ: ۱۳۹۴/۰۴/۲۴
ممنون خيلى روان و خوب بود ميشه لطفاً انواع ديگه ى دستور ها رو هم بذارين
نویسنده: john lennon
زمان: ۱۵:۰۳:۴۳ - تاریخ: ۱۳۹۴/۰۴/۲۵
سلام
مرسی از آموزش خوبتون
یه خواهش دارم اگه میشه این آموزش ها رو در قالب pdf عرضه کنید
مرسی
نویسنده: معصومه
زمان: ۱۹:۱۲:۳۶ - تاریخ: ۱۳۹۴/۰۵/۲۱
با سلام لطفا کمکم کنید من توی یک مسابقه با عنوان برنامه نویسی وب شرکت کردم اما هیچی در موردش نمی دونم آیا برنامه نویسی وب همون ساختن یه وبلاگه (امیدوارم باشه) یعنی باید یه وبلاگ بسازیم مثلا از طریق بلاگفا یا....
لطفا به وبلاگ من سر بزنین و جواب منو در نظرات بدین خواهش میکنم خیلی حیاتیه
بازم ممنون
پاسخ: 
خیر! وبلاگ یکی از محصولات برنامه نویسی وب است، برنامه نویسی وب یعنی مجموعه دانش برای طراحی و کدنویسی برنامه هایی که تحت وب (در مرورگر) قابل اجرا هستند که خود شامل HTML, CSS, JavaScript, PHP و... می شود.
نویسنده: فرزاد خالقی
زمان: ۲۲:۰۲:۳۲ - تاریخ: ۱۳۹۴/۰۶/۱۸
سلام
آیا با برنامه نویسی ها می توان نت های موسیقی را نوشت
پاسخ: 
اگر منظورتان با صرف HTML است، خیر! برای طراحی این نوع برنامه ها بهتر است در وب از زبان هایی نظیر JavaScript و در دستکتاپ ++C و... استفاده کنید (قاعدتا باید تقریبا حرفه ای باشید!).
نویسنده: raoof
زمان: ۲۱:۴۷:۲۴ - تاریخ: ۱۳۹۴/۰۸/۱۳
سلام
من برای بار اولمه این کار را انجام دادم. من این کارهایی را که نوشتید انجام دادم اما منظور از باز شدن صفحه وب را نمیفهمم.
پاسخ: 
پس از ذخیره فایل، آن را با یک مرورگر اجرا کنید یا فایل را به داخل مرورگر بکشید، با این کار محتوای صفحه در مرورگر نمایش داده خواهد شد.
paged صفحه 3 از 4




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

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

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

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