مهمان عزیز خوش آمدید. ورود ثبت نام



امتیاز موضوع:
  • 0 رای - 0 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5

[-]
کلمات کلیدی
دوره فشرده آموزش html

دوره فشرده آموزش html
به نام خدا

با سلام .

در این تاپیک انشاالله میخوام یه دوره جامع و کامل آموزش زبان html از زبان های طراحی تحت وب و ویندوز تهیه کنم .

سرفصل آموزش ها :

. html چیست
. ساختار یک صفحه وب و ساختار تگ ها
. نوشتن متن در یک صفحه وب ( آموزش کامل تگ های کلیدی با توضیحات لازم از جمله تگ p , a , br و برخی تگ های منسوخ شده در html5 مثل font , center و ... )
.درج محتوا در صفحات وب ( متن , عکس , جدول و ... )
.عنصر div 
.فرم ها 
. بررسی دیگر تگ ها و عناصر 
.جمع بندی کلی و پایان آموزش ها 

تمامی آموزش ها به صورت اختصاصی برای my-bb.ir تهیه و تنظیم میشوند .
ضمنا تمامی این آموزش ها کاملا رایگان است .

سعی بر این است که این دوره فشرده نهایتا 30 روز به طول انجامد.

امیدوارم آموزش های پر بار و مفیدی در خدمت شما عزیزان قرار دهم .

موفق باشید .


قبول دارید خدا یه سریارو بغل کرده ؟   Huh
پاسخ
دوره فشرده آموزش html 


html چیست


به امید خدا میریم که در اولین بخش به بررسی تاریخچه و کاربرد های زبان برنامه نویسی html بپردازیم .


زبان html یک زبان برنامه نویسی نیست بلکه یک زبان علامت گذاری است .

زبان علامت گذاری به معنای زبان علامت گذاری و به کار گیری مجموعه ای از تگ ها است .

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

شما میتوانید زبان html را به دو صورت تحت وب ( .html , .htm ) و تحت ویندوز ( .hta )  به کار بگیرید .

فرقی نمی کند که از فرمت html و یا htm برای فایل های خود استفاده کنید در هر صورت نتیجه یکسان است .

در این دوره مبنی تمامی آموزش های ما طراحی مبتنی بر سرور است . یعنی در این دوره تنها طراحی صفحات وب را می آموزید که البته میتوانید همان فایل ها را در ویندوز با فرمت hta استفاده نمایید .

شاید توضیحات بالا برایتان پیچیده باشد .

خلاصه کوتاهی از متن بالا را برایتان آماده کرده ام :

نقل قول:زبان html یک زبان نشانه گذاری است . در این زبان ما از تگ ها برای توصیف صفحات وب استفاده میکنیم . مرورگر ها کدهای ما را بر اساس استاندارد های طراحی وب در معرض دید بازدید کنندگان قرار میدهند .

برای کدنویسی نرم افزار های مختلفی مثل  ++Dreamweaver , notepad و ... وجود دارد که کدنویسی را ساده تر کرده اند اما یک ادیتور ساده متن مثل Notepad در ویندوز برای شروع کدنویسی کافیست .

شخصا از Adobe Dreamweaver cc14  استفاده میکنم اما همان طور که گفتم در هر ادیتوری شما نیازمند دانش کدنویسی هستید .

پس از پایان این دوره شما میتوانید بهتر کاربرد تگ ها و زبان html را درک کنید.

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

در آموزش بعدی ساختار یک صفحه html را بررسی میکنیم .

موفق باشید


