آموزش html [ آموزش ] - انجمن های تفریحی ، سرگرمی ، رمان . کتاب . گرافیک ، عکس

**iman** · ۱۳۸۹-۰۶-۳۰

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

اگر مشتری دائم این تاپیک باشید می تونید با دنبال کردن این تاپیک یاد بگیرید یک سایت شخصی ساده برای خودتون طراحی کنید و این مورد رو شاید خیلی هاتون دوست داشته باشید

پس این تاپیک رو دنبال کنید و اگر مشکی داشتید در تاپیک پرسش پاسخ بیان کنید و لطفا فضای این تاپیک رو با ارسال های اسپم خراب نکنید تا بیشتر از فضای آموزشی این تاپیک استفاده بشه

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

*********************

لینک تاپیک پرسش و پاسخ : [برای مشاهده لینک ها و یا عکس ها باید عضو سایت باشید . برای عضویت اینجا کلیک نمایید]

*********************

**iman** · ۱۳۸۹-۰۶-۳۰

در ابتدا می خوایم بدونیم html چی هست ؟

HTML سرواژه*ٔ HyperText Markup Language و به معنای « زبان نشانه*گذاری ابرمتن » است که البته برخی آنرا « زبان علامت*گذاری فرامتن » ترجمه کرده*اند.

اچ*تی*ام*ال، سنگِ*بنای وب است؛ یک زبان رایانه*ای که برای تدوین قالب و طراحی صفحات وب به کار برده می*شود. دستورالعملهای این زبان، برچسب (Tag) نام دارند که محتوای یک صفحهٔ وب، به وسیلهٔ آنها، نشانه*گذاری شده و بدین*ترتیب، نحوهٔ نمایش آن صفحه برای مرورگرهای وِب، توصیف می*شود. هر یک از برچسبهای اچ*تی*ام*ال، معنا و مفهوم خاصی دارند و تأثیر مشخصی بر محتوا می*گذارند؛ مثلاً برچسبهایی برای تغییر شکل ظاهری متن، نظیر درشت* و ضخیم کردن یک کلمه یا برقراری پیوند (Link) به صفحات دیگر در اچ*تی*ام*ال تعریف شده*اند. یک سند اچ*تی*ام*ال، یک پرونده مبتنی بر متن (Text–based) است که معمولاً با پسوند .htm یا .html نامگذاری شده و محتویات آن از برچسبهای اچ*تی*ام*ال تشکیل می*شود.

***********************************

حالا ما می خوایم بدونیم یک صفحه html چطوری ساخته میشه ؟

اگر در حال کار با ویندوز هستید برنامه note pad را اجرا کنید. متن زیر را تایپ کنید.

کد:

                 <html>
 <head>
<title>title of page </title>
</head>
<body>
This is my 98patogh.<b> This text is bold </b>
</body>
</html>

فایل را تحت عنوان "mypage.htm"ذخیره کنید.

مرورگر اینترنت خود را باز کنید، از منوی فایل گزینه "open" یا "open page" را انتخاب کنید. یک جعبه گفتگو ظاهر خواهد شد .گزینه "brows" یا "choose file" را انتخاب کنید و در مکانی که فایل HTML خود را ساخته اید قرار گیرید. آن را انتخاب کنید و روی گزینه "open" کلیک کنید.حالا شما یک آدرس در جعبه گفتگوی خود مشاهده خواهید کرد. بعنوان مثال "C:\mypage.html" گزینه ok را کلیک کنید و مرورگر صفحه را به شما نشان خواهد داد.

***********************************

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

<html>

این برچسب نشون میده که فایل html در حال شروع شدن هست

***********************************

<head>

این برجسب کارش اینه که نشون بده هیدر شما شروع شده

و بعد این برچسب شما هر تغییری یا هر کدی بزارید در صفحه نشون داده میشه اما بین برچسب <html> تا برچسب <head> هر چی دلتون می خواد بنویسید هیچ چیزی در صفه نشون داده نمیشه چون کار این برچسب همینه که همه چیز رو بینش جا بده بدون اعمال تغییرات

***********************************

<title>title of page </title>

به بالای صفحه همین سایت نگاه کنید چه نوشته ؟؟؟

حتما نوشته پاتوق تفریحی علمی آموزشی رو می بینید نه ؟؟؟

هر چیزی که بین این دو برچسب یا تگ نوشته بشه اسم صفحه اینترنتی ماست برای امتحان یک بار نوشته title of page رو به اسم و فامیل خودتون تغییر بدید و بعد اون صفحه رو ذخیره کنید حالا صفحه اینترنتی رو رفرش بدید ببینید که چه راحت اسم صفحه تغییر کرد

***********************************

</head>

و اما این برچسب نشون میده که هیدر در انتها می باشد

***********************************

<body>

متنی که در مرورگر نشان داده خواهد شد ، متنی است که بین برچسب <body> و برچسب </body> نشان داده خواهد شد.

***********************************

