آموزش قدم به قدم زبان html براي ساخت قالب وبلاگ

admin · 2010 , August 16

آموزش قدم به قدم زبان html براي ساخت قالب وبلاگ :

قصد داريم در اين تايپيك آموزشهايي را به صورت گام به گام و قدم به قدم در مورد زبان html براي ساخت قالب وبلاگ قرار دهيم .

در پايان هر تگ نتيجه ي استفاده از آن تگ بيان و نشان داده شده است ولي براي بعضي از تگ‌ها امكان نمايش نتيجه، در اينجا نيست .
منبع اين آموزشها وبلاگ http://www.ulfsoft.blogfa.com ميباشد .

admin · 2010 , August 16

جلسه ي اول

به نام خدا

HTML مخفف عبارت Hyper Text Markup Language مي‌باشد.
HTML يک text عادی و در حقيقت زبانی برای مارک کردن فايلهای text به يکديگر می باشد که آن را با TAG مشخص کرده و به صورت <tag name> می‌نويسند.

فرمت كلي يك صفحه HTML :
تگ HTML از دو تگ head و body تشكيل مي‌شود. شكل ساده يك صفحه به صورت زير مي‌باشد:

کد:

<html> 
<head> 
<title>عنوان صفحه</title> 
</head> 
<body> 
بدنه صفحه 
</body> 
</html>

نكته :
براي نوشتن كدهاي HTML به برنامه خاصي احتياج نيست. يعني مي‌توان كدها را داخل يك اديتور ساده مانند notepad نوشت. ولي من پيشنهاد مي‌كنم از يك نرم‌افزار مانند Macromedia Dreamweaver استفاده كنيد، چون احتمال اشتباه در كدنويسي به حداقل مي‌رسد و سرعت عمل به ميزان قابل توجهي افزايش مي‌يابد.

نكته :
بزرگ يا كوچك نوشتن نام تگ‌ها تاثيري در عملكرد ندارد. براي نظم دادن به كدها بهتر است تگ‌ها را هميشه به يك شكل بنويسيد، يا با حروف بزرگ يا با حروف كوچك.

admin · 2010 , August 16

جلسه ي دوم

تگ head :
همانطور كه از نام اين تگ پيداست، به عنوان سرصفحه از آن استفاده مي‌شود. تگ‌هايي كه داخل اين تگ قرار مي‌گيرند عبارتند از : title - meta - base و چند تگ ديگر كه در آينده خواهم گفت.

تگ title :
متني كه داخل اين تگ قرار مي‌گيرد در نوار عنوان (TitleBar) صفحه درج مي‌شود.

تگ meta :
از اين تگ براي اهداف متفاوتي مي‌توان استفاده كرد:

- تعيين Character Encoding صفحه :

کد:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

اين كد Character Encoding صفحه را بر روي utf-8 تنظيم مي‌كند.

- انتقال به صفحه‌اي ديگر (Forward) و يا بهنگام كردن صفحه (Refresh) در زمان معين :

کد:

<meta http-equiv="refresh" content="زمان بر حسب ثانيه">

<meta http-equiv="refresh" content="30">                                {Refresh حالت}
<meta http-equiv="refresh" content="30;www.google.com">      {Forward حالت}

- براي شناساندن كلمات كليدي به موتورهاي جستجو و توضيحاتي مختصر درباره آن صفحه :

کد:

<meta name="keyword" content="learn, html, tag, weblog">
 <meta name="description" content="This is HTML Learning">

تگ base :
از اين تگ براي مشخص كردن مبدا آدرس دهي از صفحات وب استفاده مي‌شود.

کد:

<base href="آدرس">
 <base href="http://www.blogfa.com/">

چون توي زمينه طراحي قالب خيلي به كار نمياد براي ما زياد مهم نيست.

نكته :
تگ‌ها در زبان HTML به دو صورت مي‌باشند، تگ با پايان مثل تگ title و تگ بي پايان مثل تگ meta

