امتیاز موضوع:
  • 1 رأی - میانگین امتیازات: 5
  • 1
  • 2
  • 3
  • 4
  • 5
آموزش جامع زبان html
نویسنده پیام
hamedset آفلاین
عضو انجمن
عضو


ارسال‌ها:
323
تاریخ عضویت:
Nov 2011
اعتبار:
25
تشکر ها: 334
447 تشکر شده در 230 ارسال
ارسال: #1
آموزش جامع زبان html
در این آموزش سعی بر مفید و خلاصه بودن مطالب شده است.
دوستان عزیز سوالات خود را از طریق پیام خصوصی بپرسند.


اصطلاحات وب جهانی

اول از همه با یک سری از اصطلاحات وب جهانی آشنا می شویم.

پیوند: با استفاده از پیوند می توان از صفحه ای به صفحه دیگر وب رفت. وقتی ماوس بر روی پیوند قرار می گیرد,به شکل دست در می آید.
فریم : ویژگی در صفحه وب است که هر صفحه را به چند بخش تقسیم می کند.
سرور : جایی است که صفحات وب در آن جا ذخیره می شوند . کامپیوتری که به شبکه جهانی اینترنت متصل است.

شکل کلی دستورات html

دستورات HTML چگونگی نمایش صفحه وب را در مرورگر مشخص می کند. تقریبا هر دستور HTML دارای یک علامت شروع و یک علامت پایان است که در داخل <> قرار می گیرند: اگر دستور HTML را با tag نشان دهیم (به صورت فرضی) , هر دستور به صورت زیر بیان می شود:

کد:
<tag>شروع
...
</tag>پایان

نکته : بعضی از دستورات HTML به </tag> نیاز ندارند که آن ها را نیز بررسی خواهیم کرد.

هر برنامه HTML با دستور <html> شروع و به </html> ختم می شود. علاوه بر این , هر برنامه HTML دارای دو بخش عنوان و بدنه است. بخش عنوان شامل اطلاعات مکمل در مورد سند HTML است و مثلا شامل عنوانی است که در سر برگ مرورگر ظاهر می شود. این بخش با <head> شروع و به </html> ختم می شود. عنوان صفحه با <title> روع و به </title> ختم می شود. بخش بدنه حاوی دستورالعمل های تولید صفحه است که با <body> شروع و به </body> ختم می شود. با توجه به این توضیحات , شکل کلی برنامه HTML را می توان مانند زیر بیان کرد.

کد:
<html>
<head>
<title> عنوان صفحه </title>
... سایر توضیحات ...
</head>
<body>
...دستورات ایجاد کننده صفحه ...
</body>
</html>
-----------------------------------------------------------------------------------------------------------------------
صفات دستورات HTML

بسیاری از دستورات HTML صفاتی دارند که چگونگی اجرای آن ها را مشخص می کند. صفات مهم آن ها id است که نام آن دستور را مشخص می کند.

تعیین تیترها و پاراگراف بندی

برای تعیین تیترها از دستورات <h1> تا <h6> استفاده می شود. تیترهای بزرگ با <h1> تیترهای کوچک با <h3> , <h2> تا <h6> مشخص می شوند. در ضمن ترتیب اهمیت نیز از <h1> به <h6> است. یعنی برای موتورهای جستجو تگ <h1> پر اهمیت تر است از تگ <h6> است . اصولا این روزها طراحان برای پر اهمیت دادن موضوع از تگ های h استفاده می کنند و موضوع بزرگ یا کوچک نشان دادن کم رنگ تر شده است.

کد:
<h1> welcome to html </h1>

برای پاراگراف بندی از دستور <p> استفاده می شود. مرورگر بعد از این دستور یک خط فاصله می اندازد.

کد:
<p>
پاراگراف
</p>
-----------------------------------------------------------------------------------------------------------------------------------------

تعیین نوع متن,توضیحات و خط افقی

با استفاده از دستور <b> می توان متن را پر رنگ و با استفده از دستور <i> می توان متن را ایتالیک(نیم کج) کرد:
کد:
<b> this is bold texte </b>
<i>this is bold texte </i>
برای توضیحات از علائم <!-- و --> استفاده می شود:

کد:
<!-- توضیحات -->

برای این که متنی چشمک زن باشد, از دستور <blink> استفده می شود.(البته این دستور در همه مرورگرها پشتیبانی نمیشه, مثل اینترنت اکسپلور , مرورگر قرن 19)
کد:
<blink> this text blinking </blink>