</html>

این برچسب نشون میده که فایل html در حال انتها هست

**iman** · ۱۳۸۹-۰۷-۱

خوب توی آموزش امروز می خوام برچسب های پایه و چند تا برچسب کاربردی رو براتون توضیح بدم

سر تیتر ها

سر تیترها با برچسب های <h1>تا<h6>معرفی می شوند . <h1>بیانگر بزرگترین سرتیتر و<h6> بیانگر کوچکترین سر تیتر است . HTML بطور خودکار فضای خالی اضافی به قبل و بعد از سر تیترها اضافه می کند.

کد:

<h1> This is a heading </h1>
<h2> This is a heading </h2>
<h3> This is a heading </h3>
<h4> This is a heading </h4>
<h5> This is a heading </h5>
<h6> This is a heading </h6>

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

کد:

<b> This text is bold </b>

به جاش این کد رو بزارید

کد:

<h1> This is a heading </h1>

حالا فایل رو ذخیره کنید و در مرورگر دوباره به تماشای اون بشینید می بینید که نوشته پررنگی دارید

حالا همون کد بالا رو عدد های 1 رو به عدد 4 تبدیل کنید می بینید که نوشتتون خیلی پررنگ تر شد

**************************************************

پاراگراف ها

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

کد:

<p> This is a paragraph </p>
<p> This is another paragraph </p>

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

شما

کدهای زیر رو در فایل mypage حذف کنید

کد:

This is my 98patogh.<h4> This is a heading </h4>

و به جاش کد زیر رو بزارید

کد:

<p> This is another paragraph </p>

فایل رو ذخیره کنید و صفحه رو در مروگر رفرش بدید چی می بینید ؟؟؟ یه نوشته به این سبک " This is another paragraph " درسته ؟؟؟؟

خوب همین کد رو دوباره حذف کنید و این کد رو بزارید

کد:

<p><h3>This is another paragraph </h3></p>

فایل رو ذخیره کنید و صفحه رو در مرورگر رفرش بدید حتما می بینید که نوشته شما پررنگتر و بزرگتر شد

************************************************** ********

پرش به خط بعد

برچسب <br> هنگامی استفاده می شود که بخواهیم یک خط را پایان دهیم اما نمی خواهیم یک پاراگراف جدید را آغاز کنیم.برچسب <br> شما را از هر جا که قرار دارید به یک خط پایین تر می برد. برچسب <br> یک برچسب تکی است و هیچ برچسب پایانی ندارد.

شاید این برچسب از تنهای برچسب های html باشه که فقط تک برچسبی هست و پایانی نداره

با یه مثال به شما نشون میدیم که کار این برچسب چیه

کد زیر رو از فایل mypage حذف کنید

کد:

<p><h3>This is another paragraph </h3></p>

و به جاش کد زیر رو بزارید

کد:

<p><b>This is another paragraph </b><br>ma omadim khate bad </p>

حالا فایل رو ذخیره کنید و صفحه رو در مرورگر رفرش بدید نتیجه رو مشاهده کردید ؟؟؟

نوشته ma omadim khate bad منتقل شده به خط بعد

ما این کارو با برچسب <br> بین دو برچسب دیگه انجام دادیم

شما می تونید برچسب <br> بین هر بچسبی قرار بدید اما این یکی از راههای فاصله بود زیاد بهش اکتفا نکنید چیزهای بهتری یاد بگیرید بهتر می تونید مانور بدین روی فایلتون

**iman** · ۱۳۸۹-۰۷-۱

دوستانی که با برچسب های پایه آشنا شدن و باهاش کار کردند و نتایج رو دیدن

در تاپیک پرسش پاسخ اعلام کنند

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

**iman** · ۱۳۸۹-۰۷-۲

توی این جلسه می خوام با انواع کدهای قرار دادن عکس در یک فایل html آشنا بشیمو بدونیم از چند طریق میشه یه عکس رو در یک فایل html قرار داد

برای شروع اول باید بدونیم div چی هست

برچسب <div> برای مشخص کردن یک بخش و یا قسمت داخل صفحه استفاده می شود.

به مد زیر دقت کنید این ماهیت اصلی یک div هست

کد:

<div align="center"><div/>

بین تگ آغازی و تگ پایانی هر چی بنویسید شما در وسط نمایش داده میشه

و اگر center عوض کنید در سمت چپ یا راست نمایش داده خواهد شد

*****************************************

به کد زیر به خوبی دقت کنید

کد:

<div style="text-align: center;"><img src="http://www.98patogh.com/uploads/posts/2010-08/1281301783_header.jpg" alt="98patogh" width="960" height="138" /></div>

خوب در کد بالا تگ های زیادی به کار رفته که یکی و یکی به توضیح اون می پردازم

کد:

<div style="text-align: center;">

این قسمت یا این تگ دو چیز رو دستور میده

اول دستور میده که ما موقعیت صفحه رو با div تنظیم می کنیم شروع شده و اون رو با با div نشون میشده

