ورود

توجه ! این یک نسخه آرشیو شده میباشد و در این حالت شما عکسی را مشاهده نمیکنید برای مشاهده کامل متن و عکسها بر روی لینک مقابل کلیک کنید : آموزش html به صورت مبتدی و پایه


boy_evil
January 20th, 2014, 11:44
درود.

در این تاپیک قصد دارم زبان برنامه نویسی html برای دوستان در حد مبتدی آموزش بدم !!! امیدوارم بتونید از این مطلب استفاده ی لازم رو بکنید!
قبل از شروع چند مورد باید بدونید که با یادگیری این آموزش هرچند که مبتدی هست میتونید حداقل کارهایی که در حد وبلاگ نویسی (جهت تغییر در کدهای قالب و گذاشتن بنر و..) و یا به طور کلی کارهایی که یک وبمستر باید یاد داشته باشه (لینک دادن به تصاویر و.....) بیاموزید!!


لطفا هر کسی که مطلب خاصی داره و مرتبط هست برای آموزش برام پ/خ کنه تا بعد از مرتب کردنش بزارم اینجا همه استفاده کنند !
boy_evil
January 20th, 2014, 11:45
قسمت اول :آموزش بدنه ی اصلی یک فایل HTML



هر فایل HTML از یک سری تگ اصلی ساخته شده که محتویات و کدهای دیگر درون این قسمت ها قرار میگیرند !! شما برای یاد گیری HTML لازمه که این تگ ها رو اول بشناسید و با کارشون آشنا بشید !

اصلی ترین تگها :





نشانگر نوع فایل <html>

قسمت سر صفحه <head>

<title/>عنوان صفحه <title>

قسمتی که در مرورگر نمایش داده میشود یا بدنه <body>

<body/>
<html/>






نکته: بعد از شروع هر تگ لازمه که با این / تگ رو تموم کنیم !!

برای نوشتن کدهای HTML میتوانید از NODPAD استفاده کنید و با پسوند .HTML ذخیره کنید و از UTF_8 استفاده نمایید !
boy_evil
January 20th, 2014, 22:07
قسمت دوم : آموزش سایر تگ ها





در این قسمت سایر تگ های کاربردی html و نحوه ی کار با آنها آموزش داده میشود ! :57:






تگ <br>:

این تگ باعث میشود که متن شما به خط بعد منتقل شود همانند عملکرد کلید Enter این تگ نیازی به به تگ بسته ندارد !!!






<html>
<head>
<title/>وب هاستینگ تالک <title>
<head/>
<body>
<br> آموزش برنامه نویسی
<br> آموزش های وب هاستینگ تالک
<body/>
<html/>




توجه کنید این ها مثال هستند و شما میتونید با این مثال ها تمرین کنید و همونطور که در آموزش اول گفته شد میتونید اجرا کنید و تغییرات رو مشاهده کنید !



تگ <b>:

با استفاده از این تگ میتونید متن مورد نظر رو پررنگ کنید !!



<html>
<head>
<title/>وب هاستینگ تالک <title>
<head/>
<body>
<b/>آموزش برنامه نویسی<b>

<body/>




تگ <p>:
با این تگ میتونید پاراگراف ایجاد کنید !!



<html>
<head>
<title/>وب هاستینگ تالک <title>
<head/>
<body>
<p/> آموزش برنامه نویسی <p>
<p/>آموزش های وب هاستینگ تالک <p>
<body/>





تگ <center>:
این تگ باعث میشه مت یا هر چیز دیگری مانند لینک ها بنر ها و .....در وسط صفحه قرار بگیرند !!





<html>
<head>
<title/>وب هاستینگ تالک <title>
<head/>
<body>
<center>
آموزش برنامه نویسی

<center/>
<body/>



تگ <base>:


با استفاده از این تگ میتونید برای همه ی لینک های صفحه مشخصه Target رو قرار بدید !!

برای اینکه صفحه ی مورد نظر در پنجره ی جدید باز شود استفاده میشود !





<head>
<"base target="_blank>
<head/>




عنوان ها <h1> :


عنوان ها با استفاده از تگ های h1 تا h6 درست میشوند که از بزرگ (h1) تا کوچک تقسیم میشوند (h6)





<html>
<head>
<title/>وب هاستینگ تالک <title>
<head/>
<body>
<h1/>وب هاستینگ تالک <h1>
<h2/>وب هاستینگ تالک <h2>
<h3/>وب هاستینگ تالک <h3>
<h4/>وب هاستینگ تالک <h4>
<h5/>وب هاستینگ تالک <h5>
<h6/>وب هاستینگ تالک <h6>
<body/>
<script type="text/javascript"><!--
var _gaq = _gaq || [];
_gaq.push(
['_setAccount', 'UA-10241535-3'],
['_trackPageview']
);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
//-->
</script>