admin · 2010 , August 16

جلسه ي سوم

تگ body :
تگ body داراي چندين خاصيت (Attribute) مي‌باشد كه در زير به آنها اشاره مي‌كنم.

کد:

<body link="رنگ لينك"
alink="رنگ لينك فعال (Active Link)"
vlink="رنگ لينك مشاهده شده (Visited Link)"
bgcolor="رنگ پس زمينه (Background Color)" 
text="رنگ متن ساده"
background="آدرس تصوير پس زمينه صفحه"
topmargin="فاصله از بالاي صفحه" 
rightmargin="فاصله از سمت راست صفحه"
bottommargin="فاصله از پايين صفحه"
leftmargin="فاصله از سمت چپ صفحه"
dir="جهت صفحه (ltr يا rtl)">

در تگ body از اكثر تگ‌ها مي‌توان استفاده كرد كه من به تعدادي از آنها كه در زمينه طراحي قالب كاربرد دارند اشاره مي‌كنم.

admin · 2010 , August 16

جلسه ي چهارم

تگ font :
اين تگ براي مشخص كردن ويژگي‌هاي يك متن كاربرد دارد. خواص اين تگ را در پايين مي‌بينيد.

کد:

<font color="رنگ متن"
face="نام فونت"
size="اندازه متن"
title="ToolTip متن"
dir="">
</font>

<font color="red" size="4" face="Arial">خوش آمديد</font>

: نتيجه
خوش آمديد

نكته 1 :
در انتخاب فونت براي متن‌ها از فونت‌هاي خاص استفاده نكنيد. و سعي كنيد از فونت‌هايي استفاده كنيد كه عموميت بيشتري دارند. مانند : Tahoma, Tavval, Arial, ...

نكته 2 :
تگ font به ما اين امكان را مي‌دهد كه اندازه را نسبت به چيزي كه قبلا بوده تعيين كنيم. مثلا 2+ اندازه را به ميزان دو واحد افزايش مي‌دهد و 2- برعكس.

نكته 3 :
ToolTip متني است كه وقتي كه ماوس را بر روي متن نگه مي‌داريم در يك كادر زرد رنگ نمايش داده مي‌شود.

تگ Bold) b) :
متن داخل اين تگ به متن توپر تبديل مي‌شود.

کد:

<b>متن</b>
: نتيجه
متن

تگ Italic) i) :
متن داخل اين تگ به متن كج تبديل مي‌شود.

کد:

<i>متن</i>
: نتيجه
متن

تگ Underline) u) :
متن داخل اين تگ به متن زير خط دار تبديل مي‌شود.

کد:

<u>متن</u>
: نتيجه
متن

تگ Image) img) :
از اين تگ براي نمايش يك عكس استفاده مي‌كنيم. اين يك تگ بي پايان مي‌باشد.

کد:

<img align="نحوه قرارگيري عكس"
alt="قبل از لود شدن عكس اين متن نمايش داده مي‌شود"
border="ضخامت حاشيه عكس"
height="ارتفاع عكس"
width="پهناي عكس"
src="آدرس عكس مورد نظر"
dynsrc="AVI آدرس فايل تصويري مانند فايل‌هاي"
hspace="فاصله عكس از حاشيه چپ و راست"
vspace="فاصله عكس از حاشيه بالا و پايين"
dir=""
title="">

<img border="0" alt="glasses" title="Head" src="http://qsmile.com/qsimages/19.gif">
: نتيجه

نكته :
مقادير مجاز براي خاصيت align تگ img را در زير مي‌بينيد.
absbottom/absmiddle/baseline/bottom/left/middle/right/texttop/top

admin · 2010 , August 16

جلسه ي پنجم

تگ Anchor) a) :
از اين تگ براي ايجاد ابر لينك (Hyper Link) استفاده مي‌شود. به خواص آن در زير اشاره مي‌كنم.

کد:

<a href="آدرسي كه مي‌خواهيم به آن لينك بدهيم"
accesskey="كليد دسترسي سريع"
charset=""
dir=""
title="">متن لينك</a>

<a href="http://www.ulfsoft.blogfa.com/" title="ترفند‌هاي كامپيوتر">ULFSoft</a>
: نتيجه
[URL="http://www.ulfsoft.blogfa.com/"]ULFSoft[/URL]

http://www.ulfsoft.blogfa.com/

نكته 1 :
با نگه داشتن كليد Alt از صفحه كليد و زدن حرفي كه در خاصيت accesskey مشخص شده است، لينك عمل مي‌كند.

نكته 2 :
در صورتي كه بخواهيم يك عكس را به آدرسي لينك دهيم، مي‌بايست بين تگ a از تگ img استفاده كنيم.

کد:

<a href="http://www.ulfsoft.blogfa.com/" title="ترفند‌هاي كامپيوتر">
<img border="1" src="http://qsmile.com/qsimages/301.gif">
</a>
: نتيجه

نكته 3 :
براي ايجاد يك Email Link به صورت زير عمل مي‌كنيم.

کد:

<a href="mailto:someting@yoursite.ir">پست الكترونيك</a> 
: نتيجه
[EMAIL="someting@yoursite.ir"]پست الكترونيك [/EMAIL]

لينك داخلي (InterLink) :
براي ايجاد لينك داخلي دو راه وجود دارد.
1- استفاده از خاصيت name تگ‌ها :

کد:

<html>
<body>
<a name="up">به نام خدا</a>
...
<a href="#up">ابتداي صفحه</a>
</body>
</html>

2- استفاده از خاصيت id تگ‌ها :

کد:

<html>
<body>
<a href="#end">انتهاي صفحه</a>
...
<h2 id="end">پايان</h2>
</body>
</html>

admin · 2010 , August 16

جلسه ي ششم

در زير به چند تگ اشاره مي‌كنم كه براي فرمت كردن متن كاربرد دارند.

تگ Paragraph) p) :
از اين تگ براي ايجاد يك پاراگراف استفاده مي‌شود. متني كه داخل اين تگ نوشته مي‌شود از متن قبل و بعد خود با يك خط فاصله نوشته مي‌شود. خواص اين تگ align(left/center/right), dir, title تكراري مي‌باشند و آنها را توضيح دادم.

کد:

<p>some text</p>
: نتيجه

some text

تگ Break) br) :
اين تگ جزء تگ‌هاي بي پايان مي‌باشد و هر جايي كه قرار بگيرد، كلمه بعد را در خط بعدي قرار مي‌دهد. يعني همانند زدن كليد Enter در ويرايشگر‌هاي متن عمل مي‌كند.

کد:

text1<br>text2
: نتيجه
text1
text2

تگ NoBreak) nobr) :
اين تگ از شكسته شدن عباراتي كه داخل آن قرار مي‌گيرند جلوگيري مي‌كند و آنها را در يك خط نمايش مي‌دهد.

کد:

حالت عادي :
از اينكه به وبلاگ من سر زديد خيلي خيلي خوشحالم و اميدوارم از اين آموزش نهايت استفاده را ببريد و مرا از نظراتتون بي نصيب نذاريد

از اينكه به وبلاگ من سر زديد خيلي خيلي خوشحالم و اميدوارم از اين آموزش
<nobr>نهايت استفاده را ببريد و مرا از نظراتتون بي نصيب نذاريد</nobr>

: نتيجه
از اينكه به وبلاگ من سر زديد خيلي خيلي خوشحالم و اميدوارم از اين آموزش نهايت استفاده را ببريد و مرا از نظراتتون بي نصيب نذاريد

Heading ها :
در HTML شش heading وجود دارد. h1 تا h6. اين تگ‌ها داراي تنظيمات از پيش تعيين شده‌اي مي‌باشند كه متن داخلشان را تحت تاثير قرار مي‌دهد. h1 بزرگترين اندازه را دارد و h6 كوچكترين.خواص اين تگ‌ها (align, dir, title) هم تكراري مي‌باشد.