و در ادامه نشون میده که تمام نوشته هایی که بین

<div>

و

<div/>

باشه در وسط صفحه هستند این دستور رو با center میده اگر شما center رو به left تغییر بدید تمام نوشته های بین <div> و <div/> در نتیجه کار که صفحه mypage باشه به سمت چپ میاد و اگر به right تغییر بدید همه نوشته ها بین <div> و <div/> به سمت راست منقل میشه

*****************************************

حالا به کد پایینی خوب نگاه کنید

کد:

<img style="border: 0pt none;" src="http://www.98patogh.com/engine/skins/images/logos.jpg" alt="98patogh" width="960" height="138" />

img style

نشون میده که ما می خوام یک عکس رو با یه استایل سفارشی شده نمایش بدیم اگر ما استایل رو سفارشی شده نمی خواستیم img style به img src تغییر می کرد و اما کد زیر

کد:

<img style="border: 0pt none;" src="http://www.98patogh.com/engine/skins/images/logos.jpg" alt="98patogh" width="960" height="138" />

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

کد:

<img src="http://www.98patogh.com/uploads/posts/2010-08/1281301783_header.jpg"  />

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

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

کد:

src="http://www.98patogh.com/uploads/posts/2010-08/1281301783_header.jpg

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

باید لینک عکس خودتون رو با قسمت زیر عوض کنید
[برای مشاهده لینک ها و یا عکس ها باید عضو سایت باشید . برای عضویت اینجا کلیک نمایید]

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

و اما alt یعنی چی ؟ alt وظیفه داره که در زمانی که برای عکس ما مشکلی پیش میاد مثلا سروری که عکس رو توش آپلود کردیم مشکل دار میشه یا مثلا عکسمون ف+یلت/ر میشه و یا هر چیز مثل این به جای عکس نمایش پیدا کنه شما می تونید به جای 98patogh در کد بالا هر چیزی که دوست دارید بنویسید و چیزی که شما می نویسید میشه alt تصویر شما یا نوشته زیر عکس شما

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

طول و ارتفاع تصویر شما هم توسط دو دستور زیر مشخص میشه

کد:

 width="960" height="138"

این دستور یک قابلیت داره فرض کنید عکس شما طول و ارتفاع زیادی داشته باشه و شما بخوان در فایل mypage اون رو کوچیک تر نمایش بدید می تونید با تنظیم عدد 960 در 138 می تونید مقدار رو به دلخواه خودتون تغییر بدید

**************************************************

تمرینات :

فایل mypage.html رو باز کنید

نوشته های بین <body> و </body> هر چی هست رو پاک کنید و به جاش کد زیر رو بزارید

کد:

<div style="text-align: center;"><img src="http://www.98patogh.com/uploads/posts/2010-08/1281301783_header.jpg" alt="98patogh" width="960" height="138" /></div>

]

خوب حالا فایل رو ذخیره کنید و نتیجه رو با رفرش صفحه در مرورگر مشاهده کنید ؟؟ یه عکس باید ببینید درسته ؟؟

1-

این عکس وسط صفحه هست

و حالا center رو به left تغییر بدید و فایل رو ذخیره کنید نتیجه در مرورگر باید اینطور باشه که عکس به سمت چپ صفحه رفته باشه و حالا left رو به right تغییر بدید و فایل رو ذخیره کنید نتیجه در مرورگر اینه که عکس به سمت راست رفته درسته ؟؟؟

2 -

یه عکس کوچیک در کامپیوتر خود پیدا کنید در آپلود سنتر همین سایت آپلود کنید و بعد لینک مستقیم عکس رو به جای آدرس [برای مشاهده لینک ها و یا عکس ها باید عضو سایت باشید . برای عضویت اینجا کلیک نمایید] بزارید و فایل رو ذخیره کنید چه می بینید ؟؟؟ حتما می بینید که عکس شما تغییر کرده

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

این مورد به دلیل این هست که هنوز طول و ارتفاع عکس قبلی روی این عکس هست حالا شما لازمه طول و ارتفاع عکسی که آپلود کردید رو به جای عدد های width="960" height="138" بزارید فایل رو ذخیره کنید و نتیجه رو در مرورگر ببینید ؟؟؟ حتما می بینید که عکس شما به حالت طبیعی برگشت و دیگه مشکل ریسایز نداره

3 - نوشته 98patogh رو در alt="98patogh" به in hast ax man تغییر بدید و بعد لینک عکس رو مشکل دار کنید مثلا لینک زیر لینک عکس سالم هست

[برای مشاهده لینک ها و یا عکس ها باید عضو سایت باشید . برای عضویت اینجا کلیک نمایید]

شما یکمش رو حذف کنید مثلا اینطوریش کنید

[برای مشاهده لینک ها و یا عکس ها باید عضو سایت باشید . برای عضویت اینجا کلیک نمایید]