.
boy_evil
January 21st, 2014, 10:55
قسمت سوم : آموزش لینک ها



لینک ها :

برای لینک دادن یا ایجاد یک پیوند در صفحه از تگ <a> استفاده میشود !

با توجه به مثال های زیر متوجه خاصیت های این تگ بسیار کاربردی میشوید !!

در مثال زیر WHT عنوان نمایشی در مرورگر هست !!

آدرس و عنوان جهت نمایش در صفحه :






<a href="http://www.webhostingtalk.ir">WHT</a>




باز شدن لینک در صفحه ی جدید :






<a href="http://www.webhostingtalk.ir Target=_"blank">WHT</a>




لینک دادن به تصاویر:








<a href="http://www.webhostingtalk.ir"><img src="/image/adress ax.png"></a>






لینک دادن به آدرس ایمیل :





<a href="mailto:WHT@yahoo.com">rahe ertebati</a>






خب این قسمت هم تموم شد ! قسمت بعدی فونت ها هستند که ایشالا امشب یا فردا میزارم !!

موفق باشید !
boy_evil
January 21st, 2014, 20:26
قسمت چهارم : فونت ها




جهت تعیین نوع رنگ ,سایز باید از برچسب <font> استفاده کرد!



تعیین نوع فونت :



<font face= Tahoma> WHT </font>




سایز فونت :


<font/>وب هاستینگ تالک<font size=2>




رنگ فونت :



<font/>وب هاستینگ تالک<font color=red>




به صورت کلی :


<font/>وب هاستینگ تالک <font face=Tahoma size=2 color=red>
h.nanavar
January 21st, 2014, 23:11
با سلام!
یک سوال داشتم از شما دوست عزیز.
در FontFace اگر ما بخواهیم از فونت هایی به جز فونت های پیش فرض استفاده کنیم (به طور مثال از فونت byekan) روش کار را توضیح میفرمایید؟
با تشکر.
موفق باشید.
در ضمن اگر زحمت بکشید در کنار آموزش HTML از پایه در همین تاپیک تگ های HTML5 را هم معرفی کنید فکر میکنم که کار خوبی باشد. ممنون
AliFatehi
January 21st, 2014, 23:27
با سلام!
یک سوال داشتم از شما دوست عزیز.
در FontFace اگر ما بخواهیم از فونت هایی به جز فونت های پیش فرض استفاده کنیم (به طور مثال از فونت byekan) روش کار را توضیح میفرمایید؟
با تشکر.
موفق باشید.
در ضمن اگر زحمت بکشید در کنار آموزش HTML از پایه در همین تاپیک تگ های HTML5 را هم معرفی کنید فکر میکنم که کار خوبی باشد. ممنون

با اجازه از استارتر...

اصولا HTML به تنهایی قدرت خاصی نداره...البته تا جایی که بنده میدونم....
شما باید فایل css بسازین برای قالبتون و css یه زبان جداگانه اس که تو front page یا Dreamweaver خیلی کدهارو با زدن حرف اولش میاره...
مثلا font-family : B Yekan اینطوری فونت رو B Yekan میخونه و اگه بصورت font-family : B Yekan,Tahoma بزنید در صورتی که کاربر فونت B Yekan رو نداشته باشه Tahoma رو میاره...

امیدوارم مفید بوده باشه
rezaei1374
January 22nd, 2014, 00:31
با سلام!
یک سوال داشتم از شما دوست عزیز.
در FontFace اگر ما بخواهیم از فونت هایی به جز فونت های پیش فرض استفاده کنیم (به طور مثال از فونت byekan) روش کار را توضیح میفرمایید؟
با تشکر.
موفق باشید.


با اجازه استارتر
از لینک زیر آموزش کاملی در این مورد بخونید
شیوه صحیح پیوست فونت به صفحه وب در CSS3 به همراه 40 فونت فارسی اصلاح شده برای فایرفاکس 6 (http://www.wedesign.ir/css/css3-font-face-methods-and-optimized-font-firefox6)
boy_evil
January 22nd, 2014, 14:01
ممنون از دوستان که پاسخ این دوست عزیزمون رو دادند !

لطفا هر کسی که مطلب خاصی داره و مرتبط هست برای آموزش برام پ/خ کنه تا بعد از مرتب کردنش بزارم اینجا همه استفاده کنند !

دوستان در حال نوشتن ادامه ی آموزش هستم کمی سرم شلوغ هست به زودی آموزش های بعدی انتشار میدم !

موفق باشید !
pspasp
January 22nd, 2014, 14:05
سلام من فردا امتحان مبتنی بر وب دارم همینارو بخونم کافیه؟
namesis R
January 22nd, 2014, 22:47
سلام من فردا امتحان مبتنی بر وب دارم همینارو بخونم کافیه؟
:)) عزیز جک میگی ؟