Salar.Shayegan
جمعه 15 فروردین 1393, 16:47 عصر
باسلام
توی این مقاله که از وبسایت خودم هست، قصد دارم اصول اولیه در html را آموزش دهم...
اول از همه بگویم که html ، در واقع زبان برنامه نویسی نیست و یک زبان علامت گذاری یا به اصطلاح (ابر متن) میباشد که به وسیله ی اون ما میتونیم زبانهای مختلف برنامه نویسی وب رو اعم از جاوا اسکریپت، پی اچ پی و... پیوند بدهیم...
کدنویسی html، همواره با استفاده از تعدادی تگ (tag) صورت میگیره و هر تگ دارای چند المان (خصوصیت) است و این المان ها معمولا" دارای مقدارهایی هستند که با علامت مساوی (=) به آنها نسبت داده میشوند. هر تگ معمولا" دارای یک تگ آغازی و یک تگ پایانی است و محتویات تگ، بین این دو تگ قرار می گیرند...
بگذارید با استفاده از مثالی، شما رو متوجه منظورم بکنم:
تگ p که برای ساختن پاراگراف های متنی استفاده میشود به این صورت استفاده میشود:
<p width="100%" bgcolor="red" id="first_paragraph">به نام خداوند بخـشنده ی مهربان</p>
که در آن تگ آغازی و تگ پایانی نامیده میشود و عبارت "به نام خداوند بخشنده ی مهربان" محتوای تگ است و هرکدام از عبارات width و bgcolor و id المان های این تگ هستند و عبارات 100% و red و id مقادیر نسبت داده شده به این المان ها هستند. همانطور که میبینید این مقادیر با علامت = به المان ها نسبت داده شده اند و در اطراف هر کدام از مقادیر، یک جفت کوتیشین (" ") مشاهده میکنید که به جای آنها از علامت (' ') نیز میتوانید استفاده کنید یا حتی می توانید هیچ کدام را نگذارید ( که البته توصیه ی من این است که برای خوانایی کد، از یکی از این دو علامت استفاده نمایید) اما گذاشتن علامت مساوی اجباری است.
تعداد المان ها میتواند بیشتر شود. برای مثال یک تگ میتواند ده یا بیست تا المان داشته باشد یا میتواند هیچ المانی نداشته باشد. اگر هیچ المانی برای آن ننویسیم، مرورگر با توجه به تنظیمات پیش فرض، هر المان را خودبه خود مقدار دهی میکند... در واقع ما این عمل نوشتن و مقدار دهی کردن المان را از این جهت انجام میدیم که در واقع خصوصیت های اون آبجکت یا شئ رو با توجه به سلیقه ی خودمون تغییر بدیم. این خصوصیت ها میتوانند رنگ زمینه، فونت، طول یا عرض، رنگ قلم، اندازه قلم، کادر و... باشند که اونها رو با ذکر نام المان و مقدار المان (مانند مثال بالا) طبق سلیقمون تغییر میدیم و تنظیم میکنیم.
تگ ها رو میتوان داخل تگ دیگری نوشت و در واقع آنرا زیرمجموعه ی تگ دیگری کرد...
خب برای اینکه یکم از این متن های زیاد و خسته کننده دور شویم، بگذارید برایتان لیستی از تگ های پرکاربرد رو اینجا بنویسم:
---------------------------------------------
لیست تگ های متداول
html
این تگ درواقع اولین تگ موجود در هر صفحه ی وب است که به مرورگر میفهماند که این کدها html هستند. اصولا" این تگ دارای المانی نیست یا اگر هم داشته باشد معمولا" نوشته نمی شود...
head
تگی است که در آن تگ هایی نوشته می شوند که در صفحه قابل دیدن نیستند؛ یا کدهایی که طرف صحبتشان موتورهای جستجو مثل google و... میباشد! (بعدها مفصل تر توضیه می دهم) برای این تگ نیز المانی نمی نویسیم...
title
این تگ داخل تگ قبلی یعنی تگ نوشته میشود و کار آن معین کردن اسم صفحه است که در مرورگر نشان داده می شود. برای این تگ نیز معمولا" المانی نوشته نمیشود. شیوه ی استفاده از این تگ را پایین تر با ذکر مثالی نشان خواهم داد.
body
این تگ که از کلمه ی body به معنای بدن یا بدنه گرفته شده است، بدنه ی سایت را شامل میشود و برعکس تگ head (به معنای سر) کدهایی که در صفه قابل دیدن هستند را در بر میگیرد. المان های زیادی میتوان به آن نسبت داد که بعد ها آنها را ذکر میکنم.
a
این تگ یکی از مهم ترین تگ های هر صفحه ی وب است و کار آن ساختن لینک یا همان پیوند (عبارتی که با کلیک روی آن به صفحه ی دیگری می روید) می باشد و تقریبا" همه ی المان ها را می توان برای آن نوشت. اصلی ترین المان آن المان href است که آدرس صفحه ی مقصد را به این المان نسبت می دهیم:
<a href="http://www.fpsforum.ir">انجمن بازیسازان و برنامه نویسان اف. پی. اس فروم</a>
نتیجه ی کد بالا، به این صورت است:
انجمن بازیسازان و برنامه نویسان اف. پی. اس فروم (http://www.fpsforum.ir)
p
این تگ که چندی قبل درموردش مطالبی گفته شد، تگ پاراگراف است که تقریبا" همه ی المان ها را می توان برای آن نوشت و همانطور که در مثال دیدید، محتویات بین دو تگ آغازی و پایانی، متن پاراگراف شما خواهد بود.
img
این تگ برای درج تصویر در صفحه ی وب به کار می رود که فقط دارای یک تگ آغازی است و تگ پایانی ندارد. مهمترین المان آن src است و مقدار این المان، آدرس اینترنتی عکس مورد نظر میباشد. علاوه بر آن میتوان المان های دیگری نظیر طول، عرض، کادر، رنگ زمینه، موقعیت و... را نیز برای آن نوشت. به مثال زیر توجه کنید:
<img src="http://address.com/pictures/image.png">
که نتیجه ی این کد، تصویری با آدرس اینترنتی داخل علامت کوتیشین است.
input
از این تگ برای ایجاد انواع ورودی نظیر کادر متن، دکمه ارسال، دکمه پاک کردن، لیست، گزینه و... استفاده میشود که بعد ها به آن بطور مفصل می پردازیم. فقط دارای یک تگ آغازی است و تگ پایانی ندارد.
hr
این تگ نیز فقط دارای تگ آغازی است و برای درج خطوط افقی به کار میرود و المان هایی نظیر width (طول)، height (عرض)، size (ضخامت)، color (رنگ) و ... را میپذیرد.
br
این تگ بسیار ساده است و برای رفتن به خط بعد به کار میرود و معمولا" داخل پاراگراف ها و... از آن استفاده می شود. فقط دارای تگ آغازین است. این تگ معمولا" هیچ المانی ندارد.
table
از این تگ برای درج جدول استفاده می کنیم و استفاده از آن کمی پیچیده است بنابراین در جلسات بعدی به آن می پردازیم.
div
این تگ یکی از تگ های پایه است که در سالهای اخیر مورد توجه قرار گرفته و استفاده اش ایجاد اسکلت برای صفحه است. در جلسات بعدی مفصل تر به آن می پردازیم.
خب دوستان این تگ ها متداول ترین تگ های صفحات وب بودند که باید آشنایی اولیه ای با آنها پیدا می کردید.
اکنون به مثال زیر توجه کنید که همه ی این تگ ها را در قالب یک کد html استفاده کرده ایم:
<html>
<head>
<title>نام صفحه ی وب</title>
</head>
<body>
<p>
این یک پاراگراف است<br>
متن مورد نظر<br>
</p>
<a href="http://google.com">موتور جستجوی گوگل</a>
<img src="http://google.com/image.jpg">
<hr>
</body>
</html>
برای مشاهده ی نتیجه، این کد را در برنامه notepad یا برنامه های ویرایش متن دیگر کپی کرده و ازمنوی file گزینه ی save as رو بزنید. در لیست مقابل عبارت save as type عبارت all files را انتخاب کرده و در کادر نام، نام مورد نظر را نوشته و پسوند html. را کنار نام بنویسید. پس از زدن گزینه save به محل ذخیره شدن فایل رفته و فایل مورد نظر را مشاهده می کنید. آنرا باز کنید. می بینید که با استفاده از مرورگر باز میشود و صفحه ای که می بینید، نتیجه ی کد ماست... میتوانید به برنامه ی ویرایش متن رفته و کدها را به سلیقه خود تغییر دهید. این اولین صفحه ی وب شماست!
منبع» www.fpsforum.ir (http://www.fpsforum.ir)
تا جلسه ی بعدی خدانگهدار!
موفق باشــید...
توی این مقاله که از وبسایت خودم هست، قصد دارم اصول اولیه در html را آموزش دهم...
اول از همه بگویم که html ، در واقع زبان برنامه نویسی نیست و یک زبان علامت گذاری یا به اصطلاح (ابر متن) میباشد که به وسیله ی اون ما میتونیم زبانهای مختلف برنامه نویسی وب رو اعم از جاوا اسکریپت، پی اچ پی و... پیوند بدهیم...
کدنویسی html، همواره با استفاده از تعدادی تگ (tag) صورت میگیره و هر تگ دارای چند المان (خصوصیت) است و این المان ها معمولا" دارای مقدارهایی هستند که با علامت مساوی (=) به آنها نسبت داده میشوند. هر تگ معمولا" دارای یک تگ آغازی و یک تگ پایانی است و محتویات تگ، بین این دو تگ قرار می گیرند...
بگذارید با استفاده از مثالی، شما رو متوجه منظورم بکنم:
تگ p که برای ساختن پاراگراف های متنی استفاده میشود به این صورت استفاده میشود:
<p width="100%" bgcolor="red" id="first_paragraph">به نام خداوند بخـشنده ی مهربان</p>
که در آن تگ آغازی و تگ پایانی نامیده میشود و عبارت "به نام خداوند بخشنده ی مهربان" محتوای تگ است و هرکدام از عبارات width و bgcolor و id المان های این تگ هستند و عبارات 100% و red و id مقادیر نسبت داده شده به این المان ها هستند. همانطور که میبینید این مقادیر با علامت = به المان ها نسبت داده شده اند و در اطراف هر کدام از مقادیر، یک جفت کوتیشین (" ") مشاهده میکنید که به جای آنها از علامت (' ') نیز میتوانید استفاده کنید یا حتی می توانید هیچ کدام را نگذارید ( که البته توصیه ی من این است که برای خوانایی کد، از یکی از این دو علامت استفاده نمایید) اما گذاشتن علامت مساوی اجباری است.
تعداد المان ها میتواند بیشتر شود. برای مثال یک تگ میتواند ده یا بیست تا المان داشته باشد یا میتواند هیچ المانی نداشته باشد. اگر هیچ المانی برای آن ننویسیم، مرورگر با توجه به تنظیمات پیش فرض، هر المان را خودبه خود مقدار دهی میکند... در واقع ما این عمل نوشتن و مقدار دهی کردن المان را از این جهت انجام میدیم که در واقع خصوصیت های اون آبجکت یا شئ رو با توجه به سلیقه ی خودمون تغییر بدیم. این خصوصیت ها میتوانند رنگ زمینه، فونت، طول یا عرض، رنگ قلم، اندازه قلم، کادر و... باشند که اونها رو با ذکر نام المان و مقدار المان (مانند مثال بالا) طبق سلیقمون تغییر میدیم و تنظیم میکنیم.
تگ ها رو میتوان داخل تگ دیگری نوشت و در واقع آنرا زیرمجموعه ی تگ دیگری کرد...
خب برای اینکه یکم از این متن های زیاد و خسته کننده دور شویم، بگذارید برایتان لیستی از تگ های پرکاربرد رو اینجا بنویسم:
---------------------------------------------
لیست تگ های متداول
html
این تگ درواقع اولین تگ موجود در هر صفحه ی وب است که به مرورگر میفهماند که این کدها html هستند. اصولا" این تگ دارای المانی نیست یا اگر هم داشته باشد معمولا" نوشته نمی شود...
head
تگی است که در آن تگ هایی نوشته می شوند که در صفحه قابل دیدن نیستند؛ یا کدهایی که طرف صحبتشان موتورهای جستجو مثل google و... میباشد! (بعدها مفصل تر توضیه می دهم) برای این تگ نیز المانی نمی نویسیم...
title
این تگ داخل تگ قبلی یعنی تگ نوشته میشود و کار آن معین کردن اسم صفحه است که در مرورگر نشان داده می شود. برای این تگ نیز معمولا" المانی نوشته نمیشود. شیوه ی استفاده از این تگ را پایین تر با ذکر مثالی نشان خواهم داد.
body
این تگ که از کلمه ی body به معنای بدن یا بدنه گرفته شده است، بدنه ی سایت را شامل میشود و برعکس تگ head (به معنای سر) کدهایی که در صفه قابل دیدن هستند را در بر میگیرد. المان های زیادی میتوان به آن نسبت داد که بعد ها آنها را ذکر میکنم.
a
این تگ یکی از مهم ترین تگ های هر صفحه ی وب است و کار آن ساختن لینک یا همان پیوند (عبارتی که با کلیک روی آن به صفحه ی دیگری می روید) می باشد و تقریبا" همه ی المان ها را می توان برای آن نوشت. اصلی ترین المان آن المان href است که آدرس صفحه ی مقصد را به این المان نسبت می دهیم:
<a href="http://www.fpsforum.ir">انجمن بازیسازان و برنامه نویسان اف. پی. اس فروم</a>
نتیجه ی کد بالا، به این صورت است:
انجمن بازیسازان و برنامه نویسان اف. پی. اس فروم (http://www.fpsforum.ir)
p
این تگ که چندی قبل درموردش مطالبی گفته شد، تگ پاراگراف است که تقریبا" همه ی المان ها را می توان برای آن نوشت و همانطور که در مثال دیدید، محتویات بین دو تگ آغازی و پایانی، متن پاراگراف شما خواهد بود.
img
این تگ برای درج تصویر در صفحه ی وب به کار می رود که فقط دارای یک تگ آغازی است و تگ پایانی ندارد. مهمترین المان آن src است و مقدار این المان، آدرس اینترنتی عکس مورد نظر میباشد. علاوه بر آن میتوان المان های دیگری نظیر طول، عرض، کادر، رنگ زمینه، موقعیت و... را نیز برای آن نوشت. به مثال زیر توجه کنید:
<img src="http://address.com/pictures/image.png">
که نتیجه ی این کد، تصویری با آدرس اینترنتی داخل علامت کوتیشین است.
input
از این تگ برای ایجاد انواع ورودی نظیر کادر متن، دکمه ارسال، دکمه پاک کردن، لیست، گزینه و... استفاده میشود که بعد ها به آن بطور مفصل می پردازیم. فقط دارای یک تگ آغازی است و تگ پایانی ندارد.
hr
این تگ نیز فقط دارای تگ آغازی است و برای درج خطوط افقی به کار میرود و المان هایی نظیر width (طول)، height (عرض)، size (ضخامت)، color (رنگ) و ... را میپذیرد.
br
این تگ بسیار ساده است و برای رفتن به خط بعد به کار میرود و معمولا" داخل پاراگراف ها و... از آن استفاده می شود. فقط دارای تگ آغازین است. این تگ معمولا" هیچ المانی ندارد.
table
از این تگ برای درج جدول استفاده می کنیم و استفاده از آن کمی پیچیده است بنابراین در جلسات بعدی به آن می پردازیم.
div
این تگ یکی از تگ های پایه است که در سالهای اخیر مورد توجه قرار گرفته و استفاده اش ایجاد اسکلت برای صفحه است. در جلسات بعدی مفصل تر به آن می پردازیم.
خب دوستان این تگ ها متداول ترین تگ های صفحات وب بودند که باید آشنایی اولیه ای با آنها پیدا می کردید.
اکنون به مثال زیر توجه کنید که همه ی این تگ ها را در قالب یک کد html استفاده کرده ایم:
<html>
<head>
<title>نام صفحه ی وب</title>
</head>
<body>
<p>
این یک پاراگراف است<br>
متن مورد نظر<br>
</p>
<a href="http://google.com">موتور جستجوی گوگل</a>
<img src="http://google.com/image.jpg">
<hr>
</body>
</html>
برای مشاهده ی نتیجه، این کد را در برنامه notepad یا برنامه های ویرایش متن دیگر کپی کرده و ازمنوی file گزینه ی save as رو بزنید. در لیست مقابل عبارت save as type عبارت all files را انتخاب کرده و در کادر نام، نام مورد نظر را نوشته و پسوند html. را کنار نام بنویسید. پس از زدن گزینه save به محل ذخیره شدن فایل رفته و فایل مورد نظر را مشاهده می کنید. آنرا باز کنید. می بینید که با استفاده از مرورگر باز میشود و صفحه ای که می بینید، نتیجه ی کد ماست... میتوانید به برنامه ی ویرایش متن رفته و کدها را به سلیقه خود تغییر دهید. این اولین صفحه ی وب شماست!
منبع» www.fpsforum.ir (http://www.fpsforum.ir)
تا جلسه ی بعدی خدانگهدار!
موفق باشــید...