اگر بخواهید به سطر جدیدی بروید از دستور </br> استفاده کنید. مرورگر بعد از این دستور مابقی دستورات یک سطر فاصله می ادازد. (این دستور فاقد بخش ابتدایی , یعنی <br> است)

برای رسم خط افقی از دستور </hr> استفاده می شود. (این دستور فاقد بخش ابتدایی , یعنی <hr> است)

--------------------------------------------------------------------------------------------------------------------------------------

ایجاد پیوند و انتقال تصویر به صفحه وب

برای ایجاد پیوند از دستور <a> استفاده می شود:
کد:
<a herf = "url"> sample </a>
url مشخص می کند پس از کلیک کردن پیوند , چه صفحه ای اجرا شود. در ضمن url مابین " " قرار می گیرد و herf مشخص کننده نوع پیوند است.

کد:
<a herf = "http://forum.youhosting.ir"> sample </a>

با این دستور , پیوندی به نام sample ایجاد می شود که با کلیک کردن بر روی آن , به آدرس forum.youhosting.ir می رود.

برای انتقال تصویر به صفحه وب از دستور img استفاده می شود
به عنوان مثال , دستور زیر تصویر armg.gif را وارد صفحه می کند. در این جا باید توجه کنید که اگر تصویر در همان فایلی که صفحه وب در آن قرار دارد , موجود باشد آدرس را به صورت armg.gif وارد می کنیم , اما در فایل دیگری باشد باید آدرس دقیق آن را ذکر کنیم.

کد:
<img src= "armg.gif">

دوصفت مهم آن width و height می باشند که به ترتیب , پهنا و ارتفاع را مشخص می کنند. این دو صفت در سئو تصاویر مهم هستند.
صفت border ضخامت حاشیه دور تصویر را مشخص می نماید:

کد:
<img src = "armg.gif" width ="100" height= "100" border= "1" >


دیگه دوستان فکر کنم برای امروز کافی باشه , این دستورات رو تمرین کنید تا در بخش های بعدی که در همین تاپیک خواهم گذاشت, با برنامه HTML بیشتر آشنا بشیم.دسته گل
(آخرین ویرایش در این ارسال: 10-01-2012، 00:48، توسط hamedset.)
جستجو پاسخ با نقل قول
 تشکر شده توسط: KazeM68N , ali77 , mariya , darksiders , Seven7soft , محمد محمدعلیان , rangi , majid1 , zxchdb
Seven7soft آفلاین
عضو انجمن
عضو


ارسال‌ها:
733
تاریخ عضویت:
Apr 2012
اعتبار:
58
تشکر ها: 1084
965 تشکر شده در 508 ارسال
ارسال: #2
RE: آموزش جامع زبان html
ببخشید فضولی می کنم تو تاپیکتون ولی اگه مثلا برا کد تصویر عملکردش رو یا نمی دونم همون دموشه چیه که نشون میده نتیجه ی کدو اونم بزارید بهتر یاد میگیرن...
Big Grin
دسته گل
جستجو پاسخ با نقل قول
 تشکر شده توسط: hamedset
hamedset آفلاین
عضو انجمن
عضو


ارسال‌ها:
323
تاریخ عضویت:
Nov 2011
اعتبار:
25
تشکر ها: 334
447 تشکر شده در 230 ارسال
ارسال: #3
آموزش جامع زبان html - لیست ها
لیست ها

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

لیست ها در HTML

در HTML مدرن, سه نوع لیست وجود دارد: لیست های مرتب <ol> , لیست های نامرتب <ul>و لیست های تعریفی <dl> . دو ن.ع لیست دیگر که به ندرت استفاده می گیرن, عبارتند از <menu> , <dir> و معمولا به صورت لیست نامرتب به کار برده می شوند. لیست ها می توانند تو در تو و حاوی ساختار بلوکی مثل پاراگراف باشند.

لیست مرتب

لیست مرتب لیستی است که ترتیب عناصر مهم بوده و با <ol> و </ol> مشخص می شوند. ترتیب با شماره گذاری مشخص می شود که می تواند اعداد عربی , حروف یا اعداد رومی باشد. لیست ها بیشتر برای طرح های ساده و دستورات مرحله ای به کار می روند , زیرا عناصر لیست به صورت خودکار توسط مرورگر شماره گذاری می شوند. عناصر لیست مرتب اند و با دستور <li> تعریف می شوند.شماره عناصر از یک آغاز می شود. شکل کلی تعریف لیست مرتب به صورت زیر است:

کد:
<ol>
<li> option 1
<li> option 2
...
<li> option n
</ol>

دستور <ol> دارای سه صفت مهم است که عبارتند از: compact , start و فغحث.