خوب حالا لینک عکس شما مشکل دار شده در این مرحله فایل و ذخیره کنید و نتیجه رو در مرورگر ببینید چه اتفاقی افتاده عکس شما حذف شده اما نوشته in hast ax man رو می بینید اینم وظیفه Alt بود که در بالا براتون توضیح دادم

**iman** · ۱۳۸۹-۰۷-۲

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

و اینکه اگر تا اینجای آموزش مشکلی دارید یا سوالی داشتید در تاپیک پرسش پاسخ بفرمایید

**iman** · ۱۳۸۹-۰۷-۴

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

منظور از لینک دار این هست که با کلیک روی عکس کاربر به سایت خاصی یا به آدرس اینترنتی که شما از قبل مشخص کرده اید منتقل بشه

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

کد:

<a href="http://www.98patogh.com/" target="_top"></a>

در این قسمت یک تیکه اضافی می بینید درسته ؟؟؟ این قسمت رو می گم target="_top می دونید وظیفه این قسمت چیه ؟؟؟

وظیفه این قسمت اینه که به نشون میده صفحه اینترنتی که قرار باز بشه چطوری باز میشه ؟

چند حالت داریم ؟؟؟

top = این نشون میده که با کلیک روی عکس آدرسی که ما مشخص کردیم در همون صفحه باز میشه

self = این نشون میده که با کیک روی عکس آدرسی که ما مشخص کردیم در همون فریم باز شه منظور از فریم رو بعدا خواهید فهمید

blank = این نشون میده که با کیک روی عکس آدرسی که ما مشخص کردیم در یک صفحه جدید باز شه

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