قبول دارید خدا یه سریارو بغل کرده ؟   Huh
پاسخ
دوره فشرده آموزش html
ساختار یک صفحه وب و ساختار تگ ها
در قسمت قبل گفتم که صفحات وب از کدها تشکیل میشوند .
به کد های زیر نگاه کنید
کد:
[color=#ff3333][color=#ff3333][color=#ff3333][color=#ff3333][color=#ff3333][color=#333333][color=#ff3333][color=#ff3333][color=#333333][color=#333333][color=#ff3333][color=#ff3333][color=#333333][color=#333333]<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
</head>
<body>
</body>
</html>
[/color][/color][/color][/color][/color][/color][/color][/color][/color][/color][/color][/color][/color][/color]
این یک صفحه ساده html است . اکثر صفحات 800 خطی هم با همین 9 خط کد شروع میشوند .به بررسی اجزای این صفحه می پردازیم .* تگ ها :
کد:
[color=#ff3333][color=#ff3333][color=#ff3333][color=#ff3333][color=#ff3333][color=#333333][color=#ff3333][color=#ff3333][color=#333333][color=#333333][color=#ff3333][color=#ff3333][color=#333333][color=#333333][color=#ff3333][color=#ff3333][color=#333333][color=#333333][color=#333333][color=#ff3333][color=#ff3333][color=#ff3333][color=#ff3333][color=#333333][color=#333333][color=#333333][color=#333333][color=#ff3333]<html>
</html>[/color][/color][/color][/color][/color][/color][/color][/color][/color][/color][/color][/color][/color][/color][/color][/color][/color][/color][/color][/color][/color][/color][/color][/color][/color][/color][/color][/color]
 . اکثر تگ ها شامل یک تگ بسته و یک تگ باز هستند . به تگ باز تگ شروع و به تگ بسته تگ پایان نیز گفته می شود .
تگ باز :
<html>
تگ بسته:
<html/>
( تگ های جفت به صورت <code/> بسته میشوند یعنی / سمت چپ و قبل از شروع تگ قرار میگیرد )
تگ هایی نیز استثنا هستند .
برای مثال تگ br یک تگ تکی است و تگ بسته ندارد 
کد:
[font]<br>[/font]
در استاندارد های html5 بهتر است اینگونه تگ ها هم ببندیم .
کد:
[font]<br/>[/font]
همان طور که میبینید اینگونه تگ ها پس از نوشتن تگ بسته میشوند 
 
<html>این تگ در تمامی اسناد html وجود دارد و نشان دهنده شروع یک سند html استنوان صفحه را مشخص می کند که در اسکرول بار نمایش داده میشود و در موتور های جست و جو ایندکس میشود
<body>
محتوای درون صفحه وب در این تگ قرار میگیرد
<head>
محتوای این تگ در صفحات وب نمایش داده نمی شود . در این قسمت می توان اعمالی نظیر زیر را انجام داد :
تایین نوع کدنویسی
تایین عنوان صفحه
تایین آیکون (فاو آیکون ) صفحه
فراخوانی استایل خارجی و داخلی
فراخوانی جاوااسکریپت خارجی و داخلی
افزودن توضیحات و متاتگ های مختلف به صفحات وب که در سئو و ایندکس سایت در موتور های جستوجو بسیار مهم است .
تگ هایی که در head قرار میگیرند عبارتند از :
کد:
[color=#ff3333][color=#ff3333][color=#ff3333][color=#ff3333][color=#ff3333][color=#333333][color=#ff3333][color=#ff3333][color=#333333][color=#333333][color=#ff3333][color=#ff3333][color=#333333][color=#333333][color=#ff3333][color=#ff3333][color=#333333][color=#333333][color=#333333][color=#ff3333][color=#ff3333][color=#ff3333][color=#ff3333][color=#333333][color=#333333][color=#333333][color=#333333][color=#ff3333][color=#333333][color=#333333][color=#333333][color=#333333][color=#333333][color=#333333][color=#333333][color=#333333][color=#333333][color=#333333][color=#333333]<title>
<meta>
<style><link>
<base>
<script>
<noscript>
<doctype!>[/color][/color][/color][/color][/color][/color][/color][/color][/color][/color][/color][/color][/color][/color][/color][/color][/color][/color][/color][/color][/color][/color][/color][/color][/color][/color][/color][/color][/color][/color][/color][/color][/color][/color][/color][/color][/color][/color][/color]


<meta>

اگر دقت کنید در مثال اول متن هم یک متاتگ به شکل زیر تعریف کرده بودم :

کد:
[color=#ff3333][color=#ff3333][color=#ff3333][color=#ff3333][color=#ff3333][color=#333333][color=#ff3333][color=#ff3333][color=#333333][color=#333333][color=#ff3333][color=#ff3333][color=#333333][color=#333333][color=#ff3333][color=#ff3333][color=#333333][color=#333333][color=#333333][color=#ff3333][color=#ff3333][color=#ff3333][color=#ff3333][color=#333333][color=#333333][color=#333333][color=#333333][color=#ff3333][color=#333333][color=#333333][color=#333333][color=#333333][color=#333333][color=#333333][color=#333333][color=#333333][color=#333333][color=#333333][color=#333333]<meta charset="utf-8">
متاتگ ها اکثرا برای موتور های جستوجو و بهینه سازی ( seo ) سایت طرح میشوند .

متاتگ بالا به موتور های جستوجو نوع انکد شدن صفجه را نشان میدهد که زبان فارسی به صورت utf-8 انکد میشود.

* متاتگ ها از پیش تایین شده اند و قابل تغییر نیستند . سعی میکنم در پست بعدی لیست اکثر متاتگ ها را قرار دهم *

[color=#ff3333]<style>

این تگ برای تعریف یک استایل به کار میرود . کدنویسان با استایل ها زندگی میکنند !  Big Grin 

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


[color=#ff3333]<link>

از این تگ برای وارد کردن لینک های خارجی ( جاوااسکریپت و سی اس اس فقط و فقط در تگ head ) استفاده میشود .

<link rel="stylesheet" type="text/css | text/javascript" href="link"/>

[color=#ff3333]<base>

[color=#333333][color=#333333]
با استفاده از این تگ میتوانیدآدرس پیشفرض لینک های خود و یا یک تارگت* برای لینک های خود تعریف کنید .

[color=#ff3333][color=#ff3333][color=#333333][color=#333333][color=#333333]
برای مثال همه لینک های شما به صورت : up.mysite.ir/theme/image.png است .
[color=#ff3333][color=#ff3333][color=#333333][color=#333333]
می توانید به این شکل یک base برای لینک های خود تعریف کنید :

[color=#ff3333][color=#ff3333][color=#333333][color=#333333]<base href="http://up.mysite.ir/theme/" target="_blank"/>

[color=#ff3333][color=#ff3333][color=#333333]و سپس به این شکل از تگ img ( عکس که در قسمت بعدی کاملا به آن میپردازیم ) استفاده کنید :

[color=#ff3333][color=#ff3333]<img src="image.png">
[color=#ff3333]به صورت خودکار لینک شما به صورت up.mysite.ir/theme/image.png بازسازی میشود 


قبول دارید خدا یه سریارو بغل کرده ؟   Huh
پاسخ
<script>

وارد کردن یک جاوااسکریپت خارجی

<noscript>

در زمانی که جاوااسکریپت کامپیوتر کاربر خاموش باشد هشدار میدهد .


*تارگت : نوع باز شدن فایل را نشان میدهد برای مثال تارگت _blank لینک در پنجره جدید  باز خواهد شد .

نتیجه نهایی آموزش امروز :

کد:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="link"/>
<style>
style
</style>
<script>
script
</script>
</head>
<meta charset="utf-8">
<title>title</title>
</head>

<body>
<base href="http://up.mysite.ir/theme/" target="_blank"/>
<img src="image.png">


</body>
</html>
امیدوارم این قسمت مورد توجه شما عزیزان قرار گرفته باشد .

شخصا پدرم دراومد دستم خورد شد مخم خاک شیر شد تا همه رو جمله بندی کنم  :|

یه نظرم که ندادید :|


قبول دارید خدا یه سریارو بغل کرده ؟   Huh
پاسخ
دوستان عزیز من تگ br رو اشتباه نوشته بودم رفتم با ویرایش سریع درست کردم کد های رنگ و اینا همه قاطی شد رفت هوا  Exclamation

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


قبول دارید خدا یه سریارو بغل کرده ؟   Huh
پاسخ
دوره فشرده آموزش Html

نوشتن متن در یک صفحه وب
بابت وقفه پیش اومده از تمامی دوستان معذرت خواهی میکنم .

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

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

درج محتوا در صفحات وب به وسیله عناصر ( تگ ها یا همون نشانه ها ) html5 ساده تر شده اند که در ادامه سعی میکنم تمامی عناصر مورد استفاده در محتوا وبسایت را برایتان شرح دهم .
<p>

یک پاراگراف تعریف میکند

کد:
<p> این یک پاراگراف است ! اولین پاراگراف من !</p>
 
<img>

یه تصویر تعریف میکند

کد:
<img src="image link">
پس از رفتن موس بر روی تصویر متنی در کنار آن نمایان میشود . برای تایین این متن برای img خود یک title به شکل زیر تعریف میکنیم 
کد:
<img src="image link" title="image title">
برای افزودن توضیحات به تصویر ، برای img خود alt تعریف میکنیم . این بخش از img برای موتور های جستوجو مهم است و در ظاهر img نمایان نمیشود.
کد:
<img src="image link" title="image title">
برای تایین طول و عرض تصویر برای آن width و height ( طول و عرض به زبان انگلیسی ! ( جهت اطلاع ! )) تعریف میکنیم . 
کد:
<img src="image link" title="image title" width="200px" height="200px">
برای تایین کادر ( border ) این خاصیت را هم به img خود اضافه میکنیم
کد:
<img src="image link" title="image title" width="200px" height="200px" border="0">
فعلا به دیگر خاصیت ها کاری نداریم که بعد از ورود به بخش style با یکم سی اس اس بیش تر به دردمون میخورند


<a>
برای درج لینک در متن به کار میرود
کد:
<a href="link">این یک لینک است</a>
برای تایین نحوه بازشدن لینک برای آن یک تارگت تعریف میکنم .
کد:
<a href="link" target="_blank">این یک لینک است</a>
تارگت ها هم توضیحاتش خیلی تو نت زیاده یکم جستوجو کنید بهتره تاپیک هم شلوغ نمیشه 

حالا با توجه به اینکه تگ a یک تگ استثنا نیست و به صورت جفت می آید میتونیم به این شکل از آن بهره ببریم تا یک تصویر را لینک دار کنیم 
کد:
<a href="link" target="_blank"><img src="image link" title="image title" width="200px" height="200px" border="0"></a>
<center>

متن را وسط چین میکند ( منسوخ شده در html5 )
کد:
<center>
<p> این یک پاراگراف است ! اولین پاراگراف من !</p>
</center>
برای اینکه آموزش پربار تر باشه به جایگزین این تگ هم میپردازیم .

در html5 این تگ با استفاده از css جایگزین میشود . 

بهترین راه این است که به پاراگراف خود یک استایل بدهیم و در آن این بخش را نیز تعریف کنیم تا وارد بحث سی اس اس نشویم
کد:
<p style="text-align:center"> این یک پاراگراف است ! اولین پاراگراف من !</p>

<br>

به خط بعد میرود
کد:
<p style="text-align:center"> این یک پاراگراف است ! اولین پاراگراف من !</p><br>
<p>پاراگراف دوم من</p>
طبق استاندارد های html5 این تگ را میبندیم . ( تگ br استثناست و جفت ندارد )
کد:
<p style="text-align:center"> این یک پاراگراف است ! اولین پاراگراف من !</p><br/>
<p>پاراگراف دوم من</p>
<hr>

یک خط افقی در صفحه تایین میکند .  این تگ هم مانند br استثناست و در html5 بسته میشود 
کد:
<p style="text-align:center"> این یک پاراگراف است ! اولین پاراگراف من !</p><br/>
<hr/>
<p>پاراگراف دوم من</p>
button

یک دکمه به وجود می آورد 

آموزش کامل این تگ در آموزش فرم ها ارایه میشود . در قسمت زیر یک مثال از یک دکمه ساده بدون اکشن را میبینید 
کد:
<button>Click!</button>
نتیجه نهایی آموزش امروزباید همچین صفحه ای به شما بدهد
کد:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
<center>
<p> این یک پاراگراف است ! اولین پاراگراف من !</p><br/>
<hr/>
<p>پاراگراف دوم من</p>
<button>Click!</button>
</center>
<p style="text-align:center">
<img src="http://my-bb.ir/uploads/avatars/avatar_4916.jpg?dateline=1409666461" title="image title" width="200px" height="200px" border="0">

<a href="http://my-bb.ir/uploads/avatars/avatar_4916.jpg?dateline=1409666461" target="_blank"><img src="image link" title="image title" width="200px" height="200px" border="2"></a>
</p>
</body>
</html>
موفق باشید .





قبول دارید خدا یه سریارو بغل کرده ؟   Huh
پاسخ
من مجددا شرمنده هستم که انقدر فاصله ایجاد شد ... دلیل اصلیش هم اینه که واقعا خود my-bb.ir اذیت میکنه همیشه کپچا میخواد و یک بار درمیون که بیایم شاهد ارور هاست هستیم !
دوره فشرده آموزش html

عنصر div
همان طور که اشاره کردیم html به تنهایی کاربرد چندانی ندارد . با استفاده از عنصر div میتوان برای هر عنصر id یا class خاصی تعریف کرد .

برای مثال من استایل زیر را با css نوشته ام .
 
کد:
.myclass{
    font-family:b yekan;
}
سپس میتوانم با استفاده از عنصر div این استایل را فراخوانی و مورد استفاده قرار دهم .
 
کد:
<div class="myclass" id="myid">
متن من
</div>
نکته : معمولا از id در زبان جاوااسکریپت استفاده میشود و در کد بالا id به صورت اضافی نوشته شده است !

خب حالا فرض میکنیم که ما هم جاوااسکریپت داریم هم css ! به شکل زیر عمل میکنیم :
کد:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
.myclass{
    font-family:b yekan;
}
</style>
<script>
text
</script>
</head>

<body>
<div class="myclass" id="myid">
متن من
</div>
</body>
</html>

ضمنا میتوانیم استایل را به خود عنصر هم بدهیم برای مثال :

 
کد:
<img style="width:200px; height:200px" src="#">
فکر نمیکنم موضوع دیگه ای در مورد این عنصر مونده باشه . این جلسه هم به پایان رسید.

موفق باشید .


قبول دارید خدا یه سریارو بغل کرده ؟   Huh
پاسخ


موضوعات مشابه ...
موضوع نویسنده پاسخ بازدید آخرین ارسال
  آموزش ساخت منو HTML + CSS ERFAN-DESIGN 0 1,293 ۰۵ تير ۱۳۹۴، ۰۹:۴۲ ب.ظ
آخرین ارسال: ERFAN-DESIGN
  ایجاد متن متحرک [html] KoG 5 3,283 ۱۷ بهمن ۱۳۹۳، ۰۱:۱۰ ب.ظ
آخرین ارسال: ERFAN-DESIGN
  درخواست کد html alimasumi 5 2,129 ۰۹ تير ۱۳۹۲، ۰۷:۵۶ ق.ظ
آخرین ارسال: alimasumi
  [HTML] کار با متن 1 KoG 2 1,819 ۲۱ فروردین ۱۳۹۲، ۰۹:۱۴ ب.ظ
آخرین ارسال: Tofighi
Star [html] استفاده از تصویر KoG 0 1,671 ۲۱ فروردین ۱۳۹۲، ۰۲:۲۶ ب.ظ
آخرین ارسال: KoG
  [html] سرفصل ها KoG 2 1,829 ۲۱ فروردین ۱۳۹۲، ۰۱:۵۶ ب.ظ
آخرین ارسال: KoG
  [html] متن لینک دار KoG 0 3,358 ۲۰ فروردین ۱۳۹۲، ۰۶:۱۴ ب.ظ
آخرین ارسال: KoG
  [html] نوشتن متن KoG 0 1,805 ۲۰ فروردین ۱۳۹۲، ۰۶:۰۹ ب.ظ
آخرین ارسال: KoG
  [HTML] کار با متن 2 KoG 0 1,655 ۱۹ فروردین ۱۳۹۲، ۰۶:۳۹ ب.ظ
آخرین ارسال: KoG
  [HTML] متن مورب KoG 0 1,624 ۱۹ فروردین ۱۳۹۲، ۰۶:۳۳ ب.ظ
آخرین ارسال: KoG

پرش به انجمن:


کاربران در حال بازدید این موضوع:

1 مهمان


درباره‌ی ما

گروه پشتیبانی فارسی مای بی بی My-BB.Ir در واپسین روزهای پاییز 1391 کار خود را در زمینه مای بی بی آغاز کرد. این گروه با توکل بر خدای منان و دانش فنی خود در تلاش است فعالیتی هرچند ناچیز در زمینه ارتقا و پشتیبانی مای بی بی انجام دهد.
تمامی حقوق برای وب‌سایت پشتیبانی فارسی مای بی‌بی (My-BB.Ir) محفوظ می‌باشد و هرگونه کپی‌برداری از آن شرعا حرام و قانونا غیرمجاز می‌باشد.
قدرت گرفته از مای بی‌بی - فارسی‌ساز: My-BB.Ir و IORA.Ir