صفت compact فاقد مقدار است, زیرا به مرورگر می گوید که جهت صرفه جویی در فضای صفحه,عناصر لیست را فشرده کند. اینم یک کد دیگه برای دوستانی که به بحث سئو علاقمند هستند.

با استفاده از صفت type می توان مشخص کرد که برای شماره گذاری عناصر لیست از چه حروف یا اعدادی استفاده شود.اگر برابر a باشد از حروف کوچک و اگر A باشد از حروف بزرگ استفاده می گردد. برای اعداد رومی نیز از i کوچک و بزرگ استفده می شود. مقدار 1 هم اعداد معمولی را مشخص می کند. مقدار فرضی نیز برابر با 1 است.

مقدار start مشخص می کند شماره گذاری از با چه مقداری شروع شود. برای اینکه لیست مرتب از حروف j شروع شود , باید دستور زیر به کار گیرد , چون j دهمین کاراکتر است.

کد:
<ol type = "a" start = "10" >

لیست های نامرتب

توسط <ui> و </ui> مشخص می گردد. برای عناصری به کار می روند که ترتیب برای آنها مهم نباشد. مرورگر برای مشخص کردن عناصر لیست نامرتب از علامت هایی همچون دایره و مربع توپر , یا دایره توخالی استفاده می کند. لیست های مرتب می توانند تو در تو باشند. هر سطح تو در تو , با تورفتگی مشخص می شود.


لیست های تعریفی

مجموعه ای از عناصر که همراه هر عنصر , توصیفی نیز وجود دارد. با دستورات <dt> و /dt> مشخص می گردد. تعاریف نیز با دستور <dd> سخش می شوند. چون لیست های تعریفی فاقد شماره یا علامت هایی برای عناصر لیست هستند , اغلب کسانی که با HTML کار می کنند, از آن برای تو رفتگی دادن به متن ها استفده می کنند. این روش , مناسب ترین روش برای برای تورفتگی متن است.


خوب عزیزان این بخش رو هم تمرین کنید تا در بخش بعدی با HTML بیشتر آشنا شویم. البته بعضی از دوستان تنبل ما می گویند تا نمونه کدها رو هم با فایلش آپلود کنم . خداییش این دیگه آخر حرف بود . خوب شما برای اینکه یاد بگیرید باید خودتون کدها رو آزمایش کنید , خودتون کد بنویسید و ببینید که آیا کار میکنه یا نه.
جستجو پاسخ با نقل قول
 تشکر شده توسط: mariya , majid1 , darksiders


موضوعات مرتبط با این موضوع...
موضوع نویسنده پاسخ بازدید آخرین ارسال
  آموزش طراحی سایت hostcode 0 1,070 03-15-2017، 21:03
آخرین ارسال: hostcode
  نرم افزار آموزش HTML آندروید zxchdb 0 1,601 04-20-2014، 15:59
آخرین ارسال: zxchdb
  درخواست آموزش لینک گذاری روی استان ها در نقشه ایران SaMaN 6 6,055 03-29-2014، 02:03
آخرین ارسال: ramtin2025
  کد کردن کد Html mshoja 1 1,998 02-28-2014، 12:16
آخرین ارسال: Mohamm@d
  آموزش ساخت بالابر سایت exaayaa 0 2,447 09-08-2013، 23:32
آخرین ارسال: exaayaa
  مشکل در فارسی سازی قالب HTML T@H@76 10 7,290 05-31-2013، 13:26
آخرین ارسال: T@H@76
  آموزش HTML از مبتدی تا پیشرفته Mohamm@d 0 1,870 05-13-2013، 18:49
آخرین ارسال: Mohamm@d
  یه ویرایش خیلی کوچیک HTML T@H@76 7 4,190 01-09-2013، 19:23
آخرین ارسال: Mehr@ban
  کد HTML ماشین حساب LicH_MaSteR 4 4,734 10-08-2012، 03:28
آخرین ارسال: LicH_MaSteR
  آموزش ارسال اطلاعات یک فرم به ایمیل محمد محمدعلیان 0 1,784 10-07-2012، 22:44
آخرین ارسال: محمد محمدعلیان

پرش به انجمن:


کاربرانِ درحال بازدید از این موضوع: 1 مهمان
یوهاستینگ در بهمن سال 1389 با هدف ارائه خدمات میزبانی وب تاسیس گردید که در مدت زمانی نچندان کوتاه توانست در چهارمین جشنواره وب ایران سال 1390 عنوان هاستینگ برگزیده را به دست آورد.