و قسمت بعدی که اضافه میشه و وظیفش اینه که باعث میشه دور عکس ما کادر آبی رنگی اضافه نشه و در اصل حاشیه عکس ما رو مقابل 0 قرار میده ( در تمرینات می تونید بفهمید وظیفه این قسمت چیه

کد:

border="0"

حالا باید بدونیم دو کد بالا رو در کجای کد اصلی اضافه کنیم که درست به ما جواب بده و عکس مارو لینک دار کنه

به کد زیر دقت کنید

کد:

<body><div style="text-align: center;"><a href="http://www.98patogh.com/" target="_top"><img src="http://www.98patogh.com/uploads/posts/2010-08/1281301783_header.jpg" alt="98patogh" border="0" width="960" height="138" /></a></div> </body>

چه چیزهایی بین <body>و </body> ما اضافه شده علاوه بر کد نمایش عکس ؟؟؟؟

بله می بینید که قبل از دستور آدرس عکس لینکی که باید با کلیک روی عکس به اون ارجاع داده بشیم رو قرار دادیم

کد:

<a href="http://www.98patogh.com/" target="_top"><img src="http://www.98patogh.com/uploads/posts/2010-08/1281301783_header.jpg"

و می بینید که در قسمت بعدی قبل از دستورهای طول و ارتفاع عکس دستور border ز قرار دادیم

کد:

alt="98patogh" border="0" width="960" height="138"

********************

تمرینات

هر چی بین <body>و </body> هست پاک کنید و به جاش کد زیر رو بزارید

کد:

<div style="text-align: center;"><a href="http://www.98patogh.com/" target="_top"><img src="http://www.98patogh.com/uploads/posts/2010-08/1281301783_header.jpg" alt="98patogh" border="0" width="960" height="138" /></a></div>

خوب حالا فایل رو ذخیره کنید و نتیجه رو در مرورگر ببینید چیشده ؟؟؟ با کلیک روی عکس باید به این سایت منتقل بشید درسته ؟؟؟

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

حالا این قسمت رو تغییر بدید target="_top

یعنی top رو تبدیل به blank کنید به شکل زیر

target="_blank

حالا فایل رو ذخیره کنید نتیجه در مرورگر باید اینطور باشه که با کلیک روی عکس سایت ما در یک صفحه جدید برای شما باز شه درسته ؟؟؟

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

در قسمت بعدی باید وضیفه border رو بشناسیم

این قسمت border="0" رو کلا از کدها حذف کنید حالا فایل رو ذخیره کنید چه اتفاقی افتاد در مرورگر ؟؟؟ دور عکس شما یه حاشیه آبی رنگ یا مشکی رنگ پیدا شده درسته ؟؟؟

چرا طراحان سایت علاقه به حذف کردن این حاشیه دارن ؟؟؟ دلیلش اینه که این حاشیه کلا زیبایی رو از طراحی های شما می گیره پس باید حذف شه ؟؟

حالا دوباره این قسمت border="0" رو اضافه کنید و فایل رو ذخیره کنید نتیجه در مرورگر باید این باشه که کادر حذف شده درسته ؟

**iman** · ۱۳۹۰-۰۴-۱۶

امروز یه تمرین جامع داریم که خودش یک یاد آوری هست و خودش یک آموزش

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

کد:

<html>
<head>
<title>تمرینات من</title>
</head>
<body>


<div style="text-align: left;">
<p><h1>man dar hale tamrin barname nevisi web be zaban HTML dar  site 98patogh hastam </h1></p>
</div>


<div style="text-align: right;">
<a href="http://www.98patogh.com/" target="_top">برای ورود به سایت  98 پاتوق باید اینجا کلیک کنید</a>
</div>

<br />
<br />

<div style="text-align: center;">
<img src="http://www.98patogh.com/uploads/posts/2010-08/1281301783_header.jpg" alt="98patogh" border="0" width="960" height="138" />
</div>

<br />
<br />


<div style="text-align: left; color:#008000; font-size:16px;">
<p>man mikham ye neveshte rangi benvisam ba range sabz </p>
</div>



<div style="text-align: right; font-family:tahoma; color:#0000cd; font-size:12px;">
<p> من دارم این نوشته رو با رنگ آبی می نویسم اندازه فونت نوشته سبز رنگ من 16 بود من این نوشته آبی رو با اندازه 12 می نویسم  و یه نکته مهم اینه که فونت نوشته قبلی من پیشفرض سیستم بود اما فونت این نوشته تاهما گذاشتم  که خودم هم دارم می بینم نوشتم فرق کرده . در ضمن چون نوشته من فارسی بود اون رو آوردم سمت راست صفحه . و نکته مهم اینه که می خوام در زیر عکسی از 98پاتوق بزارم که سایز این عکس رو کوچیکتر از اندازه واقعی کردم و اینکه دور اون رو حاشیه دادم و حاشیه ای که در تمرین های قبلی 0 بود و باعث میشد هیچ حاشیه ای دور عکس نباشه در اینجا 12 کردم حالا می بینید که حاشیه  دارم دور عکس . فایده دستور بردر در تمرین هام رو فهمیدم  . راستی اگه روی عکسی که من در زیر گذاشتم کلیک کنید به سایت 98 پاتوق که داره به من آموزش میده وارد میشید </p>
</div>


<br />
<br />

<div style="text-align: center;">
<a href="http://www.98patogh.com/" target="_top"><img src="http://www.98patogh.com/uploads/posts/2010-08/1281301783_header.jpg" alt="98patogh" border="12" width="460" height="70" /></a>
</div>

</body> 
</html>

توضیحات :

کد:

<title>تمرینات من</title>

اسم فایل رو گذاشتیم تمرینات من شما می تونید یک اسم دیگه بزارید در ضمن چون فرمت فایل رو utf انتخاب کردیم تونستیم در اون فارسی بنویسم و گرنه نوشته های فارسی خراب میشد

کد:

<div style="text-align: left;">
<p><h1>man dar hale tamrin barname nevisi web be zaban HTML dar  site 98patogh hastam </h1></p>
</div>

تگ div aَ شروع کردیم که نشون بدیم نوشته ما استایل خاصی داره . نوشتمون رو با left مشخص کردیم که سمت چپ صفحه هست و بعدش با نوشتن تگ <p> نشون دادیم که پاراگراف ما داره شروع میشه بعدش تگ <h1> رو گذاشتیم که نشون بدیم این تیترمون چه اندازه ای هست و بعدش نوشته خودمون رو گذاشتیم وقتی نوشته ما تموم شد تگ تیتر رو بستیم و بعدش تگ پاراگراف رو بستیم و در آخر حتما باید تگ div رو می بستیم

کد:

<div style="text-align: right;">
<a href="http://www.98patogh.com/" target="_top">برای ورود به سایت  98 پاتوق باید اینجا کلیک کنید</a>
</div>

مثل قبل تگ Div بار کردیم و نوشته رو سمت راست قرار دادیم با right و بعدش با شروع کردن تگ <a> نشون دادیم می خوایم یک متن لینک دار بنویسیم آدرس سایت مورد نظر رو گذاشتیم و بعدش تگ <a> رو نوشتن تگ </a> بستیم و بعدش تگ div v رو بستیم

کد:

<br />
<br />

دوتا تگ Br گذاشتیم تا نشون بدیم می خوایم بریم خط بعد

کد:

<div style="text-align: center;">
<img src="http://www.98patogh.com/uploads/posts/2010-08/1281301783_header.jpg" alt="98patogh" border="0" width="960" height="138" />
</div>

لینک یک عکس رو داشتیم می خواستیم اون رو در فایلمون نشون بدیم تگ div شروع کردیم و مشخص کردیم با center که وسط می نویسیم و بعدش تگ img رو شروع کردیم که نشون بدیم میخوایم یک عکس نمایش بدیم بعدش لینک عکس رو گذاشتیم و و در مرحله آخر مشخص کردیم اگر عکسمون پاک شد یا براش مشکلی پیش آمد به جای نوشته 98patogh نمایش داده بشه و border رو 0 گذاشتیم که عکسمون حاشیه نداشته باشه در آخر هم اندازه های واقعی عکس رو به width و height دادیم تا اون رو با اندازه واقعی نشون بده و در آخر تگ div رو بستیم

داره سخت تر میشه خوب دقت کنید

کد:

<div style="text-align: left; color:#008000; font-size:12px;">
<p>man mikham ye neveshte rangi benvisam ba range sabz </p>
</div>

تا اینجا طبق آموزش های قبلی تگ ها یادمون آمد با توجه به فاصله که در بین آموزش ها افتاده بود دیگه نمی گم چه تگی رو شروع کردیم یا چه تگی رو بستیم به جاش تخصیصی توضیح میدم

کد:

color:#008000;

با این قسمت در تگ div نشون دادیم که نوشتمون رنگش چه رنگی هست البته کد رنگ رو به دست آوردیم من واسه به دست آوردن کد رنگ ها از فتوشاپ استفاده کردیم و چند تا سایت در این زمینه هست که لازمه توی گوگل بزنید " کد رنگ ها " تا براتون بیاره اگه سایتش پیدا نشد بگید در تاپیک پرسش پاسخ تا بگم

کد:

font-size:10px;

نشون دادیم که سایز نوشته ما 12 هست

کد:

<div style="text-align: right; font-family:tahoma; color:#0000cd; font-size:12px;">
<p> من دارم این نوشته رو با رنگ آبی می نویسم اندازه فونت نوشته سبز رنگ من 16 بود من این نوشته آبی رو با اندازه 12 می نویسم  و یه نکته مهم اینه که فونت نوشته قبلی من پیشفرض سیستم بود اما فونت این نوشته تاهما گذاشتم  که خودم هم دارم می بینم نوشتم فرق کرده . در ضمن چون نوشته من فارسی بود اون رو آوردم سمت راست صفحه . و نکته مهم اینه که می خوام در زیر عکسی از 98پاتوق بزارم که سایز این عکس رو کوچیکتر از اندازه واقعی کردم و اینکه دور اون رو حاشیه دادم و حاشیه ای که در تمرین های قبلی 0 بود و باعث میشد هیچ حاشیه ای دور عکس نباشه در اینجا 12 کردم حالا می بینید که حاشیه  دارم دور عکس . فایده دستور بردر در تمرین هام رو فهمیدم  . راستی اگه روی عکسی که من در زیر گذاشتم کلیک کنید به سایت 98 پاتوق که داره به من آموزش میده وارد میشید </p>
</div>

مثل قبلی اندازه فونت رو 12 مشخص کردیم و رنگش رو یک رنگ دیگه

تنها فرقش اینه که سمت راست داریم می نویسیم و

کد:

font-family:tahoma;

و با قسمت بالا مشخص کردیم که فونت نوشتمون tahoma هست

کد:

<div style="text-align: center;">
<a href="http://www.98patogh.com/" target="_top"><img src="http://www.98patogh.com/uploads/posts/2010-08/1281301783_header.jpg" alt="98patogh" border="12" width="460" height="70" /></a>
</div>

به عکسمون لینک دادیم به اون حاشیه 12 دادیم تا تجربه کنیم حاشیه دادن دور عکس چی کار میکنه که البته خیلی کاره خاصی نمی کنه شاید با معنای این باشه که عکس ما لینک دار هست چون فقط زمانی می تونیم اینطوری حاشیه بدیم که لینکی وارد کنیم

مهمتر از همه اینکه اندازه های عکس رو دستکاری کردیم

****************

تمرینات

بعد هر تغییر باید فایل رو ذخیره کنید تا نتیجه تغییرات مشخص بشه اگر ذخیره نکنید انگار هیچ کاری نکردید

1 - کد رنگ ها رو دستکاری کنید باید رنگ نوشته ها عوض شه

مثلا به جای 800 در کد رنگ #008000 کد رنگ 7aacc1 بزارید ببینید اصلا این کد چه رنگی هست ؟

2 - سایز فونت ها رو تغییر بدید ببینید چی میشه ؟؟ چقد نوشته ها بزرگ کوچیک میشه

سایز تیترها رو تغییر بدید به جای 1 عدد 5 بزارید ببینید چی میشه منظورم از تیتر این tag ها هست

کد:

<h1> </h1>

3 - یک عکس در یک آپلود سنتر آپلود کنید لینک عکس رو به جای لینک های ما بزارید ببینید عکستون تغییر می کنه ؟

و ...

امیدوارم مورد قبول واقع بشه سوالی بود در تاپیک پرسش پاسخ به این آدرس بپرسید

[برای مشاهده لینک ها و یا عکس ها باید عضو سایت باشید . برای عضویت اینجا کلیک نمایید]

آموزش بعدی هفته بعد

مدت زمان این آموزش 1 ساعت و 40 دقیقه

**iman** · ۱۳۹۰-۰۵-۹

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

نمایش و چیدن اطلاعاتی که بصورت سطری و ستونی هستند مانند جدولی از اعداد و آمار تنها با استفاده از تگ های <p> <br>   بسیار مشکل می باشد . در اين آموزش با المان جدول ( Table ) سلولها يا خانه ها مرز و border در جداول و تگ های مربوطه مخصوصا تگهای TABLE ، TD , TR آشنا خواهيد شد .

تمام کدهای موجود در فایل را پاک کنید و کد زیر را داخل آن بریزید و آن را ذخیره کنید :

کد:

<html>
<head>
<title>تمرینات من</title>
</head>
<body>


<table border="1" dir="rtl">
<tr>
<td>رديف 1، سلول 1</td>
<td>رديف 1، سلول 2</td>
<td>رديف 1، سلول 3</td>
</tr>
<tr>
<td>رديف 2، سلول 1</td>
<td>رديف 2، سلول 2</td>
<td>رديف 2، سلول 3</td>
</tr>
</table>


</body> 
</html>

جدولها

برای تعريف جداول از تگ <table> استفاده ميشود. يک جدول از يک يا چند سطر که با کمک تگ <tr> تعريف ميشوند، تشکيل مي شود . هر رديف يا row از يک يا چند سلول، خانه يا cell تشکيل گرديده که با کمک تگ <td> ايجاد ميشوند. نام های td و tr به ترتيب خلاصه شده table row و table data مي باشند .
محتوی يک سلول ميتواند متن، تصوير، فهرستها، جداول ديگر، پاراگرافها و ... باشد .

مثال زير جدولی است با دو سطر و سه ستون :

کد:

 <table border="1" dir="rtl"> <tr> <td>رديف 1، سلول 1</td> <td>رديف 1، سلول 2</td> <td>رديف 1، سلول 3</td> </tr>  <tr> <td>رديف 2، سلول 1</td> <td>رديف 2، سلول 2</td> <td>رديف 2، سلول 3</td> </tr>  </table>

جدولها و شناسه border و dir :

در مثال بالا شناسه border مرز جدول را مشخص مي کند مقدار 1 مرزی با ضخامت يک پيکسل را نمايش خواهد داد و مقدار صفر جدول را بدون مرز نمايش خواهد داد . توجه داشته باشيد که حالت پيش فرض يعنی جدولی بدون شناسه border جداول بدون مرز را نمايش خواهد داد.

در مثال بالا شناسه dir يا direction و مقدار rtl برای آن سبب تعيين نمايش جهت متون از راست به چپ خواهد شد و چو ن در داخل تک table تعريف شده است این خاصیت به تمامی سلولهای جدول منتقل خواهد شد .
اگر جدول حاوی متون لاتین است نیازی به قید dir=ltr نیست و به صورت پیش فرض اطلاعات از چپ به راست چیده خواهند شد .

ساده ترين جدول ممکن در html جدولی است با يک سطر و يک ستون (<table><tr><td>Hi</td></tr></table>)

سر تیترها در جداول (Headings) :

سرتیترها در یک جدول با برچسب <th> مشخص می شوند .

کد:

   <table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row1,cel1</td>
<td>row1,cel2</td>
</tr>
</table>

خانه های خالی در جداول (Empty Cells)

اگر محتوای خانه ای از يک جدول خالی باشد چه چيزی بايد نمايش داده شود ؟ بسته به مرورگری که استفاده مي کنيد نتيجه نمايش متفاوت است و مثلا در مثال زير خانه خالی جدول بدون مرز نمايش داده خواهد شد :

کد:

<table border="1" dir="rtl"> <tr> <td>رديف 1، سلول 1</td> <td>رديف 1، سلول 2</td> </tr> <tr> <td>رديف 2، سلول 1</td> <td></td> </tr> </table>

در اينگونه موارد برای رفع مشکل کافی است که از non-breaking space ( ) يا همان نويسه و کاراکتر قاصله و بلانک استفاده شود و در مورد مثال ذکر شده مرورگر جدول را به شکل زير نمايش خواهد داد:

کد:

<table border="1" dir="rtl"> <tr> <td>رديف 1، سلول 1</td> <td>رديف 1، سلول 2</td> </tr> <tr> <td>رديف 2، سلول 1</td> <td>&nbsp;</td> </tr> </table>

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

اگر سوالی بود در تاپیک پرسش بپرسید امیدوارم به راحتی بتونید جدول ها رو یاد بگیرید

مدت زمان این آموزش 50 دقیقه

**iman** · ۱۳۹۰-۰۶-۱۷

فونت ها در Html

هر کدی در فایل های بالا دارید پاک کنید و کد زیر رو در اون قرار بدید و فایل رو ذخیره کنید و نتیجه رو با رفرش صفحه در مرورگر مشاهده کنید

کد:

<html>
<head>
<title>تمرینات من</title>
</head>
<body>

<p>
<font size="2" face="Verdana">
in tamrin man hast dar 98patogh.com.
</font>
</p>

<p>
<font size="4" face="Times">
mikhaham tamrin konam bar asas amoozesh 98patogh.com.
</font>
</p>

</body> 
</html>

اجزای کدهای بالا :

1 - اندازه فونت را تعیین می کند :

کد:

size="2"     size="number"

2 - اندازه فونت را افزایش می دهد :

کد:

size="+1"     size="+number"

3 - اندازه فونت را کاهش می دهد :

کد:

size="-1"     size="-number"

4 - نام فونت را معرفی می کند :

کد:

face="Times"     face="face-name"

5 - رنگ فونت را تعیین می کند :

کد:

color="#eeff00"     color="color-value"

6 - رنگ فونت را تعیین می کند :

کد:

color="red"     color="color-name"

توضیحات اجزای بالا :

1 - می تونید به جای شماره 2 هر شماره ای بزارید به همون مقدار اندازه فونت شما کاهش یا افزایش می باید

2 - مانند قسمت شماره 1 اما رو به مثبت

3 - مانند قسمت شماره 1 اما رو به منفی

4 - نام فونت رو معرفی می کنید در این قسمت . توجه فرمایید که حدود چند تا فونت هستند که استاندارد جهانی هستند این فونت ها به طور پیش فرض بر روی ویندوز شما نصب میشه شما می تونید از فونت هایی که خودتون بعدا در ویندوز نصب کردید استفاده کنید در فایل و خروجی فایل نمایش همون فونت رو خواهد داشت اما به این نکته توجه کنید که امکان داره فرد دیگری در همین نزدیکی شما اون فونت رو نداشته باشه روی سیستمش و اگر شما یه طراح وب باشید که به محض اتمام پروژه ها اون ها رو روی اینترنت اشتراک می زارید فرد دیگری که اون فونت رو نداشته باشه امکان داره نوشته ها رو نتونه ببینه یا اگه هم بتونه ببینه با فونت پیش فرض و اصلی ویندوزش ببینه

5 - رنگ فونت ها رو بر اساس کد اون ها تعیین می کند . برای به دست آوردن کدها می تونید از نرم افزار فتوشاپ استفاده کنید و یا اینکه در گوگل سرچ کنید کد رنگ ها سایت های مختلفی در این زمینه براتون میاره

6 - رنگ فونت ها رو بر اسا نام اونها تعیین می کنید می تونید از دیگشنری کمک بگیرید مثلا رنگ قرمز که ما در بالا استفاده کردیم نام red رو داره و رنگ آبی نام blue و ...

مشکلی داشتید و یا سوالی داشتید در تاپیک پرسش پاسخ پاسخگوی سوال شما هستم

5 ارسال آخر توسط iman
موضوعات	انجمن	آخرین ارسال کننده	پاسخ ها	نمایش ها	آخرین ارسال
تبریک روز زن	مناسبت ها	mali70	11	76	۱۳۹۱-۰۲-۲۲ ۰۷:۴۲ بعد از ظهر
فیل+ترینگ سایت برای بار سوم ( دلیل )	قوانین و اخبار سایت	iman	2	81	۱۳۹۱-۰۱-۳۰ ۰۳:۳۱ بعد از ظهر
عکس المان های نوروزی 1391 ( سطح مشهد )	مکان های دیدنی	jamshid1107	3	57	۱۳۹۱-۰۱-۱۲ ۰۵:۰۷ بعد از ظهر
مسابقه زیباترین پیامک تبریک نوروز ( 1391 )	مسابقات انجمن	خانم مهربون	12	165	۱۳۹۰-۱۲-۲۹ ۰۱:۳۷ بعد از ظهر
تبریک نوروز 1391	مناسبت ها	mohammadwrw	23	258	۱۳۹۰-۱۲-۲۷ ۰۳:۳۷ بعد از ظهر

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

موضوعات مشابه
موضوع	نویسنده موضوع	انجمن	پاسخ ها	آخرين نوشته
آموزش آداب و رسوم رقص	m2sh	سایر	7	۱۳۸۹-۱۰-۲۷ ۰۲:۱۷ بعد از ظهر
مهمترین اخبار سازمان سنجش برای کنکوری ها	feedback	آموزش کنکور	5	۱۳۸۹-۰۶-۱۶ ۰۱:۳۲ بعد از ظهر
آموزش کنکور : بخش ششم (معرفی رشته های گروه زبان)	feedback	آموزش کنکور	6	۱۳۸۹-۰۵-۳۰ ۰۱:۱۰ بعد از ظهر
دانلود کتاب آموزش کامل برنامه نویسی css به زبان فارسی	ASHRAF	كتابها و مقالات كامپيوتر	0	۱۳۸۹-۰۵-۸ ۰۸:۳۰ بعد از ظهر
جزییات آزمون استخدامی آموزش و پرورش	sama33	اخبار روز	2	۱۳۸۹-۰۲-۹ ۱۰:۳۴ بعد از ظهر

کاربران در حال دیدن موضوع: 1 نفر (0 عضو و 1 مهمان)

تبلیغات