کد:

<h2>text</h2>
: نتيجه
text

<h5>text</h5>
: نتيجه
text

تگ Preposition) pre) :
متني كه داخل اين تگ نوشته مي‌شود به همان صورت در صفحه نمايش داده مي‌شود.
(خواص آن dir, title)

کد:

<pre>salam ...    be shoma
haletoun khoube?</pre>
: نتيجه
salam ...    be shoma
haletoun khoube?

تگ hr :
نمي‌دونم r، اول چيه ولي h، اول كلمه Horizontal به معني افقي. اين تگ يك خط افقي كه نمايي سه بعدي داره ايجاد مي‌كنه. در صورتي كه نخواهيم اين خط نماي سه بعدي داشته باشه از متد noshade اين تگ استفاده مي‌كنيم.

کد:

<hr>


<hr noshade color="blue" width="100px" size="5px">

اين تگ علاوه بر خواص بالا دو خاصيت ديگر (align, title) كه تكراري مي‌باشند نيز دارد.

admin · 2010 , August 16

جلسه ي هفتم

تگ Division) div) :
اين تگ يك بلوك ايجاد مي‌كند. خواص اين تگ هم تكراري مي‌باشد (align, dir, title). تگ div جزء پركاربردترين تگ‌ها مي‌باشد.

کد:

<div align="center">text</div>
: نتيجه
text

براي ايجاد توان(بالا نويس) و انديس (پايين نويس) از دو تگ sup و sub استفاده مي‌كنيم.
خواص اين تگ‌ها (dir, title) نيز تكراري مي‌باشند.

کد:

x<sup>2</sup>
: نتيجه
x2

x<sub>2</sub>
: نتيجه
x2

admin · 2010 , August 16

جلسه ي هشتم

در زبان HTML دو نوع ليست وجود دارد:
1- Ordered List : ليست منظم
2- Unordered List : ليست نامنظم

تگ Ordered List) ol) :
از اين تگ براي ايجاد ليست منظم استفاده مي‌شود. خواص اين تگ را در پايين توضيح مي‌دهم.

کد:

<ol type="نوع شماره‌گذاري را مشخص مي‌كند"
start="عدد يا حرفي را مشخص مي‌كند كه شماره‌گذاري از آن بايد شروع شود"
dir=""
title="">
<li>text</li>
<li>text</li>
</ol>

<ol type="1">
<li>Ali</li>
<li>Reza</li>
<li>Gholi</li>
<li>Mirza</li>
</ol>
: نتيجه
[LIST]
[*]Ali
[*]Reza
[*]Gholi
[*]Mirza
[/LIST]

نكته 1 :
مقادير مجاز براي خاصيت a/A/i/I/1 type مي‌باشند.
"type="1 : عددي
"type="a : حروف كوچك انگليسي
"type="A : حروف بزرگ انگليسي
"type="i : حروف كوچك يوناني
"type="I : حروف بزرگ يوناني
در صورتي كه مقداري براي اين خاصيت تعيين نكنيم ليست با عدد شماره‌گذاري خواهد شد.

نكته 2 :
تگ li داراي سه خاصيت به نام‌هاي dir, title, type مي‌باشد. مقادير مجاز براي خاصيت type اين تگ همان مقادير خاصيت type تگ ol مي‌باشند.

تگ Unordered List) ul) :
از اين تگ براي ايجاد ليست نامنظم استفاده مي‌شود. اين تگ نيز مانند تگ ol خاصيتي به نام type دارد ولي مقادير مجاز خاصيت type تگ ul متفاوت مي‌باشد (disc/square/circle) كه حالت پيش فرض آن disc مي‌باشد. خاصيت‌هاي ديگر اين تگ dir, title مي‌باشند.
مقادير خاصيت type مشخص كننده‌ي شكلي مي‌باشند كه در كنار هر آيتم قرار مي‌گيرد.
خواص تگ li موجود در تگ ul همانند تگ li موجود در تگ ol مي‌باشند. ولي مقادير مجاز براي خاصيت type اين تگ disc/square/circle مي‌باشند.

