آموزش HTML به زبان ساده (گام به گام)
برنامه و نرم افزارهای لازم برای کار با html
شاید حقیقتا برای کار با کدهای html نیاز به هیچ برنامه ایی نداشته باشید و فقط داشتن یک ادیتور ساده مثل Notepad (که در ویندوز موجود است) کافی باشد. ولی من خودم ترجیح میدم کدهای html را در برنامه FrontPage که جزء مجموعه برنامه های آفیس (office) است بنویسم و یا از نرم افزار Macromedia Dreamweaver استفاده کنم.
بنابراین و قبل از شروع اگر مطلبی یا پیشنهادی دارید مطرح کنید.
تشکر کنندگان: .Mohammad. (02-19-2012)
پاسخ : آموزش HTML به زبان ساده (گام به گام)
لیست های تو در تو در html
به راحتی می توان با همین روش لیست های تو در تو ایجاد کرد. در مثال زیر نحوه نوشتن این گونه لیست ها کامل نشان داده شده است:
کد:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML dir=rtl>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>میکرورایانه</title>
<meta http-equiv="Content-Language" content="fa">
<meta name="description" content="سایتی سرشار از مقاله برای آموزش رایانه، سخت افزار،نرم افزار،رباتیک و اینترنت">
<meta name="keywords" content="سایت آموزش رایانه تجارت الکترونیک قطعات اجزا جانبی کامپیوتر سخت افزار نرم افزار">
</HEAD>
<body>
<b>معرفی سایت میکرورایانه</b><br>توضیح : </br>
</b>این متن به عنوان تست و برای مثالی از<font color="#FF0000"> لیست های تو در تو</font> نوشته شده است<br><br><br>
در حال حاضر
سایت میکرورایانه دارای بخش های اصلی زیر است:<br>
<ul>
<li> <font color="#0000FF">
<span style="background-color: #C0C0C0">بخش تالار گفتگو</span></font><br>
تالار گفتگوی سایت میکرورایانه فعلا دارای چهار تالار گفتگوی
مستقل است<br>
<ul>
<li><font color="#FF0000"><b>تالار اصلی</b></font><br>
<li> <font color="#FF0000"><b>تالار بورس</b></font><br>
<li><font color="#FF0000"><b>تالار بانوان</b></font><br>
تالار بانوان یک تالار کاملا مستقل بوده و فقط کاربران خانم به آن دسترسی دارند
<li><font color="#FF0000"><b>تالار ویژه</b></font><br>
<ul>
<li><font color="#FF00FF"><b>کتابخانه مجازی</b></font><br>
در این بخش کتابهای الکترونیکی به زبان فارسی قرار داده می شود.<br>
<li> <font color="#FF00FF"><b>تالار عکس های ویژه</b></font><br>
در این تالار عکس های جالب ، جذاب و ویژه قرار داده می شود. <br><br>
</ul>
</ul>
<li><font color="#0000FF">
<span style="background-color: #C0C0C0">بخش مقالات<br>
</span>
</font>بخش مقالات سایت فعلا در دودسته بندی اصلی ارائه شده که بعدا یک گروه مقالات الکترونیکی نیز به آن اضافه خواهد شد<br><br>
<li><font color="#0000FF">
<span style="background-color: #C0C0C0">بخش وبلاگها<br>
</span>
</font>لینک های وبلاگ های سایت میکرورایانه در هیچکدام از صفحات سایت معرفی نشده و نویسنده هر وبلاگ خودش اقدام به معرفی وبلاگ خویش می نماید<br><br>
<li><font color="#0000FF">
<span style="background-color: #C0C0C0">بخش صفحات ویژه داخلی</span></font><span style="background-color: #C0C0C0"><br>
</span>سایت میکرورایانه دارای ده ها صفحه ویژه داخلی است که برای گروههای ویژه (دانشجویان درس های مختلف نوشته شده) و معمولا سایر
بازیدکنندگان سایت به این صفحات دسترسی ندارند. این صفحات توسط اساتید دروس مدیریت می شوند و هر استاد به صفحات مخصوص
درس خود دسترسی دارد.<br><br>
</ul>
</body>
</html>
تشکر کنندگان: .Mohammad. (02-19-2012)
پاسخ : آموزش HTML به زبان ساده (گام به گام)
آموزش HTML به زبان ساده (گام به گام) HTML مخفف HyperText Markup Language است و به معني زباني براي نوشتن صفحات و سايت ها در اينترنت است.
اطلاعات مقدماتي در اين باره :
كد:
<html></html>
ایجاد سند html
كد:
<head></head>
اطلاعاتی از صفحه که داخل خود صفحه نشون داده نمی شوند مثل کدهای جاوا و استیل تو این تگ قرار میگیرند.
كد:
<body></body>
چیزایی که داخل صفحه نشون داده میشن تو این تگ قرار میگیرند.
حالا قسمت body ببينيم توش چه چيزهايي ميتونه قرار بگيره :
كد:
<body bgcolor=?>
رنگ زمینه ی صفحه
كد:
<body text=?>
رنگ پیش فرض متنهای صفحه
كد:
<body link=?>
رنگ پیش فرض لینکهای صفحه
كد:
<body vlink=?>
رنگ پیش فرض لینکهای بازدید شده
كد:
<body alink=?>
رنگ پیش فرض لینکها در هنگام کلیک
حالا براي گذاشتن لينك (پيوند) توي صفحه به اين شكل عمل ميكنيم :
كد:
<a target="_self" href="آدرس لینک" title="عنوان نمایش لینک برای tip">نام لینک</a>
يك جا هست نوشته target پيداش كنيد.
چيزهاي مختلفي ميشه روبروش قرار داد مثلا :
_self تو همون صفحه آدرس شما را بازميكند ،
_blank توي يك صفحه ي جديد آدرس شما را باز ميكند،
و _parent و _top و _search هستند ولي بكارتون زياد نمي آيد.
مثلا ميخواهيد لينكي بسازيد براي فرستادن ايميل به اين شكل عمل ميكنيد.
كد:
<a href="[برای مشاهده لینک ها ثبت نام کنید]<درس لیمیل" title="عنوان نمایش لینک برای tip">نام لینک</a>
دستور [برای مشاهده لینک ها ثبت نام کنید]<ه طور پيش فرض از روي ويندوز برنامه ي Outlook را باز ميكند ولي با توجه به تنظيم خودمون ياهو ميل را هم ميتواند باز كند.
براي ساختن لينكي كه ياهو مسنجر را باز كند و پيام براي شخصي بفرستيد هم به اين شكل عمل ميكنيد :
كد:
<a title="ياهو مسنجر" href = "ymsgr:sendim?یاهو آدی شما">پیام رسان یاهو</a>
روش ساخت مقصد تو صفحات با استفاده از لينك :
كد:
<a name="نام مقصد">محتویات</a>
نام مقصد بايد انگليسي باشه و با دستور زير ميتونيد فرا بخونيدش :
كد:
<a href="#نام مقصد">کلمه ی مورد نظر شما برای مقصد</a>
فقط بايد نام دو مقصدها يكي باشد.
تشکر کنندگان: .Mohammad. (02-19-2012)
پاسخ : آموزش HTML به زبان ساده (گام به گام)
آموزش HTML به زبان ساده (گام به گام) تگ های متنی :
وقتی متن تو اين تگ ها قرار بگيرند تگ اثر خودشو بر متن درونش می زاره.
كد:
<h۱></h۱>
متن به صورت بزرگ و پر رنگ برای عناوین كه اگر به جای ۱ عدد ۲ بزارین متن کوچکتر میشه و کوچکترینش عدد ۶ است.
كد:
<b></b>
ایجاد متن پر رنگ (bold)
كد:
<i></i>
ایجاد متن کج (italic)
كد:
<tt></tt>
ایجید حالت ماشین تحریر برای متن
كد:
<cite></cite>
ایجاد یک نقل قول که متن رو به صورت کج مینویسه
كد:
<em></em>
برای تاکیید کردن استفاده میشه که متن رو به صورت کج و پر رنگ مینویسه
كد:
<strong></strong>
برای تاکید که متن رو فقط پر رنگ میکنه
كد:
<font size=?></font>
تغییر اندزه متن که از ۱ تا ۷ میتونید بزارید
كد:
<font color=?></font>
تغییر رنگ متن
تگ های صفحه بندی :
تگ هايی كه برای محتويات صفحه به كار ميرود .
كد:
<p></p>
ایجاد یک پاراگراف با یک فاصله در اول و آخر پاراگراف
كد:
<p align="center يا right يا left">
تراز کردن محتویات داخل پاراگراف که میتونه چپ,راست,وسط
كد:
<br>
به قول خودمون نقطه سر خط
كد:
<blockquote></blockquote>
مثل پاراگراف میمونه ولی از کناره ها فاصله میندازه
كد:
<dl></dl>
یه لیست میسازه که نیاز به ۲ تا تگ پایین داره.مثلا موضوعات یک وبلاگ
كد:
<dt>
عنوان لیست
كد:
<dd>
محتوای لیست
كد:
<ol></ol>
ساخت یک لیست شماره دار که نیاز به تگ زیر داره
كد:
<li></li>
ساخت یک آیتم برای لیستها که داخل تگ بالا و پایین استفاده میشه
كد:
<ul></ul>
ساخت یک لیست نشانه دار که نیاز به تگ بالا داره
كد:
<div></div>
اینم برای استفاده با استیل شیتها استفاده میشه
تشکر کنندگان: .Mohammad. (02-19-2012)
پاسخ : آموزش HTML به زبان ساده (گام به گام)
براي گذاشتن صدا در صفحه ي خود از اين كد استفاده كنيد :
كد:
<bgsound src="آدرس موزیک" loop="-1">
اگر مقدار loop برابر -1 بشه آهنگ دائم پخش ميشه و اگر هر چيز ديگه باشه به اون تعداد آهنگ پخش ميشه.
براي گذاشتن فلش در صفحه از دستور زير استفاده كنيد :
كد:
<embed src="آدرس فايل فلش" quality="high" bgcolor="پس زمينه ي فلش" width="عرض فلش" height="ارتفاع فلش" name="نام(اختياري)" align="محل قرار گيري" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">
فقط اون محل قرار گيري به جاش ميتونيد :
middle : وسط ، bottom : پايين و top : بالا بگزاريد.
براي راست به چپ شدن كل صفحتون از اين كد استفاده كنيد :
كد:
<html dir="rtl">
اگر مقدار dir برابر ltr بشه صفحتون چپ به راست ميشه.
براي ايجاد كردن يك خط افقي هم ميتونيد از اين دستور استفاده كنيد :
كد:
<hr size="اندازه خط افقی" width="عرض خط افقی" noshade>
اگر noshade نباشه سايه براي خط ايجاد ميكند.
براي گذاشتن توصير از دستور زير استفاده كنيد :
كد:
<img src="آدرس تصوير" align="محل قرار گيري تصوير" border="اندازه ي كادر تصوير" width="عرض تصوير" height="ارتفاع تصوير">
اندازه ي كادر تصوير بايد به جاش عدد بگذاريد فقط اگر صفر باشد تصوير بدون كادر ميشود .
به جاي محل قرار گيري تصوير ميتوانيد سه كلمه ي :
left : چپ ، center : مركز و right : راست بگزاريد.
ارتفاع تصوير و عرض تصوير انتخابي اگر نگزاريد به طور پيش فرض اندازه ي تصوير پيدا ميشود فقط بايد width و height را برداريد.
براي گذاشتن جدول هم ميتوانيد از كد زير استفاده كنيد.
كد:
<table border=اندازه حاشیه جدول cellspacing=(اندازه فاصله بین سلولهای جدول (فاصله ی خارجی cellpadding=اندازه فاصله بین حاشیه یک سلول و محتویات سلول width=عرض یک جدول ></table>
ساخت جدول
كد:
<tr></tr>
ساخت یک رديف برای جدول
كد:
<div></div>
ساخت یک سلول عمودی برای جدول
كد:
<th></th>
ساخت يک خونه براي جدول
البته توي div و tr و td پارامتر align براي جاي نوشته وجود داره كه ميتوانيد مقدارش را برابر left : چپ ، center : مركز و right : راست كنيد.
تشکر کنندگان: .Mohammad. (02-19-2012)
پاسخ : آموزش HTML به زبان ساده (گام به گام)
css مخفف Cascade Style Sheets است و به اين صورت ميتوانيم آن را بوجود بياريم :
دستوراتمان بين دو تگ <style> و </style> قرار بگيرند كه ما اين را فقط براي يك صفحه استفاده مي كنيم.
يك فايل ايجاد كنيم و دستوراتمان را در آن بريزيم و به نام هرچي خواستيم فقط type آن را .css قرار دهيم و به دو صورت ميتوانيم آن را صدا بزنيم :
اين دستور را بدهيم فقط زير تگ <head> كه مخصوص اينترنت اكسپلورر:
كد:
<style type="text/css" media="screen">
@import url( آدرس فايل );
</style>
يا با اين دستور فقط بالاي تگ <head> :
كد:
<link rel="stylesheet" href="آدرس فايل" type="text/css" />
بيشتر تگ ها دو تا پارامتري تو خودشون دارند به نام style و كلاس كه بايد براي class متغييري تعريف كنيم و براي id هم بايد متغيير تعريف كنيم. بهش نام اون متغيير را بديم و اين شكلي تو فايل css مينويسيم فقط اول هر متغيير با # يا . شروع ميشه و تگ هايي هم كه مال خود زبان اچ تي ام ال هستند براي نوشتن style آن نياز به گذاشتن دو علامت # و . نيست به اين صورت براي تگ <br> :
كد:
<style>br{دستورات}</style>
حالا براي تگ br هرچي تعريف كرده باشيم به اون صورت اجرا ميشه براي اضافه كردن متغيير به اين صورت عميل ميكنيم :
كد:
.name{functions}
يا
كد:
#name{functions}
فقط به جاي name نام متغيير و به جاي functions دستورات را قرار دهيد و پس از پايان هر دستور ; قرار دهيد و مقدار هر چيز را كه خواستيد بدهيد با : بايد برابر كنيد .
فقط براي id # به كار ميبريم و براي class . را به كار ميبريم.
style هم دستور را تو خودش ميديم بدون گذاشتن متغيير اين شكلي :
كد:
style="دستور"
تشکر کنندگان: .Mohammad. (02-19-2012)
پاسخ : آموزش HTML به زبان ساده (گام به گام)
حالا بريم سراغ آموزش نوشتن دستورات :
خصوصیتهای پس زمینه (Background)
background-color : که میتونید باهاش رنگ پس زمینه رو تعریف کنید که در حالت پیش فرض transparent است
background-image : که میتونید یک تصویر رو به عنوان پس زمینه انتخاب کنید. مثال :(background-image : url(bg.jpg
background-repeat : توسط این خصوصیت نحوه تکرار شدن یک تصویر پس زمینه رو تعیین میکنید که میتونه یکی از حالتهای زیر باشه :
» repeat : که هی تصویر تکرار میشه
» repeat-x : که تصویر رو در راستای افقی تکرار میکنه
» repeat-y : که تصویر رو در راستای عمودی تکرار میکنه
» no-repeat : که تصویر فقط یک بار نمایش داده میشه و تکرار نخواهد شد
background-attachment : این خصوصیت میتونه scroll یا fixed باشه و تعیین میکنه که اگر کاربر اسکرول بار را به بالا یا پایین ببره آیا تصویر پس زمینه هم حرکت کنه یه ثابت باشه, که در حالت fixed ثابت میمونه و در حالت scroll حرکت میکنه. مثال : background-attachment : fixed
background-position : از این خصوصیت میشه برای تنظیم مکان تصویر پس زمینه استفاده کرد که هم میتونید بهش عدد بدید هم از کلماتی مثل top , bottom برای مقدار دهی استفاده کنید. مثال : background-position : ۱۰۰ ۶۰ که ۱۰۰ فاصله از بالا (top) و ۶۰ فاصله از سمت چپ (left) میشه
خصوصیتهای حاشیه (Border)
border-style : این خصوصیت تشکیل شده از ۴ قسمت border-top-style , border-right-style , border-bottom-style , border-left-style که هر قسمت رو میشه توسط یکی از ۹ گزینه none , dotted , dashed , solid , double , groove , ridge , inset , outset مقدار دهی کرد . اگر میخواین کل حاشیه یک شکل باشه نیاز نیست هر ۴ تا قسمت رو بنویسید و میشه به همون border-style یه مقدار داد
» none : بدون حاشیه
» solid : حاشیه با خط ساده
» dashed : حاشیه خط چین
» dotted : حاشیه نقطه چین
» double : حاشیه دو خطه
» groove : که به نظر میرسه حاشیه داخل صفحه حک شده
» ridge : که به نظر میرسه حاشیه بر جسته شده
» inset : حاشیه فرو رفته میشه
» outset : حاشیه بر آمده میشه
border-color : اینم برای رنگ دادن به حاشیه استفاده میشه که هم میتونید به کل حاشیتون یک رنگ بدین هم با استفاده از ۴ قسمت border-top-color , border-left-color , border-right-color , border-bottom-color به هر قسمت رنگ جدا بدین
border-width : این خصوصیت برای تعیین ضخامت حاشیه استفاده میشه که هم میتونید عدد بهش بدین مثل ۵px هم میتونید از کلمات thin (نازک) , medium (متوسط) , thick (کلفت) استفاده کنید.مثل بقیه از border-top-width , border-left-width , border-right-width , border-bottom-width میتونید استفاده کنید.
اگر هر چي كه كلاس براي خودش داره بين دوتا تگ كه كلاس داره باشه براي نوشتن استيلش به صورت زير عمل ميكنيم :
كد:
.FirstClass .secondClass {
Content
}
ّFirstClass مال نام تگ مون است كه اون توش تگ دوممون قرار داره و SecondClass بايد نام تگ دوممون قرار بديم و Content هم به محتويات تغييرش بدهيم.
تشکر کنندگان: .Mohammad. (02-19-2012)
پاسخ : آموزش HTML به زبان ساده (گام به گام)
حالا بريم سراغ درس جایگذاری عناصر
position : این خصوصیت برای تعیین مرجع یک عنصر به کار میره و در حالت عادی مقدار این گزینه static است.حالا این منبع یعنی چی؟ فرض کنید یک div داریم به اسم k۱ و داخل اون یه div دیگه داریم به اسم k۲. حالا k۱ مرجع k۲ است و موقعیت k۲ نسبت به k۱ محاسبه میشه.مقدار position میتونه static , fixed , relative , absolute باشه.static موقعی استفاده میشه که عنصر ما مرجع نداشته باشه و relative موقعی که مرجع ما static باشه استفاده میشه و absolute در هر دو مورد ولی یه فرقی با هم دارن.اگر عنصر شما absolute باشه و مرجع شما static موقعیت اون نسبت به کل صفحه محاسبه میشه ولی اگر عنصر absolute باشه و مرجع relative موقعیت عنصر نسبت به مرجع محاسبه میشه (منظور از موقعیت همون top و left است)
top , left , bottom , right : این خصوصیات برای تعیین مکان جسم به کار میرن.مثلا اگر top برابر ۱۰۰ باشه جسم ما از نقطه مرجع خودش ۱۰۰ پیکسل پایین میاد و بقیه هم به همین شکل
z-index : z-index برای تعیین اولویت نمایش عنصرهای صفحه استفاده میشه.مثلا شما ۳ absolute div در صفحه دارین که میخواین یکی بر روی دیگری نشون داده بشه.به هر div یک z-index میدیم مثلا : ۱ و ۲ و ۳ .div که دارای z-index ۳ باشه بر روی بقیه div ها نشون داده میشه
padding و margin : اول ببینیم فرق این ۲ تا چیه.padding و margin هر دو برای فاصله گذاری استفاده میشن ولی padding فاصله درونی رو تعیین میکنه و margin فاصله بیرونی رو.مثلا یک div داریم که یک حاشیه داره و داخلش یه سزی متن نوشته شده.برای اینکه بین حاشیه div و متن یه فاصله ایجاد کنیم باید از padding استفاده کنیم(یعنی همون فاصله درونی) و برای اینکه بین حاشیه و اجزای بیرون div یه فاصله ایجاد کنیم از margin استفاده میکنیم که این ۲ تا هم مثل بقیه میتونن همینطوری استفاده بشن هم میشه هر طرف(top , left , right , bottom) رو جدا استفاده کرد
» padding-right , padding-left ,padding-bottom , padding-top
» margin-right , margin-left , margin-botoom , margin-top
خصوصیات متن (text)
font-family : نام فونت رو تعیین میکنه مثلا arial . توجه کنید که فونتی که استفاده میکنید باید حتما تو همه کامپیوتر ها نصب باشه وگر نه امکان دیدن متن با اون فونت وجود نداره.بنابر این سعی کنید از فونتایی استفاده کنید اغلب تو همه کامپیوترها هست
font-size : اندازه متن رو تعیین میکنه که به ۲ روش میتونید مقدار دهی کنید.با استفاده از عدد مثلا ۱۲pt یا با استفاده از مقادیر از پیش تعیین شده که ۷ تا هستن
» xx-small , x-small , small , medium , large , x-large , xx-large
font-style : که در حالت عتدی normal است و یا میتونه italic(کج نویسی) باشه
font-weight : این خصوصیت برای پر رنگ یا کمرنگ کردن یک متن به کار میره که هم میتونید عدد بدید هم کلمات از پیش تعیین شده به کار ببرین
» normal (معمولی) , bold (پر رنگ) , bolder (پر رنگتر) , lighter (کمرنگ)
» (کم رنگ ترین) ۱۰۰ , ۲۰۰ , ۳۰۰ , ۴۰۰ , ۵۰۰ , ۶۰۰ , ۷۰۰ , ۸۰۰ , ۹۰۰ (پر رنگ ترین)
text-align : که میتونه مقادیر left , right , center و justify (متن رو طوری میکشه که تمام عرض خط رو پر کنه) باشه
direction : این هم که میتونه یا rtl (راست به چپ) باشه یا ltr (چپ به راست) که برای فارسی از rtl استفاده میکنیم
text-decoration : که معمولا برای پاک کردن زیرخط لینکها استفاده میشه و میتونه ۴ مقدار زیر باشه
» underline : زیر متن خط میکشه
» overline : بالای متن خط میکشه
» line-through : وسط متن خط میکشه
text-indent : برای فاصله گذاری اول یک متن یا پاراگراف به کار میره.مثلا اگر برابر ۲۰ باشه.خط اول متن شما ۲۰ پیکسل تا حاشیه فاصله میگیره
text-transform : که شاید کمتر دیده باشین چون تو زبان فارسی کاربرد نداره
» lowercase : متن رو با حروف کوچک مینویسه
» uppercase : متن رو با حروف بزرگ مینویسه
» capitalize : حرف اول هر متن رو با حرف بزرگ مینویسه
در حال حاضر 1 کاربر در حال مشاهده این موضوع است. (0 کاربران و 1 مهمان ها)
مجوز های ارسال و ویرایش
آدرس لینک بک
درباره لینک بک ها
پاسخ با نقل قول
علاقه مندی ها (Bookmarks)