کد:

<ul>
<li>mood1</li>
<li>mood2</li>
</ul>
: نتيجه
[LIST]
[*]mood1
[*]mood2
[/LIST]

admin · 2010 , August 16

جلسه ي نهم

تگ table :
از اين تگ براي ايجاد جدول استفاده مي‌كنيم.
تگ tr براي ايجاد رديف و تگ td براي ايجاد سلول در داخل رديف استفاده مي‌شود.
كد زير يك جدول دو در دو ايجاد مي‌كند.

کد:

<table>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>

نكته :
بين تگ tr نبايد خالي باشد و اگر نخواهيم چيزي در يك سلول بنويسيم بايد از ;nbsp& استفاده كنيم. اين عبارت در واقع معادل كاراكتر فاصله مي‌باشد.

خواص تگ table در زير آمده است.

کد:

background="آدرس عكس پس زمينه"
bgcolor="رنگ پس زمينه"
border="ضخامت حاشيه جدول"
bordercolor="رنگ حاشيه جدول"
bordercolordark="رنگ قسمت تيره حاشيه"
bordercolorlight="رنگ قسمت روشن حاشيه"
cellpadding="فاصله از اطراف سلول"
cellspacing="فاصله بين دو سلول"
dir=""
height=""
width=""
hspace=""
vspace=""
title="" 
هر سلول نيز خواصي دارد.
colspan="تعداد سلول‌هاي در راستاي عمودي كه بايد در هم ادقام شوند"
rowspan="تعداد سلول‌هاي در راستاي افقي كه بايد در هم ادقام شوند"
valign="براي طراز عمودي به كار مي‌رود(baseline/bottom/middle/top)"
align=""
dir=""
height=""
width=""
title=""

نكته :
هر تعداد سلول را كه به وسيله‌ي colspan و rowspan در هم ادقام مي‌كنيم بايد به همان تعداد در همان جهت سلول حذف كنيم.

کد:

<table>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>

admin · 2010 , August 16

جلسه ي دهم

تگ marquee :
از اين تگ براي ايجاد متن متحرك استفاده مي‌شود.

کد:

<marquee behavior="alternate/scroll/slide نوع حركت"
scrollamount="ميزان حركت در هر بار"
scrolldelay="تاخير در حركت"
direction="up/right/down/left جهت حركت"
loop="دفعات تكرار"
align=""
bgcolor=""
dir=""
height=""
hspace=""
title=""
vspace=""
width="">

<marquee behavior="alternate" bgcolor="#CCCCCC" direction="right">
به وبلاگ ترفند‌هاي كامپيوتر خوش آمديد</marquee> 


<marquee bgcolor="#FFFFCC" direction="up" width="100px" scrollamount="2">
پيوند 1<br>
پيوند 2
</marquee>

توضيح مقادير مجاز خاصيت behavior
alternate : حركت نوساني
scroll : ورود و خروج متن به صورت كاراكتر به كاراكتر
slide : ورود و خروج متن به صورت آني

نكته 1 :
مقدار پيشفرض خاصيت "loop="-1 مي‌باشد، كه به معناي حركت بدون توقف مي‌باشد.

نكته 2 :
مقادير مجاز براي خاصيت align اين تگ با مقادير مجاز خاصيت align تگ img يكسان مي‌باشند.

آموزش قدم به قدم زبان html براي ساخت قالب وبلاگ

admin

Administrator

admin

Administrator

admin

Administrator

admin

Administrator

admin

Administrator

admin

Administrator

admin

Administrator

admin

Administrator

admin

Administrator

admin

Administrator

admin

Administrator